import { Icon } from "@iconify/react";
import {
  Alert,
  Box,
  Button,
  Card,
  CardContent,
  Chip,
  Collapse,
  Divider,
  FormControl,
  IconButton,
  InputLabel,
  MenuItem,
  Paper,
  Select,
  Skeleton,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  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 { toast } from "sonner";
import api from "../api/api.config";
import { getEmpresaMonedas } from "../api/monedas.service";
import { AccesoRestringido } from "../components/common/AccesoRestringido";
import { usePermission } from "../hooks/usePermission";
import { MarangatuExportButton } from "../components/reportes/MarangatuExportButton";
import { descargarCSV, descargarExcel, ExportarMenuButton } from "../components/_standards";
import { fmtFechaCalendario } from "../utils/fecha";

// ==================== TIPO DE COMPROBANTE ====================

// Antes esto era un checkbox "Solo preimpresos" y destildarlo traía los dos tipos
// mezclados. Contabilidad necesita el listado de electrónicos AISLADO para cruzarlo
// contra Marangatu, así que el filtro pasó a tener tres opciones.
const TIPO_PREIMPRESOS = "preimpresos";
const TIPO_ELECTRONICOS = "electronicos";
const TIPO_TODOS = "todos";

const TIPOS_COMPROBANTE = [
  { value: TIPO_PREIMPRESOS, label: "Solo preimpresos" },
  { value: TIPO_ELECTRONICOS, label: "Solo electrónicos" },
  { value: TIPO_TODOS, label: "Todos" },
];

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

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

const getLibroIVAComprasMarangatu = async (mes, anio, monedaId, tipoComprobante = TIPO_PREIMPRESOS) => {
  const params = new URLSearchParams({ mes: String(mes), anio: String(anio) });
  if (monedaId) params.set("moneda_id", monedaId);
  params.set("tipo_comprobante", tipoComprobante);
  const res = await api.get(`/compras/libro-iva-compras/marangatu?${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);
};

// `fecha` llega del backend como "YYYY-MM-DD" (columna DATE, sin hora). Se formatea
// con fmtFechaCalendario, que la parsea por texto: hacer new Date("2026-07-01") la
// interpreta como medianoche UTC y getDate() devuelve el día local, corriendo la
// fecha un día para atrás en Paraguay (UTC-4). Ver docs/ui-standards.md.
const formatFecha = (fecha) => fmtFechaCalendario(fecha, "-");

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;

// ==================== EXPORT ====================

// Los montos van como número (no texto) para que el Excel los pueda sumar.
const num = (v) => Number(v || 0);

const armarTabla = (data) => {
  const encabezados = [
    "Fecha", "Número", "Timbrado", "Proveedor", "RUC",
    "Condición", "Tipo", "Gravada 10%", "Gravada 5%", "Exentas",
    "IVA 10%", "IVA 5%", "Total",
  ];
  const filas = data.detalle.map((d) => [
    formatFecha(d.fecha), d.numero, d.timbrado, d.proveedor, d.ruc,
    d.condicion, d.es_preimpreso === false ? "Electrónico" : "Preimpreso",
    num(d.gravada_10), num(d.gravada_5), num(d.exentas),
    num(d.iva_10), num(d.iva_5), num(d.total),
  ]);

  const r = data.resumen.compras || {};
  const g = data.resumen.gastos || {};
  const nc = data.resumen.notas_credito || {};
  const di = data.resumen.despachos_importacion || {};
  const cf = data.resumen.credito_fiscal || {};
  filas.push([]);
  filas.push([
    // 6 celdas vacías: Número, Timbrado, Proveedor, RUC, Condición y Tipo.
    "TOTALES (facturas + gastos, neto de NC)", "", "", "", "", "", "",
    num(r.gravada_10) + num(g.gravada_10) + num(di.gravada_10) - num(nc.gravada_10),
    num(r.gravada_5) + num(g.gravada_5) - num(nc.gravada_5),
    num(r.exentas) + num(g.exentas) - num(nc.exentas),
    num(cf.iva_10), num(cf.iva_5),
    num(r.total) + num(g.total) + num(di.total) - num(nc.total),
  ]);
  return { encabezados, filas };
};

const exportar = (formato, data, mes, anio) => {
  if (!data?.detalle) return;
  const archivo = `libro_iva_compras_${anio}_${String(mes).padStart(2, "0")}`;
  if (formato === "xlsx") descargarExcel({ ...armarTabla(data), archivo, hoja: "Libro IVA Compras" });
  else descargarCSV({ ...armarTabla(data), archivo });
  toast.success("Libro IVA Compras exportado correctamente");
};

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

export function ReporteLibroIVACompras() {
  const navigate = useNavigate();
  const muiTheme = useTheme();
  const isMobile = useMediaQuery(muiTheme.breakpoints.down("md"));
  const { canRead } = usePermission("REPORTES");
  const { canRead: canReadCompras } = usePermission("COMPRAS");
  // El archivo que se sube a la SET pide su propio permiso (antes alcanzaba con ver el reporte).
  const puedeExportarMarangatu = usePermission("FISCAL").can("FIS_MAR_MARANGATU_EXPORTAR");

  const [mes, setMes] = useState(getMesActual());
  const [anio, setAnio] = useState(getAnioActual());
  const [monedaId, setMonedaId] = useState("");
  // Los electrónicos ya están declarados vía SIFEN: por defecto el libro trae solo lo
  // que hay que subir a Marangatu, que son los preimpresos.
  const [tipoComprobante, setTipoComprobante] = useState(TIPO_PREIMPRESOS);
  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(() => {
    if (!monedaId) return null;
    return 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, error } = useQuery({
    queryKey: ["libro-iva-compras", mes, anio, monedaId, tipoComprobante],
    queryFn: () => getLibroIVACompras(mes, anio, monedaId || undefined, tipoComprobante),
  });

  const resumen = data?.resumen || {};
  const compras = resumen.compras || {};
  const gastos = resumen.gastos || {};
  const notasCredito = resumen.notas_credito || {};
  // El IVA importación se paga en aduana y no llega por SIFEN: se declara con el
  // despacho, así que suma al crédito fiscal como una línea propia.
  const despachos = resumen.despachos_importacion || {};
  const creditoFiscal = resumen.credito_fiscal || {};
  const detalle = useMemo(() => data?.detalle || [], [data]);

  // Netos del período (facturas + gastos/viáticos − notas de crédito), para la fila de totales.
  const neto = useMemo(() => {
    const c = data?.resumen?.compras || {};
    const g = data?.resumen?.gastos || {};
    const n = data?.resumen?.notas_credito || {};
    const d = data?.resumen?.despachos_importacion || {};
    return {
      gravada_10: (c.gravada_10 || 0) + (g.gravada_10 || 0) + (d.gravada_10 || 0) - (n.gravada_10 || 0),
      gravada_5: (c.gravada_5 || 0) + (g.gravada_5 || 0) - (n.gravada_5 || 0),
      exentas: (c.exentas || 0) + (g.exentas || 0) - (n.exentas || 0),
      total: (c.total || 0) + (g.total || 0) + (d.total || 0) - (n.total || 0),
    };
  }, [data]);

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

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

  // Sin esto, un error de la API dejaba `data` en undefined y los `|| {}` de arriba
  // pintaban todo en Gs. 0: el reporte parecia vacio -- "no hay comprobantes" -- cuando
  // en realidad la consulta habia fallado. El caso tipico es un 403 por alcance de
  // sucursal, que el usuario no tiene forma de adivinar mirando ceros.
  const mensajeError = error
    ? error?.response?.data?.message || error?.message || "No se pudo cargar el Libro IVA Compras."
    : null;

  return (
    <Box sx={{ maxWidth: 1400, mx: "auto", p: { xs: 2, md: 3 } }}>
      {mensajeError && (
        <Alert severity="error" sx={{ mb: 2 }}>
          {mensajeError}
        </Alert>
      )}
      {/* ── 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:shopping-cart" width={22} />
              <Typography variant="h6" fontWeight={700}>Libro IVA Compras</Typography>
            </Box>
            <Typography variant="caption" color="text.secondary">
              Registro fiscal de IVA Crédito por período mensual
            </Typography>
          </Box>
        </Box>
        <Box sx={{ display: "flex", gap: 1, flexWrap: "wrap" }}>
          <ExportarMenuButton
            disabled={!detalle.length}
            onExcel={() => exportar("xlsx", data, mes, anio)}
            onCSV={() => exportar("csv", data, mes, anio)}
          />
          <MarangatuExportButton
            disabled={!detalle.length || !puedeExportarMarangatu}
            motivoDeshabilitado={
              puedeExportarMarangatu ? undefined : "Necesitás el permiso «Exportar Marangatú» (Fiscal) para descargar el archivo."
            }
            fetchData={() => getLibroIVAComprasMarangatu(mes, anio, monedaId || undefined, tipoComprobante)}
          />
        </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>
          {" > "}Libro IVA Compras
        </Typography>
        <Tooltip title={showHelp ? "Ocultar ayuda" : "Ver explicación del reporte"}>
          <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: "success.main" }}>
          <Box sx={{ display: "flex", alignItems: "flex-start", gap: 1.5, mb: 2 }}>
            <Icon icon="lucide:book-open" width={20} style={{ color: "#22c55e", marginTop: 2 }} />
            <Box>
              <Typography variant="subtitle2" fontWeight={700} sx={{ mb: 0.5 }}>
                ¿Qué es el Libro IVA Compras?
              </Typography>
              <Typography variant="body2" color="text.secondary" sx={{ lineHeight: 1.7 }}>
                Es el registro fiscal mensual que detalla el IVA que tu empresa pagó a sus proveedores al comprar bienes o servicios.
                Este monto se conoce como <strong>IVA Crédito Fiscal</strong> y se usa para reducir el IVA Débito (ventas),
                calculando así el saldo a pagar a la DNIT en el <strong>Formulario 120</strong>.
              </Typography>
            </Box>
          </Box>

          <Box sx={{ display: "grid", gridTemplateColumns: { xs: "1fr", md: "repeat(2, 1fr)" }, gap: 2 }}>
            <Alert severity="success" variant="outlined" icon={<Icon icon="lucide:calculator" width={18} />}>
              <Typography variant="caption" fontWeight={700} display="block" sx={{ mb: 0.5 }}>
                Fórmula IVA a Pagar
              </Typography>
              <Typography variant="caption" color="text.secondary">
                <strong>IVA Débito</strong> (ventas) <strong>−</strong> <strong>IVA Crédito</strong> (compras){" "}
                <strong>=</strong> Saldo a pagar / Crédito a favor
              </Typography>
            </Alert>
            <Alert severity="info" variant="outlined" icon={<Icon icon="lucide:info" width={18} />}>
              <Typography variant="caption" fontWeight={700} display="block" sx={{ mb: 0.5 }}>
                Requisito para deducir el IVA Crédito
              </Typography>
              <Typography variant="caption" color="text.secondary">
                Solo se puede deducir el IVA Crédito de compras con factura legal a nombre de la empresa,
                con timbrado vigente al momento de la compra.
              </Typography>
            </Alert>
          </Box>

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

          <Box sx={{ display: "flex", alignItems: "flex-start", gap: 1.5 }}>
            <Icon icon="lucide:file-check" width={20} style={{ color: "#22c55e", marginTop: 2 }} />
            <Box>
              <Typography variant="subtitle2" fontWeight={700} sx={{ mb: 0.5 }}>
                ¿Por qué el reporte trae solo los preimpresos?
              </Typography>
              <Typography variant="body2" color="text.secondary" sx={{ lineHeight: 1.7, mb: 1 }}>
                Cuando un proveedor te emite una <strong>factura electrónica</strong>, ese comprobante ya
                llega sola a la DNIT y lo vas a ver en Marangatu sin hacer nada. En cambio los{" "}
                <strong>preimpresos</strong> (los del talonario en papel) no le constan a la DNIT hasta que
                vos los declarás: esos son los que hay que subir.
              </Typography>
              <Typography variant="body2" color="text.secondary" sx={{ lineHeight: 1.7 }}>
                Por eso el filtro <strong>«Comprobantes»</strong> viene en{" "}
                <strong>«Solo preimpresos»</strong>: ese es el listado que se sube.
              </Typography>
              <Typography variant="body2" color="text.secondary" sx={{ lineHeight: 1.7 }}>
                Las otras dos opciones son para controlar, no para declarar:{" "}
                <strong>«Solo electrónicos»</strong> trae únicamente lo que la DNIT ya tiene, para
                cruzarlo línea por línea contra Marangatu y detectar lo que te falta cargar; y{" "}
                <strong>«Todos»</strong> muestra el período completo. <strong>Ninguna de las dos
                se sube a Marangatu</strong>, porque duplicaría comprobantes que la DNIT ya tiene.
              </Typography>
            </Box>
          </Box>

          <Alert severity="warning" variant="outlined" sx={{ mt: 2 }} icon={<Icon icon="lucide:pencil" width={18} />}>
            <Typography variant="caption" fontWeight={700} display="block" sx={{ mb: 0.5 }}>
              ¿Falta o sobra un comprobante en el listado?
            </Typography>
            <Typography variant="caption" color="text.secondary">
              La marca se define al cargar el comprobante, con el switch{" "}
              <strong>«Comprobante preimpreso»</strong> que está junto al número de factura en{" "}
              <strong>Gastos</strong> y en <strong>Compras</strong>. Viene tildado por defecto. Si un
              comprobante quedó mal marcado, editalo desde su pantalla, corregí el switch y volvé a
              generar el reporte.
            </Typography>
          </Alert>
        </Paper>
      </Collapse>

      {/* ── Filtro período ── */}
      <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>
          <Tooltip
            title="«Solo preimpresos» es lo que hay que declarar en Marangatu. «Solo electrónicos» aísla lo que la DNIT ya tiene, para cruzarlo contra Marangatu."
            arrow
            enterDelay={300}
          >
            <FormControl size="small" sx={{ minWidth: 190 }}>
              <InputLabel>Comprobantes</InputLabel>
              <Select
                value={tipoComprobante}
                label="Comprobantes"
                onChange={(e) => setTipoComprobante(e.target.value)}
              >
                {TIPOS_COMPROBANTE.map((t) => (
                  <MenuItem key={t.value} value={t.value}>{t.label}</MenuItem>
                ))}
              </Select>
            </FormControl>
          </Tooltip>
          <Chip
            label={`${MESES[mes - 1]} ${anio}${monedaId ? ` • ${codigoMoneda}` : ""}`}
            color="success"
            variant="outlined"
            icon={<Icon icon="lucide:calendar" width={14} />}
          />
        </Box>
        {tipoComprobante === TIPO_ELECTRONICOS && (
          <Alert severity="info" sx={{ mt: 1.5, py: 0.5 }}>
            Estás viendo <strong>solo los comprobantes electrónicos</strong>, para cruzar contra
            lo que ya figura en Marangatu. <strong>No los subas</strong>: la DNIT ya los tiene por
            el documento del proveedor.
          </Alert>
        )}
        {tipoComprobante === TIPO_TODOS && (
          <Alert severity="warning" sx={{ mt: 1.5, py: 0.5 }}>
            Estás viendo los dos tipos mezclados. Subir este listado a Marangatu duplicaría los
            electrónicos, porque la DNIT ya los tiene por el documento del proveedor.
          </Alert>
        )}
      </Paper>

      {/* ── Resumen Fiscal ── */}
      {isLoading ? (
        <Box sx={{ display: "flex", flexDirection: "column", gap: 1, mb: 2 }}>
          {[...Array(3)].map((_, i) => <Skeleton key={i} variant="rounded" height={80} />)}
        </Box>
      ) : (
        <>
          {/* KPI Crédito Fiscal */}
          <Paper
            variant="outlined"
            sx={{
              p: 3, mb: 2, borderRadius: 2,
              background: (t) => t.palette.mode === "dark" ? "rgba(34,197,94,0.06)" : "rgba(34,197,94,0.03)",
              borderColor: "success.main",
            }}
          >
            <Box sx={{ display: "flex", alignItems: "center", gap: 1, mb: 1 }}>
              <Typography variant="overline" color="success.main" fontWeight={600}>
                IVA Crédito Fiscal — {MESES[mes - 1]} {anio}
              </Typography>
              <Tooltip title="Este es el impuesto que pagaste a tus proveedores en el período. Se resta del IVA Débito para calcular el saldo a pagar en el Formulario 120." arrow>
                <Box sx={{ display: "flex", cursor: "help" }}>
                  <Icon icon="lucide:help-circle" width={15} style={{ color: "#22c55e" }} />
                </Box>
              </Tooltip>
            </Box>
            <Box sx={{ display: "grid", gridTemplateColumns: { xs: "1fr", sm: "repeat(3, 1fr)" }, gap: 3 }}>
              <Box>
                <Typography variant="caption" color="text.secondary">IVA Crédito 10%</Typography>
                <Typography variant="h5" fontWeight={800} color="success.main">
                  {fmt(creditoFiscal.iva_10)}
                </Typography>
              </Box>
              <Box>
                <Typography variant="caption" color="text.secondary">IVA Crédito 5%</Typography>
                <Typography variant="h5" fontWeight={800} color="success.main">
                  {fmt(creditoFiscal.iva_5)}
                </Typography>
              </Box>
              <Box>
                <Typography variant="caption" color="text.secondary">Total IVA Crédito</Typography>
                <Typography variant="h4" fontWeight={800} color="success.main">
                  {fmt(creditoFiscal.total)}
                </Typography>
              </Box>
            </Box>
          </Paper>

          {/* Desglose */}
          <Box sx={{ display: "grid", gridTemplateColumns: { xs: "1fr", md: "repeat(2, 1fr)" }, gap: 2, mb: 2 }}>
            <Card variant="outlined" sx={{ borderRadius: 2 }}>
              <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.6 }} />
                  <Typography variant="subtitle2" fontWeight={700}>Compras del período</Typography>
                  <Chip label={compras.cantidad || 0} size="small" color="success" sx={{ ml: "auto" }} />
                </Box>
                <Divider sx={{ mb: 1.5 }} />
                {[
                  { label: "Base Gravada 10%", value: compras.gravada_10 },
                  { label: "Base Gravada 5%", value: compras.gravada_5 },
                  { label: "Exentas", value: compras.exentas },
                  { label: "IVA Crédito 10%", value: compras.iva_10, bold: true },
                  { label: "IVA Crédito 5%", value: compras.iva_5, bold: true },
                  { label: "Total Compras", value: compras.total, bold: true },
                ].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}>{fmt(r.value)}</Typography>
                  </Box>
                ))}
              </CardContent>
            </Card>

            {gastos.cantidad > 0 && (
              <Card variant="outlined" sx={{ borderRadius: 2 }}>
                <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.6 }} />
                    <Typography variant="subtitle2" fontWeight={700}>Gastos y viáticos del período</Typography>
                    <Chip label={gastos.cantidad || 0} size="small" color="info" sx={{ ml: "auto" }} />
                  </Box>
                  <Divider sx={{ mb: 1.5 }} />
                  {[
                    { label: "Base Gravada 10%", value: gastos.gravada_10 },
                    { label: "Base Gravada 5%", value: gastos.gravada_5 },
                    { label: "Exentas", value: gastos.exentas },
                    { label: "IVA Crédito 10%", value: gastos.iva_10, bold: true },
                    { label: "IVA Crédito 5%", value: gastos.iva_5, bold: true },
                    ...(gastos.cantidad_no_deducibles
                      ? [
                          {
                            label: `IVA no deducible (${gastos.cantidad_no_deducibles} sin crédito)`,
                            value: gastos.iva_no_deducible,
                            color: "warning.main",
                          },
                        ]
                      : []),
                    { label: "Total Gastos", value: gastos.total, bold: true },
                  ].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>
            )}

            {despachos.cantidad > 0 && (
              <Card variant="outlined" sx={{ borderRadius: 2 }}>
                <CardContent sx={{ p: "16px !important" }}>
                  <Box sx={{ display: "flex", alignItems: "center", gap: 1, mb: 1.5 }}>
                    <Icon icon="lucide:ship" width={18} style={{ opacity: 0.6 }} />
                    <Typography variant="subtitle2" fontWeight={700}>Despachos de importación</Typography>
                    <Chip label={despachos.cantidad || 0} size="small" color="secondary" sx={{ ml: "auto" }} />
                  </Box>
                  <Divider sx={{ mb: 1.5 }} />
                  {[
                    { label: "Base Gravada 10%", value: despachos.gravada_10 },
                    { label: "IVA Crédito 10%", value: despachos.iva_10, bold: true },
                    { label: "Total", value: despachos.total, bold: true },
                  ].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}>{fmt(r.value)}</Typography>
                    </Box>
                  ))}
                  <Typography variant="caption" color="text.secondary" sx={{ display: "block", mt: 1, lineHeight: 1.5 }}>
                    La base se deriva del IVA al 10%: es la relación que usó la liquidación aduanera.
                  </Typography>
                </CardContent>
              </Card>
            )}

            <Card variant="outlined" sx={{ borderRadius: 2, borderColor: "success.main" }}>
              <CardContent sx={{ p: "16px !important" }}>
                <Box sx={{ display: "flex", alignItems: "center", gap: 1, mb: 1.5 }}>
                  <Icon icon="lucide:calculator" width={18} style={{ opacity: 0.6 }} />
                  <Typography variant="subtitle2" fontWeight={700}>IVA Crédito Deducible</Typography>
                  <Tooltip title="El IVA Crédito se resta del IVA Débito (ventas) al presentar el Formulario 120." arrow>
                    <Box sx={{ display: "flex", cursor: "help" }}>
                      <Icon icon="lucide:info" width={14} style={{ opacity: 0.4 }} />
                    </Box>
                  </Tooltip>
                </Box>
                <Divider sx={{ mb: 1.5 }} />
                {[
                  ...(notasCredito.cantidad || gastos.cantidad
                    ? [
                        { label: "IVA facturas 10%", value: compras.iva_10 },
                        { label: "IVA facturas 5%", value: compras.iva_5 },
                      ]
                    : []),
                  ...(gastos.cantidad
                    ? [
                        {
                          label: `(+) IVA gastos y viáticos (${gastos.cantidad})`,
                          value: (gastos.iva_10 || 0) + (gastos.iva_5 || 0),
                          color: "info.main",
                        },
                      ]
                    : []),
                  ...(despachos.cantidad
                    ? [
                        {
                          label: `(+) IVA importación (${despachos.cantidad} despacho${despachos.cantidad > 1 ? "s" : ""})`,
                          value: despachos.iva_10 || 0,
                          color: "secondary.main",
                        },
                      ]
                    : []),
                  ...(notasCredito.cantidad
                    ? [
                        { label: `(−) IVA notas de crédito (${notasCredito.cantidad})`, value: -(notasCredito.iva_10 || 0) - (notasCredito.iva_5 || 0), color: "error.main" },
                      ]
                    : []),
                  { label: "IVA Crédito 10%", value: creditoFiscal.iva_10, bold: true, color: "success.main" },
                  { label: "IVA Crédito 5%", value: creditoFiscal.iva_5, bold: true, color: "success.main" },
                  { label: "Total Crédito Fiscal", value: creditoFiscal.total, 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>

          {/* ── Detalle ── */}
          {detalle.length === 0 ? (
            <Paper variant="outlined" sx={{ p: 6, textAlign: "center", borderRadius: 2 }}>
              <Icon icon="lucide:inbox" width={48} style={{ opacity: 0.3, marginBottom: 12 }} />
              <Typography color="text.secondary">
                No hay compras en {MESES[mes - 1]} {anio}
              </Typography>
            </Paper>
          ) : isMobile ? (
            <Box sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
              {detalle.map((d, i) => (
                <Card key={i} variant="outlined" sx={{ borderRadius: 2 }}>
                  <CardContent sx={{ p: "12px !important" }}>
                    <Box sx={{ display: "flex", justifyContent: "space-between", mb: 0.5 }}>
                      <Typography variant="body2" fontWeight={600}>{d.numero || "-"}</Typography>
                      <Typography variant="caption" color="text.secondary">{d.timbrado || "-"}</Typography>
                    </Box>
                    <Typography variant="caption" color="text.secondary">
                      {d.proveedor} {d.ruc ? `• ${d.ruc}` : ""}
                    </Typography>
                    <Box sx={{ display: "flex", justifyContent: "space-between", mt: 1 }}>
                      <Typography variant="caption">{formatFecha(d.fecha)}</Typography>
                      <Typography variant="body2" fontWeight={700} color="success.main">
                        {fmt(d.total)}
                      </Typography>
                    </Box>
                  </CardContent>
                </Card>
              ))}
            </Box>
          ) : (
            <TableContainer component={Paper} variant="outlined" sx={{ borderRadius: 2 }}>
              <Table size="small">
                <TableHead>
                  <TableRow>
                    <TableCell sx={{ fontWeight: 600 }}>Fecha</TableCell>
                    <TableCell sx={{ fontWeight: 600 }}>Número</TableCell>
                    <TableCell sx={{ fontWeight: 600 }}>Timbrado</TableCell>
                    <TableCell sx={{ fontWeight: 600 }}>Proveedor</TableCell>
                    <TableCell sx={{ fontWeight: 600 }}>RUC</TableCell>
                    <TableCell sx={{ fontWeight: 600 }}>Cond.</TableCell>
                    {/* Solo aporta cuando el listado trae los dos tipos mezclados. */}
                    {tipoComprobante === TIPO_TODOS && <TableCell sx={{ fontWeight: 600 }}>Tipo</TableCell>}
                    <TableCell sx={{ fontWeight: 600 }} align="right">Grav. 10%</TableCell>
                    <TableCell sx={{ fontWeight: 600 }} align="right">Grav. 5%</TableCell>
                    <TableCell sx={{ fontWeight: 600 }} align="right">Exentas</TableCell>
                    <TableCell sx={{ fontWeight: 600 }} align="right">IVA 10%</TableCell>
                    <TableCell sx={{ fontWeight: 600 }} align="right">IVA 5%</TableCell>
                    <TableCell sx={{ fontWeight: 600 }} align="right">Total</TableCell>
                  </TableRow>
                </TableHead>
                <TableBody>
                  {detalle.map((d, i) => {
                    const esNC = d.tipo === "NOTA_CREDITO_COMPRA";
                    const esGasto = d.tipo === "GASTO";
                    const esViatico = d.tipo === "VIATICO";
                    return (
                      <TableRow
                        key={i}
                        hover
                        sx={{
                          "&:last-child td": { borderBottom: 0 },
                          ...(esNC && { backgroundColor: (t) => t.palette.mode === "dark" ? "rgba(239,68,68,0.06)" : "rgba(239,68,68,0.03)" }),
                        }}
                      >
                        <TableCell sx={{ whiteSpace: "nowrap" }}>{formatFecha(d.fecha)}</TableCell>
                        <TableCell>
                          <Box sx={{ display: "flex", alignItems: "center", gap: 0.5 }}>
                            {esNC && <Chip label="NC" size="small" color="error" variant="outlined" sx={{ height: 18, fontSize: "0.65rem" }} />}
                            {esGasto && <Chip label="Gasto" size="small" color="info" variant="outlined" sx={{ height: 18, fontSize: "0.65rem" }} />}
                            {esViatico && <Chip label="Viático" size="small" color="secondary" variant="outlined" sx={{ height: 18, fontSize: "0.65rem" }} />}
                            <Typography variant="body2" fontWeight={600} color={esNC ? "error.main" : "text.primary"}>{d.numero || "-"}</Typography>
                          </Box>
                        </TableCell>
                        <TableCell>
                          <Typography variant="caption" color="text.secondary">{d.timbrado || "-"}</Typography>
                        </TableCell>
                        <TableCell>
                          <Typography variant="body2" noWrap sx={{ maxWidth: 200 }}>{d.proveedor}</Typography>
                        </TableCell>
                        <TableCell>
                          <Typography variant="caption" color="text.secondary">{d.ruc || "-"}</Typography>
                        </TableCell>
                        <TableCell>
                          <Typography variant="caption">{d.condicion}</Typography>
                        </TableCell>
                        {tipoComprobante === TIPO_TODOS && (
                          <TableCell>
                            <Chip
                              label={d.es_preimpreso === false ? "Electrónico" : "Preimpreso"}
                              size="small"
                              variant="outlined"
                              color={d.es_preimpreso === false ? "default" : "success"}
                              sx={{ height: 18, fontSize: "0.65rem" }}
                            />
                          </TableCell>
                        )}
                        <TableCell align="right">{fmt(d.gravada_10)}</TableCell>
                        <TableCell align="right">{fmt(d.gravada_5)}</TableCell>
                        <TableCell align="right">{fmt(d.exentas)}</TableCell>
                        <TableCell align="right">
                          <Typography variant="body2" fontWeight={600} color={esNC ? "error.main" : "success.main"}>{fmt(d.iva_10)}</Typography>
                        </TableCell>
                        <TableCell align="right">
                          <Typography variant="body2" fontWeight={600} color={esNC ? "error.main" : "success.main"}>{fmt(d.iva_5)}</Typography>
                        </TableCell>
                        <TableCell align="right">
                          <Typography variant="body2" fontWeight={700} color={esNC ? "error.main" : "text.primary"}>{fmt(d.total)}</Typography>
                        </TableCell>
                      </TableRow>
                    );
                  })}
                  <TableRow sx={{ backgroundColor: "action.hover" }}>
                    <TableCell colSpan={6}>
                      <Typography variant="body2" fontWeight={700}>TOTALES (neto de NC)</Typography>
                    </TableCell>
                    <TableCell align="right"><Typography variant="body2" fontWeight={700}>{fmt(neto.gravada_10)}</Typography></TableCell>
                    <TableCell align="right"><Typography variant="body2" fontWeight={700}>{fmt(neto.gravada_5)}</Typography></TableCell>
                    <TableCell align="right"><Typography variant="body2" fontWeight={700}>{fmt(neto.exentas)}</Typography></TableCell>
                    <TableCell align="right"><Typography variant="body2" fontWeight={700} color="success.main">{fmt(creditoFiscal.iva_10)}</Typography></TableCell>
                    <TableCell align="right"><Typography variant="body2" fontWeight={700} color="success.main">{fmt(creditoFiscal.iva_5)}</Typography></TableCell>
                    <TableCell align="right"><Typography variant="body2" fontWeight={700}>{fmt(neto.total)}</Typography></TableCell>
                  </TableRow>
                </TableBody>
              </Table>
            </TableContainer>
          )}
        </>
      )}
    </Box>
  );
}