import {
  Autocomplete,
  Box,
  Button,
  Dialog,
  DialogActions,
  DialogContent,
  DialogTitle,
  Divider,
  TextField,
  Tooltip,
  Typography,
} from "@mui/material";
import { Icon } from "@iconify/react";
import { useEffect, useMemo, useState } from "react";
import { searchImportacionProductos } from "../../api/importaciones.service";

const emptyForm = {
  producto_id: "",
  sku_interno_id: "",
  chasis: "",
  motor: "",
  marca: "",
  modelo: "",
  version: "",
  anio: "",
  cilindrada_cc: "",
  kilometraje: "",
  color: "",
  subasta_lote: "",
  precio_fob_usd: "",
  inland_origen_usd: "",
  cantidad_duenios: "",
  sku_proveedor: "",
  descripcion_origen: "",
  cantidad: 1,
  unidad: "UN",
  peso_unit_kg: "",
  cbm_unit: "",
  ncm: "",
  arancel_pct: "",
  isc_pct: "",
  fob_unit_usd: 0,
  orden: "",
  mapeo_resuelto: false,
};

const toNum = (v) => {
  if (v === "" || v === null || v === undefined) return undefined;
  const n = Number(v);
  return Number.isFinite(n) ? n : undefined;
};

function SectionLabel({ children }) {
  return (
    <Box sx={{ gridColumn: "1 / -1", display: "flex", alignItems: "center", gap: 1, mt: 0.5 }}>
      <Typography variant="caption" color="text.secondary" sx={{ whiteSpace: "nowrap", fontWeight: 600 }}>
        {children}
      </Typography>
      <Divider sx={{ flex: 1 }} />
    </Box>
  );
}

function InfoTooltip({ text }) {
  return (
    <Tooltip title={text} placement="top" arrow>
      <Box component="span" sx={{ cursor: "help", color: "text.secondary", display: "inline-flex" }}>
        <Icon icon="lucide:help-circle" width={14} />
      </Box>
    </Tooltip>
  );
}

export function ItemFormDialog({ open, onClose, onSubmit, embarque, item, loading = false }) {
  const [form, setForm] = useState(emptyForm);
  const [producto, setProducto] = useState(null);
  const [skuInterno, setSkuInterno] = useState(null);
  const [productOptions, setProductOptions] = useState([]);
  const [productSearch, setProductSearch] = useState("");
  const [skuOptions, setSkuOptions] = useState([]);
  const [skuSearch, setSkuSearch] = useState("");

  const isAutos = embarque?.perfil === "AUTOS";

  useEffect(() => {
    if (!open) return;
    if (item?.id) {
      setForm({
        producto_id: item.producto_id || "",
        sku_interno_id: item.sku_interno_id || "",
        chasis: item.chasis || "",
        motor: item.motor || "",
        marca: item.marca || "",
        modelo: item.modelo || "",
        version: item.version || "",
        anio: item.anio ?? "",
        cilindrada_cc: item.cilindrada_cc ?? "",
        kilometraje: item.kilometraje ?? "",
        color: item.color || "",
        subasta_lote: item.subasta_lote || "",
        precio_fob_usd: item.precio_fob_usd ?? "",
        inland_origen_usd: item.inland_origen_usd ?? "",
        cantidad_duenios: item.cantidad_duenios ?? "",
        sku_proveedor: item.sku_proveedor || "",
        descripcion_origen: item.descripcion_origen || "",
        cantidad: Number(item.cantidad ?? 1),
        unidad: item.unidad || "UN",
        peso_unit_kg: item.peso_unit_kg ?? "",
        cbm_unit: item.cbm_unit ?? "",
        ncm: item.ncm || "",
        arancel_pct: item.arancel_pct ?? "",
        isc_pct: item.isc_pct ?? "",
        fob_unit_usd: Number(item.fob_unit_usd ?? 0),
        orden: item.orden ?? "",
        mapeo_resuelto: Boolean(item.mapeo_resuelto),
      });
      setProducto(item.producto || null);
      setSkuInterno(item.sku_interno || null);
    } else {
      setForm(emptyForm);
      setProducto(null);
      setSkuInterno(null);
    }
  }, [open, item]);

  useEffect(() => {
    const term = productSearch.trim();
    if (!open || term.length < 2) {
      setProductOptions((prev) => (producto?.id ? [producto] : prev));
      return undefined;
    }
    const timeout = setTimeout(async () => {
      try {
        const items = await searchImportacionProductos(term, 20);
        setProductOptions(items || []);
      } catch {
        setProductOptions([]);
      }
    }, 300);
    return () => clearTimeout(timeout);
  }, [open, productSearch, producto]);

  useEffect(() => {
    const term = skuSearch.trim();
    if (!open || term.length < 2) {
      setSkuOptions((prev) => (skuInterno?.id ? [skuInterno] : prev));
      return undefined;
    }
    const timeout = setTimeout(async () => {
      try {
        const items = await searchImportacionProductos(term, 20);
        setSkuOptions(items || []);
      } catch {
        setSkuOptions([]);
      }
    }, 300);
    return () => clearTimeout(timeout);
  }, [open, skuSearch, skuInterno]);

  const fobTotal = useMemo(() => {
    const cantidad = isAutos ? 1 : Number(form.cantidad || 0);
    return cantidad * Number(form.fob_unit_usd || 0);
  }, [form.cantidad, form.fob_unit_usd, isAutos]);

  const chasisLen = form.chasis?.trim().length || 0;
  const chasisValid = !isAutos || chasisLen === 17;

  const handleChange = (field, value) => {
    setForm((prev) => ({ ...prev, [field]: value }));
  };

  const handleSubmit = () => {
    const payload = isAutos
      ? {
          producto_id: producto?.id || undefined,
          chasis: form.chasis?.trim() || undefined,
          motor: form.motor?.trim() || undefined,
          marca: form.marca?.trim() || undefined,
          modelo: form.modelo?.trim() || undefined,
          version: form.version?.trim() || undefined,
          anio: toNum(form.anio),
          cilindrada_cc: toNum(form.cilindrada_cc),
          kilometraje: toNum(form.kilometraje),
          color: form.color?.trim() || undefined,
          subasta_lote: form.subasta_lote?.trim() || undefined,
          precio_fob_usd: toNum(form.precio_fob_usd),
          inland_origen_usd: toNum(form.inland_origen_usd),
          cantidad_duenios: toNum(form.cantidad_duenios),
          fob_unit_usd: Number(form.fob_unit_usd || 0),
          orden: toNum(form.orden),
        }
      : {
          producto_id: producto?.id || undefined,
          sku_interno_id: skuInterno?.id || undefined,
          sku_proveedor: form.sku_proveedor?.trim() || undefined,
          descripcion_origen: form.descripcion_origen?.trim() || undefined,
          cantidad: Number(form.cantidad || 1),
          unidad: form.unidad?.trim() || "UN",
          peso_unit_kg: toNum(form.peso_unit_kg),
          cbm_unit: toNum(form.cbm_unit),
          ncm: form.ncm?.trim() || undefined,
          arancel_pct: toNum(form.arancel_pct),
          isc_pct: toNum(form.isc_pct),
          fob_unit_usd: Number(form.fob_unit_usd || 0),
          orden: toNum(form.orden),
          mapeo_resuelto: Boolean(skuInterno?.id) || Boolean(form.mapeo_resuelto),
        };
    onSubmit?.(payload);
  };

  return (
    <Dialog open={open} onClose={onClose} maxWidth="md" fullWidth>
      <DialogTitle>{item?.id ? "Editar ítem" : "Agregar ítem"}</DialogTitle>
      <DialogContent>
        <Box
          sx={{
            pt: 1,
            display: "grid",
            gap: 2,
            gridTemplateColumns: {
              xs: "1fr",
              sm: "repeat(2, minmax(0, 1fr))",
              md: "repeat(12, minmax(0, 1fr))",
            },
            "& .MuiFormControl-root, & .MuiAutocomplete-root": { minWidth: 0 },
          }}
        >
          {isAutos ? (
            <>
              <SectionLabel>Identificación del vehículo</SectionLabel>

              <Box sx={{ gridColumn: { xs: "1 / -1", md: "span 5" } }}>
                <TextField
                  fullWidth
                  required
                  size="small"
                  label="Chasis (VIN)"
                  value={form.chasis}
                  onChange={(e) => handleChange("chasis", e.target.value.toUpperCase())}
                  error={form.chasis.length > 0 && chasisLen !== 17}
                  helperText={
                    form.chasis.length > 0
                      ? chasisLen === 17
                        ? "✓ VIN válido — se usará como código de producto al liberar"
                        : `${chasisLen}/17 caracteres`
                      : "17 caracteres — se convierte en código de producto al liberar"
                  }
                  inputProps={{ maxLength: 17 }}
                />
              </Box>
              <Box sx={{ gridColumn: { xs: "1 / -1", md: "span 4" } }}>
                <TextField
                  fullWidth
                  size="small"
                  label="Marca"
                  placeholder="ej: HYUNDAI, TOYOTA"
                  value={form.marca}
                  onChange={(e) => handleChange("marca", e.target.value)}
                />
              </Box>
              <Box sx={{ gridColumn: { xs: "1 / -1", md: "span 3" } }}>
                <TextField
                  fullWidth
                  size="small"
                  label="Motor"
                  value={form.motor}
                  onChange={(e) => handleChange("motor", e.target.value)}
                />
              </Box>
              <Box sx={{ gridColumn: { xs: "1 / -1", md: "span 5" } }}>
                <TextField
                  fullWidth
                  size="small"
                  label="Modelo"
                  placeholder="ej: TUCSON, CAMRY"
                  value={form.modelo}
                  onChange={(e) => handleChange("modelo", e.target.value)}
                />
              </Box>
              <Box sx={{ gridColumn: { xs: "1 / -1", md: "span 4" } }}>
                <TextField
                  fullWidth
                  size="small"
                  label="Versión"
                  placeholder="ej: GL, GLX, Sport"
                  value={form.version}
                  onChange={(e) => handleChange("version", e.target.value)}
                />
              </Box>
              <Box sx={{ gridColumn: { xs: "1 / -1", md: "span 3" } }}>
                <TextField
                  fullWidth
                  size="small"
                  label="Color"
                  placeholder="ej: Blanco perla"
                  value={form.color}
                  onChange={(e) => handleChange("color", e.target.value)}
                />
              </Box>

              <SectionLabel>Especificaciones técnicas</SectionLabel>

              <Box sx={{ gridColumn: { xs: "1 / -1", sm: "span 1", md: "span 3" } }}>
                <TextField
                  fullWidth
                  size="small"
                  type="number"
                  label="Año"
                  placeholder={String(new Date().getFullYear())}
                  value={form.anio}
                  onChange={(e) => handleChange("anio", e.target.value)}
                  inputProps={{ min: 1900, max: new Date().getFullYear() + 1 }}
                />
              </Box>
              <Box sx={{ gridColumn: { xs: "1 / -1", sm: "span 1", md: "span 3" } }}>
                <TextField
                  fullWidth
                  size="small"
                  type="number"
                  label="Cilindrada (cc)"
                  placeholder="ej: 1600"
                  value={form.cilindrada_cc}
                  onChange={(e) => handleChange("cilindrada_cc", e.target.value)}
                  helperText="Usado para calcular ISC automáticamente"
                />
              </Box>
              <Box sx={{ gridColumn: { xs: "1 / -1", sm: "span 1", md: "span 3" } }}>
                <TextField
                  fullWidth
                  size="small"
                  type="number"
                  label="Kilometraje"
                  placeholder="0"
                  value={form.kilometraje}
                  onChange={(e) => handleChange("kilometraje", e.target.value)}
                />
              </Box>
              <Box sx={{ gridColumn: { xs: "1 / -1", sm: "span 1", md: "span 3" } }}>
                <TextField
                  fullWidth
                  size="small"
                  type="number"
                  label="N° de dueños anteriores"
                  placeholder="0"
                  value={form.cantidad_duenios}
                  onChange={(e) => handleChange("cantidad_duenios", e.target.value)}
                  helperText="0 = vehículo 0 km"
                />
              </Box>

              <SectionLabel>Origen y precio</SectionLabel>

              <Box sx={{ gridColumn: { xs: "1 / -1", sm: "span 1", md: "span 4" } }}>
                <TextField
                  fullWidth
                  required
                  size="small"
                  type="number"
                  inputProps={{ step: "0.01", min: 0 }}
                  label="FOB unitario USD"
                  value={form.fob_unit_usd}
                  onChange={(e) => handleChange("fob_unit_usd", e.target.value)}
                  helperText="Valor en factura del proveedor"
                />
              </Box>
              <Box sx={{ gridColumn: { xs: "1 / -1", sm: "span 1", md: "span 4" } }}>
                <TextField
                  fullWidth
                  size="small"
                  type="number"
                  inputProps={{ step: "0.01" }}
                  label="Inland origen USD"
                  value={form.inland_origen_usd}
                  onChange={(e) => handleChange("inland_origen_usd", e.target.value)}
                  helperText="Flete interno desde subasta hasta puerto (opcional)"
                />
              </Box>
              <Box sx={{ gridColumn: { xs: "1 / -1", sm: "span 1", md: "span 4" } }}>
                <TextField
                  fullWidth
                  size="small"
                  label="Lote subasta"
                  value={form.subasta_lote}
                  onChange={(e) => handleChange("subasta_lote", e.target.value)}
                  helperText="Número de lote en la subasta de origen (opcional)"
                />
              </Box>
            </>
          ) : (
            <>
              <SectionLabel>Identificación del producto</SectionLabel>

              <Box sx={{ gridColumn: { xs: "1 / -1", md: "span 6" } }}>
                <Autocomplete
                  size="small"
                  value={skuInterno}
                  options={skuOptions}
                  onChange={(event, next) => setSkuInterno(next)}
                  onInputChange={(event, value) => setSkuSearch(value)}
                  getOptionLabel={(option) => option?.descripcion || option?.cod_producto || ""}
                  isOptionEqualToValue={(option, selected) => option?.id === selected?.id}
                  noOptionsText={skuSearch.trim().length < 2 ? "Escribí al menos 2 caracteres" : "Sin productos"}
                  slotProps={{ paper: { sx: { minWidth: 320 } } }}
                  renderInput={(params) => (
                    <TextField
                      {...params}
                      label="SKU interno (mapeo)"
                      placeholder="Buscar producto en catálogo"
                      helperText="Obligatorio para liberar: es el producto al que va a entrar el stock"
                    />
                  )}
                />
              </Box>
              <Box sx={{ gridColumn: { xs: "1 / -1", md: "span 3" } }}>
                <TextField
                  fullWidth
                  size="small"
                  label="SKU proveedor"
                  value={form.sku_proveedor}
                  onChange={(e) => handleChange("sku_proveedor", e.target.value)}
                  helperText="Código del artículo en la factura del proveedor"
                />
              </Box>
              <Box sx={{ gridColumn: { xs: "1 / -1", md: "span 3" } }}>
                <TextField
                  fullWidth
                  size="small"
                  label="NCM"
                  placeholder="ej: 8703.23.10"
                  value={form.ncm}
                  onChange={(e) => handleChange("ncm", e.target.value)}
                  helperText="Nomenclatura Común del Mercosur — código arancelario"
                />
              </Box>
              <Box sx={{ gridColumn: { xs: "1 / -1", md: "span 12" } }}>
                <TextField
                  fullWidth
                  size="small"
                  label="Descripción origen"
                  placeholder="Descripción del producto según factura del proveedor"
                  value={form.descripcion_origen}
                  onChange={(e) => handleChange("descripcion_origen", e.target.value)}
                />
              </Box>

              <SectionLabel>Cantidad y medidas</SectionLabel>

              <Box sx={{ gridColumn: { xs: "1 / -1", sm: "span 1", md: "span 2" } }}>
                <TextField
                  fullWidth
                  size="small"
                  type="number"
                  label="Cantidad"
                  value={form.cantidad}
                  onChange={(e) => handleChange("cantidad", e.target.value)}
                />
              </Box>
              <Box sx={{ gridColumn: { xs: "1 / -1", sm: "span 1", md: "span 2" } }}>
                <TextField
                  fullWidth
                  size="small"
                  label="Unidad"
                  placeholder="UN, PCS, KG"
                  value={form.unidad}
                  onChange={(e) => handleChange("unidad", e.target.value.toUpperCase())}
                />
              </Box>
              <Box sx={{ gridColumn: { xs: "1 / -1", sm: "span 1", md: "span 2" } }}>
                <TextField
                  fullWidth
                  size="small"
                  type="number"
                  inputProps={{ step: "0.0001" }}
                  label="Peso unit. (kg)"
                  value={form.peso_unit_kg}
                  onChange={(e) => handleChange("peso_unit_kg", e.target.value)}
                />
              </Box>
              <Box sx={{ gridColumn: { xs: "1 / -1", sm: "span 1", md: "span 2" } }}>
                <TextField
                  fullWidth
                  size="small"
                  type="number"
                  inputProps={{ step: "0.0001" }}
                  label="CBM unit."
                  value={form.cbm_unit}
                  onChange={(e) => handleChange("cbm_unit", e.target.value)}
                  helperText="Volumen en m³ por unidad"
                />
              </Box>
              <Box sx={{ gridColumn: { xs: "1 / -1", sm: "span 1", md: "span 2" } }}>
                <TextField
                  fullWidth
                  size="small"
                  type="number"
                  inputProps={{ step: "0.01" }}
                  label="Arancel %"
                  value={form.arancel_pct}
                  onChange={(e) => handleChange("arancel_pct", e.target.value)}
                  helperText="% de arancel de importación"
                />
              </Box>
              <Box sx={{ gridColumn: { xs: "1 / -1", sm: "span 1", md: "span 2" } }}>
                <TextField
                  fullWidth
                  size="small"
                  type="number"
                  inputProps={{ step: "0.01" }}
                  label="ISC %"
                  value={form.isc_pct}
                  onChange={(e) => handleChange("isc_pct", e.target.value)}
                  helperText="Impuesto Selectivo al Consumo"
                />
              </Box>
            </>
          )}

          <SectionLabel>Precio FOB</SectionLabel>

          <Box sx={{ gridColumn: { xs: "1 / -1", sm: "span 1", md: isAutos ? "span 0" : "span 4" }, display: isAutos ? "none" : undefined }}>
            <TextField
              fullWidth
              required
              size="small"
              type="number"
              inputProps={{ step: "0.0001" }}
              label="FOB unitario USD"
              value={form.fob_unit_usd}
              onChange={(e) => handleChange("fob_unit_usd", e.target.value)}
            />
          </Box>
          <Box sx={{ gridColumn: { xs: "1 / -1", sm: "span 1", md: "span 4" } }}>
            <TextField
              fullWidth
              size="small"
              type="number"
              label="Orden"
              value={form.orden}
              onChange={(e) => handleChange("orden", e.target.value)}
              helperText="Número de orden dentro del embarque (opcional)"
            />
          </Box>
          <Box sx={{ gridColumn: { xs: "1 / -1", sm: "span 1", md: "span 4" } }}>
            <Box sx={{ border: "1px solid", borderColor: "primary.main", borderRadius: 1, px: 1.5, py: 1, bgcolor: "primary.main", color: "primary.contrastText" }}>
              <Typography variant="caption" sx={{ opacity: 0.85 }}>FOB total</Typography>
              <Typography variant="subtitle1" fontWeight={800}>
                USD {fobTotal.toLocaleString("es-PY", { minimumFractionDigits: 2 })}
              </Typography>
            </Box>
          </Box>
        </Box>
      </DialogContent>
      <DialogActions>
        <Button onClick={onClose}>Cancelar</Button>
        <Button
          variant="contained"
          onClick={handleSubmit}
          disabled={loading || (isAutos && (!form.chasis?.trim() || !chasisValid))}
        >
          Guardar
        </Button>
      </DialogActions>
    </Dialog>
  );
}

export default ItemFormDialog;