/* student.jsx — Student role pages */

const STUDENT_NAV = [
  { key: "home", label: "หน้าแรก" },
  { key: "assignments", label: "งานที่ได้รับ" },
  { key: "portfolio", label: "แฟ้มสะสมผลงาน" },
  { key: "upload", label: "อัปโหลดหลักฐาน" },
  { key: "rubrics", label: "รูบริกสมรรถนะ" },
  { key: "activities", label: "กิจกรรม" },
  { key: "internship", label: "ฝึกงาน" },
  { key: "tcas1", label: "TCAS 1" },
  { key: "profile", label: "โปรไฟล์" },
];

/* ---------- Default empty data (จะถูกแทนที่ด้วยข้อมูลจริงจาก DB/profile) ---------- */
function currentProfile() {
  const u = window.pfCurrentUser || {};
  return {
    studentId: u.student_code || "",
    name: u.name || "",
    classroom: u.grade || "",
    school: "โรงเรียนสาธิตมหาวิทยาลัยศรีนครินทรวิโรฒ ปทุมวัน",
    email: u.email || "",
    phone: u.phone || "",
    advisor: u.advisor_name || "",
  };
}
const SELF = currentProfile();

/* Default level = 0 ทุกสมรรถนะ จนกว่าจะมีการประเมินจริง */
const MY_LEVELS = Object.fromEntries(
  [...CORE_COMPETENCIES, ...SPEC_COMPETENCIES].map(c => [c.key, 0])
);
const RADAR_LABELS = [
  ...CORE_COMPETENCIES.map(c => c.short),
  ...SPEC_COMPETENCIES.map(c => c.short),
];
const RADAR_VALUES = RADAR_LABELS.map(() => 0);

const PORTFOLIO = [];
const ACTIVITIES = [];
/* ---------- Home ---------- */
function StudentHome({ go, toast }) {
  const [levels, setLevels] = React.useState({});
  const [gradeAvg, setGradeAvg] = React.useState({});
  const [gradeRows, setGradeRows] = React.useState([]);  // ใช้คำนวณ TCAS
  const [englishLatest, setEnglishLatest] = React.useState({}); // { type → {score, date} ล่าสุด }
  React.useEffect(() => {
    if (!window.pfCurrentUser) return;
    let alive = true;
    if (window.computeMyLevels) {
      window.computeMyLevels(window.pfCurrentUser.id).then(l => { if (alive) setLevels(l); });
    }
    if (window.PfGrades) {
      window.PfGrades.listByStudent(window.pfCurrentUser.id).then(rows => {
        if (!alive) return;
        setGradeRows(rows || []);
        setGradeAvg(window.PfGrades.averagesBySubject(rows));
      }).catch(()=>{});
    }
    if (window.PfEnglishExams) {
      window.PfEnglishExams.listByStudent(window.pfCurrentUser.id).then(rows => {
        if (!alive) return;
        // หา score ล่าสุด (ตามวันสอบ) ของแต่ละประเภท
        const m = {};
        (rows||[]).forEach(r => {
          const cur = m[r.exam_type];
          if (!cur || (r.exam_date && (!cur.exam_date || r.exam_date > cur.exam_date))) {
            m[r.exam_type] = r;
          }
        });
        setEnglishLatest(m);
      }).catch(()=>{});
    }
    return () => { alive = false; };
  }, []);
  const radarValues = [
    ...CORE_COMPETENCIES.map(c => levels[c.key] || 0),
    ...SPEC_COMPETENCIES.map(c => levels[c.key] || 0),
  ];
  return (
    <div className="page">
      <div className="hero">
        <div className="avatar">👩‍🎓</div>
        <div>
          <h1>สวัสดี {(window.pfCurrentUser||{}).name || "นักเรียน"}</h1>
          <p>{((window.pfCurrentUser||{}).grade ? "ชั้น "+window.pfCurrentUser.grade+" • " : "")}โรงเรียนสาธิตมหาวิทยาลัยศรีนครินทรวิโรฒ ปทุมวัน</p>
          <a>บันทึกหลักฐานจริงของการเรียนรู้ แล้วดูพัฒนาการของคุณอย่างโปร่งใส</a>
        </div>
      </div>

      <div className="two-col mt-5">
        <div className="card">
          <h2>สรุประดับสมรรถนะของฉัน</h2>
          <div className="muted small" style={{margin:"-6px 0 10px"}}>สมรรถนะหลัก (Core Competencies)</div>
          {CORE_COMPETENCIES.map(c => {
            const lvl = levels[c.key] || 0;
            return (
              <div className="comp-row" key={c.key}>
                <div className="lbl"><span>{c.short}</span><span className="muted">{lvl > 0 ? `${LEVEL_NAMES[lvl-1].label} (${lvl}/5)` : "ยังไม่ประเมิน"}</span></div>
                <ProgressBar value={lvl} max={5}/>
              </div>
            );
          })}
          <div className="muted small mt-5" style={{marginBottom:6}}>สมรรถนะเฉพาะวิชาเอก (Professional)</div>
          {SPEC_COMPETENCIES.map(c => {
            const lvl = levels[c.key] || 0;
            return (
              <div className="comp-row" key={c.key}>
                <div className="lbl"><span>{c.short}</span><span className="muted">{lvl > 0 ? `${LEVEL_NAMES[lvl-1].label} (${lvl}/5)` : "ยังไม่ประเมิน"}</span></div>
                <ProgressBar value={lvl} max={5}/>
              </div>
            );
          })}

          {window.TCAS1_REQUIREMENTS && (() => {
            const scores = window.computeTcasScores(gradeRows);
            const passList = window.TCAS1_REQUIREMENTS
              .map(r => ({ req: r, eval: window.checkTcasEligibility(r, scores) }))
              .filter(x => x.eval.allPass);
            return (
              <div style={{marginTop:24, paddingTop:18, borderTop:"1px dashed var(--line)"}}>
                <div className="row-between" style={{marginBottom:6}}>
                  <h3 style={{margin:0}}>🎯 สรุปการผ่านเกณฑ์ TCAS 1</h3>
                  <button className="btn btn-ghost btn-sm" onClick={()=>go("tcas1")}>ดูทั้งหมด →</button>
                </div>
                <div className="muted small" style={{marginBottom:10}}>* พิจารณาจากเกณฑ์<b>คะแนนเฉลี่ยเท่านั้น</b> (ไม่นับ IELTS / เงื่อนไขเพิ่มเติม)</div>
                {gradeRows.length === 0 ? (
                  <div className="muted small" style={{padding:14, background:"var(--bg-soft)", borderRadius:8}}>
                    ยังไม่มีข้อมูลเกรด — ไปบันทึกที่ <a href="#" onClick={e=>{e.preventDefault(); go("profile");}}>หน้าโปรไฟล์</a> ก่อน
                  </div>
                ) : passList.length === 0 ? (
                  <div className="muted small" style={{padding:14, background:"#fff7ed", borderRadius:8, color:"#b45309"}}>
                    ยังไม่ผ่านเกณฑ์มหาวิทยาลัยใด ๆ ตามคะแนนเฉลี่ยปัจจุบัน
                  </div>
                ) : (
                  <>
                    <div className="small" style={{marginBottom:6, color:"#15803d"}}>✅ ผ่านเกณฑ์ <b>{passList.length}</b> สถาบัน</div>
                    <div style={{display:"flex", flexDirection:"column", gap:6}}>
                      {passList.map(x => (
                        <div key={x.req.id} className="row-between" style={{padding:"8px 12px", background:"#dcfce7", borderRadius:8}}>
                          <div>
                            <div style={{fontWeight:600, fontSize:13.5}}>{x.req.university}</div>
                            <div className="muted small">คณะ{x.req.faculty}</div>
                          </div>
                          <span className="mono small" style={{color:"#15803d"}}>✓</span>
                        </div>
                      ))}
                    </div>
                  </>
                )}
              </div>
            );
          })()}
        </div>

        <div>
          <div className="card">
            <h2>ภาพรวมสมรรถนะ</h2>
            <div className="radar-wrap">
              <RadarChart labels={RADAR_LABELS} values={radarValues} max={5} size={380}/>
            </div>
          </div>

          {window.PfGrades && (
            <div className="card mt-4">
              <div className="row-between" style={{marginBottom:6}}>
                <h2 style={{margin:0}}>📚 ผลการเรียน (ค่าเฉลี่ย)</h2>
                <button className="btn btn-ghost btn-sm" onClick={()=>go("profile")}>แก้ไข →</button>
              </div>
              <div className="muted small" style={{marginBottom:10}}>เฉลี่ยจากทุกเทอมที่บันทึกไว้</div>
              <div className="stat-grid" style={{gridTemplateColumns:"repeat(2,1fr)"}}>
                <div className="stat stat-blue">
                  <div className="num">{gradeAvg.gpa != null ? gradeAvg.gpa.toFixed(2) : "—"}</div>
                  <div className="lbl">GPA เฉลี่ยรวม</div>
                </div>
                {(window.GRADE_SUBJECTS || []).map(s => (
                  <div key={s.key} className="stat stat-green" style={{padding:"10px 12px"}} title={s.label}>
                    <div className="num" style={{fontSize:18}}>{gradeAvg[s.key] != null ? gradeAvg[s.key].toFixed(2) : "—"}</div>
                    <div className="lbl" style={{fontSize:11}}>{s.short || s.label}</div>
                  </div>
                ))}
              </div>
            </div>
          )}

          {window.PfEnglishExams && (
            <div className="card mt-4">
              <div className="row-between" style={{marginBottom:6}}>
                <h2 style={{margin:0}}>🎓 คะแนนสอบภาษาอังกฤษ</h2>
                <button className="btn btn-ghost btn-sm" onClick={()=>go("profile")}>แก้ไข →</button>
              </div>
              <div className="muted small" style={{marginBottom:10}}>คะแนนล่าสุดของแต่ละประเภท</div>
              <div className="stat-grid" style={{gridTemplateColumns:"repeat(3,1fr)"}}>
                {(window.ENGLISH_EXAM_TYPES || []).map(t => {
                  const r = englishLatest[t.key];
                  return (
                    <div key={t.key} className="stat stat-purple" style={{padding:"12px"}}>
                      <div className="num" style={{fontSize:18}}>
                        {r && r.score != null ? <>{Number(r.score)}<span className="muted small" style={{fontSize:11}}> / {t.max}</span></> : "—"}
                      </div>
                      <div className="lbl" style={{fontSize:12}}>{t.label}</div>
                      {r && r.exam_date && (
                        <div className="mono muted" style={{fontSize:10, marginTop:4}}>📅 {r.exam_date}</div>
                      )}
                    </div>
                  );
                })}
              </div>
            </div>
          )}

          <div className="card mt-4">
            <h2>การดำเนินการด่วน</h2>
            <button className="btn btn-grad btn-block mt-2" onClick={() => go("upload")}>
              <Icons.plus/> เพิ่มหลักฐานใหม่
            </button>
            <button className="btn btn-grad-2 btn-block mt-3" onClick={() => go("rubrics")}>
              <Icons.doc/> ดูคำแนะนำเพื่อพัฒนา
            </button>
          </div>
        </div>
      </div>

      <div className="card mt-5">
        <div className="row-between"><h2 className="mb-0">หลักฐานล่าสุด</h2>
          <button className="btn btn-ghost btn-sm" onClick={()=>go("portfolio")}>ดูทั้งหมด →</button>
        </div>
        <div style={{display:"grid",gridTemplateColumns:"repeat(3,1fr)",gap:14, marginTop:14}}>
          {PORTFOLIO.slice(0,3).map(p => (
            <div key={p.id} className="card card-tight" style={{padding:14}}>
              <Pill kind={p.status.kind}>{p.status.label}</Pill>
              <h3 style={{margin:"8px 0 4px",fontSize:15, lineHeight:1.35}}>{p.title}</h3>
              <div className="muted small">📅 {p.date}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

/* ---------- Portfolio list ---------- */
const EV_STATUS = {
  approved: { kind:"green",  label:"✅ ผ่าน" },
  revise:   { kind:"purple", label:"🔁 ต้องปรับปรุง" },
  pending:  { kind:"amber",  label:"⌛ รอตรวจ" },
};
function mapEvidenceRow(r) {
  const evals = (r.evaluations || []).slice().sort((a,b)=> (a.created_at < b.created_at ? 1 : -1));
  const ev = evals[0];
  const comps = [...(r.core_competencies||[]), ...(r.spec_competencies||[])];
  return {
    id: r.id, title: r.title, desc: r.reflection || "",
    date: r.date || "—",
    driveLinks: (r.evidence_drive_links || []).map(l => parseDriveLink(l.url)),
    files: "",
    tags: comps.map(name => ({ l:name, k:"blue" })),
    status: EV_STATUS[r.status] || EV_STATUS.pending,
    note: ev ? (ev.comment ? "ความเห็น: " + ev.comment : "ประเมินแล้ว") : "รอการประเมินจากอาจารย์",
    score: ev ? ev.score : null,
  };
}

function StudentPortfolio({ toast }) {
  const backend = !!(window.PfEvidence && window.PF_SUPABASE_READY && window.pfCurrentUser);
  const [items, setItems] = React.useState(backend ? [] : PORTFOLIO);
  const [loading, setLoading] = React.useState(backend);
  const [stat, setStat] = React.useState("all");
  const [open, setOpen] = React.useState(null);
  const [confirmDel, setConfirmDel] = React.useState(null);
  const [busy, setBusy] = React.useState(false);

  const doDelete = async () => {
    if (!backend) { toast("ลบได้เมื่อเชื่อมฐานข้อมูลแล้ว"); return; }
    setBusy(true);
    try {
      await window.PfEvidence.remove(confirmDel.id);
      const title = confirmDel.title;
      setConfirmDel(null);
      toast(`ลบ "${title}" ออกจากแฟ้มแล้ว`);
      await load();
    } catch (e) { toast("ลบไม่สำเร็จ: " + (e.message || e)); }
    finally { setBusy(false); }
  };

  const load = React.useCallback(async () => {
    if (!backend) { setItems(PORTFOLIO); setLoading(false); return; }
    setLoading(true);
    try {
      const rows = await window.PfEvidence.listMine(window.pfCurrentUser.id);
      setItems((rows || []).map(mapEvidenceRow));
    } catch (e) { toast("โหลดแฟ้มผลงานไม่สำเร็จ: " + (e.message || e)); }
    finally { setLoading(false); }
  }, [backend, toast]);
  React.useEffect(() => { load(); }, [load]);

  const list = items.filter(p => stat === "all" || (p.status.label || "").includes(stat));

  return (
    <div className="page">
      <div className="row-between" style={{marginBottom:18}}>
        <h2 className="mb-0" style={{fontSize:22}}>แฟ้มสะสมผลงานของฉัน</h2>
        <div className="filterbar">
          <select className="select" value={stat} onChange={e=>setStat(e.target.value)}>
            <option value="all">ทุกสถานะ</option>
            <option>ผ่าน</option>
            <option>รอตรวจ</option>
            <option>ต้องปรับปรุง</option>
          </select>
        </div>
      </div>

      {loading ? (
        <div className="muted" style={{padding:20}}>กำลังโหลด…</div>
      ) : list.length === 0 ? (
        <div className="card muted" style={{padding:24,textAlign:"center"}}>ยังไม่มีหลักฐานในแฟ้ม — ไปที่ "อัปโหลดหลักฐาน" เพื่อเพิ่มชิ้นแรก</div>
      ) : (
      <div style={{display:"flex",flexDirection:"column",gap:14}}>
        {list.map(p => (
          <div className="item" key={p.id}>
            <div className="body">
              <h3>{p.title}</h3>
              <div className="muted small">{p.desc}</div>
              <div className="meta">
                <span>📅 {p.date}</span>
                {p.driveLinks && p.driveLinks.filter(Boolean).length > 0
                  ? <span>📎 {p.driveLinks.filter(Boolean).length} ลิงก์ Drive</span>
                  : <span>📁 {p.files}</span>}
              </div>
              <div className="tags">
                {p.tags.map((t,i)=> <Pill key={i} kind={t.k}>{t.l}</Pill>)}
              </div>
              <div className="status-line">
                <Pill kind={p.status.kind}>{p.status.label}</Pill>
                <span>{p.note}</span>
              </div>
            </div>
            <div style={{display:"flex", flexDirection:"column", gap:8}}>
              <button className="btn btn-primary btn-sm" onClick={()=>setOpen(p)}>ดูรายละเอียด</button>
              {backend && (
                <button className="btn btn-ghost btn-sm" onClick={()=>setConfirmDel(p)} style={{color:"#dc2626"}}>ลบ</button>
              )}
            </div>
          </div>
        ))}
      </div>
      )}

      {open && (
        <Modal title={open.title} onClose={()=>setOpen(null)}
          footer={<>
            <button className="btn btn-ghost" onClick={()=>setOpen(null)}>ปิด</button>
            <button className="btn btn-soft" onClick={()=>{ toast("ดาวน์โหลดเอกสาร (จำลอง)"); }}>ดาวน์โหลด</button>
          </>}>
          <div className="row gap-3" style={{marginBottom:10}}>
            <Pill kind={open.status.kind}>{open.status.label}</Pill>
            {open.score && <Pill kind="blue">คะแนน {open.score}/5</Pill>}
            <span className="muted small">📅 {open.date}</span>
          </div>
          <p>{open.desc}</p>
          <div className="divider-h"></div>
          <div className="small muted">สมรรถนะที่เกี่ยวข้อง</div>
          <div className="tags" style={{marginTop:6}}>
            {open.tags.map((t,i)=> <Pill key={i} kind={t.k}>{t.l}</Pill>)}
          </div>
          <div className="divider-h"></div>
          <div className="small muted">ไฟล์แนบ / หลักฐาน</div>
          {open.driveLinks && open.driveLinks.length > 0 ? (
            <div style={{marginTop:10}}>
              <DrivePreviewGrid items={open.driveLinks.filter(Boolean)}/>
            </div>
          ) : (
            <div style={{marginTop:6}}>{open.files}</div>
          )}
          <div className="divider-h"></div>
          <div className="small muted">ความเห็นจากอาจารย์</div>
          <div style={{marginTop:6}}>{open.note}</div>
        </Modal>
      )}

      {confirmDel && (
        <Modal title="ยืนยันการลบหลักฐาน" onClose={()=>setConfirmDel(null)}
          footer={<>
            <button className="btn btn-ghost" onClick={()=>setConfirmDel(null)}>ยกเลิก</button>
            <button className="btn btn-danger" onClick={doDelete} disabled={busy}>{busy?"กำลังลบ…":"ลบหลักฐาน"}</button>
          </>}>
          <div>ลบ <b>"{confirmDel.title}"</b> ออกจากแฟ้มสะสมผลงาน?</div>
          <div className="muted small mt-3" style={{lineHeight:1.7}}>
            • ลิงก์หลักฐานทั้งหมดจะถูกลบ<br/>
            • หากอาจารย์เคยให้คะแนน/ความเห็นไว้ — จะถูกลบตาม<br/>
            • <b>การลบไม่สามารถยกเลิกได้</b><br/>
            • หากต้องการแก้ไข ให้ลบอันนี้แล้วกดอัปโหลดใหม่
          </div>
        </Modal>
      )}
    </div>
  );
}

/* ---------- Upload ---------- */
/* ---------- Assignments (งานที่ครูตั้งให้) ---------- */
function StudentAssignments({ toast, go }) {
  const backend = !!(window.PfAssignments && window.PF_SUPABASE_READY && window.pfCurrentUser);
  const [list, setList] = React.useState([]);
  const [loading, setLoading] = React.useState(backend);
  const [myEvidence, setMyEvidence] = React.useState([]);

  React.useEffect(() => {
    if (!backend) { setLoading(false); return; }
    (async () => {
      try {
        const [assignments, evidence] = await Promise.all([
          window.PfAssignments.list(),
          window.PfEvidence ? window.PfEvidence.listMine(window.pfCurrentUser.id) : Promise.resolve([]),
        ]);
        const myGrade = window.pfCurrentUser.grade || "";
        const visible = (assignments || []).filter(a =>
          a.status === "open" && (!a.target_grade || a.target_grade === myGrade)
        );
        setList(visible);
        setMyEvidence(evidence || []);
      } catch (e) { toast("โหลดข้อมูลไม่สำเร็จ: "+(e.message||e)); }
      finally { setLoading(false); }
    })();
  }, [backend, toast]);

  const submitted = (aId) => myEvidence.some(e => e.assignment_id === aId);
  const submittedStatus = (aId) => {
    const ev = myEvidence.find(e => e.assignment_id === aId);
    return ev ? ev.status : null;
  };

  return (
    <div className="page">
      <div style={{marginBottom:18}}>
        <h2 className="mb-0" style={{fontSize:22}}>งานที่ได้รับ</h2>
        <div className="muted small">หัวข้อที่อาจารย์ตั้งให้ส่งหลักฐาน</div>
      </div>

      {loading ? (
        <div className="card muted" style={{textAlign:"center",padding:40}}>กำลังโหลด…</div>
      ) : list.length === 0 ? (
        <div className="card" style={{textAlign:"center",padding:60}}>
          <div style={{fontSize:36}}>📭</div>
          <h3 className="mt-3">ยังไม่มีงานที่ได้รับ</h3>
          <div className="muted">เมื่ออาจารย์ตั้งหัวข้อให้ จะแสดงที่นี่</div>
        </div>
      ) : (
        <div style={{display:"flex",flexDirection:"column",gap:14}}>
          {list.map(a => {
            const done = submitted(a.id);
            const st = submittedStatus(a.id);
            const overdue = a.due_date && new Date(a.due_date) < new Date();
            return (
              <div className="card" key={a.id} style={{padding:18}}>
                <div className="row-between" style={{flexWrap:"wrap",gap:8}}>
                  <div style={{flex:1,minWidth:200}}>
                    <div className="row gap-2" style={{alignItems:"center"}}>
                      <h3 style={{margin:0}}>{a.title}</h3>
                      {done ? (
                        st==="approved" ? <Pill kind="green">ผ่านแล้ว</Pill>
                        : st==="revise" ? <Pill kind="purple">ต้องปรับปรุง</Pill>
                        : <Pill kind="amber">ส่งแล้ว · รอตรวจ</Pill>
                      ) : overdue ? <Pill kind="red">เลยกำหนด</Pill> : <Pill kind="blue">ยังไม่ส่ง</Pill>}
                    </div>
                    {a.description && <p className="muted small" style={{margin:"6px 0 0"}}>{a.description}</p>}
                    <div className="muted small mt-2">
                      <span>👨‍🏫 {a.teacher?.name||"—"}</span>
                      {a.due_date && <span> · 📅 กำหนดส่ง {new Date(a.due_date).toLocaleDateString("th-TH")}</span>}
                    </div>
                    {(a.core_competencies||[]).length + (a.spec_competencies||[]).length > 0 && (
                      <div className="tags mt-2">
                        {(a.core_competencies||[]).map((c,i)=><Pill key={"c"+i} kind="blue">{c}</Pill>)}
                        {(a.spec_competencies||[]).map((c,i)=><Pill key={"s"+i} kind="purple">{c}</Pill>)}
                      </div>
                    )}
                  </div>
                  <div>
                    {!done ? (
                      <button className="btn btn-primary btn-sm" onClick={()=>go("upload",a)}>ส่งหลักฐาน</button>
                    ) : st==="revise" ? (
                      <button className="btn btn-purple btn-sm" onClick={()=>go("upload",a)}>ส่งใหม่</button>
                    ) : null}
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
}

function StudentUpload({ toast, go, assignment }) {
  const [form, setForm] = React.useState({
    title: assignment ? assignment.title : "",
    date: "", desc: "",
    core: assignment ? (assignment.core_competencies||[]) : [],
    spec: assignment ? (assignment.spec_competencies||[]) : [],
    driveLinks: [],
    teacherId: assignment ? (assignment.teacher_id||"") : "",
  });
  const [busy, setBusy] = React.useState(false);
  const [teachers, setTeachers] = React.useState([]);
  const upd = (k, v) => setForm(f => ({ ...f, [k]: v }));
  const toggle = (k, v) => setForm(f => {
    const set = new Set(f[k]); set.has(v) ? set.delete(v) : set.add(v);
    return { ...f, [k]: [...set] };
  });

  // โหลดรายชื่ออาจารย์ตอนเปิดหน้า
  React.useEffect(() => {
    if (!window.PfUsers || !window.PF_SUPABASE_READY) return;
    (async () => {
      try {
        const all = await window.PfUsers.list();
        setTeachers((all || []).filter(u => u.role === "teacher"));
      } catch (e) { /* ignore — fallback to empty list */ }
    })();
  }, []);

  const submit = async (e) => {
    e.preventDefault();
    if (!form.title || !form.date || !form.desc) { toast("กรุณากรอกข้อมูลให้ครบ"); return; }
    if (form.driveLinks.length === 0) { toast("กรุณาแนบลิงก์หลักฐานอย่างน้อย 1 ลิงก์"); return; }
    if (teachers.length > 0 && !form.teacherId) { toast("กรุณาเลือกอาจารย์ผู้ประเมิน"); return; }
    const backend = window.PfEvidence && window.PF_SUPABASE_READY && window.pfCurrentUser;
    if (backend) {
      setBusy(true);
      try {
        await window.PfEvidence.create({
          studentId: window.pfCurrentUser.id,
          title: form.title, date: form.date, kind: null,
          core: form.core, spec: form.spec, reflection: form.desc,
          driveLinks: form.driveLinks.map(d => d.originalUrl || d),
          assignedTeacherId: form.teacherId || null,
          assignmentId: assignment ? assignment.id : null,
        });
        toast("ส่งหลักฐานเรียบร้อย • สถานะ: รอตรวจ");
        setTimeout(()=>go("portfolio"), 700);
      } catch (e2) {
        toast("บันทึกไม่สำเร็จ: " + (e2.message || e2));
      } finally { setBusy(false); }
      return;
    }
    // โหมดสาธิต
    toast(`ส่งหลักฐานเรียบร้อย — แนบ ${form.driveLinks.length} ลิงก์ • สถานะ: รอตรวจ`);
    setTimeout(()=>go("portfolio"), 800);
  };

  const coreOpts = CORE_COMPETENCIES.map(c => c.full);
  const specOpts = SPEC_COMPETENCIES.map(c => c.full);

  return (
    <div className="page">
      <h2 style={{fontSize:22}}>อัปโหลดหลักฐานใหม่</h2>
      {assignment && (
        <div className="card card-tight" style={{padding:"12px 16px",marginBottom:16,background:"var(--blue-1,#eff6ff)",borderLeft:"4px solid var(--primary)"}}>
          <div className="small" style={{fontWeight:600}}>📋 ส่งตามหัวข้อ: {assignment.title}</div>
          {assignment.description && <div className="muted small mt-1">{assignment.description}</div>}
          {assignment.due_date && <div className="muted small mt-1">กำหนดส่ง: {new Date(assignment.due_date).toLocaleDateString("th-TH")}</div>}
        </div>
      )}
      <form className="card" onSubmit={submit}>
        <div className="field">
          <label>ชื่อชิ้นงาน/กิจกรรม *</label>
          <input className="input" placeholder="เช่น โครงงานวิจัย, การนำเสนอ, บทสะท้อน"
                 value={form.title} onChange={e=>upd("title", e.target.value)}/>
        </div>
        <div className="field">
          <label>วันที่ *</label>
          <input className="input" type="date" value={form.date} onChange={e=>upd("date", e.target.value)}/>
        </div>
        <div className="field">
          <label>คำอธิบายสั้น *</label>
          <textarea className="textarea" placeholder="อธิบายสั้นๆ เกี่ยวกับชิ้นงานนี้ เป้าหมาย และสิ่งที่ได้เรียนรู้"
                    value={form.desc} onChange={e=>upd("desc", e.target.value)}/>
        </div>

        <div className="field">
          <label>สมรรถนะที่เกี่ยวข้อง * (เลือกได้หลายข้อ)</label>
          <div className="upload-grid">
            <div>
              <div className="small" style={{fontWeight:600, marginBottom:6}}>สมรรถนะหลัก</div>
              {coreOpts.map(o => (
                <label key={o} className="checkbox-row">
                  <input type="checkbox" checked={form.core.includes(o)} onChange={()=>toggle("core", o)}/>
                  <span>{o}</span>
                </label>
              ))}
            </div>
            <div>
              <div className="small" style={{fontWeight:600, marginBottom:6}}>สมรรถนะเฉพาะ</div>
              {specOpts.map(o => (
                <label key={o} className="checkbox-row">
                  <input type="checkbox" checked={form.spec.includes(o)} onChange={()=>toggle("spec", o)}/>
                  <span>{o}</span>
                </label>
              ))}
            </div>
          </div>
        </div>

        <div className="field">
          <label>แนบหลักฐาน (Google Drive / Docs / Sheets / Slides) *</label>
          <DriveLinkInput value={form.driveLinks} onChange={(v)=>upd("driveLinks", v)}/>
        </div>

        <div className="field">
          <label>ส่งให้อาจารย์ผู้ประเมิน *</label>
          {teachers.length > 0 ? (
            <select className="select" value={form.teacherId} onChange={e=>upd("teacherId", e.target.value)} required>
              <option value="">— เลือกอาจารย์ —</option>
              {teachers.map(t => (
                <option key={t.id} value={t.id}>{t.name}{t.email ? ` (${t.email})` : ""}</option>
              ))}
            </select>
          ) : (
            <div className="muted small" style={{padding:8, background:"var(--bg-soft)", borderRadius:8}}>
              ยังไม่มีอาจารย์ในระบบ — ติดต่อแอดมินให้สร้างบัญชีอาจารย์ก่อน
            </div>
          )}
        </div>

        <div className="row-between mt-3">
          <span className="muted small">หลักฐานจะปรากฏในรายการ "ต้องตรวจ" ของอาจารย์ที่เลือก</span>
          <div className="row gap-3">
            <button type="button" className="btn btn-ghost" onClick={()=>go("home")}>ยกเลิก</button>
            <button type="submit" className="btn btn-primary" disabled={busy}>{busy ? "กำลังส่ง…" : "ส่งหลักฐาน"}</button>
          </div>
        </div>
      </form>
    </div>
  );
}

/* ---------- Rubrics page ---------- */
function StudentRubrics() {
  const [tab, setTab] = React.useState("spec"); // 'core' | 'spec'
  return (
    <div className="page">
      <h2 style={{fontSize:22}}>รูบริกสมรรถนะและพฤติกรรมบ่งชี้</h2>
      <div className="muted small" style={{marginTop:-6}}>
        อ้างอิงจากหลักสูตรวิชาเอกวิทยาศาสตร์สุขภาพ พ.ศ. 2568 — โรงเรียนสาธิตมหาวิทยาลัยศรีนครินทรวิโรฒ ปทุมวัน
      </div>

      <div className="tabs mt-4">
        <button className={tab==="spec"?"active":""} onClick={()=>setTab("spec")}>
          สมรรถนะเฉพาะวิชาเอก (4 ข้อ)
        </button>
        <button className={tab==="core"?"active":""} onClick={()=>setTab("core")}>
          สมรรถนะหลัก (6 ข้อ)
        </button>
      </div>

      {/* Level legend */}
      <div className="card card-tight" style={{padding:"12px 16px", marginBottom:16}}>
        <div className="row gap-3" style={{flexWrap:"wrap"}}>
          <div className="small" style={{fontWeight:600}}>เกณฑ์ระดับ:</div>
          {LEVEL_NAMES.map(l => (
            <div key={l.n} className="row gap-2">
              <span className="dot" style={{background: l.color, width:12, height:12, borderRadius:"50%"}}></span>
              <span className="small"><b>{l.short}</b> {l.label}</span>
            </div>
          ))}
        </div>
      </div>

      {tab === "spec" && SPEC_COMPETENCIES.map(c => (
        <SpecRubricCard key={c.key} comp={c}/>
      ))}

      {tab === "core" && (
        <div style={{display:"grid", gridTemplateColumns:"repeat(2, 1fr)", gap:16}}>
          {CORE_COMPETENCIES.map(c => <CoreRubricCard key={c.key} comp={c}/>)}
        </div>
      )}
    </div>
  );
}

function SpecRubricCard({ comp }) {
  return (
    <div className={`card rubric-card ${comp.color === "primary" ? "" : comp.color}`} style={{marginBottom:20, padding:24}}>
      <div className="row-between" style={{flexWrap:"wrap", gap:8}}>
        <div>
          <h3 style={{marginBottom:4}}>{comp.full}</h3>
          <div className="muted small" style={{maxWidth:780}}>{comp.desc}</div>
        </div>
        <Pill kind={comp.color === "primary" ? "blue" : comp.color === "teal" ? "teal" : comp.color === "purple" ? "purple" : "pink"}>
          สมรรถนะเฉพาะวิชาเอก
        </Pill>
      </div>

      <div style={{overflowX:"auto", marginTop:14}}>
        <table className="rubric-table" style={{minWidth: 920}}>
          <thead>
            <tr>
              <th style={{width:200}}>องค์ประกอบ</th>
              {LEVEL_NAMES.map(l => (
                <th key={l.n} style={{minWidth:140}}>
                  <div style={{fontWeight:600, color: l.color}}>{l.short} {l.label}</div>
                </th>
              ))}
            </tr>
          </thead>
          <tbody>
            {comp.subs.map(s => (
              <tr key={s.key}>
                <td>
                  <div style={{fontWeight:600}}><span className="mono small muted">{s.key}</span> {s.name}</div>
                </td>
                {s.levels.map((txt, i) => (
                  <td key={i} className="small" style={{verticalAlign:"top"}}>{txt}</td>
                ))}
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      <div className="tip-box mt-4">
        <div className="h">🧰 เครื่องมือ/ชิ้นงานที่ใช้ประเมิน</div>
        <ul>{comp.tools.map((t,i)=> <li key={i}>{t}</li>)}</ul>
      </div>
    </div>
  );
}

function CoreRubricCard({ comp }) {
  return (
    <div className="card" style={{padding:20, borderTop:"4px solid var(--primary)"}}>
      <h3 style={{color:"var(--primary-2)", marginBottom:8}}>{comp.short}</h3>
      <div className="muted small" style={{marginBottom:12}}>{comp.desc}</div>
      <div className="small" style={{fontWeight:600, color:"var(--ink-2)", marginBottom:6}}>ระดับการพัฒนา</div>
      <ol style={{margin:0, paddingLeft:20, fontSize:14}}>
        {LEVEL_NAMES.map(l => (
          <li key={l.n} style={{margin:"4px 0"}}>
            <b style={{color: l.color}}>{l.label}</b>
            <span className="muted"> — {coreLevelDesc(comp.key, l.n)}</span>
          </li>
        ))}
      </ol>
    </div>
  );
}

/* Generic level descriptions for core competencies (5-level rubric) */
function coreLevelDesc(key, level) {
  const generic = [
    "แสดงพฤติกรรมเมื่อได้รับการกระตุ้น/ชี้แนะ",
    "เริ่มทำเองในบริบทง่าย ยังต้องการการสนับสนุน",
    "ทำได้อย่างเป็นระบบ สม่ำเสมอ ในสถานการณ์ทั่วไป",
    "นำไปประยุกต์/ต่อยอด มีแผนพัฒนาตนเองชัดเจน",
    "เป็นแบบอย่าง/ผู้นำ สร้างแรงบันดาลใจให้ผู้อื่น",
  ];
  return generic[level - 1];
}

/* ---------- Activities ---------- */
function StudentActivities({ toast }) {
  const backend = !!(window.PfActivities && window.PF_SUPABASE_READY && window.pfCurrentUser);
  const [list, setList] = React.useState([]);
  const [loading, setLoading] = React.useState(backend);
  const [busy, setBusy] = React.useState(null);  // id ที่กำลังลงทะเบียน
  const [calMonth, setCalMonth] = React.useState(() => {
    const d = new Date(); return { year: d.getFullYear(), month: d.getMonth() };
  });

  const studentId = (window.pfCurrentUser || {}).id;
  const cats = window.ACTIVITY_CATEGORIES || [];

  const load = React.useCallback(async () => {
    if (!backend) { setLoading(false); return; }
    setLoading(true);
    try { setList(await window.PfActivities.list()); }
    catch (e) { toast("โหลดกิจกรรมไม่สำเร็จ: " + (e.message||e)); }
    finally { setLoading(false); }
  }, [backend, toast]);
  React.useEffect(() => { load(); }, [load]);

  const register = async (a) => {
    setBusy(a.id);
    try {
      await window.PfActivities.register(a.id, studentId);
      toast("ลงทะเบียนเรียบร้อย");
      await load();
    } catch (e) {
      toast(String(e.message||e).includes("duplicate") ? "ลงทะเบียนไว้แล้ว" : "ลงทะเบียนไม่สำเร็จ: " + (e.message||e));
    } finally { setBusy(null); }
  };
  const cancel = async (a) => {
    if (!confirm("ยกเลิกการลงทะเบียน?")) return;
    setBusy(a.id);
    try { await window.PfActivities.unregister(a.id, studentId); toast("ยกเลิกแล้ว"); await load(); }
    catch (e) { toast("ยกเลิกไม่สำเร็จ: " + (e.message||e)); }
    finally { setBusy(null); }
  };

  // จัดกลุ่มกิจกรรมตามวัน (string YYYY-MM-DD) สำหรับปฏิทิน
  const byDate = {};
  list.forEach(a => { (byDate[a.date] = byDate[a.date] || []).push(a); });

  // สร้าง grid ปฏิทินของเดือนปัจจุบัน
  const buildCal = () => {
    const first = new Date(calMonth.year, calMonth.month, 1);
    const daysInMonth = new Date(calMonth.year, calMonth.month + 1, 0).getDate();
    const startDow = first.getDay(); // 0=อา.
    const cells = [];
    // เติม mute ของเดือนก่อน
    const prevDays = new Date(calMonth.year, calMonth.month, 0).getDate();
    for (let i = startDow - 1; i >= 0; i--) cells.push({ d: prevDays - i, muted: true });
    for (let d = 1; d <= daysInMonth; d++) {
      const iso = `${calMonth.year}-${String(calMonth.month+1).padStart(2,"0")}-${String(d).padStart(2,"0")}`;
      const events = byDate[iso] || [];
      const cat = events[0] ? cats.find(c => c.key === events[0].category) : null;
      cells.push({ d, iso, count: events.length, color: cat ? cat.color : null, events });
    }
    while (cells.length % 7 !== 0) cells.push({ d: cells.length, muted: true });
    return cells;
  };
  const cells = buildCal();
  const today = new Date();
  const upcoming = list
    .filter(a => a.date >= `${today.getFullYear()}-${String(today.getMonth()+1).padStart(2,"0")}-${String(today.getDate()).padStart(2,"0")}` && a.status === "open")
    .slice(0, 20);

  const monthNames = ["มกราคม","กุมภาพันธ์","มีนาคม","เมษายน","พฤษภาคม","มิถุนายน","กรกฎาคม","สิงหาคม","กันยายน","ตุลาคม","พฤศจิกายน","ธันวาคม"];

  return (
    <div className="page">
      <h2 style={{fontSize:22}}>กิจกรรมและโครงการ</h2>

      <div className="card">
        <div className="row-between" style={{marginBottom:8}}>
          <h3 style={{margin:0}}>ปฏิทินกิจกรรม</h3>
          <div className="row gap-2" style={{alignItems:"center"}}>
            <button className="btn btn-ghost btn-sm" onClick={()=>setCalMonth(m => {
              const nm = m.month === 0 ? 11 : m.month - 1;
              const ny = m.month === 0 ? m.year - 1 : m.year;
              return { year: ny, month: nm };
            })}>‹</button>
            <span className="mono"><b>{monthNames[calMonth.month]} {calMonth.year + 543}</b></span>
            <button className="btn btn-ghost btn-sm" onClick={()=>setCalMonth(m => {
              const nm = m.month === 11 ? 0 : m.month + 1;
              const ny = m.month === 11 ? m.year + 1 : m.year;
              return { year: ny, month: nm };
            })}>›</button>
          </div>
        </div>
        <div className="cal">
          <div className="cal-grid">
            {["อา","จ","อ","พ","พฤ","ศ","ส"].map(h => <div className="cal-h" key={h}>{h}</div>)}
            {cells.map((c,i) => (
              <div key={i} className={`cal-cell ${c.muted?"muted":""} ${c.color||""}`}
                title={c.events && c.events.length ? c.events.map(e=>e.title).join("\n") : ""}>
                {c.d}
                {!c.muted && c.count > 1 && <span className="small muted" style={{display:"block",fontSize:10}}>+{c.count}</span>}
              </div>
            ))}
          </div>
          <div className="cal-legend">
            {cats.map(c => (
              <span key={c.key}><span className={`dot ${c.dot}`}></span> {c.label}</span>
            ))}
          </div>
        </div>
      </div>

      <h3 className="mt-6">กิจกรรมที่กำลังจะมาถึง {upcoming.length > 0 && <span className="muted small">({upcoming.length})</span>}</h3>
      {loading ? (
        <div className="muted" style={{padding:20}}>กำลังโหลด…</div>
      ) : upcoming.length === 0 ? (
        <div className="card muted" style={{padding:30,textAlign:"center"}}>ยังไม่มีกิจกรรมที่จะจัด</div>
      ) : (
      <div style={{display:"flex", flexDirection:"column", gap:14}}>
        {upcoming.map(a => {
          const cat = cats.find(c => c.key === a.category);
          const isReg = backend ? window.PfActivities.isRegistered(a, studentId) : false;
          const regCount = window.PfActivities ? window.PfActivities.countRegistered(a) : 0;
          const full = a.cap != null && a.cap > 0 && regCount >= a.cap;
          return (
            <div className="event" key={a.id}>
              <div className="body" style={{flex:1}}>
                <div className="row gap-2"><h4 style={{margin:0}}>{a.title}</h4>
                  {cat && <Pill kind={cat.color}>{cat.label}</Pill>}
                </div>
                {a.description && <div className="muted small mt-2">{a.description}</div>}
                <div className="meta">
                  <span>📅 {a.date}</span>
                  {a.time_start && <span>🕐 {a.time_start}{a.time_end ? `–${a.time_end}` : ""}</span>}
                  {a.location && <span>📍 {a.location}</span>}
                  {a.cap != null && a.cap > 0 && <span>👥 {regCount}/{a.cap}</span>}
                </div>
              </div>
              {isReg
                ? <div className="row gap-2"><Pill kind="green">✓ ลงทะเบียนแล้ว</Pill><button className="btn btn-ghost btn-sm" onClick={()=>cancel(a)} disabled={busy===a.id}>ยกเลิก</button></div>
                : full
                  ? <Pill kind="red">เต็ม</Pill>
                  : <button className="btn btn-primary btn-sm" onClick={()=>register(a)} disabled={busy===a.id || !backend}>{busy===a.id?"กำลังลง…":"ลงทะเบียน"}</button>}
            </div>
          );
        })}
      </div>
      )}
    </div>
  );
}

/* ---------- Grades card (เกรดต่อเทอม + รายวิชา) ---------- */
function StudentGradesCard({ studentId, toast, refreshKey, onChange }) {
  const backend = !!(window.PfGrades && window.PF_SUPABASE_READY);
  const [rows, setRows] = React.useState([]);
  const [loading, setLoading] = React.useState(backend);
  const [open, setOpen] = React.useState(null); // semester being edited or "new"
  const [form, setForm] = React.useState({ semester: "", gpa: "", grades: {} });
  const [busy, setBusy] = React.useState(false);

  const load = React.useCallback(async () => {
    if (!backend) { setLoading(false); return; }
    setLoading(true);
    try {
      const data = await window.PfGrades.listByStudent(studentId);
      setRows(data);
    } catch (e) { toast("โหลดเกรดไม่สำเร็จ: " + (e.message||e)); }
    finally { setLoading(false); }
  }, [backend, studentId, toast]);
  React.useEffect(() => { load(); }, [load, refreshKey]);

  const grouped = window.PfGrades ? window.PfGrades.groupBySemester(rows) : {};
  const semesters = Object.keys(grouped).sort();

  const openAdd = () => { setForm({ semester: "", gpa: "", grades: {} }); setOpen("new"); };
  const openEdit = (sem) => {
    const g = grouped[sem] || {};
    const grades = {};
    GRADE_SUBJECTS.forEach(s => { grades[s.key] = g[s.key] != null ? String(g[s.key]) : ""; });
    setForm({ semester: sem, gpa: g.gpa != null ? String(g.gpa) : "", grades });
    setOpen(sem);
  };

  const saveSem = async () => {
    if (!form.semester.trim()) { toast("กรอกเทอม เช่น 1/2568"); return; }
    setBusy(true);
    try {
      const tasks = [];
      if (form.gpa !== "") tasks.push(window.PfGrades.save(studentId, form.semester, "gpa", +form.gpa));
      GRADE_SUBJECTS.forEach(s => {
        const v = form.grades[s.key];
        if (v !== "" && v != null) tasks.push(window.PfGrades.save(studentId, form.semester, s.key, +v));
      });
      await Promise.all(tasks);
      toast("บันทึกเกรดเรียบร้อย");
      setOpen(null);
      await load();
      onChange && onChange();
    } catch (e) { toast("บันทึกไม่สำเร็จ: " + (e.message||e)); }
    finally { setBusy(false); }
  };

  const deleteSem = async () => {
    if (!confirm(`ลบข้อมูลเทอม ${form.semester} ทั้งหมด?`)) return;
    setBusy(true);
    try {
      await window.PfGrades.removeSemester(studentId, form.semester);
      toast("ลบเรียบร้อย");
      setOpen(null);
      await load();
      onChange && onChange();
    } catch (e) { toast("ลบไม่สำเร็จ: " + (e.message||e)); }
    finally { setBusy(false); }
  };

  if (!backend) return null;
  return (
    <div className="card mt-4">
      <div className="row-between" style={{marginBottom:8}}>
        <h3 style={{margin:0}}>📚 เกรดของฉัน</h3>
        <button className="btn btn-primary btn-sm" onClick={openAdd}>+ เพิ่ม/แก้ไขเทอม</button>
      </div>
      {loading ? (
        <div className="muted" style={{padding:14}}>กำลังโหลด…</div>
      ) : semesters.length === 0 ? (
        <div className="muted small" style={{padding:14}}>ยังไม่มีข้อมูลเกรด — กดปุ่ม "+ เพิ่ม/แก้ไขเทอม" เพื่อบันทึก</div>
      ) : (
        <table className="table">
          <thead>
            <tr><th>เทอม</th><th>GPA</th>{GRADE_SUBJECTS.map(s => <th key={s.key} className="small" title={s.label}>{s.short || s.label}</th>)}<th></th></tr>
          </thead>
          <tbody>
            {semesters.map(sem => {
              const g = grouped[sem];
              return (
                <tr key={sem}>
                  <td><b>{sem}</b></td>
                  <td className="mono"><b>{g.gpa != null ? Number(g.gpa).toFixed(2) : "—"}</b></td>
                  {GRADE_SUBJECTS.map(s => (
                    <td key={s.key} className="mono small">{g[s.key] != null ? Number(g[s.key]).toFixed(2) : "—"}</td>
                  ))}
                  <td className="text-right">
                    <button className="btn btn-ghost btn-sm" onClick={()=>openEdit(sem)}>แก้</button>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      )}

      {open && (
        <Modal title={open === "new" ? "เพิ่มเทอมใหม่" : `แก้ไขเทอม ${form.semester}`} onClose={()=>setOpen(null)} width={520}
          footer={<>
            {open !== "new" && <button className="btn btn-ghost" onClick={deleteSem} disabled={busy} style={{marginRight:"auto",color:"#dc2626"}}>ลบเทอมนี้</button>}
            <button className="btn btn-ghost" onClick={()=>setOpen(null)}>ยกเลิก</button>
            <button className="btn btn-primary" onClick={saveSem} disabled={busy}>{busy?"กำลังบันทึก…":"บันทึก"}</button>
          </>}>
          <div className="field">
            <label>ภาคเรียน</label>
            <input className="input" placeholder="เช่น 1/2568" value={form.semester}
              onChange={e=>setForm(f=>({...f, semester:e.target.value}))}
              disabled={open !== "new"}/>
          </div>
          <div className="field">
            <label>เกรดเฉลี่ย (GPA) — 0.00 ถึง 4.00</label>
            <input className="input mono" type="number" min="0" max="4" step="0.01"
              value={form.gpa} onChange={e=>setForm(f=>({...f, gpa:e.target.value}))} placeholder="เช่น 3.75"/>
          </div>
          <div className="divider-h"></div>
          <div className="muted small" style={{marginBottom:6}}>เกรดรายวิชา (เว้นว่างได้)</div>
          {(window.GRADE_SUBJECT_GROUPS || []).map(g => (
            <div key={g.name} style={{marginBottom:12}}>
              <div style={{fontWeight:600, fontSize:13.5, margin:"8px 0 4px"}}>📘 กลุ่มสาระ{g.name}</div>
              <div className="row gap-3" style={{flexWrap:"wrap"}}>
                {g.keys.map(k => {
                  const s = GRADE_SUBJECTS.find(x => x.key === k);
                  if (!s) return null;
                  return (
                    <div key={s.key} className="field" style={{flex:"1 1 30%"}}>
                      <label>{s.label}</label>
                      <input className="input mono" type="number" min="0" max="4" step="0.01"
                        value={form.grades[s.key] || ""}
                        onChange={e=>setForm(f=>({...f, grades:{...f.grades, [s.key]:e.target.value}}))}
                        placeholder="0–4"/>
                    </div>
                  );
                })}
              </div>
            </div>
          ))}
        </Modal>
      )}
    </div>
  );
}

/* ---------- English exams card (IELTS / TOEFL / CUTEP) ---------- */
function StudentEnglishExamsCard({ studentId, toast }) {
  const backend = !!(window.PfEnglishExams && window.PF_SUPABASE_READY);
  const [rows, setRows] = React.useState([]);
  const [loading, setLoading] = React.useState(backend);
  const [open, setOpen] = React.useState(null); // {id?, examType, score, examDate, notes}
  const [busy, setBusy] = React.useState(false);

  const load = React.useCallback(async () => {
    if (!backend) { setLoading(false); return; }
    setLoading(true);
    try { setRows(await window.PfEnglishExams.listByStudent(studentId)); }
    catch (e) { toast("โหลดผลสอบไม่สำเร็จ: " + (e.message||e)); }
    finally { setLoading(false); }
  }, [backend, studentId, toast]);
  React.useEffect(() => { load(); }, [load]);

  const openNew = () => setOpen({ examType: "ielts", score: "", examDate: "", notes: "" });
  const openEdit = (r) => setOpen({
    id: r.id, examType: r.exam_type,
    score: r.score != null ? String(r.score) : "",
    examDate: r.exam_date || "", notes: r.notes || "",
  });

  const save = async () => {
    if (!open.examType) { toast("เลือกประเภทข้อสอบ"); return; }
    if (open.score === "" || open.score == null) { toast("กรอกคะแนน"); return; }
    if (!open.examDate) { toast("เลือกวันสอบ"); return; }
    setBusy(true);
    try {
      await window.PfEnglishExams.save({
        id: open.id, studentId,
        examType: open.examType, score: open.score,
        examDate: open.examDate, notes: open.notes,
      });
      toast("บันทึกผลสอบเรียบร้อย");
      setOpen(null); await load();
    } catch (e) { toast("บันทึกไม่สำเร็จ: " + (e.message||e)); }
    finally { setBusy(false); }
  };

  const remove = async () => {
    if (!confirm("ลบผลสอบนี้?")) return;
    setBusy(true);
    try {
      await window.PfEnglishExams.remove(open.id);
      toast("ลบเรียบร้อย");
      setOpen(null); await load();
    } catch (e) { toast("ลบไม่สำเร็จ: " + (e.message||e)); }
    finally { setBusy(false); }
  };

  const typeMeta = ENGLISH_EXAM_TYPES.find(t => t.key === (open && open.examType));

  if (!backend) return null;
  return (
    <div className="card mt-4">
      <div className="row-between" style={{marginBottom:8}}>
        <h3 style={{margin:0}}>🎓 คะแนนสอบภาษาอังกฤษ</h3>
        <button className="btn btn-primary btn-sm" onClick={openNew}>+ เพิ่มผลสอบ</button>
      </div>
      {loading ? (
        <div className="muted" style={{padding:14}}>กำลังโหลด…</div>
      ) : rows.length === 0 ? (
        <div className="muted small" style={{padding:14}}>ยังไม่มีผลสอบ — กด "+ เพิ่มผลสอบ" เพื่อบันทึก (IELTS / TOEFL / CUTEP)</div>
      ) : (
        <table className="table">
          <thead><tr><th>ประเภท</th><th>คะแนน</th><th>วันสอบ</th><th>หมายเหตุ</th><th></th></tr></thead>
          <tbody>
            {rows.map(r => {
              const t = ENGLISH_EXAM_TYPES.find(x => x.key === r.exam_type);
              return (
                <tr key={r.id}>
                  <td><Pill kind="blue">{t ? t.label : r.exam_type}</Pill></td>
                  <td className="mono"><b>{r.score != null ? Number(r.score) : "—"}</b>{t ? <span className="muted small"> / {t.max}</span> : null}</td>
                  <td className="mono small">{r.exam_date || "—"}</td>
                  <td className="muted small">{r.notes || "—"}</td>
                  <td className="text-right">
                    <button className="btn btn-ghost btn-sm" onClick={()=>openEdit(r)}>แก้</button>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      )}

      {open && (
        <Modal title={open.id ? "แก้ไขผลสอบ" : "เพิ่มผลสอบภาษาอังกฤษ"} onClose={()=>setOpen(null)} width={520}
          footer={<>
            {open.id && <button className="btn btn-ghost" onClick={remove} disabled={busy} style={{marginRight:"auto",color:"#dc2626"}}>ลบ</button>}
            <button className="btn btn-ghost" onClick={()=>setOpen(null)}>ยกเลิก</button>
            <button className="btn btn-primary" onClick={save} disabled={busy}>{busy?"กำลังบันทึก…":"บันทึก"}</button>
          </>}>
          <div className="row gap-4">
            <div className="field" style={{flex:1}}>
              <label>ประเภทข้อสอบ</label>
              <select className="select" value={open.examType} onChange={e=>setOpen(s=>({...s, examType:e.target.value}))}>
                {ENGLISH_EXAM_TYPES.map(t => <option key={t.key} value={t.key}>{t.label}</option>)}
              </select>
            </div>
            <div className="field" style={{flex:1}}>
              <label>วันที่สอบ</label>
              <input className="input" type="date" value={open.examDate} onChange={e=>setOpen(s=>({...s, examDate:e.target.value}))}/>
            </div>
          </div>
          <div className="field">
            <label>คะแนน {typeMeta ? `(${typeMeta.hint})` : ""}</label>
            <input className="input mono" type="number" min="0"
              max={typeMeta ? typeMeta.max : undefined}
              step={typeMeta ? typeMeta.step : "any"}
              value={open.score} onChange={e=>setOpen(s=>({...s, score:e.target.value}))}/>
          </div>
          <div className="field">
            <label>หมายเหตุ (ไม่จำเป็น)</label>
            <textarea className="textarea" rows={2} value={open.notes}
              onChange={e=>setOpen(s=>({...s, notes:e.target.value}))}
              placeholder="เช่น สถานที่สอบ, รหัสรอบสอบ"/>
          </div>
        </Modal>
      )}
    </div>
  );
}

/* ---------- Profile ---------- */
function StudentProfile({ toast, onLogout }) {
  const backend = !!(window.PfUsers && window.PF_SUPABASE_READY && window.pfCurrentUser);
  const [u, setU] = React.useState(currentProfile());
  const [busy, setBusy] = React.useState(false);
  const upd = (k, v) => setU(s => ({ ...s, [k]: v }));

  const save = async () => {
    if (!backend) { toast("บันทึกได้เมื่อเชื่อมฐานข้อมูลแล้ว"); return; }
    if (!u.name.trim()) { toast("ชื่อห้ามว่าง"); return; }
    setBusy(true);
    try {
      await window.PfUsers.update(window.pfCurrentUser.id, {
        name: u.name.trim(),
        student_code: u.studentId.trim() || null,
        grade: u.classroom.trim() || null,
        phone: u.phone.trim() || null,
        advisor_name: u.advisor.trim() || null,
      });
      // อัปเดต pfCurrentUser ในหน่วยความจำให้ตรงกัน (ใช้กับหน้าอื่น)
      Object.assign(window.pfCurrentUser, {
        name: u.name.trim(), student_code: u.studentId.trim() || null,
        grade: u.classroom.trim() || null, phone: u.phone.trim() || null,
        advisor_name: u.advisor.trim() || null,
      });
      toast("บันทึกข้อมูลโปรไฟล์เรียบร้อย");
    } catch (e) { toast("บันทึกไม่สำเร็จ: " + (e.message || e)); }
    finally { setBusy(false); }
  };

  return (
    <div className="page">
      <h2 style={{fontSize:22}}>โปรไฟล์ของฉัน</h2>
      <div className="profile-grid">
        <div className="card profile-card">
          <div className="avatar-lg">👩‍🎓</div>
          <h2>{u.name || "—"}</h2>
          <div className="role">นักเรียนวิชาเอกวิทยาศาสตร์สุขภาพ</div>

          <div className="field mt-5" style={{textAlign:"left"}}>
            <label>ชื่อ-นามสกุล</label>
            <input className="input" value={u.name} onChange={e=>upd("name", e.target.value)} />
          </div>
          <div className="field" style={{textAlign:"left"}}>
            <label>รหัสนักเรียน</label>
            <input className="input mono" value={u.studentId} onChange={e=>upd("studentId", e.target.value)} placeholder="เช่น 65001234"/>
          </div>
          <div className="field" style={{textAlign:"left"}}>
            <label>ชั้น/ห้อง</label>
            <input className="input" value={u.classroom} onChange={e=>upd("classroom", e.target.value)} placeholder="เช่น ม.5/2"/>
          </div>
          <div className="field" style={{textAlign:"left"}}>
            <label>อีเมล <span className="muted small">(แก้ในระบบ Auth ไม่ได้ที่นี่)</span></label>
            <input className="input" value={u.email} disabled style={{background:"var(--bg-soft, #f1f5f9)", cursor:"not-allowed"}}/>
          </div>
          <div className="field" style={{textAlign:"left"}}>
            <label>เบอร์โทรศัพท์</label>
            <input className="input" value={u.phone} onChange={e=>upd("phone", e.target.value)} placeholder="เช่น 081-234-5678"/>
          </div>
          <div className="field" style={{textAlign:"left"}}>
            <label>อาจารย์ที่ปรึกษา</label>
            <input className="input" value={u.advisor} onChange={e=>upd("advisor", e.target.value)} placeholder="ชื่ออาจารย์ที่ปรึกษา"/>
          </div>
          <button className="btn btn-primary btn-block" onClick={save} disabled={busy}>{busy?"กำลังบันทึก…":"บันทึกการเปลี่ยนแปลง"}</button>
          <button className="btn btn-danger btn-block mt-3" onClick={onLogout}>ออกจากระบบ</button>
        </div>

        <div>
          <div className="card">
            <h3>สถิติการใช้งาน</h3>
            <div className="stat-grid">
              <div className="stat stat-blue"><div className="num">—</div><div className="lbl">หลักฐานทั้งหมด</div></div>
              <div className="stat stat-green"><div className="num">—</div><div className="lbl">ผ่านการประเมิน</div></div>
              <div className="stat stat-amber"><div className="num">—</div><div className="lbl">รอการตรวจ</div></div>
              <div className="stat stat-purple"><div className="num">—</div><div className="lbl">คะแนนเฉลี่ย</div></div>
            </div>
          </div>

          <StudentGradesCard studentId={(window.pfCurrentUser||{}).id} toast={toast}/>
          <StudentEnglishExamsCard studentId={(window.pfCurrentUser||{}).id} toast={toast}/>

          <div className="card mt-4">
            <h3>ความก้าวหน้าล่าสุด</h3>
            <div className="muted" style={{padding:"14px 0"}}>เริ่มอัปโหลดหลักฐานเพื่อเห็นพัฒนาการของแต่ละสมรรถนะ</div>
          </div>

          <ChangePasswordCard toast={toast}/>

          <div className="privacy mt-4">
            <div className="h">🔒 ความปลอดภัยข้อมูล</div>
            <div className="mt-2">เว็บไซต์นี้ใช้ข้อมูลเฉพาะเพื่อการเรียนรู้ภายในโรงเรียน โปรดไม่เผยแพร่เลขประจำตัวประชาชนต่อสาธารณะ</div>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ---------- TCAS 1 — เกณฑ์การยื่นแฟ้มสะสมผลงาน ---------- */
function StudentTCAS({ toast }) {
  const reqs = window.TCAS1_REQUIREMENTS || [];
  // จัดกลุ่มตามคณะ
  const byFac = {};
  reqs.forEach(r => { (byFac[r.faculty] = byFac[r.faculty] || []).push(r); });

  const fmt = (v) => v == null ? "ไม่กำหนด" : v.toFixed(2);

  return (
    <div className="page">
      <h2 style={{fontSize:22}}>TCAS รอบ 1 — Portfolio</h2>
      <div className="muted small">เกณฑ์ขั้นต่ำของแต่ละมหาวิทยาลัยสำหรับยื่นแฟ้มสะสมผลงาน (อ้างอิงตัวอย่าง TCAS69)</div>

      <div className="privacy mt-4">
        <div className="h">📌 หมายเหตุ</div>
        <div className="mt-2 small">
          ข้อมูลนี้เป็น<b>ตัวอย่าง</b>เพื่อใช้อ้างอิง — เกณฑ์จริงอาจเปลี่ยนตามประกาศของแต่ละมหาวิทยาลัยและแต่ละปี
          โปรดตรวจสอบกับเว็บไซต์ของมหาวิทยาลัยอีกครั้งก่อนสมัครจริง
        </div>
      </div>

      {Object.entries(byFac).map(([fac, list]) => (
        <div key={fac} className="card mt-4" style={{padding:0, overflow:"hidden"}}>
          <div style={{padding:"14px 18px", background:"var(--bg-soft)", borderBottom:"1px solid var(--line)"}}>
            <h3 style={{margin:0}}>คณะ{fac} <span className="muted small">({list.length} สถาบัน)</span></h3>
          </div>
          <table className="table">
            <thead>
              <tr>
                <th>มหาวิทยาลัย</th>
                <th className="small">IELTS</th>
                <th className="small">GPAX</th>
                <th className="small">ชีววิทยา</th>
                <th className="small">เคมี</th>
                <th className="small">ฟิสิกส์</th>
                <th className="small">คณิต</th>
                <th className="small">อังกฤษ</th>
                <th className="small">หมายเหตุ</th>
              </tr>
            </thead>
            <tbody>
              {list.map(r => {
                const orCol = (a, b) => r.physics_or_math != null
                  ? <span className="muted small">เลือกอย่างหนึ่ง</span>
                  : (a != null ? <b className="mono">{fmt(a)}</b> : <span className="muted">—</span>);
                return (
                  <tr key={r.id}>
                    <td><b>{r.university}</b></td>
                    <td className="mono small">≥ {r.ielts.toFixed(1)}</td>
                    <td className="mono"><b>{fmt(r.gpax)}</b></td>
                    <td className="mono small">{r.science_avg != null ? <span className="muted">เฉลี่ยวิทย์ ≥ {fmt(r.science_avg)}</span> : fmt(r.biology)}</td>
                    <td className="mono small">{r.science_avg != null ? <span className="muted">↑</span> : fmt(r.chemistry)}</td>
                    <td className="mono small">
                      {r.science_avg != null ? <span className="muted">↑</span> :
                       r.physics_or_math != null ? <b>≥ {fmt(r.physics_or_math)}*</b> : fmt(r.physics)}
                    </td>
                    <td className="mono small">
                      {r.physics_or_math != null ? <b>≥ {fmt(r.physics_or_math)}*</b> : fmt(r.math)}
                    </td>
                    <td className="mono small">{fmt(r.english)}</td>
                    <td className="small">{r.note || "—"}</td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      ))}

      <div className="muted small mt-3" style={{textAlign:"center"}}>* "เลือกอย่างหนึ่ง" หมายถึงต้องผ่านเกณฑ์ของฟิสิกส์หรือคณิตอย่างน้อย 1 วิชา</div>
    </div>
  );
}

window.STUDENT_NAV = STUDENT_NAV;
Object.assign(window, {
  StudentHome, StudentPortfolio, StudentUpload, StudentRubrics, StudentActivities, StudentProfile, StudentTCAS,
});