// Team drill-down: Roster + Events + Budget tabs.
const { useState: useStateT, useMemo: useMemoT } = React;

const reimbBadge = window.reimbBadge;
const SortHeader = window.SortHeader;

function fmtSignedAt(iso) {
  if (!iso) return '';
  const d = new Date(iso);
  return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric' }) + ' · ' +
    d.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' });
}

function SignedPill({ field }) {
  if (field.signed) {
    return (
      <span className="badge success" title={`Signed ${fmtSignedAt(field.at)}`}>
        <window.I.Check size={11} />
        Signed
      </span>
    );
  }
  return <span className="badge danger" title="Not yet signed"><window.I.X size={11} /> Not signed</span>;
}

function TeamDrillDown({ team, onBack, user }) {
  const [tab, setTab] = useStateT('eboard');
  const sport = team.sport;
  return (
    <div data-screen-label="05 Team drill-down">
      <button className="back-link" onClick={onBack}>
        <window.I.ArrowLeft size={13} /> Dashboard
      </button>
      <div className="page-head">
        <div>
          <h1 className="page-title">
            {team.name}
            <span className="tag-sport">{sport}</span>
            <window.StatusBadge status={team.status} />
          </h1>
          <div className="page-subtitle">
            {team.starterPack.done}/{team.starterPack.total} starter packs signed · ${team.budget.spent.toLocaleString()} of ${team.budget.allocated.toLocaleString()} spent
          </div>
        </div>
        <div className="flex-gap-8">
          <button className="btn btn-secondary"><window.I.Mail size={14} /> Email officers</button>
          <button className="btn btn-secondary"><window.I.DotsVertical size={14} /></button>
        </div>
      </div>

      <div className="tabs">
        <button className={`tab ${tab === 'overview' ? 'active' : ''}`} onClick={() => setTab('overview')}>Overview</button>
        <button className={`tab ${tab === 'eboard' ? 'active' : ''}`} onClick={() => setTab('eboard')}>E-board</button>
        <button className={`tab ${tab === 'roster' ? 'active' : ''}`} onClick={() => setTab('roster')}>Roster</button>
        <button className={`tab ${tab === 'events' ? 'active' : ''}`} onClick={() => setTab('events')}>Events</button>
        <button className={`tab ${tab === 'forms' ? 'active' : ''}`} onClick={() => setTab('forms')}>
          Forms
          {(() => {
            const open = (window.AppData.FORMS || []).filter(f => f.teamId === team.id && (f.status === 'submitted' || f.status === 'review' || f.status === 'returned')).length;
            return open > 0 ? <span className="count" style={{ marginLeft: 6 }}>{open}</span> : null;
          })()}
        </button>
        <button className={`tab ${tab === 'budget' ? 'active' : ''}`} onClick={() => setTab('budget')}>Budget</button>
      </div>

      {tab === 'overview' && <window.TeamOverviewTab team={team} user={user} onSwitchTab={setTab} />}
      {tab === 'eboard' && <window.EboardTab team={team} user={user} />}
      {tab === 'roster' && <RosterTab team={team} user={user} />}
      {tab === 'events' && <TeamEventsTab team={team} />}
      {tab === 'forms' && <window.FormsScreen user={user} teamId={team.id} />}
      {tab === 'budget' && (
        <div className="card" style={{ overflow: 'hidden' }}>
          <window.LedgerView team={team} transactions={window.AppData.TRANSACTIONS[team.id] || []} canEdit={user.role !== 'cs_helper'} user={user} />
        </div>
      )}
    </div>
  );
}

function RosterTab({ team, user }) {
  const initial = window.AppData.ROSTERS[team.id] || [];
  const [members, setMembers] = useStateT(initial);
  const [sortKey, setSortKey] = useStateT('compliance');
  const [dir, setDir] = useStateT('asc');
  const [showAdd, setShowAdd] = useStateT(false);
  const [toastFor, setToastFor] = useStateT({});

  const canEdit = user.role !== 'cs_helper';

  const sorted = useMemoT(() => {
    const list = members.slice();
    list.sort((a, b) => {
      const scoreA = (a.waiver.signed ? 1 : 0) + (a.coc.signed ? 1 : 0) + (a.concussion.signed ? 1 : 0);
      const scoreB = (b.waiver.signed ? 1 : 0) + (b.coc.signed ? 1 : 0) + (b.concussion.signed ? 1 : 0);
      if (sortKey === 'compliance') {
        if (scoreA !== scoreB) return scoreA - scoreB;
        return a.name.localeCompare(b.name);
      }
      let av = a[sortKey], bv = b[sortKey];
      if (av < bv) return dir === 'asc' ? -1 : 1;
      if (av > bv) return dir === 'asc' ? 1 : -1;
      return 0;
    });
    return list;
  }, [members, sortKey, dir]);

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

  function resend(memberId, field) {
    const key = `${memberId}-${field}`;
    setToastFor(t => ({ ...t, [key]: true }));
    setTimeout(() => setToastFor(t => { const c = { ...t }; delete c[key]; return c; }), 1800);
  }

  function addMember(name, email) {
    setMembers(prev => [{
      id: 'new-' + Date.now(),
      name, email,
      waiver: { signed: false },
      coc: { signed: false },
      concussion: { signed: false },
    }, ...prev]);
    setShowAdd(false);
  }

  const allRedCount = members.filter(m => !m.waiver.signed && !m.coc.signed && !m.concussion.signed).length;

  return (
    <div>
      {canEdit && (
        <div className="drop-zone">
          <div style={{ display: 'inline-flex', flexDirection: 'column', alignItems: 'center' }}>
            <window.I.Upload size={20} style={{ color: 'var(--gold)', marginBottom: 10 }} />
            <div className="drop-zone-title">Upload roster CSV</div>
            <div className="drop-zone-sub">
              Drop a Name / Email CSV from the team's email to <strong style={{ color: 'var(--text)' }}>recsports@ferris.edu</strong>.<br />
              Starter pack links auto-send to every member on import.
            </div>
            <div className="flex-gap-8">
              <button className="btn btn-secondary btn-sm"><window.I.FileText size={13} /> Choose file</button>
              <button className="btn btn-ghost btn-sm">Map columns manually</button>
            </div>
          </div>
        </div>
      )}

      <div className="flex-between mb-12">
        <div className="flex-gap-12">
          <h2 className="section-title" style={{ margin: 0 }}>
            Members
            <span className="count">{members.length}</span>
          </h2>
          {allRedCount > 0 && (
            <span className="badge danger">{allRedCount} new · all forms missing</span>
          )}
        </div>
        {canEdit && (
          <button className="btn btn-secondary btn-sm" onClick={() => setShowAdd(s => !s)}>
            <window.I.Plus size={13} /> Add member
          </button>
        )}
      </div>

      {showAdd && (
        <AddMemberForm onCancel={() => setShowAdd(false)} onAdd={addMember} />
      )}

      <div className="card">
        <div className="table-wrap">
          <table className="data">
            <thead>
              <tr>
                <SortHeader id="name" sortKey={sortKey} dir={dir} onSort={onSort}>Name</SortHeader>
                <SortHeader id="email" sortKey={sortKey} dir={dir} onSort={onSort}>Email</SortHeader>
                <SortHeader id="compliance" sortKey={sortKey} dir={dir} onSort={onSort}>Waiver</SortHeader>
                <th>Code of conduct</th>
                <th>Concussion</th>
              </tr>
            </thead>
            <tbody>
              {sorted.map(m => (
                <tr key={m.id}>
                  <td><strong>{m.name}</strong></td>
                  <td className="cell-muted">{m.email}</td>
                  {[['waiver', m.waiver],['coc', m.coc],['concussion', m.concussion]].map(([k, f]) => (
                    <td key={k}>
                      <div className="flex-gap-8">
                        <SignedPill field={f} />
                        {!f.signed && canEdit && (
                          <button className="btn btn-ghost btn-xs" onClick={() => resend(m.id, k)}>
                            <window.I.Send size={11} /> Resend
                          </button>
                        )}
                        {toastFor[`${m.id}-${k}`] && (
                          <span className="toast"><window.I.Check size={11} /> Sent</span>
                        )}
                      </div>
                    </td>
                  ))}
                </tr>
              ))}
              {sorted.length === 0 && (
                <tr><td colSpan={5}>
                  <div className="empty">
                    <div className="empty-icon"><window.I.Users size={20} /></div>
                    <div className="empty-title">No members yet</div>
                    <div className="empty-msg">Upload a roster CSV or add members one at a time.</div>
                    <button className="btn btn-primary"><window.I.Upload size={13} /> Upload CSV</button>
                  </div>
                </td></tr>
              )}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

function AddMemberForm({ onCancel, onAdd }) {
  const [name, setName] = useStateT('');
  const [email, setEmail] = useStateT('');
  return (
    <div className="inline-form">
      <div className="inline-form-head">
        <span>Add member</span>
        <button className="btn btn-ghost btn-sm" onClick={onCancel}><window.I.X size={14} /></button>
      </div>
      <div className="form-grid cols-2">
        <div>
          <label className="field-label">Full name</label>
          <input className="input" value={name} onChange={e => setName(e.target.value)} placeholder="Alex Nguyen" />
        </div>
        <div>
          <label className="field-label">Email</label>
          <input className="input" value={email} onChange={e => setEmail(e.target.value)} placeholder="alex.nguyen@ferris.edu" />
        </div>
      </div>
      <div className="flex-between mt-16">
        <span className="dim" style={{ fontSize: 12 }}>Member will receive a starter pack email automatically.</span>
        <div className="flex-gap-8">
          <button className="btn btn-ghost btn-sm" onClick={onCancel}>Cancel</button>
          <button className="btn btn-primary btn-sm" onClick={() => name && email && onAdd(name, email)}>Add member</button>
        </div>
      </div>
    </div>
  );
}

function TeamEventsTab({ team }) {
  // Filter events from data
  const teamEvents = useMemoT(() => {
    const list = [];
    window.AppData.EVENTS_APPROVED.forEach(e => { if (e.teamId === team.id) list.push({ ...e, status: 'Approved' }); });
    window.AppData.EVENTS_PENDING.forEach(e => { if (e.teamId === team.id) list.push({ ...e, status: 'Pending' }); });
    // add a few historical
    window.AppData.CAL_EVENTS.forEach((e, i) => {
      if (e.team === team.name && new Date(e.date) < new Date('2026-05-14')) {
        list.push({
          id: 'past-' + i,
          team: team.name,
          name: e.label,
          type: e.type === 'home' ? 'Home' : 'Away',
          date: e.date,
          location: e.type === 'home' ? 'IM Field 1' : 'Away venue',
          submittedAt: '2026-04-15',
          daysAway: -1,
          approvedBy: 'Justin Reilly',
          status: 'Completed',
        });
      }
    });
    return list.sort((a, b) => b.date.localeCompare(a.date));
  }, [team]);

  return (
    <div className="card">
      <div className="table-wrap">
        <table className="data">
          <thead>
            <tr>
              <th>Event</th>
              <th>Type</th>
              <th>Date</th>
              <th>Location</th>
              <th>Submitted</th>
              <th>Reimbursement</th>
              <th>Status</th>
              <th>Approver</th>
            </tr>
          </thead>
          <tbody>
            {teamEvents.length === 0 ? (
              <tr><td colSpan={8}>
                <div className="empty">
                  <div className="empty-icon"><window.I.Calendar size={20} /></div>
                  <div className="empty-title">No events on file</div>
                  <div className="empty-msg">When this team submits an event through Canvas, staff log it on the Events screen.</div>
                </div>
              </td></tr>
            ) : teamEvents.map(e => (
              <tr key={e.id}>
                <td><strong>{e.name}</strong></td>
                <td>
                  {e.type === 'Home'
                    ? <span className="badge crimson">Home</span>
                    : <span className="badge gold">Away</span>}
                </td>
                <td className="cell-mono cell-muted">{e.date}</td>
                <td className="cell-muted">{e.location}</td>
                <td className="cell-mono cell-muted">{e.submittedAt}</td>
                <td>{e.daysAway >= 0 ? reimbBadge(e.daysAway) : <span className="dim">—</span>}</td>
                <td>
                  <span className={`badge ${e.status === 'Pending' ? 'warning' : e.status === 'Approved' ? 'success' : 'neutral'} dot`}>{e.status}</span>
                </td>
                <td className="cell-muted">{e.approvedBy || <span className="dim">—</span>}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

window.TeamDrillDown = TeamDrillDown;