import {
  Box,
  Button,
  Chip,
  CircularProgress,
  Dialog,
  DialogActions,
  DialogContent,
  DialogTitle,
  Divider,
  FormControl,
  InputLabel,
  MenuItem,
  Select,
  TextField,
  Typography,
  useMediaQuery,
  useTheme,
} from "@mui/material";
import { useEffect } from "react";
import { Controller, useForm } from "react-hook-form";
import {
  useCreateAgenteTransporteMutation,
  useUpdateAgenteTransporteMutation,
} from "../../../tanstack/AgentesTransporteStack";
import { useReferencialesQuery } from "../../../tanstack/ReferencialesStack";
import { useDnitAutofillRHF } from "../../../hooks/useDnitAutofillRHF";
import { PersonaFormFields } from "./PersonaFormFields";

const TIPOS_AGENTE = [
  { value: "transporte", label: "Transporte" },
  { value: "aduanas", label: "Aduanas" },
  { value: "ambos", label: "Transporte y Aduanas" },
];

export const AgenteTransporteFormDialog = ({ open, onClose, agente }) => {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down("md"));
  const isEdit = !!agente;
  const createMutation = useCreateAgenteTransporteMutation();
  const updateMutation = useUpdateAgenteTransporteMutation();

  const { control, handleSubmit, reset, watch, setValue, formState: { errors } } = useForm({
    defaultValues: {
      naturaleza_id: "",
      tipo_documento_id: "",
      razon_social: "",
      ruc: "",
      dv: "",
      nro_documento: "",
      direccion: "",
      nro_casa: "0",
      celular: "",
      email: "",
      tipo_agente: "transporte",
      nro_habilitacion_aduana: "",
    },
  });

  useEffect(() => {
    if (open) {
      if (agente) {
        const p = agente.personas;
        reset({
          naturaleza_id: p?.naturaleza_receptor?.id || "",
          tipo_documento_id: p?.tipo_documento_identidad?.id || "",
          razon_social: p?.razon_social || "",
          ruc: p?.ruc || "",
          dv: p?.dv ?? "",
          nro_documento: p?.nro_documento || "",
          direccion: p?.direccion || "",
          celular: p?.celular || "",
          email: p?.email || "",
          tipo_agente: agente.tipo_agente || "transporte",
          nro_habilitacion_aduana: agente.nro_habilitacion_aduana || "",
        });
      } else {
        reset();
      }
    }
  }, [open, agente, reset]);

  // Autocompletado DNIT (permite contribuyente y no contribuyente): arranca en No
  // Contribuyente + Cédula, y al tipear el documento la DNIT decide la naturaleza.
  const { data: referenciales } = useReferencialesQuery();
  const { loadingDnit } = useDnitAutofillRHF({
    open,
    isEdit,
    watch,
    setValue,
    naturalezas: referenciales?.naturaleza_receptor || [],
    tiposDocumento: referenciales?.tipo_documento_identidad || [],
  });

  const onSubmit = (data) => {
    const payload = { ...data };
    const uuidFields = ["tipo_documento_id", "tipo_contribuyente_id", "pais_id", "ciudad_id"];
    uuidFields.forEach((f) => { if (!payload[f]) payload[f] = null; });
    const optionalFields = ["ruc", "nro_documento", "nro_habilitacion_aduana", "email", "celular", "direccion", "nro_casa"];
    optionalFields.forEach((f) => { if (!payload[f]) payload[f] = null; });
    payload.dv = payload.dv !== "" && payload.dv != null ? Number(payload.dv) : null;
    if (isEdit) {
      updateMutation.mutate({ id: agente.id, data: payload }, { onSuccess: onClose });
    } else {
      createMutation.mutate(payload, { onSuccess: onClose });
    }
  };

  const isPending = createMutation.isPending || updateMutation.isPending;

  return (
    <Dialog open={open} onClose={onClose} maxWidth="md" fullWidth fullScreen={isMobile}>
      <DialogTitle>
        <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
          {isEdit ? "Editar Agente de Transporte" : "Nuevo Agente de Transporte"}
          {isEdit && <Chip label="Edición" size="small" color="warning" />}
        </Box>
      </DialogTitle>
      <form onSubmit={handleSubmit(onSubmit)}>
        <DialogContent dividers>
          <PersonaFormFields control={control} errors={errors} watch={watch} setValue={setValue} preferNoContribuyente loadingDnit={loadingDnit} />

          <Divider sx={{ my: 3 }}>
            <Typography variant="caption" color="text.secondary">
              Datos de Agente
            </Typography>
          </Divider>

          <Box sx={{ display: "grid", gridTemplateColumns: { xs: "1fr", md: "1fr 1fr" }, gap: 2 }}>
            <Controller
              name="tipo_agente"
              control={control}
              render={({ field }) => (
                <FormControl fullWidth>
                  <InputLabel>Tipo Agente</InputLabel>
                  <Select {...field} label="Tipo Agente">
                    {TIPOS_AGENTE.map((t) => (
                      <MenuItem key={t.value} value={t.value}>{t.label}</MenuItem>
                    ))}
                  </Select>
                </FormControl>
              )}
            />
            <Controller
              name="nro_habilitacion_aduana"
              control={control}
              render={({ field }) => (
                <TextField {...field} label="Nro. Habilitación Aduana" fullWidth inputProps={{ maxLength: 50 }} />
              )}
            />
          </Box>
        </DialogContent>
        <DialogActions sx={{ p: 2, gap: 1 }}>
          <Button onClick={onClose} variant="outlined" disabled={isPending}>Cancelar</Button>
          <Button type="submit" variant="contained" disabled={isPending}>
            {isPending ? <CircularProgress size={20} /> : isEdit ? "Guardar" : "Crear"}
          </Button>
        </DialogActions>
      </form>
    </Dialog>
  );
};