import React, { useMemo, useState } from "react";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Badge } from "@/components/ui/badge";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import {
  Dialog,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Checkbox } from "@/components/ui/checkbox";
import {
  Archive,
  CalendarClock,
  ClipboardList,
  Factory,
  FileText,
  History,
  ListOrdered,
  Loader2,
  Printer,
  Send,
  Trash2,
  Zap,
} from "lucide-react";
import { toast } from "sonner";
import { ProductionAPI } from "@/apis/ProductionAPI";
import { API } from "@/apis/configs/axiosConfigs";
import { useProduction } from "@/hooks/useProduction";
import { createPanelPageUrl } from "@/utils";
import Link from "next/link";

const getTodayLocalInputDate = () => {
  const now = new Date();
  const tzOffsetMs = now.getTimezoneOffset() * 60 * 1000;
  return new Date(now.getTime() - tzOffsetMs).toISOString().slice(0, 10);
};

const statusLabel = {
  open: "Abierta",
  in_review: "En revisión",
  closed: "Cerrada",
  cancelled: "Cancelada",
  pending: "Pendiente",
  partial: "Parcial",
  fulfilled: "Completado",
  backlog: "Colgado",
};

const bitacoraEventLabel = (eventType) => {
  const labels = {
    request_open_created: "Solicitud creada",
    submit_review: "Enviada a revisión",
    capture_order_created: "Orden de producción creada",
    request_auto_closed: "Solicitud cerrada automáticamente",
    request_planned_essence_created: "Solicitud planificada por esencia",
    item_added: "Ítem agregado",
    item_added_stock_alert: "Ítem agregado por alerta de stock",
    item_added_from_supply_request: "Ítem agregado desde solicitud de abastecimiento",
    item_added_from_sale_min: "Ítem agregado por venta bajo mínimo",
    item_added_from_invoice_min: "Ítem agregado por factura bajo mínimo",
    item_added_from_adjustment_min: "Ítem agregado por ajuste bajo mínimo",
    item_added_from_transfer_min: "Ítem agregado por transferencia bajo mínimo",
    item_quantity_merged: "Cantidad sumada a ítem existente",
    item_quantity_merged_stock_alert: "Cantidad sumada por alerta de stock",
    item_quantity_merged_from_supply_request: "Cantidad sumada desde solicitud de abastecimiento",
    item_quantity_merged_from_sale_min: "Cantidad sumada por venta bajo mínimo",
    item_quantity_merged_from_invoice_min: "Cantidad sumada por factura bajo mínimo",
    item_quantity_merged_from_adjustment_min: "Cantidad sumada por ajuste bajo mínimo",
    item_quantity_merged_from_transfer_min: "Cantidad sumada por transferencia bajo mínimo",
    item_updated: "Ítem actualizado",
    item_removed: "Ítem eliminado",
  };
  return labels[eventType] || eventType || "Evento";
};

const formatBitacoraReference = (row) => {
  if (!row?.reference_type) return null;
  const refLabels = {
    supply_request: "Solicitud de abastecimiento",
    sale: "Venta",
    sales_invoice: "Factura de venta",
    inventory_adjustment: "Ajuste de inventario",
    stock_transfer: "Transferencia de stock",
  };
  const label = refLabels[row.reference_type] || row.reference_type;
  return row.reference_id != null ? `${label} #${row.reference_id}` : label;
};

export default function ProductionRequestsPage() {
  const queryClient = useQueryClient();
  const { companyId, formulas, products, isLoading: productionLoading } = useProduction();

  const [addProductId, setAddProductId] = useState("");
  const [addFormulaId, setAddFormulaId] = useState("");
  const [addQty, setAddQty] = useState("1");
  const [captureOpen, setCaptureOpen] = useState(false);
  const [captureRequestId, setCaptureRequestId] = useState("");
  const [captureDate, setCaptureDate] = useState(getTodayLocalInputDate);
  const [captureLines, setCaptureLines] = useState({});
  const [bitacoraOpen, setBitacoraOpen] = useState(false);
  const [bitacoraRequestId, setBitacoraRequestId] = useState("");
  const [archiveView, setArchiveView] = useState("active");
  const [archiveSelected, setArchiveSelected] = useState({});
  const [typeFilter, setTypeFilter] = useState("all");
  const [closureOpen, setClosureOpen] = useState(false);
  const [closureRequestId, setClosureRequestId] = useState("");

  const productIdsWithFormula = useMemo(() => {
    return new Set(
      (formulas || []).map((f) => String(f.idproduct ?? f.product_id ?? "").trim()).filter(Boolean),
    );
  }, [formulas]);

  const eligibleProducts = useMemo(() => {
    return (products || []).filter((p) => productIdsWithFormula.has(String(p.id)));
  }, [products, productIdsWithFormula]);

  const formulasByProduct = useMemo(() => {
    const map = {};
    (formulas || []).forEach((f) => {
      const pid = String(f.idproduct ?? f.product_id ?? "");
      if (!pid) return;
      if (!map[pid]) map[pid] = [];
      map[pid].push(f);
    });
    return map;
  }, [formulas]);

  const { data: openRequest, isLoading: loadingOpen } = useQuery({
    queryKey: ["production-request-open", companyId],
    queryFn: () => ProductionAPI.getOpenProductionRequest(companyId),
    enabled: Boolean(companyId),
  });
  const { data: openRequests = [], isLoading: loadingOpenRequests } = useQuery({
    queryKey: ["production-requests-open", companyId],
    queryFn: () => ProductionAPI.listProductionRequests(companyId, "open", { archived: "0" }),
    enabled: Boolean(companyId),
  });

  const { data: reviewRequests = [], isLoading: loadingReview } = useQuery({
    queryKey: ["production-requests-review", companyId],
    queryFn: () => ProductionAPI.listProductionRequests(companyId, "in_review", { archived: "0" }),
    enabled: Boolean(companyId),
  });

  const { data: archiveList = [], isLoading: loadingArchiveList } = useQuery({
    queryKey: ["production-requests-archive", companyId, archiveView],
    queryFn: () =>
      ProductionAPI.listProductionRequests(
        companyId,
        undefined,
        { archived: archiveView === "archived" ? "1" : "0" },
      ),
    enabled: Boolean(companyId),
  });

  const { data: backlogItems = [], isLoading: loadingBacklog } = useQuery({
    queryKey: ["production-requests-backlog", companyId],
    queryFn: () => ProductionAPI.getBacklogProductionRequestItems(companyId),
    enabled: Boolean(companyId),
  });

  const otherOpenRequests = useMemo(() => {
    const activeId = openRequest?.id != null ? String(openRequest.id) : null;
    return (openRequests || []).filter((req) => String(req.id) !== activeId);
  }, [openRequests, openRequest?.id]);

  const { data: bitacoraRows = [], isFetching: loadingBitacora } = useQuery({
    queryKey: ["production-request-bitacora", companyId, bitacoraRequestId],
    queryFn: () => ProductionAPI.getProductionRequestBitacora(companyId, bitacoraRequestId),
    enabled: Boolean(companyId && bitacoraRequestId && bitacoraOpen),
  });

  const openBitacora = (requestId) => {
    setBitacoraRequestId(String(requestId));
    setBitacoraOpen(true);
  };

  const { data: closureData, isFetching: loadingClosure } = useQuery({
    queryKey: ["closure-analysis", closureRequestId],
    queryFn: async () => {
      const res = await API.get(`/production/requests/${closureRequestId}/closure-analysis`);
      return res?.data?.data?.detail ?? res?.data?.data ?? null;
    },
    enabled: Boolean(closureRequestId && closureOpen),
  });

  const generatePlannedMutation = useMutation({
    mutationFn: async (overrides) => {
      const payload = { idcompany: companyId };
      if (overrides?.year) payload.year = overrides.year;
      if (overrides?.month) payload.month = overrides.month;
      const endpoint = overrides?.mode === "essence"
        ? "/production/requests/generate-planned-essence"
        : "/production/requests/generate-planned";
      const res = await API.post(endpoint, payload);
      return res?.data?.data?.detail ?? res?.data?.data ?? res?.data;
    },
    onSuccess: (data) => {
      toast.success(data?.message || `Solicitud planificada generada (#${data?.production_request_id || ""})`);
      invalidate();
      setPlannedPreviewOpen(false);
    },
    onError: (err) => toast.error(err?.response?.data?.data?.message || err.message || "Error al generar"),
  });

  const [plannedPreviewOpen, setPlannedPreviewOpen] = useState(false);
  const [plannedMode, setPlannedMode] = useState("sku");
  const today = new Date();
  const [plannedYear, setPlannedYear] = useState(today.getFullYear());
  const [plannedMonth, setPlannedMonth] = useState(today.getMonth() + 1);

  const plannedPreviewQuery = useQuery({
    queryKey: ["planned-preview", plannedMode, companyId, plannedYear, plannedMonth, plannedPreviewOpen],
    queryFn: async () => {
      const endpoint = plannedMode === "essence"
        ? "/production/requests/planned-essence-preview"
        : "/production/requests/planned-preview";
      const res = await API.get(endpoint, {
        params: { idcompany: companyId, year: plannedYear, month: plannedMonth },
      });
      return res?.data?.data?.detail ?? res?.data?.data ?? null;
    },
    enabled: Boolean(companyId && plannedPreviewOpen),
  });

  const openClosure = (requestId) => {
    setClosureRequestId(String(requestId));
    setClosureOpen(true);
  };

  const handleDownloadServerPdf = async (url) => {
    try {
      const res = await API.get(url, { responseType: "blob" });
      const blob = new Blob([res.data], { type: "application/pdf" });
      const blobUrl = URL.createObjectURL(blob);
      const link = document.createElement("a");
      link.href = blobUrl;
      link.target = "_blank";
      link.rel = "noopener noreferrer";
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      setTimeout(() => URL.revokeObjectURL(blobUrl), 10000);
    } catch {
      toast.error("No se pudo generar el documento PDF.");
    }
  };

  const invalidate = async () => {
    await queryClient.invalidateQueries({ queryKey: ["production-request-open", companyId] });
    await queryClient.invalidateQueries({ queryKey: ["production-requests-review", companyId] });
    await queryClient.invalidateQueries({ queryKey: ["production-requests-backlog", companyId] });
    await queryClient.invalidateQueries({ queryKey: ["production-requests-archive"] });
    await queryClient.invalidateQueries({ queryKey: ["production-orders", companyId] });
    await queryClient.invalidateQueries({ queryKey: ["production-request-bitacora"] });
  };

  const addItemMutation = useMutation({
    mutationFn: async () => {
      if (!openRequest?.id) throw new Error("Sin solicitud abierta");
      const qty = Number(addQty);
      if (!addProductId || !Number.isFinite(qty) || qty <= 0) throw new Error("Producto y cantidad válidos");
      return ProductionAPI.addProductionRequestItem(String(openRequest.id), companyId, {
        idproduct: addProductId,
        quantity: qty,
        idproduction_formula: addFormulaId || undefined,
      });
    },
    onSuccess: async () => {
      toast.success("Ítem agregado al carrito");
      setAddQty("1");
      setAddFormulaId("");
      await invalidate();
    },
    onError: (e) => toast.error(e?.message || "No se pudo agregar"),
  });

  const submitReviewMutation = useMutation({
    mutationFn: async (requestId) => {
      const targetId = requestId != null ? String(requestId) : String(openRequest?.id ?? "");
      if (!targetId) throw new Error("Sin solicitud");
      return ProductionAPI.submitProductionRequestReview(targetId);
    },
    onSuccess: async () => {
      toast.success("Enviado a producción");
      await invalidate();
    },
    onError: () => toast.error("No se pudo enviar"),
  });

  const deleteItemMutation = useMutation({
    mutationFn: (itemId) => ProductionAPI.deleteProductionRequestItem(String(itemId)),
    onSuccess: async () => {
      toast.success("Ítem eliminado");
      await invalidate();
    },
    onError: () => toast.error("No se pudo eliminar"),
  });

  const backlogMutation = useMutation({
    mutationFn: (itemId) => ProductionAPI.moveProductionRequestItemToBacklog(String(itemId)),
    onSuccess: async () => {
      toast.success("Marcado como colgado");
      await invalidate();
    },
    onError: () => toast.error("No se pudo actualizar"),
  });

  const captureMutation = useMutation({
    mutationFn: async () => {
      const req = reviewRequests.find((r) => String(r.id) === String(captureRequestId));
      if (!req?.items?.length) throw new Error("Solicitud sin ítems");
      const lines = [];
      req.items.forEach((it) => {
        const rem = Number(it.quantity_remaining ?? 0);
        if (rem <= 0 || it.status === "backlog" || it.status === "cancelled") return;
        const raw = captureLines[String(it.id)] ?? String(rem);
        const planned = Math.min(Number(raw) || 0, rem);
        if (planned <= 0) return;
        const fPick = captureLines[`${it.id}_formula`];
        const fallback = formulasByProduct[String(it.idproduct)]?.[0]?.id;
        const formulaId =
          (fPick && fPick !== "__pick__" ? fPick : null) || it.idproduction_formula || fallback;
        if (!formulaId) {
          throw new Error(`Selecciona una fórmula para: ${it.product?.name || "ítem"}`);
        }
        lines.push({
          idproduction_request_item: String(it.id),
          planned_quantity: planned,
          idproduction_formula: String(formulaId),
        });
      });
      if (!lines.length) throw new Error("Indica cantidades a capturar");
      return ProductionAPI.captureProductionRequest(String(req.id), {
        planned_date: captureDate,
        lines,
      });
    },
    onSuccess: async (data) => {
      toast.success(`OP ${data?.production_order?.order_number || ""} creada`);
      setCaptureOpen(false);
      setCaptureLines({});
      await invalidate();
    },
    onError: (e) => toast.error(e?.message || "Error en captura"),
  });

  const reassignMutation = useMutation({
    mutationFn: (requestId) => ProductionAPI.reassignProductionRequestBacklog(String(requestId)),
    onSuccess: async (data) => {
      toast.success(`Nueva solicitud #${data?.new_request?.id || ""}`);
      await invalidate();
    },
    onError: () => toast.error("No se pudo reasignar"),
  });

  const bulkArchiveMutation = useMutation({
    mutationFn: (ids) => ProductionAPI.bulkArchiveProductionRequests(companyId, ids),
    onSuccess: async (data) => {
      toast.success(`Archivadas: ${data?.updated ?? 0}`);
      setArchiveSelected({});
      await invalidate();
    },
    onError: () => toast.error("No se pudo archivar"),
  });

  const openCaptureFor = (req) => {
    setCaptureRequestId(String(req.id));
    const initial = {};
    (req.items || []).forEach((it) => {
      const rem = Number(it.quantity_remaining ?? 0);
      if (rem > 0) {
        initial[String(it.id)] = String(rem);
        const defF =
          it.idproduction_formula ?? formulasByProduct[String(it.idproduct)]?.[0]?.id ?? "";
        initial[`${it.id}_formula`] = defF ? String(defF) : "";
      }
    });
    setCaptureLines(initial);
    setCaptureDate(getTodayLocalInputDate());
    setCaptureOpen(true);
  };

  const isLoading = productionLoading || loadingOpen;

  return (
    <div className="p-4 md:p-6 space-y-6 max-w-6xl mx-auto">
      <div className="flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
        <div>
          <h1 className="text-2xl font-semibold tracking-tight flex items-center gap-2">
            <Factory className="h-7 w-7 text-violet-600" />
            Solicitudes de producción
          </h1>
          <p className="text-muted-foreground text-sm mt-1">
            Carrito tipo solicitud, revisión, captura a OP y colgados. Las unidades mostradas son solo referencia.
          </p>
        </div>
        <div className="flex flex-wrap gap-2">
          {openRequest?.id ? (
            <Button
              type="button"
              variant="outline"
              size="sm"
              onClick={() => openBitacora(openRequest.id)}
            >
              <History className="h-4 w-4 mr-1" />
              Bitácora (#{openRequest.id})
            </Button>
          ) : null}
          <Button variant="outline" size="sm" asChild>
            <Link href={createPanelPageUrl("production/orders")}>Ir a órdenes</Link>
          </Button>
          <Button
            size="sm"
            variant="secondary"
            onClick={() => setPlannedPreviewOpen(true)}
            disabled={generatePlannedMutation.isPending}
          >
            {generatePlannedMutation.isPending ? (
              <Loader2 className="h-4 w-4 animate-spin mr-1" />
            ) : (
              <CalendarClock className="h-4 w-4 mr-1" />
            )}
            Análisis previo / Generar planificada
          </Button>
        </div>
      </div>

      <Tabs defaultValue="cart" className="space-y-4">
        <TabsList className="grid w-full grid-cols-2 sm:grid-cols-4 max-w-3xl">
          <TabsTrigger value="cart">Solicitud abierta</TabsTrigger>
          <TabsTrigger value="review">Revisión</TabsTrigger>
          <TabsTrigger value="backlog">Colgados</TabsTrigger>
          <TabsTrigger value="archive">Archivo</TabsTrigger>
        </TabsList>

        <TabsContent value="cart">
          <Card className="glass-card border-white/20">
            <CardHeader>
              <CardTitle className="text-lg flex items-center gap-2">
                <ListOrdered className="h-5 w-5" />
                Tu solicitud (merge por producto + fórmula)
              </CardTitle>
            </CardHeader>
            <CardContent className="space-y-6">
              {isLoading ? (
                <div className="flex items-center gap-2 text-muted-foreground">
                  <Loader2 className="h-4 w-4 animate-spin" /> Cargando…
                </div>
              ) : (
                <>
                  <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4 items-end">
                    <div className="space-y-2">
                      <Label>Producto</Label>
                      <Select value={addProductId} onValueChange={(v) => { setAddProductId(v); setAddFormulaId(""); }}>
                        <SelectTrigger>
                          <SelectValue placeholder="Seleccionar" />
                        </SelectTrigger>
                        <SelectContent>
                          {eligibleProducts.map((p) => (
                            <SelectItem key={String(p.id)} value={String(p.id)}>
                              {p.name} {p.sku ? `(${p.sku})` : ""}
                            </SelectItem>
                          ))}
                        </SelectContent>
                      </Select>
                    </div>
                    <div className="space-y-2">
                      <Label>Fórmula (opcional)</Label>
                      <Select
                        value={addFormulaId || "__none__"}
                        onValueChange={(v) => setAddFormulaId(v === "__none__" ? "" : v)}
                        disabled={!addProductId}
                      >
                        <SelectTrigger>
                          <SelectValue placeholder="Predeterminada del producto" />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="__none__">—</SelectItem>
                          {(formulasByProduct[addProductId] || []).map((f) => (
                            <SelectItem key={String(f.id)} value={String(f.id)}>
                              {f.code} — {f.name}
                            </SelectItem>
                          ))}
                        </SelectContent>
                      </Select>
                    </div>
                    <div className="space-y-2">
                      <Label>Cantidad</Label>
                      <Input
                        type="number"
                        min="0.0001"
                        step="any"
                        value={addQty}
                        onChange={(e) => setAddQty(e.target.value)}
                      />
                    </div>
                    <Button
                      type="button"
                      onClick={() => addItemMutation.mutate()}
                      disabled={addItemMutation.isPending || !openRequest?.id}
                    >
                      {addItemMutation.isPending ? <Loader2 className="h-4 w-4 animate-spin" /> : "Agregar"}
                    </Button>
                  </div>

                  <div className="rounded-lg border border-white/20 overflow-hidden">
                    <table className="w-full text-sm">
                      <thead className="bg-muted/50">
                        <tr className="text-left">
                          <th className="p-3">Producto</th>
                          <th className="p-3">Cantidad</th>
                          <th className="p-3">Estado</th>
                          <th className="p-3 w-24" />
                        </tr>
                      </thead>
                      <tbody>
                        {(openRequest?.items || []).length === 0 ? (
                          <tr>
                            <td colSpan={4} className="p-6 text-center text-muted-foreground">
                              Aún no hay ítems. Agrega productos con fórmula definida.
                            </td>
                          </tr>
                        ) : (
                          openRequest.items.map((it) => (
                            <tr key={String(it.id)} className="border-t border-white/10">
                              <td className="p-3">
                                <div className="font-medium">{it.product?.name || "—"}</div>
                                <div className="flex flex-wrap gap-1 mt-1">
                                  {it.product?.unit_suggestion ? (
                                    <Badge variant="secondary" className="text-xs font-normal">
                                      Ref. unidad: {it.product.unit_suggestion}
                                    </Badge>
                                  ) : null}
                                  {it.formula?.name ? (
                                    <Badge variant="outline" className="text-xs">
                                      {it.formula.code}
                                    </Badge>
                                  ) : null}
                                  {it.supply_request_origin?.request_number ? (
                                    <Badge variant="secondary" className="text-xs font-normal">
                                      SR {it.supply_request_origin.request_number}
                                    </Badge>
                                  ) : null}
                                </div>
                              </td>
                              <td className="p-3">
                                {Number(it.quantity || 0).toLocaleString("es-CL")}
                                {Number(it.quantity_captured) > 0 ? (
                                  <span className="text-muted-foreground text-xs block">
                                    Capturado: {Number(it.quantity_captured).toLocaleString("es-CL")}
                                  </span>
                                ) : null}
                              </td>
                              <td className="p-3">
                                <Badge>{statusLabel[it.status] || it.status}</Badge>
                              </td>
                              <td className="p-3">
                                <div className="flex gap-1">
                                  <Button
                                    type="button"
                                    variant="ghost"
                                    size="icon"
                                    className="h-8 w-8"
                                    onClick={() => deleteItemMutation.mutate(it.id)}
                                    disabled={Number(it.quantity_captured) > 0 || deleteItemMutation.isPending}
                                    title="Eliminar"
                                  >
                                    <Trash2 className="h-4 w-4" />
                                  </Button>
                                  <Button
                                    type="button"
                                    variant="ghost"
                                    size="sm"
                                    className="h-8 text-xs"
                                    onClick={() => backlogMutation.mutate(it.id)}
                                    disabled={Number(it.quantity_captured) > 0}
                                  >
                                    Colgar
                                  </Button>
                                </div>
                              </td>
                            </tr>
                          ))
                        )}
                      </tbody>
                    </table>
                  </div>

                  <div className="flex flex-wrap gap-2">
                    <Button
                      onClick={() => submitReviewMutation.mutate()}
                      disabled={
                        submitReviewMutation.isPending ||
                        !openRequest?.id ||
                        openRequest?.status !== "open" ||
                        !(openRequest?.items || []).length
                      }
                    >
                      {submitReviewMutation.isPending ? (
                        <Loader2 className="h-4 w-4 animate-spin mr-2" />
                      ) : (
                        <Send className="h-4 w-4 mr-2" />
                      )}
                      Enviar a revisión producción
                    </Button>
                    <Badge variant="outline" className="h-9 px-3">
                      Estado solicitud: {statusLabel[openRequest?.status] || openRequest?.status || "—"}
                    </Badge>
                  </div>

                  <div className="rounded-lg border border-white/20 p-4 space-y-3">
                    <div className="flex flex-wrap items-center justify-between gap-2">
                      <div>
                        <p className="text-sm font-semibold">Otras solicitudes abiertas</p>
                        <p className="text-xs text-muted-foreground">
                          Aquí verás las abiertas no activas, incluidas planificadas.
                        </p>
                      </div>
                      <Badge variant="outline">{otherOpenRequests.length}</Badge>
                    </div>

                    {loadingOpenRequests ? (
                      <div className="flex items-center gap-2 text-muted-foreground text-sm">
                        <Loader2 className="h-4 w-4 animate-spin" /> Cargando abiertas…
                      </div>
                    ) : otherOpenRequests.length === 0 ? (
                      <p className="text-sm text-muted-foreground">No hay otras solicitudes abiertas.</p>
                    ) : (
                      <div className="space-y-2">
                        {otherOpenRequests.map((req) => (
                          <div
                            key={String(req.id)}
                            className="flex flex-col gap-2 md:flex-row md:items-center md:justify-between border border-white/10 rounded-md p-3"
                          >
                            <div>
                              <p className="text-sm font-medium flex items-center gap-2">
                                Solicitud #{req.id}
                                {req.request_type === "planned" ? (
                                  <Badge variant="secondary" className="text-xs">Planificada</Badge>
                                ) : (
                                  <Badge variant="destructive" className="text-xs">Emergencia</Badge>
                                )}
                              </p>
                              <p className="text-xs text-muted-foreground">
                                {(req.items || []).length} ítems · Estado {statusLabel[req.status] || req.status || "open"}
                              </p>
                            </div>
                            <div className="flex flex-wrap gap-2">
                              <Button type="button" variant="outline" size="sm" onClick={() => openBitacora(req.id)}>
                                <History className="h-4 w-4 mr-1" />
                                Bitácora
                              </Button>
                              <Button
                                type="button"
                                size="sm"
                                onClick={() => submitReviewMutation.mutate(req.id)}
                                disabled={submitReviewMutation.isPending}
                              >
                                Enviar a revisión
                              </Button>
                            </div>
                          </div>
                        ))}
                      </div>
                    )}
                  </div>
                </>
              )}
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="review">
          <Card className="glass-card border-white/20">
            <CardHeader>
              <CardTitle className="text-lg flex items-center gap-2">
                <ClipboardList className="h-5 w-5" />
                Bandeja en revisión
              </CardTitle>
              <div className="flex items-center gap-2 mt-2">
                <Label className="text-xs">Filtrar tipo:</Label>
                <Select value={typeFilter} onValueChange={setTypeFilter}>
                  <SelectTrigger className="w-[180px] h-8">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all">Todos</SelectItem>
                    <SelectItem value="planned">Planificada</SelectItem>
                    <SelectItem value="emergency">Emergencia</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </CardHeader>
            <CardContent className="space-y-4">
              {loadingReview ? (
                <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
              ) : reviewRequests.filter((r) => typeFilter === "all" || r.request_type === typeFilter).length === 0 ? (
                <p className="text-muted-foreground text-sm">No hay solicitudes en revisión.</p>
              ) : (
                <div className="space-y-3">
                  {reviewRequests
                    .filter((r) => typeFilter === "all" || r.request_type === typeFilter)
                    .map((req) => (
                    <div
                      key={String(req.id)}
                      className="flex flex-col gap-2 md:flex-row md:items-center md:justify-between border border-white/15 rounded-lg p-4"
                    >
                      <div>
                        <div className="font-medium flex items-center gap-2">
                          Solicitud #{req.id}
                          {req.request_type === "planned" ? (
                            <Badge variant="secondary" className="text-xs gap-1">
                              <CalendarClock className="h-3 w-3" /> Planificada
                            </Badge>
                          ) : (
                            <Badge variant="destructive" className="text-xs gap-1">
                              <Zap className="h-3 w-3" /> Emergencia
                            </Badge>
                          )}
                        </div>
                        <div className="text-xs text-muted-foreground">
                          {(req.items || []).length} ítems · {statusLabel[req.status]}
                        </div>
                      </div>
                      <div className="flex flex-wrap gap-2">
                        <Button type="button" variant="outline" size="sm" onClick={() => openBitacora(req.id)}>
                          <History className="h-4 w-4 mr-1" />
                          Bitácora
                        </Button>
                        <Button type="button" variant="outline" size="sm" onClick={() => openClosure(req.id)}>
                          <FileText className="h-4 w-4 mr-1" />
                          Análisis cierre
                        </Button>
                        <Button
                          type="button"
                          variant="outline"
                          size="sm"
                          onClick={() => {
                            handleDownloadServerPdf(`/production/requests/${req.id}/document/production-sheet`);
                          }}
                        >
                          <Printer className="h-4 w-4 mr-1" />
                          PDF
                        </Button>
                        <Button type="button" size="sm" onClick={() => openCaptureFor(req)}>
                          Capturar → OP
                        </Button>
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="archive">
          <Card className="glass-card border-white/20">
            <CardHeader>
              <CardTitle className="text-lg flex items-center gap-2">
                <Archive className="h-5 w-5" />
                Archivo y limpieza
              </CardTitle>
              <p className="text-sm text-muted-foreground font-normal">
                Las solicitudes archivadas no aparecen en el listado activo ni en &quot;abierta&quot;. Filtra por
                antiguas o ya archivadas y usa archivado masivo (sin jobs automáticos).
              </p>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="flex flex-wrap gap-3 items-end">
                <div className="space-y-2">
                  <Label>Vista</Label>
                  <Select value={archiveView} onValueChange={(v) => { setArchiveView(v); setArchiveSelected({}); }}>
                    <SelectTrigger className="w-[220px]">
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="active">No archivadas (histórico)</SelectItem>
                      <SelectItem value="archived">Solo archivadas</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                {archiveView === "active" ? (
                  <Button
                    type="button"
                    variant="secondary"
                    disabled={
                      bulkArchiveMutation.isPending ||
                      !Object.keys(archiveSelected).filter((id) => archiveSelected[id]).length
                    }
                    onClick={() => {
                      const ids = Object.keys(archiveSelected).filter((id) => archiveSelected[id]);
                      if (!ids.length) return;
                      bulkArchiveMutation.mutate(ids);
                    }}
                  >
                    {bulkArchiveMutation.isPending ? (
                      <Loader2 className="h-4 w-4 animate-spin mr-2" />
                    ) : (
                      <Archive className="h-4 w-4 mr-2" />
                    )}
                    Archivar seleccionadas
                  </Button>
                ) : null}
              </div>

              {loadingArchiveList ? (
                <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
              ) : archiveList.length === 0 ? (
                <p className="text-muted-foreground text-sm">No hay solicitudes en esta vista.</p>
              ) : (
                <div className="rounded-lg border border-white/20 overflow-x-auto">
                  <table className="w-full text-sm min-w-[520px]">
                    <thead className="bg-muted/50">
                      <tr className="text-left">
                        {archiveView === "active" ? (
                          <th className="p-2 w-10">
                            <Checkbox
                              checked={
                                archiveList.length > 0 &&
                                archiveList.every((r) => archiveSelected[String(r.id)])
                              }
                              onCheckedChange={(checked) => {
                                const next = { ...archiveSelected };
                                archiveList.forEach((r) => {
                                  next[String(r.id)] = Boolean(checked);
                                });
                                setArchiveSelected(next);
                              }}
                              aria-label="Seleccionar todas"
                            />
                          </th>
                        ) : null}
                        <th className="p-2">#</th>
                        <th className="p-2">Estado</th>
                        <th className="p-2">Tipo</th>
                        <th className="p-2">Archivada</th>
                        <th className="p-2">Ítems</th>
                      </tr>
                    </thead>
                    <tbody>
                      {archiveList.map((req) => (
                        <tr key={String(req.id)} className="border-t border-white/10">
                          {archiveView === "active" ? (
                            <td className="p-2">
                              <Checkbox
                                checked={Boolean(archiveSelected[String(req.id)])}
                                onCheckedChange={(checked) =>
                                  setArchiveSelected((prev) => ({
                                    ...prev,
                                    [String(req.id)]: Boolean(checked),
                                  }))
                                }
                                aria-label={`Seleccionar solicitud ${req.id}`}
                              />
                            </td>
                          ) : null}
                          <td className="p-2 font-mono">{req.id}</td>
                          <td className="p-2">
                            <Badge variant="outline">{statusLabel[req.status] || req.status}</Badge>
                          </td>
                          <td className="p-2">
                            {req.request_type === "planned" ? (
                              <Badge variant="secondary" className="text-xs">Planificada</Badge>
                            ) : (
                              <Badge variant="destructive" className="text-xs">Emergencia</Badge>
                            )}
                          </td>
                          <td className="p-2 text-xs text-muted-foreground">
                            {req.archived_at
                              ? new Date(req.archived_at).toLocaleString("es-CL")
                              : "—"}
                          </td>
                          <td className="p-2">{(req.items || []).length}</td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              )}
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="backlog">
          <Card className="glass-card border-white/20">
            <CardHeader>
              <CardTitle>Ítems colgados</CardTitle>
            </CardHeader>
            <CardContent>
              {loadingBacklog ? (
                <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
              ) : backlogItems.length === 0 ? (
                <p className="text-muted-foreground text-sm">Sin colgados.</p>
              ) : (
                <div className="space-y-3">
                  {Object.entries(
                    backlogItems.reduce((acc, it) => {
                      const rid = String(it.idproduction_request ?? it.request?.id ?? "—");
                      if (!acc[rid]) acc[rid] = [];
                      acc[rid].push(it);
                      return acc;
                    }, {}),
                  ).map(([rid, items]) => (
                    <div key={rid} className="border border-white/15 rounded-lg p-4 space-y-2">
                      <div className="flex flex-wrap justify-between gap-2">
                        <span className="font-medium">Solicitud #{rid}</span>
                        <Button
                          type="button"
                          variant="secondary"
                          size="sm"
                          onClick={() => reassignMutation.mutate(rid)}
                          disabled={reassignMutation.isPending || rid === "—"}
                        >
                          Reasignar a nueva solicitud
                        </Button>
                      </div>
                      <ul className="text-sm space-y-1 list-disc list-inside text-muted-foreground">
                        {items.map((it) => (
                          <li key={String(it.id)}>
                            {it.product?.name} — {Number(it.quantity).toLocaleString("es-CL")}
                          </li>
                        ))}
                      </ul>
                    </div>
                  ))}
                </div>
              )}
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>

      <Dialog
        open={bitacoraOpen}
        onOpenChange={(open) => {
          setBitacoraOpen(open);
          if (!open) setBitacoraRequestId("");
        }}
      >
        <DialogContent className="max-w-2xl max-h-[85vh] flex flex-col">
          <DialogHeader>
            <DialogTitle>Bitácora · solicitud #{bitacoraRequestId}</DialogTitle>
          </DialogHeader>
          <ScrollArea className="flex-1 max-h-[60vh] pr-3">
            {loadingBitacora ? (
              <div className="flex items-center gap-2 text-muted-foreground py-8">
                <Loader2 className="h-4 w-4 animate-spin" /> Cargando…
              </div>
            ) : bitacoraRows.length === 0 ? (
              <p className="text-sm text-muted-foreground py-6">Sin registros aún.</p>
            ) : (
              <div className="relative pl-5">
                <div className="absolute left-1.5 top-1 bottom-1 w-px bg-slate-200" />
                <div className="space-y-3">
                  {bitacoraRows.map((row) => (
                    <div key={String(row.id)} className="relative rounded-md border bg-white p-3">
                      <span className="absolute -left-[15px] top-4 h-2.5 w-2.5 rounded-full bg-blue-500 border border-white" />
                      <div className="flex items-start justify-between gap-3">
                        <div>
                          <p className="text-sm font-semibold text-slate-900">
                            {bitacoraEventLabel(row.event_type)}
                          </p>
                          <p className="text-xs text-slate-500">
                            {row.created_at ? new Date(row.created_at).toLocaleString("es-CL") : "—"}
                            {" · "}
                            {row.user?.name || row.user?.email || "Sistema"}
                          </p>
                        </div>
                        <Badge variant="outline" className="font-mono text-[10px]">
                          {row.event_type}
                        </Badge>
                      </div>
                      {row.message ? (
                        <p className="text-xs text-slate-700 mt-2">{row.message}</p>
                      ) : null}
                      {formatBitacoraReference(row) ? (
                        <p className="text-xs text-slate-500 mt-1">Referencia: {formatBitacoraReference(row)}</p>
                      ) : null}
                      {row.meta && Object.keys(row.meta).length > 0 ? (
                        <details className="mt-2">
                          <summary className="cursor-pointer text-xs text-slate-600">Ver detalle técnico</summary>
                          <pre className="mt-1 text-[10px] bg-slate-50 rounded p-2 overflow-x-auto">
                            {JSON.stringify(row.meta, null, 2)}
                          </pre>
                        </details>
                      ) : null}
                    </div>
                  ))}
                </div>
              </div>
            )}
          </ScrollArea>
          <DialogFooter>
            <Button type="button" variant="outline" onClick={() => setBitacoraOpen(false)}>
              Cerrar
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      <Dialog open={captureOpen} onOpenChange={setCaptureOpen}>
        <DialogContent className="max-w-lg max-h-[90vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle>Capturar orden de producción</DialogTitle>
          </DialogHeader>
          <div className="space-y-4 py-2">
            <div className="space-y-2">
              <Label>Fecha planificada</Label>
              <Input type="date" value={captureDate} onChange={(e) => setCaptureDate(e.target.value)} />
            </div>
            <p className="text-xs text-muted-foreground">
              Ajusta cantidades a producir por línea (no mayor al pendiente). El rendimiento de fórmula es referencia;
              no bloquea el guardado.
            </p>
            {(reviewRequests.find((r) => String(r.id) === String(captureRequestId))?.items || []).map((it) => {
              const rem = Number(it.quantity_remaining ?? 0);
              if (rem <= 0) return null;
              return (
                <div key={String(it.id)} className="border border-white/10 rounded-md p-3 space-y-2">
                  <div className="font-medium text-sm">{it.product?.name}</div>
                  <div className="grid grid-cols-2 gap-2">
                    <div>
                      <Label className="text-xs">Cantidad</Label>
                      <Input
                        type="number"
                        min="0"
                        max={rem}
                        step="any"
                        value={captureLines[String(it.id)] ?? String(rem)}
                        onChange={(e) =>
                          setCaptureLines((prev) => ({ ...prev, [String(it.id)]: e.target.value }))
                        }
                      />
                      <span className="text-xs text-muted-foreground">Máx. {rem}</span>
                    </div>
                    <div>
                      <Label className="text-xs">Fórmula</Label>
                      <Select
                        value={
                          captureLines[`${it.id}_formula`] ||
                          String(
                            it.idproduction_formula ||
                              formulasByProduct[String(it.idproduct)]?.[0]?.id ||
                              "__pick__",
                          )
                        }
                        onValueChange={(v) =>
                          setCaptureLines((prev) => ({ ...prev, [`${it.id}_formula`]: v }))
                        }
                      >
                        <SelectTrigger>
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="__pick__">Seleccionar…</SelectItem>
                          {(formulasByProduct[String(it.idproduct)] || []).map((f) => (
                            <SelectItem key={String(f.id)} value={String(f.id)}>
                              {f.code}
                            </SelectItem>
                          ))}
                        </SelectContent>
                      </Select>
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
          <DialogFooter>
            <Button type="button" variant="outline" onClick={() => setCaptureOpen(false)}>
              Cancelar
            </Button>
            <Button type="button" onClick={() => captureMutation.mutate()} disabled={captureMutation.isPending}>
              {captureMutation.isPending ? <Loader2 className="h-4 w-4 animate-spin" /> : "Confirmar captura"}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      <Dialog open={closureOpen} onOpenChange={(open) => { setClosureOpen(open); if (!open) setClosureRequestId(""); }}>
        <DialogContent className="max-w-3xl max-h-[85vh] flex flex-col">
          <DialogHeader>
            <DialogTitle>Análisis de Cierre · Solicitud #{closureRequestId}</DialogTitle>
          </DialogHeader>
          <ScrollArea className="flex-1 max-h-[60vh] pr-3">
            {loadingClosure ? (
              <div className="flex items-center gap-2 text-muted-foreground py-8">
                <Loader2 className="h-4 w-4 animate-spin" /> Analizando disponibilidad…
              </div>
            ) : !closureData?.items?.length ? (
              <p className="text-sm text-muted-foreground py-6">Sin datos de análisis.</p>
            ) : (
              <>
                <div className="flex flex-wrap gap-3 mb-4">
                  <Badge variant="secondary" className="gap-1">
                    Total: {closureData.summary?.total_items ?? 0}
                  </Badge>
                  <Badge className="bg-green-600 text-white gap-1">
                    Disponibles: {closureData.summary?.available ?? 0}
                  </Badge>
                  <Badge className="bg-yellow-500 text-black gap-1">
                    Parcial: {closureData.summary?.partial ?? 0}
                  </Badge>
                  <Badge className="bg-red-600 text-white gap-1">
                    Sin stock: {closureData.summary?.needs_production ?? 0}
                  </Badge>
                  <Badge variant="outline" className="gap-1">
                    Completados: {closureData.summary?.fulfilled ?? 0}
                  </Badge>
                </div>
                <table className="w-full text-sm">
                  <thead>
                    <tr className="text-left border-b">
                      <th className="p-2">SKU</th>
                      <th className="p-2">Producto</th>
                      <th className="p-2 text-right">Solicitado</th>
                      <th className="p-2 text-right">Stock</th>
                      <th className="p-2 text-right">Despacho</th>
                      <th className="p-2 text-right">Pendiente</th>
                      <th className="p-2">Estado</th>
                    </tr>
                  </thead>
                  <tbody>
                    {closureData.items.map((item) => {
                      const bg = item.status === "available"
                        ? "bg-green-500/10"
                        : item.status === "partial"
                        ? "bg-yellow-500/10"
                        : item.status === "needs_production"
                        ? "bg-red-500/10"
                        : "";
                      const statusLabels = {
                        available: "Disponible",
                        partial: "Parcial",
                        needs_production: "Requiere producción",
                        fulfilled: "Completado",
                      };
                      return (
                        <tr key={item.idproduction_request_item} className={`border-b border-white/10 ${bg}`}>
                          <td className="p-2 font-mono text-xs">{item.sku}</td>
                          <td className="p-2">{item.name}</td>
                          <td className="p-2 text-right">{Number(item.remaining).toLocaleString("es-CL")}</td>
                          <td className="p-2 text-right">{Number(item.current_stock).toLocaleString("es-CL")}</td>
                          <td className="p-2 text-right font-medium text-green-600">
                            {Number(item.can_dispatch).toLocaleString("es-CL")}
                          </td>
                          <td className="p-2 text-right font-medium text-red-600">
                            {Number(item.pending).toLocaleString("es-CL")}
                          </td>
                          <td className="p-2">
                            <Badge
                              variant="outline"
                              className={
                                item.status === "available" ? "border-green-500 text-green-600" :
                                item.status === "partial" ? "border-yellow-500 text-yellow-600" :
                                item.status === "needs_production" ? "border-red-500 text-red-600" :
                                ""
                              }
                            >
                              {statusLabels[item.status] || item.status}
                            </Badge>
                          </td>
                        </tr>
                      );
                    })}
                  </tbody>
                </table>
              </>
            )}
          </ScrollArea>
          <DialogFooter>
            <Button type="button" variant="outline" onClick={() => setClosureOpen(false)}>
              Cerrar
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* Diálogo de Análisis previo / Generar planificada */}
      <Dialog open={plannedPreviewOpen} onOpenChange={setPlannedPreviewOpen}>
        <DialogContent className="max-w-4xl max-h-[90vh] flex flex-col">
          <DialogHeader>
            <DialogTitle>Análisis previo de producción planificada</DialogTitle>
          </DialogHeader>
          <div className="flex items-center gap-3 flex-wrap">
            <div className="flex rounded border overflow-hidden text-sm">
              <button
                type="button"
                className={`px-3 py-1 ${plannedMode === "sku" ? "bg-slate-900 text-white" : "bg-white"}`}
                onClick={() => setPlannedMode("sku")}
              >
                Por SKU
              </button>
              <button
                type="button"
                className={`px-3 py-1 ${plannedMode === "essence" ? "bg-slate-900 text-white" : "bg-white"}`}
                onClick={() => setPlannedMode("essence")}
              >
                Por esencia
              </button>
            </div>
            <div>
              <label className="text-xs text-muted-foreground">Año</label>
              <select
                className="block border rounded px-2 py-1 text-sm"
                value={plannedYear}
                onChange={(e) => setPlannedYear(Number(e.target.value))}
              >
                {[today.getFullYear() - 1, today.getFullYear(), today.getFullYear() + 1].map((y) => (
                  <option key={y} value={y}>{y}</option>
                ))}
              </select>
            </div>
            <div>
              <label className="text-xs text-muted-foreground">Mes</label>
              <select
                className="block border rounded px-2 py-1 text-sm"
                value={plannedMonth}
                onChange={(e) => setPlannedMonth(Number(e.target.value))}
              >
                {[1,2,3,4,5,6,7,8,9,10,11,12].map((m) => (
                  <option key={m} value={m}>{m}</option>
                ))}
              </select>
            </div>
            <Button size="sm" variant="outline" onClick={() => plannedPreviewQuery.refetch()} disabled={plannedPreviewQuery.isFetching}>
              {plannedPreviewQuery.isFetching ? <Loader2 className="h-4 w-4 animate-spin mr-1" /> : null}
              Recalcular
            </Button>
          </div>

          <ScrollArea className="flex-1 mt-3">
            {plannedPreviewQuery.isLoading ? (
              <p className="text-sm text-gray-500">Cargando análisis…</p>
            ) : plannedPreviewQuery.data?.rows?.length ? (
              <div>
                <div className="grid grid-cols-1 sm:grid-cols-3 gap-3 mb-3">
                  <div className="rounded border p-2">
                    <div className="text-xs text-muted-foreground">
                      {plannedMode === "essence" ? "Esencias analizadas" : "SKUs analizados"}
                    </div>
                    <div className="text-lg font-bold">
                      {plannedMode === "essence"
                        ? plannedPreviewQuery.data.stats?.essences_with_deficit ?? plannedPreviewQuery.data.rows.length
                        : plannedPreviewQuery.data.stats?.total_skus}
                    </div>
                  </div>
                  <div className="rounded border p-2">
                    <div className="text-xs text-muted-foreground">
                      {plannedMode === "essence" ? "Esencias con déficit" : "SKUs con déficit"}
                    </div>
                    <div className="text-lg font-bold text-amber-700">
                      {plannedMode === "essence"
                        ? plannedPreviewQuery.data.stats?.essences_with_deficit
                        : plannedPreviewQuery.data.stats?.skus_with_deficit}
                    </div>
                  </div>
                  <div className="rounded border p-2">
                    <div className="text-xs text-muted-foreground">Unidades a producir</div>
                    <div className="text-lg font-bold text-green-700">{plannedPreviewQuery.data.stats?.units_to_produce}</div>
                  </div>
                </div>
                {plannedMode === "essence" ? (
                  <table className="w-full text-sm">
                    <thead className="bg-gray-50 sticky top-0">
                      <tr>
                        <th className="p-2 text-left">Esencia</th>
                        <th className="p-2 text-left">SKU a producir</th>
                        <th className="p-2 text-right">Déficit ml</th>
                        <th className="p-2 text-right">Stock libre</th>
                        <th className="p-2 text-right">Cant. PR</th>
                      </tr>
                    </thead>
                    <tbody>
                      {plannedPreviewQuery.data.rows.map((row) => (
                        <tr key={`${row.idessence_product}-${row.idproduct}`} className="border-t">
                          <td className="p-2">
                            <div className="font-medium">{row.essence_name}</div>
                            <div className="text-[11px] font-mono text-gray-500">{row.essence_sku}</div>
                          </td>
                          <td className="p-2">
                            <div>{row.name}</div>
                            <div className="text-[11px] font-mono text-gray-500">{row.sku}</div>
                          </td>
                          <td className="p-2 text-right font-semibold text-amber-700">{row.deficit_ml}</td>
                          <td className="p-2 text-right">{row.stock_free}</td>
                          <td className="p-2 text-right font-bold">{row.quantity}</td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                ) : (
                <table className="w-full text-sm">
                  <thead className="bg-gray-50 sticky top-0">
                    <tr>
                      <th className="p-2 text-left">Producto</th>
                      <th className="p-2 text-right">Manual</th>
                      <th className="p-2 text-right">Histórico</th>
                      <th className="p-2 text-right">Demanda</th>
                      <th className="p-2 text-right">Stock</th>
                      <th className="p-2 text-right">Déficit</th>
                      <th className="p-2 text-left">Fuente</th>
                    </tr>
                  </thead>
                  <tbody>
                    {plannedPreviewQuery.data.rows.map((row) => {
                      const rowClass = row.deficit === 0
                        ? "bg-green-50"
                        : row.deficit < 20
                          ? "bg-yellow-50"
                          : "bg-red-50";
                      return (
                        <tr key={row.idproduct} className={`border-t ${rowClass}`}>
                          <td className="p-2">
                            <div className="font-medium">{row.name}</div>
                            <div className="text-[11px] text-gray-500 font-mono">{row.sku}</div>
                          </td>
                          <td className="p-2 text-right">{row.manual}</td>
                          <td className="p-2 text-right">{row.historical}</td>
                          <td className="p-2 text-right font-semibold">{row.demand}</td>
                          <td className="p-2 text-right">{row.stock}</td>
                          <td className="p-2 text-right font-bold">{row.deficit}</td>
                          <td className="p-2 text-xs">{row.source}</td>
                        </tr>
                      );
                    })}
                  </tbody>
                </table>
                )}
              </div>
            ) : (
              <p className="text-sm text-gray-500">Sin datos para el período seleccionado.</p>
            )}
          </ScrollArea>

          <DialogFooter>
            <Button type="button" variant="outline" onClick={() => setPlannedPreviewOpen(false)}>Cancelar</Button>
            <Button
              type="button"
              onClick={() => generatePlannedMutation.mutate({ year: plannedYear, month: plannedMonth, mode: plannedMode })}
              disabled={
                generatePlannedMutation.isPending
                || !(plannedMode === "essence"
                  ? plannedPreviewQuery.data?.stats?.essences_with_deficit
                  : plannedPreviewQuery.data?.stats?.skus_with_deficit)
              }
            >
              {generatePlannedMutation.isPending ? <Loader2 className="h-4 w-4 animate-spin mr-1" /> : null}
              Confirmar y generar solicitud
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}