/* Medina Fight Lab — Coach console. Server-backed: roster, join codes, assignment, session editor. */
const { Button: KButton, Input: KInput, Card: KCard, Badge: KBadge } = window.MedinaFightLabDesignSystem_ed6365;

function CoachBar({ title, onBack, right }) {
  const { MFLIcons, DailyBell } = window;
  return (
    <header className="cb-bar">
      {onBack
        ? <button className="cb-bar__back" onClick={onBack}>{MFLIcons.arrowLeft({ width: 18, height: 18 })}</button>
        : <img className="cb-bar__logo" src="icons/icon-192.png" alt="Medina Fight Lab" />}
      <div className="cb-bar__t">{title}</div>
      <div className="cb-bar__r">{right || <DailyBell />}</div>
    </header>
  );
}

/* ---------- Session editor (server-backed) ---------- */
function CoachSessionEditor({ session, newRound, onBack, onSave, onDelete }) {
  const { MFLIcons } = window;
  const [title, setTitle] = React.useState(session.title);
  const [focus, setFocus] = React.useState(session.focus || "");
  const [note, setNote] = React.useState(session.coachNote || "");
  const [rounds, setRounds] = React.useState((session.rounds || []).map((r) => ({ ...r })));
  const [saving, setSaving] = React.useState(false);

  const setRound = (id, patch) => setRounds((rs) => rs.map((r) => r.id === id ? { ...r, ...patch } : r));
  const addRound = () => setRounds((rs) => rs.concat([newRound()]));
  const removeRound = (id) => setRounds((rs) => rs.filter((r) => r.id !== id));
  const moveRound = (i, dir) => setRounds((rs) => {
    const j = i + dir; if (j < 0 || j >= rs.length) return rs;
    const c = rs.slice(); const t = c[i]; c[i] = c[j]; c[j] = t; return c;
  });
  const save = async () => {
    setSaving(true);
    await onSave({ id: session.id, title: (title || "").trim() || "Untitled session", focus: focus.trim(), coachNote: note.trim(), rounds });
    setSaving(false); onBack();
  };

  return (
    <React.Fragment>
      <CoachBar title="Edit session" onBack={onBack}
        right={<button className="cb-trash" onClick={() => { if (confirm("Delete this session?")) onDelete(); }}>{MFLIcons.trash({ width: 17, height: 17 })}</button>} />
      <div className="cb-page">
        <div className="cb-form">
          <KInput label="Session title" value={title} onChange={(e) => setTitle(e.target.value)} placeholder="e.g. Week 4 · Fight Camp" />
          <KInput label="Focus" value={focus} onChange={(e) => setFocus(e.target.value)} placeholder="e.g. Striking, Clinch, Conditioning" />
          <label className="cb-fieldlabel">Coach note</label>
          <textarea className="cb-textarea" value={note} onChange={(e) => setNote(e.target.value)} rows={2} placeholder="A short cue for the athlete…" />
        </div>
        <div className="aa-section-h" style={{ marginTop: 18 }}>
          <span className="lab">Rounds</span><span className="cnt">{rounds.length}</span>
        </div>
        <div className="cb-rounds">
          {rounds.length === 0 ? <div className="aa-empty">No rounds. Add the first one below.</div> : null}
          {rounds.map((r, i) => (
            <div key={r.id} className="cb-round">
              <div className="cb-round__head">
                <span className="cb-round__n">{i + 1}</span>
                <div className="cb-round__order">
                  <button onClick={() => moveRound(i, -1)} disabled={i === 0}>↑</button>
                  <button onClick={() => moveRound(i, 1)} disabled={i === rounds.length - 1}>↓</button>
                </div>
                <button className="cb-round__del" onClick={() => removeRound(r.id)}>{MFLIcons.trash({ width: 15, height: 15 })}</button>
              </div>
              <KInput value={r.label} onChange={(e) => setRound(r.id, { label: e.target.value })} placeholder="Label — e.g. Round 1" />
              <KInput value={r.detail} onChange={(e) => setRound(r.id, { detail: e.target.value })} placeholder="Detail — e.g. Jab–cross–hook on pads" />
              <KInput value={r.time} onChange={(e) => setRound(r.id, { time: e.target.value })} placeholder="Time — e.g. 3 × 3 min" />
            </div>
          ))}
        </div>
        <KButton variant="secondary" fullWidth leftIcon={MFLIcons.plus({ width: 17, height: 17 })} onClick={addRound}>Add round</KButton>
      </div>
      <div className="cb-dock">
        <span className="cb-hint">Assign it from the Roster tab</span>
        <KButton variant="stamp" leftIcon={MFLIcons.check({ width: 17, height: 17 })} onClick={save} disabled={saving}>{saving ? "Saving…" : "Save session"}</KButton>
      </div>
    </React.Fragment>
  );
}

/* ---------- Roster ---------- */
function Roster({ data, onAssign, onAddAthlete, onRemoveAthlete, onViewLogs }) {
  const { MFLIcons } = window;
  const [name, setName] = React.useState("");
  const [level, setLevel] = React.useState("");
  const [adding, setAdding] = React.useState(false);
  const [copied, setCopied] = React.useState(null);

  const add = async () => { if (!name.trim()) return; setAdding(true); await onAddAthlete(name.trim(), level.trim()); setName(""); setLevel(""); setAdding(false); };
  const copy = (code) => { try { navigator.clipboard.writeText(code); setCopied(code); setTimeout(() => setCopied(null), 1200); } catch (e) {} };

  return (
    <div className="cb-page">
      <div className="cb-intro">
        <div className="cb-intro__eye">Your roster</div>
        <h1 className="cb-intro__h">The fighters.</h1>
        <p className="cb-intro__p">Add an athlete, share their join code, and assign today's session.</p>
      </div>

      {data.athletes.length === 0 ? <div className="aa-empty">No athletes yet. Add your first one below.</div> : null}

      <div className="cb-list">
        {data.athletes.map((a) => {
          const assigned = data.assignToday[a.id];
          const prog = data.progToday[a.id];
          // this fighter's own sessions, plus any not-yet-assigned (unowned) ones
          const mySessions = data.sessions.filter((s) => s.ownerId === a.id || !s.ownerId);
          return (
            <div key={a.id} className="cb-ath">
              <div className="cb-ath__top">
                <div className="cb-ath__id">
                  <div className="cb-ath__name">{a.name}</div>
                  <div className="cb-ath__lv">{a.level || "—"}</div>
                </div>
                <div className="cb-ath__right">
                  <button className="cb-code" onClick={() => copy(a.join_code)} title="Tap to copy">
                    {MFLIcons.shield({ width: 13, height: 13 })} {copied === a.join_code ? "Copied!" : a.join_code}
                  </button>
                </div>
              </div>
              <div className="cb-ath__assign">
                <select className="cb-select" value={assigned || ""} onChange={(e) => onAssign(a.id, e.target.value)} disabled={mySessions.length === 0}>
                  <option value="">{mySessions.length ? "— Assign a session —" : "— No sessions for this fighter —"}</option>
                  {mySessions.map((s) => <option key={s.id} value={s.id}>{s.title}</option>)}
                </select>
                {prog ? (
                  <KBadge variant={prog.finished ? "completed" : "progress"} dot>{prog.pct}%</KBadge>
                ) : assigned ? <KBadge variant="assigned" dot>Assigned</KBadge> : null}
              </div>
              <div className="cb-ath__actions">
                <button className="cb-ath__logs" onClick={() => onViewLogs(a)}>
                  {MFLIcons.chart({ width: 14, height: 14 })} View logs
                </button>
                <button className="cb-ath__rm" onClick={() => { if (confirm("Remove " + a.name + "?")) onRemoveAthlete(a.id); }}>
                  {MFLIcons.trash({ width: 14, height: 14 })} Remove
                </button>
              </div>
            </div>
          );
        })}
      </div>

      <KCard title="Add athlete">
        <div className="cb-form">
          <KInput label="Name" value={name} onChange={(e) => setName(e.target.value)} placeholder="e.g. Dani Reyes" />
          <KInput label="Level / weight" value={level} onChange={(e) => setLevel(e.target.value)} placeholder="e.g. Amateur · 65kg" />
          <KButton variant="primary" fullWidth leftIcon={MFLIcons.plus({ width: 17, height: 17 })} onClick={add} disabled={adding || !name.trim()}>
            {adding ? "Adding…" : "Add & generate join code"}
          </KButton>
        </div>
      </KCard>
    </div>
  );
}

/* ---------- Sessions library ---------- */
function Library({ data, onNew, onEdit }) {
  const { MFLIcons } = window;
  const [open, setOpen] = React.useState({});
  const toggle = (key) => setOpen((o) => ({ ...o, [key]: !o[key] }));
  return (
    <div className="cb-page">
      <div className="cb-intro">
        <div className="cb-intro__eye">Your program</div>
        <h1 className="cb-intro__h">Build the work.</h1>
        <p className="cb-intro__p">Create sessions once, assign them to any athlete from the Roster tab.</p>
      </div>
      {data.sessions.length === 0 ? <div className="aa-empty">No sessions yet. Create your first below.</div> : (() => {
        const nameById = {}; data.athletes.forEach((a) => { nameById[a.id] = a.name; });
        const groups = []; const idx = {};
        const push = (key, label, s) => { if (idx[key] == null) { idx[key] = groups.length; groups.push({ key, label, items: [] }); } groups[idx[key]].items.push(s); };
        data.sessions.forEach((s) => { const nm = s.ownerId && nameById[s.ownerId]; if (nm) push("c:" + nm, nm, s); else push("_un", "Unassigned", s); });
        groups.sort((a, b) => (a.key === "_un") - (b.key === "_un"));
        const card = (s) => (
          <div key={s.id} className="cb-card">
            <div className="cb-card__main" onClick={() => onEdit(s.id)}>
              <div className="cb-card__top"><span className="cb-card__title">{s.title}</span></div>
              <div className="cb-card__meta">
                <span>{MFLIcons.target({ width: 14, height: 14 })} {s.focus || "—"}</span>
                <span>{MFLIcons.dumbbell({ width: 14, height: 14 })} {s.rounds.length} round{s.rounds.length === 1 ? "" : "s"}</span>
              </div>
            </div>
            <div className="cb-card__actions">
              <button className="cb-edit" onClick={() => onEdit(s.id)}>{MFLIcons.pencil({ width: 15, height: 15 })} Edit</button>
            </div>
          </div>
        );
        return groups.map((g) => {
          const isOpen = !!open[g.key];
          return (
            <div key={g.key} className="cb-group">
              <button className={"cb-group__h" + (isOpen ? " cb-group__h--open" : "")} onClick={() => toggle(g.key)} aria-expanded={isOpen}>
                <span className="cb-group__chev">{MFLIcons.chevronR({ width: 16, height: 16 })}</span>
                <span>{g.label}</span>
                <span className="cb-group__n">{g.items.length}</span>
              </button>
              {isOpen ? <div className="cb-list">{g.items.map(card)}</div> : null}
            </div>
          );
        });
      })()}
      <KButton variant="stamp" size="lg" fullWidth leftIcon={MFLIcons.plus({ width: 18, height: 18 })} onClick={onNew}>New session</KButton>
    </div>
  );
}

/* ---------- Schedule (weekly calendar, assign ahead) ---------- */
function isoOf(d) { return new Date(d.getTime() - d.getTimezoneOffset() * 60000).toISOString().slice(0, 10); }
function mondayOf(iso) { const x = new Date(iso + "T00:00:00"); const day = (x.getDay() + 6) % 7; x.setDate(x.getDate() - day); return isoOf(x); }
function addDays(iso, n) { const d = new Date(iso + "T00:00:00"); d.setDate(d.getDate() + n); return isoOf(d); }
const WD = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
const MO = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

function Schedule({ token }) {
  const { MFLIcons } = window;
  const todayISO = isoOf(new Date());
  const [weekStart, setWeekStart] = React.useState(mondayOf(todayISO));
  const [selDay, setSelDay] = React.useState(todayISO);
  const [data, setData] = React.useState(null);
  const [busy, setBusy] = React.useState(true);

  const load = React.useCallback(async () => {
    setBusy(true);
    try { setData(await window.MFLApi.coachWeek(token, weekStart)); } catch (e) { setData({ error: e.message }); }
    setBusy(false);
  }, [token, weekStart]);
  React.useEffect(() => { load(); }, [load]);

  const shiftWeek = (n) => { const ns = addDays(weekStart, n * 7); setWeekStart(ns); if (selDay < ns || selDay > addDays(ns, 6)) setSelDay(ns); };
  const assign = async (athleteId, sessionId) => {
    try { await window.MFLApi.assign(token, athleteId, sessionId, selDay); await load(); } catch (e) {}
  };

  const days = data && data.days ? data.days : [];
  const sd = new Date(selDay + "T00:00:00");
  const weekEnd = addDays(weekStart, 6);
  const rangeLabel = MO[new Date(weekStart + "T00:00:00").getMonth()] + " " + new Date(weekStart + "T00:00:00").getDate()
    + " – " + MO[new Date(weekEnd + "T00:00:00").getMonth()] + " " + new Date(weekEnd + "T00:00:00").getDate();

  return (
    <div className="cb-page">
      <div className="cb-intro">
        <div className="cb-intro__eye">Schedule</div>
        <h1 className="cb-intro__h">Plan the week.</h1>
        <p className="cb-intro__p">Assign sessions to any day, ahead of time. Athletes see theirs on the day.</p>
      </div>

      <div className="sch-weeknav">
        <button onClick={() => shiftWeek(-1)}>{MFLIcons.arrowLeft({ width: 16, height: 16 })}</button>
        <span className="sch-range">{rangeLabel}</span>
        <button onClick={() => shiftWeek(1)}>{MFLIcons.chevronR({ width: 16, height: 16 })}</button>
      </div>

      <div className="sch-strip">
        {days.map((iso) => {
          const d = new Date(iso + "T00:00:00");
          const anyAssigned = data && data.athletes && data.athletes.some((a) => data.assignments[a.id] && data.assignments[a.id][iso]);
          return (
            <button key={iso} className={"sch-day" + (iso === selDay ? " sch-day--sel" : "") + (iso === todayISO ? " sch-day--today" : "")} onClick={() => setSelDay(iso)}>
              <span className="sch-day__wd">{WD[(d.getDay() + 6) % 7]}</span>
              <span className="sch-day__n">{d.getDate()}</span>
              {anyAssigned ? <span className="sch-day__dot" /> : null}
            </button>
          );
        })}
      </div>

      <div className="aa-section-h" style={{ marginTop: 4 }}>
        <span className="lab">{WD[(sd.getDay() + 6) % 7]} · {MO[sd.getMonth()]} {sd.getDate()}{selDay === todayISO ? " · today" : ""}</span>
      </div>

      {busy && !data ? <div className="aa-empty">Loading…</div>
        : data && data.error ? <div className="aa-empty">{data.error}</div>
        : !data.athletes.length ? <div className="aa-empty">No athletes yet. Add them in the Roster tab.</div>
        : (
          <div className="cb-list">
            {data.athletes.map((a) => {
              const assigned = (data.assignments[a.id] || {})[selDay] || "";
              const prog = (data.progress[a.id] || {})[selDay];
              return (
                <div key={a.id} className="cb-ath">
                  <div className="cb-ath__top">
                    <div className="cb-ath__id"><div className="cb-ath__name">{a.name}</div><div className="cb-ath__lv">{a.level || "—"}</div></div>
                    {prog ? <KBadge variant={prog.finished ? "completed" : "progress"} dot>{prog.pct}%</KBadge> : assigned ? <KBadge variant="assigned" dot>Set</KBadge> : null}
                  </div>
                  <select className="cb-select" value={assigned} onChange={(e) => assign(a.id, e.target.value)}>
                    <option value="">— No session —</option>
                    {data.sessions.map((s) => <option key={s.id} value={s.id}>{s.title}</option>)}
                  </select>
                </div>
              );
            })}
          </div>
        )}
    </div>
  );
}

/* ---------- Athlete logs (coach reviews logged sets) ---------- */
function AthleteLogs({ token, athlete, onBack }) {
  const { MFLIcons } = window;
  const MO = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
  const [data, setData] = React.useState(null);
  React.useEffect(() => {
    let on = true;
    window.MFLApi.coachLogs(token, athlete.id).then((d) => { if (on) setData(d); }).catch(() => { if (on) setData({ days: [], error: true }); });
    return () => { on = false; };
  }, [token, athlete.id]);
  const days = (data && data.days) || [];
  const dlabel = (iso) => { const d = new Date(iso + "T00:00:00"); return MO[d.getMonth()] + " " + d.getDate(); };

  return (
    <React.Fragment>
      <CoachBar title={athlete.name + " · Logs"} onBack={onBack} />
      <div className="cb-page">
        {data == null ? <div className="aa-empty">Loading logs…</div>
          : days.length === 0 ? <div className="aa-empty">No logged sets yet. They appear once {athlete.name.split(" ")[0]} records weight/reps/RPE during a session.</div>
          : days.map((d) => (
              <div key={d.date} className="cb-log">
                <div className="cb-log__h">
                  <span className="cb-log__date">{dlabel(d.date)}</span>
                  <span className="cb-log__title">{d.title}</span>
                  <KBadge variant={d.finished ? "completed" : "progress"} dot>{d.pct}%</KBadge>
                </div>
                {d.entries.map((e, i) => (
                  <div key={i} className="cb-log__ex">
                    <div className="cb-log__exlabel">{e.label}</div>
                    {e.sets.length ? (
                      <div className="aa-sets">
                        <div className="aa-sets__row aa-sets__head"><span>Set</span><span>Weight</span><span>Reps</span><span>RPE</span><span /></div>
                        {e.sets.map((s, j) => (
                          <div key={j} className="aa-sets__row">
                            <span className="aa-sets__n">{j + 1}</span>
                            <span>{s.weight || "—"}</span>
                            <span>{s.reps || "—"}</span>
                            <span>{s.rpe || "—"}</span>
                            <span />
                          </div>
                        ))}
                      </div>
                    ) : null}
                    {e.notes ? <div className="cb-log__notes">"{e.notes}"</div> : null}
                  </div>
                ))}
              </div>
            ))}
      </div>
    </React.Fragment>
  );
}

/* ---------- Messages (coach ↔ athlete) ---------- */
function cmTime(iso) {
  if (!iso) return "";
  const d = new Date(iso); const now = new Date();
  const t = d.toLocaleTimeString([], { hour: "numeric", minute: "2-digit" });
  return d.toDateString() === now.toDateString() ? t : (d.getMonth() + 1) + "/" + d.getDate() + " · " + t;
}
function CoachMessages({ token }) {
  const { MFLIcons } = window;
  const [data, setData] = React.useState(null);
  const [sel, setSel] = React.useState(null);
  const [text, setText] = React.useState("");
  const [sending, setSending] = React.useState(false);
  const endRef = React.useRef(null);

  const load = React.useCallback(async () => {
    try { setData(await window.MFLApi.coachMessages(token)); } catch (e) { setData({ threads: [], error: e.message }); }
  }, [token]);
  React.useEffect(() => { load(); }, [load]);
  React.useEffect(() => { if (sel && endRef.current) endRef.current.scrollIntoView(); }, [sel, data]);

  const threads = (data && data.threads) || [];
  const thread = sel ? threads.find((t) => t.athleteId === sel) : null;

  const openThread = async (t) => {
    setSel(t.athleteId);
    if (t.unread) { try { await window.MFLApi.coachReadMessages(token, t.athleteId); } catch (e) {} load(); }
  };
  const send = async () => {
    const v = text.trim(); if (!v || sending || !sel) return;
    setSending(true); setText("");
    try { await window.MFLApi.coachSendMessage(token, sel, v); await load(); } catch (e) {}
    setSending(false);
  };
  const onKey = (e) => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); send(); } };

  if (sel && thread) {
    return (
      <React.Fragment>
        <CoachBar title={thread.name} onBack={() => setSel(null)} />
        <div className="aa-chat">
          <div className="aa-chat__scroll">
            {thread.messages.length === 0 ? <div className="aa-empty">No messages yet.</div>
              : thread.messages.map((m) => (
                  <div key={m.id} className={"aa-bubble aa-bubble--" + (m.sender === "coach" ? "me" : "coach")}>
                    <div className="aa-bubble__body">{m.body}</div>
                    <div className="aa-bubble__time">{cmTime(m.created_at)}</div>
                  </div>
                ))}
            <div ref={endRef} />
          </div>
        </div>
        <div className="aa-chat__dock">
          <textarea className="aa-chat__in" rows={1} value={text} placeholder={"Reply to " + thread.name.split(" ")[0] + "…"}
            onChange={(e) => setText(e.target.value)} onKeyDown={onKey} />
          <button className="aa-chat__send" onClick={send} disabled={!text.trim() || sending} aria-label="Send">
            {MFLIcons.send({ width: 20, height: 20 })}
          </button>
        </div>
      </React.Fragment>
    );
  }

  return (
    <div className="cb-page">
      <div className="cb-intro">
        <div className="cb-intro__eye">Inbox</div>
        <h1 className="cb-intro__h">Fighter messages.</h1>
        <p className="cb-intro__p">Questions and concerns from your roster. Tap a fighter to reply.</p>
      </div>
      {data == null ? <div className="aa-empty">Loading…</div>
        : threads.length === 0 ? <div className="aa-empty">No messages yet. They'll appear here when a fighter reaches out.</div>
        : (
          <div className="cb-list">
            {threads.map((t) => (
              <button key={t.athleteId} className="cb-thread" onClick={() => openThread(t)}>
                <div className="cb-thread__main">
                  <div className="cb-thread__top">
                    <span className="cb-thread__name">{t.name}</span>
                    <span className="cb-thread__time">{cmTime(t.lastAt)}</span>
                  </div>
                  <div className="cb-thread__last">{t.last}</div>
                </div>
                {t.unread ? <span className="cb-thread__unread">{t.unread}</span> : MFLIcons.chevronR({ width: 16, height: 16 })}
              </button>
            ))}
          </div>
        )}
    </div>
  );
}

/* ---------- Coach root ---------- */
function CoachConsole({ onSignOut }) {
  const { MFLIcons } = window;
  const token = window.MFLApi.coachToken();
  const [data, setData] = React.useState(null);
  const [loading, setLoading] = React.useState(true);
  const [err, setErr] = React.useState("");
  const [tab, setTab] = React.useState("roster");
  const [editId, setEditId] = React.useState(null);
  const [logsFor, setLogsFor] = React.useState(null);

  const refresh = React.useCallback(async () => {
    try { const d = await window.MFLApi.coachData(token); setData(d); setErr(""); }
    catch (e) { setErr(e.message || "Couldn't load."); }
    setLoading(false);
  }, [token]);
  React.useEffect(() => { refresh(); }, [refresh]);

  const newRound = () => ({ id: "r_" + Date.now().toString(36) + Math.random().toString(36).slice(2, 5), label: "Round", detail: "", time: "3 × 3 min" });

  if (loading) return <div className="aa-app cb-app"><div className="aa-loading">Loading console…</div></div>;
  if (err && !data) return (
    <div className="aa-app cb-app"><div className="aa-loading">{err}
      <div style={{ marginTop: 16 }}><button className="aa-textbtn" onClick={refresh}>Retry</button> · <button className="aa-textbtn" onClick={onSignOut}>Sign out</button></div>
    </div></div>
  );

  if (logsFor) {
    return (
      <div className="aa-app cb-app">
        <AthleteLogs token={token} athlete={logsFor} onBack={() => setLogsFor(null)} />
      </div>
    );
  }

  if (editId) {
    const session = data.sessions.find((s) => s.id === editId) || { id: editId, title: "New session", focus: "Striking", coachNote: "", rounds: [] };
    return (
      <div className="aa-app cb-app">
        <CoachSessionEditor
          session={session} newRound={newRound}
          onBack={() => setEditId(null)}
          onSave={async (s) => { await window.MFLApi.saveSession(token, s); await refresh(); }}
          onDelete={async () => { await window.MFLApi.deleteSession(token, editId); setEditId(null); await refresh(); }}
        />
      </div>
    );
  }

  return (
    <div className="aa-app cb-app">
      <CoachBar title={"Coach · " + (data.coach ? data.coach.name.split(" ").slice(-1)[0] : "Builder")}
        right={<button className="cb-exit" onClick={onSignOut}>{MFLIcons.logout({ width: 16, height: 16 })} Sign out</button>} />
      {tab === "roster"
        ? <Roster data={data}
            onAssign={async (athleteId, sessionId) => { if (sessionId) { await window.MFLApi.assign(token, athleteId, sessionId); await refresh(); } }}
            onAddAthlete={async (n, l) => { await window.MFLApi.addAthlete(token, n, l); await refresh(); }}
            onRemoveAthlete={async (id) => { await window.MFLApi.deleteAthlete(token, id); await refresh(); }}
            onViewLogs={(a) => setLogsFor(a)} />
        : tab === "schedule"
        ? <Schedule token={token} />
        : tab === "messages"
        ? <CoachMessages token={token} />
        : <Library data={data} onNew={() => { const id = "sess_new_" + Date.now().toString(36); setEditId(id); }} onEdit={setEditId} />}
      <nav className="aa-tabbar cb-tabbar">
        <button className={"aa-tab" + (tab === "roster" ? " aa-tab--active" : "")} onClick={() => setTab("roster")}>
          {MFLIcons.roster({ width: 22, height: 22 })}<span>Roster</span>
        </button>
        <button className={"aa-tab" + (tab === "schedule" ? " aa-tab--active" : "")} onClick={() => setTab("schedule")}>
          {MFLIcons.calendar({ width: 22, height: 22 })}<span>Schedule</span>
        </button>
        <button className={"aa-tab" + (tab === "messages" ? " aa-tab--active" : "")} onClick={() => setTab("messages")}>
          {MFLIcons.message({ width: 22, height: 22 })}<span>Messages</span>
        </button>
        <button className={"aa-tab" + (tab === "library" ? " aa-tab--active" : "")} onClick={() => setTab("library")}>
          {MFLIcons.dumbbell({ width: 22, height: 22 })}<span>Sessions</span>
        </button>
      </nav>
    </div>
  );
}

Object.assign(window, { CoachConsole });