function AdminView({ view }) {
  if (view === "admin_overview") return <AdminOverview />;
  if (view === "admin_training") return <AdminTraining />;
  if (view === "admin_resources") return <AdminResources />;
  if (view === "admin_reports") return <AdminReports />;
  if (view === "admin_users") return <AdminUsers />;
  return <AdminOverview />;
}

function AdminOverview() {
  return (
    <>
      <window.TopBar
        title="District overview"
        subtitle="Cascade USD #47 · 38 counselors · 12 schools"
        right={
          <button style={{ padding: "8px 14px", borderRadius: 8, background: "var(--ink)", color: "white", fontSize: 13, fontWeight: 500, display: "inline-flex", alignItems: "center", gap: 7 }}>
            <window.I.Download size={13} /> Export district report
          </button>
        }
      />
      <div style={{ padding: 32, display: "flex", flexDirection: "column", gap: 24 }}>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 14 }}>
          <AdminStat label="Active counselors" value="34" sub="of 38 · 89% active" />
          <AdminStat label="Training minutes logged" value="4,218" sub="+612 this month" />
          <AdminStat label="Resources shared" value="482" sub="with student-athletes" />
          <AdminStat label="Avg. completion rate" value="81%" sub="across 6 monthly sessions" />
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1.3fr 1fr", gap: 20 }}>
          <div style={{ padding: 24, background: "var(--card)", border: "1px solid var(--line)", borderRadius: "var(--radius)" }}>
            <div style={{ fontSize: 15, fontWeight: 500, marginBottom: 4 }}>Counselor leaderboard</div>
            <div style={{ fontSize: 12.5, color: "var(--ink-3)", marginBottom: 18 }}>Top performers this month by minutes + sharing</div>
            {[
              { name: "Priya Joshi", school: "Lincoln HS", minutes: 241, shares: 28, rank: 1 },
              { name: "David Chen", school: "Eastwood HS", minutes: 218, shares: 24, rank: 2 },
              { name: "Aliyah Brooks", school: "Franklin HS", minutes: 196, shares: 19, rank: 3 },
              { name: "Rachel Kim", school: "Westbrook HS", minutes: 184, shares: 14, rank: 4, self: true },
              { name: "Marcus Delgado", school: "North Ridge HS", minutes: 171, shares: 17, rank: 5 },
            ].map(c => (
              <div key={c.rank} style={{
                display: "flex", alignItems: "center", gap: 14, padding: "10px 0",
                borderTop: c.rank > 1 ? "1px solid var(--line)" : "none",
                background: c.self ? "#EEF5F0" : "transparent",
                margin: c.self ? "0 -12px" : "0", padding: c.self ? "10px 12px" : "10px 0",
                borderRadius: c.self ? 8 : 0,
              }}>
                <div className="mono" style={{ fontSize: 12, color: c.rank <= 3 ? "var(--gold)" : "var(--ink-3)", fontWeight: 600, width: 22 }}>#{c.rank}</div>
                <window.UI.Avatar initials={c.name.split(" ").map(n => n[0]).join("")} size={32} />
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 13, fontWeight: 500 }}>{c.name} {c.self && <span style={{ fontSize: 10, color: "var(--accent-ink)", marginLeft: 4 }}>(viewing)</span>}</div>
                  <div style={{ fontSize: 11.5, color: "var(--ink-3)" }}>{c.school}</div>
                </div>
                <div style={{ fontSize: 12, color: "var(--ink-2)", display: "flex", gap: 16 }}>
                  <span><b style={{ color: "var(--ink)" }}>{c.minutes}</b> min</span>
                  <span><b style={{ color: "var(--ink)" }}>{c.shares}</b> shares</span>
                </div>
              </div>
            ))}
          </div>
          <div style={{ padding: 24, background: "var(--card)", border: "1px solid var(--line)", borderRadius: "var(--radius)" }}>
            <div style={{ fontSize: 15, fontWeight: 500, marginBottom: 4 }}>District pain points</div>
            <div style={{ fontSize: 12.5, color: "var(--ink-3)", marginBottom: 18 }}>Themes surfaced via AI across all counselors</div>
            {[
              { t: "Amateurism & NIL rule changes 2026", m: 48 },
              { t: "Mental health referrals in-season", m: 37 },
              { t: "Transfer portal effects on HS", m: 29 },
              { t: "AP vs honors for D1 hopefuls", m: 21 },
              { t: "Highlight reel coaching", m: 14 },
            ].map((p, i) => (
              <div key={i} style={{ display: "flex", gap: 12, alignItems: "center", padding: "10px 0", borderTop: i > 0 ? "1px solid var(--line)" : "none" }}>
                <div style={{ flex: 1, fontSize: 13 }}>{p.t}</div>
                <div style={{ width: 100, height: 6, background: "var(--line)", borderRadius: 3, overflow: "hidden" }}>
                  <div style={{ width: `${(p.m / 48) * 100}%`, height: "100%", background: "var(--accent)" }} />
                </div>
                <div className="mono" style={{ fontSize: 11.5, color: "var(--ink-3)", width: 30, textAlign: "right" }}>{p.m}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </>
  );
}

function AdminStat({ label, value, sub }) {
  return (
    <div style={{ padding: 18, background: "var(--card)", border: "1px solid var(--line)", borderRadius: "var(--radius)" }}>
      <div style={{ fontSize: 11.5, color: "var(--ink-3)", fontWeight: 500, letterSpacing: 0.02, textTransform: "uppercase" }}>{label}</div>
      <div className="serif" style={{ fontSize: 34, lineHeight: 1, letterSpacing: -0.015, marginTop: 10 }}>{value}</div>
      <div style={{ fontSize: 12, color: "var(--ink-3)", marginTop: 6 }}>{sub}</div>
    </div>
  );
}

function AdminTraining() {
  const { TRAINING_SESSIONS } = window.DATA;
  const [showForm, setShowForm] = useState(false);
  return (
    <>
      <window.TopBar
        title="Manage Training Sessions"
        subtitle="Upload monthly training videos, attach resources, tag categories."
        right={
          <button onClick={() => setShowForm(true)} style={{ padding: "8px 14px", borderRadius: 8, background: "var(--ink)", color: "white", fontSize: 13, fontWeight: 500, display: "inline-flex", alignItems: "center", gap: 7 }}>
            <window.I.Plus size={13} sw={2.5} /> New training session
          </button>
        }
      />
      <div style={{ padding: 32 }}>
        <div style={{ border: "1px solid var(--line)", borderRadius: "var(--radius)", background: "var(--card)", overflow: "hidden" }}>
          <div style={{ display: "grid", gridTemplateColumns: "60px 1fr 150px 110px 100px 80px 130px", gap: 16, padding: "12px 20px", background: "var(--bg-2)", borderBottom: "1px solid var(--line)", fontSize: 11, color: "var(--ink-3)", fontWeight: 500, letterSpacing: 0.04, textTransform: "uppercase" }}>
            <div></div>
            <div>Title</div>
            <div>Category</div>
            <div>Date</div>
            <div>Views</div>
            <div>Status</div>
            <div>Actions</div>
          </div>
          {TRAINING_SESSIONS.map((s, i) => (
            <div key={s.id} style={{ display: "grid", gridTemplateColumns: "60px 1fr 150px 110px 100px 80px 130px", gap: 16, padding: "14px 20px", alignItems: "center", borderTop: i > 0 ? "1px solid var(--line)" : "none" }}>
              <div style={{ width: 48, height: 30, borderRadius: 4, background: s.thumb }} />
              <div>
                <div style={{ fontSize: 13, fontWeight: 500 }}>{s.title}</div>
                <div style={{ fontSize: 11.5, color: "var(--ink-3)", marginTop: 2 }}>{s.resources.length} resources · {s.duration} min</div>
              </div>
              <window.UI.Tag cat={s.category} />
              <div style={{ fontSize: 12, color: "var(--ink-3)" }}>{new Date(s.date).toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" })}</div>
              <div style={{ fontSize: 12.5 }}>{s.views}</div>
              <div>
                <span style={{ fontSize: 10.5, padding: "2px 7px", borderRadius: 999, background: "var(--success-soft)", color: "#14504F", fontWeight: 500 }}>Published</span>
              </div>
              <div style={{ display: "flex", gap: 6 }}>
                <button style={{ padding: 6, border: "1px solid var(--line)", borderRadius: 6, background: "var(--card)" }}><window.I.Edit size={12} stroke="var(--ink-2)" /></button>
                <button style={{ padding: 6, border: "1px solid var(--line)", borderRadius: 6, background: "var(--card)" }}><window.I.Eye size={12} stroke="var(--ink-2)" /></button>
                <button style={{ padding: 6, border: "1px solid var(--line)", borderRadius: 6, background: "var(--card)" }}><window.I.Trash size={12} stroke="var(--warn)" /></button>
              </div>
            </div>
          ))}
        </div>
      </div>
      {showForm && <TrainingForm onClose={() => setShowForm(false)} />}
    </>
  );
}

function TrainingForm({ onClose }) {
  const [title, setTitle] = useState("");
  const [desc, setDesc] = useState("");
  const [cat, setCat] = useState("recruiting");
  const [date, setDate] = useState("2026-05-01");
  const [videoFile, setVideoFile] = useState(null);
  const [resources, setResources] = useState([]);

  const fld = {
    width: "100%", padding: "10px 12px", border: "1px solid var(--line-2)",
    borderRadius: 7, fontSize: 13, background: "var(--card)",
  };

  return (
    <window.UI.Modal open onClose={onClose} width={720}>
      <div style={{ padding: 28 }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 4 }}>
          <div>
            <div style={{ fontSize: 11, color: "var(--ink-3)", letterSpacing: 0.06, textTransform: "uppercase", fontWeight: 500 }}>Admin · Create post</div>
            <h2 className="serif" style={{ fontSize: 26, margin: "6px 0 0", letterSpacing: -0.015 }}>New training session</h2>
          </div>
          <button onClick={onClose} style={{ padding: 6 }}><window.I.X size={18} stroke="var(--ink-3)" /></button>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16, marginTop: 22 }}>
          <FormField label="Session name">
            <input style={fld} value={title} onChange={e => setTitle(e.target.value)} placeholder="e.g. Supporting Seniors Through Commitment Season" />
          </FormField>
          <FormField label="Date / month">
            <input type="date" style={fld} value={date} onChange={e => setDate(e.target.value)} />
          </FormField>
        </div>

        <FormField label="Description">
          <textarea style={{ ...fld, minHeight: 80, resize: "vertical", fontFamily: "inherit" }} value={desc} onChange={e => setDesc(e.target.value)} placeholder="What counselors will learn, why it matters…" />
        </FormField>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
          <FormField label="Category / tag">
            <select style={fld} value={cat} onChange={e => setCat(e.target.value)}>
              {Object.entries(window.DATA.TAGS).map(([k, v]) => <option key={k} value={k}>{v.label}</option>)}
            </select>
          </FormField>
          <FormField label="Instructor">
            <input style={fld} placeholder="e.g. Dr. Maya Alvarez" />
          </FormField>
        </div>

        <FormField label="Video file">
          <FileDrop
            current={videoFile}
            onChange={setVideoFile}
            accept="video/*"
            hint="MP4 or MOV · up to 5 GB · H.264 recommended"
            icon="Video"
          />
        </FormField>

        <FormField label="Supplemental resources">
          <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
            {resources.map((r, i) => (
              <div key={i} style={{ display: "flex", alignItems: "center", gap: 10, padding: "8px 12px", background: "var(--bg-2)", border: "1px solid var(--line)", borderRadius: 7 }}>
                <window.I.File size={14} stroke="var(--ink-3)" />
                <div style={{ flex: 1, fontSize: 12.5 }}>{r}</div>
                <button onClick={() => setResources(resources.filter((_, x) => x !== i))}><window.I.X size={13} stroke="var(--ink-3)" /></button>
              </div>
            ))}
            <FileDrop
              onChange={(f) => f && setResources([...resources, f])}
              accept=".pdf,.docx,.xlsx"
              hint="PDF, DOCX, XLSX · drop files or click to browse"
              icon="Upload"
              small
            />
          </div>
        </FormField>

        <div style={{ display: "flex", gap: 10, justifyContent: "flex-end", marginTop: 20, paddingTop: 20, borderTop: "1px solid var(--line)" }}>
          <window.UI.Btn variant="outline" onClick={onClose}>Cancel</window.UI.Btn>
          <window.UI.Btn variant="subtle">Save as draft</window.UI.Btn>
          <window.UI.Btn onClick={onClose}>Publish session</window.UI.Btn>
        </div>
      </div>
    </window.UI.Modal>
  );
}

function FormField({ label, children }) {
  return (
    <div style={{ marginBottom: 14 }}>
      <div style={{ fontSize: 12, fontWeight: 500, color: "var(--ink-2)", marginBottom: 6 }}>{label}</div>
      {children}
    </div>
  );
}

function FileDrop({ current, onChange, accept, hint, icon, small }) {
  const [drag, setDrag] = useState(false);
  const inputRef = useRef();
  const Icon = window.I[icon || "Upload"];
  return (
    <div
      onDragOver={e => { e.preventDefault(); setDrag(true); }}
      onDragLeave={() => setDrag(false)}
      onDrop={e => { e.preventDefault(); setDrag(false); const f = e.dataTransfer.files[0]; if (f) onChange(f.name); }}
      onClick={() => inputRef.current?.click()}
      style={{
        border: `1.5px dashed ${drag ? "var(--accent)" : "var(--line-2)"}`,
        background: drag ? "var(--accent-soft)" : "var(--bg-2)",
        borderRadius: 8, padding: small ? "14px" : "22px 16px",
        textAlign: "center", cursor: "pointer",
        display: "flex", flexDirection: "column", alignItems: "center", gap: 8,
      }}
    >
      <input ref={inputRef} type="file" accept={accept} style={{ display: "none" }} onChange={e => { const f = e.target.files?.[0]; if (f) onChange(f.name); }} />
      {current ? (
        <>
          <window.I.CheckCircle size={22} stroke="var(--success)" />
          <div style={{ fontSize: 13, fontWeight: 500 }}>{typeof current === "string" ? current : current.name || "File selected"}</div>
          <div style={{ fontSize: 11.5, color: "var(--ink-3)" }}>Click to replace</div>
        </>
      ) : (
        <>
          <Icon size={small ? 16 : 22} stroke="var(--ink-3)" />
          <div style={{ fontSize: small ? 12.5 : 13.5, fontWeight: 500, letterSpacing: -0.005 }}>
            Drop {icon === "Video" ? "video" : "file"} here or click to upload
          </div>
          <div style={{ fontSize: 11.5, color: "var(--ink-3)" }}>{hint}</div>
        </>
      )}
    </div>
  );
}

const RTYPE_SHORT = {
  doc: "Doc", video: "Video", video_doc: "Video + Doc",
  video_doc_sheet: "Video + Doc + Sheet", spreadsheet: "Spreadsheet",
};

function AdminResources() {
  const { RESOURCES, TAGS, ADDITIONAL_RESOURCES } = window.DATA;
  const [showForm, setShowForm] = useState(false);
  const [tab, setTab] = useState("roadmap"); // "roadmap" | "additional" | "published"
  const [editing, setEditing] = useState(null); // roadmap task being edited
  const overrides = window.useRoadmapOverrides ? window.useRoadmapOverrides() : {};

  // Roadmap deliverables that need an actual file uploaded (skip reminders)
  const roadmapDeliverables = (window.ROADMAP_DATA || []).flatMap(m =>
    m.tasks
      .filter(t => (window.ROADMAP_RES_TYPE?.[t.rtype]?.upload))
      .map(t => {
        const o = overrides[t.id] || {};
        return {
          ...t,
          month: m.label,
          title: o.title != null && o.title !== "" ? o.title : t.title,
          desc: o.desc != null ? o.desc : t.desc,
          uploaded: !!o.uploaded,
        };
      })
  );
  const pendingCount = roadmapDeliverables.length + (ADDITIONAL_RESOURCES?.length || 0);

  const TABS = [
    { id: "roadmap",    label: "Roadmap deliverables", count: roadmapDeliverables.length },
    { id: "additional", label: "Additional resources", count: ADDITIONAL_RESOURCES?.length || 0 },
    { id: "published",  label: "Published library",     count: RESOURCES.length },
  ];

  return (
    <>
      <window.TopBar
        title="Resource Library"
        subtitle={`${pendingCount} awaiting upload · ${RESOURCES.length} published · counselors have view-only access`}
        right={
          <button onClick={() => setShowForm(true)} style={{ padding: "8px 14px", borderRadius: 8, background: "var(--ink)", color: "white", fontSize: 13, fontWeight: 500, display: "inline-flex", alignItems: "center", gap: 7 }}>
            <window.I.Plus size={13} sw={2.5} /> Upload resource
          </button>
        }
      />
      <div style={{ padding: 32 }}>
        {/* Section tabs */}
        <div style={{ display: "flex", gap: 6, marginBottom: 18, background: "var(--bg-2)", padding: 4, borderRadius: 9, border: "1px solid var(--line)", width: "fit-content" }}>
          {TABS.map(t => {
            const active = tab === t.id;
            return (
              <button
                key={t.id}
                onClick={() => setTab(t.id)}
                style={{
                  padding: "7px 14px", borderRadius: 6, cursor: "pointer",
                  background: active ? "var(--card)" : "transparent",
                  color: active ? "var(--ink)" : "var(--ink-3)",
                  fontSize: 12.5, fontWeight: 500, letterSpacing: -0.005,
                  boxShadow: active ? "0 1px 2px rgba(0,0,0,0.06)" : "none",
                  display: "inline-flex", alignItems: "center", gap: 8,
                }}
              >
                {t.label}
                <span style={{ fontSize: 10.5, fontWeight: 600, padding: "1px 6px", borderRadius: 999, background: active ? "var(--bg-2)" : "var(--line)", color: "var(--ink-3)" }}>{t.count}</span>
              </button>
            );
          })}
        </div>

        {tab === "roadmap" && (
          <SkeletonTable
            intro="Every non-reminder item from the Counselor's Roadmap has a slot here. Edit the title and add a counselor-facing description, then upload the video, doc, or spreadsheet — it publishes into its bucket and the description appears as a dropdown on the counselor's roadmap."
            onEdit={(key) => setEditing(roadmapDeliverables.find(d => d.id === key) || null)}
            rows={roadmapDeliverables.map(d => ({
              key: d.id,
              title: d.title,
              category: d.pillar,
              meta: `${d.month} · ${GRADE_FULL[d.grade]}`,
              type: RTYPE_SHORT[d.rtype] || "File",
              desc: d.desc,
              uploaded: d.uploaded,
            }))}
          />
        )}

        {tab === "additional" && (
          <SkeletonTable
            intro="Standalone counselor resources from the advising workbook. Not tied to a month — upload each when ready."
            rows={(ADDITIONAL_RESOURCES || []).map(d => ({
              key: d.id,
              title: d.title,
              category: d.category,
              meta: "Additional resource",
              type: "File",
            }))}
          />
        )}

        {tab === "published" && (
        <div style={{ border: "1px solid var(--line)", borderRadius: "var(--radius)", background: "var(--card)", overflow: "hidden" }}>
          <div style={{ display: "grid", gridTemplateColumns: "50px 1fr 150px 90px 100px 100px 120px", gap: 16, padding: "12px 20px", background: "var(--bg-2)", borderBottom: "1px solid var(--line)", fontSize: 11, color: "var(--ink-3)", fontWeight: 500, letterSpacing: 0.04, textTransform: "uppercase" }}>
            <div>Type</div>
            <div>Title</div>
            <div>Category</div>
            <div>Size</div>
            <div>Downloads</div>
            <div>Updated</div>
            <div>Actions</div>
          </div>
          {RESOURCES.map((r, i) => (
            <div key={r.id} style={{ display: "grid", gridTemplateColumns: "50px 1fr 150px 90px 100px 100px 120px", gap: 16, padding: "12px 20px", alignItems: "center", borderTop: i > 0 ? "1px solid var(--line)" : "none" }}>
              <div style={{
                width: 32, height: 38, borderRadius: 5,
                background: r.type === "PDF" ? "#F5F0EE" : r.type === "DOCX" ? "var(--accent-soft)" : "var(--success-soft)",
                color: r.type === "PDF" ? "#5A2A00" : r.type === "DOCX" ? "var(--accent-ink)" : "#14504F",
                display: "flex", alignItems: "center", justifyContent: "center",
                fontSize: 9, fontWeight: 700, letterSpacing: 0.04,
              }}>{r.type}</div>
              <div style={{ fontSize: 13, fontWeight: 500 }}>
                {r.title}
                {r.pinned && <span style={{ fontSize: 10, marginLeft: 8, color: "var(--accent-ink)", background: "var(--accent-soft)", padding: "1px 6px", borderRadius: 999 }}>Pinned</span>}
              </div>
              <window.UI.Tag cat={r.category} />
              <div style={{ fontSize: 12, color: "var(--ink-3)" }}>{r.size}</div>
              <div style={{ fontSize: 12.5 }}>{r.downloads}</div>
              <div style={{ fontSize: 12, color: "var(--ink-3)" }}>{new Date(r.updated).toLocaleDateString("en-US", { month: "short", day: "numeric" })}</div>
              <div style={{ display: "flex", gap: 6 }}>
                <button style={{ padding: 6, border: "1px solid var(--line)", borderRadius: 6, background: "var(--card)" }}><window.I.Edit size={12} stroke="var(--ink-2)" /></button>
                <button style={{ padding: 6, border: "1px solid var(--line)", borderRadius: 6, background: "var(--card)" }}><window.I.Download size={12} stroke="var(--ink-2)" /></button>
                <button style={{ padding: 6, border: "1px solid var(--line)", borderRadius: 6, background: "var(--card)" }}><window.I.Trash size={12} stroke="var(--warn)" /></button>
              </div>
            </div>
          ))}
        </div>
        )}
      </div>
      {showForm && (
        <window.UI.Modal open onClose={() => setShowForm(false)} width={600}>
          <div style={{ padding: 28 }}>
            <h2 className="serif" style={{ fontSize: 24, margin: 0, letterSpacing: -0.015 }}>Upload resource</h2>
            <div style={{ marginTop: 20 }}>
              <FormField label="File">
                <FileDrop onChange={() => {}} accept=".pdf,.docx,.xlsx" hint="PDF, DOCX, XLSX" icon="Upload" />
              </FormField>
              <FormField label="Title">
                <input style={{ width: "100%", padding: "10px 12px", border: "1px solid var(--line-2)", borderRadius: 7, fontSize: 13 }} placeholder="Resource title" />
              </FormField>
              <FormField label="Category">
                <select style={{ width: "100%", padding: "10px 12px", border: "1px solid var(--line-2)", borderRadius: 7, fontSize: 13, background: "var(--card)" }}>
                  {Object.entries(TAGS).map(([k, v]) => <option key={k}>{v.label}</option>)}
                </select>
              </FormField>
            </div>
            <div style={{ display: "flex", gap: 10, justifyContent: "flex-end", marginTop: 20, paddingTop: 20, borderTop: "1px solid var(--line)" }}>
              <window.UI.Btn variant="outline" onClick={() => setShowForm(false)}>Cancel</window.UI.Btn>
              <window.UI.Btn onClick={() => setShowForm(false)}>Publish</window.UI.Btn>
            </div>
          </div>
        </window.UI.Modal>
      )}
      {editing && (
        <RoadmapTaskModal task={editing} onClose={() => setEditing(null)} />
      )}
    </>
  );
}

const GRADE_FULL = { "9": "9th grade", "10": "10th grade", "11": "11th grade", "12": "12th grade" };

function SkeletonTable({ intro, rows, onEdit }) {
  const { TAGS } = window.DATA;
  const editable = typeof onEdit === "function";
  const actionCol = editable ? "176px" : "110px";
  const grid = `minmax(200px,1fr) 140px 118px 150px ${actionCol}`;
  return (
    <div>
      {intro && (
        <div style={{ fontSize: 12.5, color: "var(--ink-3)", marginBottom: 14, maxWidth: 720, lineHeight: 1.5 }}>{intro}</div>
      )}
      <div style={{ border: "1px solid var(--line)", borderRadius: "var(--radius)", background: "var(--card)", overflow: "hidden" }}>
        <div style={{ overflowX: "auto" }}>
        <div style={{ display: "grid", gridTemplateColumns: grid, gap: 16, padding: "12px 20px", background: "var(--bg-2)", borderBottom: "1px solid var(--line)", fontSize: 11, color: "var(--ink-3)", fontWeight: 500, letterSpacing: 0.04, textTransform: "uppercase", minWidth: 720 }}>
          <div>Title</div>
          <div>Bucket</div>
          <div>Needs</div>
          <div>Status</div>
          <div>Actions</div>
        </div>
        {rows.map((r, i) => {
          const uploaded = !!r.uploaded;
          const hasDesc = !!(r.desc && r.desc.trim());
          return (
            <div key={r.key} style={{ display: "grid", gridTemplateColumns: grid, gap: 16, padding: "14px 20px", alignItems: "center", borderTop: i > 0 ? "1px solid var(--line)" : "none", minWidth: 720 }}>
              <div style={{ minWidth: 0 }}>
                <div style={{ fontSize: 13, fontWeight: 500, lineHeight: 1.4 }}>{r.title}</div>
                <div style={{ fontSize: 11.5, color: "var(--ink-3)", marginTop: 3 }}>{r.meta}</div>
                {hasDesc && (
                  <div style={{ fontSize: 11.5, color: "var(--ink-3)", marginTop: 5, lineHeight: 1.45, display: "-webkit-box", WebkitLineClamp: 2, WebkitBoxOrient: "vertical", overflow: "hidden" }}>
                    {r.desc}
                  </div>
                )}
              </div>
              <div><window.UI.Tag cat={r.category} /></div>
              <div>
                <span style={{ display: "inline-flex", alignItems: "center", gap: 6, fontSize: 12, color: "var(--ink-2)", fontWeight: 500, padding: "4px 9px", border: "1px dashed var(--line-2)", borderRadius: 7, background: "var(--bg-2)" }}>
                  <window.I.File size={12} stroke="var(--ink-3)" /> {r.type}
                </span>
              </div>
              <div style={{ display: "flex", flexDirection: "column", gap: 4, alignItems: "flex-start" }}>
                {uploaded ? (
                  <span style={{ fontSize: 10.5, padding: "3px 9px", borderRadius: 999, background: "var(--success-soft)", color: "#14504F", fontWeight: 500, display: "inline-flex", alignItems: "center", gap: 5 }}>
                    <window.I.CheckCircle size={11} stroke="#14504F" /> Uploaded
                  </span>
                ) : (
                  <span style={{ fontSize: 10.5, padding: "3px 9px", borderRadius: 999, background: "var(--warn-soft)", color: "#8C4000", fontWeight: 500, display: "inline-flex", alignItems: "center", gap: 5 }}>
                    <span style={{ width: 5, height: 5, borderRadius: 999, background: "var(--warn)" }} /> Awaiting upload
                  </span>
                )}
                {editable && (
                  <span style={{ fontSize: 10.5, color: hasDesc ? "var(--ink-3)" : "var(--ink-4)", display: "inline-flex", alignItems: "center", gap: 4 }}>
                    <window.I.Info size={11} stroke={hasDesc ? "var(--ink-3)" : "var(--ink-4)"} />
                    {hasDesc ? "Description added" : "No description"}
                  </span>
                )}
              </div>
              <div style={{ display: "flex", gap: 6 }}>
                {editable && (
                  <button onClick={() => onEdit(r.key)} style={{ padding: "6px 11px", borderRadius: 7, background: "var(--card)", border: "1px solid var(--line-2)", color: "var(--ink-2)", fontSize: 12, fontWeight: 500, display: "inline-flex", alignItems: "center", gap: 6, cursor: "pointer" }}>
                    <window.I.Edit size={12} stroke="var(--ink-2)" /> Edit
                  </button>
                )}
                <button onClick={() => editable && onEdit(r.key)} style={{ padding: "6px 12px", borderRadius: 7, background: "var(--ink)", color: "white", fontSize: 12, fontWeight: 500, display: "inline-flex", alignItems: "center", gap: 6, cursor: "pointer", border: "none" }}>
                  <window.I.Upload size={12} stroke="white" /> {uploaded ? "Replace" : "Upload"}
                </button>
              </div>
            </div>
          );
        })}
        </div>
      </div>
    </div>
  );
}

// Admin editor: title + counselor-facing description + asset upload for a
// single roadmap deliverable. Saves to the shared override store so the
// counselor's roadmap updates live.
function RoadmapTaskModal({ task, onClose }) {
  const [title, setTitle] = useState(task.title || "");
  const [desc, setDesc] = useState(task.desc || "");
  const [file, setFile] = useState(task.uploaded ? "Current file on record" : null);

  const assetKinds = ({
    doc: ["Doc"], video: ["Video"], video_doc: ["Video", "Doc"],
    video_doc_sheet: ["Video", "Doc", "Sheet"], spreadsheet: ["Spreadsheet"],
  })[task.rtype] || ["File"];

  const fld = {
    width: "100%", padding: "10px 12px", border: "1px solid var(--line-2)",
    borderRadius: 7, fontSize: 13, background: "var(--card)",
  };

  const save = () => {
    window.setRoadmapOverride(task.id, {
      title: title.trim(),
      desc: desc,
      uploaded: !!file,
    });
    onClose();
  };

  return (
    <window.UI.Modal open onClose={onClose} width={640}>
      <div style={{ padding: 28 }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
          <div>
            <div style={{ fontSize: 11, color: "var(--ink-3)", letterSpacing: 0.06, textTransform: "uppercase", fontWeight: 500 }}>
              Admin · Roadmap deliverable · {task.month} · {GRADE_FULL[task.grade]}
            </div>
            <h2 className="serif" style={{ fontSize: 24, margin: "6px 0 0", letterSpacing: -0.015 }}>Edit roadmap task</h2>
          </div>
          <button onClick={onClose} style={{ padding: 6 }}><window.I.X size={18} stroke="var(--ink-3)" /></button>
        </div>

        <div style={{ marginTop: 22 }}>
          <FormField label="Task title">
            <input style={fld} value={title} onChange={e => setTitle(e.target.value)} placeholder="Task title shown on the roadmap" />
          </FormField>

          <FormField label="Description (shown to counselors as a dropdown note)">
            <textarea
              style={{ ...fld, minHeight: 96, resize: "vertical", fontFamily: "inherit", lineHeight: 1.5 }}
              value={desc}
              onChange={e => setDesc(e.target.value)}
              placeholder="Add context for counselors — when to send it, who it's for, how to use the resource…"
            />
            <div style={{ fontSize: 11, color: "var(--ink-4)", marginTop: 6 }}>
              Leave blank to hide the dropdown arrow for this task on the counselor roadmap.
            </div>
          </FormField>

          <FormField label={`Resource file${assetKinds.length > 1 ? "s" : ""} · ${assetKinds.join(" + ")}`}>
            <FileDrop
              current={file}
              onChange={setFile}
              accept="video/*,.pdf,.docx,.xlsx"
              hint={assetKinds.includes("Video") ? "MP4/MOV video + any supporting docs" : "PDF, DOCX, or XLSX"}
              icon={assetKinds.includes("Video") ? "Video" : "Upload"}
            />
          </FormField>
        </div>

        <div style={{ display: "flex", gap: 10, justifyContent: "flex-end", marginTop: 8, paddingTop: 20, borderTop: "1px solid var(--line)" }}>
          <window.UI.Btn variant="outline" onClick={onClose}>Cancel</window.UI.Btn>
          <window.UI.Btn onClick={save}>Save changes</window.UI.Btn>
        </div>
      </div>
    </window.UI.Modal>
  );
}

function AdminReports() {
  return (
    <>
      <window.TopBar title="Counselor Reports" subtitle="Custom engagement reports exportable as CSV or PDF" />
      <div style={{ padding: 32 }}>
        <div style={{ padding: 22, background: "var(--card)", border: "1px solid var(--line)", borderRadius: "var(--radius)", marginBottom: 20 }}>
          <div style={{ fontSize: 14, fontWeight: 500, marginBottom: 14 }}>Build a custom report</div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 12 }}>
            {[
              { l: "Scope", v: "All counselors" },
              { l: "Timeframe", v: "This school year" },
              { l: "Metrics", v: "Minutes, downloads, shares, pain points" },
              { l: "Format", v: "PDF + CSV" },
            ].map(f => (
              <div key={f.l} style={{ padding: 12, border: "1px solid var(--line)", borderRadius: 8, background: "var(--bg-2)" }}>
                <div style={{ fontSize: 11, color: "var(--ink-3)", letterSpacing: 0.04, textTransform: "uppercase", marginBottom: 5 }}>{f.l}</div>
                <div style={{ fontSize: 13, fontWeight: 500 }}>{f.v}</div>
              </div>
            ))}
          </div>
          <div style={{ display: "flex", gap: 10, marginTop: 16 }}>
            <window.UI.Btn icon={<window.I.Sparkles size={13} />}>Generate report</window.UI.Btn>
            <window.UI.Btn variant="outline">Schedule monthly</window.UI.Btn>
          </div>
        </div>

        <div style={{ fontSize: 11, letterSpacing: 0.06, textTransform: "uppercase", color: "var(--ink-3)", fontWeight: 500, marginBottom: 10 }}>Saved reports</div>
        <div style={{ border: "1px solid var(--line)", borderRadius: "var(--radius)", background: "var(--card)", overflow: "hidden" }}>
          {[
            { t: "March 2026 District Engagement", date: "Apr 2, 2026", type: "Monthly" },
            { t: "Mental Health Pillar Deep-Dive Q1", date: "Apr 1, 2026", type: "Thematic" },
            { t: "Westbrook HS Counselor Summary", date: "Mar 28, 2026", type: "Per-school" },
            { t: "2025–26 School Year Interim", date: "Mar 15, 2026", type: "Annual" },
          ].map((r, i) => (
            <div key={i} style={{ display: "grid", gridTemplateColumns: "1fr 130px 130px 160px", gap: 16, padding: "14px 20px", alignItems: "center", borderTop: i > 0 ? "1px solid var(--line)" : "none" }}>
              <div>
                <div style={{ fontSize: 13.5, fontWeight: 500 }}>{r.t}</div>
                <div style={{ fontSize: 11.5, color: "var(--ink-3)", marginTop: 2 }}>PDF + CSV · 2.4 MB</div>
              </div>
              <div style={{ fontSize: 12, color: "var(--ink-3)" }}>{r.type}</div>
              <div style={{ fontSize: 12, color: "var(--ink-3)" }}>{r.date}</div>
              <div style={{ display: "flex", gap: 6, justifyContent: "flex-end" }}>
                <window.UI.Btn variant="outline" size="sm" icon={<window.I.Download size={12} />}>Download</window.UI.Btn>
                <window.UI.Btn variant="ghost" size="sm" icon={<window.I.Share size={12} />}>Share</window.UI.Btn>
              </div>
            </div>
          ))}
        </div>
      </div>
    </>
  );
}

function AdminUsers() {
  return <window.AccountsView />;
}

window.AdminView = AdminView;