// ─── Dashboard · Compartido ──────────────────────────────────────────────
// DashSection (header+KPIs+tabla, wrapper genérico) + DashTable (tabla top-7
// genérica) + srvOr (merge srv-stats/fallback local). Extraídos de
// screens-dashboard.jsx (P10, split en screens/dashboard/) — los usan
// operaciones.jsx/finanzas-lado.jsx/directorio.jsx/herramientas.jsx/panel.jsx.
//
// FIX (mapa-comprension.md §inv-dash, duplicación #3 — "boilerplate srv-stats
// vs fallback repetido en las 12 secciones"): `srvOr(srvStats, campo,
// fallbackLocal)` reemplaza el ternario `srvStats ? srvStats.campo :
// fallbackLocal` que cada sección repetía 3-4 veces. Es una función plana (no
// un hook — `useEntityStats` ya es el hook, se sigue llamando UNA vez por
// sección tal cual); esto solo colapsa la lectura del resultado.
//
// Expone a window: DashSection, DashTable, srvOr. Consume window.IconArrowUpRight
// (ui/icons.jsx).

// ─── srv/local merge (helper compartido) ──────────────────────────
function srvOr(srvStats, field, fallback) {
  return srvStats ? srvStats[field] : fallback;
}

// ─── Helpers de celda (compactas) ─────────────────
// FIX (mapa-comprension.md §inv-dash, duplicación #1 — "celda ID+fecha
// reimplementada a mano en vez de IdDateCell"): la composición <MonoId>+
// <TextMuted mono> para la primera columna (id + fecha) de 11 de las 12
// secciones se reemplaza por `IdDateCell` canónico (ui/primitives.jsx, P4).
// MonoId/TextBold/TextMuted/NumBold se mantienen para el resto de las celdas
// (ids sueltos sin fecha, nombres, montos) que SÍ siguen siendo composiciones
// propias del dashboard sin equivalente canónico.
const MonoId = ({ children }) => (
  <span className="font-mono text-[12px] font-bold tracking-wide uppercase" style={{ color: 'var(--accent)' }}>
    {children}
  </span>
);
const TextBold = ({ children }) => (
  <p className="text-[13px] font-bold truncate" style={{ color: 'var(--foreground)' }}>{children}</p>
);
const TextMuted = ({ children, mono }) => (
  <p className={`text-[11.5px] truncate ${mono ? 'font-mono tabular-nums' : ''}`} style={{ color: 'var(--muted-foreground)' }}>
    {children}
  </p>
);
const NumBold = ({ children }) => (
  <span className="text-[13.5px] font-extrabold tabular-nums" style={{ color: 'var(--foreground)' }}>{children}</span>
);

// ─── Section wrapper ──────────────────────────────
function DashSection({ eyebrow, title, route, onNav, kpis, children, animDelay = 0 }) {
  return (
    <section
      className="space-y-4 animate-fade-in-up"
      style={{ animationDelay: `${animDelay}ms` }}
    >
      <div className="flex items-end justify-between gap-4 flex-wrap">
        <div className="min-w-0">
          <p className="text-[11px] font-bold uppercase tracking-[0.18em]" style={{ color: 'var(--accent)' }}>
            {eyebrow}
          </p>
          <h2 className="text-[clamp(20px,2.6vw,24px)] font-extrabold tracking-[-0.02em] mt-1.5" style={{ color: 'var(--foreground)' }}>
            {title}
          </h2>
        </div>
        {route && (
          <button
            type="button"
            onClick={() => onNav(route)}
            className="text-[11.5px] font-bold uppercase tracking-[0.1em] flex items-center gap-1 cursor-pointer"
            style={{ color: 'var(--accent)' }}
          >
            Ver todo
            <IconArrowUpRight size={13} />
          </button>
        )}
      </div>

      {kpis && (
        <div className="grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4 stagger">
          {kpis.map((k, i) => <KpiCard key={i} {...k} />)}
        </div>
      )}

      {children}
    </section>
  );
}

// ─── Reusable compact table ───────────────────────
// rows = full list; siempre tomamos los primeros 7.
function DashTable({ caption, columns, rows, onRowClick, emptyLabel = 'Sin movimientos', emptyHint }) {
  const gridTpl = columns.map(c => c.width || '1fr').join(' ');
  const minW = columns.reduce((s, c) => {
    const w = c.width || '1fr';
    return s + (w.includes('fr') ? 180 : (parseInt(w, 10) || 130));
  }, 0);
  const safeRows = (rows || []).slice(0, 7);
  const empty = safeRows.length === 0;

  return (
    <div
      className="rounded-2xl overflow-hidden"
      style={{
        background: 'var(--card)',
        border: '1px solid color-mix(in oklab, var(--border) 55%, transparent)',
        boxShadow: 'var(--shadow-card)',
      }}
    >
      {caption && (
        <div
          className="px-5 py-3"
          style={{ borderBottom: '1px solid color-mix(in oklab, var(--border) 45%, transparent)' }}
        >
          <p className="text-[10.5px] font-bold uppercase tracking-[0.16em]" style={{ color: 'var(--muted-foreground)' }}>
            {caption}
          </p>
        </div>
      )}

      <div style={{ overflowX: 'auto' }}>
        <div style={{ minWidth: `${minW}px` }}>
          {/* Head */}
          <div
            className="grid gap-4 px-5 py-2.5 text-[10.5px] font-bold uppercase tracking-[0.08em]"
            style={{
              gridTemplateColumns: gridTpl,
              color: 'var(--muted-foreground)',
              borderBottom: '1px solid color-mix(in oklab, var(--border) 50%, transparent)',
            }}
          >
            {columns.map(c => (
              <div key={c.key} className={c.align === 'right' ? 'text-right' : ''}>{c.label}</div>
            ))}
          </div>

          {/* Body */}
          {empty ? (
            <div className="px-5 py-12 text-center">
              <p className="text-[13px] font-semibold" style={{ color: 'var(--muted-foreground)' }}>
                {emptyLabel}
              </p>
              {emptyHint && (
                <p className="text-[11.5px] mt-1.5" style={{ color: 'color-mix(in oklab, var(--muted-foreground) 70%, transparent)' }}>
                  {emptyHint}
                </p>
              )}
            </div>
          ) : (
            safeRows.map((row, idx) => {
              const handler = onRowClick ? () => onRowClick(row) : undefined;
              const Tag = handler ? 'button' : 'div';
              return (
                <Tag
                  key={row.id || idx}
                  type={handler ? 'button' : undefined}
                  onClick={handler}
                  className={`${handler ? 'exp-row cursor-pointer' : ''} w-full grid gap-4 px-5 py-3 items-center text-left`}
                  style={{
                    gridTemplateColumns: gridTpl,
                    borderBottom: idx < safeRows.length - 1
                      ? '1px solid color-mix(in oklab, var(--border) 40%, transparent)'
                      : 'none',
                  }}
                >
                  {columns.map(c => (
                    <div key={c.key} className={`min-w-0 ${c.align === 'right' ? 'text-right' : ''}`}>
                      {c.render(row)}
                    </div>
                  ))}
                </Tag>
              );
            })
          )}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { DashSection, DashTable, srvOr, MonoId, TextBold, TextMuted, NumBold });