// ============================================
// Admin / Swim School portal
// ============================================

// Sample data
const STUDENTS = [
  { id: 1, name: "Mia Tanaka", age: 7, level: 3, attendance: 95, classes: ["Stingrays L3"], avatar: "MT", color: "#0099CC" },
  { id: 2, name: "Liam Ortiz", age: 9, level: 5, attendance: 88, classes: ["Dolphins L5"], avatar: "LO", color: "#7C3AED" },
  { id: 3, name: "Sophie Chen", age: 11, level: 7, attendance: 100, classes: ["Sharks L7"], avatar: "SC", color: "#00C9A7" },
  { id: 4, name: "Noah Patel", age: 6, level: 2, attendance: 78, classes: ["Minnows L2"], avatar: "NP", color: "#F97316" },
  { id: 5, name: "Ava Robinson", age: 8, level: 4, attendance: 92, classes: ["Stingrays L4"], avatar: "AR", color: "#D4A017" },
  { id: 6, name: "Ethan Park", age: 10, level: 6, attendance: 85, classes: ["Dolphins L6"], avatar: "EP", color: "#1A7C6E" },
  { id: 7, name: "Zoe Khan", age: 9, level: 5, attendance: 96, classes: ["Sharks L5"], avatar: "ZK", color: "#0099CC" },
  { id: 8, name: "Diego Costa", age: 12, level: 8, attendance: 100, classes: ["Pre-Comp"], avatar: "DC", color: "#003366" },
];

const CLASSES_TODAY = [
  { time: "07:00", name: "Adult Masters", coach: "Coach Maria", enrolled: 12, capacity: 16, lane: "Lanes 1–2", level: "Open", color: "var(--c-competitive)" },
  { time: "09:30", name: "Minnows L1–L2", coach: "Coach Daniel", enrolled: 8, capacity: 8, lane: "Shallow End", level: "Beginner", color: "var(--c-recreation)" },
  { time: "11:00", name: "Stingrays L3–L4", coach: "Coach Maria", enrolled: 7, capacity: 10, lane: "Lanes 3–4", level: "Intermediate", color: "var(--aqua)" },
  { time: "14:00", name: "Dolphins L5–L6", coach: "Coach Sam", enrolled: 10, capacity: 12, lane: "Lanes 5–6", level: "Advanced", color: "var(--mint)" },
  { time: "16:30", name: "Sharks Pre-Comp", coach: "Coach Maria", enrolled: 6, capacity: 8, lane: "Lanes 1–3", level: "Competitive", color: "var(--c-competitive)" },
  { time: "18:00", name: "Open Lap Swim", coach: "—", enrolled: 14, capacity: 20, lane: "All Lanes", level: "Drop-in", color: "var(--gray-500)" },
];

const RECENT_ACTIVITY = [
  { icon: "check-circle", color: "var(--mint)", text: "Sophie Chen passed Level 7 assessment", time: "8 minutes ago" },
  { icon: "users", color: "var(--aqua)", text: "New enrollment — Mia Tanaka in Stingrays L3", time: "32 minutes ago" },
  { icon: "credit-card", color: "var(--navy)", text: "Payment received — $185 from Lee family", time: "1 hour ago" },
  { icon: "alert", color: "var(--amber)", text: "Coach Sam called in sick — 2:00 PM class needs cover", time: "2 hours ago" },
  { icon: "trophy", color: "var(--gold)", text: "Diego Costa qualified for Regional Championship", time: "5 hours ago" },
];

function AdminPortal({ subroute, setSubroute, toast }) {
  if (subroute === "schedule") return <AdminSchedule setSubroute={setSubroute}/>;
  if (subroute === "people") return <AdminPeople setSubroute={setSubroute}/>;
  if (subroute === "classes") return <AdminClasses setSubroute={setSubroute} toast={toast}/>;
  if (subroute === "reports") return <AdminReports/>;
  if (subroute === "settings") return <AdminSettings/>;
  if (subroute === "student") return <StudentProfileView setSubroute={setSubroute}/>;
  if (subroute === "assessment") return <AssessmentTool setSubroute={setSubroute} toast={toast}/>;
  if (subroute === "enroll") return <EnrollmentFlow setSubroute={setSubroute} toast={toast}/>;
  if (subroute === "class-detail") return <ClassDetail setSubroute={setSubroute}/>;
  if (subroute === "class-builder") return <ClassBuilder setSubroute={setSubroute} toast={toast}/>;
  return <AdminDashboard setSubroute={setSubroute}/>;
}

function AdminDashboard({ setSubroute }) {
  return (
    <div className="col" style={{ gap: 20 }}>
      <PageHeader
        title="Good morning, Alex"
        sub="Tuesday, May 14 · 6 classes scheduled today"
        actions={<>
          <Button variant="secondary" icon="upload">Export</Button>
          <Button variant="primary" icon="plus" onClick={() => setSubroute("class-builder")}>New Class</Button>
        </>}
      />

      {/* Pending actions banner */}
      <div style={{ background: "var(--amber-50)", border: "1px solid #f4dca4", borderRadius: 12, padding: 14, display: "flex", gap: 12, alignItems: "center" }}>
        <div style={{ width: 32, height: 32, borderRadius: 8, background: "var(--amber)", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
          <Icon name="alert" size={16} color="white"/>
        </div>
        <div style={{ flex: 1 }}>
          <div style={{ fontWeight: 600, fontSize: 13, color: "#7a4a06" }}>3 items need your attention</div>
          <div style={{ fontSize: 12, color: "#92590a" }}>2 unpaid invoices · 1 unfilled class slot (2:00 PM Dolphins)</div>
        </div>
        <button className="btn btn-sm" style={{ background: "white", color: "#92590a", fontWeight: 600 }}>Review</button>
      </div>

      {/* KPI Strip */}
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))", gap: 12 }}>
        <StatCard label="Active Students" value="248" sub="+12 this month" trend="up" accent="var(--aqua)" icon="users"/>
        <StatCard label="Classes Today" value="6" sub="2 nearly full" accent="var(--c-competitive)" icon="calendar"/>
        <StatCard label="Revenue (MTD)" value="$48,210" sub="+8.4% vs last month" trend="up" accent="var(--mint)" icon="credit-card"/>
        <StatCard label="Pending Enrollments" value="7" sub="Awaiting approval" accent="var(--amber)" icon="bell"/>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "minmax(0, 2fr) minmax(0, 1fr)", gap: 16 }} className="dash-grid">
        {/* Today's schedule */}
        <Card>
          <div className="between" style={{ marginBottom: 14 }}>
            <div className="t-h2">Today's schedule</div>
            <button onClick={() => setSubroute("schedule")} className="btn btn-ghost btn-sm">View week<Icon name="chev-right" size={14}/></button>
          </div>
          <div className="col" style={{ gap: 8 }}>
            {CLASSES_TODAY.map((c, i) => {
              const full = c.enrolled / c.capacity;
              return (
                <button key={i} onClick={() => setSubroute("class-detail")} style={{ textAlign: "left", background: "var(--gray-50)", padding: 12, borderRadius: 10, display: "grid", gridTemplateColumns: "70px 8px 1fr auto", gap: 12, alignItems: "center" }}>
                  <div className="t-mono-sm" style={{ fontWeight: 700, color: "var(--gray-900)" }}>{c.time}</div>
                  <div style={{ width: 4, height: 36, background: c.color, borderRadius: 999 }}/>
                  <div style={{ minWidth: 0 }}>
                    <div style={{ fontWeight: 600, fontSize: 14 }}>{c.name}</div>
                    <div style={{ fontSize: 12, color: "var(--gray-600)" }}>{c.coach} · {c.lane}</div>
                  </div>
                  <div style={{ textAlign: "right" }}>
                    <div className="t-mono-sm" style={{ fontWeight: 600 }}>{c.enrolled}/{c.capacity}</div>
                    <div style={{ width: 60, marginTop: 4 }}><ProgressBar pct={full * 100} height={4} color={full >= 1 ? "var(--red)" : full > 0.85 ? "var(--amber)" : "var(--mint)"}/></div>
                  </div>
                </button>
              );
            })}
          </div>
        </Card>

        {/* Recent activity + Instructor avail */}
        <div className="col" style={{ gap: 16 }}>
          <Card>
            <div className="between" style={{ marginBottom: 14 }}>
              <div className="t-h2">Activity</div>
              <Pill tone="aqua">Live</Pill>
            </div>
            <div className="col" style={{ gap: 12 }}>
              {RECENT_ACTIVITY.map((a, i) => (
                <div key={i} className="row" style={{ alignItems: "flex-start", gap: 10 }}>
                  <div style={{ width: 28, height: 28, borderRadius: 8, background: `${a.color}1a`, display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
                    <Icon name={a.icon} size={14} color={a.color}/>
                  </div>
                  <div style={{ minWidth: 0 }}>
                    <div style={{ fontSize: 13, lineHeight: 1.35 }}>{a.text}</div>
                    <div style={{ fontSize: 11, color: "var(--gray-500)" }}>{a.time}</div>
                  </div>
                </div>
              ))}
            </div>
          </Card>

          <Card>
            <div className="between" style={{ marginBottom: 12 }}>
              <div className="t-h2">Instructor availability</div>
              <button className="btn btn-ghost btn-sm">Edit</button>
            </div>
            <div className="col" style={{ gap: 8 }}>
              {[
                { name: "Coach Maria", slots: [1, 1, 1, 0, 1, 1, 0] },
                { name: "Coach Daniel", slots: [0, 1, 1, 1, 0, 0, 1] },
                { name: "Coach Sam", slots: [1, 0, 0, 1, 1, 1, 0] },
              ].map((c, i) => (
                <div key={i} className="row" style={{ gap: 10 }}>
                  <div style={{ width: 80, fontSize: 12, fontWeight: 600 }}>{c.name}</div>
                  <div className="row" style={{ gap: 4, flex: 1 }}>
                    {c.slots.map((s, j) => (
                      <div key={j} style={{ flex: 1, height: 18, borderRadius: 3, background: s ? "var(--mint)" : "var(--gray-200)" }} title={["M","T","W","T","F","S","S"][j]}/>
                    ))}
                  </div>
                </div>
              ))}
              <div className="row" style={{ gap: 4, paddingLeft: 90, fontSize: 10, color: "var(--gray-500)" }}>
                {["M","T","W","T","F","S","S"].map((d, i) => <div key={i} style={{ flex: 1, textAlign: "center" }}>{d}</div>)}
              </div>
            </div>
          </Card>
        </div>
      </div>

      {/* Revenue chart */}
      <Card>
        <div className="between" style={{ marginBottom: 16 }}>
          <div>
            <div className="t-h2">Revenue trend</div>
            <div className="muted" style={{ fontSize: 12 }}>Past 12 months</div>
          </div>
          <Tabs tabs={[{ id: "rev", label: "Revenue" }, { id: "enr", label: "Enrollments" }, { id: "new", label: "New students" }]} value="rev" onChange={() => {}}/>
        </div>
        <LineChart values={[28, 32, 30, 38, 42, 40, 45, 44, 48, 46, 52, 48]} labels={["Jun","Jul","Aug","Sep","Oct","Nov","Dec","Jan","Feb","Mar","Apr","May"]} color="var(--aqua)" height={180}/>
      </Card>
    </div>
  );
}

function AdminSchedule({ setSubroute }) {
  const [view, setView] = useState("week");
  const days = ["Mon 13", "Tue 14", "Wed 15", "Thu 16", "Fri 17", "Sat 18", "Sun 19"];
  return (
    <div className="col" style={{ gap: 16 }}>
      <PageHeader title="Schedule" sub="Manage classes, sessions and pool bookings"
        actions={<>
          <Tabs tabs={[{ id: "day", label: "Day" }, { id: "week", label: "Week" }, { id: "month", label: "Month" }]} value={view} onChange={setView}/>
          <Button variant="primary" icon="plus" onClick={() => setSubroute("class-builder")}>New class</Button>
        </>}
      />

      <Card style={{ padding: 0, overflow: "hidden" }}>
        <div style={{ display: "grid", gridTemplateColumns: "60px repeat(7, 1fr)", borderBottom: "1px solid var(--gray-200)" }}>
          <div style={{ padding: 12 }}/>
          {days.map((d, i) => (
            <div key={d} style={{ padding: 12, textAlign: "center", borderLeft: "1px solid var(--gray-200)", background: i === 1 ? "var(--aqua-50)" : "white" }}>
              <div style={{ fontSize: 11, color: "var(--gray-500)", fontWeight: 600, textTransform: "uppercase", letterSpacing: 1 }}>{d.split(" ")[0]}</div>
              <div className="t-h3" style={{ marginTop: 2, color: i === 1 ? "var(--aqua)" : "var(--gray-900)" }}>{d.split(" ")[1]}</div>
            </div>
          ))}
        </div>
        <div style={{ position: "relative", height: 560, overflow: "auto" }}>
          <div style={{ display: "grid", gridTemplateColumns: "60px repeat(7, 1fr)", height: "100%" }}>
            <div>
              {Array.from({ length: 12 }).map((_, i) => (
                <div key={i} style={{ height: 48, padding: "4px 8px", fontSize: 11, color: "var(--gray-500)", textAlign: "right", borderBottom: "1px solid var(--gray-100)" }}>{6 + i}:00</div>
              ))}
            </div>
            {days.map((d, di) => (
              <div key={di} style={{ borderLeft: "1px solid var(--gray-200)", position: "relative" }}>
                {Array.from({ length: 12 }).map((_, i) => (
                  <div key={i} style={{ height: 48, borderBottom: "1px solid var(--gray-100)" }}/>
                ))}
                {[
                  { row: 1, span: 1.2, name: "Adult Masters", coach: "Maria", color: "var(--c-competitive)" },
                  { row: 3.5, span: 1, name: "Minnows L1", coach: "Daniel", color: "var(--c-recreation)" },
                  { row: 5, span: 1.5, name: "Stingrays L3", coach: "Maria", color: "var(--aqua)" },
                  { row: 8, span: 1.2, name: "Dolphins L5", coach: "Sam", color: "var(--mint)" },
                  { row: 10.5, span: 1.5, name: "Sharks Pre-Comp", coach: "Maria", color: "var(--c-competitive)" },
                ].filter(() => Math.random() > 0.2 || di === 1).map((e, ei) => (
                  <button key={ei} onClick={() => setSubroute("class-detail")} style={{
                    position: "absolute", top: e.row * 48 + 4, left: 4, right: 4, height: e.span * 48 - 8,
                    background: `${e.color}26`, borderLeft: `3px solid ${e.color}`,
                    borderRadius: 6, padding: "6px 8px", textAlign: "left", overflow: "hidden",
                  }}>
                    <div style={{ fontSize: 11, fontWeight: 600, lineHeight: 1.2 }}>{e.name}</div>
                    <div style={{ fontSize: 10, color: "var(--gray-600)" }}>{e.coach}</div>
                  </button>
                ))}
              </div>
            ))}
          </div>
        </div>
      </Card>
    </div>
  );
}

function AdminPeople({ setSubroute }) {
  const [tab, setTab] = useState("students");
  const [q, setQ] = useState("");
  const filtered = STUDENTS.filter(s => s.name.toLowerCase().includes(q.toLowerCase()));

  return (
    <div className="col" style={{ gap: 16 }}>
      <PageHeader title="People" sub="Students, instructors and parents"
        actions={<><Button variant="secondary" icon="upload">Import CSV</Button><Button variant="primary" icon="plus">Add person</Button></>}
      />
      <div className="row" style={{ gap: 10, flexWrap: "wrap" }}>
        <Tabs tabs={[{ id: "students", label: "Students (248)" }, { id: "instructors", label: "Instructors (12)" }, { id: "parents", label: "Parents (186)" }]} value={tab} onChange={setTab}/>
        <div style={{ flex: 1, position: "relative", minWidth: 220 }}>
          <Icon name="search" size={16} color="var(--gray-500)" style={{ position: "absolute", left: 12, top: 14 }}/>
          <input className="input" placeholder="Search by name, level, status…" value={q} onChange={e => setQ(e.target.value)} style={{ width: "100%", paddingLeft: 36 }}/>
        </div>
        <Button variant="secondary" icon="filter">Filter</Button>
      </div>

      {tab === "students" && (
        <Card style={{ padding: 0, overflow: "hidden" }}>
          <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 14 }}>
            <thead>
              <tr style={{ background: "var(--gray-50)", textAlign: "left", color: "var(--gray-600)", fontSize: 11, textTransform: "uppercase", letterSpacing: 1, fontWeight: 600 }}>
                <th style={{ padding: 14 }}>Name</th>
                <th>Age</th><th>Level</th><th>Class</th><th>Attendance</th><th>Status</th><th/>
              </tr>
            </thead>
            <tbody>
              {filtered.map(s => (
                <tr key={s.id} onClick={() => setSubroute("student")} style={{ borderTop: "1px solid var(--gray-100)", cursor: "pointer" }}>
                  <td style={{ padding: 14 }}>
                    <div className="row" style={{ gap: 10 }}>
                      <Avatar name={s.name} color={s.color}/>
                      <div>
                        <div style={{ fontWeight: 600 }}>{s.name}</div>
                        <div style={{ fontSize: 12, color: "var(--gray-500)" }}>{s.classes[0]}</div>
                      </div>
                    </div>
                  </td>
                  <td>{s.age}</td>
                  <td><Pill tone="aqua">Level {s.level}</Pill></td>
                  <td style={{ color: "var(--gray-600)" }}>{s.classes[0]}</td>
                  <td>
                    <div className="row" style={{ gap: 8 }}>
                      <div style={{ width: 60 }}><ProgressBar pct={s.attendance} color={s.attendance >= 90 ? "var(--mint)" : s.attendance >= 80 ? "var(--amber)" : "var(--red)"}/></div>
                      <span className="t-mono-sm" style={{ fontWeight: 600 }}>{s.attendance}%</span>
                    </div>
                  </td>
                  <td>{s.attendance >= 90 ? <Pill tone="mint">Active</Pill> : <Pill tone="amber">Watch</Pill>}</td>
                  <td><Icon name="chev-right" size={16} color="var(--gray-400)"/></td>
                </tr>
              ))}
            </tbody>
          </table>
        </Card>
      )}

      {tab === "instructors" && (
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))", gap: 12 }}>
          {[
            { name: "Coach Maria", cert: "ASCA L4 · Lifeguard", classes: 14, status: "Active", color: "#0099CC" },
            { name: "Coach Daniel", cert: "ASCA L2 · CPR", classes: 9, status: "Active", color: "#7C3AED" },
            { name: "Coach Sam", cert: "ASCA L3", classes: 11, status: "Out today", color: "#F97316" },
          ].map((c, i) => (
            <Card key={i}>
              <div className="row" style={{ gap: 12, marginBottom: 12 }}>
                <Avatar name={c.name} color={c.color} size="lg"/>
                <div style={{ flex: 1 }}>
                  <div style={{ fontWeight: 700, fontSize: 16 }}>{c.name}</div>
                  <div style={{ fontSize: 12, color: "var(--gray-600)" }}>{c.cert}</div>
                </div>
                {c.status === "Active" ? <Pill tone="mint">Active</Pill> : <Pill tone="amber">{c.status}</Pill>}
              </div>
              <div className="row" style={{ gap: 12, marginTop: 8 }}>
                <div style={{ flex: 1 }}><div className="t-caption">Classes assigned</div><div className="t-mono-stat" style={{ fontSize: 22 }}>{c.classes}</div></div>
                <div style={{ flex: 1 }}><div className="t-caption">Availability</div><div className="t-mono-stat" style={{ fontSize: 22 }}>32 hr</div></div>
              </div>
              <div className="row" style={{ marginTop: 12, gap: 6 }}><Button variant="secondary" size="sm">Edit</Button><Button variant="ghost" size="sm">View schedule</Button></div>
            </Card>
          ))}
        </div>
      )}

      {tab === "parents" && (
        <Card>
          <div style={{ padding: "20px 0" }} className="col" >
            {[
              { name: "Hiroshi Tanaka", child: "Mia Tanaka", balance: 0, contact: "hiroshi@email.com" },
              { name: "Sofia Ortiz", child: "Liam Ortiz", balance: 185, contact: "sofia.o@email.com" },
              { name: "James Chen", child: "Sophie Chen", balance: 0, contact: "jchen@email.com" },
            ].map((p, i) => (
              <div key={i} className="between" style={{ padding: 12, borderRadius: 10, background: i % 2 ? "var(--gray-50)" : "transparent" }}>
                <div className="row" style={{ gap: 12 }}>
                  <Avatar name={p.name}/>
                  <div>
                    <div style={{ fontWeight: 600 }}>{p.name}</div>
                    <div style={{ fontSize: 12, color: "var(--gray-500)" }}>{p.contact} · child: {p.child}</div>
                  </div>
                </div>
                <div className="row">
                  {p.balance > 0 ? <Pill tone="amber">${p.balance} due</Pill> : <Pill tone="mint">Paid</Pill>}
                  <Button variant="ghost" size="sm">Message</Button>
                </div>
              </div>
            ))}
          </div>
        </Card>
      )}
    </div>
  );
}

function AdminClasses({ setSubroute, toast }) {
  const [level, setLevel] = useState("all");
  return (
    <div className="col" style={{ gap: 16 }}>
      <PageHeader title="Class catalog" sub="Browse, edit and create class offerings"
        actions={<Button variant="primary" icon="plus" onClick={() => setSubroute("class-builder")}>New class</Button>}
      />
      <div className="row" style={{ gap: 10, flexWrap: "wrap" }}>
        <Tabs tabs={[
          { id: "all", label: "All" },
          { id: "beg", label: "Beginner (L1–L2)" },
          { id: "int", label: "Intermediate (L3–L5)" },
          { id: "adv", label: "Advanced (L6+)" },
          { id: "comp", label: "Pre-Competitive" },
        ]} value={level} onChange={setLevel}/>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))", gap: 14 }}>
        {[
          { name: "Minnows L1", age: "4–5 yr", coach: "Daniel", spots: 2, cap: 8, when: "Mon · Wed · Fri 9:30", color: "var(--c-recreation)" },
          { name: "Minnows L2", age: "5–6 yr", coach: "Daniel", spots: 0, cap: 8, when: "Tue · Thu 10:00", color: "var(--c-recreation)" },
          { name: "Stingrays L3", age: "6–8 yr", coach: "Maria", spots: 3, cap: 10, when: "Mon · Wed 11:00", color: "var(--aqua)" },
          { name: "Stingrays L4", age: "7–9 yr", coach: "Maria", spots: 1, cap: 10, when: "Tue · Thu 15:00", color: "var(--aqua)" },
          { name: "Dolphins L5", age: "9–11 yr", coach: "Sam", spots: 2, cap: 12, when: "Mon · Wed · Fri 14:00", color: "var(--mint)" },
          { name: "Dolphins L6", age: "10–12 yr", coach: "Sam", spots: 4, cap: 12, when: "Tue · Thu · Sat 16:00", color: "var(--mint)" },
          { name: "Sharks L7", age: "11–14 yr", coach: "Maria", spots: 1, cap: 8, when: "Mon–Fri 16:30", color: "var(--c-competitive)" },
          { name: "Pre-Comp Squad", age: "12+ yr", coach: "Maria", spots: 0, cap: 8, when: "Daily 17:00", color: "var(--c-competitive)" },
        ].map((c, i) => (
          <Card key={i} className="cls-card" style={{ padding: 0, overflow: "hidden", cursor: "pointer" }} onClick={() => setSubroute("class-detail")}>
            <div style={{ height: 8, background: c.color }}/>
            <div style={{ padding: 16 }}>
              <div className="between" style={{ marginBottom: 6 }}>
                <div style={{ fontWeight: 700, fontSize: 16 }}>{c.name}</div>
                {c.spots === 0 ? <Pill tone="red">Full</Pill> : c.spots <= 2 ? <Pill tone="amber">{c.spots} left</Pill> : <Pill tone="mint">{c.spots} spots</Pill>}
              </div>
              <div style={{ fontSize: 12, color: "var(--gray-600)" }}>{c.age} · Coach {c.coach}</div>
              <div className="row" style={{ marginTop: 12, gap: 6, fontSize: 12, color: "var(--gray-700)" }}>
                <Icon name="clock" size={14}/><span>{c.when}</span>
              </div>
              <div style={{ marginTop: 14 }}>
                <div className="between" style={{ fontSize: 11, color: "var(--gray-500)", marginBottom: 4 }}>
                  <span>Capacity</span><span>{c.cap - c.spots}/{c.cap}</span>
                </div>
                <ProgressBar pct={((c.cap - c.spots) / c.cap) * 100} color={c.color}/>
              </div>
            </div>
          </Card>
        ))}
      </div>
    </div>
  );
}

function ClassDetail({ setSubroute }) {
  const [showAttendance, setShowAttendance] = useState(false);
  const enrolled = STUDENTS.slice(0, 7);
  const [att, setAtt] = useState(Object.fromEntries(enrolled.map(s => [s.id, "present"])));

  return (
    <div className="col" style={{ gap: 16 }}>
      <div className="row" style={{ gap: 8 }}>
        <button className="btn-icon" onClick={() => setSubroute("classes")}><Icon name="chev-left" size={18}/></button>
        <div className="t-caption">Classes</div><div className="t-caption">/</div><div className="t-caption" style={{ color: "var(--gray-900)", fontWeight: 600 }}>Stingrays L3</div>
      </div>

      <ImageSlot height={180} label="class hero photo" radius={16}/>

      <div className="between" style={{ flexWrap: "wrap", gap: 12 }}>
        <div>
          <Pill tone="aqua">Level 3 · Intermediate</Pill>
          <div className="t-h1" style={{ marginTop: 8 }}>Stingrays L3</div>
          <div className="muted">Mon · Wed · Fri · 11:00–11:45 · Coach Maria · Lanes 3–4</div>
        </div>
        <div className="row" style={{ gap: 8 }}>
          <Button variant="secondary" icon="edit">Edit class</Button>
          <Button variant="primary" icon="check" onClick={() => setShowAttendance(true)}>Take attendance</Button>
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "minmax(0, 2fr) minmax(0, 1fr)", gap: 16 }} className="dash-grid">
        <Card>
          <div className="t-h2" style={{ marginBottom: 14 }}>Enrolled students ({enrolled.length}/10)</div>
          <div className="col" style={{ gap: 6 }}>
            {enrolled.map(s => (
              <button key={s.id} onClick={() => setSubroute("student")} className="between" style={{ background: "var(--gray-50)", padding: 12, borderRadius: 10, textAlign: "left" }}>
                <div className="row" style={{ gap: 10 }}>
                  <Avatar name={s.name} color={s.color}/>
                  <div>
                    <div style={{ fontWeight: 600 }}>{s.name}</div>
                    <div style={{ fontSize: 12, color: "var(--gray-500)" }}>Age {s.age} · Attendance {s.attendance}%</div>
                  </div>
                </div>
                <div className="row" style={{ gap: 8 }}>
                  <div style={{ width: 100 }}><ProgressBar pct={s.attendance}/></div>
                  <Icon name="chev-right" size={16} color="var(--gray-400)"/>
                </div>
              </button>
            ))}
            <Button variant="ghost" full><Icon name="plus" size={14}/>Add student</Button>
          </div>
        </Card>

        <div className="col" style={{ gap: 16 }}>
          <Card>
            <div className="t-h2" style={{ marginBottom: 12 }}>Coach</div>
            <div className="row" style={{ gap: 12 }}>
              <Avatar name="Coach Maria" size="lg" color="#0099CC"/>
              <div>
                <div style={{ fontWeight: 700 }}>Coach Maria</div>
                <div style={{ fontSize: 12, color: "var(--gray-600)" }}>ASCA Level 4 · Lifeguard</div>
                <div className="row" style={{ marginTop: 8, gap: 6 }}><button className="btn btn-secondary btn-sm" type="button"><Icon name="msg" size={12}/>Message</button></div>
              </div>
            </div>
          </Card>
          <Card>
            <div className="t-h2" style={{ marginBottom: 12 }}>This week</div>
            <div className="col" style={{ gap: 8 }}>
              <div className="between"><span style={{ fontSize: 13 }}>Avg attendance</span><span className="t-mono-sm" style={{ fontWeight: 600 }}>92%</span></div>
              <div className="between"><span style={{ fontSize: 13 }}>Levels-up</span><span className="t-mono-sm" style={{ fontWeight: 600, color: "var(--mint)" }}>2</span></div>
              <div className="between"><span style={{ fontSize: 13 }}>Skills mastered</span><span className="t-mono-sm" style={{ fontWeight: 600 }}>18</span></div>
              <div className="between"><span style={{ fontSize: 13 }}>Sessions held</span><span className="t-mono-sm" style={{ fontWeight: 600 }}>3 / 3</span></div>
            </div>
          </Card>
        </div>
      </div>

      <Sheet open={showAttendance} onClose={() => setShowAttendance(false)} title="Take attendance" large>
        <div className="muted" style={{ marginBottom: 16 }}>Mon, May 14 · 11:00 Stingrays L3</div>
        <div className="col" style={{ gap: 8 }}>
          {enrolled.map(s => (
            <div key={s.id} className="between" style={{ padding: 12, background: "var(--gray-50)", borderRadius: 10 }}>
              <div className="row" style={{ gap: 10 }}>
                <Avatar name={s.name} color={s.color}/>
                <div style={{ fontWeight: 600 }}>{s.name}</div>
              </div>
              <div className="row" style={{ gap: 6 }}>
                {[
                  { id: "present", label: "Present", color: "var(--mint)" },
                  { id: "late", label: "Late", color: "var(--amber)" },
                  { id: "absent", label: "Absent", color: "var(--red)" },
                ].map(o => {
                  const active = att[s.id] === o.id;
                  return (
                    <button key={o.id} onClick={() => setAtt({ ...att, [s.id]: o.id })} className="btn btn-sm"
                      style={{ background: active ? o.color : "white", color: active ? "white" : o.color, border: `1.5px solid ${o.color}` }}>
                      {o.label}
                    </button>
                  );
                })}
              </div>
            </div>
          ))}
        </div>
        <div className="row" style={{ marginTop: 18, gap: 8 }}>
          <Button variant="ghost" onClick={() => setShowAttendance(false)}>Cancel</Button>
          <div style={{ flex: 1 }}/>
          <Button variant="primary" onClick={() => setShowAttendance(false)}>Save attendance</Button>
        </div>
      </Sheet>
    </div>
  );
}

function ClassBuilder({ setSubroute, toast }) {
  return (
    <div className="col" style={{ gap: 16, maxWidth: 720 }}>
      <div className="row" style={{ gap: 8 }}>
        <button className="btn-icon" onClick={() => setSubroute("classes")}><Icon name="chev-left" size={18}/></button>
        <div className="t-caption">Classes</div><div className="t-caption">/</div><div className="t-caption" style={{ color: "var(--gray-900)", fontWeight: 600 }}>New class</div>
      </div>
      <PageHeader title="Create new class"/>
      <Card>
        <div className="col" style={{ gap: 16 }}>
          <div className="field"><label>Class name</label><input className="input" placeholder="e.g. Stingrays L3"/></div>
          <div className="row" style={{ gap: 12 }}>
            <div className="field" style={{ flex: 1 }}><label>Level</label><select className="select"><option>Level 1</option><option>Level 3</option><option>Pre-Competitive</option></select></div>
            <div className="field" style={{ flex: 1 }}><label>Age range</label><div className="row" style={{ gap: 8 }}><input className="input" placeholder="6" style={{ width: "100%" }}/><span className="muted">to</span><input className="input" placeholder="8" style={{ width: "100%" }}/></div></div>
            <div className="field" style={{ flex: 1 }}><label>Capacity</label><input className="input" type="number" placeholder="10"/></div>
          </div>
          <div className="row" style={{ gap: 12 }}>
            <div className="field" style={{ flex: 1 }}><label>Instructor</label><select className="select"><option>Coach Maria</option><option>Coach Daniel</option><option>Coach Sam</option></select></div>
            <div className="field" style={{ flex: 1 }}><label>Pool / Lane</label><input className="input" placeholder="Lanes 3–4"/></div>
          </div>
          <div className="field">
            <label>Schedule — days</label>
            <div className="row" style={{ gap: 6 }}>
              {["M","T","W","T","F","S","S"].map((d, i) => {
                const [on, setOn] = [i === 0 || i === 2 || i === 4, null];
                return <button key={i} className="btn" type="button" style={{ width: 44, padding: 0, background: on ? "var(--navy)" : "white", color: on ? "white" : "var(--gray-700)", border: `1px solid ${on ? "var(--navy)" : "var(--gray-300)"}` }}>{d}</button>;
              })}
            </div>
          </div>
          <div className="row" style={{ gap: 12 }}>
            <div className="field" style={{ flex: 1 }}><label>Start time</label><input className="input" type="time" defaultValue="11:00"/></div>
            <div className="field" style={{ flex: 1 }}><label>Duration</label><select className="select"><option>30 min</option><option>45 min</option><option>60 min</option></select></div>
            <div className="field" style={{ flex: 1 }}><label>Price</label><input className="input" placeholder="$185 / month"/></div>
          </div>
          <div className="between" style={{ padding: "10px 0", borderTop: "1px solid var(--gray-200)" }}>
            <div><div style={{ fontWeight: 600 }}>Recurring</div><div className="t-caption">Class repeats each week</div></div>
            <Toggle on={true} onChange={() => {}}/>
          </div>
        </div>
      </Card>
      <div className="row" style={{ gap: 10, justifyContent: "flex-end" }}>
        <Button variant="ghost" onClick={() => setSubroute("classes")}>Cancel</Button>
        <Button variant="primary" onClick={() => { toast({ message: "Class created" }); setSubroute("classes"); }}>Create class</Button>
      </div>
    </div>
  );
}

function StudentProfileView({ setSubroute }) {
  const [tab, setTab] = useState("progress");
  return (
    <div className="col" style={{ gap: 16 }}>
      <div className="row" style={{ gap: 8 }}>
        <button className="btn-icon" onClick={() => setSubroute("people")}><Icon name="chev-left" size={18}/></button>
        <div className="t-caption">Students</div><div className="t-caption">/</div><div className="t-caption" style={{ color: "var(--gray-900)", fontWeight: 600 }}>Mia Tanaka</div>
      </div>

      <Card>
        <div className="row" style={{ gap: 18, flexWrap: "wrap" }}>
          <Avatar name="Mia Tanaka" size="lg" color="#0099CC"/>
          <div style={{ flex: 1, minWidth: 200 }}>
            <div className="t-h1">Mia Tanaka</div>
            <div className="muted">Age 7 · Stingrays L3 · Joined Aug 2024 · Parent: Hiroshi Tanaka</div>
            <div className="row" style={{ marginTop: 10, gap: 8 }}>
              <Pill tone="aqua" icon="ladder">Level 3</Pill>
              <Pill tone="mint" icon="check">95% attendance</Pill>
              <Pill icon="trophy">2 badges</Pill>
            </div>
          </div>
          <div className="row" style={{ gap: 8 }}>
            <Button variant="secondary" icon="msg">Message parent</Button>
            <Button variant="primary" icon="check" onClick={() => setSubroute("assessment")}>Assess</Button>
          </div>
        </div>
      </Card>

      <Tabs tabs={[{ id: "progress", label: "Progress" }, { id: "attendance", label: "Attendance" }, { id: "notes", label: "Coach notes" }, { id: "info", label: "Info" }]} value={tab} onChange={setTab}/>

      {tab === "progress" && (
        <div style={{ display: "grid", gridTemplateColumns: "minmax(0, 2fr) minmax(0, 1fr)", gap: 16 }} className="dash-grid">
          <Card>
            <div className="t-h2" style={{ marginBottom: 16 }}>Progress map</div>
            <SwimmerProgressMap level={3} progress={0.6}/>
          </Card>
          <div className="col" style={{ gap: 16 }}>
            <Card>
              <div className="t-h2" style={{ marginBottom: 12 }}>This level</div>
              <div style={{ display: "flex", justifyContent: "center", padding: "8px 0 16px" }}>
                <ProgressRing pct={60} size={140} color="var(--aqua)" label="60%" sublabel="Level 3"/>
              </div>
              <div className="t-caption" style={{ textAlign: "center" }}>4 of 8 skills mastered</div>
            </Card>
            <Card>
              <div className="t-h2" style={{ marginBottom: 12 }}>Recent badges</div>
              <div className="row" style={{ gap: 12, flexWrap: "wrap" }}>
                {[
                  { name: "First Length", color: "var(--mint)", icon: "wave" },
                  { name: "10 Sessions", color: "var(--aqua)", icon: "flame" },
                ].map((b, i) => (
                  <div key={i} style={{ background: "var(--navy)", color: "white", borderRadius: 12, padding: 12, textAlign: "center", flex: 1 }}>
                    <Icon name={b.icon} size={28} color={b.color}/>
                    <div style={{ fontSize: 11, marginTop: 4, fontWeight: 600 }}>{b.name}</div>
                  </div>
                ))}
              </div>
            </Card>
          </div>
        </div>
      )}

      {tab === "attendance" && (
        <Card>
          <div className="t-h2" style={{ marginBottom: 14 }}>Attendance (last 12 weeks)</div>
          <AttendanceHeatmap/>
          <div className="row" style={{ marginTop: 14, gap: 16, fontSize: 12, color: "var(--gray-600)" }}>
            <div className="row" style={{ gap: 6 }}><div style={{ width: 12, height: 12, background: "var(--mint)", borderRadius: 3 }}/>Present</div>
            <div className="row" style={{ gap: 6 }}><div style={{ width: 12, height: 12, background: "var(--amber)", borderRadius: 3 }}/>Late</div>
            <div className="row" style={{ gap: 6 }}><div style={{ width: 12, height: 12, background: "var(--red)", borderRadius: 3 }}/>Absent</div>
            <div className="row" style={{ gap: 6 }}><div style={{ width: 12, height: 12, background: "var(--gray-200)", borderRadius: 3 }}/>No class</div>
          </div>
        </Card>
      )}

      {tab === "notes" && (
        <Card>
          <div className="t-h2" style={{ marginBottom: 14 }}>Coach notes</div>
          <div className="col" style={{ gap: 12 }}>
            {[
              { date: "May 12, 2026", coach: "Maria", body: "Backstroke arm recovery much cleaner today. Ready to attempt independent length next session." },
              { date: "May 5, 2026", coach: "Maria", body: "Working on streamline off the wall. Needs reminder on chin position." },
              { date: "Apr 28, 2026", coach: "Maria", body: "First time floating without support — huge milestone! Parent notified." },
            ].map((n, i) => (
              <div key={i} style={{ padding: 14, background: "var(--gray-50)", borderRadius: 10, borderLeft: "3px solid var(--aqua)" }}>
                <div className="row" style={{ gap: 8, marginBottom: 4 }}>
                  <span style={{ fontWeight: 600, fontSize: 13 }}>Coach {n.coach}</span>
                  <span className="t-caption">{n.date}</span>
                </div>
                <div style={{ fontSize: 14 }}>{n.body}</div>
              </div>
            ))}
            <Button variant="secondary" full icon="plus">Add note</Button>
          </div>
        </Card>
      )}

      {tab === "info" && (
        <Card>
          <div className="t-h2" style={{ marginBottom: 14 }}>Student info</div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))", gap: 16 }}>
            {[
              ["Full name", "Mia Tanaka"], ["Date of birth", "Apr 3, 2018"], ["Age", "7 years"],
              ["Parent / Guardian", "Hiroshi Tanaka"], ["Emergency contact", "+65 8123 4567"], ["Medical notes", "None on file"],
              ["Enrollment date", "Aug 14, 2024"], ["Membership", "Active · Monthly"], ["Waiver", "Signed Aug 2024"],
            ].map(([k, v]) => (
              <div key={k}><div className="t-caption">{k}</div><div style={{ fontWeight: 600, fontSize: 14, marginTop: 2 }}>{v}</div></div>
            ))}
          </div>
        </Card>
      )}
    </div>
  );
}

function LevelLadder({ current = 3, progress = 0.5 }) {
  const levels = [
    { n: 1, name: "Water Acclimation" },
    { n: 2, name: "Submersion" },
    { n: 3, name: "Floating & Glide" },
    { n: 4, name: "Stroke Introduction" },
    { n: 5, name: "Stroke Development" },
    { n: 6, name: "Stroke Mechanics" },
    { n: 7, name: "Stroke Refinement" },
    { n: 8, name: "Pre-Competitive" },
  ];
  return (
    <div className="col" style={{ gap: 4 }}>
      {levels.map(l => {
        const state = l.n < current ? "done" : l.n === current ? "active" : "future";
        return (
          <div key={l.n} className="row" style={{ gap: 14, padding: "8px 0" }}>
            <div style={{
              width: 36, height: 36, borderRadius: "50%",
              display: "flex", alignItems: "center", justifyContent: "center",
              background: state === "done" ? "var(--mint)" : state === "active" ? "white" : "white",
              color: state === "done" ? "var(--navy)" : state === "active" ? "var(--aqua)" : "var(--gray-400)",
              border: state === "active" ? "2px solid var(--aqua)" : state === "future" ? "2px solid var(--gray-200)" : "none",
              fontWeight: 700, position: "relative", flexShrink: 0,
              animation: state === "active" ? "pulse-ring 1.6s infinite" : "none",
            }}>
              {state === "done" ? <Icon name="check" size={18}/> : l.n}
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontWeight: state === "active" ? 700 : 500, color: state === "future" ? "var(--gray-500)" : "var(--gray-900)" }}>Level {l.n} · {l.name}</div>
              {state === "active" && <div style={{ marginTop: 6 }}><ProgressBar pct={progress * 100} color="var(--aqua)"/></div>}
              {state === "done" && <div className="t-caption" style={{ color: "var(--mint)" }}>Completed</div>}
            </div>
            {state === "done" && <Pill tone="mint">Mastered</Pill>}
            {state === "active" && <Pill tone="aqua">In progress</Pill>}
          </div>
        );
      })}
    </div>
  );
}

function AssessmentTool({ setSubroute, toast }) {
  const skills = [
    "Submerges face for 3 seconds",
    "Front float with assistance",
    "Back float with assistance",
    "Front glide 5m",
    "Back glide 5m",
    "Flutter kick with kickboard 10m",
    "Independent breath control (5 bobs)",
    "Side breathing on freestyle",
  ];
  const [states, setStates] = useState(Object.fromEntries(skills.map((s, i) => [s, i < 4 ? "mastered" : i < 6 ? "progress" : "not"])));
  const [celebrate, setCelebrate] = useState(false);

  const cycle = (s) => {
    const order = ["not", "progress", "mastered"];
    const next = order[(order.indexOf(states[s]) + 1) % 3];
    setStates({ ...states, [s]: next });
  };

  const allMastered = Object.values(states).every(v => v === "mastered");

  return (
    <div className="col" style={{ gap: 16, maxWidth: 720 }}>
      {celebrate && <Confetti/>}
      <div className="row" style={{ gap: 8 }}>
        <button className="btn-icon" onClick={() => setSubroute("student")}><Icon name="chev-left" size={18}/></button>
        <div className="t-caption">Mia Tanaka</div><div className="t-caption">/</div><div className="t-caption" style={{ color: "var(--gray-900)", fontWeight: 600 }}>Assessment</div>
      </div>

      <PageHeader title="Skill assessment" sub="Tap each skill to update mastery. Level 3 — Floating & Glide."/>

      <Card>
        <div className="col" style={{ gap: 10 }}>
          {skills.map(s => {
            const v = states[s];
            const tone = v === "mastered" ? "var(--mint)" : v === "progress" ? "var(--aqua)" : "var(--gray-200)";
            const label = v === "mastered" ? "Mastered" : v === "progress" ? "In progress" : "Not started";
            return (
              <button key={s} onClick={() => cycle(s)} className="between" style={{ padding: 16, background: v === "mastered" ? "var(--mint-50)" : v === "progress" ? "var(--aqua-50)" : "var(--gray-50)", borderRadius: 12, textAlign: "left", borderLeft: `4px solid ${tone}`, transition: "all 160ms" }}>
                <div className="row" style={{ gap: 12 }}>
                  <div style={{ width: 28, height: 28, borderRadius: "50%", background: tone, display: "flex", alignItems: "center", justifyContent: "center", color: v === "not" ? "var(--gray-500)" : "white" }}>
                    {v === "mastered" ? <Icon name="check" size={16}/> : v === "progress" ? <div style={{ width: 10, height: 10, background: "white", borderRadius: "50%" }}/> : <Icon name="dot" size={10}/>}
                  </div>
                  <span style={{ fontWeight: 600, fontSize: 14 }}>{s}</span>
                </div>
                <Pill tone={v === "mastered" ? "mint" : v === "progress" ? "aqua" : "default"}>{label}</Pill>
              </button>
            );
          })}
        </div>
        <div className="row" style={{ marginTop: 18, gap: 10 }}>
          <Button variant="secondary" icon="mail">Voice note</Button>
          <div style={{ flex: 1 }}/>
          <Button variant="primary" onClick={() => {
            if (allMastered) setCelebrate(true);
            toast({ message: allMastered ? "🎉 Mia leveled up to Level 4!" : "Assessment saved" });
            setTimeout(() => setSubroute("student"), allMastered ? 1500 : 400);
          }}>Save assessment</Button>
        </div>
      </Card>
    </div>
  );
}

function EnrollmentFlow({ setSubroute, toast }) {
  const [step, setStep] = useState(0);
  return (
    <div className="col" style={{ gap: 16, maxWidth: 640 }}>
      <PageHeader title="Enroll a student"/>
      <div className="row" style={{ gap: 6 }}>
        {["Student", "Class & schedule", "Payment"].map((label, i) => (
          <div key={i} style={{ flex: 1, padding: 12, borderRadius: 10, background: i === step ? "var(--navy)" : "var(--gray-100)", color: i === step ? "white" : "var(--gray-600)" }}>
            <div className="row" style={{ gap: 8 }}>
              <div style={{ width: 24, height: 24, borderRadius: "50%", background: i < step ? "var(--mint)" : i === step ? "var(--mint)" : "white", color: i <= step ? "white" : "var(--gray-500)", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 12, fontWeight: 700 }}>
                {i < step ? <Icon name="check" size={12}/> : i + 1}
              </div>
              <span style={{ fontSize: 13, fontWeight: 600 }}>{label}</span>
            </div>
          </div>
        ))}
      </div>
      <Card>
        {step === 0 && (
          <div className="col" style={{ gap: 14 }}>
            <div className="t-h2">Select student</div>
            {STUDENTS.slice(0, 5).map(s => (
              <button key={s.id} className="row between" style={{ padding: 12, borderRadius: 10, background: "var(--gray-50)", textAlign: "left", width: "100%" }}>
                <div className="row" style={{ gap: 10 }}><Avatar name={s.name} color={s.color}/><div><div style={{ fontWeight: 600 }}>{s.name}</div><div style={{ fontSize: 12, color: "var(--gray-500)" }}>Age {s.age} · Level {s.level}</div></div></div>
                <Icon name="chev-right" size={16}/>
              </button>
            ))}
            <Button variant="ghost" icon="plus" full>Add a new student</Button>
          </div>
        )}
        {step === 1 && (
          <div className="col" style={{ gap: 14 }}>
            <div className="t-h2">Choose class & schedule</div>
            <div className="field"><label>Class</label><select className="select"><option>Stingrays L3 — Coach Maria</option></select></div>
            <div className="field"><label>Schedule</label>
              <div className="col" style={{ gap: 8 }}>
                {["Mon · Wed · Fri 11:00", "Tue · Thu 15:00"].map(s => (
                  <label key={s} className="row" style={{ padding: 12, borderRadius: 10, background: "var(--gray-50)" }}><input type="radio" name="sched" defaultChecked={s.includes("Mon")}/><span style={{ marginLeft: 8 }}>{s}</span></label>
                ))}
              </div>
            </div>
            <div className="field"><label>Start date</label><input className="input" type="date" defaultValue="2026-05-20"/></div>
          </div>
        )}
        {step === 2 && (
          <div className="col" style={{ gap: 14 }}>
            <div className="t-h2">Payment</div>
            <div style={{ background: "var(--sky)", padding: 14, borderRadius: 10 }}>
              <div className="between"><span style={{ fontSize: 13 }}>Monthly tuition</span><span style={{ fontWeight: 700 }}>$185.00</span></div>
              <div className="between"><span style={{ fontSize: 13 }}>Registration fee</span><span style={{ fontWeight: 700 }}>$25.00</span></div>
              <hr className="hr"/>
              <div className="between"><span style={{ fontWeight: 700 }}>Today's charge</span><span className="t-mono-stat" style={{ fontSize: 22 }}>$210.00</span></div>
            </div>
            <div className="field"><label>Payment method</label>
              <label className="row" style={{ padding: 12, background: "var(--gray-50)", borderRadius: 10 }}><input type="radio" defaultChecked/><span style={{ marginLeft: 10, fontWeight: 600 }}>•••• 4242</span><Pill style={{ marginLeft: "auto" }} tone="aqua">Default</Pill></label>
            </div>
            <label className="row" style={{ fontSize: 13 }}><input type="checkbox" defaultChecked/><span style={{ marginLeft: 8 }}>Set up auto-pay for future monthly tuition</span></label>
          </div>
        )}
      </Card>
      <div className="row" style={{ gap: 10, justifyContent: "flex-end" }}>
        {step > 0 && <Button variant="ghost" onClick={() => setStep(step - 1)}>Back</Button>}
        <Button variant="primary" onClick={() => {
          if (step < 2) setStep(step + 1);
          else { toast({ message: "Enrollment complete · receipt emailed" }); setSubroute("home"); }
        }}>{step < 2 ? "Continue" : "Complete enrollment"}</Button>
      </div>
    </div>
  );
}

function AttendanceHeatmap() {
  return (
    <div style={{ overflowX: "auto" }}>
      <div style={{ display: "grid", gridTemplateColumns: "auto repeat(12, 1fr)", gap: 4, minWidth: 600 }}>
        <div/>
        {Array.from({ length: 12 }).map((_, i) => (
          <div key={i} style={{ fontSize: 10, color: "var(--gray-500)", textAlign: "center" }}>W{i+1}</div>
        ))}
        {["Mon","Wed","Fri"].map(d => (
          <React.Fragment key={d}>
            <div style={{ fontSize: 10, color: "var(--gray-500)", paddingRight: 8 }}>{d}</div>
            {Array.from({ length: 12 }).map((_, i) => {
              const r = Math.random();
              const color = r > 0.8 ? "var(--red)" : r > 0.65 ? "var(--amber)" : "var(--mint)";
              return <div key={i} style={{ aspectRatio: "1", borderRadius: 4, background: color, opacity: r > 0.95 ? 0.3 : 1 }}/>;
            })}
          </React.Fragment>
        ))}
      </div>
    </div>
  );
}

function AdminReports() {
  return (
    <div className="col" style={{ gap: 16 }}>
      <PageHeader title="Reports & analytics" sub="Operational insights for your school"
        actions={<>
          <Tabs tabs={[{ id: "30", label: "30 days" }, { id: "90", label: "90 days" }, { id: "1y", label: "1 year" }]} value="30" onChange={() => {}}/>
          <Button variant="secondary" icon="download">Export</Button>
        </>}
      />

      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))", gap: 12 }}>
        <StatCard label="Retention rate" value="91%" sub="+2.1% vs prior" trend="up" accent="var(--mint)"/>
        <StatCard label="Avg attendance" value="89%" sub="Target 85%" trend="up" accent="var(--aqua)"/>
        <StatCard label="Level-ups (MTD)" value="14" sub="6 pending" accent="var(--c-competitive)"/>
        <StatCard label="Revenue per student" value="$195" sub="$182 last month" trend="up" accent="var(--navy)"/>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "minmax(0, 2fr) minmax(0, 1fr)", gap: 16 }} className="dash-grid">
        <Card>
          <div className="between" style={{ marginBottom: 14 }}>
            <div className="t-h2">Enrollment trend</div>
            <Pill tone="mint">+12 this month</Pill>
          </div>
          <LineChart values={[180, 192, 200, 210, 218, 225, 232, 238, 240, 244, 246, 248]} labels={["Jun","Jul","Aug","Sep","Oct","Nov","Dec","Jan","Feb","Mar","Apr","May"]} color="var(--aqua)" height={200}/>
        </Card>
        <Card>
          <div className="t-h2" style={{ marginBottom: 14 }}>Age distribution</div>
          <div className="col" style={{ gap: 10 }}>
            {[
              { label: "4–6 yrs", pct: 30, color: "var(--c-recreation)" },
              { label: "7–9 yrs", pct: 38, color: "var(--aqua)" },
              { label: "10–12 yrs", pct: 22, color: "var(--mint)" },
              { label: "13+ yrs", pct: 10, color: "var(--c-competitive)" },
            ].map(d => (
              <div key={d.label} className="col" style={{ gap: 4 }}>
                <div className="between"><span style={{ fontSize: 13, fontWeight: 600 }}>{d.label}</span><span className="t-mono-sm" style={{ fontWeight: 600 }}>{d.pct}%</span></div>
                <ProgressBar pct={d.pct} color={d.color}/>
              </div>
            ))}
          </div>
        </Card>
      </div>

      <Card>
        <div className="t-h2" style={{ marginBottom: 14 }}>Attendance heatmap (this term)</div>
        <AttendanceHeatmap/>
      </Card>
    </div>
  );
}

function AdminSettings() {
  return (
    <div className="col" style={{ gap: 16, maxWidth: 720 }}>
      <PageHeader title="Settings"/>
      <Card>
        <div className="t-h2" style={{ marginBottom: 14 }}>School profile</div>
        <div className="col" style={{ gap: 12 }}>
          <div className="field"><label>School name</label><input className="input" defaultValue="Aqua Center Swim School"/></div>
          <div className="field"><label>Pool address</label><input className="input" defaultValue="42 Marina Bay Boulevard, Singapore"/></div>
          <div className="row" style={{ gap: 12 }}>
            <div className="field" style={{ flex: 1 }}><label>Timezone</label><select className="select"><option>Asia/Singapore (GMT+8)</option></select></div>
            <div className="field" style={{ flex: 1 }}><label>Currency</label><select className="select"><option>SGD ($)</option><option>USD ($)</option></select></div>
          </div>
        </div>
      </Card>
      <Card>
        <div className="t-h2" style={{ marginBottom: 14 }}>Notifications</div>
        <div className="col" style={{ gap: 4 }}>
          {[
            ["New enrollments", true],
            ["Payment received / failed", true],
            ["Class capacity warnings", true],
            ["Student level-ups", false],
            ["Daily summary email", true],
          ].map(([k, v]) => (
            <div key={k} className="between" style={{ padding: "12px 0", borderTop: "1px solid var(--gray-100)" }}>
              <div style={{ fontWeight: 600, fontSize: 14 }}>{k}</div>
              <Toggle on={v} onChange={() => {}}/>
            </div>
          ))}
        </div>
      </Card>
    </div>
  );
}

Object.assign(window, { AdminPortal });