// ─── Documentos · Remitos (nosotros → cliente) ──────────────────────────
// RemitosScreen: lista navegable de remitos del expediente (envoltura delgada
// de EntityListScreen). Extraído de screens-documentos.jsx (P10, split junto
// con las otras 5 listas — ver compartido.jsx). Expone a window:
// RemitosScreen. Consume window.REMITOS (core/colecciones.js),
// EntityListScreen/useEntityStats (ui/entity-list.jsx), IdDateCell (ui/
// primitives.jsx), REM_DOC_ESTADOS/_docExpCol/_docExpPid/_docDate
// (compartido.jsx).

function RemitosScreen({ onOpen }) {
  const rows = window.REMITOS || [];
  const counts = {}; rows.forEach((r) => counts[r.estado] = (counts[r.estado] || 0) + 1);

  // v_remitos_stats: {total, byEstado} — cubre las 4 KPIs y los filterChips enteros.
  const srvStats = window.useEntityStats('remitos');
  const kTotal = srvStats ? srvStats.total : rows.length;
  const kByEstado = srvStats ? (srvStats.byEstado || {}) : counts;

  return (
    <EntityListScreen
      eyebrow="Documentos · Remitos"
      title="Remitos"
      description="Remitos de entrega de Micos a los clientes, generados desde los expedientes."
      secondaryAction={{ label: 'Exportar', icon: IconDownload }}
      kpis={[
        { label: 'Total', value: String(kTotal), deltaTone: 'neutral', icon: IconTruck },
        { label: 'Entregados', value: String((kByEstado.ENTREGADO || 0) + (kByEstado.CONFIRMADO || 0)), deltaTone: 'pos', icon: IconCheckCircle },
        { label: 'En tránsito', value: String(kByEstado.EN_TRANSITO || 0), deltaTone: 'info', icon: IconArrowUpRight },
        { label: 'Pendientes', value: String(kByEstado.PENDIENTE || 0), deltaTone: (kByEstado.PENDIENTE || 0) > 0 ? 'warn' : 'neutral', icon: IconClock },
      ]}
      filterChips={{
        options: Object.entries(REM_DOC_ESTADOS).map(([v, c]) => ({ label: c.label, value: v, count: kByEstado[v] || 0 })).filter((o) => o.count > 0),
        applyFilter: (r, v) => r.estado === v,
      }}
      columns={[
        { key: 'publicId', label: 'Remito', width: '180px', render: (r) => <IdDateCell id={r.publicId} date={r.fechaCreacion} /> },
        { key: 'expedienteId', label: 'Expediente', width: '160px', render: (r) => _docExpCol(r.expedienteId) },
        { key: 'fechaEntrega', label: 'Entrega', width: '140px', render: (r) => <span className="text-[12px] font-mono tabular-nums" style={{ color: r.fechaEntrega ? 'var(--foreground)' : 'color-mix(in oklab, var(--muted-foreground) 50%, transparent)' }}>{r.fechaEntrega ? _docDate(r.fechaEntrega) : '—'}</span> },
        { key: 'items', label: 'Ítems', width: '90px', render: (r) => <span className="text-[13px] font-bold tabular-nums" style={{ color: 'var(--foreground)' }}>{(r.itemsReal || []).length}</span> },
        { key: 'estado', label: 'Estado', width: '140px', render: (r) => <TablePill label={(REM_DOC_ESTADOS[r.estado] || {}).label || r.estado} tone={(REM_DOC_ESTADOS[r.estado] || {}).tone || 'neutral'} /> },
      ]}
      rows={rows}
      collection="remitos"
      searchPlaceholder="Buscar por N° o expediente…"
      searchFilter={(r, q) => r.publicId.toLowerCase().includes(q) || _docExpPid(r.expedienteId).toLowerCase().includes(q)}
      onRowClick={(r) => onOpen && onOpen(r)}
      dateField="fechaCreacion"
      // Orden por defecto: más nuevo → más viejo por fecha de creación, desempata
      // por publicId (P15 — mismo molde que screens/expedientes/lista.jsx).
      sortRows={(a, b) =>
        (b.fechaCreacion || '').localeCompare(a.fechaCreacion || '') ||
        (b.publicId || '').localeCompare(a.publicId || '')
      }
      exportFilename="Remitos"
      exportConfig={[
        { label: 'Remito', value: (r) => r.publicId },
        { label: 'Fecha', value: (r) => r.fechaCreacion },
        { label: 'Expediente', value: (r) => _docExpPid(r.expedienteId) },
        { label: 'Entrega', value: (r) => r.fechaEntrega || '' },
        { label: 'Ítems', value: (r) => (r.itemsReal || []).length },
        { label: 'Estado', value: (r) => (REM_DOC_ESTADOS[r.estado] || {}).label || r.estado },
      ]}
    />
  );
}

Object.assign(window, { RemitosScreen });