// Admin Console — broadcast, reschedule approval, score override

const AdminPage = () => {
  const D = window.NASEF_DATA;
  const [tab, setTab] = React.useState("overview");
  const [bcastTo, setBcastTo] = React.useState("pacific-ssbu");
  const [bcastMsg, setBcastMsg] = React.useState("");
  const [bcastSent, setBcastSent] = React.useState(false);
  const [pending, setPending] = React.useState([
    { id: "rr1", school: "saug", coach: "Coach Pham", match: "Saugus vs. El Camino · Wk 6", currentDate: "May 15, 4:00 PM", proposed: "May 16, 4:00 PM", reason: "AP testing conflict" },
    { id: "rr2", school: "tor",  coach: "Coach Banks", match: "Torrance vs. Hamilton · Wk 6", currentDate: "May 15, 4:00 PM", proposed: "May 14, 5:00 PM", reason: "Senior dinner" },
  ]);
  const [override, setOverride] = React.useState(null);

  return (
    <div>
      <PageHeader
        eyebrow="League Admin · NASEF · CIF Esports Initiative"
        title="Admin Console"
        subtitle="Override scores, approve reschedules, and broadcast to leagues. Use carefully — every action is logged."
      />

      <div style={{ marginBottom: 24 }}>
        <Tabs value={tab} onChange={setTab} items={[
          { value: "overview", label: "Overview" },
          { value: "approvals", label: `Reschedules (${pending.length})` },
          { value: "broadcast", label: "Broadcast" },
          { value: "override", label: "Score override" },
          { value: "leagues", label: "Leagues" },
        ]} />
      </div>

      {tab === "overview" && (
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16, marginBottom: 24 }}>
          {[
            { label: "Active leagues", value: 162, color: "var(--nasef-orange-soft)" },
            { label: "Schools onboarded", value: 487 },
            { label: "Live matches", value: 8, color: "var(--live)" },
            { label: "Pending approvals", value: pending.length, color: "var(--warning)" },
            { label: "This week's matches", value: 124 },
            { label: "Coach accounts", value: 612 },
            { label: "Player accounts", value: 5841 },
            { label: "Compliance issues", value: 0, color: "var(--success)" },
          ].map(s => (
            <div key={s.label} className="card" style={{ padding: 18 }}>
              <div className="upper muted" style={{ fontSize: 10, marginBottom: 6 }}>{s.label}</div>
              <div style={{ fontSize: 26, fontWeight: 600, color: s.color || "var(--text)", fontFamily: "var(--font-display)", letterSpacing: "-0.02em" }}>{s.value}</div>
            </div>
          ))}
        </div>
      )}
      {tab === "overview" && (
        <div style={{ display: "grid", gridTemplateColumns: "1.5fr 1fr", gap: 20 }}>
          <div className="card" style={{ padding: 0 }}>
            <div className="card-header"><h3>Audit log</h3><span className="muted" style={{ fontSize: 11 }}>Last 24 hours</span></div>
            <div style={{ padding: 14, display: "flex", flexDirection: "column", gap: 2 }}>
              {[
                { t: "4:18 PM", who: "James Wood", action: "Approved reschedule", target: "El Diamante vs. Granada · Wk 6", color: "var(--success)" },
                { t: "3:42 PM", who: "James Wood", action: "Broadcast sent",       target: "All Pacific Coast SSBU coaches",  color: "var(--neon-cyan)" },
                { t: "2:15 PM", who: "James Wood", action: "Score overridden",     target: "qf3 · El Diamante vs. Torrance",  color: "var(--warning)" },
                { t: "11:02 AM", who: "Edwin Guama", action: "Roster updated",     target: "Hamilton SSBU Varsity",           color: "var(--text-secondary)" },
                { t: "10:30 AM", who: "Sophia Tran",  action: "Submitted score",   target: "West Covina vs. Venice · Wk 5",   color: "var(--text-secondary)" },
                { t: "9:14 AM", who: "James Wood", action: "Created competition",  target: "NASEF May Showcase Cup",           color: "var(--nasef-orange-soft)" },
              ].map((row, i) => (
                <div key={i} style={{ padding: "10px 12px", display: "grid", gridTemplateColumns: "60px 1fr 1fr", gap: 12, fontSize: 12, borderRadius: "var(--r-sm)" }}>
                  <span className="mono muted">{row.t}</span>
                  <div>
                    <div style={{ fontWeight: 600, color: row.color }}>{row.action}</div>
                    <div className="muted" style={{ fontSize: 11 }}>by {row.who}</div>
                  </div>
                  <span className="secondary" style={{ textAlign: "right" }}>{row.target}</span>
                </div>
              ))}
            </div>
          </div>
          <div className="card">
            <div className="card-header"><h3>Compliance</h3><span className="badge complete">All clear</span></div>
            <div style={{ padding: 18, display: "flex", flexDirection: "column", gap: 14 }}>
              {[
                ["COPPA verifications", "All players age-verified", "var(--success)"],
                ["Parental consent",   "612/612 forms on file",     "var(--success)"],
                ["Data retention",     "Auto-purge configured: 90d", "var(--success)"],
                ["School waivers",     "487/487 verified",           "var(--success)"],
                ["Incident reports",   "0 open",                     "var(--success)"],
              ].map(([label, val, c]) => (
                <div key={label} style={{ display: "flex", justifyContent: "space-between", alignItems: "center", fontSize: 13 }}>
                  <div>
                    <div style={{ fontWeight: 600 }}>{label}</div>
                    <div className="muted" style={{ fontSize: 11 }}>{val}</div>
                  </div>
                  <IconCheck size={16} style={{ color: c }} />
                </div>
              ))}
            </div>
          </div>
        </div>
      )}

      {tab === "approvals" && (
        <div className="card" style={{ padding: 0 }}>
          <div className="card-header">
            <h3>Pending reschedule requests</h3>
            <span className="muted" style={{ fontSize: 11 }}>Auto-decline after 48 hours</span>
          </div>
          {pending.length === 0 ? (
            <Empty icon={IconCheck} title="All caught up" body="No pending reschedule requests." />
          ) : (
            <div style={{ padding: 14, display: "flex", flexDirection: "column", gap: 10 }}>
              {pending.map(r => (
                <div key={r.id} style={{ padding: 16, border: "1px solid var(--border-soft)", borderRadius: "var(--r-md)", background: "var(--bg-base)" }}>
                  <div className="row" style={{ justifyContent: "space-between", marginBottom: 8 }}>
                    <div>
                      <div style={{ fontWeight: 600 }}>{r.match}</div>
                      <div className="muted" style={{ fontSize: 12, marginTop: 2 }}>Requested by {r.coach}</div>
                    </div>
                    <span className="badge warning">Awaiting review</span>
                  </div>
                  <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 2fr", gap: 14, marginBottom: 14, fontSize: 12 }}>
                    <div><div className="upper muted" style={{ fontSize: 10, marginBottom: 2 }}>Currently</div><div>{r.currentDate}</div></div>
                    <div><div className="upper muted" style={{ fontSize: 10, marginBottom: 2 }}>Proposed</div><div style={{ color: "var(--nasef-orange-soft)", fontWeight: 600 }}>{r.proposed}</div></div>
                    <div><div className="upper muted" style={{ fontSize: 10, marginBottom: 2 }}>Reason</div><div>{r.reason}</div></div>
                  </div>
                  <div className="row" style={{ gap: 8, justifyContent: "flex-end" }}>
                    <button className="btn ghost" onClick={() => setPending(p => p.filter(x => x.id !== r.id))}><IconX size={12} />Decline</button>
                    <button className="btn primary" onClick={() => setPending(p => p.filter(x => x.id !== r.id))}><IconCheck size={12} />Approve</button>
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>
      )}

      {tab === "broadcast" && (
        <div style={{ display: "grid", gridTemplateColumns: "1fr 360px", gap: 20 }}>
          <div className="card">
            <div className="card-header"><h3>Compose broadcast</h3></div>
            <div style={{ padding: 22, display: "flex", flexDirection: "column", gap: 14 }}>
              <div>
                <label className="label">Audience</label>
                <select className="select" value={bcastTo} onChange={e => setBcastTo(e.target.value)}>
                  <option value="all">All NASEF coaches (612)</option>
                  <option value="pacific-ssbu">Pacific Coast SSBU coaches (12)</option>
                  <option value="cif-all">All CIF coaches (487)</option>
                  <option value="lausd">LAUSD coaches only (87)</option>
                </select>
              </div>
              <div>
                <label className="label">Subject</label>
                <input className="input" placeholder="Week 5 playoff seeding update" />
              </div>
              <div>
                <label className="label">Message</label>
                <textarea className="textarea" rows={8} value={bcastMsg} onChange={e => setBcastMsg(e.target.value)} placeholder="Write your message…" />
              </div>
              <div className="row" style={{ justifyContent: "space-between" }}>
                <div className="row" style={{ gap: 14, fontSize: 12, color: "var(--text-muted)" }}>
                  <label className="row-tight"><input type="checkbox" defaultChecked /> Email</label>
                  <label className="row-tight"><input type="checkbox" defaultChecked /> In-app notification</label>
                  <label className="row-tight"><input type="checkbox" /> Discord webhook</label>
                </div>
                <button className="btn primary" onClick={() => { setBcastSent(true); setTimeout(() => setBcastSent(false), 2200); }}>
                  {bcastSent ? <><IconCheck size={12} />Sent</> : <><IconSend size={12} />Send broadcast</>}
                </button>
              </div>
            </div>
          </div>
          <div className="card">
            <div className="card-header"><h3>Recent broadcasts</h3></div>
            <div style={{ padding: 14, display: "flex", flexDirection: "column", gap: 8 }}>
              {[
                ["Week 5 brackets posted", "May 7", "All Pacific Coast"],
                ["Stage list update for Spring", "May 5", "All SSBU coaches"],
                ["COPPA verification reminder", "May 2", "All coaches"],
              ].map(([t, d, w], i) => (
                <div key={i} style={{ padding: "10px 12px", borderRadius: "var(--r-sm)", background: "var(--bg-base)", fontSize: 13 }}>
                  <div style={{ fontWeight: 600 }}>{t}</div>
                  <div className="muted" style={{ fontSize: 11, marginTop: 2 }}>{d} · {w}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      )}

      {tab === "override" && (
        <div className="card" style={{ padding: 0 }}>
          <div className="card-header"><h3>Score override · all matches</h3></div>
          <table className="table">
            <thead><tr><th>Match</th><th>Game</th><th>Result</th><th>Status</th><th></th></tr></thead>
            <tbody>
              {D.matches.filter(m => m.status === "complete").map(m => (
                <tr key={m.id}>
                  <td>
                    <div className="row-tight">
                      <Crest school={D.schoolsById[m.home]} size="sm" />
                      <span>{D.schoolsById[m.home].short} vs. {D.schoolsById[m.away].short}</span>
                    </div>
                  </td>
                  <td className="muted">{m.game} · Wk {m.week}</td>
                  <td className="mono" style={{ fontWeight: 600 }}>{m.homeScore}-{m.awayScore}</td>
                  <td><span className="badge complete">Final</span></td>
                  <td style={{ textAlign: "right" }}>
                    <button className="btn ghost sm" onClick={() => setOverride(m)}>
                      <IconEdit size={11} /> Override
                    </button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}

      {tab === "leagues" && (
        <div className="card" style={{ padding: 0 }}>
          <div className="card-header">
            <h3>All leagues</h3>
            <button className="btn primary sm"><IconPlus size={11} />Create new</button>
          </div>
          <table className="table">
            <thead><tr><th>League</th><th>Game</th><th>Teams</th><th>Format</th><th>Week</th><th>Status</th></tr></thead>
            <tbody>
              {D.competitions.map(c => (
                <tr key={c.id}>
                  <td style={{ fontWeight: 600 }}>{c.title}</td>
                  <td><GameTag game={c.game} /></td>
                  <td className="mono">{c.teams}</td>
                  <td className="muted" style={{ fontSize: 12 }}>{c.format}</td>
                  <td className="mono">{c.week}/{c.totalWeeks}</td>
                  <td>
                    {c.status === "in_progress" ? <span className="badge complete">Active</span> :
                     c.status === "registration" ? <span className="badge orange">Registration</span> : <span className="badge">Pending</span>}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}

      {override && <ScoreOverrideModal match={override} onClose={() => setOverride(null)} />}
    </div>
  );
};

const ScoreOverrideModal = ({ match, onClose }) => {
  const D = window.NASEF_DATA;
  const home = D.schoolsById[match.home];
  const away = D.schoolsById[match.away];
  const [h, setH] = React.useState(match.homeScore);
  const [a, setA] = React.useState(match.awayScore);
  const [reason, setReason] = React.useState("");

  return (
    <div style={{ position: "fixed", inset: 0, background: "var(--bg-overlay)", backdropFilter: "blur(4px)", zIndex: 100, display: "flex", alignItems: "center", justifyContent: "center" }} onClick={onClose}>
      <div className="card" style={{ width: 500, padding: 0 }} onClick={e => e.stopPropagation()}>
        <div style={{ padding: "18px 22px", borderBottom: "1px solid var(--border-soft)", display: "flex", justifyContent: "space-between" }}>
          <div>
            <h2 style={{ fontSize: 18 }}>Override match result</h2>
            <div className="muted" style={{ fontSize: 12, marginTop: 2 }}>{home.short} vs. {away.short} · Wk {match.week}</div>
          </div>
          <button className="btn ghost icon" onClick={onClose}><IconX size={14} /></button>
        </div>
        <div style={{ padding: 22, display: "flex", flexDirection: "column", gap: 16 }}>
          <Toast kind="warning" title="This action is logged" body="Score overrides notify both coaches and the affected players. Use only after dispute review." />
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
            <div>
              <label className="label">{home.name}</label>
              <input className="input mono" type="number" value={h} onChange={e => setH(Number(e.target.value))} style={{ fontSize: 24, fontWeight: 700, textAlign: "center" }} />
            </div>
            <div>
              <label className="label">{away.name}</label>
              <input className="input mono" type="number" value={a} onChange={e => setA(Number(e.target.value))} style={{ fontSize: 24, fontWeight: 700, textAlign: "center" }} />
            </div>
          </div>
          <div>
            <label className="label">Reason (required)</label>
            <textarea className="textarea" rows={3} placeholder="Dispute resolution: rule X.Y violation by …" value={reason} onChange={e => setReason(e.target.value)} />
          </div>
          <div className="row" style={{ justifyContent: "flex-end", gap: 8 }}>
            <button className="btn ghost" onClick={onClose}>Cancel</button>
            <button className="btn primary" disabled={!reason.trim()} style={{ opacity: reason.trim() ? 1 : 0.5 }} onClick={onClose}>Confirm override</button>
          </div>
        </div>
      </div>
    </div>
  );
};

window.AdminPage = AdminPage;