import { Icon } from "@iconify/react";
import {
  Alert,
  Box,
  Button,
  Card,
  CardContent,
  Chip,
  Collapse,
  Divider,
  FormControl,
  IconButton,
  InputLabel,
  MenuItem,
  Paper,
  Select,
  Skeleton,
  Tooltip,
  Typography,
  useMediaQuery,
  useTheme,
} from "@mui/material";
import { useQuery } from "@tanstack/react-query";
import { useMemo, useState } from "react";
import { useNavigate } from "react-router-dom";
import api from "../api/api.config";
import { getEmpresaMonedas } from "../api/monedas.service";
import { AccesoRestringido } from "../components/common/AccesoRestringido";
import { usePermission } from "../hooks/usePermission";

// ==================== API ====================

const getLiquidacionIVA = async (mes, anio, monedaId) => {
  const params = new URLSearchParams({ mes: String(mes), anio: String(anio) });
  if (monedaId) params.set("moneda_id", monedaId);
  const res = await api.get(`/facturas/liquidacion-iva?${params.toString()}`);
  return res.data;
};

// ==================== HELPERS ====================

const formatMoney = (amount, currency = "PYG") => {
  const cur = currency || "PYG";
  return new Intl.NumberFormat("es-PY", {
    style: "currency",
    currency: cur,
    minimumFractionDigits: cur === "PYG" ? 0 : 2,
  }).format(amount || 0);
};

const MESES = [
  "Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio",
  "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre",
];

const getAnioActual = () => new Date().getFullYear();
const getMesActual = () => new Date().getMonth() + 1;

// ==================== COMPONENT ====================

export function ReporteLiquidacionIVA() {
  const navigate = useNavigate();
  const muiTheme = useTheme();
  const isMobile = useMediaQuery(muiTheme.breakpoints.down("md"));
  const { canRead } = usePermission("REPORTES");

  const [mes, setMes] = useState(getMesActual());
  const [anio, setAnio] = useState(getAnioActual());
  const [monedaId, setMonedaId] = useState("");
  const [showHelp, setShowHelp] = useState(false);

  const { data: monedasData } = useQuery({
    queryKey: ["empresa-monedas-libro"],
    queryFn: getEmpresaMonedas,
    staleTime: 10 * 60 * 1000,
  });
  const monedas = useMemo(() => {
    const raw = monedasData?.data || monedasData || [];
    return raw.filter((m) => m.active !== false);
  }, [monedasData]);

  const monedaSeleccionada = useMemo(
    () => monedas.find((m) => m.moneda_id === monedaId || m.moneda?.id === monedaId),
    [monedaId, monedas],
  );
  const codigoMoneda = monedaSeleccionada?.moneda?.codigo || "PYG";
  const fmt = (amount) => formatMoney(amount, monedaId ? codigoMoneda : "PYG");

  const { data, isLoading } = useQuery({
    queryKey: ["liquidacion-iva", mes, anio, monedaId],
    queryFn: () => getLiquidacionIVA(mes, anio, monedaId || undefined),
  });

  const anios = useMemo(() => {
    const actual = getAnioActual();
    return Array.from({ length: 5 }, (_, i) => actual - i);
  }, []);

  const debito = data?.debito_fiscal || {};
  const credito = data?.credito_fiscal || {};
  const retenciones = data?.retenciones_recibidas || {};
  const liq = data?.liquidacion || {};

  const resultadoConfig = {
    A_PAGAR: { color: "error", icon: "lucide:arrow-up-circle", label: "IVA a Ingresar al SET", sublabel: "Saldo deudor — debe pagarse antes del vencimiento del mes" },
    A_FAVOR: { color: "success", icon: "lucide:arrow-down-circle", label: "Crédito Fiscal a Favor", sublabel: "El exceso de IVA Crédito se arrastra al siguiente período" },
    CERO: { color: "default", icon: "lucide:minus-circle", label: "IVA Compensado", sublabel: "IVA Débito = IVA Crédito — sin saldo a pagar ni a favor" },
  };
  const res = resultadoConfig[liq.resultado] || resultadoConfig.CERO;

  if (!canRead) {
    return <AccesoRestringido mensaje="No tienes permisos para ver este reporte." />;
  }

  return (
    <Box sx={{ maxWidth: 1100, mx: "auto", p: { xs: 2, md: 3 } }}>
      {/* ── Header ── */}
      <Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", mb: 1, flexWrap: "wrap", gap: 1 }}>
        <Box sx={{ display: "flex", alignItems: "center", gap: 1.5 }}>
          <Button size="small" onClick={() => navigate("/reportes")} sx={{ minWidth: 32, p: 0.5 }}>
            <Icon icon="lucide:arrow-left" width={20} />
          </Button>
          <Box>
            <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
              <Icon icon="lucide:scale" width={22} />
              <Typography variant="h6" fontWeight={700}>Liquidación de IVA</Typography>
            </Box>
            <Typography variant="caption" color="text.secondary">
              IVA Débito − IVA Crédito = Saldo a pagar o crédito fiscal a favor
            </Typography>
          </Box>
        </Box>
        <Box sx={{ display: "flex", gap: 1 }}>
          <Button size="small" variant="outlined" onClick={() => navigate("/reportes/fiscal/libro-iva-ventas")} startIcon={<Icon icon="lucide:receipt" width={14} />}>
            Libro IVA Ventas
          </Button>
          <Button size="small" variant="outlined" onClick={() => navigate("/reportes/fiscal/libro-iva-compras")} startIcon={<Icon icon="lucide:shopping-cart" width={14} />}>
            Libro IVA Compras
          </Button>
        </Box>
      </Box>

      <Box sx={{ display: "flex", alignItems: "center", gap: 1, mb: 2 }}>
        <Typography variant="caption" color="text.secondary">
          <span style={{ cursor: "pointer" }} onClick={() => navigate("/reportes")}>Reportes</span>
          {" > "}Liquidación de IVA
        </Typography>
        <Tooltip title={showHelp ? "Ocultar ayuda" : "Ver explicación"}>
          <IconButton size="small" onClick={() => setShowHelp(!showHelp)} color={showHelp ? "primary" : "default"} sx={{ ml: 0.5 }}>
            <Icon icon="lucide:help-circle" width={16} />
          </IconButton>
        </Tooltip>
      </Box>

      <Collapse in={showHelp}>
        <Paper variant="outlined" sx={{ p: 2.5, mb: 2, borderRadius: 2, borderColor: "info.main" }}>
          <Box sx={{ display: "flex", alignItems: "flex-start", gap: 1.5, mb: 1.5 }}>
            <Icon icon="lucide:calculator" width={20} style={{ color: "#3b82f6", marginTop: 2 }} />
            <Box>
              <Typography variant="subtitle2" fontWeight={700} sx={{ mb: 0.5 }}>¿Cómo se calcula la Liquidación de IVA?</Typography>
              <Typography variant="body2" color="text.secondary" sx={{ lineHeight: 1.7 }}>
                Cada mes la empresa cobra IVA a sus clientes (<strong>IVA Débito</strong>) y paga IVA a sus proveedores (<strong>IVA Crédito</strong>).
                La diferencia es lo que se debe declarar al SET en el <strong>Formulario 120</strong>.
              </Typography>
            </Box>
          </Box>
          <Paper variant="outlined" sx={{ p: 2, borderRadius: 1.5, fontFamily: "monospace", fontSize: "0.82rem", lineHeight: 2 }}>
            <Box>IVA Débito Fiscal (Ventas Netas)&nbsp;&nbsp;&nbsp;= <strong>{fmt(debito.total_iva)}</strong></Box>
            <Box>IVA Crédito Fiscal (Compras)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;= <strong>({fmt(credito.total_iva)})</strong></Box>
            <Divider sx={{ my: 0.5 }} />
            <Box fontWeight={700}>Saldo IVA del período&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;= <strong style={{ color: liq.saldo_total > 0 ? "#ef4444" : liq.saldo_total < 0 ? "#22c55e" : "inherit" }}>{fmt(liq.saldo_total)}</strong></Box>
          </Paper>
          <Alert severity="warning" sx={{ mt: 1.5 }} icon={<Icon icon="lucide:alert-triangle" width={18} />}>
            <Typography variant="caption">
              El Saldo IVA debe coincidir con el saldo de la cuenta <strong>"IVA por Pagar"</strong> en el Balance de Comprobación del mismo período.
              Si no cuadra, hay facturas sin integrar o asientos manuales incorrectos.
            </Typography>
          </Alert>
        </Paper>
      </Collapse>

      {/* ── Filtro ── */}
      <Paper variant="outlined" sx={{ p: 2, mb: 2, borderRadius: 2 }}>
        <Box sx={{ display: "flex", gap: 2, alignItems: "center", flexWrap: "wrap" }}>
          <FormControl size="small" sx={{ minWidth: 160 }}>
            <InputLabel>Mes</InputLabel>
            <Select value={mes} label="Mes" onChange={(e) => setMes(e.target.value)}>
              {MESES.map((m, i) => <MenuItem key={i} value={i + 1}>{m}</MenuItem>)}
            </Select>
          </FormControl>
          <FormControl size="small" sx={{ minWidth: 120 }}>
            <InputLabel>Año</InputLabel>
            <Select value={anio} label="Año" onChange={(e) => setAnio(e.target.value)}>
              {anios.map((a) => <MenuItem key={a} value={a}>{a}</MenuItem>)}
            </Select>
          </FormControl>
          <FormControl size="small" sx={{ minWidth: 160 }}>
            <InputLabel>Moneda</InputLabel>
            <Select value={monedaId} label="Moneda" onChange={(e) => setMonedaId(e.target.value)}>
              <MenuItem value="">Todas las monedas</MenuItem>
              {monedas.map((m) => (
                <MenuItem key={m.moneda_id || m.moneda?.id} value={m.moneda_id || m.moneda?.id}>
                  {m.moneda?.codigo || m.codigo} - {m.moneda?.descripcion || m.descripcion}
                </MenuItem>
              ))}
            </Select>
          </FormControl>
          <Chip label={`${MESES[mes - 1]} ${anio}${monedaId ? ` • ${codigoMoneda}` : ""}`} color="primary" variant="outlined" icon={<Icon icon="lucide:calendar" width={14} />} />
        </Box>
      </Paper>

      {isLoading ? (
        <Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
          {[...Array(3)].map((_, i) => <Skeleton key={i} variant="rounded" height={120} />)}
        </Box>
      ) : (
        <>
          {/* ── Resultado principal ── */}
          <Paper
            variant="outlined"
            sx={{
              p: 3, mb: 2, borderRadius: 2,
              borderColor: liq.es_a_pagar ? "error.main" : liq.es_a_favor ? "success.main" : "divider",
              background: (t) =>
                liq.es_a_pagar
                  ? t.palette.mode === "dark" ? "rgba(239,68,68,0.06)" : "rgba(239,68,68,0.03)"
                  : liq.es_a_favor
                    ? t.palette.mode === "dark" ? "rgba(34,197,94,0.06)" : "rgba(34,197,94,0.03)"
                    : "transparent",
            }}
          >
            <Box sx={{ display: "flex", alignItems: "center", gap: 1.5, mb: 2 }}>
              <Icon icon={res.icon} width={28} color={liq.es_a_pagar ? "#ef4444" : liq.es_a_favor ? "#22c55e" : "#6b7280"} />
              <Box>
                <Typography variant="h6" fontWeight={800} color={liq.es_a_pagar ? "error.main" : liq.es_a_favor ? "success.main" : "text.primary"}>
                  {res.label}
                </Typography>
                <Typography variant="caption" color="text.secondary">{res.sublabel}</Typography>
              </Box>
            </Box>

            <Box sx={{ display: "grid", gridTemplateColumns: { xs: "1fr", sm: "repeat(3, 1fr)" }, gap: 3 }}>
              <Box>
                <Typography variant="caption" color="text.secondary">Saldo IVA 10%</Typography>
                <Typography variant="h5" fontWeight={800} color={liq.saldo_iva_10 > 0 ? "error.main" : liq.saldo_iva_10 < 0 ? "success.main" : "text.primary"}>
                  {fmt(Math.abs(liq.saldo_iva_10 ?? 0))}
                </Typography>
                <Typography variant="caption" color="text.secondary">{liq.saldo_iva_10 > 0 ? "a pagar" : liq.saldo_iva_10 < 0 ? "a favor" : "compensado"}</Typography>
              </Box>
              <Box>
                <Typography variant="caption" color="text.secondary">Saldo IVA 5%</Typography>
                <Typography variant="h5" fontWeight={800} color={liq.saldo_iva_5 > 0 ? "error.main" : liq.saldo_iva_5 < 0 ? "success.main" : "text.primary"}>
                  {fmt(Math.abs(liq.saldo_iva_5 ?? 0))}
                </Typography>
                <Typography variant="caption" color="text.secondary">{liq.saldo_iva_5 > 0 ? "a pagar" : liq.saldo_iva_5 < 0 ? "a favor" : "compensado"}</Typography>
              </Box>
              <Box>
                <Typography variant="caption" color="text.secondary">SALDO TOTAL IVA</Typography>
                <Typography variant="h4" fontWeight={800} color={liq.es_a_pagar ? "error.main" : liq.es_a_favor ? "success.main" : "text.primary"}>
                  {fmt(Math.abs(liq.saldo_total ?? 0))}
                </Typography>
                <Chip
                  size="small"
                  label={liq.es_a_pagar ? "A PAGAR AL SET" : liq.es_a_favor ? "CRÉDITO A FAVOR" : "COMPENSADO"}
                  color={liq.es_a_pagar ? "error" : liq.es_a_favor ? "success" : "default"}
                  sx={{ mt: 0.5 }}
                />
              </Box>
            </Box>
          </Paper>

          {/* ── Desglose Débito vs Crédito ── */}
          <Box sx={{ display: "grid", gridTemplateColumns: { xs: "1fr", md: "1fr 1fr" }, gap: 2, mb: 2 }}>
            {/* IVA Débito */}
            <Card variant="outlined" sx={{ borderRadius: 2, borderColor: "primary.light" }}>
              <CardContent sx={{ p: "16px !important" }}>
                <Box sx={{ display: "flex", alignItems: "center", gap: 1, mb: 1.5 }}>
                  <Icon icon="lucide:receipt" width={18} style={{ opacity: 0.7 }} />
                  <Typography variant="subtitle2" fontWeight={700}>IVA Débito Fiscal (Ventas)</Typography>
                  <Chip label={debito.cantidad_facturas ?? 0} size="small" color="primary" sx={{ ml: "auto" }} />
                </Box>
                <Divider sx={{ mb: 1.5 }} />
                {[
                  { label: "Base Gravada 10%", value: debito.gravada_10 },
                  { label: "Base Gravada 5%", value: debito.gravada_5 },
                  { label: "Exentas", value: debito.exentas },
                  { label: `IVA Débito 10% (Facturas${debito.cantidad_nc > 0 ? ` − ${debito.cantidad_nc} NC` : ""})`, value: debito.iva_10, bold: true, color: "primary.main" },
                  { label: "IVA Débito 5%", value: debito.iva_5, bold: true, color: "primary.main" },
                  { label: "Total IVA Débito", value: debito.total_iva, bold: true, color: "primary.main" },
                ].map((r, i) => (
                  <Box key={i} sx={{ display: "flex", justifyContent: "space-between", py: 0.4 }}>
                    <Typography variant="caption" color="text.secondary">{r.label}</Typography>
                    <Typography variant="caption" fontWeight={r.bold ? 700 : 400} color={r.color || "text.primary"}>{fmt(r.value)}</Typography>
                  </Box>
                ))}
              </CardContent>
            </Card>

            {/* IVA Crédito */}
            <Card variant="outlined" sx={{ borderRadius: 2, borderColor: "success.light" }}>
              <CardContent sx={{ p: "16px !important" }}>
                <Box sx={{ display: "flex", alignItems: "center", gap: 1, mb: 1.5 }}>
                  <Icon icon="lucide:shopping-cart" width={18} style={{ opacity: 0.7 }} />
                  <Typography variant="subtitle2" fontWeight={700}>
                    IVA Crédito Fiscal (Compras{credito.cantidad_nc > 0 ? ` − ${credito.cantidad_nc} NC` : ""})
                  </Typography>
                  <Chip label={credito.cantidad_compras ?? 0} size="small" color="success" sx={{ ml: "auto" }} />
                </Box>
                <Divider sx={{ mb: 1.5 }} />
                {[
                  { label: "Base Gravada 10%", value: credito.gravada_10 },
                  { label: "Base Gravada 5%", value: credito.gravada_5 },
                  { label: "Exentas", value: credito.exentas },
                  { label: "IVA Crédito 10%", value: credito.iva_10, bold: true, color: "success.main" },
                  { label: "IVA Crédito 5%", value: credito.iva_5, bold: true, color: "success.main" },
                  { label: "Total IVA Crédito", value: credito.total_iva, bold: true, color: "success.main" },
                ].map((r, i) => (
                  <Box key={i} sx={{ display: "flex", justifyContent: "space-between", py: 0.4 }}>
                    <Typography variant="caption" color="text.secondary">{r.label}</Typography>
                    <Typography variant="caption" fontWeight={r.bold ? 700 : 400} color={r.color || "text.primary"}>{fmt(r.value)}</Typography>
                  </Box>
                ))}
              </CardContent>
            </Card>
          </Box>

          {/* ── Retenciones IVA recibidas ── */}
          {retenciones.cantidad > 0 && (
            <Card variant="outlined" sx={{ borderRadius: 2, borderColor: "warning.light", mb: 2 }}>
              <CardContent sx={{ p: "16px !important" }}>
                <Box sx={{ display: "flex", alignItems: "center", gap: 1, mb: 1.5 }}>
                  <Icon icon="lucide:shield-check" width={18} style={{ opacity: 0.7 }} />
                  <Typography variant="subtitle2" fontWeight={700}>IVA Retenido al Vender (Form. 120 — Retenciones que le practicaron)</Typography>
                  <Chip label={retenciones.cantidad} size="small" color="warning" sx={{ ml: "auto" }} />
                </Box>
                <Divider sx={{ mb: 1.5 }} />
                <Box sx={{ display: "grid", gridTemplateColumns: { xs: "1fr", sm: "repeat(3, 1fr)" }, gap: 2 }}>
                  <Box>
                    <Typography variant="caption" color="text.secondary">Total retenido</Typography>
                    <Typography variant="body1" fontWeight={700} color="warning.main">{fmt(retenciones.monto_total)}</Typography>
                  </Box>
                  <Box>
                    <Typography variant="caption" color="text.secondary">Declaradas en SET</Typography>
                    <Typography variant="body1" fontWeight={700} color="success.main">{fmt(retenciones.monto_declaradas)}</Typography>
                  </Box>
                  <Box>
                    <Typography variant="caption" color="text.secondary">Pendientes de declarar</Typography>
                    <Typography variant="body1" fontWeight={700} color={retenciones.monto_pendientes > 0 ? "error.main" : "text.primary"}>{fmt(retenciones.monto_pendientes)}</Typography>
                  </Box>
                </Box>
                <Typography variant="caption" color="text.secondary" sx={{ display: "block", mt: 1.5 }}>
                  Estas retenciones reducen el IVA a pagar del período. Marcalas como declaradas desde el Libro de Retenciones.
                </Typography>
              </CardContent>
            </Card>
          )}

          {/* ── Tabla resumen liquidación ── */}
          <Paper variant="outlined" sx={{ p: 2.5, borderRadius: 2 }}>
            <Typography variant="subtitle2" fontWeight={700} sx={{ mb: 2, display: "flex", alignItems: "center", gap: 1 }}>
              <Icon icon="lucide:table" width={16} />
              Cuadro de Liquidación — {MESES[mes - 1]} {anio}
            </Typography>
            {[
              { label: "IVA Débito Fiscal 10%", debito: debito.iva_10, credito: null, saldo: null },
              { label: "IVA Débito Fiscal 5%", debito: debito.iva_5, credito: null, saldo: null },
              { label: "Total IVA Débito", debito: debito.total_iva, credito: null, saldo: null, bold: true },
              { label: "IVA Crédito Fiscal 10%", debito: null, credito: credito.iva_10, saldo: null },
              { label: "IVA Crédito Fiscal 5%", debito: null, credito: credito.iva_5, saldo: null },
              { label: "Total IVA Crédito", debito: null, credito: credito.total_iva, saldo: null, bold: true },
              { label: "SALDO IVA 10%", debito: null, credito: null, saldo: liq.saldo_iva_10, bold: true },
              { label: "SALDO IVA 5%", debito: null, credito: null, saldo: liq.saldo_iva_5, bold: true },
              { label: "Subtotal (antes de retenciones)", debito: null, credito: null, saldo: liq.saldo_antes_retenciones, bold: true },
              { label: "(−) Retenciones IVA recibidas", debito: null, credito: liq.retenciones_iva, saldo: null },
              { label: "SALDO TOTAL IVA", debito: null, credito: null, saldo: liq.saldo_total, bold: true, highlight: true },
            ].map((r, i) => (
              <Box
                key={i}
                sx={{
                  display: "grid",
                  gridTemplateColumns: "1fr 1fr 1fr 1fr",
                  py: 0.5,
                  px: 1,
                  borderRadius: 1,
                  background: r.highlight ? (t) => t.palette.action.hover : "transparent",
                  borderBottom: "1px solid",
                  borderColor: "divider",
                }}
              >
                <Typography variant="caption" color="text.secondary" fontWeight={r.bold ? 700 : 400}>{r.label}</Typography>
                <Typography variant="caption" align="right" fontWeight={r.bold ? 700 : 400} color="primary.main">
                  {r.debito != null ? fmt(r.debito) : "—"}
                </Typography>
                <Typography variant="caption" align="right" fontWeight={r.bold ? 700 : 400} color="success.main">
                  {r.credito != null ? fmt(r.credito) : "—"}
                </Typography>
                <Typography
                  variant="caption" align="right" fontWeight={r.bold ? 700 : 400}
                  color={r.saldo != null ? (r.saldo > 0 ? "error.main" : r.saldo < 0 ? "success.main" : "text.secondary") : "text.secondary"}
                >
                  {r.saldo != null ? (r.saldo > 0 ? fmt(r.saldo) : r.saldo < 0 ? `(${fmt(Math.abs(r.saldo))})` : "0") : "—"}
                </Typography>
              </Box>
            ))}
            {/* Encabezado de columnas */}
            <Box sx={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr 1fr", mt: 0.5, px: 1 }}>
              <Box />
              <Typography variant="caption" align="right" color="primary.main" fontWeight={700}>Débito</Typography>
              <Typography variant="caption" align="right" color="success.main" fontWeight={700}>Crédito</Typography>
              <Typography variant="caption" align="right" fontWeight={700}>Saldo</Typography>
            </Box>
          </Paper>
        </>
      )}
    </Box>
  );
}