import { Icon } from "@iconify/react";
import {
  Autocomplete,
  Box,
  Button,
  Card,
  CardContent,
  Chip,
  FormControl,
  InputAdornment,
  InputLabel,
  MenuItem,
  Pagination,
  Paper,
  Select,
  Skeleton,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  TextField,
  Typography,
  useMediaQuery,
  useTheme,
} from "@mui/material";
import { useQuery } from "@tanstack/react-query";
import { useEffect, useMemo, useState } from "react";
import { useNavigate } from "react-router-dom";
import { toast } from "sonner";
import * as XLSX from "xlsx";
import {
  getCompras,
  getComprasDashboard,
  searchProveedoresCompra,
} from "../api/compras.service";
import { getDepositos } from "../api/depositos.service";
import { buscarProductos } from "../api/productos.service";
import { getSucursales } from "../api/sucursales.service";
import { AccesoRestringido } from "../components/common/AccesoRestringido";
import { usePermission } from "../hooks/usePermission";
import { sanitizeRecords } from "../components/_standards";
import { hoyISO } from "../utils/fecha";

const getHoy = () => hoyISO();
const getInicioMes = () => {
  const d = new Date();
  d.setDate(1);
  return d.toISOString().split("T")[0];
};

const parseDate = (value) => {
  if (!value) return null;
  if (value instanceof Date) return Number.isNaN(value.getTime()) ? null : value;
  if (typeof value === "string" || typeof value === "number") {
    const d = new Date(value);
    return Number.isNaN(d.getTime()) ? null : d;
  }
  if (typeof value === "object") {
    if (value.$date) return parseDate(value.$date);
    if (typeof value.toDate === "function") return parseDate(value.toDate());
    if (typeof value.toISOString === "function") return parseDate(value.toISOString());
    if (typeof value.seconds === "number") return new Date(value.seconds * 1000);
  }
  return null;
};

const formatDateTime = (value) => {
  const d = parseDate(value);
  if (!d) return "-";
  return `${String(d.getDate()).padStart(2, "0")}/${String(d.getMonth() + 1).padStart(2, "0")}/${d.getFullYear()} ${String(d.getHours()).padStart(2, "0")}:${String(d.getMinutes()).padStart(2, "0")}`;
};

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

const buildPreviousRange = (from, to) => {
  if (!from || !to) return {};
  const start = new Date(`${from}T00:00:00`);
  const end = new Date(`${to}T00:00:00`);
  if (Number.isNaN(start.getTime()) || Number.isNaN(end.getTime()) || end < start) return {};

  const days = Math.max(1, Math.round((end.getTime() - start.getTime()) / 86400000) + 1);
  const prevEnd = new Date(start);
  prevEnd.setDate(prevEnd.getDate() - 1);
  const prevStart = new Date(prevEnd);
  prevStart.setDate(prevStart.getDate() - (days - 1));

  return {
    fecha_desde_anterior: prevStart.toISOString().split("T")[0],
    fecha_hasta_anterior: prevEnd.toISOString().split("T")[0],
  };
};

const estadoColor = (estado) => {
  const v = String(estado || "").toLowerCase();
  if (v === "anulada") return "error";
  if (v === "pagada" || v === "aplicada") return "success";
  if (v === "parcial") return "info";
  return "warning";
};

const toEstadoLabel = (compra) => {
  if (compra?.anulado) return "Anulada";
  const estado = String(compra?.estado || "pendiente");
  return estado.charAt(0).toUpperCase() + estado.slice(1);
};

const getProveedorNombre = (c) =>
  c?.proveedores?.personas?.razon_social || c?.proveedores?.razon_social || "Sin proveedor";

const getProveedorRuc = (c) => {
  const ruc = c?.proveedores?.personas?.ruc || "";
  const dv = c?.proveedores?.personas?.dv || "";
  if (!ruc) return "-";
  return dv ? `${ruc}-${dv}` : ruc;
};

const getProveedorOptionLabel = (proveedor) => {
  if (!proveedor) return "";
  const razon =
    proveedor?.personas?.razon_social ||
    proveedor?.razon_social ||
    proveedor?.nombre_fantasia ||
    "Sin proveedor";
  const ruc = proveedor?.personas?.ruc || proveedor?.ruc || "";
  const dv = proveedor?.personas?.dv || proveedor?.dv || "";
  const doc = ruc ? `${ruc}${dv ? `-${dv}` : ""}` : "";
  return doc ? `${razon} (${doc})` : razon;
};

const getProductoOptionLabel = (producto) => {
  if (!producto) return "";
  const desc = producto?.descripcion || producto?.nombre || "Sin descripción";
  const cod = producto?.cod_producto || producto?.codigo || "";
  return cod ? `${desc} (${cod})` : desc;
};

const exportExcel = (rows) => {
  const data = rows.map((c) => ({
    Fecha: formatDateTime(c.fecha_emision || c.created_at),
    Número: c.numero_factura || "-",
    Proveedor: getProveedorNombre(c),
    RUC: getProveedorRuc(c),
    Sucursal: c?.empresas_sucursales?.descripcion || "-",
    Condición: c?.condicion_operacion?.descripcion || "-",
    Moneda: c?.moneda?.codigo || "PYG",
    Total: Number(c.total || 0),
    IVA: Number(c.total_iva || 0),
    Estado: toEstadoLabel(c),
  }));

  const wb = XLSX.utils.book_new();
  const ws = XLSX.utils.json_to_sheet(sanitizeRecords(data));
  XLSX.utils.book_append_sheet(wb, ws, "Resumen Compras");
  XLSX.writeFile(wb, `resumen_compras_${getHoy()}.xlsx`);
};

export function ReporteCompras() {
  const navigate = useNavigate();
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down("md"));
  const { canRead: canReadReportes } = usePermission("REPORTES");
  const { canRead: canReadCompras } = usePermission("COMPRAS");

  const [search, setSearch] = useState("");
  const [searchDebounced, setSearchDebounced] = useState("");
  const [fechaDesde, setFechaDesde] = useState(getInicioMes());
  const [fechaHasta, setFechaHasta] = useState(getHoy());
  const [estado, setEstado] = useState("");
  const [sucursalId, setSucursalId] = useState("");
  const [depositoId, setDepositoId] = useState("");
  const [proveedorId, setProveedorId] = useState("");
  const [proveedorSeleccionado, setProveedorSeleccionado] = useState(null);
  const [proveedorInput, setProveedorInput] = useState("");
  const [proveedorSearch, setProveedorSearch] = useState("");
  const [productoId, setProductoId] = useState("");
  const [productoSeleccionado, setProductoSeleccionado] = useState(null);
  const [productoInput, setProductoInput] = useState("");
  const [productoSearch, setProductoSearch] = useState("");
  const [page, setPage] = useState(1);
  const limit = 20;

  useEffect(() => {
    const timer = setTimeout(() => setSearchDebounced(search), 350);
    return () => clearTimeout(timer);
  }, [search]);

  useEffect(() => {
    const timer = setTimeout(
      () => setProveedorSearch(proveedorInput.trim()),
      300,
    );
    return () => clearTimeout(timer);
  }, [proveedorInput]);

  useEffect(() => {
    const timer = setTimeout(() => setProductoSearch(productoInput.trim()), 300);
    return () => clearTimeout(timer);
  }, [productoInput]);

  const { data: sucursalesData } = useQuery({
    queryKey: ["reporte-compras-sucursales"],
    queryFn: () => getSucursales(1, 200),
    staleTime: 5 * 60 * 1000,
  });

  const { data: depositosData } = useQuery({
    queryKey: ["reporte-compras-depositos", sucursalId],
    queryFn: () => getDepositos(sucursalId || undefined),
    staleTime: 5 * 60 * 1000,
  });

  const { data: proveedoresBusquedaData } = useQuery({
    queryKey: ["reporte-compras-proveedores", proveedorSearch],
    queryFn: () => searchProveedoresCompra(proveedorSearch, 20),
    staleTime: 60 * 1000,
  });

  const { data: productosBusquedaData } = useQuery({
    queryKey: ["reporte-compras-productos", productoSearch, depositoId],
    queryFn: () =>
      buscarProductos(productoSearch, 20, depositoId || undefined, null, true),
    enabled: productoSearch.length >= 2,
    staleTime: 60 * 1000,
  });

  const sucursales = useMemo(
    () => sucursalesData?.data || sucursalesData || [],
    [sucursalesData],
  );
  const depositos = useMemo(
    () => depositosData?.data || depositosData || [],
    [depositosData],
  );
  const proveedoresOptionsRaw = useMemo(
    () => proveedoresBusquedaData?.items || proveedoresBusquedaData?.data || proveedoresBusquedaData || [],
    [proveedoresBusquedaData],
  );
  const productosOptionsRaw = useMemo(
    () => productosBusquedaData || [],
    [productosBusquedaData],
  );

  const proveedoresOptions = useMemo(() => {
    if (!proveedorSeleccionado) return proveedoresOptionsRaw;
    const exists = proveedoresOptionsRaw.some(
      (item) => item?.id === proveedorSeleccionado?.id,
    );
    return exists
      ? proveedoresOptionsRaw
      : [proveedorSeleccionado, ...proveedoresOptionsRaw];
  }, [proveedorSeleccionado, proveedoresOptionsRaw]);

  const productosOptions = useMemo(() => {
    if (!productoSeleccionado) return productosOptionsRaw;
    const exists = productosOptionsRaw.some(
      (item) => item?.id === productoSeleccionado?.id,
    );
    return exists
      ? productosOptionsRaw
      : [productoSeleccionado, ...productosOptionsRaw];
  }, [productoSeleccionado, productosOptionsRaw]);

  useEffect(() => {
    if (!depositoId) return;
    if (!Array.isArray(depositos) || depositos.length === 0) {
      setDepositoId("");
      return;
    }
    const stillExists = depositos.some((d) => d?.id === depositoId);
    if (!stillExists) {
      setDepositoId("");
    }
  }, [sucursalId, depositos, depositoId]);

  const rangeAnterior = useMemo(
    () => buildPreviousRange(fechaDesde, fechaHasta),
    [fechaDesde, fechaHasta],
  );

  const params = useMemo(
    () => ({
      page,
      limit,
      fecha_desde: fechaDesde || undefined,
      fecha_hasta: fechaHasta || undefined,
      estado: estado || undefined,
      search: searchDebounced || undefined,
      proveedor_id: proveedorId || undefined,
      sucursal_id: sucursalId || undefined,
      deposito_id: depositoId || undefined,
      producto_id: productoId || undefined,
    }),
    [
      page,
      limit,
      fechaDesde,
      fechaHasta,
      estado,
      searchDebounced,
      proveedorId,
      sucursalId,
      depositoId,
      productoId,
    ],
  );

  const { data: comprasData, isLoading } = useQuery({
    queryKey: ["reporte-compras-list", params],
    queryFn: () => getCompras(params),
  });

  const { data: dashboardData, isLoading: loadingDashboard } = useQuery({
    queryKey: [
      "reporte-compras-dashboard",
      fechaDesde,
      fechaHasta,
      rangeAnterior,
      proveedorId,
      sucursalId,
      depositoId,
      productoId,
    ],
    queryFn: () =>
      getComprasDashboard({
        fecha_desde: fechaDesde || undefined,
        fecha_hasta: fechaHasta || undefined,
        proveedor_id: proveedorId || undefined,
        sucursal_id: sucursalId || undefined,
        deposito_id: depositoId || undefined,
        producto_id: productoId || undefined,
        ...rangeAnterior,
      }),
  });

  const compras = useMemo(() => comprasData?.items || [], [comprasData]);
  const totalItems = Number(comprasData?.total || 0);
  const totalPages = Number(comprasData?.lastPage || 1);

  const totalCompras = Number(dashboardData?.total_compras || 0);
  const cantidadCompras = Number(dashboardData?.cantidad_compras || 0);
  const variacion = Number(dashboardData?.variacion_pct || 0);
  const ticketPromedio = cantidadCompras > 0 ? totalCompras / cantidadCompras : 0;
  const totalNcCompras = Number(dashboardData?.total_nc_compras || 0);
  const cantidadNcCompras = Number(dashboardData?.cantidad_nc_compras || 0);
  const totalNetoCompras = Number(dashboardData?.total_neto ?? totalCompras - totalNcCompras);

  const ivaPagina = useMemo(
    () => compras.reduce((acc, c) => acc + Number(c.total_iva || 0), 0),
    [compras],
  );

  const handleExport = async () => {
    try {
      const data = await getCompras({
        page: 1,
        limit: 10000,
        fecha_desde: fechaDesde || undefined,
        fecha_hasta: fechaHasta || undefined,
        estado: estado || undefined,
        search: searchDebounced || undefined,
        proveedor_id: proveedorId || undefined,
        sucursal_id: sucursalId || undefined,
        deposito_id: depositoId || undefined,
        producto_id: productoId || undefined,
      });
      exportExcel(data?.items || []);
      toast.success("Reporte exportado correctamente");
    } catch (error) {
      console.error(error);
      toast.error("No se pudo exportar el reporte");
    }
  };

  if (!canReadReportes || !canReadCompras) {
    return <AccesoRestringido mensaje="No tienes permisos para ver Resumen de Compras." />;
  }

  return (
    <Box sx={{ maxWidth: 1400, mx: "auto", p: { xs: 2, md: 3 } }}>
      <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}>
                Resumen de Compras
              </Typography>
            </Box>
            <Typography variant="caption" color="text.secondary">
              Reporte de compras por período con estado, proveedor y montos
            </Typography>
          </Box>
        </Box>

        <Button
          variant="outlined"
          size="small"
          startIcon={<Icon icon="lucide:download" width={16} />}
          onClick={handleExport}
        >
          Exportar
        </Button>
      </Box>

      <Typography variant="caption" color="text.secondary" sx={{ mb: 2, display: "block" }}>
        <span style={{ cursor: "pointer" }} onClick={() => navigate("/reportes")}>
          Reportes
        </span>
        {" > "}Resumen de Compras
      </Typography>

      <Paper variant="outlined" sx={{ p: 2, mb: 2, borderRadius: 2 }}>
        <Box sx={{ display: "flex", gap: 1.5, flexWrap: "wrap", alignItems: "center" }}>
          <TextField
            size="small"
            placeholder="Buscar por nro. factura o proveedor..."
            value={search}
            onChange={(e) => {
              setSearch(e.target.value);
              setPage(1);
            }}
            sx={{ minWidth: 260, flex: { xs: "1 1 100%", sm: "0 1 auto" } }}
            InputProps={{
              startAdornment: (
                <InputAdornment position="start">
                  <Icon icon="lucide:search" width={16} />
                </InputAdornment>
              ),
            }}
          />
          <Autocomplete
            size="small"
            sx={{ minWidth: 260 }}
            options={proveedoresOptions}
            value={proveedorSeleccionado}
            getOptionLabel={getProveedorOptionLabel}
            isOptionEqualToValue={(option, value) => option?.id === value?.id}
            onInputChange={(_, value) => {
              setProveedorInput(value);
            }}
            onChange={(_, value) => {
              setProveedorSeleccionado(value || null);
              setProveedorId(value?.id || "");
              setPage(1);
            }}
            noOptionsText={
              proveedorSearch.length < 2
                ? "Escribí al menos 2 caracteres"
                : "Sin resultados"
            }
            renderInput={(params) => <TextField {...params} label="Proveedor" />}
          />

          <Autocomplete
            size="small"
            sx={{ minWidth: 250 }}
            options={productosOptions}
            value={productoSeleccionado}
            getOptionLabel={getProductoOptionLabel}
            isOptionEqualToValue={(option, value) => option?.id === value?.id}
            onInputChange={(_, value) => {
              setProductoInput(value);
            }}
            onChange={(_, value) => {
              setProductoSeleccionado(value || null);
              setProductoId(value?.id || "");
              setPage(1);
            }}
            noOptionsText={
              productoSearch.length < 2
                ? "Escribí al menos 2 caracteres"
                : "Sin resultados"
            }
            renderInput={(params) => <TextField {...params} label="Producto" />}
          />

          <FormControl size="small" sx={{ minWidth: 170 }}>
            <InputLabel>Sucursal</InputLabel>
            <Select
              value={sucursalId}
              label="Sucursal"
              onChange={(e) => {
                setSucursalId(e.target.value);
                setDepositoId("");
                setPage(1);
              }}
            >
              <MenuItem value="">Todas</MenuItem>
              {sucursales.map((sucursal) => (
                <MenuItem key={sucursal.id} value={sucursal.id}>
                  {sucursal.descripcion || sucursal.nombre || "-"}
                </MenuItem>
              ))}
            </Select>
          </FormControl>

          <FormControl size="small" sx={{ minWidth: 170 }}>
            <InputLabel>Depósito</InputLabel>
            <Select
              value={depositoId}
              label="Depósito"
              onChange={(e) => {
                setDepositoId(e.target.value);
                setPage(1);
              }}
            >
              <MenuItem value="">Todos</MenuItem>
              {depositos.map((deposito) => (
                <MenuItem key={deposito.id} value={deposito.id}>
                  {deposito.descripcion}
                </MenuItem>
              ))}
            </Select>
          </FormControl>

          <FormControl size="small" sx={{ minWidth: 140 }}>
            <InputLabel>Estado</InputLabel>
            <Select
              value={estado}
              label="Estado"
              onChange={(e) => {
                setEstado(e.target.value);
                setPage(1);
              }}
            >
              <MenuItem value="">Todos</MenuItem>
              <MenuItem value="pendiente">Pendiente</MenuItem>
              <MenuItem value="pagada">Pagada</MenuItem>
              <MenuItem value="parcial">Parcial</MenuItem>
              <MenuItem value="anulada">Anulada</MenuItem>
            </Select>
          </FormControl>
          <TextField
            size="small"
            type="date"
            label="Desde"
            value={fechaDesde}
            onChange={(e) => {
              setFechaDesde(e.target.value);
              setPage(1);
            }}
            InputLabelProps={{ shrink: true }}
            sx={{ minWidth: 145 }}
          />
          <TextField
            size="small"
            type="date"
            label="Hasta"
            value={fechaHasta}
            onChange={(e) => {
              setFechaHasta(e.target.value);
              setPage(1);
            }}
            InputLabelProps={{ shrink: true }}
            sx={{ minWidth: 145 }}
          />
          <Button
            size="small"
            variant="outlined"
            startIcon={<Icon icon="lucide:rotate-ccw" width={15} />}
            onClick={() => {
              setSearch("");
              setSearchDebounced("");
              setEstado("");
              setFechaDesde(getInicioMes());
              setFechaHasta(getHoy());
              setSucursalId("");
              setDepositoId("");
              setProveedorId("");
              setProveedorSeleccionado(null);
              setProveedorInput("");
              setProveedorSearch("");
              setProductoId("");
              setProductoSeleccionado(null);
              setProductoInput("");
              setProductoSearch("");
              setPage(1);
            }}
          >
            Limpiar
          </Button>
        </Box>
      </Paper>

      <Box
        sx={{
          display: "grid",
          gridTemplateColumns: { xs: "repeat(2, 1fr)", sm: "repeat(3, 1fr)", lg: "repeat(6, 1fr)" },
          gap: 2,
          mb: 2,
        }}
      >
        <Card variant="outlined" sx={{ borderRadius: 2 }}>
          <CardContent sx={{ p: "14px !important" }}>
            <Typography variant="caption" color="text.secondary">Total Compras</Typography>
            <Typography variant="h6" fontWeight={700} color="warning.main">
              {loadingDashboard ? <Skeleton width={90} /> : formatMoney(totalCompras)}
            </Typography>
            <Typography variant="caption" color="text.secondary" sx={{ display: "block" }}>
              solo facturas
            </Typography>
          </CardContent>
        </Card>

        <Card variant="outlined" sx={{ borderRadius: 2 }}>
          <CardContent sx={{ p: "14px !important" }}>
            <Typography variant="caption" color="text.secondary">(−) NC de compra</Typography>
            <Typography variant="h6" fontWeight={700} color="error.main">
              {loadingDashboard ? <Skeleton width={90} /> : formatMoney(totalNcCompras)}
            </Typography>
            <Typography variant="caption" color="text.secondary" sx={{ display: "block" }}>
              {cantidadNcCompras} {cantidadNcCompras === 1 ? "nota" : "notas"}
            </Typography>
          </CardContent>
        </Card>

        <Card variant="outlined" sx={{ borderRadius: 2 }}>
          <CardContent sx={{ p: "14px !important" }}>
            <Typography variant="caption" color="text.secondary">Neto (compras − NC)</Typography>
            <Typography variant="h6" fontWeight={700} color="success.main">
              {loadingDashboard ? <Skeleton width={90} /> : formatMoney(totalNetoCompras)}
            </Typography>
            <Typography variant="caption" color="text.secondary" sx={{ display: "block" }}>
              gasto efectivo
            </Typography>
          </CardContent>
        </Card>

        <Card variant="outlined" sx={{ borderRadius: 2 }}>
          <CardContent sx={{ p: "14px !important" }}>
            <Typography variant="caption" color="text.secondary">Compras Registradas</Typography>
            <Typography variant="h6" fontWeight={700} color="primary.main">
              {loadingDashboard ? <Skeleton width={55} /> : cantidadCompras}
            </Typography>
          </CardContent>
        </Card>

        <Card variant="outlined" sx={{ borderRadius: 2 }}>
          <CardContent sx={{ p: "14px !important" }}>
            <Typography variant="caption" color="text.secondary">IVA (página actual)</Typography>
            <Typography variant="h6" fontWeight={700} color="info.main">
              {isLoading ? <Skeleton width={90} /> : formatMoney(ivaPagina)}
            </Typography>
          </CardContent>
        </Card>

        <Card variant="outlined" sx={{ borderRadius: 2 }}>
          <CardContent sx={{ p: "14px !important" }}>
            <Typography variant="caption" color="text.secondary">Ticket Promedio</Typography>
            <Typography variant="h6" fontWeight={700} color="success.main">
              {loadingDashboard ? <Skeleton width={90} /> : formatMoney(ticketPromedio)}
            </Typography>
            {!loadingDashboard && (
              <Typography variant="caption" color={variacion >= 0 ? "success.main" : "error.main"}>
                Variación: {variacion >= 0 ? "+" : ""}
                {variacion.toFixed(2)}%
              </Typography>
            )}
          </CardContent>
        </Card>
      </Box>

      {isLoading ? (
        <Box sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
          {[...Array(8)].map((_, i) => (
            <Skeleton key={i} variant="rounded" height={44} />
          ))}
        </Box>
      ) : compras.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 para el período seleccionado
          </Typography>
        </Paper>
      ) : isMobile ? (
        <Box sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
          {compras.map((c) => (
            <Card key={c.id} 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}>
                    {c.numero_factura || "-"}
                  </Typography>
                  <Chip
                    label={toEstadoLabel(c)}
                    color={estadoColor(toEstadoLabel(c))}
                    size="small"
                    sx={{ fontSize: "0.68rem", height: 20 }}
                  />
                </Box>
                <Typography variant="caption" color="text.secondary">
                  {getProveedorNombre(c)}
                </Typography>
                <Box sx={{ display: "flex", justifyContent: "space-between", mt: 1 }}>
                  <Typography variant="caption" color="text.secondary">
                    {formatDateTime(c.fecha_emision || c.created_at)}
                  </Typography>
                  <Typography variant="body2" fontWeight={700} color="warning.main">
                    {formatMoney(c.total, c?.moneda?.codigo)}
                  </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 }}>Proveedor</TableCell>
                <TableCell sx={{ fontWeight: 600 }}>RUC</TableCell>
                <TableCell sx={{ fontWeight: 600 }}>Sucursal</TableCell>
                <TableCell sx={{ fontWeight: 600 }}>Condición</TableCell>
                <TableCell sx={{ fontWeight: 600 }}>Moneda</TableCell>
                <TableCell sx={{ fontWeight: 600 }} align="right">Monto</TableCell>
                <TableCell sx={{ fontWeight: 600 }} align="right">IVA</TableCell>
                <TableCell sx={{ fontWeight: 600 }}>Estado</TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {compras.map((c) => {
                const estadoLabel = toEstadoLabel(c);
                return (
                  <TableRow key={c.id} hover sx={{ "&:last-child td": { borderBottom: 0 } }}>
                    <TableCell sx={{ whiteSpace: "nowrap" }}>
                      {formatDateTime(c.fecha_emision || c.created_at)}
                    </TableCell>
                    <TableCell>
                      <Typography variant="body2" fontWeight={600}>
                        {c.numero_factura || "-"}
                      </Typography>
                    </TableCell>
                    <TableCell>{getProveedorNombre(c)}</TableCell>
                    <TableCell>
                      <Typography variant="caption" color="text.secondary">
                        {getProveedorRuc(c)}
                      </Typography>
                    </TableCell>
                    <TableCell>
                      <Typography variant="body2">
                        {c?.empresas_sucursales?.descripcion || "-"}
                      </Typography>
                    </TableCell>
                    <TableCell>
                      <Chip
                        label={c?.condicion_operacion?.descripcion || "-"}
                        size="small"
                        variant="outlined"
                      />
                    </TableCell>
                    <TableCell>
                      <Chip
                        label={c?.moneda?.codigo || "PYG"}
                        size="small"
                        variant="outlined"
                        sx={{ fontSize: "0.72rem" }}
                      />
                    </TableCell>
                    <TableCell align="right">
                      <Typography variant="body2" fontWeight={700} color="warning.main">
                        {formatMoney(c.total, c?.moneda?.codigo)}
                      </Typography>
                    </TableCell>
                    <TableCell align="right">
                      <Typography variant="body2" color="text.secondary">
                        {formatMoney(c.total_iva, c?.moneda?.codigo)}
                      </Typography>
                    </TableCell>
                    <TableCell>
                      <Chip label={estadoLabel} size="small" color={estadoColor(estadoLabel)} />
                    </TableCell>
                  </TableRow>
                );
              })}
            </TableBody>
          </Table>
        </TableContainer>
      )}

      {totalItems > 0 && (
        <Box
          sx={{
            display: "flex",
            justifyContent: "space-between",
            alignItems: "center",
            mt: 2,
            flexWrap: "wrap",
            gap: 1,
          }}
        >
          <Typography variant="caption" color="text.secondary">
            Mostrando {(page - 1) * limit + 1}-{Math.min(page * limit, totalItems)} de {totalItems}
          </Typography>
          <Pagination
            count={totalPages}
            page={page}
            onChange={(_, p) => setPage(p)}
            size="small"
            color="primary"
          />
        </Box>
      )}
    </Box>
  );
}

export default ReporteCompras;