import { Icon } from "@iconify/react";
import {
  Box,
  Button,
  Card,
  CardContent,
  Chip,
  CircularProgress,
  Divider,
  FormControlLabel,
  IconButton,
  MenuItem,
  Stack,
  Switch,
  Tab,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  Tabs,
  TextField,
  Tooltip,
  Typography,
} from "@mui/material";
import { useState } from "react";
import { useNavigate } from "react-router-dom";
import { toast } from "sonner";
import {
  enviarReporteEmailProveedor,
  exportarMarcasCompradasExcel,
  exportarMarcasCompradasPDF,
  exportarVencidosProveedor,
  exportarVencidosProveedorPDF,
  exportarVentasPorMarcaExcel,
  exportarVentasPorMarcaPDF,
  getCapabilitiesProveedor,
  getMarcasCompradasProveedor,
  getProximosVencerProveedor,
  getResumenProveedor,
  getVencidosProveedor,
  getVentasPorMarcaProveedor,
} from "../api/reportes-proveedor.service";
import { useCreateProveedorMarcaMutation } from "../tanstack/ProveedorMarcaStack";
import { useQuery } from "@tanstack/react-query";
import { EmptyState, ScreenGuia } from "../components/_standards";
import { AccesoRestringido } from "../components/common/AccesoRestringido";
import { PdfPreviewModal } from "../components/common/PdfPreviewModal";
import { ProveedorSelector } from "../components/organismos/ProveedoresDesign/ProveedorSelector";
import { usePermission } from "../hooks/usePermission";
import { fmtFechaCalendario, hoyISO } from "../utils/fecha";

const formatNum = (n) =>
  new Intl.NumberFormat("es-PY").format(Number(n) || 0);

export function ReporteVencidosProveedorPage() {
  const navigate = useNavigate();
  const inv = usePermission("INVENTARIO");
  const canVer = inv.can("INV_RPR_REPORTE_VENCIDOS_PROVEEDOR_VER");
  const canExportar = inv.can("INV_RPR_REPORTE_EXPORTAR");
  const canEnviarEmail = inv.can("INV_RPR_REPORTE_ENVIAR_EMAIL");

  const [proveedor, setProveedor] = useState(null);
  const [desde, setDesde] = useState(() => {
    const d = new Date();
    d.setMonth(d.getMonth() - 1);
    return d.toISOString().substring(0, 10);
  });
  const [hasta, setHasta] = useState(() =>
    hoyISO(),
  );
  const [tab, setTab] = useState("vencidos");
  const [emailOverride, setEmailOverride] = useState("");
  const [modoVentas, setModoVentas] = useState("vinculo");
  const [soloPreferente, setSoloPreferente] = useState(false);

  const vincularMut = useCreateProveedorMarcaMutation();
  const [pdfModal, setPdfModal] = useState({ open: false, fetch: null, titulo: "", filename: "" });

  const proveedorId = proveedor?.id;

  const vencidosQ = useQuery({
    queryKey: ["reporte-vencidos-proveedor", proveedorId, desde, hasta],
    queryFn: () => getVencidosProveedor(proveedorId, { desde, hasta }),
    enabled: !!proveedorId && tab === "vencidos",
  });

  const proximosQ = useQuery({
    queryKey: ["reporte-proximos-vencer-proveedor", proveedorId],
    queryFn: () => getProximosVencerProveedor(proveedorId, { dias: 90 }),
    enabled: !!proveedorId && tab === "proximos",
  });

  const resumenQ = useQuery({
    queryKey: ["reporte-resumen-proveedor", proveedorId],
    queryFn: () => getResumenProveedor(proveedorId),
    enabled: !!proveedorId,
  });

  const capabilitiesQ = useQuery({
    queryKey: ["reporte-capabilities-proveedor", proveedorId],
    queryFn: () => getCapabilitiesProveedor(proveedorId),
    enabled: !!proveedorId,
  });

  const marcasCompradasQ = useQuery({
    queryKey: ["reporte-marcas-compradas", proveedorId, desde, hasta],
    queryFn: () => getMarcasCompradasProveedor(proveedorId, { desde, hasta }),
    enabled: !!proveedorId && tab === "marcas-compradas",
  });

  const ventasPorMarcaQ = useQuery({
    queryKey: [
      "reporte-ventas-por-marca",
      proveedorId,
      desde,
      hasta,
      modoVentas,
      soloPreferente,
    ],
    queryFn: () =>
      getVentasPorMarcaProveedor(proveedorId, {
        desde,
        hasta,
        modo: modoVentas,
        soloPreferente: soloPreferente ? "true" : undefined,
      }),
    enabled: !!proveedorId && tab === "ventas-por-marca",
  });

  const tieneLotesEnVentas = !!capabilitiesQ.data?.tieneLotesEnVentas;

  if (!canVer) return <AccesoRestringido />;

  const handleExportar = async () => {
    if (!proveedorId) return;
    try {
      const blob = await exportarVencidosProveedor(proveedorId, { desde, hasta });
      const url = window.URL.createObjectURL(blob);
      const a = document.createElement("a");
      a.href = url;
      a.download = `vencidos-${proveedor?.personas?.razon_social || "proveedor"}-${hoyISO()}.xlsx`;
      a.click();
      window.URL.revokeObjectURL(url);
      toast.success("Excel descargado");
    } catch (e) {
      toast.error(e?.response?.data?.message || "Error al exportar");
    }
  };

  const downloadBlob = (blob, filename) => {
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = filename;
    a.click();
    setTimeout(() => window.URL.revokeObjectURL(url), 30_000);
  };
  const openPdfModal = ({ titulo, filename, fetch }) =>
    setPdfModal({ open: true, titulo, filename, fetch });

  const handleExportTab = async (kind, format) => {
    if (!proveedorId) return;
    const baseName = `${kind}-${hoyISO()}`;
    const titulo =
      kind === "marcas-compradas" ? "Marcas compradas" : "Ventas por marca";
    const ventasParams = {
      desde,
      hasta,
      modo: modoVentas,
      soloPreferente: soloPreferente ? "true" : undefined,
    };

    if (format === "pdf") {
      openPdfModal({
        titulo,
        filename: `${baseName}.pdf`,
        fetch: () =>
          kind === "marcas-compradas"
            ? exportarMarcasCompradasPDF(proveedorId, { desde, hasta })
            : exportarVentasPorMarcaPDF(proveedorId, ventasParams),
      });
      return;
    }
    try {
      const blob =
        kind === "marcas-compradas"
          ? await exportarMarcasCompradasExcel(proveedorId, { desde, hasta })
          : await exportarVentasPorMarcaExcel(proveedorId, ventasParams);
      downloadBlob(blob, `${baseName}.xlsx`);
    } catch (e) {
      toast.error(e?.response?.data?.message || "Error al exportar");
    }
  };

  const handleExportarPDF = () => {
    if (!proveedorId) return;
    openPdfModal({
      titulo: "Vencidos por proveedor",
      filename: `vencidos-${hoyISO()}.pdf`,
      fetch: () => exportarVencidosProveedorPDF(proveedorId, { desde, hasta }),
    });
  };

  const handleEnviarEmail = async () => {
    if (!proveedorId) return;
    try {
      const res = await enviarReporteEmailProveedor(proveedorId, {
        desde,
        hasta,
        email: emailOverride || undefined,
      });
      toast.success(`Reporte enviado a ${res.destino}`);
    } catch (e) {
      toast.error(e?.response?.data?.message || "Error al enviar");
    }
  };

  const totalCostoVencidos = (vencidosQ.data || []).reduce(
    (a, r) => a + Number(r.costo_total || 0),
    0,
  );

  return (
    <Box p={2}>
      <Stack direction="row" alignItems="center" spacing={1} mb={1.5}>
        <Button
          size="small"
          variant="outlined"
          startIcon={<Icon icon="mdi:arrow-left" />}
          onClick={() => navigate("/reportes")}
        >
          Volver
        </Button>
        <Typography variant="h6" sx={{ ml: 1 }}>
          Reporte por proveedor
        </Typography>
      </Stack>
      <ScreenGuia
        titulo="Reporte por proveedor"
        moduloPadre="Inventario · Reportes"
        intro="Reportes operativos por proveedor: lotes vencidos y próximos a vencer (para canjes), marcas compradas y ventas atribuibles a cada proveedor."
        pasos={[
          {
            icon: "mdi:account-tie",
            color: "#60a5fa",
            titulo: "1. Seleccionar proveedor",
            desc: "Elegí el proveedor a analizar. Si no tiene marcas vinculadas, primero asignáselas desde 'Marcas que provee'.",
          },
          {
            icon: "mdi:calendar-range",
            color: "#f59e0b",
            titulo: "2. Rango de fechas",
            desc: "Por defecto último mes. Las fechas se interpretan en hora de Paraguay; el filtro incluye desde y hasta.",
          },
          {
            icon: "mdi:table-search",
            color: "#10b981",
            titulo: "3. Explorar pestañas",
            desc: "Vencidos, Próximos (30/60/90), Marcas compradas y Ventas por marca (modo vínculo o por lote).",
          },
          {
            icon: "mdi:file-export",
            color: "#ef4444",
            titulo: "4. Exportar o enviar",
            desc: "Descargá PDF/Excel desde cada pestaña, o enviá el reporte de vencidos por email al proveedor.",
          },
        ]}
        notas={[
          {
            icon: "mdi:alert-circle-outline",
            text: "Ventas por marca: el modo 'por vínculo' es aproximado (atribuye toda venta de la marca al proveedor vinculado). El modo 'por lote' es exacto pero requiere trazabilidad por lote en las ventas.",
          },
          {
            icon: "mdi:information-outline",
            text: "Se excluyen facturas anuladas, inutilizadas o con inoperatividad SIFEN.",
          },
        ]}
      />

      <Card sx={{ mb: 2 }}>
        <CardContent>
          <Stack
            direction={{ xs: "column", md: "row" }}
            spacing={2}
            alignItems={{ md: "center" }}
          >
            <Box sx={{ minWidth: 280, flex: 1 }}>
              <ProveedorSelector
                value={proveedor}
                onChange={setProveedor}
                label="Proveedor *"
              />
            </Box>
            <TextField
              size="small"
              type="date"
              label="Desde"
              value={desde}
              onChange={(e) => setDesde(e.target.value)}
              slotProps={{ inputLabel: { shrink: true } }}
            />
            <TextField
              size="small"
              type="date"
              label="Hasta"
              value={hasta}
              onChange={(e) => setHasta(e.target.value)}
              slotProps={{ inputLabel: { shrink: true } }}
            />
          </Stack>

          {resumenQ.data && (
            <Stack direction="row" spacing={1} mt={2} flexWrap="wrap">
              <Chip
                icon={<Icon icon="mdi:tag-multiple" />}
                label={`${resumenQ.data.marcas_que_provee} marcas`}
              />
              <Chip
                color="error"
                icon={<Icon icon="mdi:calendar-remove" />}
                label={`${resumenQ.data.lotes_vencidos} lotes vencidos`}
              />
              <Chip
                color="warning"
                icon={<Icon icon="mdi:calendar-alert" />}
                label={`${resumenQ.data.lotes_proximos_30} próximos (30 días)`}
              />
              <Chip
                variant="outlined"
                label={`Costo vencido: Gs. ${formatNum(resumenQ.data.valor_lotes_vencidos)}`}
              />
            </Stack>
          )}
        </CardContent>
      </Card>

      <Tabs
        value={tab}
        onChange={(_, v) => setTab(v)}
        sx={{ mb: 2 }}
        variant="scrollable"
        scrollButtons="auto"
      >
        <Tab label="Vencidos" value="vencidos" />
        <Tab label="Próximos a vencer (30/60/90)" value="proximos" />
        <Tab label="Marcas compradas" value="marcas-compradas" />
        <Tab label="Ventas por marca" value="ventas-por-marca" />
      </Tabs>

      {!proveedorId && (
        <EmptyState
          icon="mdi:account-search"
          title="Seleccione un proveedor"
          description="Elija un proveedor del selector para visualizar el reporte."
        />
      )}

      {proveedorId && tab === "vencidos" && (
        <Card>
          <CardContent>
            <Stack
              direction={{ xs: "column", sm: "row" }}
              spacing={1}
              mb={2}
              alignItems={{ sm: "center" }}
              justifyContent="space-between"
            >
              <Typography variant="subtitle1">
                {vencidosQ.data?.length || 0} lote(s) — Total: Gs. {formatNum(totalCostoVencidos)}
              </Typography>
              <Stack direction="row" spacing={1}>
                <TextField
                  size="small"
                  type="email"
                  label="Email override (opcional)"
                  value={emailOverride}
                  onChange={(e) => setEmailOverride(e.target.value)}
                  sx={{ minWidth: 240 }}
                />
                {canExportar && (
                  <Button
                    variant="outlined"
                    color="error"
                    startIcon={<Icon icon="mdi:file-pdf-box" />}
                    onClick={handleExportarPDF}
                    disabled={!vencidosQ.data?.length}
                  >
                    PDF
                  </Button>
                )}
                {canExportar && (
                  <Button
                    variant="outlined"
                    startIcon={<Icon icon="mdi:microsoft-excel" />}
                    onClick={handleExportar}
                    disabled={!vencidosQ.data?.length}
                  >
                    Excel
                  </Button>
                )}
                {canEnviarEmail && (
                  <Button
                    variant="contained"
                    startIcon={<Icon icon="mdi:email-send" />}
                    onClick={handleEnviarEmail}
                    disabled={!vencidosQ.data?.length}
                  >
                    Enviar al proveedor
                  </Button>
                )}
              </Stack>
            </Stack>

            {vencidosQ.isLoading ? (
              <Box display="flex" justifyContent="center" py={4}>
                <CircularProgress />
              </Box>
            ) : !vencidosQ.data?.length ? (
              <EmptyState
                icon="mdi:check-circle-outline"
                title="Sin vencidos en el rango"
                description="No hay lotes vencidos con stock para las marcas de este proveedor."
              />
            ) : (
              <TableContainer>
                <Table size="small">
                  <TableHead>
                    <TableRow>
                      <TableCell>Lote</TableCell>
                      <TableCell>Vencimiento</TableCell>
                      <TableCell>Producto</TableCell>
                      <TableCell>Marca</TableCell>
                      <TableCell>Depósito</TableCell>
                      <TableCell align="right">Stock</TableCell>
                      <TableCell align="right">Costo unit.</TableCell>
                      <TableCell align="right">Costo total</TableCell>
                    </TableRow>
                  </TableHead>
                  <TableBody>
                    {vencidosQ.data.map((r) => (
                      <TableRow key={r.lote_id} hover>
                        <TableCell>{r.numero_lote}</TableCell>
                        <TableCell>
                          <Chip
                            size="small"
                            color="error"
                            variant="outlined"
                            label={fmtFechaCalendario(r.fecha_vencimiento)}
                          />
                        </TableCell>
                        <TableCell>
                          <Stack>
                            <Typography variant="body2">{r.producto_descripcion}</Typography>
                            {r.producto_codigo && (
                              <Typography variant="caption" color="text.secondary">
                                {r.producto_codigo}
                              </Typography>
                            )}
                          </Stack>
                        </TableCell>
                        <TableCell>{r.marca}</TableCell>
                        <TableCell>{r.deposito || "—"}</TableCell>
                        <TableCell align="right">{formatNum(r.stock_actual)}</TableCell>
                        <TableCell align="right">{formatNum(r.costo_unitario)}</TableCell>
                        <TableCell align="right">{formatNum(r.costo_total)}</TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              </TableContainer>
            )}
          </CardContent>
        </Card>
      )}

      {proveedorId && tab === "marcas-compradas" && (
        <Card>
          <CardContent>
            <Stack
              direction={{ xs: "column", sm: "row" }}
              spacing={1}
              mb={2}
              alignItems={{ sm: "center" }}
              justifyContent="space-between"
            >
              <Typography variant="subtitle1">
                Ranking de marcas compradas en el rango. Útil para detectar marcas
                aún no vinculadas y completar el catálogo del proveedor.
              </Typography>
              {canExportar && (
                <Stack direction="row" spacing={1}>
                  <Button
                    variant="outlined"
                    color="error"
                    startIcon={<Icon icon="mdi:file-pdf-box" />}
                    onClick={() => handleExportTab("marcas-compradas", "pdf")}
                    disabled={!marcasCompradasQ.data?.length}
                  >
                    PDF
                  </Button>
                  <Button
                    variant="outlined"
                    startIcon={<Icon icon="mdi:microsoft-excel" />}
                    onClick={() => handleExportTab("marcas-compradas", "excel")}
                    disabled={!marcasCompradasQ.data?.length}
                  >
                    Excel
                  </Button>
                </Stack>
              )}
            </Stack>
            {marcasCompradasQ.isLoading ? (
              <Box display="flex" justifyContent="center" py={4}>
                <CircularProgress />
              </Box>
            ) : !marcasCompradasQ.data?.length ? (
              <EmptyState
                icon="mdi:cart-off"
                title="Sin compras en el rango"
                description="No se registraron compras a este proveedor en las fechas indicadas."
              />
            ) : (
              <TableContainer>
                <Table size="small">
                  <TableHead>
                    <TableRow>
                      <TableCell>Marca</TableCell>
                      <TableCell align="right">Compras</TableCell>
                      <TableCell align="right">Productos</TableCell>
                      <TableCell align="right">Unidades</TableCell>
                      <TableCell align="right">Monto total</TableCell>
                      <TableCell>Última compra</TableCell>
                      <TableCell>Vínculo</TableCell>
                    </TableRow>
                  </TableHead>
                  <TableBody>
                    {marcasCompradasQ.data.map((r) => (
                      <TableRow key={r.marca_id || "sin-marca"} hover>
                        <TableCell>{r.marca}</TableCell>
                        <TableCell align="right">{formatNum(r.cantidad_compras)}</TableCell>
                        <TableCell align="right">{formatNum(r.cantidad_productos)}</TableCell>
                        <TableCell align="right">{formatNum(r.unidades)}</TableCell>
                        <TableCell align="right">Gs. {formatNum(r.monto_total)}</TableCell>
                        <TableCell>{fmtFechaCalendario(r.ultima_compra)}</TableCell>
                        <TableCell>
                          {!r.marca_id ? (
                            <Chip size="small" label="Sin marca" />
                          ) : r.vinculado ? (
                            <Chip size="small" color="success" label="Vinculada" />
                          ) : (
                            <Tooltip title="Vincular esta marca al proveedor">
                              <Button
                                size="small"
                                variant="outlined"
                                startIcon={<Icon icon="mdi:link-variant-plus" />}
                                onClick={() =>
                                  vincularMut.mutate({
                                    proveedor_id: proveedorId,
                                    marca_id: r.marca_id,
                                    observacion: "Vinculado desde reporte de marcas compradas",
                                  })
                                }
                                disabled={vincularMut.isPending}
                              >
                                Vincular
                              </Button>
                            </Tooltip>
                          )}
                        </TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              </TableContainer>
            )}
          </CardContent>
        </Card>
      )}

      {proveedorId && tab === "ventas-por-marca" && (
        <Card>
          <CardContent>
            <Stack
              direction={{ xs: "column", sm: "row" }}
              spacing={2}
              mb={2}
              alignItems={{ sm: "center" }}
            >
              <TextField
                select
                size="small"
                label="Modo de atribución"
                value={modoVentas}
                onChange={(e) => setModoVentas(e.target.value)}
                sx={{ minWidth: 240 }}
              >
                <MenuItem value="vinculo">Por vínculo (aproximado)</MenuItem>
                <MenuItem value="lote" disabled={!tieneLotesEnVentas}>
                  Por lote (exacto){!tieneLotesEnVentas ? " — sin datos" : ""}
                </MenuItem>
              </TextField>
              {modoVentas === "vinculo" && (
                <FormControlLabel
                  control={
                    <Switch
                      checked={soloPreferente}
                      onChange={(e) => setSoloPreferente(e.target.checked)}
                    />
                  }
                  label="Sólo proveedor preferente"
                />
              )}
              <Chip
                size="small"
                color={modoVentas === "lote" ? "success" : "warning"}
                variant="outlined"
                icon={
                  <Icon
                    icon={modoVentas === "lote" ? "mdi:check-decagram" : "mdi:approximately-equal"}
                  />
                }
                label={
                  modoVentas === "lote"
                    ? "Exacto por lote"
                    : soloPreferente
                      ? "Aproximado (sólo preferente)"
                      : "Aproximado por vínculo"
                }
              />
              {canExportar && (
                <Stack direction="row" spacing={1} sx={{ ml: "auto" }}>
                  <Button
                    variant="outlined"
                    color="error"
                    startIcon={<Icon icon="mdi:file-pdf-box" />}
                    onClick={() => handleExportTab("ventas-por-marca", "pdf")}
                    disabled={!ventasPorMarcaQ.data?.rows?.length}
                  >
                    PDF
                  </Button>
                  <Button
                    variant="outlined"
                    startIcon={<Icon icon="mdi:microsoft-excel" />}
                    onClick={() => handleExportTab("ventas-por-marca", "excel")}
                    disabled={!ventasPorMarcaQ.data?.rows?.length}
                  >
                    Excel
                  </Button>
                </Stack>
              )}
            </Stack>

            {ventasPorMarcaQ.isLoading ? (
              <Box display="flex" justifyContent="center" py={4}>
                <CircularProgress />
              </Box>
            ) : !ventasPorMarcaQ.data?.rows?.length ? (
              <EmptyState
                icon="mdi:cart-remove"
                title="Sin ventas en el rango"
                description={
                  modoVentas === "lote"
                    ? "No se registraron ventas trazadas por lote al proveedor en estas fechas."
                    : "No se registraron ventas de las marcas vinculadas a este proveedor en estas fechas."
                }
              />
            ) : (
              <TableContainer>
                <Table size="small">
                  <TableHead>
                    <TableRow>
                      <TableCell>Marca</TableCell>
                      <TableCell>Código</TableCell>
                      <TableCell>Producto</TableCell>
                      <TableCell align="right">Facturas</TableCell>
                      <TableCell align="right">Unidades</TableCell>
                      <TableCell align="right">Monto vendido</TableCell>
                      <TableCell align="right">Costo</TableCell>
                      {modoVentas === "vinculo" && <TableCell>Rol</TableCell>}
                    </TableRow>
                  </TableHead>
                  <TableBody>
                    {ventasPorMarcaQ.data.rows.map((r, idx) => (
                      <TableRow key={`${r.marca_id || "sin-marca"}-${r.producto_id || idx}`} hover>
                        <TableCell>{r.marca}</TableCell>
                        <TableCell>{r.producto_codigo || "—"}</TableCell>
                        <TableCell>{r.producto_descripcion || "—"}</TableCell>
                        <TableCell align="right">{formatNum(r.cantidad_facturas)}</TableCell>
                        <TableCell align="right">{formatNum(r.unidades)}</TableCell>
                        <TableCell align="right">Gs. {formatNum(r.monto_vendido)}</TableCell>
                        <TableCell align="right">Gs. {formatNum(r.costo_total)}</TableCell>
                        {modoVentas === "vinculo" && (
                          <TableCell>
                            <Stack direction="row" spacing={0.5}>
                              {r.es_proveedor_preferente && (
                                <Chip size="small" color="primary" label="Preferente" />
                              )}
                              {r.es_distribuidor_oficial && (
                                <Chip size="small" color="info" label="Distribuidor" />
                              )}
                            </Stack>
                          </TableCell>
                        )}
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              </TableContainer>
            )}
          </CardContent>
        </Card>
      )}

      {proveedorId && tab === "proximos" && (
        <Card>
          <CardContent>
            {proximosQ.isLoading ? (
              <Box display="flex" justifyContent="center" py={4}>
                <CircularProgress />
              </Box>
            ) : !proximosQ.data ? null : (
              <>
                <Stack direction="row" spacing={1} mb={2} flexWrap="wrap">
                  <Chip
                    color="error"
                    label={`0-30 días: ${proximosQ.data.buckets["0-30"].length} lotes — Gs. ${formatNum(proximosQ.data.totales["0-30"])}`}
                  />
                  <Chip
                    color="warning"
                    label={`31-60 días: ${proximosQ.data.buckets["31-60"].length} lotes — Gs. ${formatNum(proximosQ.data.totales["31-60"])}`}
                  />
                  <Chip
                    color="info"
                    label={`61-90 días: ${proximosQ.data.buckets["61-90"].length} lotes — Gs. ${formatNum(proximosQ.data.totales["61-90"])}`}
                  />
                </Stack>
                <Divider sx={{ my: 2 }} />
                {["0-30", "31-60", "61-90"].map((bucket) => {
                  const rows = proximosQ.data.buckets[bucket];
                  if (!rows.length) return null;
                  return (
                    <Box key={bucket} mb={3}>
                      <Typography variant="subtitle2" gutterBottom>
                        Bucket {bucket} días
                      </Typography>
                      <TableContainer>
                        <Table size="small">
                          <TableHead>
                            <TableRow>
                              <TableCell>Lote</TableCell>
                              <TableCell>Vencimiento</TableCell>
                              <TableCell>Producto</TableCell>
                              <TableCell>Marca</TableCell>
                              <TableCell align="right">Stock</TableCell>
                              <TableCell align="right">Costo total</TableCell>
                            </TableRow>
                          </TableHead>
                          <TableBody>
                            {rows.map((r) => (
                              <TableRow key={r.lote_id} hover>
                                <TableCell>{r.numero_lote}</TableCell>
                                <TableCell>{fmtFechaCalendario(r.fecha_vencimiento)}</TableCell>
                                <TableCell>{r.producto_descripcion}</TableCell>
                                <TableCell>{r.marca}</TableCell>
                                <TableCell align="right">{formatNum(r.stock_actual)}</TableCell>
                                <TableCell align="right">{formatNum(r.costo_total)}</TableCell>
                              </TableRow>
                            ))}
                          </TableBody>
                        </Table>
                      </TableContainer>
                    </Box>
                  );
                })}
              </>
            )}
          </CardContent>
        </Card>
      )}

      <PdfPreviewModal
        open={pdfModal.open}
        onClose={() => setPdfModal((p) => ({ ...p, open: false }))}
        titulo={pdfModal.titulo}
        filename={pdfModal.filename}
        fetchBlob={pdfModal.fetch}
      />
    </Box>
  );
}

export default ReporteVencidosProveedorPage;