import { Business, CameraAlt, CheckCircle, Email, Save, Send, Visibility, VisibilityOff } from "@mui/icons-material";
import {
  Alert,
  Avatar,
  Box,
  Button,
  Chip,
  CircularProgress,
  Collapse,
  Divider,
  FormControl,
  FormControlLabel,
  IconButton,
  InputAdornment,
  InputLabel,
  MenuItem,
  Paper,
  Select,
  Switch,
  TextField,
  Typography,
} from "@mui/material";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { useEffect, useRef, useState } from "react";
import { Controller, useForm } from "react-hook-form";
import { toast } from "sonner";
import api from "../../../api/api.config";
import { getEmpresaCorreo, testEmpresaCorreo, updateEmpresa, upsertEmpresaCorreo } from "../../../api/empresas.service";
import { getReferenciales } from "../../../api/referenciales.service";
import { useEmpresa } from "../../../context/EmpresaContext";
import { useAuthStore } from "../../../store/AuthStore";

export const BasicosConfig = () => {
  const { empresa, empresaId, refetch } = useEmpresa();
  const { isSuperAdmin } = useAuthStore();
  const queryClient = useQueryClient();
  const fileInputRef = useRef(null);
  const [logoPreview, setLogoPreview] = useState(null);
  const [uploadingLogo, setUploadingLogo] = useState(false);

  // SuperAdmin puede editar campos adicionales como RUC, DV, tipo_contribuyente, estado
  const canEditAdvanced = isSuperAdmin;

  // Cargar referenciales para estado_empresa y tipo_contribuyente
  const { data: referenciales } = useQuery({
    queryKey: ["referenciales"],
    queryFn: getReferenciales,
    staleTime: 60 * 60 * 1000,
  });

  const estadosEmpresa = referenciales?.estado_empresa || [];
  const tiposContribuyente = referenciales?.tipo_contribuyente || [];

  console.log({ tiposContribuyente });
  const {
    control,
    handleSubmit,
    reset,
    watch,
    formState: { errors },
  } = useForm({
    defaultValues: {
      ruc: "",
      dv: "",
      razon_social: "",
      nombre_fantasia: null,
      email: "",
      celular: "",
      tipo_contribuyente: "",
      estado_id: "",
      imputa_iva: true,
      imputa_ire: true,
      imputa_irp_rsp: false,
    },
  });

  const rucValue = watch("ruc");

  // Cargar datos de la empresa cuando estén disponibles
  useEffect(() => {
    if (empresa) {
      reset({
        ruc: empresa.ruc || "",
        dv: empresa.dv || "",
        razon_social: empresa.razon_social || "",
        nombre_fantasia: empresa.nombre_fantasia || null,
        email: empresa.email || "",
        celular: empresa.celular || "",
        tipo_contribuyente: empresa.tipo_contribuyente || "",
        estado_id: empresa.estado_empresa.id || "",
        imputa_iva: empresa.imputa_iva ?? true,
        imputa_ire: empresa.imputa_ire ?? true,
        imputa_irp_rsp: empresa.imputa_irp_rsp ?? false,
      });
      setLogoPreview(empresa.logo || null);
    }
  }, [empresa, reset]);

  const mutation = useMutation({
    mutationFn: (data) => updateEmpresa(empresaId, data),
    onSuccess: () => {
      toast.success("Datos de empresa actualizados");
      queryClient.invalidateQueries({ queryKey: ["empresa"] });
      refetch();
    },
    onError: (error) => {
      toast.error(error.response?.data?.message || "Error al actualizar empresa");
    },
  });

  const handleLogoChange = async (e) => {
    const file = e.target.files?.[0];
    if (!file) return;

    if (!file.type.startsWith("image/")) {
      toast.error("Solo se permiten archivos de imagen");
      return;
    }

    // Preview local
    const reader = new FileReader();
    reader.onload = (e) => setLogoPreview(e.target.result);
    reader.readAsDataURL(file);

    // Upload
    setUploadingLogo(true);
    try {
      const formData = new FormData();
      formData.append("file", file);
      await api.post(`/empresas/${empresaId}/logo`, formData, {
        headers: { "Content-Type": "multipart/form-data" },
      });
      toast.success("Logo actualizado correctamente");
      refetch();
    } catch (error) {
      toast.error(error.response?.data?.message || "Error al subir logo");
      setLogoPreview(empresa?.logo || null);
    } finally {
      setUploadingLogo(false);
    }
  };

  const onSubmit = (data) => {
    // Calcular tipo_contribuyente automáticamente según RUC
    // 1 = Persona Jurídica (RUC >= 80000000), 2 = Persona Física
    const rucNumerico = parseInt(data.ruc, 10);
    const tipoContribuyenteCalculado = rucNumerico >= 80000000 ? 2 : 1;

    const payload = {
      ...data,
      tipo_contribuyente: tipoContribuyenteCalculado,
    };

    mutation.mutate(payload);
  };

  // Obtener descripción del tipo contribuyente
  const tipoContribuyenteDesc = empresa?.tipo_contribuyente_empresas?.descripcion || "No definido";

  // Obtener descripción del estado
  const estadoDesc = empresa?.estado_empresa?.descripcion || "Activo";

  return (
    <Paper sx={{ p: { xs: 2, sm: 3 } }}>
      {/* Header responsive */}
      <Box
        sx={{
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between",
          mb: 1,
          gap: 1,
          flexWrap: "wrap",
        }}
      >
        <Typography
          variant="h6"
          sx={{
            display: "flex",
            alignItems: "center",
            gap: 1,
            fontSize: { xs: "1rem", sm: "1.25rem" },
          }}
        >
          <Business color="primary" />
          Información de la Empresa
        </Typography>
        <Chip icon={<CheckCircle />} label={estadoDesc} color="success" size="small" />
      </Box>
      <Typography variant="body2" color="text.secondary" sx={{ mb: 2, fontSize: { xs: "0.75rem", sm: "0.875rem" } }}>
        Datos básicos de identificación fiscal
      </Typography>
      <Divider sx={{ mb: 3 }} />

      {/* Sección Logo y datos principales — columna en mobile */}
      <Box
        sx={{
          display: "flex",
          flexDirection: { xs: "column", sm: "row" },
          alignItems: { xs: "center", sm: "flex-start" },
          gap: { xs: 2, sm: 3 },
          mb: 4,
          p: { xs: 2, sm: 3 },
          bgcolor: "action.hover",
          borderRadius: 2,
          border: "1px solid",
          borderColor: "divider",
        }}
      >
        {/* Logo con upload */}
        <Box sx={{ position: "relative" }}>
          <Avatar
            src={logoPreview}
            sx={{
              width: 120,
              height: 120,
              bgcolor: "primary.main",
              fontSize: "2.5rem",
              border: "3px solid",
              borderColor: uploadingLogo ? "warning.main" : "primary.light",
              opacity: uploadingLogo ? 0.6 : 1,
              transition: "all 0.3s ease",
            }}
          >
            {empresa?.razon_social?.charAt(0) || "E"}
          </Avatar>
          {uploadingLogo && (
            <CircularProgress
              size={40}
              sx={{
                position: "absolute",
                top: "50%",
                left: "50%",
                marginTop: "-20px",
                marginLeft: "-20px",
                color: "primary.main",
              }}
            />
          )}
          <input type="file" ref={fileInputRef} onChange={handleLogoChange} accept="image/*" style={{ display: "none" }} />
          <Button
            size="small"
            variant="contained"
            onClick={() => fileInputRef.current?.click()}
            disabled={uploadingLogo}
            sx={{
              position: "absolute",
              bottom: -8,
              left: "50%",
              transform: "translateX(-50%)",
              minWidth: "auto",
              px: 1,
              py: 0.5,
              fontSize: "0.7rem",
            }}
            startIcon={<CameraAlt sx={{ fontSize: "1rem" }} />}
          >
            {uploadingLogo ? "..." : "Cambiar"}
          </Button>
        </Box>

        {/* Datos de solo lectura */}
        <Box
          sx={{
            flex: 1,
            textAlign: { xs: "center", sm: "left" },
            width: { xs: "100%", sm: "auto" },
          }}
        >
          <Typography
            variant="h5"
            sx={{
              fontWeight: 600,
              mb: 0.5,
              fontSize: { xs: "1.25rem", sm: "1.5rem" },
            }}
          >
            {empresa?.razon_social || "Cargando..."}
          </Typography>
          <Box
            sx={{
              display: "flex",
              gap: 1,
              mb: 2,
              flexWrap: "wrap",
              justifyContent: { xs: "center", sm: "flex-start" },
            }}
          >
            <Chip label={`RUC: ${empresa?.ruc || ""}-${empresa?.dv || ""}`} size="small" color="primary" variant="outlined" />
            <Chip label={tipoContribuyenteDesc} size="small" color="secondary" variant="outlined" />
          </Box>
          <Typography variant="body2" color="text.secondary">
            {canEditAdvanced ? "Como superadmin puedes modificar todos los campos." : "El RUC y tipo de contribuyente son datos obtenidos de la SET y no pueden ser modificados."}
          </Typography>
        </Box>
      </Box>

      {/* Formulario editable */}
      <Box component="form" onSubmit={handleSubmit(onSubmit)} sx={{ display: "flex", flexDirection: "column", gap: 2.5 }}>
        <Typography variant="subtitle2" color="text.secondary" sx={{ mb: -1 }}>
          {canEditAdvanced ? "Todos los campos (Superadmin)" : "Datos editables"}
        </Typography>

        {/* Campos solo para SuperAdmin */}
        {canEditAdvanced && (
          <Box sx={{ display: "flex", gap: 2 }}>
            <Controller
              name="ruc"
              control={control}
              rules={{ required: "El RUC es requerido" }}
              render={({ field }) => <TextField {...field} label="RUC" size="small" fullWidth error={!!errors.ruc} helperText={errors.ruc?.message} />}
            />
            <Controller
              name="dv"
              control={control}
              rules={{ required: "El DV es requerido" }}
              render={({ field }) => <TextField {...field} label="DV" size="small" sx={{ maxWidth: 80 }} error={!!errors.dv} helperText={errors.dv?.message} />}
            />
          </Box>
        )}

        <Controller
          name="razon_social"
          control={control}
          rules={{ required: "La razón social es requerida" }}
          render={({ field }) => <TextField {...field} label="Razón Social" size="small" fullWidth error={!!errors.razon_social} helperText={errors.razon_social?.message} />}
        />

        <Controller
          name="nombre_fantasia"
          control={control}
          render={({ field }) => <TextField {...field} label="Nombre Fantasía" size="small" fullWidth placeholder="Nombre comercial de la empresa" />}
        />

        <Box
          sx={{
            display: "flex",
            flexDirection: { xs: "column", sm: "row" },
            gap: 2,
          }}
        >
          <Controller
            name="email"
            control={control}
            rules={{
              pattern: {
                value: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
                message: "Email inválido",
              },
            }}
            render={({ field }) => <TextField {...field} label="Email" size="small" fullWidth error={!!errors.email} helperText={errors.email?.message} />}
          />

          <Controller name="celular" control={control} render={({ field }) => <TextField {...field} label="Celular" size="small" fullWidth placeholder="Ej: 0981123456" />} />
        </Box>

        {/* Tipo Contribuyente y Estado solo para SuperAdmin */}
        {canEditAdvanced && (
          <Box
            sx={{
              display: "flex",
              flexDirection: { xs: "column", sm: "row" },
              gap: 2,
            }}
          >
            <Controller
              name="tipo_contribuyente"
              control={control}
              render={({ field }) => (
                <FormControl size="small" fullWidth>
                  <InputLabel>Tipo Contribuyente</InputLabel>
                  <Select {...field} label="Tipo Contribuyente">
                    {tiposContribuyente.map((tipo) => (
                      <MenuItem key={tipo.id} value={tipo.id}>
                        {tipo.descripcion}
                      </MenuItem>
                    ))}
                  </Select>
                </FormControl>
              )}
            />
            <Controller
              name="estado_id"
              control={control}
              render={({ field }) => (
                <FormControl size="small" fullWidth>
                  <InputLabel>Estado</InputLabel>
                  <Select {...field} label="Estado">
                    {estadosEmpresa.map((estado) => (
                      <MenuItem key={estado.id} value={estado.id}>
                        {estado.descripcion}
                      </MenuItem>
                    ))}
                  </Select>
                </FormControl>
              )}
            />
          </Box>
        )}

        {/* ─── Obligaciones fiscales (export Marangatu) ─── */}
        <Divider sx={{ mt: 1 }} />
        <Box>
          <Typography variant="subtitle2" sx={{ fontWeight: 600 }}>
            Obligaciones fiscales
          </Typography>
          <Typography variant="caption" color="text.secondary" sx={{ display: "block", mb: 1 }}>
            Definen los campos IMPUTA IVA / IRE / IRP-RSP del archivo del Registro de Comprobantes que se importa en Marangatu.
          </Typography>
          <Box sx={{ display: "flex", flexWrap: "wrap", gap: { xs: 0.5, sm: 3 } }}>
            <Controller
              name="imputa_iva"
              control={control}
              render={({ field }) => (
                <FormControlLabel
                  control={<Switch checked={!!field.value} onChange={field.onChange} color="primary" />}
                  label="Imputa IVA"
                />
              )}
            />
            <Controller
              name="imputa_ire"
              control={control}
              render={({ field }) => (
                <FormControlLabel
                  control={<Switch checked={!!field.value} onChange={field.onChange} color="primary" />}
                  label="Imputa IRE"
                />
              )}
            />
            <Controller
              name="imputa_irp_rsp"
              control={control}
              render={({ field }) => (
                <FormControlLabel
                  control={<Switch checked={!!field.value} onChange={field.onChange} color="primary" />}
                  label="Imputa IRP-RSP"
                />
              )}
            />
          </Box>
        </Box>

        <Button type="submit" variant="contained" startIcon={<Save />} disabled={mutation.isPending} sx={{ mt: 1, alignSelf: "flex-start" }}>
          {mutation.isPending ? "Guardando..." : "Guardar Cambios"}
        </Button>
      </Box>

      {/* ─── Sección Correo Notificación SMTP ─── */}
      <CorreoNotificacionSection empresaId={empresaId} />
    </Paper>
  );
};

// ─── Componente Correo Notificación ─────────────────────────────────
const CorreoNotificacionSection = ({ empresaId }) => {
  const queryClient = useQueryClient();
  const [showPassword, setShowPassword] = useState(false);
  const [testEmail, setTestEmail] = useState("");
  const [testOpen, setTestOpen] = useState(false);
  const [usarPropio, setUsarPropio] = useState(false);

  const {
    control: correoControl,
    handleSubmit: handleCorreoSubmit,
    reset: resetCorreo,
    formState: { errors: correoErrors },
  } = useForm({
    defaultValues: {
      host: "",
      puerto: "465",
      username: "",
      password: "",
      email: "",
      envio_ssl: true,
      adjunto: true,
    },
  });

  const { data: correoData, isLoading: correoLoading } = useQuery({
    queryKey: ["empresa-correo", empresaId],
    queryFn: () => getEmpresaCorreo(empresaId),
    enabled: !!empresaId,
  });

  useEffect(() => {
    if (correoData?.data) {
      const d = correoData.data;
      setUsarPropio(d.usar_correo_propio ?? false);
      if (d.correo_propio) {
        const c = d.correo_propio;
        resetCorreo({
          host: c.host || "",
          puerto: c.puerto || "465",
          username: c.username || "",
          password: c.password || "",
          email: c.email || "",
          envio_ssl: c.envio_ssl ?? true,
          adjunto: c.adjunto ?? true,
        });
      }
    }
  }, [correoData, resetCorreo]);

  const correoMutation = useMutation({
    mutationFn: (data) => upsertEmpresaCorreo(empresaId, data),
    onSuccess: () => {
      toast.success("Configuración de correo guardada");
      queryClient.invalidateQueries({
        queryKey: ["empresa-correo", empresaId],
      });
    },
    onError: (error) => {
      toast.error(error.response?.data?.message || "Error al configurar correo");
    },
  });

  const testMutation = useMutation({
    mutationFn: (destinatario) => testEmpresaCorreo(empresaId, destinatario),
    onSuccess: () => {
      toast.success("Correo de prueba enviado. Revisá tu bandeja de entrada.");
      setTestOpen(false);
      setTestEmail("");
    },
    onError: (error) => {
      toast.error(error.response?.data?.message || "Error al enviar correo de prueba");
    },
  });

  const onCorreoSubmit = (data) => {
    const payload = {
      usar_correo_propio: usarPropio,
      template_personalizado: false,
      adjunto: data.adjunto ?? true,
    };
    if (usarPropio) {
      Object.assign(payload, {
        host: data.host,
        puerto: data.puerto,
        username: data.username,
        password: data.password,
        email: data.email,
        envio_ssl: data.envio_ssl,
      });
    }
    correoMutation.mutate(payload);
  };

  const handleSendTest = () => {
    if (!testEmail || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(testEmail)) {
      toast.error("Ingresá un email válido");
      return;
    }
    testMutation.mutate(testEmail);
  };

  const systemEmail = correoData?.data?.correo_system?.email;
  const hasSystemCorreo = !!systemEmail;

  return (
    <>
      <Divider sx={{ my: 4 }} />
      <Box
        sx={{
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between",
          mb: 1,
          flexWrap: "wrap",
          gap: 1,
        }}
      >
        <Typography
          variant="h6"
          sx={{
            display: "flex",
            alignItems: "center",
            gap: 1,
            fontSize: { xs: "1rem", sm: "1.25rem" },
          }}
        >
          <Email color="primary" />
          Correo de Notificación
        </Typography>
        <Chip label={usarPropio ? "Correo propio" : "Correo del sistema"} color={usarPropio ? "primary" : "default"} size="small" icon={<CheckCircle />} />
      </Box>
      <Typography variant="body2" color="text.secondary" sx={{ mb: 2, fontSize: { xs: "0.75rem", sm: "0.875rem" } }}>
        Configurá cómo se enviarán las notificaciones de facturación electrónica por correo
      </Typography>

      {correoLoading ? (
        <Box sx={{ display: "flex", justifyContent: "center", py: 4 }}>
          <CircularProgress size={32} />
        </Box>
      ) : (
        <Box component="form" onSubmit={handleCorreoSubmit(onCorreoSubmit)} sx={{ display: "flex", flexDirection: "column", gap: 2.5 }}>
          {/* ─── Selector: System vs Propio ─── */}
          <Box sx={{ display: "flex", flexDirection: "column", gap: 1.5 }}>
            <Box
              onClick={() => setUsarPropio(false)}
              sx={{
                p: 2,
                borderRadius: 2,
                cursor: "pointer",
                transition: "all 0.2s",
                border: "2px solid",
                borderColor: !usarPropio ? "primary.main" : "divider",
                bgcolor: !usarPropio ? "primary.50" : "transparent",
                "&:hover": { borderColor: "primary.light" },
              }}
            >
              <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
                <Box
                  sx={{
                    width: 20,
                    height: 20,
                    borderRadius: "50%",
                    border: "2px solid",
                    borderColor: !usarPropio ? "primary.main" : "text.disabled",
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "center",
                  }}
                >
                  {!usarPropio && (
                    <Box
                      sx={{
                        width: 10,
                        height: 10,
                        borderRadius: "50%",
                        bgcolor: "primary.main",
                      }}
                    />
                  )}
                </Box>
                <Typography variant="subtitle2" fontWeight={600}>
                  Usar correo del sistema
                </Typography>
              </Box>
              <Typography variant="body2" color="text.secondary" sx={{ ml: 3.5, mt: 0.5 }}>
                Las notificaciones se enviarán desde el correo de NovasisPY. No necesitás configurar nada.
              </Typography>
              {hasSystemCorreo && !usarPropio && (
                <Alert severity="info" icon={<Email fontSize="small" />} sx={{ mt: 1.5, ml: 3.5 }}>
                  Las facturas se enviarán desde: <strong>{systemEmail}</strong>
                </Alert>
              )}
            </Box>

            <Box
              onClick={() => setUsarPropio(true)}
              sx={{
                p: 2,
                borderRadius: 2,
                cursor: "pointer",
                transition: "all 0.2s",
                border: "2px solid",
                borderColor: usarPropio ? "primary.main" : "divider",
                bgcolor: usarPropio ? "primary.50" : "transparent",
                "&:hover": { borderColor: "primary.light" },
              }}
            >
              <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
                <Box
                  sx={{
                    width: 20,
                    height: 20,
                    borderRadius: "50%",
                    border: "2px solid",
                    borderColor: usarPropio ? "primary.main" : "text.disabled",
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "center",
                  }}
                >
                  {usarPropio && (
                    <Box
                      sx={{
                        width: 10,
                        height: 10,
                        borderRadius: "50%",
                        bgcolor: "primary.main",
                      }}
                    />
                  )}
                </Box>
                <Typography variant="subtitle2" fontWeight={600}>
                  Usar mis propias credenciales SMTP
                </Typography>
              </Box>
              <Typography variant="body2" color="text.secondary" sx={{ ml: 3.5, mt: 0.5 }}>
                Configurá tu servidor SMTP para que las facturas se envíen desde tu propio correo empresarial.
              </Typography>
            </Box>
          </Box>

          {/* ─── Formulario SMTP (solo si usa propio) ─── */}
          <Collapse in={usarPropio}>
            <Box sx={{ display: "flex", flexDirection: "column", gap: 2.5, pt: 1 }}>
              <Box
                sx={{
                  display: "flex",
                  flexDirection: { xs: "column", sm: "row" },
                  gap: 2,
                }}
              >
                <Controller
                  name="host"
                  control={correoControl}
                  rules={usarPropio ? { required: "El host SMTP es requerido" } : {}}
                  render={({ field }) => (
                    <TextField {...field} label="Servidor SMTP" size="small" fullWidth placeholder="Ej: smtp.gmail.com" error={!!correoErrors.host} helperText={correoErrors.host?.message} />
                  )}
                />
                <Controller
                  name="puerto"
                  control={correoControl}
                  rules={usarPropio ? { required: "El puerto es requerido" } : {}}
                  render={({ field }) => (
                    <TextField
                      {...field}
                      label="Puerto"
                      size="small"
                      fullWidth
                      sx={{ maxWidth: { sm: 120 } }}
                      placeholder="465"
                      error={!!correoErrors.puerto}
                      helperText={correoErrors.puerto?.message}
                    />
                  )}
                />
              </Box>

              <Box
                sx={{
                  display: "flex",
                  flexDirection: { xs: "column", sm: "row" },
                  gap: 2,
                }}
              >
                <Controller
                  name="username"
                  control={correoControl}
                  rules={usarPropio ? { required: "El usuario es requerido" } : {}}
                  render={({ field }) => (
                    <TextField {...field} label="Usuario SMTP" size="small" fullWidth placeholder="usuario@dominio.com" error={!!correoErrors.username} helperText={correoErrors.username?.message} />
                  )}
                />
                <Controller
                  name="password"
                  control={correoControl}
                  rules={usarPropio ? { required: "La contraseña es requerida" } : {}}
                  render={({ field }) => (
                    <TextField
                      {...field}
                      label="Contraseña SMTP"
                      size="small"
                      fullWidth
                      type={showPassword ? "text" : "password"}
                      error={!!correoErrors.password}
                      helperText={correoErrors.password?.message}
                      InputProps={{
                        endAdornment: (
                          <InputAdornment position="end">
                            <IconButton size="small" onClick={() => setShowPassword(!showPassword)}>
                              {showPassword ? <VisibilityOff fontSize="small" /> : <Visibility fontSize="small" />}
                            </IconButton>
                          </InputAdornment>
                        ),
                      }}
                    />
                  )}
                />
              </Box>

              <Controller
                name="email"
                control={correoControl}
                rules={
                  usarPropio
                    ? {
                        required: "El email remitente es requerido",
                        pattern: {
                          value: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
                          message: "Email inválido",
                        },
                      }
                    : {}
                }
                render={({ field }) => (
                  <TextField
                    {...field}
                    label="Email Remitente"
                    size="small"
                    fullWidth
                    placeholder="facturacion@empresa.com"
                    error={!!correoErrors.email}
                    helperText={correoErrors.email?.message || "Este email aparecerá como remitente en las facturas"}
                  />
                )}
              />

              <Box
                sx={{
                  display: "flex",
                  flexWrap: "wrap",
                  gap: { xs: 1, sm: 3 },
                }}
              >
                <Controller
                  name="envio_ssl"
                  control={correoControl}
                  render={({ field }) => <FormControlLabel control={<Switch checked={field.value} onChange={field.onChange} color="primary" />} label="SSL/TLS" />}
                />
              </Box>
            </Box>
          </Collapse>

          {/* ─── Adjuntar KuDE (siempre visible) ─── */}
          <Controller
            name="adjunto"
            control={correoControl}
            render={({ field }) => (
              <Box>
                <FormControlLabel control={<Switch checked={field.value} onChange={field.onChange} color="primary" />} label="Adjuntar KuDE (PDF)" />
                <Typography variant="caption" color="text.secondary" sx={{ display: "block", ml: 4.5, mt: -0.5 }}>
                  {field.value ? "El KuDE de facturación electrónica se enviará como archivo adjunto en el correo." : "Se enviará un enlace de descarga directa del KuDE (PDF) y XML."}
                </Typography>
              </Box>
            )}
          />

          {/* ─── Botones ─── */}
          <Box sx={{ display: "flex", gap: 2, flexWrap: "wrap", mt: 1 }}>
            <Button type="submit" variant="contained" startIcon={<Save />} disabled={correoMutation.isPending}>
              {correoMutation.isPending ? "Guardando..." : "Guardar Configuración"}
            </Button>
            <Button variant="outlined" startIcon={<Send />} onClick={() => setTestOpen(!testOpen)}>
              Enviar correo de prueba
            </Button>
          </Box>

          {/* ─── Test Email ─── */}
          <Collapse in={testOpen}>
            <Alert severity="info" sx={{ mb: 2 }}>
              Enviá un correo de prueba para verificar que la configuración es correcta.
              {!usarPropio && " Se usarán las credenciales del sistema."}
            </Alert>
            <Box sx={{ display: "flex", gap: 2, alignItems: "flex-start" }}>
              <TextField value={testEmail} onChange={(e) => setTestEmail(e.target.value)} label="Email destinatario" size="small" fullWidth placeholder="tucorreo@ejemplo.com" sx={{ maxWidth: 400 }} />
              <Button variant="contained" color="success" startIcon={<Send />} onClick={handleSendTest} disabled={testMutation.isPending} sx={{ whiteSpace: "nowrap" }}>
                {testMutation.isPending ? "Enviando..." : "Enviar"}
              </Button>
            </Box>
          </Collapse>
        </Box>
      )}
    </>
  );
};