import { Icon } from "@iconify/react/dist/iconify.js";
import {
  Accordion,
  AccordionDetails,
  AccordionSummary,
  Alert,
  Autocomplete,
  Box,
  Button,
  Chip,
  CircularProgress,
  Dialog,
  DialogActions,
  DialogContent,
  DialogTitle,
  Divider,
  FormControl,
  Grid,
  IconButton,
  InputLabel,
  MenuItem,
  Paper,
  Select,
  Stack,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  TextField,
  Tooltip,
  Typography,
} from "@mui/material";
import { useQuery } from "@tanstack/react-query";
import { useEffect, useMemo, useState } from "react";
import { useNavigate } from "react-router-dom";
import { toast } from "sonner";
import { ClienteSearch } from "../organismos/POSAdmin/ClienteSearch";
import { createNotaRemision } from "../../api/nota-remision.service";
import { getDirecciones } from "../../api/clientes.service";
import { getFactura } from "../../api/facturas.service";
import { BuscadorFacturasRemision } from "./BuscadorFacturasRemision";
import { ChoferBrowserModal } from "./ChoferBrowserModal";
import { TransportistaBrowserModal } from "./TransportistaBrowserModal";
import { ProductSearch } from "../organismos/POSAdmin/ProductSearch";
import { getNumeracionesBySucursal } from "../../api/numeraciones.service";
import { getSucursales } from "../../api/sucursales.service";
import { getDepositos } from "../../api/depositos.service";
import { searchChoferes, getChoferes } from "../../api/choferes.service";
import { getVehiculosByTransportista } from "../../api/vehiculos.service";
import { searchTransportistas, getTransportistas } from "../../api/transportistas.service";
import { searchAgentesTransporte, getAgentesTransporte } from "../../api/agentes-transporte.service";
import { useReferencialesQuery } from "../../tanstack/ReferencialesStack";
import { ScreenGuia, FieldHint } from "../_standards";
import { useAuthStore } from "../../store/AuthStore";
import KudePreviewModal from "../organismos/KudePreviewModal";

const TIPOS_DOC_ASOC = [
  { cod: 9999, desc: "Sin documentos asociados" },
  { cod: 1, desc: "Electrónico" },
  { cod: 2, desc: "Impreso" },
];


// Tarjetas limpias sobre un lienzo neutro (se ve bien en claro y oscuro).
const SECTION_SX = {
  p: { xs: 1.75, sm: 2.25 },
  borderRadius: 2.5,
  bgcolor: "background.paper",
  boxShadow: "0 1px 3px rgba(0,0,0,0.06)",
};

function SectionHeader({ icon, label, action }) {
  return (
    <Box sx={{ display: "flex", alignItems: "center", gap: 1.25, mb: 1.75 }}>
      <Box
        sx={{
          display: "flex", alignItems: "center", justifyContent: "center",
          width: 28, height: 28, borderRadius: 2,
          bgcolor: "primary.main", color: "primary.contrastText", flexShrink: 0,
        }}
      >
        <Icon icon={icon} width={17} />
      </Box>
      <Typography variant="subtitle2" fontWeight={700} sx={{ letterSpacing: 0.2 }}>
        {label}
      </Typography>
      {action && <Box sx={{ ml: "auto" }}>{action}</Box>}
    </Box>
  );
}

// ── Preview (modal de revisión antes de registrar) ──
function PvField({ label, value, full = false }) {
  return (
    <Grid size={{ xs: 6, sm: full ? 12 : 4, md: full ? 12 : 3 }}>
      <Typography variant="caption" color="text.secondary" display="block" sx={{ lineHeight: 1.3 }}>
        {label}
      </Typography>
      <Typography variant="body2" fontWeight={600} sx={{ wordBreak: "break-word" }}>
        {value || value === 0 ? value : "—"}
      </Typography>
    </Grid>
  );
}

function PvGroup({ icon, title, children }) {
  return (
    <Paper variant="outlined" sx={{ p: 1.5, mb: 1.5, borderRadius: 2 }}>
      <Box sx={{ display: "flex", alignItems: "center", gap: 0.75, mb: 1 }}>
        <Icon icon={icon} width={16} />
        <Typography variant="subtitle2" color="primary" fontWeight={700}>{title}</Typography>
      </Box>
      <Grid container spacing={1.25}>{children}</Grid>
    </Paper>
  );
}

function useBackendSearch(searchFn, { preloadFn = null } = {}) {
  const [query, setQuery] = useState("");
  const [options, setOptions] = useState([]);
  const [initialOptions, setInitialOptions] = useState([]);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    if (!preloadFn) return;
    let cancelled = false;
    setLoading(true);
    Promise.resolve(preloadFn())
      .then((data) => {
        if (!cancelled) setInitialOptions(Array.isArray(data) ? data : (data?.data || data?.items || []));
      })
      .finally(() => { if (!cancelled) setLoading(false); });
    return () => { cancelled = true; };
  }, []); // eslint-disable-line react-hooks/exhaustive-deps

  useEffect(() => {
    if (query.length < 2) { setOptions([]); return; }
    const t = setTimeout(async () => {
      setLoading(true);
      try {
        const data = await searchFn(query);
        setOptions(Array.isArray(data) ? data : (data?.data || data?.items || []));
      } finally { setLoading(false); }
    }, 300);
    return () => clearTimeout(t);
  }, [query, searchFn]);

  const displayOptions = query.length < 2 ? initialOptions : options;
  return { query, setQuery, options: displayOptions, setOptions, loading };
}

export function NuevaRemisionTemplate() {
  const navigate = useNavigate();
  const user = useAuthStore((s) => s.user);
  const [isSaving, setIsSaving] = useState(false);
  const [confirmOpen, setConfirmOpen] = useState(false);
  const [kudePreview, setKudePreview] = useState({ open: false, remisionId: null });

  // ── Datos del documento ──
  const [sucursal, setSucursal] = useState(null);
  const [puntoExpedicion, setPuntoExpedicion] = useState(null);
  const [numeracion, setNumeracion] = useState(null);
  const [depositos, setDepositos] = useState([]);
  const [depositoId, setDepositoId] = useState("");
  const [fecha, setFecha] = useState(() => {
    const d = new Date();
    const pad = (n) => String(n).padStart(2, "0");
    return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
  });
  const [cliente, setCliente] = useState(null);
  const [selectedDireccion, setSelectedDireccion] = useState(null);

  // ── Transporte ──
  const [transportista, setTransportista] = useState(null);
  const [chofer, setChofer] = useState(null);
  const [vehiculo, setVehiculo] = useState(null);
  const [agente, setAgente] = useState(null);

  // ── Motivo / Tipo ──
  const [motivo, setMotivo] = useState(1);
  const [otroMotivo, setOtroMotivo] = useState("");
  const [nroDespacho, setNroDespacho] = useState("");
  const [tipoResponsable, setTipoResponsable] = useState(1);
  const [condicionNegId, setCondicionNegId] = useState("");

  // ── Tipo transporte ──
  const [tipoTransporteId, setTipoTransporteId] = useState("");
  const [modalidadId, setModalidadId] = useState("");
  const [kilometros, setKilometros] = useState("");

  // ── Período ──
  const [fechaInicio, setFechaInicio] = useState(() => { const d = new Date(); const p = (n) => String(n).padStart(2, "0"); return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())}`; });
  const [fechaFin, setFechaFin] = useState(() => { const d = new Date(); const p = (n) => String(n).padStart(2, "0"); return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())}`; });

  // ── Dirección Salida ──
  const [deptSalidaId, setDeptSalidaId] = useState(null);
  const [distSalidaId, setDistSalidaId] = useState(null);
  const [ciudadSalidaId, setCiudadSalidaId] = useState(null);
  const [dirSalida, setDirSalida] = useState("");
  const [nroCasaSalida, setNroCasaSalida] = useState("");
  const [comp1Salida, setComp1Salida] = useState("");

  // ── Dirección Entrega ──
  const [deptEntregaId, setDeptEntregaId] = useState(null);
  const [distEntregaId, setDistEntregaId] = useState(null);
  const [ciudadEntregaId, setCiudadEntregaId] = useState(null);
  const [dirEntrega, setDirEntrega] = useState("");
  const [nroCasaEntrega, setNroCasaEntrega] = useState("");
  const [comp1Entrega, setComp1Entrega] = useState("");
  const [comp2Entrega, setComp2Entrega] = useState("");
  const [telEntrega, setTelEntrega] = useState("");

  // ── Documento Asociado ──
  const [tipoDocAsoc, setTipoDocAsoc] = useState(9999);
  const [facturasAsociadas, setFacturasAsociadas] = useState([]);
  const [loadingFactura, setLoadingFactura] = useState(false);
  const [fechaFuturaEmision, setFechaFuturaEmision] = useState("");
  const [buscadorFacturasOpen, setBuscadorFacturasOpen] = useState(false);
  const [choferBrowserOpen, setChoferBrowserOpen] = useState(false);
  const [transportistaBrowserOpen, setTransportistaBrowserOpen] = useState(false);

  // Doc impreso
  const [timbradoImpreso, setTimbradoImpreso] = useState("");
  const [estImpreso, setEstImpreso] = useState("");
  const [pexpImpreso, setPexpImpreso] = useState("");
  const [numDocImpreso, setNumDocImpreso] = useState("");
  const [fechaDocImpreso, setFechaDocImpreso] = useState("");

  // ── Items ──
  const [items, setItems] = useState([]);
  const [infoAdicional, setInfoAdicional] = useState("");

  // ── Backend search hooks ──
  const trans = useBackendSearch(searchTransportistas, { preloadFn: () => getTransportistas(1, 5, true) });
  const chof = useBackendSearch(searchChoferes, { preloadFn: () => getChoferes(1, 5, true) });
  const ag = useBackendSearch(searchAgentesTransporte, { preloadFn: () => getAgentesTransporte(1, 5, true) });

  // ── Queries ──
  const { data: referenciales } = useReferencialesQuery();
  const departamentos = referenciales?.geografica?.departamentos || referenciales?.departamentos || [];
  const distritos = referenciales?.geografica?.distritos || referenciales?.distritos || [];
  const ciudades = referenciales?.geografica?.ciudades || referenciales?.ciudades || [];
  const motivosRef = referenciales?.motivo_emision_remision || [];
  const responsablesRef = referenciales?.responsable_emision || [];
  const modalidadesRef = referenciales?.modalidad_transporte || [];
  const tiposTransporteRef = referenciales?.tipo_transporte || [];
  const condicionesNegRef = referenciales?.condicion_negociacion || [];

  const { data: sucursalesData } = useQuery({ queryKey: ["sucursales"], queryFn: getSucursales });
  const sucursales = sucursalesData?.data || sucursalesData?.items || [];

  useEffect(() => {
    if (sucursal || sucursales.length === 0) return;
    const def =
      sucursales.find((s) => s.id === user?.sucursal_id) ||
      sucursales.find((s) => s.es_default) ||
      sucursales[0];
    if (def) setSucursal(def);
  }, [sucursal, sucursales, user?.sucursal_id]);

  // Depósitos de la sucursal (para remisión sin factura: de dónde descontar stock).
  // Default: el marcado como principal (★).
  useEffect(() => {
    if (!sucursal?.id) { setDepositos([]); setDepositoId(""); return; }
    let cancel = false;
    getDepositos(sucursal.id)
      .then((res) => {
        if (cancel) return;
        const list = Array.isArray(res) ? res : (res?.data || res?.items || []);
        setDepositos(list);
        const principal = list.find((d) => d.es_principal) || list[0];
        setDepositoId(principal?.id || "");
      })
      .catch(() => { if (!cancel) { setDepositos([]); setDepositoId(""); } });
    return () => { cancel = true; };
  }, [sucursal?.id]);

  const { data: numeracionesData } = useQuery({
    queryKey: ["numeraciones-remision", sucursal?.id],
    queryFn: () => getNumeracionesBySucursal(sucursal.id, null),
    enabled: !!sucursal?.id,
  });

  const numeraciones = useMemo(() => {
    const all = Array.isArray(numeracionesData) ? numeracionesData : (numeracionesData?.data || []);
    return all.filter((n) => Number(n.tipo_documento?.codigo) === 7);
  }, [numeracionesData]);

  const puntosExpedicion = useMemo(() => {
    const map = new Map();
    numeraciones.forEach((n) => {
      if (n.punto_expedicion && !map.has(n.punto_expedicion.id)) {
        map.set(n.punto_expedicion.id, n.punto_expedicion);
      }
    });
    return Array.from(map.values());
  }, [numeraciones]);

  const numeracionesByPunto = useMemo(() => {
    if (!puntoExpedicion) return [];
    return numeraciones.filter((n) => n.punto_expedicion_id === puntoExpedicion.id);
  }, [numeraciones, puntoExpedicion]);

  const sinPuntoExpedicion = !!sucursal && numeracionesData !== undefined && numeraciones.length === 0;
  const sinNumeracion = !!puntoExpedicion && numeracionesByPunto.length === 0;

  useEffect(() => {
    if (puntosExpedicion.length > 0) setPuntoExpedicion(puntosExpedicion[0]);
    else setPuntoExpedicion(null);
  }, [puntosExpedicion]);

  useEffect(() => {
    if (numeracionesByPunto.length > 0) setNumeracion(numeracionesByPunto[0]);
    else setNumeracion(null);
  }, [numeracionesByPunto]);

  const { data: vehiculosData } = useQuery({
    queryKey: ["vehiculos-transportista", transportista?.id],
    queryFn: () => getVehiculosByTransportista(transportista.id),
    enabled: !!transportista?.id,
  });

  const { data: rawClienteDirecciones } = useQuery({
    queryKey: ["cliente-direcciones", cliente?.id],
    queryFn: () => getDirecciones(cliente.id),
    enabled: !!cliente?.id,
  });
  const clienteDirecciones = useMemo(() => {
    if (!rawClienteDirecciones) return [];
    return Array.isArray(rawClienteDirecciones)
      ? rawClienteDirecciones
      : (rawClienteDirecciones?.data || rawClienteDirecciones?.items || []);
  }, [rawClienteDirecciones]);

  const vehiculosOptions = useMemo(() => {
    return (vehiculosData || []).map((v) => ({
      id: v.id,
      descripcion: [v.marca, v.modelo, v.nro_matricula ? `(${v.nro_matricula})` : ""].filter(Boolean).join(" "),
      _raw: v,
    }));
  }, [vehiculosData]);

  const MOTIVOS = useMemo(() => {
    // Fallback con los códigos oficiales SIFEN (campo E501 iMotEmiNR).
    // Se usa solo si referenciales aún no cargó; la fuente real es la tabla
    // motivo_emision_remision.
    const fallback = [
      { cod: 1, desc: "Traslado por venta" }, { cod: 2, desc: "Traslado por consignación" },
      { cod: 3, desc: "Exportación" }, { cod: 4, desc: "Traslado por compra" },
      { cod: 5, desc: "Importación" }, { cod: 6, desc: "Traslado por devolución" },
      { cod: 7, desc: "Traslado entre locales de la empresa" }, { cod: 8, desc: "Traslado de bienes por transformación" },
      { cod: 9, desc: "Traslado de bienes por reparación" }, { cod: 10, desc: "Traslado por emisor móvil" },
      { cod: 11, desc: "Exhibición o demostración" }, { cod: 12, desc: "Participación en ferias" },
      { cod: 13, desc: "Traslado de encomienda" }, { cod: 14, desc: "Decomiso" },
      { cod: 99, desc: "Otro" },
    ];
    const lista = motivosRef.length > 0
      ? motivosRef.map((m) => ({ cod: m.codigo, desc: m.descripcion, id: m.id }))
      : fallback;
    return [...lista].sort((a, b) => a.cod - b.cod);
  }, [motivosRef]);

  // ── Auto-fill salida desde sucursal ──
  useEffect(() => {
    if (!sucursal) return;
    if (sucursal.departamento_id) setDeptSalidaId(sucursal.departamento_id);
    if (sucursal.distrito_id) setDistSalidaId(sucursal.distrito_id);
    if (sucursal.ciudad_id) setCiudadSalidaId(sucursal.ciudad_id);
    if (sucursal.direccion) setDirSalida(sucursal.direccion);
    if (sucursal.numero_casa) setNroCasaSalida(String(sucursal.numero_casa));
    if (sucursal.complemento_1) setComp1Salida(sucursal.complemento_1);
  }, [sucursal]);

  // ── Teléfono de entrega desde cliente ──
  useEffect(() => {
    if (!cliente) { setSelectedDireccion(null); return; }
    const p = cliente.personas || {};
    if (p.celular || p.telefono) setTelEntrega(p.celular || p.telefono);
  }, [cliente]);

  // ── Auto-seleccionar dirección principal del cliente ──
  useEffect(() => {
    if (!clienteDirecciones.length) { setSelectedDireccion(null); return; }
    const principal = clienteDirecciones.find((d) => d.es_principal) || clienteDirecciones[0];
    setSelectedDireccion(principal);
  }, [clienteDirecciones]);

  // ── Rellenar datos de entrega desde la dirección seleccionada ──
  useEffect(() => {
    if (!selectedDireccion) return;
    if (selectedDireccion.departamento_id) setDeptEntregaId(selectedDireccion.departamento_id);
    if (selectedDireccion.distrito_id) setDistEntregaId(selectedDireccion.distrito_id);
    if (selectedDireccion.ciudad_id) setCiudadEntregaId(selectedDireccion.ciudad_id);
    setDirEntrega(selectedDireccion.direccion || "");
    setNroCasaEntrega(selectedDireccion.nro || "");
    setComp1Entrega(selectedDireccion.referencia || "");
  }, [selectedDireccion]);

  useEffect(() => {
    setItems([]);
    setFacturasAsociadas([]);
  }, [tipoDocAsoc]);

  // ── Producto add (recibe el shape de ProductSearch.onProductSelect) ──
  const handleAddProducto = (item) => {
    const pid = item.id;
    const cantidad = Number(item.cantidad) || 1;
    const existing = items.find((i) => i.producto_id === pid);
    if (existing) {
      setItems((prev) => prev.map((i) =>
        i.producto_id === pid ? { ...i, cantidad: i.cantidad + cantidad } : i
      ));
    } else {
      setItems((prev) => [...prev, {
        producto_id: pid,
        codigo: item.codigo || "",
        descripcion: item.descripcion || item.nombre || "",
        unidad_medida: typeof item.unidad_medida === "string"
          ? item.unidad_medida
          : (item.unidad_medida?.codigo || "UNI"),
        cantidad,
        fromFactura: false,
        maxCantidad: null,
      }]);
    }
  };

  const handleItemChange = (idx, field, value) => {
    setItems(items.map((item, i) => {
      if (i !== idx) return item;
      if (field === "cantidad" && item.maxCantidad && Number(value) > item.maxCantidad) {
        return { ...item, cantidad: item.maxCantidad };
      }
      return { ...item, [field]: value };
    }));
  };

  // ── Importar factura ──
  // Importa una o varias facturas (N), acumulando sus ítems disponibles.
  const importarFacturas = async (seleccion) => {
    const filas = Array.isArray(seleccion) ? seleccion : [seleccion];
    if (filas.length === 0) return;
    setLoadingFactura(true);
    setBuscadorFacturasOpen(false);
    try {
      const yaIds = new Set(facturasAsociadas.map((f) => f._facturaId));
      const nuevasFacturas = [];
      let nuevosItems = [];
      for (const fila of filas) {
        const facturaId = typeof fila === "string" ? fila : fila?.id;
        if (!facturaId || yaIds.has(facturaId)) continue;
        yaIds.add(facturaId);
        const res = await getFactura(facturaId);
        const factura = res?.data || res;
        const filaObj = typeof fila === "object" ? fila : {};
        const facEntry = {
          ...factura,
          dest: factura.dest ?? filaObj.dest,
          dpunexp: factura.dpunexp ?? filaObj.dpunexp,
          dnumdoc: factura.dnumdoc ?? filaObj.dnumdoc,
          _facturaId: factura.id || facturaId,
        };
        const numero = `${facEntry.dest}-${facEntry.dpunexp}-${facEntry.dnumdoc}`;
        const facItems = (factura.factura_det || factura.items || []).map((d) => {
          const cantOriginal = Number(d.dcantproser || d.cantidad || 1);
          const cantAplicadaRemision = Number(d.cantidad_aplicada_remision || 0);
          const cantDisponible = Math.max(0, cantOriginal - cantAplicadaRemision);
          return {
            producto_id: d.producto_id || d.producto?.id,
            descripcion: d.ddesproser || d.descripcion || d.producto?.descripcion || "",
            unidad_medida: d.cunimed || d.unidad_medida?.codigo || "UNI",
            cantidad: cantDisponible,
            fromFactura: true,
            maxCantidad: cantDisponible,
            cantOriginal,
            cantAplicadaRemision,
            factura_det_id: d.id,
            factura_id: facEntry._facturaId,
            factura_numero: numero,
          };
        }).filter((d) => d.maxCantidad > 0);
        nuevasFacturas.push(facEntry);
        nuevosItems = nuevosItems.concat(facItems);
      }
      if (nuevasFacturas.length === 0) {
        toast.warning("No se agregaron facturas nuevas");
        return;
      }
      setFacturasAsociadas((prev) => [...prev, ...nuevasFacturas]);
      setItems((prev) => [...prev, ...nuevosItems]);
      if (nuevosItems.length === 0) {
        toast.warning("Las facturas seleccionadas ya fueron remisionadas completamente");
      } else {
        toast.success(`${nuevasFacturas.length} factura(s) importada(s): ${nuevosItems.length} ítem(s)`);
      }
    } catch { toast.error("Error importando facturas"); }
    finally { setLoadingFactura(false); }
  };

  // Quita una factura vinculada y sus ítems asociados.
  const removerFactura = (facturaId) => {
    setFacturasAsociadas((prev) => prev.filter((f) => f._facturaId !== facturaId));
    setItems((prev) => prev.filter((it) => it.factura_id !== facturaId));
  };

  const getNumeracionLabel = (n) => {
    if (!n) return "";
    const pe = n.punto_expedicion;
    const est = pe?.empresas_sucursales?.punto_establecimiento || pe?.codigo || "000";
    const exp = pe?.punto_expedicion || "000";
    const num = String(n.numero_actual || 0).padStart(7, "0");
    return `${est}-${exp}-${num}`;
  };

  const numeracionLabel = useMemo(() => getNumeracionLabel(numeracion), [numeracion]);

  const getPuntoLabel = (pe) => {
    if (!pe) return "";
    const est = pe.empresas_sucursales?.punto_establecimiento || "000";
    const exp = pe.punto_expedicion || "000";
    return `${est}-${exp}`;
  };

  // ── Geo helpers ──
  const filteredDistSalida = useMemo(() => deptSalidaId ? distritos.filter((d) => d.departamento_id === deptSalidaId) : [], [distritos, deptSalidaId]);
  const filteredCiudSalida = useMemo(() => distSalidaId ? ciudades.filter((c) => c.distrito_id === distSalidaId) : [], [ciudades, distSalidaId]);
  const filteredDistEntrega = useMemo(() => deptEntregaId ? distritos.filter((d) => d.departamento_id === deptEntregaId) : [], [distritos, deptEntregaId]);
  const filteredCiudEntrega = useMemo(() => distEntregaId ? ciudades.filter((c) => c.distrito_id === distEntregaId) : [], [ciudades, distEntregaId]);

  // ── Validación ──
  const validate = () => {
    const errs = [];
    if (!sucursal) errs.push("Seleccione una sucursal");
    if (!numeracion) errs.push("Seleccione una numeración");
    if (!cliente) errs.push("Seleccione un cliente");
    if (!transportista) errs.push("Seleccione un transportista");
    if (!chofer) errs.push("Seleccione un chofer");
    if (!vehiculo) errs.push("Seleccione un vehículo");
    if (!motivo) errs.push("Seleccione el motivo de emisión");
    if (motivo === 99 && (!otroMotivo || otroMotivo.trim().length < 5)) errs.push("Motivo: debe tener al menos 5 caracteres");
    // Nro. de despacho de importación: aplica a Importación (5) y Exportación (3) SIFEN.
    if ((motivo === 5 || motivo === 3) && !nroDespacho) errs.push("Ingrese el Nro. de Despacho de Importación");
    if (!tipoTransporteId) errs.push("Seleccione el tipo de transporte");
    if (!modalidadId) errs.push("Seleccione la modalidad de transporte");
    if (!kilometros || Number(kilometros) <= 0) errs.push("Kilómetros es obligatorio y debe ser mayor a 0");
    if (!deptSalidaId || !distSalidaId || !ciudadSalidaId) errs.push("Complete Departamento/Distrito/Ciudad de salida");
    if (!dirSalida) errs.push("Ingrese la dirección de salida");
    if (!deptEntregaId || !distEntregaId || !ciudadEntregaId) errs.push("Complete Departamento/Distrito/Ciudad de entrega");
    if (!dirEntrega) errs.push("Ingrese la dirección de entrega");
    if (tipoDocAsoc === 9999) {
      if (!fechaFuturaEmision) errs.push("La fecha futura de emisión de factura es obligatoria");
      else {
        const fEmision = new Date(fecha);
        const fFutura = new Date(fechaFuturaEmision);
        if (fEmision.getMonth() !== fFutura.getMonth() || fEmision.getFullYear() !== fFutura.getFullYear()) {
          errs.push("La fecha futura de emisión debe ser dentro del mismo mes que la fecha de emisión");
        }
      }
    }
    if (tipoDocAsoc === 2) {
      if (!timbradoImpreso || timbradoImpreso.length !== 8) errs.push("Timbrado debe tener 8 dígitos");
      if (!estImpreso || !pexpImpreso || !numDocImpreso) errs.push("Complete los datos del documento impreso");
      if (!fechaDocImpreso) errs.push("Ingrese la fecha del documento impreso");
    }
    if (items.length === 0) errs.push("Agregue al menos un ítem");
    return errs;
  };

  const handleSubmit = () => {
    const errs = validate();
    if (errs.length > 0) {
      errs.forEach((e) => toast.error(e));
      return;
    }
    setConfirmOpen(true);
  };

  const handleConfirmSave = async () => {
    setConfirmOpen(false);
    setIsSaving(true);
    try {
      const tipoTransObj = tiposTransporteRef.find((t) => t.id === tipoTransporteId);
      const modalidadObj = modalidadesRef.find((m) => m.id === modalidadId);
      const motivoObj = motivosRef.find((m) => m.codigo === motivo);
      const responsableObj = responsablesRef.find((r) => r.codigo === tipoResponsable);
      const condicionObj = condicionesNegRef.find((c) => c.id === condicionNegId);
      const payload = {
        cabecera: {
          cliente_id: cliente.id,
          numeracion_id: numeracion.id,
          transportista_id: transportista.id,
          chofer_id: chofer.id,
          vehiculo_id: vehiculo.id,
          agente_id: agente?.id || undefined,
          // Depósito para descuento de stock (solo aplica a remisión sin factura).
          deposito_id: tipoDocAsoc !== 1 && depositoId ? depositoId : undefined,
          // Enviar la hora local tal cual (wall-clock) sin convertir a UTC.
          // El backend la persiste con toPrismaDate (interpreta como Z) para
          // conservar los mismos dígitos, igual que factura/NC.
          dfeemide: (fecha.length === 16 ? `${fecha}:00` : fecha).replace("T", " "),
          fecha_inicio_traslado: fechaInicio,
          fecha_fin_traslado: fechaFin,
          motivo_emision: motivo,
          motivo_emision_id: motivoObj?.id || undefined,
          otro_motivo: motivo === 99 ? otroMotivo : undefined,
          nro_despacho_importacion: (motivo === 5 || motivo === 3) ? nroDespacho : undefined,
          tipo_responsable: tipoResponsable,
          responsable_emision_id: responsableObj?.id || undefined,
          tipo_transporte: tipoTransObj?.codigo || 1,
          tipo_transporte_id: tipoTransporteId || undefined,
          modalidad_transporte: modalidadObj?.codigo || 1,
          modalidad_transporte_id: modalidadId || undefined,
          condicion_negociacion: condicionObj?.descripcion || undefined,
          condicion_negociacion_id: condicionNegId || undefined,
          kilometros: Number(kilometros),
          direccion_salida: dirSalida,
          nro_casa_salida: nroCasaSalida ? Number(nroCasaSalida) : undefined,
          complemento1_salida: comp1Salida || undefined,
          departamento_salida_id: deptSalidaId,
          distrito_salida_id: distSalidaId,
          ciudad_salida_id: ciudadSalidaId,
          direccion_entrega: dirEntrega,
          nro_casa_entrega: nroCasaEntrega ? Number(nroCasaEntrega) : undefined,
          complemento1_entrega: comp1Entrega || undefined,
          complemento2_entrega: comp2Entrega || undefined,
          telefono_entrega: telEntrega || undefined,
          departamento_entrega_id: deptEntregaId,
          distrito_entrega_id: distEntregaId,
          ciudad_entrega_id: ciudadEntregaId,
          fecha_futura_emision: tipoDocAsoc === 9999 && fechaFuturaEmision ? `${fechaFuturaEmision}T00:00:00` : undefined,
          // Documento asociado impreso: nombres SIFEN esperados por el DTO.
          // itipdocaso=2 (impreso); itipodocaso=1 (el impreso es una Factura).
          documento_asociado: tipoDocAsoc === 2 ? {
            itipdocaso: "2",
            dntimdi: timbradoImpreso,
            destdocaso: estImpreso.padStart(3, "0"),
            dpexpdocaso: pexpImpreso.padStart(3, "0"),
            dnumdocaso: numDocImpreso.padStart(7, "0"),
            itipodocaso: "1",
            dfecemidi: fechaDocImpreso,
          } : undefined,
          info_adicional: infoAdicional || undefined,
        },
        items: items.map((item) => ({
          producto_id: item.producto_id,
          descripcion: item.descripcion,
          unidad_medida: item.unidad_medida,
          cantidad: Number(item.cantidad),
          aplicaciones: item.factura_det_id ? [{ factura_det_id: item.factura_det_id, cantidad: Number(item.cantidad) }] : undefined,
        })),
        facturas_ids: facturasAsociadas.length > 0 ? facturasAsociadas.map((f) => f._facturaId || f.id).filter(Boolean) : undefined,
      };
      const response = await createNotaRemision(payload);
      toast.success("Nota de remisión creada exitosamente");
      const remisionCreada = response?.data || response;
      const remisionId = remisionCreada?.id;
      if (remisionId) {
        const numero = remisionCreada?.dnumdoc
          ? `${remisionCreada.dest}-${remisionCreada.dpunexp}-${remisionCreada.dnumdoc}`
          : null;
        setKudePreview({ open: true, remisionId, numero });
      } else {
        setTimeout(() => navigate("/ventas?tab=remisiones"), 1000);
      }
    } catch (err) {
      const data = err.response?.data;
      // El backend puede devolver una lista de errores de validación (por entidad).
      if (Array.isArray(data?.errores) && data.errores.length > 0) {
        toast.error(data.message || "Corrija los datos de la remisión");
        data.errores.forEach((e) => toast.error(e));
      } else {
        toast.error(data?.message || "Error al guardar la remisión");
      }
    } finally {
      setIsSaving(false);
    }
  };

  const showProductSearch = tipoDocAsoc === 9999 || tipoDocAsoc === 2 || tipoDocAsoc === 3;

  // ── Geo option helpers ──
  const geoOpts = (list) => list;
  const geoLabel = (o) => o?.descripcion || "";
  const geoEq = (o, v) => o.id === v?.id;
  const geoVal = (list, id) => list.find((x) => x.id === id) || null;
  const geoName = (list, id) => list.find((x) => x.id === id)?.descripcion || "—";
  const fmtFechaCorta = (v) => {
    if (!v) return "—";
    const s = String(v).split("T")[0];
    const [y, m, d] = s.split("-");
    return y ? `${d}/${m}/${y}` : v;
  };
  const clienteDocPreview = cliente?.personas
    ? (cliente.personas.naturaleza_receptor?.codigo === 1
        ? `${cliente.personas.ruc || ""}${cliente.personas.dv != null ? `-${cliente.personas.dv}` : ""}`
        : cliente.personas.nro_documento || "—")
    : "—";

  return (
    <Box sx={{ display: "flex", flexDirection: "column", height: "100vh", bgcolor: "background.default", overflow: "hidden" }}>

      {/* ── Header ── */}
      <Box sx={{ display: "flex", alignItems: "center", gap: 1.5, px: 2.5, py: 1.5, borderBottom: 1, borderColor: "divider", bgcolor: "background.paper", flexShrink: 0 }}>
        <Tooltip title="Volver">
          <IconButton onClick={() => navigate("/ventas?tab=remisiones")} size="small">
            <Icon icon="mdi:arrow-left" />
          </IconButton>
        </Tooltip>
        <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
          <Icon icon="mdi:truck-delivery-outline" width={22} />
          <Typography variant="h6" fontWeight={700}>Nueva Nota de Remisión</Typography>
        </Box>
        <Box sx={{ flex: 1 }} />
        <Button
          variant="contained"
          startIcon={isSaving ? <CircularProgress size={16} color="inherit" /> : <Icon icon="mdi:content-save" />}
          onClick={handleSubmit}
          disabled={isSaving}
        >
          Guardar Remisión
        </Button>
      </Box>

      {/* ── Content ── */}
      <Box sx={{ flex: 1, overflowY: "auto", p: { xs: 1.5, sm: 2.5 }, display: "flex", flexDirection: "column", gap: { xs: 1.5, sm: 2 }, bgcolor: (t) => (t.palette.mode === "light" ? "#eef1f5" : "background.default") }}>

        <ScreenGuia
          titulo="Nueva Nota de Remisión"
          moduloPadre="Ventas"
          intro="Emite una nota de remisión electrónica (tipo 7) para documentar el traslado de mercaderías."
          pasos={[
            "Seleccioná la sucursal y el punto de expedición.",
            "Buscá y seleccioná el cliente destinatario.",
            "Completá los datos de transporte: transportista, chofer y vehículo.",
            "Asociá un documento (factura electrónica, impresa o sin documento) y completá las fechas de traslado.",
            "Las direcciones de salida y entrega se autocompletan desde la sucursal y el cliente.",
            "Agregá los productos a transportar.",
            "Guardá la remisión.",
          ]}
        />


        {/* ── Datos del Documento ── */}
        <Paper variant="outlined" sx={SECTION_SX}>
          <SectionHeader icon="mdi:file-document-outline" label="DATOS DEL DOCUMENTO" />
          <Grid container spacing={2}>
            <Grid size={{ xs: 12, sm: 6, md: 3 }}>
              <FormControl fullWidth size="small">
                <InputLabel>Sucursal *</InputLabel>
                <Select
                  label="Sucursal *"
                  value={sucursal?.id || ""}
                  onChange={(e) => { setSucursal(sucursales.find((x) => x.id === e.target.value) || null); setPuntoExpedicion(null); setNumeracion(null); }}
                >
                  <MenuItem value="">Seleccionar...</MenuItem>
                  {sucursales.map((s) => (
                    <MenuItem key={s.id} value={s.id}>{s.nombre_sucursal || s.nombre || s.punto_establecimiento}</MenuItem>
                  ))}
                </Select>
              </FormControl>
            </Grid>
            <Grid size={{ xs: 12, sm: 6, md: 3 }}>
              <FormControl fullWidth size="small" disabled={!sucursal || puntosExpedicion.length === 0}>
                <InputLabel>Punto Expedición *</InputLabel>
                <Select
                  label="Punto Expedición *"
                  value={puntoExpedicion?.id || ""}
                  onChange={(e) => { setPuntoExpedicion(puntosExpedicion.find((x) => x.id === e.target.value) || null); setNumeracion(null); }}
                >
                  <MenuItem value="">{!sucursal ? "Seleccione sucursal" : puntosExpedicion.length === 0 ? "Sin numeraciones" : "Seleccionar..."}</MenuItem>
                  {puntosExpedicion.map((pe) => (
                    <MenuItem key={pe.id} value={pe.id}>{getPuntoLabel(pe)}</MenuItem>
                  ))}
                </Select>
              </FormControl>
            </Grid>
            <Grid size={{ xs: 12, sm: 6, md: 3 }}>
              <TextField
                fullWidth size="small" label="Numeración *"
                value={numeracionLabel} readOnly
                InputProps={{ readOnly: true }}
                placeholder="000-000-0000000"
              />
            </Grid>
            <Grid size={{ xs: 12, sm: 6, md: 3 }}>
              <TextField
                fullWidth size="small" label="Fecha y hora *"
                type="datetime-local" value={fecha}
                onChange={(e) => setFecha(e.target.value)}
                InputLabelProps={{ shrink: true }}
              />
            </Grid>
            <Grid size={{ xs: 12, md: 6 }}>
              <ClienteSearch
                value={cliente}
                onChange={(c) => { setCliente(c); if (!c) { setFacturasAsociadas([]); setItems([]); } }}
              />
            </Grid>
            <Grid size={{ xs: 12, sm: 6, md: 3 }}>
              <FormControl fullWidth size="small">
                <InputLabel>Condición Negociación</InputLabel>
                <Select label="Condición Negociación" value={condicionNegId} onChange={(e) => setCondicionNegId(e.target.value)}>
                  <MenuItem value="">Sin condición</MenuItem>
                  {condicionesNegRef.map((c) => <MenuItem key={c.id} value={c.id}>{c.codigo} - {c.descripcion}</MenuItem>)}
                </Select>
              </FormControl>
            </Grid>
            <Grid size={{ xs: 12, sm: 6, md: 3 }}>
              <FormControl fullWidth size="small">
                <InputLabel>Tipo Responsable</InputLabel>
                <Select label="Tipo Responsable" value={tipoResponsable} onChange={(e) => setTipoResponsable(Number(e.target.value))}>
                  {(responsablesRef.length > 0 ? responsablesRef : [{ codigo: 1, descripcion: "Emisor de la factura" }, { codigo: 2, descripcion: "Receptor de la factura" }]).map((r) => (
                    <MenuItem key={r.codigo || r.id} value={r.codigo}>{r.descripcion}</MenuItem>
                  ))}
                </Select>
              </FormControl>
            </Grid>
            {/* Depósito: solo cuando la remisión moverá stock (sin factura electrónica) */}
            {tipoDocAsoc !== 1 && (
              <Grid size={{ xs: 12, sm: 6, md: 3 }}>
                <FormControl fullWidth size="small">
                  <InputLabel>Depósito (descuenta stock)</InputLabel>
                  <Select
                    label="Depósito (descuenta stock)"
                    value={depositoId}
                    onChange={(e) => setDepositoId(e.target.value)}
                  >
                    {depositos.length === 0 ? (
                      <MenuItem value="" disabled>Sin depósitos</MenuItem>
                    ) : (
                      depositos.map((d) => (
                        <MenuItem key={d.id} value={d.id}>{d.descripcion} {d.es_principal ? "★" : ""}</MenuItem>
                      ))
                    )}
                  </Select>
                </FormControl>
              </Grid>
            )}
          </Grid>

          {sinPuntoExpedicion && (
            <Alert severity="error" sx={{ mt: 1.5 }} icon={<Icon icon="mdi:alert-circle-outline" />}>
              La sucursal seleccionada no tiene <strong>numeraciones tipo 7 (Nota de Remisión)</strong> configuradas.
              Configurá una numeración en <strong>Administración → Numeraciones</strong> antes de continuar.
            </Alert>
          )}
          {!sinPuntoExpedicion && sinNumeracion && (
            <Alert severity="error" sx={{ mt: 1.5 }} icon={<Icon icon="mdi:alert-circle-outline" />}>
              El punto de expedición seleccionado no tiene <strong>numeraciones activas</strong> para remisiones.
              Verificá la configuración en <strong>Administración → Numeraciones</strong>.
            </Alert>
          )}
          {/* ── Documento Asociado (dentro de la misma tarjeta para ahorrar espacio) ── */}
          <Divider sx={{ my: 2.25 }} />
          <SectionHeader icon="mdi:link-variant" label="DOCUMENTO ASOCIADO" />
          <Grid container spacing={2}>
            <Grid size={{ xs: 12, sm: 6, md: 3 }}>
              <FormControl fullWidth size="small">
                <InputLabel>Tipo documento asociado</InputLabel>
                <Select label="Tipo documento asociado" value={tipoDocAsoc} onChange={(e) => setTipoDocAsoc(Number(e.target.value))}>
                  {TIPOS_DOC_ASOC.map((t) => <MenuItem key={t.cod} value={t.cod}>{t.desc}</MenuItem>)}
                </Select>
              </FormControl>
            </Grid>

            {tipoDocAsoc === 1 && (
              <Grid size={{ xs: 12, md: 8 }}>
                {!cliente ? (
                  <Alert severity="info" icon={<Icon icon="mdi:information-outline" />}>
                    Seleccioná primero el cliente para buscar su factura electrónica.
                  </Alert>
                ) : (
                  <Box sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
                    {facturasAsociadas.length > 0 && (
                      <Box sx={{ display: "flex", gap: 1, flexWrap: "wrap" }}>
                        {facturasAsociadas.map((f) => (
                          <Chip
                            key={f._facturaId}
                            icon={<Icon icon="mdi:file-check-outline" width={14} />}
                            label={`${f.dest}-${f.dpunexp}-${f.dnumdoc}`}
                            onDelete={() => removerFactura(f._facturaId)}
                            variant="outlined"
                            color="primary"
                          />
                        ))}
                      </Box>
                    )}
                    <Button
                      variant="outlined"
                      startIcon={<Icon icon="mdi:magnify" />}
                      endIcon={loadingFactura ? <CircularProgress size={14} /> : <Icon icon="mdi:arrow-right" />}
                      onClick={() => setBuscadorFacturasOpen(true)}
                      disabled={loadingFactura}
                      sx={{ alignSelf: "flex-start", textTransform: "none", py: 1 }}
                    >
                      {loadingFactura
                        ? "Importando..."
                        : facturasAsociadas.length > 0
                          ? "Agregar otra factura..."
                          : "Buscar factura electrónica..."}
                    </Button>
                  </Box>
                )}
              </Grid>
            )}

            {tipoDocAsoc === 9999 && (() => {
              const dEmision = fecha ? new Date(fecha) : new Date();
              const minFecha = `${dEmision.getFullYear()}-${String(dEmision.getMonth() + 1).padStart(2, "0")}-01`;
              const maxFecha = new Date(dEmision.getFullYear(), dEmision.getMonth() + 1, 0).toISOString().slice(0, 10);
              return (
                <Grid size={{ xs: 12, sm: 6, md: 3 }}>
                  <TextField
                    fullWidth size="small" label="Fecha futura emisión factura *"
                    type="date" value={fechaFuturaEmision}
                    onChange={(e) => setFechaFuturaEmision(e.target.value)}
                    inputProps={{ min: minFecha, max: maxFecha }}
                    InputLabelProps={{ shrink: true }}
                    helperText="Fecha en que se emitirá la factura. Debe ser dentro del mismo mes."
                  />
                </Grid>
              );
            })()}
          </Grid>

          {tipoDocAsoc === 2 && (
            <Grid container spacing={2} sx={{ mt: 0.5 }}>
              <Grid size={{ xs: 6, sm: 3, md: 3 }}>
                <TextField fullWidth size="small" label="Timbrado *" value={timbradoImpreso}
                  onChange={(e) => setTimbradoImpreso(e.target.value.replace(/\D/g, ""))} inputProps={{ maxLength: 8 }} placeholder="12345678" />
              </Grid>
              <Grid size={{ xs: 3, sm: 2, md: 2 }}>
                <TextField fullWidth size="small" label="Est. *" value={estImpreso}
                  onChange={(e) => setEstImpreso(e.target.value.replace(/\D/g, ""))}
                  onBlur={(e) => e.target.value && setEstImpreso(e.target.value.padStart(3, "0"))}
                  inputProps={{ maxLength: 3 }} placeholder="001" />
              </Grid>
              <Grid size={{ xs: 3, sm: 2, md: 2 }}>
                <TextField fullWidth size="small" label="Pto. Exp. *" value={pexpImpreso}
                  onChange={(e) => setPexpImpreso(e.target.value.replace(/\D/g, ""))}
                  onBlur={(e) => e.target.value && setPexpImpreso(e.target.value.padStart(3, "0"))}
                  inputProps={{ maxLength: 3 }} placeholder="001" />
              </Grid>
              <Grid size={{ xs: 6, sm: 2, md: 2 }}>
                <TextField fullWidth size="small" label="Nro. Doc. *" value={numDocImpreso}
                  onChange={(e) => setNumDocImpreso(e.target.value.replace(/\D/g, ""))}
                  onBlur={(e) => e.target.value && setNumDocImpreso(e.target.value.padStart(7, "0"))}
                  inputProps={{ maxLength: 7 }} placeholder="0000001" />
              </Grid>
              <Grid size={{ xs: 6, sm: 3, md: 3 }}>
                <TextField fullWidth size="small" label="Fecha doc. *" type="date" value={fechaDocImpreso}
                  onChange={(e) => setFechaDocImpreso(e.target.value)} InputLabelProps={{ shrink: true }} />
              </Grid>
            </Grid>
          )}
        </Paper>

        {/* ── Datos de Transporte ── */}
        <Paper variant="outlined" sx={SECTION_SX}>
          <SectionHeader icon="mdi:truck-outline" label="DATOS DE TRANSPORTE" />
          <Grid container spacing={2}>
            <Grid size={{ xs: 12, sm: 6, md: 3 }}>
              <Box sx={{ display: "flex", gap: 0.5, alignItems: "flex-start" }}>
                <Autocomplete
                  sx={{ flex: 1 }}
                  size="small"
                  options={trans.options}
                  loading={trans.loading}
                  value={transportista}
                  onChange={(_, v) => { setTransportista(v); setVehiculo(null); setChofer(null); trans.setOptions([]); }}
                  onInputChange={(_, v, reason) => { if (reason === "input") trans.setQuery(v); }}
                  getOptionLabel={(o) => o?.personas?.razon_social || ""}
                  isOptionEqualToValue={(o, v) => o.id === v?.id}
                  filterOptions={(x) => x}
                  noOptionsText={trans.loading ? "Cargando…" : trans.query.length < 2 ? "Sin transportistas" : "Sin resultados"}
                  renderInput={(params) => (
                    <TextField {...params} label="Transportista *"
                      InputProps={{ ...params.InputProps, endAdornment: (<>{trans.loading && <CircularProgress size={14} />}{params.InputProps.endAdornment}</>) }}
                    />
                  )}
                />
                <Tooltip title="Explorar todos">
                  <IconButton size="small" onClick={() => setTransportistaBrowserOpen(true)} sx={{ mt: 0.5 }}>
                    <Icon icon="mdi:list-box-outline" width={18} />
                  </IconButton>
                </Tooltip>
              </Box>
            </Grid>

            <Grid size={{ xs: 12, sm: 6, md: 3 }}>
              <Box sx={{ display: "flex", gap: 0.5, alignItems: "flex-start" }}>
                <Autocomplete
                  sx={{ flex: 1 }}
                  size="small"
                  options={chof.options}
                  loading={chof.loading}
                  value={chofer}
                  onChange={(_, v) => { setChofer(v); chof.setOptions([]); }}
                  onInputChange={(_, v, reason) => { if (reason === "input") chof.setQuery(v); }}
                  getOptionLabel={(o) => o?.personas?.razon_social || ""}
                  isOptionEqualToValue={(o, v) => o.id === v?.id}
                  filterOptions={(x) => x}
                  noOptionsText={chof.loading ? "Cargando…" : chof.query.length < 2 ? "Sin choferes" : "Sin resultados"}
                  renderOption={(props, o) => (
                    <li {...props} key={o.id}>
                      <Box>
                        <Typography variant="body2" fontWeight={600}>{o.personas?.razon_social}</Typography>
                        {o.personas?.nro_documento && <Typography variant="caption" color="text.secondary">{o.personas.nro_documento}</Typography>}
                      </Box>
                    </li>
                  )}
                  renderInput={(params) => (
                    <TextField {...params} label="Chofer *"
                      InputProps={{ ...params.InputProps, endAdornment: (<>{chof.loading && <CircularProgress size={14} />}{params.InputProps.endAdornment}</>) }}
                    />
                  )}
                />
                <Tooltip title="Explorar todos">
                  <IconButton size="small" onClick={() => setChoferBrowserOpen(true)} sx={{ mt: 0.5 }}>
                    <Icon icon="mdi:list-box-outline" width={18} />
                  </IconButton>
                </Tooltip>
              </Box>
            </Grid>

            <Grid size={{ xs: 12, sm: 6, md: 3 }}>
              <Autocomplete
                size="small"
                options={vehiculosOptions}
                value={vehiculosOptions.find((v) => v.id === vehiculo?.id) || null}
                onChange={(_, v) => {
                  setVehiculo(v?._raw || null);
                  if (v?._raw?.tipo_transporte_id) setTipoTransporteId(v._raw.tipo_transporte_id);
                  if (v?._raw?.modalidad_transporte_id) setModalidadId(v._raw.modalidad_transporte_id);
                }}
                getOptionLabel={(o) => o?.descripcion || ""}
                isOptionEqualToValue={(o, v) => o.id === v?.id}
                disabled={!transportista}
                noOptionsText={!transportista ? "Seleccione transportista primero" : "Sin vehículos"}
                renderInput={(params) => <TextField {...params} label="Vehículo *" />}
              />
            </Grid>

            <Grid size={{ xs: 12, sm: 6, md: 3 }}>
              <Autocomplete
                size="small"
                options={ag.options}
                loading={ag.loading}
                value={agente}
                onChange={(_, v) => { setAgente(v); ag.setOptions([]); }}
                onInputChange={(_, v, reason) => { if (reason === "input") ag.setQuery(v); }}
                getOptionLabel={(o) => o?.personas?.razon_social || ""}
                isOptionEqualToValue={(o, v) => o.id === v?.id}
                filterOptions={(x) => x}
                noOptionsText={ag.loading ? "Cargando…" : ag.query.length < 2 ? "Sin agentes" : "Sin resultados"}
                renderInput={(params) => (
                  <TextField {...params} label="Agente de transporte (opcional)"
                    InputProps={{ ...params.InputProps, endAdornment: (<>{ag.loading && <CircularProgress size={14} />}{params.InputProps.endAdornment}</>) }}
                  />
                )}
              />
            </Grid>

            <Grid size={{ xs: 12, sm: 6, md: 3 }}>
              <Autocomplete
                fullWidth size="small"
                options={MOTIVOS}
                value={MOTIVOS.find((m) => m.cod === motivo) || null}
                onChange={(_, val) => setMotivo(val ? val.cod : "")}
                getOptionLabel={(o) => `${o.cod} - ${o.desc}`}
                isOptionEqualToValue={(o, v) => o.cod === v.cod}
                renderInput={(params) => <TextField {...params} label="Motivo *" placeholder="Buscar motivo..." />}
              />
            </Grid>

            {motivo === 99 && (
              <Grid size={{ xs: 12, sm: 6, md: 3 }}>
                <TextField
                  fullWidth size="small" label="Descripción del motivo * (mín. 5 caracteres)"
                  value={otroMotivo} onChange={(e) => setOtroMotivo(e.target.value)}
                  inputProps={{ maxLength: 60 }} placeholder="Especifique el motivo..."
                />
              </Grid>
            )}

            {(motivo === 5 || motivo === 3) && (
              <Grid size={{ xs: 12, sm: 6, md: 3 }}>
                <TextField
                  fullWidth size="small" label="Nro. Despacho Importación *"
                  value={nroDespacho} onChange={(e) => setNroDespacho(e.target.value)}
                  inputProps={{ maxLength: 16 }} placeholder="Nro. despacho..."
                />
              </Grid>
            )}

            <Grid size={{ xs: 12, sm: 6, md: 3 }}>
              <FormControl fullWidth size="small">
                <InputLabel>Tipo transporte *</InputLabel>
                <Select label="Tipo transporte *" value={tipoTransporteId} onChange={(e) => setTipoTransporteId(e.target.value)}>
                  <MenuItem value="">Seleccionar...</MenuItem>
                  {tiposTransporteRef.map((t) => <MenuItem key={t.id} value={t.id}>{t.codigo} - {t.descripcion}</MenuItem>)}
                </Select>
              </FormControl>
            </Grid>

            <Grid size={{ xs: 12, sm: 6, md: 3 }}>
              <FormControl fullWidth size="small">
                <InputLabel>Modalidad *</InputLabel>
                <Select label="Modalidad *" value={modalidadId} onChange={(e) => setModalidadId(e.target.value)}>
                  <MenuItem value="">Seleccionar...</MenuItem>
                  {modalidadesRef.map((m) => <MenuItem key={m.id} value={m.id}>{m.codigo} - {m.descripcion}</MenuItem>)}
                </Select>
              </FormControl>
            </Grid>

            <Grid size={{ xs: 6, sm: 3, md: 2 }}>
              <FieldHint
                fullWidth label="Kilómetros *" type="number"
                value={kilometros} onChange={(e) => setKilometros(e.target.value)}
                inputProps={{ min: 1, max: 99999 }}
                placeholder="150"
                hint="Distancia total del recorrido. Ej: 45 km"
              />
            </Grid>
          </Grid>
        </Paper>

        {/* ── Salida + Entrega ── */}
        <Grid container spacing={2}>
          {/* Salida */}
          <Grid size={{ xs: 12, md: 6 }}>
            <Paper variant="outlined" sx={{ ...SECTION_SX, height: "100%" }}>
              <SectionHeader icon="mdi:map-marker-outline" label="DATOS DE SALIDA" />
              <Grid container spacing={2}>
                <Grid size={{ xs: 6 }}>
                  <TextField fullWidth size="small" label="Fecha inicio *" type="date" value={fechaInicio}
                    onChange={(e) => setFechaInicio(e.target.value)} InputLabelProps={{ shrink: true }} />
                </Grid>
                <Grid size={{ xs: 6 }}>
                  <TextField fullWidth size="small" label="Fecha fin *" type="date" value={fechaFin}
                    onChange={(e) => setFechaFin(e.target.value)} InputLabelProps={{ shrink: true }} />
                </Grid>
                <Grid size={{ xs: 12 }}>
                  <Autocomplete size="small" options={geoOpts(departamentos)} value={geoVal(departamentos, deptSalidaId)}
                    onChange={(_, v) => { setDeptSalidaId(v?.id || null); setDistSalidaId(null); setCiudadSalidaId(null); }}
                    getOptionLabel={geoLabel} isOptionEqualToValue={geoEq}
                    renderInput={(params) => <TextField {...params} label="Departamento *" />}
                  />
                </Grid>
                <Grid size={{ xs: 6 }}>
                  <Autocomplete size="small" options={geoOpts(filteredDistSalida)} value={geoVal(filteredDistSalida, distSalidaId)}
                    onChange={(_, v) => { setDistSalidaId(v?.id || null); setCiudadSalidaId(null); }}
                    getOptionLabel={geoLabel} isOptionEqualToValue={geoEq}
                    disabled={!deptSalidaId}
                    renderInput={(params) => <TextField {...params} label="Distrito *" />}
                  />
                </Grid>
                <Grid size={{ xs: 6 }}>
                  <Autocomplete size="small" options={geoOpts(filteredCiudSalida)} value={geoVal(filteredCiudSalida, ciudadSalidaId)}
                    onChange={(_, v) => setCiudadSalidaId(v?.id || null)}
                    getOptionLabel={geoLabel} isOptionEqualToValue={geoEq}
                    disabled={!distSalidaId}
                    renderInput={(params) => <TextField {...params} label="Ciudad *" />}
                  />
                </Grid>
                <Grid size={{ xs: 12, sm: 7 }}>
                  <TextField fullWidth size="small" label="Dirección salida *" value={dirSalida}
                    onChange={(e) => setDirSalida(e.target.value)} inputProps={{ maxLength: 255 }} placeholder="Av. Ejemplo 1234" />
                </Grid>
                <Grid size={{ xs: 4, sm: 2 }}>
                  <TextField fullWidth size="small" label="Nro. Casa" type="number" value={nroCasaSalida}
                    onChange={(e) => setNroCasaSalida(e.target.value)} inputProps={{ min: 0 }} />
                </Grid>
                <Grid size={{ xs: 8, sm: 3 }}>
                  <TextField fullWidth size="small" label="Complemento" value={comp1Salida}
                    onChange={(e) => setComp1Salida(e.target.value)} inputProps={{ maxLength: 50 }} placeholder="Piso, depto..." />
                </Grid>
              </Grid>
            </Paper>
          </Grid>

          {/* Entrega */}
          <Grid size={{ xs: 12, md: 6 }}>
            <Paper variant="outlined" sx={{ ...SECTION_SX, height: "100%" }}>
              <SectionHeader icon="mdi:map-marker-check-outline" label="DATOS DE ENTREGA" />
              <Grid container spacing={2}>

                {/* Selector de dirección del cliente */}
                {!cliente && (
                  <Grid size={{ xs: 12 }}>
                    <Alert severity="info" icon={<Icon icon="mdi:information-outline" />}>
                      Seleccioná primero el cliente para tomar su dirección registrada. Igual podés cargar la dirección de entrega manualmente.
                    </Alert>
                  </Grid>
                )}
                {cliente && clienteDirecciones.length > 0 && (
                  <Grid size={{ xs: 12 }}>
                    <FormControl fullWidth size="small">
                      <InputLabel>Dirección del cliente</InputLabel>
                      <Select
                        label="Dirección del cliente"
                        value={selectedDireccion?.id || ""}
                        onChange={(e) => {
                          const dir = clienteDirecciones.find((d) => d.id === e.target.value) || null;
                          setSelectedDireccion(dir);
                        }}
                      >
                        {clienteDirecciones.map((d) => (
                          <MenuItem key={d.id} value={d.id}>
                            {d.es_principal && <Icon icon="mdi:star" width={14} style={{ marginRight: 4, color: "gold" }} />}
                            {d.label ? `${d.label} — ` : ""}{d.direccion || "Sin dirección"}
                          </MenuItem>
                        ))}
                      </Select>
                    </FormControl>
                  </Grid>
                )}

                <Grid size={{ xs: 12 }}>
                  <Autocomplete size="small" options={geoOpts(departamentos)} value={geoVal(departamentos, deptEntregaId)}
                    onChange={(_, v) => { setDeptEntregaId(v?.id || null); setDistEntregaId(null); setCiudadEntregaId(null); }}
                    getOptionLabel={geoLabel} isOptionEqualToValue={geoEq}
                    renderInput={(params) => <TextField {...params} label="Departamento *" />}
                  />
                </Grid>
                <Grid size={{ xs: 6 }}>
                  <Autocomplete size="small" options={geoOpts(filteredDistEntrega)} value={geoVal(filteredDistEntrega, distEntregaId)}
                    onChange={(_, v) => { setDistEntregaId(v?.id || null); setCiudadEntregaId(null); }}
                    getOptionLabel={geoLabel} isOptionEqualToValue={geoEq}
                    disabled={!deptEntregaId}
                    renderInput={(params) => <TextField {...params} label="Distrito *" />}
                  />
                </Grid>
                <Grid size={{ xs: 6 }}>
                  <Autocomplete size="small" options={geoOpts(filteredCiudEntrega)} value={geoVal(filteredCiudEntrega, ciudadEntregaId)}
                    onChange={(_, v) => setCiudadEntregaId(v?.id || null)}
                    getOptionLabel={geoLabel} isOptionEqualToValue={geoEq}
                    disabled={!distEntregaId}
                    renderInput={(params) => <TextField {...params} label="Ciudad *" />}
                  />
                </Grid>
                <Grid size={{ xs: 12 }}>
                  <TextField fullWidth size="small" label="Dirección entrega *" value={dirEntrega}
                    onChange={(e) => setDirEntrega(e.target.value)} inputProps={{ maxLength: 255 }} placeholder="Calle Ejemplo 567" />
                </Grid>
                <Grid size={{ xs: 5, sm: 4 }}>
                  <TextField fullWidth size="small" label="Nro. Casa" value={nroCasaEntrega}
                    onChange={(e) => setNroCasaEntrega(e.target.value)} inputProps={{ maxLength: 10 }} placeholder="1234" />
                </Grid>
                <Grid size={{ xs: 7, sm: 8 }}>
                  <TextField fullWidth size="small" label="Complemento / Referencia" value={comp1Entrega}
                    onChange={(e) => setComp1Entrega(e.target.value)} inputProps={{ maxLength: 100 }} placeholder="Piso 2, frente al parque..." />
                </Grid>
                <Grid size={{ xs: 12, sm: 6 }}>
                  <TextField fullWidth size="small" label="Complemento 2" value={comp2Entrega}
                    onChange={(e) => setComp2Entrega(e.target.value)} inputProps={{ maxLength: 100 }} placeholder="Observaciones adicionales..." />
                </Grid>
                <Grid size={{ xs: 12, sm: 6 }}>
                  <TextField fullWidth size="small" label="Teléfono entrega" value={telEntrega}
                    onChange={(e) => setTelEntrega(e.target.value)} inputProps={{ maxLength: 16 }} placeholder="595981..." />
                </Grid>
              </Grid>
            </Paper>
          </Grid>
        </Grid>

        {/* ── Buscar Producto (mismo componente que facturas) ── */}
        {showProductSearch && (
          <ProductSearch
            onProductSelect={handleAddProducto}
            referenciales={referenciales}
            cliente={cliente}
            sucursalId={sucursal?.id}
            depositoActivo={depositos.find((d) => d.id === depositoId) || null}
            hidePrice
          />
        )}

        {/* ── Mercaderías ── */}
        <Paper variant="outlined" sx={SECTION_SX}>
          <SectionHeader icon="mdi:package-variant-closed" label="MERCADERÍAS A TRANSPORTAR" />

          {tipoDocAsoc === 1 && facturasAsociadas.length === 0 && (
            <Alert severity="info" icon={<Icon icon="mdi:information-outline" />} sx={{ mb: 1.5 }}>
              Busque y seleccione una o más facturas electrónicas para importar los ítems.
            </Alert>
          )}

          <TableContainer>
            <Table size="small">
              <TableHead>
                <TableRow>
                  <TableCell sx={{ width: 40 }}>#</TableCell>
                  <TableCell sx={{ width: 110 }}>Código</TableCell>
                  <TableCell>Descripción</TableCell>
                  <TableCell sx={{ width: 80 }}>Unidad</TableCell>
                  <TableCell sx={{ width: 180 }}>Cantidad</TableCell>
                  {facturasAsociadas.length > 1 && <TableCell sx={{ width: 130 }}>Factura</TableCell>}
                  <TableCell sx={{ width: 48 }} />
                </TableRow>
              </TableHead>
              <TableBody>
                {items.length === 0 ? (
                  <TableRow>
                    <TableCell colSpan={6} align="center" sx={{ py: 5 }}>
                      <Box sx={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 1, color: "text.disabled" }}>
                        <Icon icon="mdi:cart-outline" width={40} />
                        <Typography variant="body2" fontWeight={600}>No hay productos agregados</Typography>
                        <Typography variant="caption">
                          {showProductSearch ? "Busca y agrega productos usando el campo de búsqueda" : "Importá una factura electrónica para cargar los ítems"}
                        </Typography>
                      </Box>
                    </TableCell>
                  </TableRow>
                ) : (
                  items.map((item, idx) => (
                    <TableRow key={idx}>
                      <TableCell>{idx + 1}</TableCell>
                      <TableCell>
                        <Typography variant="caption" sx={{ fontFamily: "monospace", color: "text.secondary" }}>
                          {item.codigo || "—"}
                        </Typography>
                      </TableCell>
                      <TableCell>{item.descripcion}</TableCell>
                      <TableCell>{item.unidad_medida}</TableCell>
                      <TableCell>
                        <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
                          <TextField
                            size="small" type="number" value={item.cantidad}
                            onChange={(e) => handleItemChange(idx, "cantidad", e.target.value)}
                            inputProps={{ min: 0.0001, max: item.maxCantidad || undefined, step: "any" }}
                            sx={{ width: 100 }}
                          />
                          {item.fromFactura && (
                            <Typography variant="caption" color="text.secondary">
                              disp: {item.maxCantidad}{item.cantAplicadaRemision > 0 && ` (${item.cantAplicadaRemision} rem.)`}
                            </Typography>
                          )}
                        </Box>
                      </TableCell>
                      {facturasAsociadas.length > 1 && (
                        <TableCell>
                          <Typography variant="caption" sx={{ fontFamily: "monospace", color: "text.secondary" }}>
                            {item.factura_numero || "—"}
                          </Typography>
                        </TableCell>
                      )}
                      <TableCell>
                        <Tooltip title="Quitar ítem">
                          <IconButton
                            size="small"
                            color="error"
                            onClick={() => setItems(items.filter((_, i) => i !== idx))}
                            sx={{ "&:hover": { bgcolor: "error.main", color: "white" } }}
                          >
                            <Icon icon="mdi:delete" width={22} />
                          </IconButton>
                        </Tooltip>
                      </TableCell>
                    </TableRow>
                  ))
                )}
              </TableBody>
            </Table>
          </TableContainer>

          {items.length > 0 && (
            <Typography variant="caption" color="text.secondary" sx={{ display: "block", textAlign: "right", mt: 1 }}>
              {items.length} ítem{items.length !== 1 ? "s" : ""} &nbsp;|&nbsp; Total unidades: {items.reduce((a, i) => a + Number(i.cantidad), 0).toLocaleString("es-PY")}
            </Typography>
          )}
        </Paper>

        {/* ── Información Adicional (colapsable) ── */}
        <Accordion disableGutters elevation={0} variant="outlined" sx={{ borderRadius: 1.5 }}>
          <AccordionSummary expandIcon={<Icon icon="mdi:chevron-down" />} sx={{ minHeight: 40, "& .MuiAccordionSummary-content": { my: 0.5 } }}>
            <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
              <Icon icon="mdi:information-outline" width={16} />
              <Typography variant="caption" fontWeight={700} sx={{ letterSpacing: 0.5, color: "text.secondary" }}>
                INFORMACIÓN ADICIONAL
              </Typography>
            </Box>
          </AccordionSummary>
          <AccordionDetails sx={{ pt: 0 }}>
            <TextField
              fullWidth multiline minRows={3} size="small"
              label="Observaciones"
              value={infoAdicional}
              onChange={(e) => setInfoAdicional(e.target.value)}
              placeholder="Observaciones, instrucciones especiales, etc."
              inputProps={{ maxLength: 5000 }}
            />
          </AccordionDetails>
        </Accordion>

        {/* ── Footer ── */}
        <Paper variant="outlined" sx={{ px: 2.5, py: 1.5, borderRadius: 2 }}>
          <Stack direction="row" alignItems="center" justifyContent="space-between" spacing={2}>
            <Stack direction="row" alignItems="center" spacing={1.5}>
              {items.length > 0 && (
                <>
                  <Chip
                    size="small"
                    icon={<Icon icon="mdi:package-variant" width={14} />}
                    label={`${items.length} ítem${items.length !== 1 ? "s" : ""}`}
                    color="primary"
                    variant="outlined"
                  />
                  <Chip
                    size="small"
                    icon={<Icon icon="mdi:sigma" width={14} />}
                    label={`${items.reduce((a, i) => a + Number(i.cantidad), 0).toLocaleString("es-PY")} unid.`}
                    variant="outlined"
                  />
                </>
              )}
              {cliente && (
                <Typography variant="caption" color="text.secondary" noWrap sx={{ maxWidth: 220 }}>
                  <Icon icon="mdi:account-outline" width={13} style={{ verticalAlign: "middle", marginRight: 4 }} />
                  {cliente.personas?.razon_social || `${cliente.personas?.nombre || ""} ${cliente.personas?.apellido || ""}`.trim()}
                </Typography>
              )}
            </Stack>
            <Stack direction="row" spacing={1.5}>
              <Button variant="outlined" color="inherit" startIcon={<Icon icon="mdi:close" />} onClick={() => navigate("/ventas?tab=remisiones")} disabled={isSaving}>
                Cancelar
              </Button>
              <Button
                variant="contained"
                size="large"
                startIcon={isSaving ? <CircularProgress size={16} color="inherit" /> : <Icon icon="mdi:send-check" />}
                onClick={handleSubmit}
                disabled={isSaving || sinPuntoExpedicion || sinNumeracion}
                sx={{ px: 3 }}
              >
                {isSaving ? "Guardando…" : "Guardar Remisión"}
              </Button>
            </Stack>
          </Stack>
        </Paper>
      </Box>

      {/* ── Preview de revisión antes de registrar ── */}
      <Dialog open={confirmOpen} onClose={() => setConfirmOpen(false)} maxWidth="md" fullWidth scroll="paper">
        <DialogTitle sx={{ display: "flex", alignItems: "center", gap: 1, pb: 1 }}>
          <Icon icon="mdi:clipboard-check-outline" width={22} />
          <Box>
            <Typography variant="h6" fontWeight={700} sx={{ lineHeight: 1.2 }}>Revisá antes de registrar</Typography>
            <Typography variant="caption" color="text.secondary">Verificá los datos para evitar errores de carga · {numeracionLabel}</Typography>
          </Box>
        </DialogTitle>
        <DialogContent dividers sx={{ bgcolor: "action.hover", px: { xs: 1.5, sm: 2.5 } }}>
          <PvGroup icon="mdi:file-document-outline" title="Documento">
            <PvField label="Sucursal" value={sucursal?.nombre_sucursal || sucursal?.nombre || sucursal?.punto_establecimiento} />
            <PvField label="Numeración" value={numeracionLabel} />
            <PvField label="Fecha y hora emisión" value={fecha ? `${fmtFechaCorta(fecha)} ${String(fecha).split("T")[1]?.slice(0, 5) || ""}`.trim() : "—"} />
            <PvField label="Tipo responsable" value={responsablesRef.find((r) => r.codigo === tipoResponsable)?.descripcion} />
            <PvField label="Condición negociación" value={condicionesNegRef.find((c) => c.id === condicionNegId)?.descripcion} />
            {tipoDocAsoc !== 1 && (
              <PvField label="Depósito (descuenta stock)" value={depositos.find((d) => d.id === depositoId)?.descripcion} />
            )}
          </PvGroup>

          <PvGroup icon="mdi:account-outline" title="Destinatario">
            <PvField label="Cliente" value={cliente?.personas?.razon_social} />
            <PvField label="RUC / Documento" value={clienteDocPreview} />
          </PvGroup>

          <PvGroup icon="mdi:transit-connection-variant" title="Motivo y condiciones">
            <PvField label="Motivo" value={motivo === 99 ? `99 - ${otroMotivo}` : (MOTIVOS.find((m) => m.cod === motivo) ? `${motivo} - ${MOTIVOS.find((m) => m.cod === motivo).desc}` : "—")} />
            <PvField label="Tipo transporte" value={tiposTransporteRef.find((t) => t.id === tipoTransporteId)?.descripcion} />
            <PvField label="Modalidad" value={modalidadesRef.find((m) => m.id === modalidadId)?.descripcion} />
            <PvField label="Kilómetros" value={kilometros} />
          </PvGroup>

          <PvGroup icon="mdi:truck-outline" title="Transporte">
            <PvField label="Transportista" value={transportista?.personas?.razon_social} />
            <PvField label="Chofer" value={chofer?.personas?.razon_social} />
            <PvField label="Vehículo" value={vehiculo ? `${vehiculo.marca || ""}${vehiculo.nro_matricula ? ` (${vehiculo.nro_matricula})` : vehiculo.nro_identificacion ? ` (${vehiculo.nro_identificacion})` : ""}` : "—"} />
            <PvField label="Agente" value={agente?.personas?.razon_social} />
          </PvGroup>

          <PvGroup icon="mdi:map-marker-up" title="Salida">
            <PvField label="Dirección" value={dirSalida} full />
            <PvField label="Ubicación" value={`${geoName(departamentos, deptSalidaId)} / ${geoName(distritos, distSalidaId)} / ${geoName(ciudades, ciudadSalidaId)}`} />
            <PvField label="Inicio traslado" value={fmtFechaCorta(fechaInicio)} />
            <PvField label="Fin traslado" value={fmtFechaCorta(fechaFin)} />
          </PvGroup>

          <PvGroup icon="mdi:map-marker-down" title="Entrega">
            <PvField label="Dirección" value={dirEntrega} full />
            <PvField label="Ubicación" value={`${geoName(departamentos, deptEntregaId)} / ${geoName(distritos, distEntregaId)} / ${geoName(ciudades, ciudadEntregaId)}`} />
            <PvField label="Teléfono" value={telEntrega} />
          </PvGroup>

          <PvGroup icon="mdi:link-variant" title="Documento asociado">
            {tipoDocAsoc === 1 ? (
              <PvField full label="Facturas electrónicas" value={facturasAsociadas.length ? facturasAsociadas.map((f) => `${f.dest}-${f.dpunexp}-${f.dnumdoc}`).join("  ·  ") : "—"} />
            ) : tipoDocAsoc === 2 ? (
              <>
                <PvField label="Tipo" value="Impreso" />
                <PvField label="Timbrado" value={timbradoImpreso} />
                <PvField label="Comprobante" value={`${estImpreso}-${pexpImpreso}-${numDocImpreso}`} />
                <PvField label="Fecha doc." value={fmtFechaCorta(fechaDocImpreso)} />
              </>
            ) : (
              <>
                <PvField label="Tipo" value="Sin documento asociado" />
                <PvField label="Fecha futura de emisión" value={fmtFechaCorta(fechaFuturaEmision)} />
              </>
            )}
          </PvGroup>

          <Paper variant="outlined" sx={{ p: 1.5, mb: 1.5, borderRadius: 2 }}>
            <Box sx={{ display: "flex", alignItems: "center", gap: 0.75, mb: 1 }}>
              <Icon icon="mdi:package-variant-closed" width={16} />
              <Typography variant="subtitle2" color="primary" fontWeight={700}>Mercadería ({items.length})</Typography>
            </Box>
            <Box sx={{ overflowX: "auto" }}>
              <Table size="small">
                <TableHead>
                  <TableRow>
                    <TableCell sx={{ fontWeight: 600 }}>#</TableCell>
                    <TableCell sx={{ fontWeight: 600 }}>Descripción</TableCell>
                    <TableCell sx={{ fontWeight: 600 }}>Unidad</TableCell>
                    <TableCell sx={{ fontWeight: 600 }} align="right">Cantidad</TableCell>
                  </TableRow>
                </TableHead>
                <TableBody>
                  {items.length === 0 ? (
                    <TableRow><TableCell colSpan={4} align="center" sx={{ color: "text.secondary" }}>Sin ítems</TableCell></TableRow>
                  ) : (
                    items.map((it, i) => (
                      <TableRow key={i}>
                        <TableCell>{i + 1}</TableCell>
                        <TableCell>{it.descripcion}</TableCell>
                        <TableCell>{it.unidad_medida}</TableCell>
                        <TableCell align="right">{Number(it.cantidad)}</TableCell>
                      </TableRow>
                    ))
                  )}
                </TableBody>
              </Table>
            </Box>
          </Paper>

          {infoAdicional && (
            <PvGroup icon="mdi:information-outline" title="Información adicional">
              <PvField full label="" value={infoAdicional} />
            </PvGroup>
          )}
        </DialogContent>
        <DialogActions sx={{ px: 3, py: 2 }}>
          <Button onClick={() => setConfirmOpen(false)} variant="outlined" color="inherit" startIcon={<Icon icon="mdi:pencil" />}>
            Seguir editando
          </Button>
          <Button
            onClick={handleConfirmSave}
            variant="contained"
            startIcon={isSaving ? <CircularProgress size={16} color="inherit" /> : <Icon icon="mdi:check" />}
            disabled={isSaving}
            autoFocus
          >
            Registrar remisión
          </Button>
        </DialogActions>
      </Dialog>

      {/* ── Modals ── */}
      <BuscadorFacturasRemision
        isOpen={buscadorFacturasOpen}
        onClose={() => setBuscadorFacturasOpen(false)}
        onSelect={importarFacturas}
        cliente={cliente}
        excludeIds={facturasAsociadas.map((f) => f._facturaId)}
      />
      <ChoferBrowserModal
        isOpen={choferBrowserOpen}
        onClose={() => setChoferBrowserOpen(false)}
        onSelect={(c) => { setChofer(c); setChoferBrowserOpen(false); }}
      />
      <TransportistaBrowserModal
        isOpen={transportistaBrowserOpen}
        onClose={() => setTransportistaBrowserOpen(false)}
        onSelect={(t) => { setTransportista(t); setVehiculo(null); setChofer(null); setTransportistaBrowserOpen(false); }}
      />

      <KudePreviewModal
        open={kudePreview.open}
        onClose={() => {
          setKudePreview({ open: false, remisionId: null });
          navigate("/ventas?tab=remisiones");
        }}
        documentoId={kudePreview.remisionId}
        tipoDocumento={7}
        numeroDocumento={kudePreview.numero}
        titulo="Preview KUDE - Nota de Remisión"
      />
    </Box>
  );
}