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 {
  useCreateChoferMutation,
  useUpdateChoferMutation,
} from "../../../tanstack/ChofereStack";
import { useConsultaRucDnit } from "../../../hooks/useConsultaRucDnit";
import { PersonaFormFields } from "./PersonaFormFields";

const CATEGORIAS = ["A", "B", "C", "D", "E"];

export const ChoferFormDialog = ({ open, onClose, chofer }) => {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down("md"));
  const isEdit = !!chofer;
  const createMutation = useCreateChoferMutation();
  const updateMutation = useUpdateChoferMutation();

  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: "",
      ciudad_id: "",
      nro_libreta_conducir: "",
      categoria_licencia: "",
      fecha_vencimiento_licencia: "",
    },
  });

  useEffect(() => {
    if (open) {
      if (chofer) {
        const p = chofer.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 || "",
          nro_libreta_conducir: chofer.nro_libreta_conducir || "",
          categoria_licencia: chofer.categoria_licencia || "",
          fecha_vencimiento_licencia: chofer.fecha_vencimiento_licencia
            ? chofer.fecha_vencimiento_licencia.slice(0, 10)
            : "",
        });
      } else {
        reset();
      }
    }
  }, [open, chofer, reset]);

  // ── Autocompletado DNIT (chofer = SIEMPRE no contribuyente) ──
  // Al tipear la cédula, si la DNIT la reconoce (padrón o contribuyente) traemos el
  // nombre. No cambia la naturaleza ni el tipo de documento (queda Cédula de Identidad).
  const { consultar: consultarDnitCh, loading: loadingDnitCh } = useConsultaRucDnit();
  const docDnitRef = useRef("");
  const watchNroDoc = watch("nro_documento");
  useEffect(() => {
    if (!open || isEdit) return undefined;
    const doc = String(watchNroDoc || "").replace(/\D/g, "");
    if (doc.length < 5) return undefined;
    if (doc === docDnitRef.current) return undefined;
    let cancel = false;
    const t = setTimeout(async () => {
      docDnitRef.current = doc;
      const data = await consultarDnitCh(doc, { silencioso: true });
      if (cancel || !data?.encontrado || !data.razon_social) return;
      setValue("razon_social", data.razon_social, { shouldDirty: true, shouldValidate: true });
    }, 700);
    return () => {
      cancel = true;
      clearTimeout(t);
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [watchNroDoc, open, isEdit]);

  const onSubmit = (data) => {
    const payload = { ...data };
    if (!payload.fecha_vencimiento_licencia) delete payload.fecha_vencimiento_licencia;
    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_libreta_conducir", "categoria_licencia", "email", "celular", "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: chofer.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 Chofer" : "Nuevo Chofer"}
          {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} forceNoContribuyente direccionRequerida loadingDnit={loadingDnitCh} />

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

          <Box sx={{ display: "grid", gridTemplateColumns: { xs: "1fr", md: "1fr 1fr 1fr" }, gap: 2 }}>
            <Controller
              name="nro_libreta_conducir"
              control={control}
              render={({ field }) => (
                <TextField {...field} label="Nro. Libreta" fullWidth inputProps={{ maxLength: 30 }} />
              )}
            />
            <Controller
              name="categoria_licencia"
              control={control}
              render={({ field }) => (
                <FormControl fullWidth>
                  <InputLabel>Categoría Licencia</InputLabel>
                  <Select {...field} label="Categoría Licencia">
                    <MenuItem value="">Sin categoría</MenuItem>
                    {CATEGORIAS.map((c) => (
                      <MenuItem key={c} value={c}>{c}</MenuItem>
                    ))}
                  </Select>
                </FormControl>
              )}
            />
            <Controller
              name="fecha_vencimiento_licencia"
              control={control}
              render={({ field }) => (
                <TextField
                  {...field}
                  label="Vencimiento Licencia"
                  type="date"
                  fullWidth
                  InputLabelProps={{ shrink: true }}
                />
              )}
            />
          </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>
  );
};