import {
  Box,
  Button,
  Chip,
  CircularProgress,
  Dialog,
  DialogActions,
  DialogContent,
  DialogTitle,
  Divider,
  FormControl,
  FormHelperText,
  InputLabel,
  MenuItem,
  Select,
  TextField,
  Typography,
  useMediaQuery,
  useTheme,
} from "@mui/material";
import { useEffect, useRef } from "react";
import { Controller, useForm } from "react-hook-form";
import {
  useCreateTransportistaMutation,
  useUpdateTransportistaMutation,
} from "../../../tanstack/TransportistasStack";
import { useConsultaRucDnit } from "../../../hooks/useConsultaRucDnit";
import { calcularDvRuc } from "../../../utils/ruc";
import { PersonaFormFields } from "./PersonaFormFields";

const TIPOS = [
  { value: "propio", label: "Propio" },
  { value: "tercero", label: "Tercero" },
];

export const TransportistaFormDialog = ({ open, onClose, transportista }) => {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down("md"));
  const isEdit = !!transportista;
  const createMutation = useCreateTransportistaMutation();
  const updateMutation = useUpdateTransportistaMutation();

  const { control, handleSubmit, reset, watch, setValue, formState: { errors } } = useForm({
    defaultValues: {
      naturaleza_id: "",
      tipo_documento_id: "",
      tipo_contribuyente_id: "",
      razon_social: "",
      ruc: "",
      dv: "",
      nro_documento: "",
      direccion: "",
      nro_casa: "0",
      celular: "",
      email: "",
      pais_id: "",
      ciudad_id: "",
      tipo_transportista: "tercero",
      nro_habilitacion_mopc: "",
    },
  });

  useEffect(() => {
    if (open) {
      if (transportista) {
        const p = transportista.personas;
        reset({
          naturaleza_id: p?.naturaleza_receptor?.id || "",
          tipo_documento_id: p?.tipo_documento_identidad?.id || "",
          tipo_contribuyente_id: p?.tipo_contribuyente_id || "",
          razon_social: p?.razon_social || "",
          ruc: p?.ruc || "",
          dv: p?.dv ?? "",
          nro_documento: p?.nro_documento || "",
          direccion: p?.direccion || "",
          nro_casa: p?.nro_casa || "0",
          celular: p?.celular || "",
          email: p?.email || "",
          pais_id: p?.pais_id || "",
          ciudad_id: p?.ciudades?.id || "",
          tipo_transportista: transportista.tipo_transportista || "tercero",
          nro_habilitacion_mopc: transportista.nro_habilitacion_mopc || "",
        });
      } else {
        reset();
      }
    }
  }, [open, transportista, reset]);

  // ── Autocompletado DNIT (transportista = SIEMPRE contribuyente) ──
  // Al tipear el RUC: si la DNIT trae razón social (contribuyente o no) la usamos,
  // y el DV se calcula localmente (determinístico por módulo 11). Nunca cambia la
  // naturaleza — el transportista siempre se guarda como contribuyente.
  const { consultar: consultarDnitT, loading: loadingDnitT } = useConsultaRucDnit();
  const rucDnitRef = useRef("");
  const watchRucT = watch("ruc");
  useEffect(() => {
    if (!open || isEdit) return undefined;
    const doc = String(watchRucT || "").replace(/\D/g, "");
    if (doc.length < 5) return undefined;
    if (doc === rucDnitRef.current) return undefined;
    let cancel = false;
    const t = setTimeout(async () => {
      rucDnitRef.current = doc;
      // DV siempre calculable a partir del RUC.
      setValue("dv", String(calcularDvRuc(doc)), { shouldDirty: true, shouldValidate: true });
      const data = await consultarDnitT(doc, { silencioso: true });
      if (cancel || !data) return;
      // Razón social: la usamos si la DNIT la trae, sin importar si es contribuyente o no.
      if (data.razon_social) {
        setValue("razon_social", data.razon_social, { shouldDirty: true, shouldValidate: true });
      }
      // Si la DNIT devuelve un DV explícito, preferirlo (coincide con el calculado).
      if (data.encontrado && data.dv != null) {
        setValue("dv", String(data.dv), { shouldDirty: true, shouldValidate: true });
      }
    }, 700);
    return () => {
      cancel = true;
      clearTimeout(t);
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [watchRucT, open, isEdit]);

  const onSubmit = (data) => {
    // Limpiar: convertir strings vacíos a null para UUIDs y campos opcionales
    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_mopc", "email", "celular", "nro_casa"];
    optionalFields.forEach((f) => { if (!payload[f]) payload[f] = null; });
    // DV: convertir a número o null
    payload.dv = payload.dv !== "" && payload.dv != null ? Number(payload.dv) : null;

    if (isEdit) {
      updateMutation.mutate({ id: transportista.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 Transportista" : "Nuevo Transportista"}
          {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} direccionRequerida forceContribuyente loadingDnit={loadingDnitT} />

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

          <Box sx={{ display: "grid", gridTemplateColumns: { xs: "1fr", md: "1fr 1fr" }, gap: 2 }}>
            <Controller
              name="tipo_transportista"
              control={control}
              render={({ field }) => (
                <FormControl fullWidth error={!!errors.tipo_transportista}>
                  <InputLabel>Tipo</InputLabel>
                  <Select {...field} label="Tipo">
                    {TIPOS.map((t) => (
                      <MenuItem key={t.value} value={t.value}>{t.label}</MenuItem>
                    ))}
                  </Select>
                  <FormHelperText>{errors.tipo_transportista?.message}</FormHelperText>
                </FormControl>
              )}
            />
            <Controller
              name="nro_habilitacion_mopc"
              control={control}
              render={({ field }) => (
                <TextField
                  {...field}
                  label="Nro. Habilitación MOPC"
                  fullWidth
                  inputProps={{ maxLength: 50 }}
                  error={!!errors.nro_habilitacion_mopc}
                  helperText={errors.nro_habilitacion_mopc?.message}
                />
              )}
            />
          </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>
  );
};