// Student & parent shop/redemption, student profile and course-tracking
// panels. Split out of features-more.jsx.

// ── Parent: Shop ──────────────────────────────────────────────────────────────
const ParentShop = ({ dark = false, session }) =>
  <ShopGrid dark={dark} studentId={session?.studentId}/>;

// ── Shop redemption grid (shared by student & parent) ─────────────────────────
// Items are redeemed with coins via POST /shop/orders, which deducts the
// student's balance server-side. `studentId` is the coin-holder (the child).
const ShopGrid = ({ theme = "", dark = false, studentId, go, backTo }) => {
  const { data: SHOP_ITEMS, loading } = useApi("/shop");
  const [tab, setTab] = React.useState("All");
  const [coins, setCoins] = React.useState(null);
  const [busy, setBusy] = React.useState(null);      // item id being redeemed
  const [done, setDone] = React.useState({});        // item id -> true after redeem
  const [toast, setToast] = React.useState(null);    // { ok, msg }

  const loadCoins = React.useCallback(() => {
    if (!studentId) return;
    apiFetch(`/student/dashboard/${studentId}`).then(r => r.ok ? r.json() : null)
      .then(d => { if (d && d.student) setCoins(d.student.coins ?? 0); }).catch(()=>{});
  }, [studentId]);
  React.useEffect(loadCoins, [loadCoins]);

  const filtered = (tab==="All" ? SHOP_ITEMS : SHOP_ITEMS.filter(i=>i.category===tab)) || [];

  const redeem = async (item) => {
    if (!studentId) { setToast({ ok:false, msg:"No student profile linked to this account." }); return; }
    setBusy(item.id); setToast(null);
    const res = await apiFetch("/shop/orders", { method:"POST", body: JSON.stringify({ item_id: item.id, qty: 1 }) });
    const data = await res.json().catch(()=>({}));
    setBusy(null);
    if (!res.ok) { setToast({ ok:false, msg: data.error || "Could not redeem this item." }); return; }
    setDone(d => ({ ...d, [item.id]: true }));
    setToast({ ok:true, msg: `Redeemed ${item.name}! 🎉` });
    setCoins(c => (c != null ? Math.max(0, c - Math.round(Number(item.price))) : c));
    loadCoins();
    setTimeout(() => setToast(null), 2600);
  };

  return (
    <Themed theme={theme} className={dark?"theme-dark":""} style={{ width:"100%", height:"100%", background:"var(--paper)", display:"flex", flexDirection:"column" }}>
      <div style={{ display:"flex", alignItems:"center", gap:12, padding:"14px 26px", background:"var(--paper-card)", borderBottom:"var(--border-thin)" }}>
        {backTo && <button className="btn btn-ghost" onClick={() => go && go(backTo)} style={{ padding:"6px 10px", fontSize:12 }}>{I.arrowL({ size:14 })} Back</button>}
        <div className="display" style={{ fontSize:20 }}>
          <span style={{ color:"var(--coral)" }}>Epiq</span>Minds
          <span style={{ color:"var(--ink-mute)", fontSize:11, marginLeft:6, fontWeight:500 }}>shop</span>
        </div>
        <div style={{ flex:1 }}/>
        <Tabs items={["All","Kit","Merch"]} active={tab} onChange={setTab}/>
        <div className="chip" style={{ fontSize:13, fontWeight:800, gap:6 }}>{I.coin({ size:15 })} {coins != null ? coins : "—"} coins</div>
      </div>
      {toast && (
        <div style={{ padding:"10px 26px", background: toast.ok ? "var(--moss)" : "var(--coral)", color:"white", fontSize:13, fontWeight:700 }}>{toast.msg}</div>
      )}
      <div style={{ padding:26, overflow:"auto", flex:1 }}>
        {loading ? <Spinner/> : filtered.length === 0 ? (
          <div style={{ textAlign:"center", padding:60, color:"var(--ink-mute)" }}>
            <div style={{ fontSize:40, marginBottom:12 }}>🛍️</div>
            <div style={{ fontWeight:700, fontSize:16 }}>Shop is empty</div>
            <div style={{ fontSize:13, marginTop:6 }}>Check back soon for cool merch and kits!</div>
          </div>
        ) : (
          <div style={{ display:"grid", gridTemplateColumns:"repeat(auto-fill,minmax(220px,1fr))", gap:18 }}>
            {filtered.map(item=>{
              const price = Math.round(Number(item.price) || 0);
              const affordable = coins == null || coins >= price;
              const redeemed = done[item.id];
              const disabled = !item.inStock || busy===item.id || redeemed || !affordable;
              return (
              <div key={item.id} className="card" style={{ padding:0, overflow:"hidden", opacity: item.inStock ? 1 : 0.65 }}>
                <div style={{ height:100, background:"var(--paper-deep)", display:"flex", alignItems:"center", justifyContent:"center", fontSize:44, position:"relative" }}>
                  {item.img}
                  {item.badge && (
                    <span style={{ position:"absolute", top:10, right:10, padding:"2px 8px", borderRadius:999, background: item.badge==="new"?"var(--moss)":"var(--gold)", color:"white", fontSize:10, fontWeight:700 }}>{item.badge}</span>
                  )}
                  {!item.inStock && (
                    <span style={{ position:"absolute", bottom:8, left:"50%", transform:"translateX(-50%)", padding:"2px 10px", borderRadius:999, background:"rgba(0,0,0,.5)", color:"white", fontSize:10, fontWeight:700 }}>Out of stock</span>
                  )}
                </div>
                <div style={{ padding:14 }}>
                  <div style={{ fontWeight:700, fontSize:14 }}>{item.name}</div>
                  <div style={{ fontSize:12, color:"var(--ink-mute)", marginTop:4, lineHeight:1.4 }}>{item.desc}</div>
                  <div style={{ display:"flex", alignItems:"center", justifyContent:"space-between", marginTop:12 }}>
                    <span className="display" style={{ fontSize:18, display:"flex", alignItems:"center", gap:4 }}>{I.coin({ size:15 })} {price}</span>
                    <button onClick={() => !disabled && redeem(item)} disabled={disabled} className="btn btn-primary"
                      style={{ padding:"6px 12px", fontSize:12, background: redeemed ? "var(--moss)" : "var(--coral)", opacity: disabled && !redeemed ? 0.5 : 1, cursor: disabled ? "default" : "pointer" }}>
                      {redeemed ? "✓ Redeemed" : busy===item.id ? "…" : !item.inStock ? "Sold out" : !affordable ? "Not enough" : "Redeem"}
                    </button>
                  </div>
                </div>
              </div>
            );})}
          </div>
        )}
      </div>
    </Themed>
  );
};

// ── Student: Shop ─────────────────────────────────────────────────────────────
const StudentShop = ({ theme = "", go, session }) =>
  <ShopGrid theme={theme} studentId={session?.studentId} go={go} backTo="/app/student"/>;

// ── Student: Profile ──────────────────────────────────────────────────────────
const StudentProfile = ({ theme = "", go, session }) => {
  const sid = session?.studentId;
  const { data: dash } = useApi(sid ? `/student/dashboard/${sid}` : "/student/dashboard/0", {});
  const student = dash.student || {};
  const xp = student.xp || 0;
  const level = Math.floor(xp / 500) + 1;
  const xpInLevel = xp % 500;
  const { data: certs } = useApi(sid ? `/certificates/${sid}` : "/certificates/0");
  return (
    <Themed theme={theme} style={{ width:"100%", height:"100%", background:"var(--paper)", overflow:"auto" }}>
      <div style={{ display:"flex", alignItems:"center", gap:12, padding:"14px 26px", background:"var(--paper-card)", borderBottom:"var(--border-thin)" }}>
        <button className="btn btn-ghost" onClick={() => go && go("/app/student")} style={{ padding:"6px 10px", fontSize:12 }}>{I.arrowL({ size:14 })} Back</button>
        <div className="display" style={{ fontSize:20 }}>My Profile</div>
      </div>
      <div style={{ padding:32, maxWidth:560, margin:"0 auto", display:"flex", flexDirection:"column", gap:20 }}>
        <div className="card" style={{ padding:28, display:"flex", alignItems:"center", gap:22 }}>
          <Avatar name={(student.name || session?.name || "?")[0]} color="var(--plum)" size={72}/>
          <div>
            <div style={{ fontWeight:800, fontSize:22 }}>{student.name || session?.name || "—"}</div>
            <div style={{ color:"var(--ink-mute)", fontSize:13, marginTop:4 }}>{session?.email || "—"}</div>
            {student.batch && <div style={{ marginTop:8 }}><span className="chip" style={{ background:"var(--coral)", color:"white", fontSize:11 }}>{student.batch}</span></div>}
          </div>
        </div>
        <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr 1fr", gap:14 }}>
          {[
            ["Level", level, I.bolt2],
            ["Total XP", xp, I.coin],
            ["Certificates", (certs || []).length, I.trophy],
          ].map(([l,v,Icon]) => (
            <div key={l} className="card-flat" style={{ padding:16, textAlign:"center" }}>
              <div style={{ color:"var(--coral)", marginBottom:6 }}><Icon size={22}/></div>
              <div style={{ fontWeight:800, fontSize:22 }}>{v}</div>
              <div style={{ fontSize:11, color:"var(--ink-mute)", marginTop:2 }}>{l}</div>
            </div>
          ))}
        </div>
        <div className="card" style={{ padding:20 }}>
          <div style={{ fontWeight:700, fontSize:13, marginBottom:14, color:"var(--ink-mute)" }}>ACCOUNT</div>
          <div style={{ display:"flex", flexDirection:"column", gap:10 }}>
            {[
              ["Name", student.name || session?.name || "—"],
              ["Email", session?.email || "—"],
              ["Batch", student.batch || "—"],
              ["Teacher", student.teacher || "—"],
              ["Course", student.course_name ? `${student.course_name} · ${student.course_level}` : "—"],
            ].map(([l,v]) => (
              <div key={l} style={{ display:"flex", justifyContent:"space-between", padding:"8px 0", borderBottom:"var(--border-thin)" }}>
                <span style={{ fontSize:13, color:"var(--ink-mute)" }}>{l}</span>
                <span style={{ fontSize:13, fontWeight:600 }}>{v}</span>
              </div>
            ))}
          </div>
        </div>
        <div className="card" style={{ padding:20, display:"flex", alignItems:"center", justifyContent:"space-between" }}>
          <div>
            <div style={{ fontWeight:700, fontSize:14 }}>XP Progress — Level {level}</div>
            <div style={{ fontSize:12, color:"var(--ink-mute)", marginTop:2 }}>{xpInLevel} / 500 XP to next level</div>
          </div>
          <div style={{ width:120, height:8, background:"var(--paper-deep)", borderRadius:999, overflow:"hidden" }}>
            <div style={{ width:`${(xpInLevel/500)*100}%`, height:"100%", background:"var(--coral)", borderRadius:999 }}/>
          </div>
        </div>
      </div>
    </Themed>
  );
};

// ── Student: Course Tracking ──────────────────────────────────────────────────
const StudentCourseTracking = ({ theme = "", go, session }) => {
  const sid = session?.studentId;
  const { data: dash } = useApi(sid ? `/student/dashboard/${sid}` : "/student/dashboard/0", {});
  const student = dash.student || {};
  const courseId = student.course_id;
  const { data: COURSE_CONTENT } = useApi(courseId ? `/content/${courseId}` : "/content/0");
  const [activeUnit, setActiveUnit] = React.useState(null);
  const [videoLesson, setVideoLesson] = React.useState(null);
  const [fileLesson, setFileLesson] = React.useState(null);
  const [textLesson, setTextLesson] = React.useState(null);   // written-in-app lesson
  // Locally-remembered completions for instant feedback before a refetch.
  const [justDone, setJustDone] = React.useState(() => new Set());
  React.useEffect(() => { if (COURSE_CONTENT.length && !activeUnit) setActiveUnit(COURSE_CONTENT[0].id); }, [COURSE_CONTENT.length]);

  // A lesson is "done" when the student has actually engaged with it (server
  // `completed` flag), not when an admin published it.
  const isDone = (l) => !!l.completed || justDone.has(l.id);
  const markComplete = async (lessonId) => {
    if (justDone.has(lessonId)) return;
    setJustDone(prev => new Set(prev).add(lessonId));
    apiFetch(`/lessons/${lessonId}/complete`, { method:"POST" }).catch(() => {});
  };

  const totalLessons    = COURSE_CONTENT.reduce((a,u) => a + (u.lessons||[]).length, 0);
  const completedLessons= COURSE_CONTENT.reduce((a,u) => a + (u.lessons||[]).filter(isDone).length, 0);
  const totalUnits      = COURSE_CONTENT.length;
  const completedUnits  = COURSE_CONTENT.filter(u => (u.lessons||[]).length > 0 && (u.lessons||[]).every(isDone)).length;
  const overallPct      = totalLessons ? Math.round((completedLessons/totalLessons)*100) : 0;
  const quizLessons     = COURSE_CONTENT.reduce((a,u) => a + (u.lessons||[]).filter(l=>l.type==="quiz").length, 0);

  return (
    <Themed theme={theme} style={{ width:"100%", height:"100%", display:"flex", flexDirection:"column", background:"var(--paper)" }}>
      {/* File preview modal — PDF / image / text inline, download otherwise */}
      {fileLesson && (
        <FileViewer courseId={fileLesson.course_id || courseId} fileId={fileLesson.file_id} title={fileLesson.title} fileType={fileLesson.file_type} onClose={() => setFileLesson(null)}/>
      )}
      {/* Text lesson reader — content written straight into the LMS */}
      {textLesson && (
        <div style={{ position:"fixed", inset:0, background:"rgba(0,0,0,.72)", display:"flex", alignItems:"center", justifyContent:"center", zIndex:9999, padding:24 }}
             onClick={e => e.target===e.currentTarget && setTextLesson(null)}>
          <div className="codeland" style={{ background:"var(--paper-card)", borderRadius:16, overflow:"hidden", width:"min(760px,94vw)", maxHeight:"90vh", display:"flex", flexDirection:"column", boxShadow:"0 32px 80px rgba(0,0,0,.5)" }}>
            <div style={{ display:"flex", alignItems:"center", gap:12, padding:"14px 22px", borderBottom:"var(--border-thin)", background:"var(--paper-deep)" }}>
              <div className="display" style={{ fontSize:18, flex:1, minWidth:0, overflow:"hidden", textOverflow:"ellipsis", whiteSpace:"nowrap" }}>{textLesson.title}</div>
              <button onClick={() => setTextLesson(null)} style={{ background:"none", border:"none", color:"var(--ink-mute)", fontSize:24, cursor:"pointer", lineHeight:1 }}>×</button>
            </div>
            <div style={{ flex:1, minHeight:0, overflow:"auto", padding:"22px 26px" }}>
              <RichTextView html={textLesson.body}/>
            </div>
          </div>
        </div>
      )}
      {/* Video player modal */}
      {videoLesson && (
        <div style={{ position:"fixed", inset:0, background:"rgba(0,0,0,.78)", display:"flex", alignItems:"center", justifyContent:"center", zIndex:9999 }}
             onClick={e => e.target===e.currentTarget && setVideoLesson(null)}>
          <div style={{ background:"#111", borderRadius:16, overflow:"hidden", width:"min(860px,92vw)", boxShadow:"0 32px 80px rgba(0,0,0,.6)" }}>
            <div style={{ display:"flex", alignItems:"center", gap:12, padding:"12px 18px", background:"#1a1a1a" }}>
              <span style={{ fontWeight:700, fontSize:14, color:"white", flex:1 }}>{videoLesson.title}</span>
              <button onClick={() => setVideoLesson(null)} style={{ background:"none", border:"none", color:"#aaa", fontSize:22, cursor:"pointer", lineHeight:1 }}>×</button>
            </div>
            <SafeYouTube videoId={ytId(videoLesson.youtube_id)} title={videoLesson.title} autoplay style={{ borderRadius:0 }}/>
          </div>
        </div>
      )}

      {/* Header */}
      <div style={{ padding:"14px 22px", borderBottom:"var(--border-thin)", background:"var(--paper-card)", display:"flex", alignItems:"center", gap:12 }}>
        <div className="display" style={{ fontSize:20 }}>My Courses</div>
        <div style={{ flex:1 }}/>
        {student.course_name && <span className="chip" style={{ background:"var(--coral)", color:"white", fontWeight:700 }}>{student.course_name} · {student.course_level}</span>}
        {student.batch && <span style={{ fontSize:12, color:"var(--ink-mute)" }}>{student.batch} · {student.teacher}</span>}
      </div>

      <div style={{ flex:1, overflow:"auto", padding:22, display:"grid", gridTemplateColumns:"480px 1fr", gap:22, alignItems:"start" }}>

        {/* Left: progress card + unit list */}
        <div style={{ display:"flex", flexDirection:"column", gap:14 }}>

          {/* Overall progress card */}
          <div className="card-flat" style={{ padding:20 }}>
            <div className="mono" style={{ fontSize:10, color:"var(--ink-mute)", letterSpacing:".08em", marginBottom:6 }}>OVERALL PROGRESS</div>
            <div className="display" style={{ fontSize:22, marginBottom:10 }}>
              {student.course_name ? `${student.course_name} · ${student.course_level}` : "My Course"}
            </div>
            <div style={{ display:"flex", justifyContent:"space-between", fontSize:12, color:"var(--ink-soft)", marginBottom:6 }}>
              <span style={{ fontWeight:600 }}>{overallPct}% complete</span>
              <span>{completedUnits} / {totalUnits} units</span>
            </div>
            <div style={{ height:8, background:"var(--paper-deep)", borderRadius:4, marginBottom:14, overflow:"hidden" }}>
              <div style={{ width:`${overallPct}%`, height:"100%", background:"var(--coral)", borderRadius:4, transition:"width .4s" }}/>
            </div>
            <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap:8 }}>
              {[
                ["XP Earned",    student.xp ?? 0],
                ["Lessons done", `${completedLessons}/${totalLessons}`],
                ["Quizzes",      quizLessons],
                ["Streak",       student.streak ? `${student.streak} days` : "—"],
              ].map(([l,v]) => (
                <div key={l} style={{ padding:"10px 14px", background:"var(--paper-deep)", borderRadius:10, border:"var(--border-thin)" }}>
                  <div style={{ fontSize:11, color:"var(--ink-mute)" }}>{l}</div>
                  <div style={{ fontWeight:700, fontSize:20, marginTop:3 }}>{v}</div>
                </div>
              ))}
            </div>
          </div>

          {/* Unit cards */}
          {COURSE_CONTENT.length === 0 ? (
            <div style={{ textAlign:"center", padding:40, color:"var(--ink-mute)", fontSize:13 }}>No course content yet</div>
          ) : COURSE_CONTENT.map(u => {
            const total = (u.lessons||[]).length;
            const done  = (u.lessons||[]).filter(isDone).length;
            const pct   = total ? Math.round((done/total)*100) : 0;
            const unitXP= done * 20;
            const isActive = activeUnit === u.id;
            const barColor = pct===100 ? "var(--moss)" : "var(--coral)";
            return (
              <div key={u.id} onClick={() => setActiveUnit(u.id)} className="card" style={{ padding:"14px 16px", cursor:"pointer", border: isActive ? "2px solid var(--coral)" : "var(--border)" }}>
                <div style={{ display:"flex", justifyContent:"space-between", alignItems:"center", marginBottom:4 }}>
                  <span style={{ fontWeight:700, fontSize:14 }}>{u.unit}</span>
                  <span style={{ fontWeight:700, fontSize:13, color: pct===100?"var(--moss)":pct>0?"var(--coral)":"var(--ink-mute)" }}>{pct}%</span>
                </div>
                <div style={{ height:6, background:"var(--paper-deep)", borderRadius:3, marginBottom:8, overflow:"hidden" }}>
                  <div style={{ width:`${pct}%`, height:"100%", background:barColor, borderRadius:3 }}/>
                </div>
                <div style={{ display:"flex", justifyContent:"space-between", fontSize:11, color:"var(--ink-mute)" }}>
                  <span>{total} lesson{total!==1?"s":""}</span>
                  <span>+{unitXP} XP</span>
                </div>
              </div>
            );
          })}
        </div>

        {/* Right: unit detail */}
        <div>
          {COURSE_CONTENT.filter(u=>u.id===activeUnit).map(unit => (
            <div key={unit.id} className="card-flat" style={{ padding:20 }}>
              <div style={{ marginBottom:16 }}>
                <div className="mono" style={{ fontSize:10, color:"var(--ink-mute)", letterSpacing:".08em" }}>UNIT DETAIL</div>
                <div className="display" style={{ fontSize:22, marginTop:4 }}>{unit.unit}</div>
              </div>
              <div style={{ display:"flex", flexDirection:"column", gap:8 }}>
                {unit.lessons.length === 0 && (
                  <div style={{ fontSize:13, color:"var(--ink-mute)", padding:"16px 0" }}>No lessons in this unit yet.</div>
                )}
                {unit.lessons.map((l, li) => {
                  const isVideo    = l.type === "video";
                  const isFile     = l.type === "file";
                  const isText     = l.type === "text";
                  const done       = isDone(l);
                  const typeColors = { video:"var(--coral)", file:"var(--sky)", text:"var(--moss)", quiz:"var(--sky)", homework:"var(--gold)", project:"var(--plum)" };
                  const iconBg     = done ? "var(--moss)" : (typeColors[l.type] || "var(--paper-deep)");
                  return (
                    <div key={l.id||li} style={{ display:"flex", alignItems:"center", gap:12, padding:"12px 14px", borderRadius:12, border:"var(--border-thin)", background:"var(--paper-card)" }}>
                      <div style={{ width:36, height:36, borderRadius:10, background:iconBg, color:"white", display:"grid", placeItems:"center", flexShrink:0, fontSize:15, fontWeight:800 }}>
                        {done ? I.check({ size:16 }) : isVideo ? I.play({ size:16 }) : l.type==="quiz" ? I.puzzle({ size:16 }) : isText ? "¶" : I.book({ size:16 })}
                      </div>
                      <div style={{ flex:1, minWidth:0 }}>
                        <div style={{ fontWeight:700, fontSize:13 }}>{l.title}</div>
                        <div style={{ display:"flex", alignItems:"center", gap:6, marginTop:3 }}>
                          {isVideo && (
                            <span style={{ fontSize:10, fontWeight:700, padding:"1px 7px", borderRadius:4, background:"var(--coral)", color:"white", letterSpacing:".04em" }}>VIDEO</span>
                          )}
                          {isFile && (
                            <span style={{ fontSize:10, fontWeight:700, padding:"1px 7px", borderRadius:4, background:"var(--sky)", color:"white", letterSpacing:".04em" }}>{(l.file_type||"FILE").toUpperCase()}</span>
                          )}
                          {isText && (
                            <span style={{ fontSize:10, fontWeight:700, padding:"1px 7px", borderRadius:4, background:"var(--moss)", color:"white", letterSpacing:".04em" }}>READ</span>
                          )}
                          {l.type === "quiz" && (
                            <span style={{ fontSize:10, fontWeight:700, padding:"1px 7px", borderRadius:4, background:"var(--sky)", color:"white", letterSpacing:".04em" }}>QUIZ</span>
                          )}
                          {l.type === "homework" && (
                            <span style={{ fontSize:10, fontWeight:700, padding:"1px 7px", borderRadius:4, background:"var(--gold)", color:"white", letterSpacing:".04em" }}>HW</span>
                          )}
                          <span style={{ fontSize:11, color:"var(--ink-mute)" }}>{l.duration || (l.questions ? `${l.questions} questions` : "")}</span>
                        </div>
                      </div>
                      {isVideo && l.youtube ? (
                        <button
                          className="btn btn-primary"
                          onClick={() => { markComplete(l.id); setVideoLesson({ title:l.title, youtube_id:l.youtube }); }}
                          style={{ padding:"6px 14px", fontSize:12, display:"flex", alignItems:"center", gap:6, flexShrink:0 }}>
                          {I.play({ size:12 })} {done ? "Replay" : "Play"}
                        </button>
                      ) : isFile && l.file_id ? (
                        <button
                          className="btn btn-primary"
                          onClick={() => { markComplete(l.id); setFileLesson({ file_id:l.file_id, title:l.title, file_type:l.file_type, course_id: l.file_course_id || courseId }); }}
                          style={{ padding:"6px 14px", fontSize:12, display:"flex", alignItems:"center", gap:6, flexShrink:0 }}>
                          {I.book({ size:12 })} Open file
                        </button>
                      ) : isText && l.body ? (
                        <button
                          className="btn btn-primary"
                          onClick={() => { markComplete(l.id); setTextLesson({ title:l.title, body:l.body }); }}
                          style={{ padding:"6px 14px", fontSize:12, display:"flex", alignItems:"center", gap:6, flexShrink:0 }}>
                          {I.book({ size:12 })} {done ? "Read again" : "Read"}
                        </button>
                      ) : l.type === "quiz" ? (
                        <button className="btn btn-ghost" onClick={() => go&&go("/app/student/quiz")} style={{ padding:"6px 14px", fontSize:12, flexShrink:0 }}>Take quiz</button>
                      ) : l.type === "homework" ? (
                        <button className="btn btn-ghost" onClick={() => go&&go("/app/student/homework")} style={{ padding:"6px 14px", fontSize:12, flexShrink:0 }}>Submit</button>
                      ) : null}
                      <span style={{ color:"var(--moss)", fontWeight:700, fontSize:12, marginLeft:4, flexShrink:0 }}>+{(li+1)*20} XP</span>
                    </div>
                  );
                })}
              </div>
            </div>
          ))}
          {!activeUnit && COURSE_CONTENT.length > 0 && (
            <div style={{ textAlign:"center", padding:60, color:"var(--ink-mute)" }}>
              <div style={{ fontSize:32, marginBottom:8 }}>👈</div>
              <div style={{ fontSize:14 }}>Select a unit to see lessons</div>
            </div>
          )}
        </div>
      </div>
    </Themed>
  );
};

// ── Student: Overall Progress ─────────────────────────────────────────────────
// A learner-wide progress dashboard, distinct from "My Course" (which shows the
// course content + per-lesson completion). This one is the big picture: overall
// completion %, XP/level, attendance, achievements and per-unit progress.
const StudentProgress = ({ theme = "", go, session }) => {
  const sid = session?.studentId;
  const { data: dash } = useApi(sid ? `/student/dashboard/${sid}` : "/student/dashboard/0", {});
  const student  = dash.student || {};
  const courseId = student.course_id;
  const { data: COURSE_CONTENT } = useApi(courseId ? `/content/${courseId}` : "/content/0");
  const { data: certs }    = useApi(sid ? `/certificates/${sid}` : "/certificates/0");
  const { data: sessions } = useApi(sid ? `/student/schedule/${sid}` : null);

  const isDone = l => !!l.completed;
  const totalLessons     = COURSE_CONTENT.reduce((a,u)=>a+(u.lessons||[]).length,0);
  const completedLessons = COURSE_CONTENT.reduce((a,u)=>a+(u.lessons||[]).filter(isDone).length,0);
  const totalUnits       = COURSE_CONTENT.length;
  const completedUnits   = COURSE_CONTENT.filter(u=>(u.lessons||[]).length>0 && (u.lessons||[]).every(isDone)).length;
  const overallPct       = totalLessons ? Math.round((completedLessons/totalLessons)*100) : 0;
  const quizLessons      = COURSE_CONTENT.reduce((a,u)=>a+(u.lessons||[]).filter(l=>l.type==="quiz").length,0);
  const xp        = student.xp || 0;
  const level     = Math.floor(xp/500)+1;
  const xpInLevel = xp % 500;

  const doneSessions = (sessions||[]).filter(s=>s.status==="done");
  const att = {
    present: doneSessions.filter(s=>s.attendance==="present").length,
    late:    doneSessions.filter(s=>s.attendance==="late").length,
    missed:  doneSessions.filter(s=>s.attendance==="missed"||s.attendance==="absent").length,
    tech:    doneSessions.filter(s=>s.attendance==="tech_issue").length,
  };
  const attendanceRate = doneSessions.length ? Math.round(((att.present+att.late)/doneSessions.length)*100) : null;

  // Completion ring geometry.
  const R = 58, STROKE = 12, C = 2*Math.PI*R;

  return (
    <Themed theme={theme} style={{ width:"100%", height:"100%", display:"flex", flexDirection:"column", background:"var(--paper)" }}>
      {/* Header */}
      <div style={{ padding:"14px 22px", borderBottom:"var(--border-thin)", background:"var(--paper-card)", display:"flex", alignItems:"center", gap:12 }}>
        <div className="display" style={{ fontSize:20 }}>My Progress</div>
        <div style={{ flex:1 }}/>
        {student.course_name && <span className="chip" style={{ background:"var(--moss)", color:"white", fontWeight:700 }}>{student.course_name} · {student.course_level}</span>}
        <button className="btn btn-ghost" onClick={() => go && go("/app/student/courses")} style={{ padding:"6px 12px", fontSize:12 }}>Go to course →</button>
      </div>

      <div style={{ flex:1, overflow:"auto", padding:22, display:"flex", flexDirection:"column", gap:18 }}>

        {/* Top row: ring + key stats */}
        <div style={{ display:"grid", gridTemplateColumns:"320px 1fr", gap:18, alignItems:"stretch" }}>
          {/* Overall completion ring */}
          <div className="card" style={{ padding:24, display:"flex", flexDirection:"column", alignItems:"center", justifyContent:"center", gap:10 }}>
            <div className="mono" style={{ fontSize:10, color:"var(--ink-mute)", letterSpacing:".08em", alignSelf:"flex-start" }}>OVERALL COMPLETION</div>
            <div style={{ position:"relative", width:(R+STROKE)*2, height:(R+STROKE)*2 }}>
              <svg width={(R+STROKE)*2} height={(R+STROKE)*2}>
                <circle cx={R+STROKE} cy={R+STROKE} r={R} fill="none" stroke="var(--paper-deep)" strokeWidth={STROKE}/>
                <circle cx={R+STROKE} cy={R+STROKE} r={R} fill="none" stroke="var(--coral)" strokeWidth={STROKE}
                  strokeLinecap="round" strokeDasharray={C} strokeDashoffset={C*(1-overallPct/100)}
                  transform={`rotate(-90 ${R+STROKE} ${R+STROKE})`} style={{ transition:"stroke-dashoffset .6s" }}/>
              </svg>
              <div style={{ position:"absolute", inset:0, display:"flex", flexDirection:"column", alignItems:"center", justifyContent:"center" }}>
                <div className="display" style={{ fontSize:34, lineHeight:1 }}>{overallPct}%</div>
                <div style={{ fontSize:11, color:"var(--ink-mute)" }}>complete</div>
              </div>
            </div>
            <div style={{ fontSize:12, color:"var(--ink-soft)" }}>{completedLessons} of {totalLessons} lessons done</div>
          </div>

          {/* Key stats */}
          <div className="card-flat" style={{ padding:20 }}>
            <SectionHead eyebrow="AT A GLANCE" title="Your stats"/>
            <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr 1fr", gap:12 }}>
              {[
                ["Total XP", xp, "var(--gold)"],
                ["Level", level, "var(--plum)"],
                ["Lessons done", `${completedLessons}/${totalLessons}`, "var(--coral)"],
                ["Units complete", `${completedUnits}/${totalUnits}`, "var(--moss)"],
                ["Quizzes", quizLessons, "var(--sky)"],
                ["Certificates", (certs||[]).length, "var(--gold)"],
              ].map(([l,v,c]) => (
                <div key={l} style={{ padding:"12px 14px", background:"var(--paper-deep)", borderRadius:10, border:"var(--border-thin)" }}>
                  <div style={{ fontSize:11, color:"var(--ink-mute)" }}>{l}</div>
                  <div className="display" style={{ fontSize:24, marginTop:3, color:c }}>{v}</div>
                </div>
              ))}
            </div>
            <div style={{ marginTop:14 }}>
              <div style={{ display:"flex", justifyContent:"space-between", fontSize:12, color:"var(--ink-soft)", marginBottom:6 }}>
                <span style={{ fontWeight:600 }}>Level {level} progress</span>
                <span>{xpInLevel} / 500 XP</span>
              </div>
              <div style={{ height:8, background:"var(--paper-deep)", borderRadius:4, overflow:"hidden" }}>
                <div style={{ width:`${(xpInLevel/500)*100}%`, height:"100%", background:"var(--plum)", borderRadius:4, transition:"width .4s" }}/>
              </div>
            </div>
          </div>
        </div>

        {/* Attendance summary */}
        <div className="card-flat" style={{ padding:20 }}>
          <SectionHead eyebrow="ATTENDANCE" title={attendanceRate!=null ? `${attendanceRate}% attendance` : "Attendance"}/>
          {doneSessions.length === 0 ? (
            <div style={{ fontSize:13, color:"var(--ink-mute)", padding:"6px 0" }}>No completed sessions yet.</div>
          ) : (
            <div style={{ display:"grid", gridTemplateColumns:"repeat(4,1fr)", gap:12 }}>
              {[
                ["Present", att.present, "var(--moss)"],
                ["Late", att.late, "var(--gold)"],
                ["Missed", att.missed, "var(--coral)"],
                ["Tech issue", att.tech, "var(--sky)"],
              ].map(([l,v,c]) => (
                <div key={l} style={{ padding:"12px 14px", background:"var(--paper-deep)", borderRadius:10, border:"var(--border-thin)", textAlign:"center" }}>
                  <div className="display" style={{ fontSize:26, color:c }}>{v}</div>
                  <div style={{ fontSize:11, color:"var(--ink-mute)", marginTop:2 }}>{l}</div>
                </div>
              ))}
            </div>
          )}
        </div>

        {/* Per-unit progress */}
        <div className="card-flat" style={{ padding:20 }}>
          <SectionHead eyebrow="BY UNIT" title="Course map"/>
          {COURSE_CONTENT.length === 0 ? (
            <div style={{ fontSize:13, color:"var(--ink-mute)", padding:"6px 0" }}>No course content yet.</div>
          ) : (
            <div style={{ display:"flex", flexDirection:"column", gap:12 }}>
              {COURSE_CONTENT.map(u => {
                const total = (u.lessons||[]).length;
                const dn    = (u.lessons||[]).filter(isDone).length;
                const pct   = total ? Math.round((dn/total)*100) : 0;
                return (
                  <div key={u.id}>
                    <div style={{ display:"flex", justifyContent:"space-between", alignItems:"center", marginBottom:5 }}>
                      <span style={{ fontWeight:700, fontSize:13 }}>{u.unit}</span>
                      <span style={{ fontSize:12, color:"var(--ink-mute)" }}>{dn}/{total} · <span style={{ fontWeight:700, color: pct===100?"var(--moss)":pct>0?"var(--coral)":"var(--ink-mute)" }}>{pct}%</span></span>
                    </div>
                    <div style={{ height:8, background:"var(--paper-deep)", borderRadius:4, overflow:"hidden" }}>
                      <div style={{ width:`${pct}%`, height:"100%", background: pct===100?"var(--moss)":"var(--coral)", borderRadius:4, transition:"width .4s" }}/>
                    </div>
                  </div>
                );
              })}
            </div>
          )}
        </div>

      </div>
    </Themed>
  );
};

window.StudentProgress = StudentProgress;