import React, { useEffect, 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 {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from "@/components/ui/command";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Textarea } from "@/components/ui/textarea";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import {
  ArrowRight,
  Loader2,
  Package,
  Trash2,
  AlertTriangle,
  CheckCircle2,
  Plus,
  Factory,
  Pencil,
  Ban,
  Truck,
  Check,
  ChevronsUpDown,
  Info,
  CalendarDays,
} from "lucide-react";
import { toast } from "sonner";
import { API } from "@/apis/configs/axiosConfigs";
import { WarehouseAPI } from "@/apis/WarehouseAPI";
import { cn } from "@/lib/utils";

const AUTH_RUT_STORAGE_KEY = "auth_rut";

const WAREHOUSE_TYPE_LABELS = {
  raw_material: "Materia Prima",
  finished_goods: "Producto Terminado",
  picking_sales: "Picking (Ventas)",
  dispatch: "Despacho",
  buffer: "Pulmón (Intermedio)",
};

const ITEM_STATUS_LABELS = {
  pending: "Pendiente",
  partial: "Parcial",
  fulfilled: "Despachado",
  in_preparation: "En preparación",
  prepared: "Preparado",
  escalated: "En producción",
  sin_stock: "Sin stock",
  cancelled: "Cancelado",
};

const STOCK_OUT_REASON_LABELS = {
  sin_produccion: "Sin producción",
  falta_materia_prima: "Falta materia prima",
  quiebre_stock: "Quiebre de stock",
  pendiente_importacion: "Pendiente importación",
  otro: "Otro",
};

const unwrap = (response) => {
  const payload = response?.data;
  if (payload && typeof payload === "object" && "data" in payload) {
    const nested = payload.data;
    if (nested && typeof nested === "object" && "detail" in nested) {
      return nested.detail;
    }
    return nested;
  }
  return payload;
};

const readRutFromStorage = () => {
  if (typeof window === "undefined") return null;
  return window.localStorage.getItem(AUTH_RUT_STORAGE_KEY);
};

const formatDateOnly = (value) => {
  if (!value) return "—";
  const raw = String(value);
  const match = raw.match(/^(\d{4})-(\d{2})-(\d{2})/);
  if (match) {
    const [, year, month, day] = match;
    return `${day}-${month}-${year}`;
  }
  const date = new Date(raw);
  if (Number.isNaN(date.getTime())) return raw;
  return date.toLocaleDateString("es-CL", { day: "2-digit", month: "2-digit", year: "numeric" });
};

const formatDateTime = (value) => {
  if (!value) return "No informada";
  const raw = String(value);
  const normalized = raw.includes("T") ? raw : raw.replace(" ", "T");
  const date = new Date(normalized);
  if (Number.isNaN(date.getTime())) return raw.substring(0, 19).replace("T", " ");
  return date.toLocaleString("es-CL", {
    day: "2-digit",
    month: "2-digit",
    year: "numeric",
    hour: "2-digit",
    minute: "2-digit",
  });
};

const getCompanyId = async () => {
  const rut = readRutFromStorage();
  if (!rut) return null;
  const meResponse = await API.post("/auth/me", { rut });
  return meResponse?.data?.data?.detail?.idcompany ?? null;
};

const STATUS_COLORS = {
  open: "bg-blue-100 text-blue-800",
  partial: "bg-amber-100 text-amber-800",
  fulfilled: "bg-green-100 text-green-800",
  escalated_to_production: "bg-purple-100 text-purple-800",
  cancelled: "bg-gray-200 text-gray-700",
};

const STATUS_LABELS = {
  open: "Abierta",
  partial: "Parcialmente preparada",
  fulfilled: "Completada",
  escalated_to_production: "Con líneas en producción",
  cancelled: "Cancelada",
};

function ProductCombobox({
  products = [],
  value,
  onChange,
  disabled = false,
  loading = false,
  placeholder = "Buscar producto por SKU o nombre…",
  className,
}) {
  const [open, setOpen] = useState(false);
  const selected = (products || []).find((p) => String(p.id) === String(value));
  const selectedLabel = selected
    ? `${selected.sku || "—"} — ${selected.name}`
    : null;

  return (
    <Popover open={open} onOpenChange={setOpen}>
      <PopoverTrigger asChild>
        <Button
          type="button"
          variant="outline"
          role="combobox"
          aria-expanded={open}
          disabled={disabled || loading}
          className={cn("h-10 w-full justify-between font-normal", className)}
        >
          <span className="truncate text-left text-sm">
            {loading ? "Cargando productos…" : selectedLabel || placeholder}
          </span>
          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
        </Button>
      </PopoverTrigger>
      <PopoverContent className="w-[var(--radix-popover-trigger-width)] p-0" align="start">
        <Command>
          <CommandInput placeholder="Escriba SKU o nombre…" className="h-9" />
          <CommandList className="max-h-[280px]">
            <CommandEmpty>{loading ? "Cargando…" : "Sin coincidencias."}</CommandEmpty>
            <CommandGroup heading={products?.length ? `${products.length} productos` : undefined}>
              {(products || []).map((p) => {
                const id = String(p.id);
                return (
                  <CommandItem
                    key={id}
                    value={`${p.sku || ""} ${p.name || ""} ${p.code || ""}`}
                    onSelect={() => {
                      onChange(id);
                      setOpen(false);
                    }}
                  >
                    <Check className={cn("mr-2 h-4 w-4", String(value) === id ? "opacity-100" : "opacity-0")} />
                    <span className="truncate">
                      <span className="font-mono text-xs text-muted-foreground mr-1">{p.sku || "—"}</span>
                      {p.name}
                    </span>
                  </CommandItem>
                );
              })}
            </CommandGroup>
          </CommandList>
        </Command>
      </PopoverContent>
    </Popover>
  );
}

export default function SupplyRequestsPage() {
  const queryClient = useQueryClient();
  const [companyId, setCompanyId] = useState(null);
  const [tab, setTab] = useState("list");
  const [statusFilter, setStatusFilter] = useState("all");
  const [detailOpen, setDetailOpen] = useState(false);
  const [detailId, setDetailId] = useState(null);
  const [createOpen, setCreateOpen] = useState(false);

  // Form de creación
  const [toWarehouseId, setToWarehouseId] = useState("");
  const [fromWarehouseId, setFromWarehouseId] = useState("");
  const [newNotes, setNewNotes] = useState("");
  const [items, setItems] = useState([]);
  const [addProductId, setAddProductId] = useState("");
  const [addQty, setAddQty] = useState("1");

  // Form de cumplimiento
  const [fulfillFromId, setFulfillFromId] = useState("");
  const [fulfillLines, setFulfillLines] = useState({});

  // Edición cola viva en detalle
  const [detailAddProductId, setDetailAddProductId] = useState("");
  const [detailAddQty, setDetailAddQty] = useState("1");
  const [editQty, setEditQty] = useState({});

  // Sin stock (RF-10)
  const [sinStockOpen, setSinStockOpen] = useState(false);
  const [sinStockItemId, setSinStockItemId] = useState(null);
  const [sinStockDate, setSinStockDate] = useState("");
  const [sinStockReason, setSinStockReason] = useState("sin_produccion");
  const [sinStockComment, setSinStockComment] = useState("");
  const [escalateConfirmOpen, setEscalateConfirmOpen] = useState(false);
  const [escalateConfirmItemId, setEscalateConfirmItemId] = useState(null);

  // Acciones bodega (RF-09 Fase 2A)
  const [warehouseQty, setWarehouseQty] = useState({});
  const [warehouseFromId, setWarehouseFromId] = useState("");

  useEffect(() => {
    let mounted = true;
    getCompanyId().then((id) => {
      if (mounted && id) setCompanyId(String(id));
    });
    return () => { mounted = false; };
  }, []);

  const { data: warehouses = [] } = useQuery({
    queryKey: ["warehouses-supply", companyId],
    queryFn: () => WarehouseAPI.getByCompanyId(companyId),
    enabled: Boolean(companyId),
  });

  const productsQuery = useQuery({
    queryKey: ["products-supply", companyId],
    queryFn: async () => {
      const res = await API.get("/products", { params: { idcompany: companyId } });
      return unwrap(res) ?? [];
    },
    enabled: Boolean(companyId),
  });
  const products = productsQuery.data ?? [];

  const productById = useMemo(() => {
    const map = {};
    (products || []).forEach((p) => { map[String(p.id)] = p; });
    return map;
  }, [products]);

  const requestsQuery = useQuery({
    queryKey: ["supply-requests", companyId, statusFilter],
    queryFn: async () => {
      const params = { idcompany: companyId, perPage: 50 };
      if (statusFilter !== "all") params.status = statusFilter;
      const res = await API.get("/supply-requests", { params });
      return unwrap(res) ?? { detail: [] };
    },
    enabled: Boolean(companyId),
  });

  const detailQuery = useQuery({
    queryKey: ["supply-request-detail", detailId],
    queryFn: async () => {
      const res = await API.get(`/supply-requests/${detailId}`);
      return unwrap(res);
    },
    enabled: Boolean(detailId && detailOpen),
  });

  const availabilityQuery = useQuery({
    queryKey: ["supply-request-availability", detailId],
    queryFn: async () => {
      const res = await API.get(`/supply-requests/${detailId}/availability`);
      return unwrap(res) ?? [];
    },
    enabled: Boolean(detailId && detailOpen),
  });

  const createMutation = useMutation({
    mutationFn: async () => {
      if (!toWarehouseId) throw new Error("Bodega destino requerida");
      if (items.length === 0) throw new Error("Agregue al menos un producto");
      const payload = {
        idcompany: Number(companyId),
        to_warehouse_id: Number(toWarehouseId),
        from_warehouse_id: fromWarehouseId ? Number(fromWarehouseId) : null,
        notes: newNotes || null,
        items: items.map((it) => ({ idproduct: Number(it.idproduct), quantity: Number(it.quantity), notes: it.notes || null })),
      };
      const res = await API.post("/supply-requests", payload);
      return unwrap(res);
    },
    onSuccess: () => {
      toast.success("Solicitud creada");
      setCreateOpen(false);
      setItems([]);
      setNewNotes("");
      setToWarehouseId("");
      setFromWarehouseId("");
      queryClient.invalidateQueries({ queryKey: ["supply-requests"] });
    },
    onError: (e) => toast.error(e?.response?.data?.data?.message || e.message || "Error al crear"),
  });

  const fulfillMutation = useMutation({
    mutationFn: async () => {
      if (!fulfillFromId) throw new Error("Bodega origen requerida");
      const lines = Object.entries(fulfillLines)
        .map(([idproduct, qty]) => ({ idproduct: Number(idproduct), quantity: Number(qty) }))
        .filter((l) => l.quantity > 0);
      if (lines.length === 0) throw new Error("Indique cantidades a cumplir");
      const res = await API.post(`/supply-requests/${detailId}/fulfill`, {
        from_warehouse_id: Number(fulfillFromId),
        lines,
      });
      return unwrap(res);
    },
    onSuccess: () => {
      toast.success("Cumplimiento aplicado");
      setFulfillLines({});
      queryClient.invalidateQueries({ queryKey: ["supply-request-detail", detailId] });
      queryClient.invalidateQueries({ queryKey: ["supply-request-availability", detailId] });
      queryClient.invalidateQueries({ queryKey: ["supply-requests"] });
    },
    onError: (e) => toast.error(e?.response?.data?.data?.message || e.message || "Error al cumplir"),
  });

  const escalateMutation = useMutation({
    mutationFn: async ({ itemId, quantity } = {}) => {
      const payload = {};
      if (itemId) payload.item_id = Number(itemId);
      if (quantity) payload.quantity = Number(quantity);
      const res = await API.post(`/supply-requests/${detailId}/escalate`, payload);
      return unwrap(res);
    },
    onSuccess: () => {
      toast.success("Escalado a producción");
      queryClient.invalidateQueries({ queryKey: ["supply-request-detail", detailId] });
      queryClient.invalidateQueries({ queryKey: ["supply-request-availability", detailId] });
      queryClient.invalidateQueries({ queryKey: ["supply-requests"] });
    },
    onError: (e) => toast.error(e?.response?.data?.data?.message || e.message || "Error al escalar"),
  });

  const invalidateDetail = () => {
    queryClient.invalidateQueries({ queryKey: ["supply-request-detail", detailId] });
    queryClient.invalidateQueries({ queryKey: ["supply-request-availability", detailId] });
    queryClient.invalidateQueries({ queryKey: ["supply-requests"] });
  };

  const addDetailItemMutation = useMutation({
    mutationFn: async () => {
      const res = await API.post(`/supply-requests/${detailId}/items`, {
        idproduct: Number(detailAddProductId),
        quantity: Number(detailAddQty),
      });
      return unwrap(res);
    },
    onSuccess: () => {
      toast.success("Producto agregado a la cola");
      setDetailAddProductId("");
      setDetailAddQty("1");
      invalidateDetail();
    },
    onError: (e) => toast.error(e?.response?.data?.data?.message || e.message || "Error al agregar"),
  });

  const updateDetailItemMutation = useMutation({
    mutationFn: async ({ itemId, quantity }) => {
      const res = await API.patch(`/supply-requests/${detailId}/items/${itemId}`, { quantity: Number(quantity) });
      return unwrap(res);
    },
    onSuccess: () => {
      toast.success("Línea actualizada");
      invalidateDetail();
    },
    onError: (e) => toast.error(e?.response?.data?.data?.message || e.message || "Error al actualizar"),
  });

  const removeDetailItemMutation = useMutation({
    mutationFn: async (itemId) => {
      await API.delete(`/supply-requests/${detailId}/items/${itemId}`);
    },
    onSuccess: () => {
      toast.success("Línea eliminada");
      invalidateDetail();
    },
    onError: (e) => toast.error(e?.response?.data?.data?.message || e.message || "Error al eliminar"),
  });

  const markSinStockMutation = useMutation({
    mutationFn: async () => {
      const res = await API.post(`/supply-requests/${detailId}/items/${sinStockItemId}/mark-sin-stock`, {
        stock_out_estimated_date: sinStockDate,
        stock_out_reason: sinStockReason,
        stock_out_comment: sinStockComment || null,
      });
      return unwrap(res);
    },
    onSuccess: () => {
      toast.success("Línea marcada sin stock");
      setSinStockOpen(false);
      setSinStockItemId(null);
      invalidateDetail();
    },
    onError: (e) => toast.error(e?.response?.data?.data?.message || e.message || "Error al marcar sin stock"),
  });

  const clearSinStockMutation = useMutation({
    mutationFn: async (itemId) => {
      const res = await API.post(`/supply-requests/${detailId}/items/${itemId}/clear-sin-stock`);
      return unwrap(res);
    },
    onSuccess: () => {
      toast.success("Línea reactivada");
      invalidateDetail();
    },
    onError: (e) => toast.error(e?.response?.data?.data?.message || e.message || "Error al reactivar"),
  });

  const startPrepMutation = useMutation({
    mutationFn: async ({ itemId, quantity }) => {
      const res = await API.post(`/supply-requests/${detailId}/items/${itemId}/start-preparation`, { quantity: Number(quantity) });
      return unwrap(res);
    },
    onSuccess: () => {
      toast.success("Preparación iniciada");
      invalidateDetail();
    },
    onError: (e) => toast.error(e?.response?.data?.data?.message || e.message || "Error al preparar"),
  });

  const markPreparedMutation = useMutation({
    mutationFn: async ({ itemId, quantity }) => {
      const res = await API.post(`/supply-requests/${detailId}/items/${itemId}/mark-prepared`, { quantity: Number(quantity) });
      return unwrap(res);
    },
    onSuccess: () => {
      toast.success("Marcado como preparado");
      invalidateDetail();
    },
    onError: (e) => toast.error(e?.response?.data?.data?.message || e.message || "Error al marcar preparado"),
  });

  const dispatchMutation = useMutation({
    mutationFn: async ({ itemId, quantity }) => {
      const res = await API.post(`/supply-requests/${detailId}/items/${itemId}/dispatch`, {
        from_warehouse_id: Number(warehouseFromId),
        quantity: Number(quantity),
      });
      return unwrap(res);
    },
    onSuccess: () => {
      toast.success("Despacho aplicado");
      invalidateDetail();
    },
    onError: (e) => toast.error(e?.response?.data?.data?.message || e.message || "Error al despachar"),
  });

  const cancelItemMutation = useMutation({
    mutationFn: async (itemId) => {
      await API.post(`/supply-requests/${detailId}/items/${itemId}/cancel`);
    },
    onSuccess: () => {
      toast.success("Línea cancelada");
      invalidateDetail();
    },
    onError: (e) => toast.error(e?.response?.data?.data?.message || e.message || "Error al cancelar línea"),
  });

  const cancelRequestMutation = useMutation({
    mutationFn: async () => {
      await API.post(`/supply-requests/${detailId}/cancel`);
    },
    onSuccess: () => {
      toast.success("Solicitud cancelada");
      setDetailOpen(false);
      queryClient.invalidateQueries({ queryKey: ["supply-requests"] });
    },
    onError: (e) => toast.error(e?.response?.data?.data?.message || e.message || "Error al cancelar solicitud"),
  });

  const requests = requestsQuery.data?.detail || requestsQuery.data || [];

  const fulfillWarehouseOptions = useMemo(() => {
    const destinationId = String(detailQuery.data?.to_warehouse_id || "");
    const availabilityRows = availabilityQuery.data || [];
    const allowedMap = new Map();

    availabilityRows.forEach((row) => {
      const pending = Number(row.pending || 0);
      const prepared = Number(row.prepared || 0);
      if (pending <= 0 && prepared <= 0) return;
      (row.by_warehouse || []).forEach((w) => {
        const stock = Number(w.stock || 0);
        const wid = String(w.idwarehouse || "");
        if (!wid || stock <= 0 || wid === destinationId) return;
        if (!allowedMap.has(wid)) {
          allowedMap.set(wid, {
            id: wid,
            name: w.warehouse_name || "Bodega",
            warehouse_type: w.warehouse_type || "",
          });
        }
      });
    });

    return Array.from(allowedMap.values());
  }, [availabilityQuery.data, detailQuery.data?.to_warehouse_id]);

  useEffect(() => {
    if (!detailOpen) return;
    if (!fulfillWarehouseOptions.length) {
      if (fulfillFromId) setFulfillFromId("");
      return;
    }
    const exists = fulfillWarehouseOptions.some((w) => String(w.id) === String(fulfillFromId));
    if (!exists) {
      const suggested = String(detailQuery.data?.from_warehouse_id || "");
      const suggestedOption = fulfillWarehouseOptions.find((w) => String(w.id) === suggested);
      setFulfillFromId(String(suggestedOption?.id || fulfillWarehouseOptions[0].id));
    }
  }, [detailOpen, fulfillWarehouseOptions, fulfillFromId, detailQuery.data?.from_warehouse_id]);

  useEffect(() => {
    if (!detailOpen) return;
    if (!fulfillWarehouseOptions.length) {
      if (warehouseFromId) setWarehouseFromId("");
      return;
    }
    const exists = fulfillWarehouseOptions.some((w) => String(w.id) === String(warehouseFromId));
    if (!exists) {
      const suggested = String(detailQuery.data?.from_warehouse_id || "");
      const suggestedOption = fulfillWarehouseOptions.find((w) => String(w.id) === suggested);
      setWarehouseFromId(String(suggestedOption?.id || fulfillWarehouseOptions[0].id));
    }
  }, [detailOpen, fulfillWarehouseOptions, warehouseFromId, detailQuery.data?.from_warehouse_id]);

  const openDetail = (id) => {
    setDetailId(id);
    setDetailOpen(true);
    setTab("list");
    setFulfillLines({});
    setFulfillFromId("");
    setEditQty({});
    setWarehouseQty({});
    setWarehouseFromId("");
  };

  const pendingFreeQty = (item) => {
    const committed =
      Number(item.quantity_fulfilled || 0) +
      Number(item.quantity_in_preparation || 0) +
      Number(item.quantity_prepared || 0) +
      Number(item.quantity_escalated || 0);
    return Math.max(0, Number(item.quantity || 0) - committed);
  };

  const isItemEditable = (item) =>
    item.status === "pending" &&
    Number(item.quantity_fulfilled || 0) === 0 &&
    Number(item.quantity_in_preparation || 0) === 0 &&
    Number(item.quantity_prepared || 0) === 0 &&
    Number(item.quantity_escalated || 0) === 0 &&
    !item.idproduction_request_item;

  const openSinStockModal = (itemId) => {
    setSinStockItemId(itemId);
    setSinStockDate(new Date().toISOString().substring(0, 10));
    setSinStockReason("sin_produccion");
    setSinStockComment("");
    setSinStockOpen(true);
  };

  const confirmSinStockEscalate = () => {
    const itemId = sinStockItemId;
    const reason = sinStockReason;
    markSinStockMutation.mutate(undefined, {
      onSuccess: () => {
        if (reason === "sin_produccion" && itemId) {
          setEscalateConfirmItemId(itemId);
          setEscalateConfirmOpen(true);
        }
      },
    });
  };

  const sinStockItem = useMemo(() => {
    if (!sinStockItemId || !detailQuery.data?.items) return null;
    return detailQuery.data.items.find((it) => String(it.id) === String(sinStockItemId)) || null;
  }, [sinStockItemId, detailQuery.data?.items]);

  const escalateConfirmItem = useMemo(() => {
    if (!escalateConfirmItemId || !detailQuery.data?.items) return null;
    return detailQuery.data.items.find((it) => String(it.id) === String(escalateConfirmItemId)) || null;
  }, [escalateConfirmItemId, detailQuery.data?.items]);

  const sinStockPreviewText = sinStockDate
    ? `Estimado: ${formatDateOnly(sinStockDate)} · ${STOCK_OUT_REASON_LABELS[sinStockReason] || sinStockReason}${sinStockComment ? ` · ${sinStockComment}` : ""}`
    : "";

  const addItem = () => {
    if (!addProductId) return;
    const product = productById[addProductId];
    if (!product) return;
    const qty = Number(addQty);
    if (!qty || qty <= 0) return;
    setItems((prev) => {
      const existing = prev.findIndex((it) => String(it.idproduct) === String(addProductId));
      if (existing >= 0) {
        const copy = [...prev];
        copy[existing] = { ...copy[existing], quantity: Number(copy[existing].quantity) + qty };
        return copy;
      }
      return [...prev, { idproduct: addProductId, name: product.name, sku: product.sku, quantity: qty, notes: "" }];
    });
    setAddProductId("");
    setAddQty("1");
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50 p-6">
      <div className="max-w-7xl mx-auto">
        <div className="flex items-center justify-between mb-6 flex-wrap gap-2">
          <div className="flex items-center gap-3">
            <Package className="w-8 h-8 text-blue-600" />
            <div>
              <h1 className="text-3xl font-bold text-gray-900">Solicitudes de Abastecimiento</h1>
              <p className="text-gray-500 text-sm">Cumplir desde bodegas o escalar a producción</p>
            </div>
          </div>
          <div className="flex items-center gap-2">
            <Select value={statusFilter} onValueChange={setStatusFilter}>
              <SelectTrigger className="w-44"><SelectValue /></SelectTrigger>
              <SelectContent>
                <SelectItem value="all">Todos los estados</SelectItem>
                <SelectItem value="open">Abiertas</SelectItem>
                <SelectItem value="partial">Parciales</SelectItem>
                <SelectItem value="fulfilled">Cumplidas</SelectItem>
                <SelectItem value="escalated_to_production">Escaladas a producción</SelectItem>
              </SelectContent>
            </Select>
            <Button onClick={() => setCreateOpen(true)}>
              <Plus className="w-4 h-4 mr-1" /> Nueva solicitud
            </Button>
          </div>
        </div>

        <Card>
          <CardHeader>
            <CardTitle>Listado</CardTitle>
          </CardHeader>
          <CardContent>
            {requestsQuery.isLoading ? (
              <div className="flex items-center gap-2 text-muted-foreground"><Loader2 className="h-4 w-4 animate-spin" /> Cargando…</div>
            ) : !requests.length ? (
              <p className="text-sm text-gray-500">No hay solicitudes para mostrar.</p>
            ) : (
              <table className="w-full text-sm">
                <thead className="bg-gray-50">
                  <tr>
                    <th className="text-left p-2">N°</th>
                    <th className="text-left p-2">Destino</th>
                    <th className="text-left p-2">Origen sugerido</th>
                    <th className="text-right p-2">Ítems</th>
                    <th className="text-left p-2">Estado</th>
                    <th className="text-left p-2">Producción</th>
                    <th className="text-left p-2">Fecha</th>
                    <th className="p-2"></th>
                  </tr>
                </thead>
                <tbody>
                  {requests.map((req) => (
                    <tr key={req.id} className="border-t hover:bg-gray-50">
                      <td className="p-2 font-mono">{req.request_number}</td>
                      <td className="p-2">{req.to_warehouse?.name || "—"}</td>
                      <td className="p-2">{req.from_warehouse?.name || "—"}</td>
                      <td className="p-2 text-right">{(req.items || []).length}</td>
                      <td className="p-2">
                        <Badge className={STATUS_COLORS[req.status] || ""}>
                          {STATUS_LABELS[req.status] || req.status}
                        </Badge>
                      </td>
                      <td className="p-2">
                        {req.idproduction_request ? <Badge variant="outline">#{req.idproduction_request}</Badge> : "—"}
                      </td>
                      <td className="p-2 text-xs text-gray-500">{formatDateOnly(req.created_at)}</td>
                      <td className="p-2">
                        <Button size="sm" variant="outline" onClick={() => openDetail(req.id)}>Detalle</Button>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            )}
          </CardContent>
        </Card>
      </div>

      {/* Dialog crear */}
      <Dialog open={createOpen} onOpenChange={setCreateOpen}>
        <DialogContent className="max-w-2xl max-h-[90vh] flex flex-col">
          <DialogHeader>
            <DialogTitle>Nueva solicitud de abastecimiento</DialogTitle>
          </DialogHeader>
          <ScrollArea className="flex-1 pr-3">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-3 mb-3">
              <div>
                <Label>Bodega destino (quien necesita) *</Label>
                <Select value={toWarehouseId} onValueChange={setToWarehouseId}>
                  <SelectTrigger><SelectValue placeholder="Seleccionar bodega…" /></SelectTrigger>
                  <SelectContent>
                    {warehouses.filter((w) => w.is_active !== false).map((w) => (
                      <SelectItem key={String(w.id)} value={String(w.id)}>{w.name}</SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
              <div>
                <Label>Bodega origen sugerida (opcional)</Label>
                <Select value={fromWarehouseId} onValueChange={setFromWarehouseId}>
                  <SelectTrigger><SelectValue placeholder="Cualquiera" /></SelectTrigger>
                  <SelectContent>
                    {warehouses.filter((w) => w.is_active !== false).map((w) => (
                      <SelectItem key={String(w.id)} value={String(w.id)}>{w.name}</SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
            </div>
            <div className="rounded border p-3 mb-3">
              <p className="text-sm font-semibold mb-2">Agregar productos</p>
              <div className="flex items-end gap-2 flex-wrap sm:flex-nowrap">
                <div className="flex-1 min-w-[220px]">
                  <Label className="text-xs text-muted-foreground mb-1 block">Producto</Label>
                  <ProductCombobox
                    products={products}
                    value={addProductId}
                    onChange={setAddProductId}
                    loading={productsQuery.isLoading}
                    disabled={!companyId}
                  />
                </div>
                <div className="w-24">
                  <Label className="text-xs text-muted-foreground mb-1 block">Cant.</Label>
                  <Input type="number" min="0.0001" step="0.0001" value={addQty} onChange={(e) => setAddQty(e.target.value)} />
                </div>
                <Button type="button" className="shrink-0" onClick={addItem} disabled={!addProductId}>
                  <Plus className="w-4 h-4" />
                </Button>
              </div>
            </div>
            <table className="w-full text-sm">
              <thead className="bg-gray-50">
                <tr>
                  <th className="text-left p-2">Producto</th>
                  <th className="text-right p-2">Cantidad</th>
                  <th className="p-2"></th>
                </tr>
              </thead>
              <tbody>
                {items.length === 0 ? (
                  <tr><td colSpan={3} className="p-3 text-center text-gray-500 text-xs">Sin productos</td></tr>
                ) : items.map((it, idx) => (
                  <tr key={`${it.idproduct}-${idx}`} className="border-t">
                    <td className="p-2">
                      <div className="font-medium">{it.name}</div>
                      <div className="text-[11px] text-gray-500 font-mono">{it.sku}</div>
                    </td>
                    <td className="p-2 text-right">
                      <Input
                        type="number"
                        min="0.0001"
                        step="0.0001"
                        value={it.quantity}
                        onChange={(e) => setItems((prev) => prev.map((row, i) => i === idx ? { ...row, quantity: e.target.value } : row))}
                        className="w-24 text-right"
                      />
                    </td>
                    <td className="p-2 text-right">
                      <Button size="sm" variant="ghost" onClick={() => setItems((prev) => prev.filter((_, i) => i !== idx))}>
                        <Trash2 className="w-4 h-4" />
                      </Button>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
            <div className="mt-3">
              <Label>Notas</Label>
              <Input value={newNotes} onChange={(e) => setNewNotes(e.target.value)} placeholder="Detalle de la necesidad…" />
            </div>
          </ScrollArea>
          <DialogFooter>
            <Button variant="outline" onClick={() => setCreateOpen(false)}>Cancelar</Button>
            <Button onClick={() => createMutation.mutate()} disabled={createMutation.isPending}>
              {createMutation.isPending ? <Loader2 className="w-4 h-4 animate-spin mr-1" /> : null}
              Crear
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* Dialog detalle */}
      <Dialog open={detailOpen} onOpenChange={setDetailOpen}>
        <DialogContent className="max-w-4xl max-h-[90vh] flex flex-col">
          <DialogHeader>
            <DialogTitle>Detalle de solicitud {detailQuery.data?.request_number || ""}</DialogTitle>
          </DialogHeader>
          <ScrollArea className="flex-1 pr-3">
            {detailQuery.isLoading ? (
              <p className="text-sm text-gray-500">Cargando…</p>
            ) : detailQuery.data ? (
              <Tabs value={tab} onValueChange={setTab}>
                <div className="rounded-md border bg-slate-50 p-3 mb-3 text-sm">
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
                    <p>
                      <strong>Solicita:</strong>{" "}
                      {detailQuery.data.user?.user_name || detailQuery.data.user?.email || "No informado"}
                    </p>
                    <p>
                      <strong>Estado:</strong>{" "}
                      <Badge className={STATUS_COLORS[detailQuery.data.status] || ""}>
                        {STATUS_LABELS[detailQuery.data.status] || detailQuery.data.status}
                      </Badge>
                    </p>
                    <p>
                      <strong>Destino:</strong>{" "}
                      {detailQuery.data.to_warehouse?.name || "No informado"}
                    </p>
                    <p>
                      <strong>Origen sugerido:</strong>{" "}
                      {detailQuery.data.from_warehouse?.name || "No definido"}
                    </p>
                    <p>
                      <strong>Fecha:</strong> {formatDateTime(detailQuery.data.created_at)}
                    </p>
                    {detailQuery.data.idproduction_request ? (
                      <p>
                        <strong>Producción asociada:</strong> #{detailQuery.data.idproduction_request}
                      </p>
                    ) : null}
                  </div>
                  <div className="flex flex-wrap gap-2 mb-3">
                    {detailQuery.data.status !== "fulfilled" && detailQuery.data.status !== "cancelled" ? (
                      <Button
                        size="sm"
                        variant="outline"
                        onClick={() => {
                          if (window.confirm("¿Cancelar toda la solicitud? Solo líneas libres serán canceladas.")) {
                            cancelRequestMutation.mutate();
                          }
                        }}
                        disabled={cancelRequestMutation.isPending}
                      >
                        Cancelar solicitud
                      </Button>
                    ) : null}
                  </div>
                  {detailQuery.data.notes ? (
                    <p className="mt-2">
                      <strong>Motivo/Notas:</strong> {detailQuery.data.notes}
                    </p>
                  ) : null}
                </div>
                <TabsList>
                  <TabsTrigger value="list">Ítems</TabsTrigger>
                  <TabsTrigger value="availability">Análisis multi-bodega</TabsTrigger>
                  <TabsTrigger value="warehouse">Bodega</TabsTrigger>
                  <TabsTrigger value="fulfill">Cumplir rápido</TabsTrigger>
                </TabsList>
                <TabsContent value="list" className="space-y-3 mt-3">
                  <div className="rounded border p-3 bg-white">
                    <p className="text-sm font-semibold mb-2">Agregar a la cola (solo líneas libres)</p>
                    <div className="flex items-end gap-2 flex-wrap sm:flex-nowrap">
                      <div className="flex-1 min-w-[220px]">
                        <Label className="text-xs text-muted-foreground mb-1 block">Producto</Label>
                        <ProductCombobox
                          products={products}
                          value={detailAddProductId}
                          onChange={setDetailAddProductId}
                          loading={productsQuery.isLoading}
                        />
                      </div>
                      <div className="w-24">
                        <Label className="text-xs text-muted-foreground mb-1 block">Cant.</Label>
                        <Input type="number" min="0.0001" step="0.0001" value={detailAddQty} onChange={(e) => setDetailAddQty(e.target.value)} />
                      </div>
                      <Button
                        type="button"
                        size="sm"
                        className="shrink-0"
                        onClick={() => addDetailItemMutation.mutate()}
                        disabled={!detailAddProductId || addDetailItemMutation.isPending}
                      >
                        {addDetailItemMutation.isPending ? <Loader2 className="w-4 h-4 animate-spin" /> : <Plus className="w-4 h-4" />}
                      </Button>
                    </div>
                  </div>
                  <table className="w-full text-sm">
                    <thead className="bg-gray-50">
                      <tr>
                        <th className="text-left p-2">Producto</th>
                        <th className="text-right p-2">Solicitado</th>
                        <th className="text-right p-2">Libre</th>
                        <th className="text-right p-2">Prep / Desp.</th>
                        <th className="text-left p-2">Estado</th>
                        <th className="p-2"></th>
                      </tr>
                    </thead>
                    <tbody>
                      {(detailQuery.data.items || []).map((it) => {
                        const free = pendingFreeQty(it);
                        const editable = isItemEditable(it);
                        return (
                          <tr key={it.id} className="border-t">
                            <td className="p-2">
                              <div>{it.product?.name || it.idproduct}</div>
                              {it.status === "sin_stock" ? (
                                <div className="text-[11px] text-amber-700 mt-1">
                                  Estimado: {formatDateOnly(it.stock_out_estimated_date)} · {STOCK_OUT_REASON_LABELS[it.stock_out_reason] || it.stock_out_reason}
                                  {it.stock_out_comment ? ` · ${it.stock_out_comment}` : ""}
                                </div>
                              ) : null}
                              {it.idproduction_request_item ? (
                                <div className="text-[11px] text-purple-700 mt-1">
                                  En producción (PR ítem #{it.idproduction_request_item})
                                  {detailQuery.data?.production_mirrors?.[it.id]?.production_order ? (
                                    <span>
                                      {" "}· OP {detailQuery.data.production_mirrors[it.id].production_order.order_number}
                                      {" "}({detailQuery.data.production_mirrors[it.id].production_order.current_stage || detailQuery.data.production_mirrors[it.id].production_order.status})
                                    </span>
                                  ) : null}
                                  {detailQuery.data?.production_mirrors?.[it.id] ? (
                                    <span className="block">
                                      Capturado: {Number(detailQuery.data.production_mirrors[it.id].quantity_captured || 0).toLocaleString("es-CL")}
                                      / {Number(detailQuery.data.production_mirrors[it.id].quantity || 0).toLocaleString("es-CL")}
                                    </span>
                                  ) : null}
                                </div>
                              ) : null}
                            </td>
                            <td className="p-2 text-right">
                              {editable ? (
                                <Input
                                  type="number"
                                  min="0.0001"
                                  step="0.0001"
                                  className="w-24 ml-auto text-right"
                                  value={editQty[it.id] ?? it.quantity}
                                  onChange={(e) => setEditQty((prev) => ({ ...prev, [it.id]: e.target.value }))}
                                  onBlur={() => {
                                    const val = editQty[it.id];
                                    if (val !== undefined && Number(val) !== Number(it.quantity)) {
                                      updateDetailItemMutation.mutate({ itemId: it.id, quantity: val });
                                    }
                                  }}
                                />
                              ) : (
                                Number(it.quantity).toLocaleString("es-CL")
                              )}
                            </td>
                            <td className="p-2 text-right">{free.toLocaleString("es-CL")}</td>
                            <td className="p-2 text-right text-xs text-muted-foreground">
                              {Number(it.quantity_in_preparation || 0)}/{Number(it.quantity_prepared || 0)}/{Number(it.quantity_fulfilled || 0)}
                            </td>
                            <td className="p-2">
                              <Badge variant="outline">{ITEM_STATUS_LABELS[it.status] || it.status}</Badge>
                            </td>
                            <td className="p-2 text-right">
                              {editable ? (
                                <div className="flex justify-end gap-1">
                                  <Button size="sm" variant="ghost" onClick={() => removeDetailItemMutation.mutate(it.id)}>
                                    <Trash2 className="w-4 h-4" />
                                  </Button>
                                  <Button size="sm" variant="ghost" onClick={() => cancelItemMutation.mutate(it.id)}>
                                    <Ban className="w-4 h-4" />
                                  </Button>
                                </div>
                              ) : it.status !== "fulfilled" && it.status !== "cancelled" && !it.idproduction_request_item ? (
                                <Button size="sm" variant="ghost" onClick={() => cancelItemMutation.mutate(it.id)}>
                                  <Ban className="w-4 h-4" />
                                </Button>
                              ) : null}
                            </td>
                          </tr>
                        );
                      })}
                    </tbody>
                  </table>
                </TabsContent>

                <TabsContent value="availability" className="space-y-2 mt-3">
                  {availabilityQuery.isLoading ? (
                    <p className="text-sm text-gray-500">Analizando stock…</p>
                  ) : !(availabilityQuery.data || []).length ? (
                    <p className="text-sm text-gray-500">Sin datos.</p>
                  ) : (
                    <div className="space-y-3">
                      {(availabilityQuery.data || []).map((row) => (
                        <div key={row.idsupply_request_item} className={`rounded border p-3 ${row.sufficient ? "bg-green-50" : "bg-red-50"}`}>
                          <div className="flex items-center justify-between flex-wrap">
                            <div>
                              <p className="font-semibold">{row.product_name}</p>
                              <p className="text-xs text-muted-foreground">SKU: {row.sku} · Pendiente: {row.pending}</p>
                            </div>
                            <Badge className={row.sufficient ? "bg-green-600 text-white" : "bg-red-600 text-white"}>
                              {row.sufficient ? (<><CheckCircle2 className="w-3 h-3 mr-1 inline" /> Disponible</>) : (<><AlertTriangle className="w-3 h-3 mr-1 inline" /> Insuficiente</>)}
                            </Badge>
                          </div>
                          {row.by_warehouse?.length ? (
                            <table className="w-full text-xs mt-2">
                              <thead className="text-muted-foreground">
                                <tr><th className="text-left">Bodega</th><th className="text-left">Tipo</th><th className="text-right">Stock</th></tr>
                              </thead>
                              <tbody>
                                {row.by_warehouse.map((w) => (
                                  <tr key={w.idwarehouse} className="border-t">
                                    <td>{w.warehouse_name}</td>
                                    <td>{WAREHOUSE_TYPE_LABELS[w.warehouse_type] || w.warehouse_type}</td>
                                    <td className="text-right">{w.stock}</td>
                                  </tr>
                                ))}
                              </tbody>
                            </table>
                          ) : (
                            <p className="text-xs text-red-700 mt-2">Sin stock en bodegas tipo Pulmón/Terminados/Materia Prima.</p>
                          )}
                        </div>
                      ))}
                    </div>
                  )}
                  {(() => {
                    const currentStatus = detailQuery.data?.status;
                    const hasPendingItems = (detailQuery.data?.items || []).some(
                      (it) => pendingFreeQty(it) > 0 && !it.idproduction_request_item && it.status !== "cancelled" && it.status !== "sin_stock",
                    );
                    const canEscalate =
                      (currentStatus === "open" || currentStatus === "partial" || currentStatus === "escalated_to_production") && hasPendingItems;

                    if (!canEscalate) {
                      return (
                        <p className="text-xs text-gray-500">
                          No hay líneas libres para escalar a producción.
                        </p>
                      );
                    }

                    return (
                      <div className="space-y-2">
                        <Button
                          variant="secondary"
                          onClick={() => escalateMutation.mutate({})}
                          disabled={escalateMutation.isPending}
                        >
                          <Factory className="w-4 h-4 mr-1" />
                          Escalar pendientes libres
                        </Button>
                        <p className="text-xs text-gray-500">También puede escalar línea a línea desde la pestaña Bodega.</p>
                      </div>
                    );
                  })()}
                </TabsContent>

                <TabsContent value="warehouse" className="space-y-3 mt-3">
                  <div className="rounded-md border border-blue-200 bg-blue-50 px-3 py-2 text-xs text-blue-900">
                    <strong>Flujo:</strong> Preparar → Marcar preparado → <strong>Despachar</strong> (traslado a bodega destino).
                    Indica cantidad por línea; al despachar no puede superar lo <strong>Preparado</strong>.
                  </div>
                  <div>
                    <Label>Bodega origen (prep/despacho)</Label>
                    <Select value={warehouseFromId} onValueChange={setWarehouseFromId}>
                      <SelectTrigger><SelectValue placeholder="Seleccionar…" /></SelectTrigger>
                      <SelectContent>
                        {fulfillWarehouseOptions.map((w) => (
                          <SelectItem key={String(w.id)} value={String(w.id)}>
                            {w.name}
                            {w.warehouse_type ? ` (${WAREHOUSE_TYPE_LABELS[w.warehouse_type] || w.warehouse_type})` : ""}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                    {!fulfillWarehouseOptions.length ? (
                      <p className="mt-1 text-xs text-amber-700">
                        No hay bodegas con stock disponible para despachar. Revise la pestaña Análisis multi-bodega.
                      </p>
                    ) : null}
                  </div>
                  <div className="space-y-3">
                    {(detailQuery.data.items || []).map((it) => {
                      const free = pendingFreeQty(it);
                      const inPrep = Number(it.quantity_in_preparation || 0);
                      const prepared = Number(it.quantity_prepared || 0);
                      const qty = warehouseQty[it.id] ?? "";
                      const qtyNum = Number(qty);
                      const canDispatch =
                        qtyNum > 0 &&
                        qtyNum <= prepared &&
                        Boolean(warehouseFromId) &&
                        !dispatchMutation.isPending;
                      const canWarehouse = !it.idproduction_request_item && it.status !== "cancelled";
                      return (
                        <div key={it.id} className="rounded border p-3">
                          <div className="flex items-start justify-between gap-2 flex-wrap">
                            <div>
                              <p className="font-medium">{it.product?.name || it.idproduct}</p>
                              <p className="text-xs text-muted-foreground">
                                Libre: {free} · Prep: {inPrep} · Preparado: {prepared} · Despachado: {Number(it.quantity_fulfilled || 0)}
                              </p>
                              <Badge variant="outline" className="mt-1">{ITEM_STATUS_LABELS[it.status] || it.status}</Badge>
                            </div>
                            <Input
                              type="number"
                              min="0"
                              max={prepared > 0 ? prepared : undefined}
                              step="0.0001"
                              className="w-28"
                              placeholder={prepared > 0 ? String(prepared) : "Cant."}
                              value={qty}
                              onChange={(e) => setWarehouseQty((prev) => ({ ...prev, [it.id]: e.target.value }))}
                            />
                          </div>
                          {canWarehouse ? (
                            <div className="flex flex-wrap gap-2 mt-3">
                              <Button size="sm" variant="outline" disabled={!qty || startPrepMutation.isPending} onClick={() => startPrepMutation.mutate({ itemId: it.id, quantity: qty })}>
                                <Pencil className="w-3 h-3 mr-1" /> Preparar
                              </Button>
                              <Button size="sm" variant="outline" disabled={!qty || markPreparedMutation.isPending} onClick={() => markPreparedMutation.mutate({ itemId: it.id, quantity: qty })}>
                                <CheckCircle2 className="w-3 h-3 mr-1" /> Marcar preparado
                              </Button>
                              <Button size="sm" variant="outline" disabled={!canDispatch} onClick={() => dispatchMutation.mutate({ itemId: it.id, quantity: qty })}>
                                <Truck className="w-3 h-3 mr-1" /> Despachar
                              </Button>
                              {prepared > 0 && (!qty || qtyNum > prepared) ? (
                                <Button
                                  type="button"
                                  size="sm"
                                  variant="link"
                                  className="h-8 px-1 text-xs"
                                  onClick={() => setWarehouseQty((prev) => ({ ...prev, [it.id]: String(prepared) }))}
                                >
                                  Usar {prepared.toLocaleString("es-CL")} preparados
                                </Button>
                              ) : null}
                              {it.status === "sin_stock" ? (
                                <Button size="sm" variant="ghost" onClick={() => clearSinStockMutation.mutate(it.id)}>
                                  Reactivar
                                </Button>
                              ) : (
                                <Button size="sm" variant="ghost" onClick={() => openSinStockModal(it.id)}>
                                  <Ban className="w-3 h-3 mr-1" /> Sin stock
                                </Button>
                              )}
                              {free > 0 && it.status !== "sin_stock" ? (
                                <Button size="sm" variant="secondary" onClick={() => escalateMutation.mutate({ itemId: it.id, quantity: qty || free })}>
                                  <Factory className="w-3 h-3 mr-1" /> Escalar
                                </Button>
                              ) : null}
                            </div>
                          ) : (
                            <p className="text-xs text-purple-700 mt-2">Gestionar desde Solicitudes de producción.</p>
                          )}
                        </div>
                      );
                    })}
                  </div>
                </TabsContent>

                <TabsContent value="fulfill" className="space-y-3 mt-3">
                  <div className="rounded-md border border-amber-200 bg-amber-50 px-3 py-2 text-xs text-amber-900">
                    Cumplimiento directo (traslado inmediato). Para flujo preparación → despacho use la pestaña <strong>Bodega</strong>.
                  </div>
                  <div>
                    <Label>Bodega origen para cumplir</Label>
                    <Select
                      value={fulfillFromId}
                      onValueChange={setFulfillFromId}
                    >
                      <SelectTrigger><SelectValue placeholder="Seleccionar…" /></SelectTrigger>
                      <SelectContent>
                        {fulfillWarehouseOptions.map((w) => (
                          <SelectItem key={String(w.id)} value={String(w.id)}>
                            {w.name}
                            {w.warehouse_type ? ` (${WAREHOUSE_TYPE_LABELS[w.warehouse_type] || w.warehouse_type})` : ""}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                    {(() => {
                      const pendingItems = (detailQuery.data.items || []).filter(
                        (it) => pendingFreeQty(it) > 0 && !it.idproduction_request_item && it.status !== "cancelled",
                      );
                      const hasPendingItems = pendingItems.length > 0;
                      const isClosedByStatus =
                        detailQuery.data?.status === "fulfilled" ||
                        detailQuery.data?.status === "cancelled";

                      if (availabilityQuery.isLoading) {
                        return <p className="text-xs text-gray-500 mt-1">Calculando bodegas con stock disponible…</p>;
                      }
                      if (!hasPendingItems || isClosedByStatus) {
                        return (
                          <p className="text-xs text-gray-600 mt-1">
                            Esta solicitud ya no tiene ítems pendientes por cumplir.
                          </p>
                        );
                      }
                      if (!fulfillWarehouseOptions.length) {
                        return (
                          <p className="text-xs text-amber-700 mt-1">
                            No hay bodegas con stock disponible para cumplir los ítems pendientes.
                          </p>
                        );
                      }
                      return null;
                    })()}
                  </div>
                  <div className="rounded-md border bg-white overflow-hidden">
                    <div className="grid grid-cols-12 gap-2 bg-gray-50 text-sm font-medium text-gray-700 px-3 py-2">
                      <div className="col-span-7">Producto</div>
                      <div className="col-span-2 text-right">Pendiente</div>
                      <div className="col-span-3 text-right">Cantidad a cumplir</div>
                    </div>
                    <div className="divide-y">
                      {(detailQuery.data.items || []).filter((it) => pendingFreeQty(it) > 0 && !it.idproduction_request_item && it.status !== "cancelled").map((it) => {
                        const pending = pendingFreeQty(it);
                        return (
                          <div key={it.id} className="grid grid-cols-12 gap-2 items-center px-3 py-2">
                            <div className="col-span-7">
                              <p className="text-sm font-medium">{it.product?.name || it.idproduct}</p>
                              <p className="text-xs text-gray-500">
                                Cumplido: {Number(it.quantity_fulfilled).toLocaleString("es-CL")} / Solicitado: {Number(it.quantity).toLocaleString("es-CL")}
                              </p>
                            </div>
                            <div className="col-span-2 text-right text-sm font-medium">
                              {pending.toLocaleString("es-CL")}
                            </div>
                            <div className="col-span-3 flex justify-end">
                              <Input
                                type="number"
                                min="0"
                                max={pending}
                                step="0.0001"
                                value={fulfillLines[it.idproduct] ?? ""}
                                onChange={(e) => setFulfillLines((prev) => ({ ...prev, [it.idproduct]: e.target.value }))}
                                className="w-28 text-right"
                                placeholder="0"
                              />
                            </div>
                          </div>
                        );
                      })}
                      {(detailQuery.data.items || []).filter((it) => pendingFreeQty(it) > 0 && !it.idproduction_request_item && it.status !== "cancelled").length === 0 ? (
                        <div className="px-3 py-4 text-sm text-gray-600">
                          No hay productos pendientes en esta solicitud.
                        </div>
                      ) : null}
                    </div>
                  </div>
                  <p className="text-xs text-gray-500">
                    Ingresa la cantidad que deseas abastecer ahora. Puedes cumplir de forma parcial y continuar después.
                  </p>
                  <Button
                    onClick={() => fulfillMutation.mutate()}
                    disabled={
                      fulfillMutation.isPending ||
                      !fulfillFromId ||
                      !fulfillWarehouseOptions.length ||
                      (detailQuery.data.items || []).filter((it) => pendingFreeQty(it) > 0 && !it.idproduction_request_item && it.status !== "cancelled").length === 0
                    }
                  >
                    {fulfillMutation.isPending ? <Loader2 className="w-4 h-4 animate-spin mr-1" /> : <ArrowRight className="w-4 h-4 mr-1" />}
                    Confirmar cumplimiento
                  </Button>
                </TabsContent>
              </Tabs>
            ) : (
              <p>Sin datos</p>
            )}
          </ScrollArea>
        </DialogContent>
      </Dialog>

      <Dialog open={sinStockOpen} onOpenChange={setSinStockOpen}>
        <DialogContent className="sm:max-w-[520px] gap-0 p-0 overflow-hidden">
          <div className="border-b border-amber-200/80 bg-gradient-to-r from-amber-50 to-orange-50 px-6 py-5">
            <DialogHeader className="space-y-2 text-left">
              <DialogTitle className="flex items-center gap-2.5 text-amber-950">
                <span className="flex h-9 w-9 items-center justify-center rounded-full bg-amber-100 ring-1 ring-amber-200">
                  <Ban className="h-4 w-4 text-amber-700" />
                </span>
                Informar sin stock
              </DialogTitle>
              <DialogDescription className="text-amber-900/70">
                Comunica al solicitante cuándo podría haber disponibilidad. El aviso se muestra en la pestaña Ítems.
              </DialogDescription>
            </DialogHeader>
          </div>

          <div className="space-y-4 px-6 py-5">
            {sinStockItem ? (
              <div className="flex items-start gap-3 rounded-lg border bg-slate-50/80 px-4 py-3">
                <div className="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-white ring-1 ring-slate-200">
                  <Package className="h-4 w-4 text-slate-600" />
                </div>
                <div className="min-w-0 flex-1">
                  <p className="truncate text-sm font-semibold text-slate-900">
                    {sinStockItem.product?.name || sinStockItem.idproduct}
                  </p>
                  {sinStockItem.product?.sku ? (
                    <p className="text-xs font-mono text-muted-foreground">{sinStockItem.product.sku}</p>
                  ) : null}
                  <p className="mt-1 text-xs text-muted-foreground">
                    Pendiente libre:{" "}
                    <span className="font-medium text-slate-700">
                      {pendingFreeQty(sinStockItem).toLocaleString("es-CL")}
                    </span>
                  </p>
                </div>
                <Badge variant="outline" className="shrink-0 border-amber-300 bg-amber-50 text-amber-800">
                  Sin stock
                </Badge>
              </div>
            ) : null}

            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
              <div className="space-y-1.5">
                <Label htmlFor="sin-stock-date" className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
                  Fecha estimada
                </Label>
                <div className="relative">
                  <CalendarDays className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
                  <Input
                    id="sin-stock-date"
                    type="date"
                    value={sinStockDate}
                    onChange={(e) => setSinStockDate(e.target.value)}
                    className="pl-9"
                  />
                </div>
              </div>
              <div className="space-y-1.5">
                <Label className="text-xs font-medium uppercase tracking-wide text-muted-foreground">Motivo</Label>
                <Select value={sinStockReason} onValueChange={setSinStockReason}>
                  <SelectTrigger><SelectValue /></SelectTrigger>
                  <SelectContent>
                    {Object.entries(STOCK_OUT_REASON_LABELS).map(([value, label]) => (
                      <SelectItem key={value} value={value}>{label}</SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
            </div>

            <div className="space-y-1.5">
              <Label htmlFor="sin-stock-comment" className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
                Observación para el solicitante
              </Label>
              <Textarea
                id="sin-stock-comment"
                value={sinStockComment}
                onChange={(e) => setSinStockComment(e.target.value)}
                placeholder="Ej: Esperando producción semana 28, lote en curso…"
                className="min-h-[88px] resize-none"
              />
            </div>

            {sinStockDate ? (
              <div className="rounded-lg border border-amber-200 bg-amber-50/80 px-4 py-3">
                <p className="mb-1.5 flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wide text-amber-900">
                  <Info className="h-3.5 w-3.5" />
                  Vista previa en Ítems
                </p>
                <p className="text-sm leading-relaxed text-amber-950">{sinStockPreviewText}</p>
              </div>
            ) : (
              <p className="rounded-md border border-dashed px-3 py-2 text-xs text-muted-foreground">
                Indica una fecha estimada para generar la vista previa del mensaje al solicitante.
              </p>
            )}

            {sinStockReason === "sin_produccion" ? (
              <div className="flex gap-2 rounded-lg border border-violet-200 bg-violet-50/60 px-3 py-2.5 text-xs text-violet-900">
                <Factory className="mt-0.5 h-4 w-4 shrink-0 text-violet-600" />
                <span>
                  Con motivo <strong>Sin producción</strong>, al guardar podrás escalar esta línea a producción de emergencia.
                </span>
              </div>
            ) : null}
          </div>

          <DialogFooter className="gap-2 border-t bg-slate-50/80 px-6 py-4 sm:justify-end">
            <Button variant="outline" onClick={() => setSinStockOpen(false)} disabled={markSinStockMutation.isPending}>
              Cancelar
            </Button>
            <Button
              className="bg-amber-600 hover:bg-amber-700"
              onClick={confirmSinStockEscalate}
              disabled={!sinStockDate || markSinStockMutation.isPending}
            >
              {markSinStockMutation.isPending ? <Loader2 className="w-4 h-4 animate-spin mr-1" /> : <Ban className="w-4 h-4 mr-1" />}
              Guardar aviso
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      <AlertDialog
        open={escalateConfirmOpen}
        onOpenChange={(open) => {
          setEscalateConfirmOpen(open);
          if (!open) setEscalateConfirmItemId(null);
        }}
      >
        <AlertDialogContent className="sm:max-w-[480px] gap-0 p-0 overflow-hidden">
          <div className="border-b border-violet-200/80 bg-gradient-to-r from-violet-50 to-indigo-50 px-6 py-5">
            <AlertDialogHeader className="space-y-2 text-left">
              <AlertDialogTitle className="flex items-center gap-2.5 text-violet-950">
                <span className="flex h-9 w-9 items-center justify-center rounded-full bg-violet-100 ring-1 ring-violet-200">
                  <Factory className="h-4 w-4 text-violet-700" />
                </span>
                ¿Escalar a producción?
              </AlertDialogTitle>
              <AlertDialogDescription className="text-violet-900/70">
                La línea ya quedó marcada como sin stock. Puedes crear una solicitud de producción de emergencia ahora o hacerlo más tarde.
              </AlertDialogDescription>
            </AlertDialogHeader>
          </div>

          <div className="space-y-4 px-6 py-5">
            {escalateConfirmItem ? (
              <div className="flex items-start gap-3 rounded-lg border bg-slate-50/80 px-4 py-3">
                <div className="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-white ring-1 ring-slate-200">
                  <Package className="h-4 w-4 text-slate-600" />
                </div>
                <div className="min-w-0">
                  <p className="truncate text-sm font-semibold text-slate-900">{escalateConfirmItem.product?.name}</p>
                  {escalateConfirmItem.product?.sku ? (
                    <p className="text-xs font-mono text-muted-foreground">{escalateConfirmItem.product.sku}</p>
                  ) : null}
                </div>
              </div>
            ) : null}
            <p className="text-sm text-muted-foreground">
              La solicitud de abastecimiento permanece abierta. Solo esta línea pasará al flujo de producción.
            </p>
          </div>

          <AlertDialogFooter className="gap-2 border-t bg-slate-50/80 px-6 py-4 sm:flex-row sm:justify-end">
            <AlertDialogCancel disabled={escalateMutation.isPending}>
              Solo dejar sin stock
            </AlertDialogCancel>
            <AlertDialogAction
              className="bg-violet-600 hover:bg-violet-700"
              disabled={escalateMutation.isPending}
              onClick={(e) => {
                e.preventDefault();
                if (!escalateConfirmItemId) return;
                escalateMutation.mutate(
                  { itemId: escalateConfirmItemId },
                  {
                    onSuccess: () => {
                      setEscalateConfirmOpen(false);
                      setEscalateConfirmItemId(null);
                    },
                  },
                );
              }}
            >
              {escalateMutation.isPending ? (
                <Loader2 className="h-4 w-4 animate-spin mr-1" />
              ) : (
                <Factory className="h-4 w-4 mr-1" />
              )}
              Sí, escalar a producción
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </div>
  );
}