// Compliance dashboard.
const { useState: useStateDash, useMemo: useMemoDash } = React;

function StatusBadge({ status }) {
  if (status === 'compliant') return <span className="badge success dot">Compliant</span>;
  if (status === 'attention') return <span className="badge warning dot">Needs attention</span>;
  return <span className="badge danger dot">Non-compliant</span>;
}

function SortHeader({ id, sortKey, dir, onSort, children, align }) {
  const active = sortKey === id;
  return (
    <th className="sortable" onClick={() => onSort(id)} style={{ textAlign: align || 'left' }}>
      {children}
      <span className="sort-ind">{active ? (dir === 'asc' ? '↑' : '↓') : ''}</span>
    </th>
  );
}

function Dashboard({ teams, onOpenTeam, readOnly, mode }) {
  const isStarter = mode === 'starter-pack';
  const [sortKey, setSortKey] = useStateDash('status');
  const [dir, setDir] = useStateDash('asc');
  const [filter, setFilter] = useStateDash('all');

  const statusRank = { noncompliant: 0, attention: 1, compliant: 2 };

  const filtered = useMemoDash(() => {
    let list = teams.slice();
    if (filter !== 'all') list = list.filter(t => t.status === filter);
    list.sort((a, b) => {
      let av, bv;
      if (sortKey === 'name' || sortKey === 'sport') { av = a[sortKey]; bv = b[sortKey]; }
      else if (sortKey === 'status') { av = statusRank[a.status]; bv = statusRank[b.status]; }
      else if (sortKey === 'roster') { av = a.rosterFiled ? 1 : 0; bv = b.rosterFiled ? 1 : 0; }
      else if (sortKey === 'starter') { av = a.starterPack.done / a.starterPack.total; bv = b.starterPack.done / b.starterPack.total; }
      else if (sortKey === 'forms') { av = a.pendingForms; bv = b.pendingForms; }
      else if (sortKey === 'budget') { av = a.budget.spent / a.budget.allocated; bv = b.budget.spent / b.budget.allocated; }
      else if (sortKey === 'activity') { av = a.lastActivity; bv = b.lastActivity; }
      if (av < bv) return dir === 'asc' ? -1 : 1;
      if (av > bv) return dir === 'asc' ? 1 : -1;
      return 0;
    });
    return list;
  }, [teams, sortKey, dir, filter]);

  function onSort(k) {
    if (sortKey === k) setDir(d => d === 'asc' ? 'desc' : 'asc');
    else { setSortKey(k); setDir('asc'); }
  }

  const counts = useMemoDash(() => ({
    compliant: teams.filter(t => t.status === 'compliant').length,
    attention: teams.filter(t => t.status === 'attention').length,
    noncompliant: teams.filter(t => t.status === 'noncompliant').length,
    late: 2, // demo
    starterDone: teams.reduce((s, t) => s + t.starterPack.done, 0),
    starterTotal: teams.reduce((s, t) => s + t.starterPack.total, 0),
    starterCompleteTeams: teams.filter(t => t.starterPack.done === t.starterPack.total).length,
    starterMissing: teams.reduce((s, t) => s + (t.starterPack.total - t.starterPack.done), 0),
  }), [teams]);

  return (
    <div data-screen-label={isStarter ? '09 Starter pack' : '02 Teams'}>
      <div className="page-head">
        <div>
          <h1 className="page-title">{isStarter ? 'Starter pack' : 'Teams'}</h1>
          <div className="page-subtitle">
            Spring 2026 · {teams.length} active club teams
          </div>
        </div>
        <div className="flex-gap-8">
          <button className="btn btn-secondary">
            <window.I.Download size={14} />
            Export report
          </button>
        </div>
      </div>

      <div className="metric-grid">
        <div className="card metric success">
          <div className="metric-label">
            <span className="pill-icon"><window.I.CheckCircle size={14} /></span>
            Fully compliant
          </div>
          <div className="metric-value">{counts.compliant}</div>
          <div className="metric-trend">of {teams.length} teams · +1 this week</div>
        </div>
        <div className="card metric warning">
          <div className="metric-label">
            <span className="pill-icon"><window.I.AlertTriangle size={14} /></span>
            Needs attention
          </div>
          <div className="metric-value">{counts.attention}</div>
          <div className="metric-trend">starter packs incomplete</div>
        </div>
        <div className="card metric danger">
          <div className="metric-label">
            <span className="pill-icon"><window.I.AlertCircle size={14} /></span>
            Non-compliant
          </div>
          <div className="metric-value">{counts.noncompliant}</div>
          <div className="metric-trend">missing roster or critical forms</div>
        </div>
        <div className="card metric danger">
          <div className="metric-label">
            <span className="pill-icon"><window.I.Clock size={14} /></span>
            Late event submissions
          </div>
          <div className="metric-value">{counts.late}</div>
          <div className="metric-trend">under 14 days · not reimbursable</div>
        </div>
      </div>

      <div className="card">
        <div className="flex-between" style={{ padding: '14px 18px', borderBottom: '1px solid var(--border)' }}>
          <div className="flex-gap-8">
            <strong style={{ fontSize: 13 }}>Teams</strong>
            <span className="dim" style={{ fontSize: 12 }}>· {filtered.length} shown</span>
          </div>
          <div className="flex-gap-8">
            {['all','noncompliant','attention','compliant'].map(f => (
              <button
                key={f}
                className={`btn btn-xs ${filter === f ? 'btn-secondary' : 'btn-ghost'}`}
                onClick={() => setFilter(f)}
              >
                {f === 'all' ? 'All' : f === 'noncompliant' ? 'Non-compliant' : f === 'attention' ? 'Attention' : 'Compliant'}
              </button>
            ))}
          </div>
        </div>
        <div className="table-wrap">
          <table className="data">
            <thead>
              <tr>
                <SortHeader id="name" sortKey={sortKey} dir={dir} onSort={onSort}>Team</SortHeader>
                <SortHeader id="sport" sortKey={sortKey} dir={dir} onSort={onSort}>Sport</SortHeader>
                <SortHeader id="status" sortKey={sortKey} dir={dir} onSort={onSort}>Status</SortHeader>
                <SortHeader id="roster" sortKey={sortKey} dir={dir} onSort={onSort}>Roster</SortHeader>
                <SortHeader id="starter" sortKey={sortKey} dir={dir} onSort={onSort}>Starter pack</SortHeader>
                <SortHeader id="forms" sortKey={sortKey} dir={dir} onSort={onSort}>Pending forms</SortHeader>
                <SortHeader id="budget" sortKey={sortKey} dir={dir} onSort={onSort}>Budget used</SortHeader>
                <SortHeader id="activity" sortKey={sortKey} dir={dir} onSort={onSort}>Last activity</SortHeader>
              </tr>
            </thead>
            <tbody>
              {filtered.map(t => {
                const pct = Math.round((t.starterPack.done / t.starterPack.total) * 100);
                const budgetPct = Math.round((t.budget.spent / t.budget.allocated) * 100);
                return (
                  <tr key={t.id} className="clickable" onClick={() => onOpenTeam(t.id)}>
                    <td>
                      <strong style={{ fontWeight: 600 }}>{t.name}</strong>
                    </td>
                    <td><span className="tag-sport">{t.sport}</span></td>
                    <td><StatusBadge status={t.status} /></td>
                    <td>
                      {t.rosterFiled
                        ? <span className="checkmark"><window.I.Check size={16} /></span>
                        : <span className="crossmark"><window.I.X size={16} /></span>}
                    </td>
                    <td>
                      <span className="progress"><span className="progress-fill" style={{ width: `${pct}%` }} /></span>
                      <span className="cell-mono" style={{ fontSize: 12 }}>{t.starterPack.done}/{t.starterPack.total}</span>
                    </td>
                    <td className="cell-mono">
                      {t.pendingForms === 0
                        ? <span className="dim">—</span>
                        : <span className={t.pendingForms > 2 ? 'crimson' : 'gold'}>{t.pendingForms}</span>}
                    </td>
                    <td className="cell-mono">
                      <span style={{ color: budgetPct > 90 ? '#f0a0a0' : 'var(--text)' }}>${t.budget.spent.toLocaleString()}</span>
                      <span className="dim"> / ${t.budget.allocated.toLocaleString()}</span>
                    </td>
                    <td className="cell-muted">{t.lastActivity}</td>
                  </tr>
                );
              })}
              {filtered.length === 0 && (
                <tr>
                  <td colSpan={8}>
                    <div className="empty">
                      <div className="empty-icon"><window.I.Inbox size={20} /></div>
                      <div className="empty-title">No teams match this filter</div>
                      <div className="empty-msg">Try a different status, or upload your first roster.</div>
                      <button className="btn btn-primary"><window.I.Upload size={14} /> Upload roster</button>
                    </div>
                  </td>
                </tr>
              )}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

window.Dashboard = Dashboard;
window.StatusBadge = StatusBadge;
window.SortHeader = SortHeader;