// ─── Caja Chica · Lista (movimientos con saldo corrido) ───────────────────
// getCajaChicaWithSaldo (cálculo de saldo corrido) + CajaChicaScreen. Extraída de
// screens-others.jsx (P9, split del cajón de 5 módulos). Expone a window:
// getCajaChicaWithSaldo, CajaChicaScreen, resolveResponsableName. Consume
// formatMoney/formatDate (dominio/formato.js), expedienteLabelFromId
// (screens/compras/combobox.jsx), window.USUARIOS.
//
// P9 — write-path real: `responsable` (nombre libre tipeado) NO es columna real
// de `caja_chica` (la columna es `responsable_id`, uuid FK a usuarios — P2); el
// GET tampoco embebe el nombre. resolveResponsableName resuelve client-side
// contra window.USUARIOS (colección chica, 100% hidratada) — mismo criterio que
// expedienteLabelFromId. Sin esto, tras un refresh, la columna "Usuario" y el
// filtro por responsable quedarían vacíos/rotos para cualquier movimiento real
// (antes: `m.responsable.toLowerCase()` en el searchFilter directamente
// reventaba con undefined en cuanto la fila viniera de la DB, no de la sesión).
function resolveResponsableName(m) {
  if (!m) return '';
  const u = (window.USUARIOS || []).find((x) => x.id === m.responsableId);
  return u ? `${u.nombre} ${u.apellido}`.trim() : '';
}

// Helper: enrich movements with running saldo (sorted ascending → reverse for display)
// Saldo inicial 0: el fondo de arranque real se define al cargar la caja chica (datos externos);
// sin movimientos el saldo no debe mostrar un fondo ficticio.
const CAJA_CHICA_SALDO_INICIAL = 0;
function getCajaChicaWithSaldo() {
  const asc = [...CAJA_CHICA].sort((a, b) => {
    const k1 = a.fecha + ' ' + (a.hora || '');
    const k2 = b.fecha + ' ' + (b.hora || '');
    return k1.localeCompare(k2);
  });
  let running = CAJA_CHICA_SALDO_INICIAL;
  const enriched = asc.map((m) => {
    running = running + (m.tipo === 'INGRESO' ? m.monto : -m.monto);
    return { ...m, saldo: running };
  });
  return { rows: enriched.reverse(), saldoActual: running };
}

function CajaChicaScreen({ onOpen, onNew }) {
  const { rows: withSaldo, saldoActual } = getCajaChicaWithSaldo();
  const totalIngresos = CAJA_CHICA.filter((m) => m.tipo === 'INGRESO').reduce((s, m) => s + m.monto, 0);
  const totalEgresos = CAJA_CHICA.filter((m) => m.tipo === 'EGRESO').reduce((s, m) => s + m.monto, 0);

  const nombresResponsables = Array.from(new Set(CAJA_CHICA.map((m) => resolveResponsableName(m)).filter(Boolean)));

  return (
    <EntityListScreen
      eyebrow="Herramientas · Caja Chica"
      rowChevron
      title="Caja Chica"
      description="Movimientos diarios de fondos pequeños — viáticos, insumos, gastos menores."
      primaryAction={{ label: 'Nuevo movimiento', icon: IconPlus, onClick: onNew }}
      secondaryAction={{ label: 'Exportar', icon: IconDownload }}
      kpis={[
        { label: 'Saldo actual',    value: formatMoneyShort(saldoActual), delta: 'Disponible',  deltaTone: 'neutral', icon: IconWallet },
        { label: 'Ingresos',        value: formatMoneyShort(totalIngresos), delta: `${CAJA_CHICA.filter((m) => m.tipo === 'INGRESO').length} reposiciones`, deltaTone: 'neutral', icon: IconArrowUpRight },
        { label: 'Egresos',         value: formatMoneyShort(totalEgresos), delta: `${CAJA_CHICA.filter((m) => m.tipo === 'EGRESO').length} salidas`, deltaTone: 'neutral', icon: IconTrendingUp },
        { label: 'Movimientos',     value: String(CAJA_CHICA.length), delta: 'Registrados', deltaTone: 'neutral', icon: IconFileText },
      ]}
      topChips={{
        allLabel: 'Todos',
        options: nombresResponsables.map((r) => ({
          label: r,
          value: r,
          count: CAJA_CHICA.filter((m) => resolveResponsableName(m) === r).length,
        })),
        applyFilter: (m, v) => resolveResponsableName(m) === v,
      }}
      filterChips={{
        options: [
          { label: 'Ingresos', value: 'INGRESO', count: CAJA_CHICA.filter((m) => m.tipo === 'INGRESO').length },
          { label: 'Egresos',  value: 'EGRESO',  count: CAJA_CHICA.filter((m) => m.tipo === 'EGRESO').length },
        ],
        applyFilter: (m, v) => m.tipo === v,
      }}
      columns={[
        { key: 'publicId', label: 'ID · Fecha', width: 'minmax(150px, 1fr)',
          render: (m) => <IdDateCell id={m.publicId} date={m.fecha} /> },
        { key: 'concepto', label: 'Concepto · Empresa', width: 'minmax(200px, 1fr)',
          render: (m) => (
            <div className="min-w-0">
              <p className="text-[13px] font-bold truncate" style={{ color: 'var(--foreground)' }}>{m.concepto}</p>
              {m.empresa ? (
                <p className="text-[11.5px] mt-0.5 truncate" style={{ color: 'var(--muted-foreground)' }}>{m.empresa}</p>
              ) : (
                <p className="text-[11.5px] mt-0.5" style={{ color: 'color-mix(in oklab, var(--muted-foreground) 55%, transparent)', fontStyle: 'italic' }}>—</p>
              )}
            </div>
          ),
        },
        { key: 'monto', label: 'Monto', width: 'minmax(130px, 1fr)',
          render: (m) => m.tipo === 'INGRESO'
            ? <span className="text-[13px] font-bold tabular-nums" style={{ color: 'var(--success)' }}>+ {formatMoney(m.monto)}</span>
            : <span className="text-[13px] font-bold tabular-nums" style={{ color: 'var(--danger)' }}>− {formatMoney(m.monto)}</span>,
        },
        { key: 'saldo', label: 'Saldo', width: 'minmax(130px, 1fr)',
          render: (m) => <span className="text-[13px] font-extrabold tabular-nums" style={{ color: 'var(--foreground)' }}>{formatMoney(m.saldo)}</span> },
        { key: 'responsable', label: 'Usuario', width: 'minmax(140px, 1fr)',
          render: (m) => {
            const name = resolveResponsableName(m);
            return name
              ? <span className="text-[12.5px] font-semibold" style={{ color: 'var(--foreground)' }}>{name}</span>
              : <span className="text-[12.5px]" style={{ color: 'color-mix(in oklab, var(--muted-foreground) 60%, transparent)' }}>—</span>;
          } },
      ]}
      rows={withSaldo}
      searchPlaceholder="Buscar por concepto, empresa o usuario…"
      searchFilter={(m, q) =>
        (m.concepto || '').toLowerCase().includes(q) ||
        (m.empresa || '').toLowerCase().includes(q) ||
        resolveResponsableName(m).toLowerCase().includes(q) ||
        (m.publicId || '').toLowerCase().includes(q)
      }
      onRowClick={onOpen}
      dateField="fecha"
      exportFilename="Caja Chica"
      exportConfig={[
        { label: 'ID', value: (m) => m.publicId },
        { label: 'Fecha', value: (m) => m.fecha },
        { label: 'Hora', value: (m) => m.hora || '' },
        { label: 'Concepto', value: (m) => m.concepto },
        { label: 'Empresa', value: (m) => m.empresa || '' },
        { label: 'Tipo', value: (m) => (m.tipo === 'INGRESO' ? 'Ingreso' : 'Egreso') },
        { label: 'Monto', value: (m) => (m.tipo === 'INGRESO' ? m.monto : -m.monto) },
        { label: 'Saldo', value: (m) => m.saldo },
        { label: 'Usuario', value: (m) => resolveResponsableName(m) },
        { label: 'Expediente', value: (m) => expedienteLabelFromId(m.expedienteId, '') },
      ]}
    />
  );
}

Object.assign(window, { getCajaChicaWithSaldo, CajaChicaScreen, resolveResponsableName });