// admin-ui.jsx — Primitive components for the back-office (part 1).
// KPI tiles, page header, tables, status pills, role chip, etc.

// ── Page chrome ──────────────────────────────────────────────
function PageHeader({ eyebrow, title, subtitle, right }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between',
      padding: '24px 32px 18px',
      borderBottom: '1px solid var(--line)',
      background: 'var(--panel)',
    }}>
      <div>
        {eyebrow && <div className="eyebrow" style={{ marginBottom: 4 }}>{eyebrow}</div>}
        <h1 style={{ margin: 0, fontSize: 26, fontWeight: 700, letterSpacing: -0.5, lineHeight: 1.15 }}>{title}</h1>
        {subtitle && <div style={{ fontSize: 14, color: 'var(--muted)', marginTop: 5, lineHeight: 1.5 }}>{subtitle}</div>}
      </div>
      {right && <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>{right}</div>}
    </div>
  );
}

function PageBody({ children, style }) {
  return (
    <div style={{
      flex: 1, overflowY: 'auto',
      padding: '20px 32px 40px',
      ...style,
    }}>{children}</div>
  );
}

// ── KPI tile ─────────────────────────────────────────────────
function KPI({ label, value, sub, tone = 'neutral', icon, delta, deltaTone, footer, onClick }) {
  const tones = {
    neutral:  { bg: 'var(--panel)',     border: 'var(--line)',          accent: 'var(--text)' },
    accent:   { bg: 'var(--panel)',     border: 'var(--line)',          accent: 'var(--accent)' },
    info:     { bg: 'var(--panel)',     border: 'var(--line)',          accent: 'var(--info)' },
    good:     { bg: 'var(--panel)',     border: 'var(--line)',          accent: 'var(--good)' },
    warn:     { bg: 'var(--panel)',     border: 'var(--line)',          accent: 'var(--warn)' },
    bad:      { bg: 'var(--panel)',     border: 'var(--line)',          accent: 'var(--bad)' },
    dark:     { bg: '#0F172A',          border: '#0F172A',              accent: '#fff' },
  }[tone] || {};
  const isDark = tone === 'dark';
  return (
    <div onClick={onClick} style={{
      background: tones.bg, border: `1px solid ${tones.border}`,
      borderRadius: 14, padding: '16px 18px',
      cursor: onClick ? 'pointer' : 'default',
      transition: 'transform 120ms ease, box-shadow 120ms ease',
      color: isDark ? '#fff' : 'var(--text)',
      display: 'flex', flexDirection: 'column', gap: 10,
      position: 'relative', overflow: 'hidden',
    }}
      onMouseEnter={e => onClick && (e.currentTarget.style.boxShadow = 'var(--shadow-md)')}
      onMouseLeave={e => onClick && (e.currentTarget.style.boxShadow = 'none')}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div className="eyebrow" style={{ color: isDark ? 'rgba(255,255,255,0.6)' : 'var(--muted)' }}>{label}</div>
        {icon && (
          <div style={{
            color: tones.accent, opacity: isDark ? 1 : 0.85,
          }}>{icon}</div>
        )}
      </div>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
        <span className="tnum" style={{
          fontSize: 30, fontWeight: 700, letterSpacing: -0.6, lineHeight: 1,
          color: tone === 'accent' ? 'var(--accent)' : (isDark ? '#fff' : 'var(--text)'),
          fontFamily: 'var(--font-mono)',
        }}>{value}</span>
        {sub && <span style={{ fontSize: 13, color: isDark ? 'rgba(255,255,255,0.55)' : 'var(--muted)' }}>{sub}</span>}
        {delta != null && (
          <span style={{
            fontSize: 12, fontWeight: 600,
            color: deltaTone === 'good' ? 'var(--good)' : deltaTone === 'bad' ? 'var(--bad)' : 'var(--muted)',
            marginLeft: 'auto',
          }}>{delta}</span>
        )}
      </div>
      {footer && <div style={{ fontSize: 12, color: isDark ? 'rgba(255,255,255,0.55)' : 'var(--muted)' }}>{footer}</div>}
    </div>
  );
}

// ── Status pill (with severity dot) ──────────────────────────
function Pill({ tone = 'neutral', children, icon }) {
  const tones = {
    good:    { bg: 'var(--good-soft)',  fg: 'var(--good)' },
    warn:    { bg: 'var(--warn-soft)',  fg: 'var(--warn)' },
    bad:     { bg: 'var(--bad-soft)',   fg: 'var(--bad)' },
    info:    { bg: 'var(--info-soft)',  fg: 'var(--info)' },
    indigo:  { bg: 'var(--indigo-soft)',fg: 'var(--indigo)' },
    accent:  { bg: 'var(--accent-soft)',fg: 'var(--accent-deep)' },
    neutral: { bg: 'var(--panel-3)',    fg: 'var(--text-2)' },
    dark:    { bg: '#0F172A',           fg: '#fff' },
  }[tone] || {};
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 5,
      padding: '2px 9px', borderRadius: 100,
      background: tones.bg, color: tones.fg,
      fontSize: 11.5, fontWeight: 600, letterSpacing: 0.2,
      fontFamily: 'var(--font-sans)',
      whiteSpace: 'nowrap',
    }}>
      {icon}
      {children}
    </span>
  );
}

// ── Table ────────────────────────────────────────────────────
function DataTable({ columns, rows, onRowClick, emptyText = 'No records.' }) {
  return (
    <div style={{
      background: 'var(--panel)',
      border: '1px solid var(--line)',
      borderRadius: 12, overflow: 'hidden',
    }}>
      <table className="tnum" style={{ width: '100%', fontSize: 13.5 }}>
        <thead>
          <tr style={{ background: 'var(--panel-2)', borderBottom: '1px solid var(--line)' }}>
            {columns.map(c => (
              <th key={c.key} style={{
                padding: '11px 16px', textAlign: c.align || 'left',
                fontSize: 11, fontWeight: 600, letterSpacing: 0.6, textTransform: 'uppercase',
                color: 'var(--muted)',
                width: c.width,
              }}>{c.label}</th>
            ))}
          </tr>
        </thead>
        <tbody>
          {rows.length === 0 && (
            <tr><td colSpan={columns.length} style={{ padding: 36, textAlign: 'center', color: 'var(--muted-2)' }}>{emptyText}</td></tr>
          )}
          {rows.map((r, i) => (
            <tr key={r.id || i}
              onClick={() => onRowClick && onRowClick(r)}
              style={{
                borderTop: i === 0 ? 'none' : '1px solid var(--line)',
                cursor: onRowClick ? 'pointer' : 'default',
                transition: 'background 80ms ease',
              }}
              onMouseEnter={e => onRowClick && (e.currentTarget.style.background = 'var(--panel-2)')}
              onMouseLeave={e => onRowClick && (e.currentTarget.style.background = '')}>
              {columns.map(c => (
                <td key={c.key} style={{
                  padding: '12px 16px',
                  textAlign: c.align || 'left',
                  verticalAlign: 'middle',
                  color: c.muted ? 'var(--muted)' : 'var(--text)',
                  fontFamily: c.mono ? 'var(--font-mono)' : 'inherit',
                  fontSize: c.mono ? 12.5 : 13.5,
                }}>{c.render ? c.render(r) : r[c.key]}</td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

Object.assign(window, { PageHeader, PageBody, KPI, Pill, DataTable });