import { Icon } from "@iconify/react";
import {
  Alert,
  Box,
  Button,
  Chip,
  Divider,
  Paper,
  Skeleton,
  Stack,
  TextField,
  Tooltip,
  Typography,
} from "@mui/material";
import { MonedaInput } from "../common/MonedaInput";
import { useEffect, useMemo, useState } from "react";
import { toast } from "sonner";
import {
  confirmarImportacionDespacho,
  createImportacionDespacho,
  deleteImportacionDespacho,
  getImportacionDespacho,
  updateImportacionDespacho,
} from "../../api/importaciones.service";
import { ProveedorSelector } from "../organismos/ProveedoresDesign/ProveedorSelector";
import { hoyISO } from "../../utils/fecha";

const TRIBUTOS = [
  {
    field: "arancel_gs",
    label: "Arancel",
    tooltip: "Derecho aduanero de importación según el NCM del producto",
  },
  {
    field: "iva_importacion_gs",
    label: "IVA Importación",
    tooltip: "IVA aplicado en aduana — generalmente 10% sobre el valor CIF",
  },
  {
    field: "isc_gs",
    label: "ISC",
    tooltip: "Impuesto Selectivo al Consumo — calculado según la tabla ISC configurada en Importaciones",
  },
  {
    field: "inc_gs",
    label: "INC",
    tooltip: "Impuesto a la No Contribuyente — aplica en algunos regímenes de importación",
  },
  {
    field: "anticipo_ire_gs",
    label: "Anticipo IRE",
    tooltip: "Anticipo del Impuesto a la Renta Empresarial pagado en aduana",
  },
  {
    field: "tasa_ana_gs",
    label: "Tasa ANA",
    tooltip: "Tasa de la Administración Nacional de Aduanas por servicios de tramitación",
  },
  {
    field: "otros_gs",
    label: "Otros tributos",
    tooltip: "Cualquier otro tributo aduanero no clasificado en las categorías anteriores",
  },
];

const emptyForm = {
  numero_despacho: "",
  fecha_despacho: hoyISO(),
  arancel_gs: "",
  iva_importacion_gs: "",
  isc_gs: "",
  inc_gs: "",
  anticipo_ire_gs: "",
  tasa_ana_gs: "",
  otros_gs: "",
  notas: "",
};

const formatGs = (value) =>
  `Gs. ${Number(value || 0).toLocaleString("es-PY", { maximumFractionDigits: 0 })}`;
const normalizeError = (error) => {
  const msg = error?.response?.data?.message || error?.message || "Error inesperado";
  return Array.isArray(msg) ? msg.join(", ") : msg;
};

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

export function DespachoFormPanel({ embarque, canEdit, canConfirm, onChanged }) {
  const [despacho, setDespacho] = useState(null);
  const [form, setForm] = useState(emptyForm);
  const [despachante, setDespachante] = useState(null);
  const [loading, setLoading] = useState(false);
  const [saving, setSaving] = useState(false);
  const [confirmandoDespacho, setConfirmandoDespacho] = useState(false);

  const embarqueId = embarque?.id;
  const isConfirmado = despacho?.estado === "CONFIRMADO";
  const editable = !isConfirmado && canEdit;

  const loadDespacho = async () => {
    if (!embarqueId) return;
    setLoading(true);
    try {
      const data = await getImportacionDespacho(embarqueId);
      setDespacho(data);
      if (data) {
        setForm({
          numero_despacho: data.numero_despacho || "",
          fecha_despacho: data.fecha_despacho ? String(data.fecha_despacho).slice(0, 10) : "",
          arancel_gs: String(data.arancel_gs ?? ""),
          iva_importacion_gs: String(data.iva_importacion_gs ?? ""),
          isc_gs: String(data.isc_gs ?? ""),
          inc_gs: String(data.inc_gs ?? ""),
          anticipo_ire_gs: String(data.anticipo_ire_gs ?? ""),
          tasa_ana_gs: String(data.tasa_ana_gs ?? ""),
          otros_gs: String(data.otros_gs ?? ""),
          notas: data.notas || "",
        });
        setDespachante(data.despachante || null);
      } else {
        setForm(emptyForm);
        setDespachante(null);
      }
    } catch (error) {
      toast.error(normalizeError(error));
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    loadDespacho();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [embarqueId]);

  const total = useMemo(
    () => TRIBUTOS.reduce((acc, t) => acc + toNumber(form[t.field]), 0),
    [form],
  );

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

  const buildPayload = () => ({
    numero_despacho: form.numero_despacho.trim(),
    fecha_despacho: form.fecha_despacho,
    despachante_id: despachante?.id || undefined,
    arancel_gs: toNumber(form.arancel_gs),
    iva_importacion_gs: toNumber(form.iva_importacion_gs),
    isc_gs: toNumber(form.isc_gs),
    inc_gs: toNumber(form.inc_gs),
    anticipo_ire_gs: toNumber(form.anticipo_ire_gs),
    tasa_ana_gs: toNumber(form.tasa_ana_gs),
    otros_gs: toNumber(form.otros_gs),
    notas: form.notas?.trim() || undefined,
  });

  const handleSave = async () => {
    if (!form.numero_despacho.trim()) {
      toast.error("Número de despacho requerido");
      return;
    }
    if (!form.fecha_despacho) {
      toast.error("Fecha de despacho requerida");
      return;
    }
    setSaving(true);
    try {
      const payload = buildPayload();
      if (despacho?.id) {
        await updateImportacionDespacho(embarqueId, despacho.id, payload);
        toast.success("Despacho actualizado");
      } else {
        await createImportacionDespacho(embarqueId, payload);
        toast.success("Despacho creado");
      }
      await loadDespacho();
      onChanged?.();
    } catch (error) {
      toast.error(normalizeError(error));
    } finally {
      setSaving(false);
    }
  };

  const handleDelete = async () => {
    if (!despacho?.id) return;
    if (!window.confirm("¿Eliminar este despacho? Solo es posible mientras esté en BORRADOR.")) return;
    setSaving(true);
    try {
      await deleteImportacionDespacho(embarqueId, despacho.id);
      toast.success("Despacho eliminado");
      await loadDespacho();
      onChanged?.();
    } catch (error) {
      toast.error(normalizeError(error));
    } finally {
      setSaving(false);
    }
  };

  const handleConfirmar = async () => {
    setSaving(true);
    try {
      await confirmarImportacionDespacho(embarqueId, despacho.id);
      toast.success("Despacho confirmado. El embarque pasó a DESPACHADO.");
      setConfirmandoDespacho(false);
      await loadDespacho();
      onChanged?.();
    } catch (error) {
      toast.error(normalizeError(error));
    } finally {
      setSaving(false);
    }
  };

  if (loading) {
    return (
      <Box sx={{ p: 2 }}>
        <Skeleton height={48} />
        <Skeleton height={120} />
        <Skeleton height={48} />
      </Box>
    );
  }

  return (
    <Box sx={{ p: 2 }}>
      <Stack direction="row" justifyContent="space-between" alignItems="center" sx={{ mb: 2 }}>
        <Stack direction="row" spacing={1} alignItems="center">
          <Typography variant="subtitle1" fontWeight={800}>
            Despacho aduanero
          </Typography>
          {despacho && (
            <Chip
              size="small"
              label={despacho.estado}
              color={isConfirmado ? "success" : "default"}
            />
          )}
        </Stack>
      </Stack>

      {!despacho && !canEdit && (
        <Alert severity="info">No hay despacho cargado para este embarque.</Alert>
      )}

      {(despacho || canEdit) && (
        <Paper variant="outlined" sx={{ p: 2 }}>
          <Stack spacing={2}>

            {/* Fila 1 — Identificación */}
            <Box sx={{ display: "grid", gap: 2, gridTemplateColumns: { xs: "1fr", sm: "1fr 160px", md: "1fr 160px 1fr" } }}>
              <TextField
                fullWidth
                size="small"
                label="N° Despacho"
                placeholder="ej: 26-12345-IM"
                value={form.numero_despacho}
                onChange={(e) => handleChange("numero_despacho", e.target.value)}
                disabled={!editable || saving}
                required
              />
              <TextField
                fullWidth
                size="small"
                type="date"
                label="Fecha de despacho"
                InputLabelProps={{ shrink: true }}
                value={form.fecha_despacho}
                onChange={(e) => handleChange("fecha_despacho", e.target.value)}
                disabled={!editable || saving}
                required
              />
              <ProveedorSelector
                value={despachante}
                onChange={setDespachante}
                label="Despachante (opcional)"
                disabled={!editable || saving}
                contexto="todos"
              />
            </Box>

            {/* Sección tributos */}
            <Stack direction="row" alignItems="center" gap={1}>
              <Typography variant="caption" color="text.secondary" fontWeight={600} sx={{ whiteSpace: "nowrap" }}>
                Tributos aduaneros
              </Typography>
              <Divider sx={{ flex: 1 }} />
            </Stack>

            {/* Grid de tributos — 4 columnas en desktop, 2 en mobile */}
            <Box sx={{ display: "grid", gap: 2, gridTemplateColumns: { xs: "repeat(2, 1fr)", sm: "repeat(3, 1fr)", md: "repeat(4, 1fr)" } }}>
              {TRIBUTOS.map((t) => (
                <MonedaInput
                  key={t.field}
                  fullWidth
                  moneda="PYG"
                  label={
                    <Stack direction="row" spacing={0.5} alignItems="center">
                      <span>{t.label}</span>
                      <Tooltip title={t.tooltip} placement="top" arrow>
                        <Box component="span" sx={{ cursor: "help", color: "text.secondary", display: "inline-flex", fontSize: 13 }}>
                          <Icon icon="lucide:help-circle" width={13} />
                        </Box>
                      </Tooltip>
                    </Stack>
                  }
                  value={Number(form[t.field] || 0)}
                  onChange={(n) => handleChange(t.field, n)}
                  disabled={!editable || saving}
                />
              ))}
            </Box>

            {/* Notas */}
            <TextField
              fullWidth
              size="small"
              multiline
              minRows={2}
              label="Notas"
              placeholder="Observaciones sobre el despacho..."
              value={form.notas}
              onChange={(e) => handleChange("notas", e.target.value)}
              disabled={!editable || saving}
            />

          </Stack>

          <Divider sx={{ my: 2 }} />

          {/* Total tributos prominente */}
          <Paper sx={{ p: 1.5, mb: 2, bgcolor: "action.hover", borderRadius: 1 }}>
            <Typography variant="caption" color="text.secondary" fontWeight={600}>
              TOTAL TRIBUTOS
            </Typography>
            <Typography variant="h4" fontWeight={800} color="text.primary">
              {formatGs(total)}
            </Typography>
            {despacho?.cotizacion_usada != null && (
              <Typography variant="caption" color="text.secondary">
                Cotización congelada al confirmar: {Number(despacho.cotizacion_usada).toLocaleString("es-PY")} Gs/USD
              </Typography>
            )}
          </Paper>

          {/* Alert antes de confirmar */}
          {despacho?.id && !isConfirmado && canConfirm && !confirmandoDespacho && (
            <Alert
              severity="warning"
              sx={{ mb: 2 }}
              action={
                <Button color="inherit" size="small" onClick={() => setConfirmandoDespacho(true)}>
                  Confirmar despacho
                </Button>
              }
            >
              Confirmar el despacho inserta los tributos al costeo, genera el asiento contable y pasa el embarque a <strong>DESPACHADO</strong>. Esta acción es irreversible.
            </Alert>
          )}

          {confirmandoDespacho && (
            <Alert
              severity="error"
              sx={{ mb: 2 }}
              action={
                <Stack direction="row" spacing={1}>
                  <Button color="inherit" size="small" onClick={() => setConfirmandoDespacho(false)} disabled={saving}>
                    Cancelar
                  </Button>
                  <Button
                    variant="contained"
                    color="error"
                    size="small"
                    onClick={handleConfirmar}
                    disabled={saving}
                    startIcon={<Icon icon="lucide:check-circle" />}
                  >
                    Sí, confirmar
                  </Button>
                </Stack>
              }
            >
              ¿Confirmás el despacho por <strong>{formatGs(total)}</strong>? Esta acción no se puede deshacer.
            </Alert>
          )}

          <Stack
            direction={{ xs: "column", md: "row" }}
            spacing={1}
            justifyContent="flex-end"
            flexWrap="wrap"
          >
            {despacho && editable && (
              <Button
                color="error"
                variant="outlined"
                startIcon={<Icon icon="lucide:trash-2" />}
                onClick={handleDelete}
                disabled={saving}
              >
                Eliminar
              </Button>
            )}
            {editable && (
              <Button
                variant="contained"
                onClick={handleSave}
                disabled={saving}
                startIcon={<Icon icon="lucide:save" />}
              >
                Guardar
              </Button>
            )}
          </Stack>
        </Paper>
      )}

      {isConfirmado && (
        <Alert severity="success" sx={{ mt: 2 }}>
          Despacho confirmado. Los tributos quedaron incorporados al costeo y se generó el asiento contable.{" "}
          <strong>Próximo paso:</strong> liberar el embarque para crear el stock en depósito.
        </Alert>
      )}
    </Box>
  );
}

export default DespachoFormPanel;