import { Icon } from "@iconify/react/dist/iconify.js";
import {
  Autocomplete,
  Badge,
  Box,
  Button,
  Chip,
  CircularProgress,
  Collapse,
  Dialog,
  DialogTitle,
  Divider,
  FormControl,
  IconButton,
  InputAdornment,
  InputLabel,
  MenuItem,
  Paper,
  Select,
  Skeleton,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  TextField,
  Tooltip,
  Typography,
  useMediaQuery,
  useTheme,
} from "@mui/material";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { useMemo, useState } from "react";
import { useNavigate } from "react-router-dom";
import { toast } from "sonner";
import {
  aprobarOrdenVenta,
  cancelarOrdenVenta,
  confirmarOrdenVenta,
  getOrdenesVenta,
  getOrdenesVentaStats,
  getOrdenVentaPdf,
} from "../../api/ordenes.service";
import { getVendedoresActivos } from "../../api/vendedores-cobradores.service";
import { usePermission } from "../../hooks/usePermission";
import { AccesoRestringido } from "../common/AccesoRestringido";
import { formatMoney } from "../../utils/formatMoney";
import { OrdenVentaDetalleDialog } from "./OrdenVentaDetalleDialog";
import { TablePaginationBar } from "../_standards";

// ─── Constantes ───────────────────────────────────────────────────────────────

const listaVendedores = (r) => r?.items ?? r?.data ?? (Array.isArray(r) ? r : []);
const nombreVendedor = (v) =>
  (v?.nombre ? `${v.nombre} ${v.apellido ?? ""}`.trim() : "") || v?.personas?.razon_social || v?.username || "—";

const ESTADOS = [
  {
    value: "borrador",
    label: "Borrador",
    color: "default",
    icon: "mdi:file-edit-outline",
    desc: "Orden creada. Se puede editar libremente antes de confirmar.",
  },
  {
    value: "confirmada",
    label: "Confirmada",
    color: "primary",
    icon: "mdi:check-circle-outline",
    desc: "Orden confirmada y con número asignado. Esperando aprobación del supervisor (si aplica).",
  },
  {
    value: "aprobada",
    label: "Aprobada",
    color: "info",
    icon: "mdi:thumb-up-outline",
    desc: "Aprobada por un supervisor. Lista para pasar a proceso de entrega o facturación.",
  },
  {
    value: "en_proceso",
    label: "En proceso",
    color: "warning",
    icon: "mdi:progress-clock",
    desc: "Orden en ejecución activa. Se está preparando o entregando al cliente.",
  },
  {
    value: "facturada_parcial",
    label: "Fact. parcial",
    color: "secondary",
    icon: "mdi:receipt-text-clock-outline",
    desc: "Se emitió al menos una factura parcial. Quedan ítems o montos pendientes de facturar.",
  },
  {
    value: "facturada",
    label: "Facturada",
    color: "success",
    icon: "mdi:receipt-text-check-outline",
    desc: "Completamente facturada. Estado final exitoso.",
  },
  {
    value: "cancelada",
    label: "Cancelada",
    color: "error",
    icon: "mdi:close-circle-outline",
    desc: "Orden cancelada. No se puede retomar ni facturar.",
  },
  {
    value: "vencida",
    label: "Vencida",
    color: "error",
    icon: "mdi:calendar-remove-outline",
    desc: "La orden superó su fecha de vencimiento sin ser facturada. Stock liberado automáticamente.",
  },
];

const ESTADO_MAP = Object.fromEntries(ESTADOS.map((e) => [e.value, e]));

const FECHAS_RAPIDAS = [
  { label: "Hoy", key: "hoy" },
  { label: "Ayer", key: "ayer" },
  { label: "Esta semana", key: "semana" },
  { label: "Este mes", key: "mes" },
];

// ─── Helpers ──────────────────────────────────────────────────────────────────

function getFechaRange(key) {
  const hoy = new Date();
  const pad = (d) => d.toISOString().split("T")[0];
  if (key === "hoy") return { fecha_desde: pad(hoy), fecha_hasta: pad(hoy) };
  if (key === "ayer") {
    const ayer = new Date(hoy);
    ayer.setDate(ayer.getDate() - 1);
    return { fecha_desde: pad(ayer), fecha_hasta: pad(ayer) };
  }
  if (key === "semana") {
    const lunes = new Date(hoy);
    lunes.setDate(hoy.getDate() - hoy.getDay() + 1);
    return { fecha_desde: pad(lunes), fecha_hasta: pad(hoy) };
  }
  if (key === "mes") {
    const inicio = new Date(hoy.getFullYear(), hoy.getMonth(), 1);
    return { fecha_desde: pad(inicio), fecha_hasta: pad(hoy) };
  }
  return {};
}

function getNombreCliente(orden) {
  return orden.cliente?.personas?.razon_social || orden.cliente?.nombre_fantasia || "—";
}

function getOrigenOrdenLabel(orden) {
  const tipo = String(orden?.origen_tipo || "").toLowerCase();
  if (tipo === "presupuesto" || orden?.presupuesto_id) return "Presupuesto";
  if (tipo === "solicitud_credito") return "Solicitud de crédito";
  if (tipo === "importacion") return "Importación";
  if (tipo === "otro") return "Otro";
  return "Manual";
}

function formatFecha(str, withTime = false) {
  if (!str) return "—";
  const d = new Date(str);
  const fecha = d.toLocaleDateString("es-PY");
  if (!withTime) return fecha;
  const hora = d.toLocaleTimeString("es-PY", { hour: "2-digit", minute: "2-digit", second: "2-digit" });
  return { fecha, hora };
}

// ─── KPI Card ─────────────────────────────────────────────────────────────────

function KpiCard({ label, value, icon, color = "text.primary", active, onClick, loading }) {
  return (
    <Paper
      variant="outlined"
      onClick={onClick}
      sx={{
        p: 1.5,
        minWidth: 100,
        flex: "1 1 100px",
        cursor: onClick ? "pointer" : "default",
        borderColor: active ? "primary.main" : undefined,
        bgcolor: active ? "primary.main" : undefined,
        transition: "all 0.15s",
        "&:hover": onClick ? { borderColor: "primary.main", opacity: 0.9 } : {},
      }}
    >
      {loading ? (
        <>
          <Skeleton width={60} height={14} />
          <Skeleton width={40} height={28} />
        </>
      ) : (
        <>
          <Typography
            variant="caption"
            color={active ? "primary.contrastText" : "text.secondary"}
            sx={{ display: "flex", alignItems: "center", gap: 0.5 }}
          >
            {icon && <Icon icon={icon} width={13} />}
            {label}
          </Typography>
          <Typography
            variant="h6"
            fontWeight={700}
            color={active ? "primary.contrastText" : color}
            lineHeight={1.2}
          >
            {value}
          </Typography>
        </>
      )}
    </Paper>
  );
}

// ─── Dialog confirmación cancelar ────────────────────────────────────────────

function ConfirmarCancelarDialog({ orden, onClose, onConfirm, loading }) {
  const theme = useTheme();
  if (!orden) return null;
  return (
    <Dialog open={!!orden} onClose={onClose} maxWidth="xs" fullWidth>
      <DialogTitle sx={{ display: "flex", alignItems: "center", gap: 1, pb: 1 }}>
        <Icon icon="mdi:alert-circle" width={22} color={theme.palette.error.main} />
        Cancelar orden de venta
      </DialogTitle>
      <Box sx={{ px: 3, pb: 1 }}>
        <Typography variant="body2" color="text.secondary">
          ¿Confirmás la cancelación de la orden{" "}
          <Box component="span" fontWeight={700} fontFamily="monospace">
            {orden.numero_pedido ?? "Sin número"}
          </Box>
          ?
        </Typography>
        <Typography variant="body2" color="text.secondary" sx={{ mt: 0.75 }}>
          El stock reservado será liberado automáticamente.
        </Typography>
      </Box>
      <Box sx={{ display: "flex", gap: 1, justifyContent: "flex-end", px: 3, pb: 2.5, pt: 1.5 }}>
        <Button variant="outlined" onClick={onClose} disabled={loading}>Volver</Button>
        <Button
          variant="contained" color="error" onClick={onConfirm} disabled={loading}
          startIcon={loading ? <CircularProgress size={14} color="inherit" /> : <Icon icon="mdi:close-circle" width={16} />}
        >
          Confirmar cancelación
        </Button>
      </Box>
    </Dialog>
  );
}

// ─── Acciones de una orden (reutilizable en tabla y card) ─────────────────────

function OrdenAcciones({ orden, navigate, confirmarMut, aprobarMut, onVerDetalle, onVerPdf, pdfLoadingId, onCancelar }) {
  return (
    <Box sx={{ display: "flex", gap: 0.5, alignItems: "center" }}>
      <Tooltip title="Ver detalle">
        <IconButton size="small" onClick={() => onVerDetalle(orden.id)}>
          <Icon icon="mdi:eye" width={17} />
        </IconButton>
      </Tooltip>
      <Tooltip title="Ver PDF">
        <IconButton size="small" color="info" onClick={() => onVerPdf(orden)} disabled={pdfLoadingId === orden.id}>
          {pdfLoadingId === orden.id
            ? <CircularProgress size={15} color="info" />
            : <Icon icon="mdi:file-pdf-box" width={17} />}
        </IconButton>
      </Tooltip>

      {orden.estado_orden === "borrador" && (
        <>
          <Tooltip title="Editar orden">
            <IconButton size="small" onClick={() => navigate(`/ordenes-venta/${orden.id}/editar`)}>
              <Icon icon="mdi:pencil" width={17} />
            </IconButton>
          </Tooltip>
          <Tooltip title="Confirmar — asigna número y pasa a revisión">
            <IconButton
              size="small"
              color="primary"
              onClick={() => confirmarMut.mutate(orden.id)}
              disabled={confirmarMut.isPending}
            >
              <Icon icon="mdi:check-circle" width={17} />
            </IconButton>
          </Tooltip>
        </>
      )}

      {orden.estado_orden === "confirmada" && (
        <Tooltip title="Aprobar — autoriza el inicio del proceso">
          <IconButton
            size="small"
            color="success"
            onClick={() => aprobarMut.mutate(orden.id)}
            disabled={aprobarMut.isPending}
          >
            <Icon icon="mdi:thumb-up" width={17} />
          </IconButton>
        </Tooltip>
      )}

      {["borrador", "confirmada", "aprobada", "en_proceso"].includes(orden.estado_orden) && (
        <Tooltip title="Cancelar orden">
          <IconButton size="small" color="error" onClick={() => onCancelar(orden)}>
            <Icon icon="mdi:close-circle" width={17} />
          </IconButton>
        </Tooltip>
      )}
    </Box>
  );
}

// ─── Card móvil ───────────────────────────────────────────────────────────────

function OrdenCard({ orden, navigate, confirmarMut, aprobarMut, onVerDetalle, onVerPdf, pdfLoadingId, onCancelar }) {
  const estadoInfo = ESTADO_MAP[orden.estado_orden];
  const vencida =
    orden.fecha_venc_orden &&
    new Date(orden.fecha_venc_orden) < new Date() &&
    !["facturada", "cancelada", "vencida"].includes(orden.estado_orden);
  const fechaData = formatFecha(orden.fecha_pedido, true);

  return (
    <Paper
      variant="outlined"
      sx={{
        p: 1.5,
        mb: 1,
        opacity: orden.estado_orden === "cancelada" ? 0.6 : 1,
      }}
    >
      {/* Header: número + estado */}
      <Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", mb: 0.5 }}>
        <Typography variant="body2" fontFamily="monospace" fontWeight={700}>
          {orden.numero_pedido ?? (
            <Typography component="span" variant="caption" color="text.disabled" fontStyle="italic">
              Borrador
            </Typography>
          )}
        </Typography>
        <Tooltip title={estadoInfo?.desc ?? ""} arrow>
          <Chip
            size="small"
            label={estadoInfo?.label ?? orden.estado_orden}
            color={estadoInfo?.color ?? "default"}
            icon={estadoInfo ? <Icon icon={estadoInfo.icon} width={13} /> : undefined}
          />
        </Tooltip>
      </Box>

      {/* Cliente */}
      <Typography variant="body2" fontWeight={500} noWrap>
        {getNombreCliente(orden)}
      </Typography>
      <Typography variant="caption" color="text.secondary">
        Origen: {getOrigenOrdenLabel(orden)}
      </Typography>

      {/* Vendedor (si hay) */}
      {orden.vendedor && (
        <Typography variant="caption" color="text.secondary">
          {orden.vendedor.nombre} {orden.vendedor.apellido}
        </Typography>
      )}

      {/* Total */}
      <Typography variant="body1" fontWeight={700} color="success.main" mt={0.5}>
        {formatMoney(Number(orden.total ?? 0))}
        {Number(orden.monto_facturado ?? 0) > 0 && (
          <Typography component="span" variant="caption" color="text.disabled" ml={1}>
            Fact. {formatMoney(Number(orden.monto_facturado))}
          </Typography>
        )}
      </Typography>

      {/* Fecha + Vencimiento */}
      <Box sx={{ display: "flex", gap: 2, mt: 0.5, flexWrap: "wrap" }}>
        <Typography variant="caption" color="text.secondary">
          {fechaData === "—" ? "—" : `${fechaData.fecha} ${fechaData.hora}`}
        </Typography>
        {orden.fecha_venc_orden && (
          <Typography
            variant="caption"
            color={vencida ? "error.main" : "text.disabled"}
            fontWeight={vencida ? 700 : undefined}
          >
            Vence: {formatFecha(orden.fecha_venc_orden)}
            {vencida && <Icon icon="mdi:alert" width={12} style={{ marginLeft: 3, verticalAlign: "middle" }} />}
          </Typography>
        )}
      </Box>

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

      {/* Acciones */}
      <OrdenAcciones
        orden={orden}
        navigate={navigate}
        confirmarMut={confirmarMut}
        aprobarMut={aprobarMut}
        onVerDetalle={onVerDetalle}
        onVerPdf={onVerPdf}
        pdfLoadingId={pdfLoadingId}
        onCancelar={onCancelar}
      />
    </Paper>
  );
}

// ─── Componente principal ─────────────────────────────────────────────────────

export function OrdenesVentaTab() {
  const navigate = useNavigate();
  const queryClient = useQueryClient();
  const { can } = usePermission("VENTAS");
  const canRead = can("VEN_OV_ORDEN_VENTA_VER");
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));

  // Filtros rápidos de fecha
  const [fechaKey, setFechaKey] = useState("");

  // Filtros avanzados
  const [showFiltros, setShowFiltros] = useState(false);
  const [fechaDesde, setFechaDesde] = useState("");
  const [fechaHasta, setFechaHasta] = useState("");
  const [estadoAvanzado, setEstadoAvanzado] = useState("");
  const [vendedorId, setVendedorId] = useState("");
  const { data: vendedoresResp } = useQuery({ queryKey: ["vendedores-activos"], queryFn: getVendedoresActivos });
  const vendedores = listaVendedores(vendedoresResp);

  // Filtro de estado por chip
  const [estadoChip, setEstadoChip] = useState("");

  // Búsqueda y paginación
  const [search, setSearch] = useState("");
  const [page, setPage] = useState(1);
  const [limit, setLimit] = useState(20);
  const [selectedOrdenId, setSelectedOrdenId] = useState(null);
  const [cancelarConfirmOrden, setCancelarConfirmOrden] = useState(null);
  const [pdfOrden, setPdfOrden] = useState(null);      // { id, numero }
  const [pdfBlobUrl, setPdfBlobUrl] = useState(null);
  const [pdfLoadingId, setPdfLoadingId] = useState(null);

  const handleVerPdf = async (orden) => {
    setPdfLoadingId(orden.id);
    try {
      const blob = await getOrdenVentaPdf(orden.id);
      const url = URL.createObjectURL(blob);
      if (pdfBlobUrl) URL.revokeObjectURL(pdfBlobUrl);
      setPdfBlobUrl(url);
      setPdfOrden({ id: orden.id, numero: orden.numero_pedido ?? null });
    } catch {
      toast.error("Error al generar el PDF");
    } finally {
      setPdfLoadingId(null);
    }
  };

  const handleClosePdf = () => {
    if (pdfBlobUrl) URL.revokeObjectURL(pdfBlobUrl);
    setPdfBlobUrl(null);
    setPdfOrden(null);
  };

  const estadoFiltro = estadoChip || estadoAvanzado;

  const fechaParams = useMemo(() => {
    if (fechaDesde || fechaHasta) {
      return {
        ...(fechaDesde ? { fecha_desde: fechaDesde } : {}),
        ...(fechaHasta ? { fecha_hasta: fechaHasta } : {}),
      };
    }
    return fechaKey ? getFechaRange(fechaKey) : {};
  }, [fechaKey, fechaDesde, fechaHasta]);

  const vendedorParams = useMemo(() => (vendedorId ? { vendedor_id: vendedorId } : {}), [vendedorId]);

  const listParams = useMemo(
    () => ({ estado_orden: estadoFiltro || undefined, page, limit, ...fechaParams, ...vendedorParams }),
    [estadoFiltro, page, limit, fechaParams, vendedorParams],
  );

  // Los KPIs reflejan el mismo filtro que la lista (también el vendedor).
  const statsParams = useMemo(() => ({ ...fechaParams, ...vendedorParams }), [fechaParams, vendedorParams]);

  const { data, isLoading } = useQuery({
    queryKey: ["ordenes-venta", "list", listParams],
    queryFn: () => getOrdenesVenta(listParams),
  });

  const { data: stats, isLoading: statsLoading } = useQuery({
    queryKey: ["ordenes-venta", "stats", statsParams],
    queryFn: () => getOrdenesVentaStats(statsParams),
  });

  const ordenes = data?.data ?? [];
  const total = data?.total ?? 0;
  const totalPages = Math.max(1, Math.ceil(total / limit));
  const porEstado = stats?.por_estado ?? {};

  const ordenesVisibles = useMemo(() => {
    if (!search.trim()) return ordenes;
    const q = search.toLowerCase();
    return ordenes.filter(
      (o) =>
        (o.numero_pedido ?? "").toLowerCase().includes(q) ||
        getNombreCliente(o).toLowerCase().includes(q),
    );
  }, [ordenes, search]);

  const filtrosAvanzadosActivos =
    (fechaDesde ? 1 : 0) + (fechaHasta ? 1 : 0) + (estadoAvanzado ? 1 : 0) + (vendedorId ? 1 : 0);

  const resetAll = () => {
    setFechaKey(""); setFechaDesde(""); setFechaHasta("");
    setEstadoAvanzado(""); setEstadoChip(""); setVendedorId(""); setSearch(""); setPage(1);
  };

  const resetAvanzados = () => {
    setFechaDesde(""); setFechaHasta(""); setEstadoAvanzado(""); setVendedorId(""); setPage(1);
  };

  const invalidar = () => queryClient.invalidateQueries({ queryKey: ["ordenes-venta"] });

  const confirmarMut = useMutation({
    mutationFn: (id) => confirmarOrdenVenta(id),
    onSuccess: (res) => { toast.success(res?.message ?? "Orden confirmada"); invalidar(); },
    onError: (err) => toast.error(err?.response?.data?.message ?? "Error al confirmar"),
  });

  const aprobarMut = useMutation({
    mutationFn: (id) => aprobarOrdenVenta(id),
    onSuccess: (res) => { toast.success(res?.message ?? "Orden aprobada"); invalidar(); },
    onError: (err) => toast.error(err?.response?.data?.message ?? "Error al aprobar"),
  });

  const cancelarMut = useMutation({
    mutationFn: (id) => cancelarOrdenVenta(id),
    onSuccess: () => { toast.success("Orden cancelada"); invalidar(); },
    onError: (err) => toast.error(err?.response?.data?.message ?? "Error al cancelar"),
  });

  const handleFechaChip = (key) => {
    setFechaKey((prev) => (prev === key ? "" : key));
    setFechaDesde(""); setFechaHasta(""); setPage(1);
  };

  const handleEstadoChip = (val) => {
    setEstadoChip((prev) => (prev === val ? "" : val));
    setEstadoAvanzado(""); setPage(1);
  };

  if (!canRead) return <AccesoRestringido modulo="VENTAS_ORDEN_VENTA" />;

  const hayFiltros = fechaKey || fechaDesde || fechaHasta || estadoFiltro || vendedorId || search;

  const accionesProps = { navigate, confirmarMut, aprobarMut, onVerDetalle: setSelectedOrdenId, onVerPdf: handleVerPdf, pdfLoadingId, onCancelar: setCancelarConfirmOrden };

  return (
    <Box>
      {/* ── Barra superior ────────────────────────────────────── */}
      <Box sx={{ display: "flex", gap: 1, mb: 1.5, flexWrap: "wrap", alignItems: "center" }}>
        {FECHAS_RAPIDAS.map((f) => (
          <Chip
            key={f.key}
            label={f.label}
            size="small"
            onClick={() => handleFechaChip(f.key)}
            color={fechaKey === f.key ? "primary" : "default"}
            variant={fechaKey === f.key ? "filled" : "outlined"}
          />
        ))}
        {hayFiltros && (
          <Chip
            label="Limpiar filtros"
            size="small"
            color="error"
            variant="outlined"
            icon={<Icon icon="mdi:close" width={13} />}
            onClick={resetAll}
          />
        )}
        <Box sx={{ flex: 1 }} />
        <TextField
          size="small"
          placeholder="Buscar por número o cliente..."
          value={search}
          onChange={(e) => setSearch(e.target.value)}
          sx={{ width: { xs: "100%", sm: 240 } }}
          InputProps={{
            startAdornment: (
              <InputAdornment position="start"><Icon icon="mdi:magnify" width={17} /></InputAdornment>
            ),
            endAdornment: search ? (
              <InputAdornment position="end">
                <IconButton size="small" onClick={() => setSearch("")}>
                  <Icon icon="mdi:close" width={13} />
                </IconButton>
              </InputAdornment>
            ) : null,
          }}
        />
        <Badge badgeContent={filtrosAvanzadosActivos} color="primary" invisible={filtrosAvanzadosActivos === 0}>
          <Button
            variant={showFiltros ? "contained" : "outlined"}
            size="small"
            startIcon={<Icon icon="mdi:filter-variant" width={16} />}
            onClick={() => setShowFiltros((v) => !v)}
            color={filtrosAvanzadosActivos > 0 ? "primary" : "inherit"}
          >
            Filtros
          </Button>
        </Badge>
        <Button
          variant="contained"
          size="small"
          startIcon={<Icon icon="mdi:plus" />}
          onClick={() => navigate("/ordenes-venta/nueva")}
        >
          {isMobile ? "Nueva" : "Nueva Orden"}
        </Button>
      </Box>

      {/* ── Panel de filtros avanzados ────────────────────────── */}
      <Collapse in={showFiltros}>
        <Paper variant="outlined" sx={{ p: 2, mb: 1.5 }}>
          <Box sx={{ display: "flex", gap: 2, flexWrap: "wrap", alignItems: "flex-end" }}>
            <TextField
              label="Fecha desde"
              type="date"
              size="small"
              value={fechaDesde}
              onChange={(e) => { setFechaDesde(e.target.value); setFechaKey(""); setPage(1); }}
              InputLabelProps={{ shrink: true }}
              sx={{ flex: "1 1 150px" }}
            />
            <TextField
              label="Fecha hasta"
              type="date"
              size="small"
              value={fechaHasta}
              onChange={(e) => { setFechaHasta(e.target.value); setFechaKey(""); setPage(1); }}
              InputLabelProps={{ shrink: true }}
              inputProps={{ min: fechaDesde || undefined }}
              sx={{ flex: "1 1 150px" }}
            />
            <Autocomplete
              id="ordenes-filtro-vendedor"
              size="small"
              sx={{ flex: "1 1 220px" }}
              options={vendedores}
              value={vendedores.find((v) => v.id === vendedorId) || null}
              onChange={(_, v) => { setVendedorId(v?.id ?? ""); setPage(1); }}
              getOptionLabel={nombreVendedor}
              isOptionEqualToValue={(o, v) => o.id === v?.id}
              noOptionsText="Sin vendedores"
              renderInput={(params) => <TextField {...params} label="Vendedor" placeholder="Todos los vendedores" />}
            />
            <FormControl size="small" sx={{ flex: "1 1 180px" }}>
              <InputLabel>Estado</InputLabel>
              <Select
                value={estadoAvanzado}
                label="Estado"
                onChange={(e) => { setEstadoAvanzado(e.target.value); setEstadoChip(""); setPage(1); }}
              >
                <MenuItem value="">— Todos los estados —</MenuItem>
                {ESTADOS.map((e) => (
                  <MenuItem key={e.value} value={e.value}>
                    <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
                      <Icon icon={e.icon} width={15} />
                      {e.label}
                    </Box>
                  </MenuItem>
                ))}
              </Select>
            </FormControl>
            <Button
              variant="outlined"
              size="small"
              startIcon={<Icon icon="mdi:filter-remove" width={15} />}
              onClick={resetAvanzados}
              disabled={filtrosAvanzadosActivos === 0}
            >
              Limpiar
            </Button>
          </Box>
        </Paper>
      </Collapse>

      {/* ── KPIs ──────────────────────────────────────────────── */}
      <Box sx={{ display: "flex", gap: 1, mb: 1.5, flexWrap: "wrap" }}>
        <KpiCard label="Total órdenes" value={stats?.total ?? 0} icon="mdi:clipboard-list-outline" loading={statsLoading} />
        <KpiCard label="Monto activo" value={formatMoney(stats?.monto_activo ?? 0)} icon="mdi:cash-multiple" color="success.main" loading={statsLoading} />
        <KpiCard label="Por aprobar" value={porEstado.confirmada ?? 0} icon="mdi:clock-outline" color="primary.main" active={estadoFiltro === "confirmada"} onClick={() => handleEstadoChip("confirmada")} loading={statsLoading} />
        <KpiCard label="En proceso" value={porEstado.en_proceso ?? 0} icon="mdi:progress-clock" color="warning.main" active={estadoFiltro === "en_proceso"} onClick={() => handleEstadoChip("en_proceso")} loading={statsLoading} />
        <KpiCard label="Vencidas" value={porEstado.vencida ?? 0} icon="mdi:calendar-remove-outline" color="error.main" active={estadoFiltro === "vencida"} onClick={() => handleEstadoChip("vencida")} loading={statsLoading} />
        <KpiCard label="Facturadas" value={(porEstado.facturada ?? 0) + (porEstado.facturada_parcial ?? 0)} icon="mdi:receipt-text-check-outline" color="success.main" active={estadoFiltro === "facturada"} onClick={() => handleEstadoChip("facturada")} loading={statsLoading} />
      </Box>

      {/* ── Chips de estado ───────────────────────────────────── */}
      <Box sx={{ display: "flex", gap: 0.75, mb: 1.5, flexWrap: "wrap" }}>
        <Chip
          size="small"
          label={`Todos (${stats?.total ?? 0})`}
          onClick={() => { setEstadoChip(""); setEstadoAvanzado(""); setPage(1); }}
          color={estadoFiltro === "" ? "primary" : "default"}
          variant={estadoFiltro === "" ? "filled" : "outlined"}
        />
        {ESTADOS.map((e) => (
          <Tooltip key={e.value} title={e.desc} arrow placement="bottom">
            <Chip
              size="small"
              icon={<Icon icon={e.icon} width={13} />}
              label={`${e.label}${porEstado[e.value] != null ? ` (${porEstado[e.value]})` : ""}`}
              onClick={() => handleEstadoChip(e.value)}
              color={estadoFiltro === e.value ? e.color : "default"}
              variant={estadoFiltro === e.value ? "filled" : "outlined"}
            />
          </Tooltip>
        ))}
      </Box>

      {/* ── Vista móvil: cards ────────────────────────────────── */}
      {isMobile ? (
        <Box>
          {isLoading
            ? Array.from({ length: 4 }).map((_, i) => (
                <Paper key={i} variant="outlined" sx={{ p: 1.5, mb: 1 }}>
                  <Skeleton width="60%" height={18} />
                  <Skeleton width="80%" height={16} />
                  <Skeleton width="40%" height={22} />
                  <Skeleton width="50%" height={14} />
                </Paper>
              ))
            : ordenesVisibles.length === 0
            ? (
              <Box sx={{ textAlign: "center", py: 6 }}>
                <Icon icon="mdi:clipboard-text-off-outline" width={40} style={{ opacity: 0.3 }} />
                <Typography color="text.secondary" mt={1}>
                  {search ? "No hay órdenes que coincidan" : "No se encontraron órdenes de venta"}
                </Typography>
                {hayFiltros && (
                  <Typography
                    variant="caption"
                    color="text.disabled"
                    sx={{ cursor: "pointer", textDecoration: "underline" }}
                    onClick={resetAll}
                  >
                    Limpiar filtros
                  </Typography>
                )}
              </Box>
            )
            : ordenesVisibles.map((orden) => (
                <OrdenCard key={orden.id} orden={orden} {...accionesProps} />
              ))}
        </Box>
      ) : (
        /* ── Vista desktop: tabla ─────────────────────────────── */
        <TableContainer component={Paper} variant="outlined">
          <Table size="small">
            <TableHead>
              <TableRow>
                <TableCell>Número</TableCell>
                <TableCell>Cliente</TableCell>
                <TableCell>Vendedor</TableCell>
                <TableCell>Origen</TableCell>
                <TableCell>Fecha</TableCell>
                <TableCell>Vencimiento</TableCell>
                <TableCell align="right">Total</TableCell>
                <TableCell>Estado</TableCell>
                <TableCell align="center">Acciones</TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {isLoading
                ? Array.from({ length: 5 }).map((_, i) => (
                    <TableRow key={i}>
                      {Array.from({ length: 9 }).map((_, j) => (
                        <TableCell key={j}><Skeleton /></TableCell>
                      ))}
                    </TableRow>
                  ))
                : ordenesVisibles.length === 0
                ? (
                  <TableRow>
                    <TableCell colSpan={9} align="center" sx={{ py: 6 }}>
                      <Icon icon="mdi:clipboard-text-off-outline" width={40} style={{ opacity: 0.3 }} />
                      <Typography color="text.secondary" mt={1}>
                        {search ? "No hay órdenes que coincidan con la búsqueda" : "No se encontraron órdenes de venta"}
                      </Typography>
                      {hayFiltros && (
                        <Typography variant="caption" color="text.disabled">
                          Intentá ajustar los filtros o{" "}
                          <Box component="span" sx={{ cursor: "pointer", textDecoration: "underline" }} onClick={resetAll}>
                            limpiarlos
                          </Box>
                        </Typography>
                      )}
                    </TableCell>
                  </TableRow>
                )
                : ordenesVisibles.map((orden) => {
                    const estadoInfo = ESTADO_MAP[orden.estado_orden];
                    const vencida =
                      orden.fecha_venc_orden &&
                      new Date(orden.fecha_venc_orden) < new Date() &&
                      !["facturada", "cancelada", "vencida"].includes(orden.estado_orden);
                    const fechaData = formatFecha(orden.fecha_pedido, true);
                    return (
                      <TableRow key={orden.id} hover sx={{ opacity: orden.estado_orden === "cancelada" ? 0.6 : 1 }}>
                        <TableCell>
                          <Typography variant="body2" fontFamily="monospace" fontWeight={600}>
                            {orden.numero_pedido ?? (
                              <Typography component="span" variant="caption" color="text.disabled" fontStyle="italic">
                                Borrador
                              </Typography>
                            )}
                          </Typography>
                        </TableCell>
                        <TableCell>
                          <Typography variant="body2" noWrap sx={{ maxWidth: 180 }}>
                            {getNombreCliente(orden)}
                          </Typography>
                        </TableCell>
                        <TableCell>
                          <Typography variant="body2" color="text.secondary" noWrap>
                            {orden.vendedor ? `${orden.vendedor.nombre} ${orden.vendedor.apellido}` : "—"}
                          </Typography>
                        </TableCell>
                        <TableCell>
                          <Chip size="small" variant="outlined" label={getOrigenOrdenLabel(orden)} />
                        </TableCell>
                        <TableCell>
                          {fechaData === "—" ? (
                            <Typography variant="body2">—</Typography>
                          ) : (
                            <>
                              <Typography variant="body2">{fechaData.fecha}</Typography>
                              <Typography variant="caption" color="text.secondary">{fechaData.hora}</Typography>
                            </>
                          )}
                        </TableCell>
                        <TableCell>
                          <Typography
                            variant="body2"
                            color={vencida ? "error.main" : "text.primary"}
                            fontWeight={vencida ? 600 : undefined}
                          >
                            {formatFecha(orden.fecha_venc_orden)}
                            {vencida && (
                              <Tooltip title="Fecha de vencimiento superada">
                                <Icon icon="mdi:alert" width={13} style={{ marginLeft: 4, verticalAlign: "middle" }} />
                              </Tooltip>
                            )}
                          </Typography>
                        </TableCell>
                        <TableCell align="right">
                          <Typography variant="body2" fontWeight={500}>
                            {formatMoney(Number(orden.total ?? 0))}
                          </Typography>
                          {Number(orden.monto_facturado ?? 0) > 0 && (
                            <Typography variant="caption" color="text.disabled" display="block">
                              Fact. {formatMoney(Number(orden.monto_facturado))}
                            </Typography>
                          )}
                        </TableCell>
                        <TableCell>
                          <Tooltip title={estadoInfo?.desc ?? ""} arrow>
                            <Chip
                              size="small"
                              label={estadoInfo?.label ?? orden.estado_orden}
                              color={estadoInfo?.color ?? "default"}
                              icon={estadoInfo ? <Icon icon={estadoInfo.icon} width={13} /> : undefined}
                            />
                          </Tooltip>
                        </TableCell>
                        <TableCell align="center">
                          <OrdenAcciones orden={orden} {...accionesProps} />
                        </TableCell>
                      </TableRow>
                    );
                  })}
            </TableBody>
          </Table>
        </TableContainer>
      )}

      {/* ── Paginación ────────────────────────────────────────── */}
      <TablePaginationBar
        page={page}
        totalPages={totalPages}
        onPageChange={setPage}
        total={total}
        shown={ordenesVisibles.length}
        noun="órdenes"
        rowsPerPage={limit}
        onRowsPerPageChange={(n) => {
          setLimit(n);
          setPage(1);
        }}
      />

      <OrdenVentaDetalleDialog
        open={!!selectedOrdenId}
        onClose={() => setSelectedOrdenId(null)}
        ordenId={selectedOrdenId}
      />

      {/* ── Confirmar cancelación ────────────────────────────── */}
      <ConfirmarCancelarDialog
        orden={cancelarConfirmOrden}
        onClose={() => setCancelarConfirmOrden(null)}
        loading={cancelarMut.isPending}
        onConfirm={() => {
          cancelarMut.mutate(cancelarConfirmOrden.id, {
            onSuccess: () => setCancelarConfirmOrden(null),
          });
        }}
      />

      {/* ── Visor PDF ──────────────────────────────────────────── */}
      <Dialog open={!!pdfBlobUrl} onClose={handleClosePdf} maxWidth="lg" fullWidth
        PaperProps={{ sx: { height: "90vh", display: "flex", flexDirection: "column" } }}>
        <DialogTitle sx={{ display: "flex", alignItems: "center", justifyContent: "space-between", py: 1.25, px: 2.5, borderBottom: 1, borderColor: "divider" }}>
          <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
            <Icon icon="mdi:file-pdf-box" width={20} color="var(--mui-palette-error-main)" />
            <Typography variant="subtitle1" fontFamily="monospace" fontWeight={700}>
              {pdfOrden?.numero ?? "Orden de Venta"}
            </Typography>
          </Box>
          <IconButton size="small" onClick={handleClosePdf}>
            <Icon icon="mdi:close" width={18} />
          </IconButton>
        </DialogTitle>
        <Box sx={{ flex: 1, overflow: "hidden" }}>
          {pdfBlobUrl && (
            <iframe
              src={pdfBlobUrl}
              title="PDF Orden de Venta"
              style={{ width: "100%", height: "100%", border: "none" }}
            />
          )}
        </Box>
      </Dialog>
    </Box>
  );
}