// EPP & Dotación module — pending deliveries · inventory · role matrices
const { useState: _epp_useState, useMemo: _epp_useMemo } = React;

// ─── Catálogo (item master) ──────────────────────────────

const ITEM_CATALOG = [
  { code: 'UNI-001', name: 'Uniforme operario clasificación',         cat: 'dotacion', sizes: ['S','M','L','XL'] },
  { code: 'UNI-002', name: 'Uniforme operaria aprovechamiento',         cat: 'dotacion', sizes: ['S','M','L','XL'] },
  { code: 'UNI-003', name: 'Camisa polo corporativa',           cat: 'dotacion', sizes: ['S','M','L','XL','XXL'] },
  { code: 'UNI-004', name: 'Pantalón industrial drill',         cat: 'dotacion', sizes: ['28','30','32','34','36','38'] },
  { code: 'UNI-005', name: 'Bata blanca laboratorio',           cat: 'dotacion', sizes: ['S','M','L','XL'] },
  { code: 'UNI-006', name: 'Cofia desechable',                  cat: 'dotacion', sizes: ['Única'] },
  { code: 'EPP-001', name: 'Guantes térmicos Kevlar 350°C',     cat: 'epp', sizes: ['M','L','XL'] },
  { code: 'EPP-002', name: 'Botas dieléctricas con puntera',    cat: 'epp', sizes: ['37','38','39','40','41','42','43','44'] },
  { code: 'EPP-003', name: 'Casco industrial clase E',          cat: 'epp', sizes: ['Única'] },
  { code: 'EPP-004', name: 'Protector auditivo copa 25 dB',     cat: 'epp', sizes: ['Única'] },
  { code: 'EPP-005', name: 'Gafas de seguridad transparentes',  cat: 'epp', sizes: ['Única'] },
  { code: 'EPP-006', name: 'Tapabocas N95 (caja x 20)',         cat: 'epp', sizes: ['Única'] },
  { code: 'EPP-007', name: 'Faja lumbar ergonómica',            cat: 'epp', sizes: ['M','L','XL'] },
  { code: 'EPP-008', name: 'Arnés de cuerpo entero c/4 anclajes', cat: 'epp', sizes: ['Única'] },
  { code: 'EPP-009', name: 'Guantes de nitrilo (caja x 100)',   cat: 'epp', sizes: ['M','L'] },
  { code: 'EPP-010', name: 'Delantal vinílico industrial',      cat: 'epp', sizes: ['Única'] },
];

// ─── Pending deliveries ──────────────────────────────────

const PENDING = [
  {
    id: 'D-2026-0118', initials: 'AM', name: 'Andrés Felipe Mejía', empId: 'E0247', role: 'Operario de Clasificación',
    site: 'Cali', hire: '02/05/2026', daysWaiting: 3, state: 'normal',
    items: [
      { code: 'UNI-001', size: 'L',    qty: 2 },
      { code: 'UNI-004', size: '32',   qty: 2 },
      { code: 'EPP-001', size: 'L',    qty: 1 },
      { code: 'EPP-002', size: '41',   qty: 1 },
      { code: 'EPP-003', size: 'Única', qty: 1 },
      { code: 'EPP-004', size: 'Única', qty: 1 },
    ],
  },
  {
    id: 'D-2026-0117', initials: 'LG', name: 'Laura Gómez Restrepo', empId: 'E0246', role: 'Operaria de Planta',
    site: 'Cali', hire: '02/05/2026', daysWaiting: 3, state: 'normal',
    items: [
      { code: 'UNI-002', size: 'M',     qty: 2 },
      { code: 'UNI-006', size: 'Única', qty: 5 },
      { code: 'EPP-002', size: '38',    qty: 1 },
      { code: 'EPP-006', size: 'Única', qty: 1 },
    ],
  },
  {
    id: 'D-2026-0116', initials: 'JR', name: 'Juan David Ruiz', empId: 'E0245', role: 'Auxiliar de Calidad',
    site: 'Barranquilla', hire: '28/04/2026', daysWaiting: 7, state: 'urgente',
    items: [
      { code: 'UNI-005', size: 'M',     qty: 2 },
      { code: 'EPP-005', size: 'Única', qty: 1 },
      { code: 'EPP-009', size: 'M',     qty: 1 },
    ],
  },
  {
    id: 'D-2026-0115', initials: 'SO', name: 'Sandra Milena Ortiz', empId: 'E0244', role: 'Coord. Compras',
    site: 'Bogotá', hire: '21/04/2026', daysWaiting: 14, state: 'urgente',
    items: [
      { code: 'UNI-003', size: 'M', qty: 3 },
    ],
  },
  {
    id: 'D-2026-0112', initials: 'PV', name: 'Paula Valencia Ríos', empId: 'E0156', role: 'Téc. Mantenimiento',
    site: 'Cali', hire: '03/02/2025', daysWaiting: 12, state: 'bloqueado',
    items: [
      { code: 'EPP-008', size: 'Única', qty: 1 },
      { code: 'EPP-002', size: '38',    qty: 1 },
    ],
    blockReason: 'Sin stock de arnés en bodega Cali · pedido en tránsito',
  },
  {
    id: 'D-2026-0110', initials: 'CV', name: 'Carlos Andrés Vélez', empId: 'E0205', role: 'Operario de Clasificación',
    site: 'Cali', hire: '14/03/2024', daysWaiting: 4, state: 'normal',
    items: [
      { code: 'EPP-001', size: 'L',  qty: 1 },
      { code: 'EPP-002', size: '42', qty: 1 },
    ],
    motive: 'Reposición periódica · desgaste',
  },
];

const STATE_DELIV = {
  urgente:   { label: 'Urgente',   pill: 'rose',       dot: 'var(--rose-600)' },
  normal:    { label: 'Normal',    pill: 'green',      dot: 'var(--green-600)' },
  bloqueado: { label: 'Bloqueado', pill: 'amber-soft', dot: '#854D0E' },
};

// ─── Inventory ───────────────────────────────────────────

const INVENTORY = [
  { code: 'UNI-001', name: 'Uniforme operario clasificación',          cat: 'dotacion', site: 'Cali',   stock: 24, min: 12, updated: '03/05/2026' },
  { code: 'UNI-002', name: 'Uniforme operaria aprovechamiento',          cat: 'dotacion', site: 'Cali',   stock: 18, min: 15, updated: '03/05/2026' },
  { code: 'UNI-003', name: 'Camisa polo corporativa',            cat: 'dotacion', site: 'Cali',   stock: 47, min: 20, updated: '02/05/2026' },
  { code: 'UNI-004', name: 'Pantalón industrial drill',          cat: 'dotacion', site: 'Cali',   stock: 8,  min: 12, updated: '02/05/2026' },
  { code: 'UNI-005', name: 'Bata blanca laboratorio',            cat: 'dotacion', site: 'Barranquilla', stock: 6,  min: 4,  updated: '01/05/2026' },
  { code: 'UNI-006', name: 'Cofia desechable',                   cat: 'dotacion', site: 'Cali',   stock: 320, min: 100, updated: '03/05/2026' },
  { code: 'EPP-001', name: 'Guantes térmicos Kevlar 350°C',      cat: 'epp',      site: 'Cali',   stock: 11, min: 8,  updated: '03/05/2026' },
  { code: 'EPP-002', name: 'Botas dieléctricas con puntera',     cat: 'epp',      site: 'Cali',   stock: 14, min: 10, updated: '02/05/2026' },
  { code: 'EPP-003', name: 'Casco industrial clase E',           cat: 'epp',      site: 'Cali',   stock: 19, min: 8,  updated: '02/05/2026' },
  { code: 'EPP-004', name: 'Protector auditivo copa 25 dB',      cat: 'epp',      site: 'Cali',   stock: 28, min: 12, updated: '03/05/2026' },
  { code: 'EPP-005', name: 'Gafas de seguridad transparentes',   cat: 'epp',      site: 'Barranquilla', stock: 2,  min: 6,  updated: '28/04/2026' },
  { code: 'EPP-006', name: 'Tapabocas N95 (caja x 20)',          cat: 'epp',      site: 'Cali',   stock: 12, min: 6,  updated: '03/05/2026' },
  { code: 'EPP-007', name: 'Faja lumbar ergonómica',             cat: 'epp',      site: 'Cali',   stock: 4,  min: 5,  updated: '01/05/2026' },
  { code: 'EPP-008', name: 'Arnés de cuerpo entero c/4 anclajes',cat: 'epp',      site: 'Cali',   stock: 0,  min: 3,  updated: '15/04/2026' },
  { code: 'EPP-009', name: 'Guantes de nitrilo (caja x 100)',    cat: 'epp',      site: 'Barranquilla', stock: 18, min: 10, updated: '02/05/2026' },
  { code: 'EPP-010', name: 'Delantal vinílico industrial',       cat: 'epp',      site: 'Cali',   stock: 9,  min: 6,  updated: '02/05/2026' },
];

const stockState = (it) => {
  if (it.stock === 0)         return { label: 'Sin stock',  pill: 'rose',       dot: 'var(--rose-600)',  tone: 'rose' };
  if (it.stock < it.min)      return { label: 'Stock bajo', pill: 'amber-soft', dot: '#854D0E',          tone: 'amber' };
  return                            { label: 'OK',          pill: 'green',      dot: 'var(--green-600)', tone: 'green' };
};

// helper to get item meta from catalog
const getItem = (code) => ITEM_CATALOG.find(i => i.code === code);
const getStock = (code, site = 'Cali') => {
  const inv = INVENTORY.find(i => i.code === code && i.site === site);
  return inv ? inv.stock : 0;
};

// ─── Root ────────────────────────────────────────────────

const EPP = () => {
  const [tab, setTab] = _epp_useState('pending');
  const [delivOpen, setDelivOpen] = _epp_useState(null);   // delivery to register

  const lowStockCount = INVENTORY.filter(i => i.stock < i.min).length;

  return (
    <div className="main" data-screen-label="EPP">
      <div className="page-head">
        <div>
          <h1 className="page-title">Dotación y EPP</h1>
          <div className="page-subtitle">
            <b>Bodegas Cali · Barranquilla · Bogotá</b> · {INVENTORY.length} ítems
          </div>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <button className="btn"><IconBarChart size={14} /> Reporte</button>
          <button className="btn primary"><IconPlus size={14} /> Recibir mercancía</button>
        </div>
      </div>

      <div className="doc-tabs">
        <button className={`doc-tab ${tab === 'pending' ? 'active' : ''}`}   onClick={() => setTab('pending')}>
          <IconShirt size={14} /> Entregas pendientes
          <span className="epp-tab-pill">{PENDING.length}</span>
        </button>
        <button className={`doc-tab ${tab === 'inventory' ? 'active' : ''}`} onClick={() => setTab('inventory')}>
          <IconBarChart size={14} /> Inventario
          {lowStockCount > 0 && <span className="epp-tab-pill rose">{lowStockCount}</span>}
        </button>
      </div>

      {tab === 'pending'   && <PendingTab onRegister={(d) => setDelivOpen(d)} />}
      {tab === 'inventory' && <InventoryTab />}

      {delivOpen   && <DeliveryModal delivery={delivOpen} onClose={() => setDelivOpen(null)} />}
    </div>
  );
};

// ─── Tab 1: Pending deliveries ───────────────────────────

const PendingTab = ({ onRegister }) => {
  const [filter, setFilter] = _epp_useState('todos');
  const counts = _epp_useMemo(() => ({
    todos:     PENDING.length,
    urgente:   PENDING.filter(p => p.state === 'urgente').length,
    normal:    PENDING.filter(p => p.state === 'normal').length,
    bloqueado: PENDING.filter(p => p.state === 'bloqueado').length,
  }), []);

  const list = filter === 'todos' ? PENDING : PENDING.filter(p => p.state === filter);

  return (
    <>
      <div className="sst-quickfilter">
        {[
          { id: 'todos',     label: 'Todas',      tone: '' },
          { id: 'urgente',   label: 'Urgentes',   tone: 'rose' },
          { id: 'normal',    label: 'Normales',   tone: 'green' },
          { id: 'bloqueado', label: 'Bloqueadas', tone: 'amber' },
        ].map(o => (
          <button key={o.id} className={`sst-chip ${o.tone} ${filter === o.id ? 'active' : ''}`} onClick={() => setFilter(o.id)}>
            {o.label} <span className="sst-chip-count">{counts[o.id]}</span>
          </button>
        ))}
        <div style={{ flex: 1 }} />
        <select>
          <option>Todas las sedes</option>
          <option>Cali</option>
          <option>Barranquilla</option>
          <option>Bogotá</option>
        </select>
      </div>

      <div className="doc-list-card">
        <table className="doc-table epp-deliv-table">
          <thead>
            <tr>
              <th>Colaborador</th>
              <th>Cargo · Sede</th>
              <th>Items pendientes</th>
              <th>Ingreso</th>
              <th style={{ textAlign: 'center' }}>Días</th>
              <th>Estado</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {list.map(d => {
              const s = STATE_DELIV[d.state];
              return (
                <tr key={d.id}>
                  <td>
                    <div className="doc-cell-emp">
                      <div className="doc-avatar">{d.initials}</div>
                      <div>
                        <div style={{ fontWeight: 600, fontSize: 13 }}>{d.name}</div>
                        <div className="muted mono" style={{ fontSize: 11 }}>{d.empId} · {d.id}</div>
                      </div>
                    </div>
                  </td>
                  <td>
                    <div style={{ fontSize: 12.5 }}>{d.role}</div>
                    <div className="muted" style={{ fontSize: 11.5 }}>{d.site}</div>
                  </td>
                  <td>
                    <div className="epp-item-chips">
                      {d.items.slice(0, 3).map((it, i) => {
                        const ci = getItem(it.code);
                        return <span key={i} className={`epp-item-chip ${ci.cat}`}>{ci.name} · {it.size}</span>;
                      })}
                      {d.items.length > 3 && <span className="muted" style={{ fontSize: 11 }}>+{d.items.length - 3} más</span>}
                    </div>
                    {d.motive && <div className="muted" style={{ fontSize: 11, marginTop: 4 }}>{d.motive}</div>}
                    {d.blockReason && <div className="epp-block-note"><IconAlert size={11} /> {d.blockReason}</div>}
                  </td>
                  <td className="mono" style={{ fontSize: 12 }}>{d.hire}</td>
                  <td style={{ textAlign: 'center' }}>
                    <span className={`epp-days ${d.daysWaiting > 5 ? 'urgent' : ''}`}>{d.daysWaiting}</span>
                  </td>
                  <td>
                    <span className={`pill ${s.pill}`}>
                      <span className="status-dot" style={{ background: s.dot }} /> {s.label}
                    </span>
                  </td>
                  <td>
                    <button
                      className="btn primary"
                      style={{ padding: '5px 11px', fontSize: 12 }}
                      disabled={d.state === 'bloqueado'}
                      onClick={() => onRegister(d)}
                    >
                      <IconCheck size={13} /> Registrar entrega
                    </button>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
        <div className="doc-table-foot">
          <span className="muted" style={{ fontSize: 12 }}>Mostrando {list.length} entregas pendientes</span>
          <button className="btn"><IconExternal size={13} /> Exportar</button>
        </div>
      </div>
    </>
  );
};

// ─── Tab 2: Inventory ────────────────────────────────────

const InventoryTab = () => {
  const [filterCat, setFilterCat]   = _epp_useState('todas');
  const [filterSite, setFilterSite] = _epp_useState('todas');
  const [filterState, setFilterState] = _epp_useState('todos');

  const lowItems = INVENTORY.filter(i => i.stock < i.min);
  const list = INVENTORY.filter(i => {
    if (filterCat !== 'todas' && i.cat !== filterCat) return false;
    if (filterSite !== 'todas' && i.site !== filterSite) return false;
    if (filterState !== 'todos') {
      const t = stockState(i).tone;
      if (t !== filterState) return false;
    }
    return true;
  });

  return (
    <>
      {lowItems.length > 0 && (
        <div className="epp-banner">
          <div className="epp-banner-icon"><IconAlert size={18} /></div>
          <div style={{ flex: 1 }}>
            <div className="epp-banner-title">{lowItems.length} ítems con stock bajo o agotado</div>
            <div className="epp-banner-sub">
              Revisa y genera órdenes de reposición. Los ítems en cero bloquean entregas pendientes.
            </div>
          </div>
          <div className="epp-banner-list">
            {lowItems.slice(0, 3).map(i => (
              <span key={i.code} className={`pill ${stockState(i).pill}`} style={{ fontSize: 11 }}>
                {i.name.split(' ').slice(0, 3).join(' ')} · {i.stock}/{i.min}
              </span>
            ))}
            {lowItems.length > 3 && <span className="muted" style={{ fontSize: 11 }}>+{lowItems.length - 3}</span>}
          </div>
          <button className="btn primary" style={{ padding: '6px 12px', fontSize: 12.5 }}>
            <IconExternal size={13} /> Crear orden
          </button>
        </div>
      )}

      <div className="sst-quickfilter">
        <div className="ob-search" style={{ maxWidth: 320 }}>
          <IconSearch size={15} />
          <input placeholder="Buscar ítem por nombre o código…" />
        </div>
        <select value={filterCat} onChange={(e) => setFilterCat(e.target.value)}>
          <option value="todas">Todas las categorías</option>
          <option value="dotacion">Dotación</option>
          <option value="epp">EPP</option>
        </select>
        <select value={filterSite} onChange={(e) => setFilterSite(e.target.value)}>
          <option value="todas">Todas las sedes</option>
          <option value="Cali">Cali</option>
          <option value="Barranquilla">Barranquilla</option>
          <option value="Bogotá">Bogotá</option>
        </select>
        <select value={filterState} onChange={(e) => setFilterState(e.target.value)}>
          <option value="todos">Cualquier estado</option>
          <option value="green">OK</option>
          <option value="amber">Stock bajo</option>
          <option value="rose">Sin stock</option>
        </select>
        <div style={{ flex: 1 }} />
        <button className="btn"><IconPlus size={13} /> Nuevo ítem</button>
      </div>

      <div className="doc-list-card">
        <table className="doc-table">
          <thead>
            <tr>
              <th>Ítem</th>
              <th>Categoría</th>
              <th>Sede</th>
              <th style={{ textAlign: 'right' }}>Disponible</th>
              <th style={{ textAlign: 'right' }}>Mínimo</th>
              <th>Estado</th>
              <th>Actualizado</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {list.map(i => {
              const s = stockState(i);
              const fillPct = i.min ? Math.min(100, Math.round((i.stock / (i.min * 2)) * 100)) : 100;
              return (
                <tr key={`${i.code}-${i.site}`}>
                  <td>
                    <div style={{ fontWeight: 600, fontSize: 13 }}>{i.name}</div>
                    <div className="muted mono" style={{ fontSize: 11 }}>{i.code}</div>
                  </td>
                  <td>
                    <span className={`pill ${i.cat === 'epp' ? 'navy' : 'green'}`} style={{ fontSize: 11 }}>
                      {i.cat === 'epp' ? 'EPP' : 'Dotación'}
                    </span>
                  </td>
                  <td className="muted" style={{ fontSize: 12.5 }}>{i.site}</td>
                  <td style={{ textAlign: 'right' }}>
                    <div className={`epp-stock-num ${s.tone}`}>{i.stock}</div>
                    <div className="epp-stock-bar">
                      <div className={`epp-stock-fill ${s.tone}`} style={{ width: `${fillPct}%` }} />
                    </div>
                  </td>
                  <td className="mono" style={{ textAlign: 'right', fontSize: 12, color: 'var(--text-muted)' }}>{i.min}</td>
                  <td>
                    <span className={`pill ${s.pill}`}>
                      <span className="status-dot" style={{ background: s.dot }} /> {s.label}
                    </span>
                  </td>
                  <td className="mono muted" style={{ fontSize: 11.5 }}>{i.updated}</td>
                  <td>
                    <div className="doc-actions">
                      <button className="icon-action" title="Ajustar stock"><IconPlus size={14} /></button>
                      <button className="icon-action" title="Ver movimientos"><IconExternal size={14} /></button>
                    </div>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
        <div className="doc-table-foot">
          <span className="muted" style={{ fontSize: 12 }}>{list.length} ítems</span>
          <span className="muted" style={{ fontSize: 12 }}>
            Última sincronización con bodega: <span className="mono">05/05/2026 09:42</span>
          </span>
        </div>
      </div>
    </>
  );
};

// ─── Modal: Delivery registration ────────────────────────

const DeliveryModal = ({ delivery, onClose }) => {
  const [rows, setRows] = _epp_useState(
    delivery.items.map((it) => ({ ...it, delivered: false }))
  );
  const [woAct, setWoAct] = _epp_useState(false);
  const [reason, setReason] = _epp_useState('');

  React.useEffect(() => {
    document.body.style.overflow = 'hidden';
    const onEsc = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onEsc);
    return () => { document.body.style.overflow = ''; window.removeEventListener('keydown', onEsc); };
  }, []);

  const setRow = (i, patch) => setRows(rs => rs.map((r, idx) => idx === i ? { ...r, ...patch } : r));
  const toggleAll = () => {
    const allOn = rows.every(r => r.delivered);
    setRows(rs => rs.map(r => ({ ...r, delivered: !allOn })));
  };

  const deliveredCount = rows.filter(r => r.delivered).length;
  const someBlocked = rows.some(r => getStock(r.code, delivery.site) < r.qty);

  return (
    <div className="modal-overlay" onMouseDown={(e) => { if (e.target === e.currentTarget) onClose(); }}>
      <div className="modal" style={{ maxWidth: 880 }}>
        <div className="modal-head">
          <div>
            <div className="modal-title">Registrar entrega — {delivery.id}</div>
            <div className="modal-sub">
              <b>{delivery.name}</b> · {delivery.role} · {delivery.site} · ingresó {delivery.hire}
            </div>
          </div>
          <button className="icon-btn" onClick={onClose} title="Cerrar">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M18 6 6 18M6 6l12 12" /></svg>
          </button>
        </div>

        <div className="modal-body">
          <div className="epp-deliv-summary">
            <div>
              <div className="muted-xs">Items en la entrega</div>
              <div className="epp-deliv-summary-val">{rows.length}</div>
            </div>
            <div>
              <div className="muted-xs">Marcados como entregados</div>
              <div className="epp-deliv-summary-val green">{deliveredCount}</div>
            </div>
            <div>
              <div className="muted-xs">Sede de despacho</div>
              <div className="epp-deliv-summary-val">{delivery.site}</div>
            </div>
            <div>
              <div className="muted-xs">Días desde ingreso</div>
              <div className="epp-deliv-summary-val">{delivery.daysWaiting}</div>
            </div>
          </div>

          <div className="epp-deliv-toolbar">
            <span className="muted-xs">Items a entregar</span>
            <div style={{ flex: 1 }} />
            <button className="link-btn" style={{ marginLeft: 0 }} onClick={toggleAll}>
              {rows.every(r => r.delivered) ? 'Desmarcar todo' : 'Marcar todo entregado'}
            </button>
          </div>

          <div className="epp-deliv-rows">
            {rows.map((r, i) => {
              const ci = getItem(r.code);
              const stock = getStock(r.code, delivery.site);
              const low = stock < 3;
              const insufficient = stock < r.qty;
              return (
                <div key={i} className={`epp-deliv-row ${r.delivered ? 'on' : ''} ${insufficient ? 'blocked' : ''}`}>
                  <label className="epp-deliv-check">
                    <input
                      type="checkbox"
                      checked={r.delivered}
                      onChange={(e) => setRow(i, { delivered: e.target.checked })}
                      disabled={insufficient}
                    />
                  </label>
                  <div className="epp-deliv-name">
                    <div style={{ fontWeight: 600, fontSize: 13 }}>{ci.name}</div>
                    <div className="muted mono" style={{ fontSize: 11 }}>{ci.code} · {ci.cat === 'epp' ? 'EPP' : 'Dotación'}</div>
                  </div>
                  <div className="epp-deliv-qty">
                    <div className="muted-xs">Cantidad</div>
                    <input
                      type="number"
                      min="1"
                      value={r.qty}
                      onChange={(e) => setRow(i, { qty: Number(e.target.value) })}
                    />
                  </div>
                  <div className="epp-deliv-size">
                    <div className="muted-xs">Talla</div>
                    <select value={r.size} onChange={(e) => setRow(i, { size: e.target.value })}>
                      {ci.sizes.map(sz => <option key={sz}>{sz}</option>)}
                    </select>
                  </div>
                  <div className="epp-deliv-stock">
                    <div className="muted-xs">Stock disponible</div>
                    <div className={`epp-deliv-stock-val ${insufficient ? 'rose' : low ? 'amber' : 'green'}`}>
                      {stock}
                      {insufficient && <span className="epp-deliv-stock-warn"><IconAlert size={10} /> Insuficiente</span>}
                      {!insufficient && low && <span className="epp-deliv-stock-warn amber"><IconAlert size={10} /> Bajo</span>}
                    </div>
                  </div>
                </div>
              );
            })}
          </div>

          <label className="epp-deliv-noact">
            <input type="checkbox" checked={woAct} onChange={(e) => setWoAct(e.target.checked)} />
            <span>
              <b>Registrar entrega sin acta de firma</b> (caso excepcional · requiere justificación)
            </span>
          </label>
          {woAct && (
            <textarea
              className="epp-deliv-reason"
              rows={2}
              value={reason}
              onChange={(e) => setReason(e.target.value)}
              placeholder="Motivo de la excepción: pérdida del acta firmada, entrega de emergencia, etc."
            />
          )}
        </div>

        <div className="modal-foot">
          <span className="muted" style={{ fontSize: 12, marginRight: 'auto' }}>
            {someBlocked
              ? <span style={{ color: 'var(--rose-600)' }}><IconAlert size={12} /> Hay ítems sin stock suficiente</span>
              : <><IconCheck size={12} /> Stock validado contra bodega {delivery.site}</>
            }
          </span>
          <button className="btn" onClick={onClose}>Cancelar</button>
          {woAct ? (
            <button className="btn primary" disabled={deliveredCount === 0 || reason.trim().length < 8}>
              <IconCheck size={14} /> Registrar sin acta
            </button>
          ) : (
            <button className="btn primary" disabled={deliveredCount === 0 || someBlocked}>
              <IconDoc size={14} /> Generar acta de entrega
            </button>
          )}
        </div>
      </div>
    </div>
  );
};

window.EPP = EPP;