// E-board tab for team drill-down.
const { useState: useStateE } = React;

function initials(name) {
  return (name || '').split(' ').map(p => p[0]).slice(0, 2).join('').toUpperCase();
}

function EboardTab({ team, user }) {
  const board = window.AppData.EBOARDS[team.id] || [];
  const coach = window.AppData.COACHES[team.id];
  const canEdit = user.role === 'super_admin' || user.role === 'cs_president' || user.role === 'staff_admin';

  const trainedCount = board.filter(m => m.trainingDone).length;
  const safCount = (window.AppData.TRANSACTIONS[team.id] || []).filter(t => board.some(b => b.email === t.officer?.email)).length;

  return (
    <div>
      <div className="metric-grid" style={{ gridTemplateColumns: 'repeat(4, 1fr)' }}>
        <div className="card metric">
          <div className="metric-label">E-board size</div>
          <div className="metric-value">{board.length}</div>
          <div className="metric-trend">officers on file</div>
        </div>
        <div className="card metric success">
          <div className="metric-label">
            <span className="pill-icon"><window.I.ShieldCheck size={14} /></span>
            Officer training
          </div>
          <div className="metric-value">{trainedCount}/{board.length}</div>
          <div className="metric-trend">Title IX + risk training current</div>
        </div>
        <div className="card metric">
          <div className="metric-label">SAFs filed by E-board</div>
          <div className="metric-value">{safCount}</div>
          <div className="metric-trend">this fiscal year</div>
        </div>
        <div className="card metric">
          <div className="metric-label">Coach / advisor</div>
          <div className="metric-value" style={{ fontSize: 16 }}>
            {coach ? coach.name : <span className="dim">None on file</span>}
          </div>
          <div className="metric-trend">{coach ? `${coach.kind}${coach.volunteer ? ' · volunteer' : ' · paid'}` : 'Add a coach or advisor'}</div>
        </div>
      </div>

      <div className="flex-between mb-12">
        <h2 className="section-title" style={{ margin: 0 }}>
          E-board officers
          <span className="count">{board.length}</span>
        </h2>
        {canEdit && (
          <div className="flex-gap-8">
            <button className="btn btn-secondary btn-sm"><window.I.Mail size={13} /> Email E-board</button>
            <button className="btn btn-primary btn-sm"><window.I.Plus size={13} /> Add officer</button>
          </div>
        )}
      </div>

      <div className="eboard-grid">
        {board.map(m => (
          <div key={m.id} className={`eboard-card ${m.primary ? 'primary' : ''}`}>
            <div className="eboard-head">
              <span className="eboard-avatar">{initials(m.name)}</span>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div className="eboard-pos">{m.position}</div>
                <div className="eboard-name">{m.name}</div>
              </div>
              {m.primary && <span className="badge gold">Primary contact</span>}
            </div>
            <div className="eboard-meta">
              <span>{m.email}</span>
              <span className="dim">{m.phone}</span>
            </div>
            <div className="flex-gap-8" style={{ borderTop: '1px solid var(--border)', paddingTop: 10, marginTop: 4, justifyContent: 'space-between', fontSize: 11 }}>
              <span className="dim">
                Term {m.termsServed > 1 ? `${m.termsServed} of multiple` : '1 of multiple'}
              </span>
              {m.trainingDone
                ? <span className="badge success"><window.I.Check size={11} /> Training</span>
                : <span className="badge danger"><window.I.X size={11} /> Training overdue</span>}
            </div>
          </div>
        ))}
      </div>

      <h2 className="section-title">
        Coach + advisor
      </h2>
      {coach ? (
        <div className="card card-pad">
          <div className="flex-between">
            <div className="flex-gap-12">
              <span className="eboard-avatar" style={{ width: 40, height: 40, fontSize: 14 }}>{initials(coach.name)}</span>
              <div>
                <div style={{ fontWeight: 600 }}>{coach.name}</div>
                <div className="dim" style={{ fontSize: 12 }}>{coach.kind} · {coach.volunteer ? 'Volunteer' : 'Paid staff'} · {coach.email}</div>
              </div>
            </div>
            <div className="flex-gap-8">
              <span className="badge success"><window.I.ShieldCheck size={11} /> Background check current</span>
              {canEdit && <button className="btn btn-ghost btn-sm"><window.I.Edit size={13} /> Edit</button>}
            </div>
          </div>
        </div>
      ) : (
        <div className="card">
          <div className="empty" style={{ padding: '32px 20px' }}>
            <div className="empty-icon"><window.I.User size={20} /></div>
            <div className="empty-title">No coach or advisor on file</div>
            <div className="empty-msg">Many leagues require a faculty/staff advisor. Add one to stay eligible.</div>
            {canEdit && <button className="btn btn-primary btn-sm"><window.I.Plus size={13} /> Add coach or advisor</button>}
          </div>
        </div>
      )}

      <h2 className="section-title">
        Officer changeover
      </h2>
      <div className="card card-pad">
        <div className="flex-between mb-8">
          <div>
            <div style={{ fontWeight: 600 }}>2026–27 transition</div>
            <div className="dim" style={{ fontSize: 12 }}>Officer registration form due by June 30, 2026.</div>
          </div>
          <span className="badge warning">In planning</span>
        </div>
        <div className="dim" style={{ fontSize: 12 }}>
          When the new E-board is named, file the officer registration form and we'll auto-update primary contacts here.
        </div>
      </div>
    </div>
  );
}

window.EboardTab = EboardTab;