/* teacher.jsx — Teacher/Evaluator role pages */

const TEACHER_NAV = [
  { key: "t-home",    label: "หน้าแรก" },
  { key: "t-assignments", label: "ตั้งหัวข้อ" },
  { key: "t-review",  label: "รายการที่ต้องตรวจ" },
  { key: "t-students",label: "นักเรียนในที่ปรึกษา" },
  { key: "t-rubrics", label: "รูบริกสมรรถนะ" },
  { key: "t-activities", label: "จัดการกิจกรรม" },
  { key: "t-internship", label: "ฝึกงาน" },
  { key: "t-history", label: "ประวัติการประเมิน" },
  { key: "t-announce",label: "ประกาศ/นัดหมาย" },
  { key: "t-profile", label: "โปรไฟล์" },
];

const TEACHER_SELF = {};
const REVIEW_QUEUE = [];
const MY_STUDENTS = [];
const HISTORY = [];
/* ---------- Teacher Home / Dashboard ---------- */
function TeacherHome({ go }) {
  const u = window.pfCurrentUser || {};
  return (
    <div className="page">
      <div className="hero">
        <Avatar emoji="👨‍🏫" size={64} gradient="linear-gradient(135deg,#22d3ee,#3b82f6)"/>
        <div>
          <h1>สวัสดี {u.name || "อาจารย์"}</h1>
          <p>อาจารย์ผู้ประเมิน • PDS_HS Portfolio System</p>
          <a>ตรวจหลักฐานนักเรียน บันทึกผลการประเมินสมรรถนะ</a>
        </div>
      </div>

      <div className="stat-grid mt-5" style={{gridTemplateColumns:"repeat(4,1fr)"}}>
        <div className="stat stat-blue"><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-green"><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 className="card mt-5">
        <div className="row-between"><h2 className="mb-0">รายการรอตรวจ</h2>
          <button className="btn btn-ghost btn-sm" onClick={()=>go("t-review")}>ดูทั้งหมด →</button>
        </div>
        <div className="muted" style={{padding:"30px 0",textAlign:"center"}}>ยังไม่มีหลักฐานที่รอการประเมิน</div>
      </div>
    </div>
  );
}

/* ---------- Assignments (ตั้งหัวข้อให้นักเรียนส่งหลักฐาน) ---------- */
function TeacherAssignments({ toast }) {
  const backend = !!(window.PfAssignments && window.PF_SUPABASE_READY && window.pfCurrentUser);
  const [list, setList] = React.useState([]);
  const [loading, setLoading] = React.useState(backend);
  const [showForm, setShowForm] = React.useState(false);
  const [editId, setEditId] = React.useState(null);
  const [busy, setBusy] = React.useState(false);
  const [detail, setDetail] = React.useState(null);
  const emptyForm = { title:"", description:"", dueDate:"", targetGrade:"", core:[], spec:[], status:"open" };
  const [form, setForm] = React.useState(emptyForm);
  const upd = (k,v) => setForm(f=>({...f,[k]:v}));
  const toggle = (k,v) => setForm(f=>{ const s=new Set(f[k]); s.has(v)?s.delete(v):s.add(v); return {...f,[k]:[...s]}; });

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

  const openNew = () => { setEditId(null); setForm(emptyForm); setShowForm(true); };
  const openEdit = (a) => {
    setEditId(a.id);
    setForm({
      title: a.title, description: a.description||"",
      dueDate: a.due_date||"", targetGrade: a.target_grade||"",
      core: a.core_competencies||[], spec: a.spec_competencies||[],
      status: a.status,
    });
    setShowForm(true);
  };

  const submit = async (e) => {
    e.preventDefault();
    if (!form.title) { toast("กรุณากรอกชื่อหัวข้อ"); return; }
    if (!backend) { toast("ระบบออฟไลน์"); return; }
    setBusy(true);
    try {
      await window.PfAssignments.save({
        id: editId, teacherId: window.pfCurrentUser.id,
        title: form.title, description: form.description,
        dueDate: form.dueDate, targetGrade: form.targetGrade,
        core: form.core, spec: form.spec, status: form.status,
      });
      toast(editId ? "บันทึกการแก้ไขเรียบร้อย" : "สร้างหัวข้อเรียบร้อย");
      setShowForm(false); await load();
    } catch (e2) { toast("บันทึกไม่สำเร็จ: "+(e2.message||e2)); }
    finally { setBusy(false); }
  };

  const remove = async (a) => {
    if (!confirm("ลบหัวข้อ \""+a.title+"\" จริงหรือ?")) return;
    try { await window.PfAssignments.remove(a.id); toast("ลบหัวข้อแล้ว"); await load(); }
    catch (e) { toast("ลบไม่สำเร็จ: "+(e.message||e)); }
  };

  const toggleStatus = async (a) => {
    const next = a.status === "open" ? "closed" : "open";
    try { await window.PfAssignments.setStatus(a.id, next); toast(next==="closed"?"ปิดรับแล้ว":"เปิดรับอีกครั้ง"); await load(); }
    catch (e) { toast("เปลี่ยนสถานะไม่สำเร็จ: "+(e.message||e)); }
  };

  const coreOpts = (window.CORE_COMPETENCIES||[]).map(c=>c.full);
  const specOpts = (window.SPEC_COMPETENCIES||[]).map(c=>c.full);

  return (
    <div className="page">
      <div className="row-between" style={{marginBottom:18}}>
        <div>
          <h2 className="mb-0" style={{fontSize:22}}>ตั้งหัวข้อส่งหลักฐาน</h2>
          <div className="muted small">สร้างหัวข้อเพื่อให้นักเรียนส่งหลักฐานตามที่กำหนด</div>
        </div>
        <button className="btn btn-primary" onClick={openNew}>+ สร้างหัวข้อใหม่</button>
      </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 subs = (a.evidence_items||[]);
            const pending = subs.filter(s=>s.status==="pending").length;
            const approved = subs.filter(s=>s.status==="approved").length;
            const isOpen = a.status === "open";
            const overdue = a.due_date && new Date(a.due_date) < new Date() && isOpen;
            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>
                      <Pill kind={isOpen?"green":"gray"}>{isOpen?"เปิดรับ":"ปิดแล้ว"}</Pill>
                      {overdue && <Pill kind="red">เลยกำหนด</Pill>}
                    </div>
                    {a.description && <p className="muted small mt-2" style={{margin:"6px 0 0"}}>{a.description}</p>}
                    <div className="muted small mt-2">
                      {a.due_date && <span>📅 กำหนดส่ง {new Date(a.due_date).toLocaleDateString("th-TH")} · </span>}
                      {a.target_grade && <span>🎓 {a.target_grade} · </span>}
                      <span>📨 ส่งแล้ว {subs.length} คน</span>
                      {pending > 0 && <span> · <b style={{color:"var(--amber-6)"}}>รอตรวจ {pending}</b></span>}
                      {approved > 0 && <span> · <b style={{color:"var(--green-6)"}}>ผ่าน {approved}</b></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 style={{display:"flex",flexDirection:"column",gap:6}}>
                    {subs.length > 0 && <button className="btn btn-ghost btn-sm" onClick={()=>setDetail(a)}>ดูรายการส่ง</button>}
                    <button className="btn btn-ghost btn-sm" onClick={()=>openEdit(a)}>แก้ไข</button>
                    <button className="btn btn-ghost btn-sm" onClick={()=>toggleStatus(a)}>{isOpen?"ปิดรับ":"เปิดรับ"}</button>
                    <button className="btn btn-ghost btn-sm" style={{color:"var(--red-6)"}} onClick={()=>remove(a)}>ลบ</button>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      )}

      {showForm && (
        <Modal title={editId?"แก้ไขหัวข้อ":"สร้างหัวข้อใหม่"} onClose={()=>setShowForm(false)} width={640}
          footer={<>
            <button className="btn btn-ghost" onClick={()=>setShowForm(false)}>ยกเลิก</button>
            <button className="btn btn-primary" onClick={submit} disabled={busy}>{busy?"กำลังบันทึก…":"บันทึก"}</button>
          </>}>
          <form onSubmit={submit}>
            <div className="field"><label>ชื่อหัวข้อ *</label>
              <input className="input" placeholder="เช่น ส่งรายงานการทดลองครั้งที่ 3" value={form.title} onChange={e=>upd("title",e.target.value)}/></div>
            <div className="field"><label>คำอธิบาย</label>
              <textarea className="textarea" placeholder="รายละเอียดเพิ่มเติม สิ่งที่ต้องส่ง เกณฑ์" value={form.description} onChange={e=>upd("description",e.target.value)}/></div>
            <div className="row gap-3">
              <div className="field" style={{flex:1}}><label>กำหนดส่ง</label>
                <input className="input" type="date" value={form.dueDate} onChange={e=>upd("dueDate",e.target.value)}/></div>
              <div className="field" style={{flex:1}}><label>ส่งถึงชั้น</label>
                <input className="input" placeholder="เช่น ม.5/2 (ว่าง=ทุกคน)" value={form.targetGrade} onChange={e=>upd("targetGrade",e.target.value)}/></div>
            </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>
          </form>
        </Modal>
      )}

      {detail && (
        <Modal title={`รายการส่ง: ${detail.title}`} onClose={()=>setDetail(null)} width={700}
          footer={<button className="btn btn-ghost" onClick={()=>setDetail(null)}>ปิด</button>}>
          <div className="muted small" style={{marginBottom:12}}>
            {detail.due_date && <span>กำหนดส่ง {new Date(detail.due_date).toLocaleDateString("th-TH")} · </span>}
            ส่งแล้ว {(detail.evidence_items||[]).length} คน
          </div>
          {(detail.evidence_items||[]).length === 0 ? (
            <div className="muted" style={{padding:30,textAlign:"center"}}>ยังไม่มีนักเรียนส่ง</div>
          ) : (
            <table className="table">
              <thead><tr><th>นักเรียน</th><th>รหัส</th><th>ชั้น</th><th>วันที่ส่ง</th><th>สถานะ</th></tr></thead>
              <tbody>
                {(detail.evidence_items||[]).map(ev=>(
                  <tr key={ev.id}>
                    <td><b>{ev.student?.name||"—"}</b></td>
                    <td className="mono small">{ev.student?.student_code||"—"}</td>
                    <td>{ev.student?.grade||"—"}</td>
                    <td className="mono small">{ev.created_at ? new Date(ev.created_at).toLocaleDateString("th-TH") : "—"}</td>
                    <td>
                      {ev.status==="approved" ? <Pill kind="green">ผ่าน</Pill>
                       : ev.status==="revise" ? <Pill kind="purple">ปรับปรุง</Pill>
                       : <Pill kind="amber">รอตรวจ</Pill>}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          )}
        </Modal>
      )}
    </div>
  );
}

/* ---------- Review Queue with eval modal ---------- */
function TeacherReview({ toast }) {
  const backend = !!(window.PfEvidence && window.PF_SUPABASE_READY && window.pfCurrentUser);
  const [list, setList] = React.useState([]);
  const [loading, setLoading] = React.useState(backend);
  const [open, setOpen] = React.useState(null);
  const [filter, setFilter] = React.useState("all");
  const [busy, setBusy] = React.useState(false);
  const [eval_, setEval_] = React.useState({ score: 4, status: "approve", comment: "", levels: {} });

  // map DB row → display shape ที่ TeacherReview ใช้
  const mapRow = (r) => ({
    id: r.id,
    dbRow: r,                      // เก็บไว้ใช้ตอนบันทึก
    title: r.title,
    student: r.student?.name || "—",
    studentId: r.student?.student_code || (r.student_id ? r.student_id.slice(0,8) : "—"),
    classroom: r.student?.grade || "—",
    sub: r.created_at ? new Date(r.created_at).toLocaleDateString("th-TH") : "—",
    desc: r.reflection || "",
    comps: [...(r.core_competencies||[]), ...(r.spec_competencies||[])],
    files: [],
    date: r.date || "—",
    driveLinks: (r.evidence_drive_links || []).map(l => parseDriveLink(l.url)),
    urgency: "blue",
    // alreadyEvaluated: (r.evaluations || []).length > 0,
    pending: r.status === "pending",
  });

  const load = React.useCallback(async () => {
    if (!backend) { setList([]); setLoading(false); return; }
    setLoading(true);
    try {
      const rows = await window.PfEvidence.listForReview();
      // RLS กรองให้แล้ว: teacher เห็นเฉพาะที่ถูก assign / admin เห็นทั้งหมด
      // เรากรองเฉพาะที่ยังไม่ approved/revise (= ยังต้องตรวจ)
      setList((rows || []).filter(r => r.status === "pending").map(mapRow));
    } catch (e) { toast("โหลดรายการตรวจไม่สำเร็จ: " + (e.message||e)); }
    finally { setLoading(false); }
  }, [backend, toast]);
  React.useEffect(() => { load(); }, [load]);

  const startReview = (r) => {
    setEval_({ score: 4, status: "approve", comment: "", levels: {} });
    setOpen(r);
  };
  const submitEval = async () => {
    if (!open) return;
    const label = eval_.status === "approve" ? "ผ่าน" : eval_.status === "revise" ? "ต้องปรับปรุง" : "ไม่ผ่าน";
    const levelName = LEVEL_NAMES[Math.round(eval_.score)-1]?.label || "";
    if (!backend) {
      toast(`บันทึกการประเมิน (demo): ${label} — ระดับ ${levelName} (${eval_.score}/5)`);
      setList(l => l.filter(x => x.id !== open.id));
      setOpen(null);
      return;
    }
    setBusy(true);
    try {
      await window.PfEvaluations.save({
        evidenceId: open.id,
        studentId: open.dbRow.student_id,
        evaluatorId: window.pfCurrentUser.id,
        score: eval_.score,
        status: eval_.status,
        comment: eval_.comment,
        subLevels: eval_.levels,
      });
      toast(`บันทึกการประเมิน: ${label} — ${levelName} (${eval_.score}/5)`);
      setOpen(null);
      await load();
    } catch (e) {
      toast("บันทึกไม่สำเร็จ: " + (e.message || e));
    } finally { setBusy(false); }
  };
  const setLevel = (comp, v) => setEval_(e => ({ ...e, levels: { ...e.levels, [comp]: v }}));

  const filtered = list.filter(r => filter === "all" || r.urgency === filter);

  return (
    <div className="page">
      <div className="row-between" style={{marginBottom:18}}>
        <div>
          <h2 className="mb-0" style={{fontSize:22}}>รายการที่ต้องตรวจ</h2>
          <div className="muted small">รายการหลักฐานที่นักเรียนส่งมารอการประเมิน</div>
        </div>
        <div className="filterbar">
          <select className="select" value={filter} onChange={e=>setFilter(e.target.value)}>
            <option value="all">ความสำคัญทั้งหมด</option>
            <option value="red">เร่งด่วน</option>
            <option value="amber">ปานกลาง</option>
            <option value="blue">ปกติ</option>
          </select>
        </div>
      </div>

      {loading ? (
        <div className="card muted" style={{textAlign:"center", padding:40}}>กำลังโหลด…</div>
      ) : filtered.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>
      ) : null}

      <div style={{display:"flex", flexDirection:"column", gap:14}}>
        {filtered.map(r => (
          <div className="item" key={r.id}>
            <Avatar emoji="👩‍🎓" size={48}/>
            <div className="body">
              <div className="row gap-2">
                <h3 style={{margin:0}}>{r.title}</h3>
                <Pill kind={r.urgency==="red"?"red":r.urgency==="amber"?"amber":"blue"}>
                  {r.urgency==="red"?"เร่งด่วน":r.urgency==="amber"?"ปานกลาง":"ปกติ"}
                </Pill>
              </div>
              <div className="muted small mt-2">โดย {r.student} ({r.studentId}) • {r.classroom} • ส่ง {r.sub}</div>
              <p className="muted" style={{margin:"6px 0 4px"}}>{r.desc}</p>
              <div className="tags">
                {r.comps.map((c,i)=> <Pill key={i} kind="blue">{c}</Pill>)}
              </div>
              <div className="status-line">
                <span>📅 {r.date}</span>
                {r.driveLinks && r.driveLinks.filter(Boolean).length > 0 && (
                  <span>📎 {r.driveLinks.filter(Boolean).length} ลิงก์ Drive</span>
                )}
              </div>
            </div>
            <div style={{display:"flex", flexDirection:"column", gap:8}}>
              <button className="btn btn-primary btn-sm" onClick={()=>startReview(r)}>ตรวจประเมิน</button>
              <button className="btn btn-ghost btn-sm">ดูไฟล์</button>
            </div>
          </div>
        ))}
      </div>

      {open && (
        <Modal title={`ประเมิน: ${open.title}`} onClose={()=>setOpen(null)} width={760}
          footer={<>
            <button className="btn btn-ghost" onClick={()=>setOpen(null)}>ยกเลิก</button>
            <button className="btn btn-primary" onClick={submitEval} disabled={busy}>{busy?"กำลังบันทึก…":"บันทึกการประเมิน"}</button>
          </>}>
          <div className="muted small">โดย {open.student} ({open.studentId}) • {open.classroom}</div>
          <p className="mt-2">{open.desc}</p>

          {open.driveLinks && open.driveLinks.filter(Boolean).length > 0 && (
            <>
              <div className="divider-h"></div>
              <div className="small muted" style={{marginBottom:10}}>📎 หลักฐานที่นักเรียนแนบ ({open.driveLinks.filter(Boolean).length})</div>
              <DrivePreviewGrid items={open.driveLinks.filter(Boolean)}/>
            </>
          )}

          <div className="divider-h"></div>
          <div style={{fontWeight:600, marginBottom:8}}>ระดับสมรรถนะที่ปรากฏ (1–5)</div>
          <div className="muted small" style={{marginBottom:10}}>
            {LEVEL_NAMES.map(l => <span key={l.n} style={{marginRight:12}}><b style={{color:l.color}}>{l.short}</b> {l.label}</span>)}
          </div>
          {open.comps.map((c) => (
            <div key={c} className="row-between" style={{padding:"6px 0"}}>
              <span>{c}</span>
              <div className="row gap-2">
                {[1,2,3,4,5].map(v => (
                  <button key={v}
                    onClick={()=>setLevel(c, v)}
                    className="btn btn-sm"
                    title={LEVEL_NAMES[v-1].label}
                    style={{
                      background: eval_.levels[c] === v ? LEVEL_NAMES[v-1].color : "#fff",
                      color: eval_.levels[c] === v ? "#fff" : "var(--ink)",
                      border:"1px solid var(--line)", padding:"4px 12px", minWidth:36
                    }}>{v}</button>
                ))}
              </div>
            </div>
          ))}

          <div className="divider-h"></div>
          <div className="field">
            <label>คะแนนรวม (1–5) — <b style={{color: LEVEL_NAMES[Math.round(eval_.score)-1].color}}>{LEVEL_NAMES[Math.round(eval_.score)-1].label}</b></label>
            <div className="row gap-3" style={{alignItems:"center"}}>
              <input type="range" min="1" max="5" step="0.1"
                value={eval_.score}
                onChange={e=>setEval_(s=>({...s, score: +e.target.value}))}
                style={{flex:1}}/>
              <div className="mono" style={{minWidth:48, textAlign:"right", fontWeight:600}}>{eval_.score.toFixed(1)}</div>
            </div>
          </div>

          <div className="field">
            <label>ผลการประเมิน</label>
            <div className="row gap-2">
              {[
                {k:"approve", l:"✅ ผ่าน", kind:"btn-teal"},
                {k:"revise",  l:"🔁 ต้องปรับปรุง", kind:"btn-purple"},
                {k:"reject",  l:"✖ ไม่ผ่าน", kind:"btn-danger"},
              ].map(o => (
                <button key={o.k}
                  className={`btn ${eval_.status===o.k ? o.kind : "btn-ghost"}`}
                  onClick={()=>setEval_(s=>({...s, status:o.k}))}>{o.l}</button>
              ))}
            </div>
          </div>

          <div className="field">
            <label>ความเห็น / ข้อเสนอแนะ</label>
            <textarea className="textarea" placeholder="เขียนข้อเสนอแนะที่ช่วยให้นักเรียนพัฒนาต่อได้ เช่น จุดแข็ง สิ่งที่ควรปรับปรุง และตัวอย่างที่ดี"
              value={eval_.comment} onChange={e=>setEval_(s=>({...s, comment:e.target.value}))}/>
          </div>
        </Modal>
      )}
    </div>
  );
}

/* ---------- My Students ---------- */
function TeacherStudents({ toast }) {
  const backend = !!(window.PfUsers && window.PF_SUPABASE_READY);
  const [q, setQ] = React.useState("");
  const [students, setStudents] = React.useState([]);
  const [loading, setLoading] = React.useState(backend);
  const [openOf, setOpenOf] = React.useState(null);
  const [levels, setLevels] = React.useState({});
  const [loadingLevels, setLoadingLevels] = React.useState(false);

  React.useEffect(() => {
    if (!backend) return;
    (async () => {
      try {
        const all = await window.PfUsers.list();
        setStudents((all || []).filter(u => u.role === "student"));
      } catch (e) { toast("โหลดรายชื่อนักเรียนไม่สำเร็จ: " + (e.message||e)); }
      finally { setLoading(false); }
    })();
  }, [backend, toast]);

  const filtered = students.filter(s =>
    !q || (s.name||"").includes(q) || (s.student_code||"").includes(q) || (s.email||"").toLowerCase().includes(q.toLowerCase())
  );

  const [grades, setGrades] = React.useState({ rows: [], avg: {} });
  const [exams, setExams] = React.useState([]);

  const openProfile = async (s) => {
    setOpenOf(s); setLevels({}); setLoadingLevels(true);
    setGrades({ rows: [], avg: {} }); setExams([]);
    try {
      const [l, gradeRows, examRows] = await Promise.all([
        window.computeMyLevels(s.id),
        window.PfGrades ? window.PfGrades.listByStudent(s.id) : Promise.resolve([]),
        window.PfEnglishExams ? window.PfEnglishExams.listByStudent(s.id) : Promise.resolve([]),
      ]);
      setLevels(l || {});
      setGrades({ rows: gradeRows, avg: window.PfGrades ? window.PfGrades.averagesBySubject(gradeRows) : {} });
      setExams(examRows || []);
    } catch (e) { /* ignore */ }
    finally { setLoadingLevels(false); }
  };

  const radarLabels = [
    ...CORE_COMPETENCIES.map(c => c.short),
    ...SPEC_COMPETENCIES.map(c => c.short),
  ];
  const radarValues = openOf ? [
    ...CORE_COMPETENCIES.map(c => levels[c.key] || 0),
    ...SPEC_COMPETENCIES.map(c => levels[c.key] || 0),
  ] : [];
  const evaluatedCount = openOf ? Object.values(levels).filter(v => v > 0).length : 0;

  return (
    <div className="page">
      <div className="row-between" style={{marginBottom:18}}>
        <div>
          <h2 className="mb-0" style={{fontSize:22}}>นักเรียนในระบบ</h2>
          <div className="muted small">ดูภาพรวมสมรรถนะของนักเรียนแต่ละคน</div>
        </div>
        <div className="filterbar">
          <input className="input" placeholder="ค้นหาด้วยชื่อ/รหัส/อีเมล" value={q} onChange={e=>setQ(e.target.value)}/>
        </div>
      </div>

      <div className="card" style={{padding:0, overflow:"hidden"}}>
        <table className="table">
          <thead>
            <tr>
              <th style={{width:60}}></th>
              <th>นักเรียน</th>
              <th>รหัส</th>
              <th>ชั้น</th>
              <th>อีเมล</th>
              <th className="text-right">การจัดการ</th>
            </tr>
          </thead>
          <tbody>
            {loading ? (
              <tr><td colSpan={6} className="muted" style={{padding:20,textAlign:"center"}}>กำลังโหลด…</td></tr>
            ) : filtered.length === 0 ? (
              <tr><td colSpan={6} className="muted" style={{padding:30,textAlign:"center"}}>ไม่พบนักเรียน</td></tr>
            ) : filtered.map(s => (
              <tr key={s.id}>
                <td><Avatar emoji="👤" size={32}/></td>
                <td><b>{s.name}</b></td>
                <td className="mono small">{s.student_code || "—"}</td>
                <td>{s.grade || "—"}</td>
                <td className="muted small">{s.email}</td>
                <td className="text-right">
                  <button className="btn btn-ghost btn-sm" onClick={()=>openProfile(s)}>ดูภาพรวมสมรรถนะ</button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {openOf && (
        <Modal title={`ภาพรวมสมรรถนะ: ${openOf.name}`} onClose={()=>setOpenOf(null)} width={780}
          footer={<button className="btn btn-ghost" onClick={()=>setOpenOf(null)}>ปิด</button>}>
          <div className="muted small">
            {openOf.email}{openOf.student_code ? " • รหัส " + openOf.student_code : ""}{openOf.grade ? " • ชั้น " + openOf.grade : ""}
          </div>
          <div className="divider-h"></div>
          {loadingLevels ? (
            <div className="muted" style={{padding:30,textAlign:"center"}}>กำลังคำนวณ…</div>
          ) : evaluatedCount === 0 ? (
            <div className="muted" style={{padding:30,textAlign:"center"}}>นักเรียนคนนี้ยังไม่มีหลักฐานที่ได้รับการประเมิน</div>
          ) : (
          <div className="two-col">
            <div>
              <h3 style={{marginTop:0}}>ระดับแต่ละสมรรถนะ</h3>
              <div className="muted small" style={{marginBottom:6}}>สมรรถนะหลัก</div>
              {CORE_COMPETENCIES.map(c => {
                const lvl = levels[c.key] || 0;
                return (
                  <div key={c.key} className="comp-row">
                    <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-3" style={{marginBottom:6}}>สมรรถนะเฉพาะ</div>
              {SPEC_COMPETENCIES.map(c => {
                const lvl = levels[c.key] || 0;
                return (
                  <div key={c.key} className="comp-row">
                    <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>
            <div>
              <h3 style={{marginTop:0}}>ภาพรวม</h3>
              <RadarChart labels={radarLabels} values={radarValues} max={5} size={340}/>
            </div>
          </div>
          )}

          {window.PfGrades && (
            <>
              <div className="divider-h"></div>
              <h3>📚 ผลการเรียน</h3>
              {grades.rows.length === 0 ? (
                <div className="muted small" style={{padding:14}}>ยังไม่มีข้อมูลเกรด</div>
              ) : (
                <>
                  <div className="stat-grid" style={{gridTemplateColumns:"repeat(auto-fill,minmax(110px,1fr))", marginBottom:14}}>
                    <div className="stat stat-blue">
                      <div className="num">{grades.avg.gpa != null ? grades.avg.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:16}}>{grades.avg[s.key] != null ? grades.avg[s.key].toFixed(2) : "—"}</div>
                        <div className="lbl" style={{fontSize:11}}>{s.short || s.label}</div>
                      </div>
                    ))}
                  </div>
                  {(() => {
                    const grouped = window.PfGrades.groupBySemester(grades.rows);
                    const sems = Object.keys(grouped).sort();
                    return (
                      <table className="table">
                        <thead>
                          <tr><th>เทอม</th><th>GPA</th>{(window.GRADE_SUBJECTS||[]).map(s => <th key={s.key} className="small" title={s.label}>{s.short || s.label}</th>)}</tr>
                        </thead>
                        <tbody>
                          {sems.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>
                                {(window.GRADE_SUBJECTS||[]).map(s => (
                                  <td key={s.key} className="mono small">{g[s.key] != null ? Number(g[s.key]).toFixed(2) : "—"}</td>
                                ))}
                              </tr>
                            );
                          })}
                        </tbody>
                      </table>
                    );
                  })()}
                </>
              )}
            </>
          )}

          {window.PfEnglishExams && (
            <>
              <div className="divider-h"></div>
              <h3>🎓 คะแนนสอบภาษาอังกฤษ</h3>
              {exams.length === 0 ? (
                <div className="muted small" style={{padding:14}}>ยังไม่มีผลสอบ</div>
              ) : (
                <table className="table">
                  <thead><tr><th>ประเภท</th><th>คะแนน</th><th>วันสอบ</th><th>หมายเหตุ</th></tr></thead>
                  <tbody>
                    {exams.map(e => {
                      const t = (window.ENGLISH_EXAM_TYPES||[]).find(x => x.key === e.exam_type);
                      return (
                        <tr key={e.id}>
                          <td><Pill kind="blue">{t ? t.label : e.exam_type}</Pill></td>
                          <td className="mono"><b>{e.score != null ? Number(e.score) : "—"}</b>{t ? <span className="muted small"> / {t.max}</span> : null}</td>
                          <td className="mono small">{e.exam_date || "—"}</td>
                          <td className="muted small">{e.notes || "—"}</td>
                        </tr>
                      );
                    })}
                  </tbody>
                </table>
              )}
            </>
          )}
        </Modal>
      )}
    </div>
  );
}

/* ---------- History ---------- */
function TeacherHistory() {
  return (
    <div className="page">
      <h2 style={{fontSize:22}}>ประวัติการประเมิน</h2>
      <div className="card" style={{padding:0, overflow:"hidden"}}>
        <table className="table">
          <thead><tr><th>วันที่</th><th>นักเรียน</th><th>ชิ้นงาน</th><th>คะแนน</th><th>สถานะ</th></tr></thead>
          <tbody>
            {HISTORY.map(h => (
              <tr key={h.id}>
                <td>{h.date}</td>
                <td>{h.student}</td>
                <td>{h.title}</td>
                <td className="mono">{h.score.toFixed(1)}/5</td>
                <td>
                  {h.status === "ผ่าน" ? <Pill kind="green">✅ ผ่าน</Pill> :
                   h.status === "ต้องปรับปรุง" ? <Pill kind="purple">🔁 ต้องปรับปรุง</Pill> :
                   <Pill kind="red">✖ ไม่ผ่าน</Pill>}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

/* ---------- Announcements ---------- */
function TeacherAnnounce({ toast }) {
  const [posts, setPosts] = React.useState([]);
  const [form, setForm] = React.useState({ title:"", body:"", to:"ม.5/2" });
  const post = (e) => {
    e.preventDefault();
    if (!form.title || !form.body) { toast("กรอกหัวข้อและรายละเอียด"); return; }
    setPosts(p => [{ id:"n"+(p.length+10), ...form, date:"เพิ่งโพสต์" }, ...p]);
    setForm({ title:"", body:"", to:"ม.5/2" });
    toast("เผยแพร่ประกาศเรียบร้อย");
  };
  return (
    <div className="page">
      <h2 style={{fontSize:22}}>ประกาศและนัดหมาย</h2>
      <div className="card">
        <h3>เขียนประกาศใหม่</h3>
        <form onSubmit={post}>
          <div className="field"><label>หัวข้อ</label>
            <input className="input" value={form.title} onChange={e=>setForm(f=>({...f,title:e.target.value}))} placeholder="เช่น แจ้งกำหนดส่งหลักฐาน"/></div>
          <div className="field"><label>ส่งถึง</label>
            <select className="select" value={form.to} onChange={e=>setForm(f=>({...f,to:e.target.value}))}>
              <option>ม.5/2</option><option>ม.6/1</option><option>ทุกห้องในที่ปรึกษา</option>
            </select></div>
          <div className="field"><label>รายละเอียด</label>
            <textarea className="textarea" value={form.body} onChange={e=>setForm(f=>({...f,body:e.target.value}))} placeholder="เนื้อหาประกาศ"/></div>
          <button className="btn btn-primary">เผยแพร่ประกาศ</button>
        </form>
      </div>

      <h3 className="mt-6">ประกาศล่าสุด</h3>
      <div style={{display:"flex", flexDirection:"column", gap:12}}>
        {posts.map(p => (
          <div className="card card-tight" key={p.id} style={{padding:16}}>
            <div className="row-between">
              <div style={{fontWeight:600}}>{p.title}</div>
              <Pill kind="gray">{p.to}</Pill>
            </div>
            <div className="muted small mt-2">{p.body}</div>
            <div className="muted small mt-2">📅 {p.date}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ---------- Teacher Profile ---------- */
function TeacherProfile({ toast, onLogout }) {
  const cur = window.pfCurrentUser || {};
  const [u, setU] = React.useState({
    staffId: cur.id || "", name: cur.name || "", dept: cur.dept || "",
    email: cur.email || "", phone: "", classes: "",
  });
  const upd = (k, v) => setU(s => ({ ...s, [k]: v }));
  return (
    <div className="page">
      <h2 style={{fontSize:22}}>โปรไฟล์ของฉัน</h2>
      <div className="profile-grid">
        <div className="card profile-card">
          <div className="avatar-lg" style={{background:"linear-gradient(135deg,#22d3ee,#3b82f6)"}}>👨‍🏫</div>
          <h2>{u.name}</h2>
          <div className="role">อาจารย์ผู้ประเมิน · {u.dept}</div>

          <div className="field mt-5" style={{textAlign:"left"}}><label>รหัสบุคลากร</label><input className="input" value={u.staffId} onChange={e=>upd("staffId", e.target.value)}/></div>
          <div className="field" style={{textAlign:"left"}}><label>กลุ่มสาระ</label><input className="input" value={u.dept} onChange={e=>upd("dept", e.target.value)}/></div>
          <div className="field" style={{textAlign:"left"}}><label>อีเมล</label><input className="input" value={u.email} onChange={e=>upd("email", e.target.value)}/></div>
          <div className="field" style={{textAlign:"left"}}><label>เบอร์โทรศัพท์</label><input className="input" value={u.phone} onChange={e=>upd("phone", e.target.value)}/></div>
          <div className="field" style={{textAlign:"left"}}><label>ห้องที่ปรึกษา</label><input className="input" value={u.classes} onChange={e=>upd("classes", e.target.value)}/></div>
          <button className="btn btn-primary btn-block" onClick={()=>toast("บันทึกข้อมูลเรียบร้อย")}>บันทึกการเปลี่ยนแปลง</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-amber"><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-purple"><div className="num">—</div><div className="lbl">คะแนนเฉลี่ยที่ให้</div></div>
            </div>
          </div>
          <div className="card mt-4">
            <h3>การตั้งค่าการประเมิน</h3>
            <div className="checkbox-row"><input type="checkbox" defaultChecked/><span>แจ้งเตือนเมื่อมีหลักฐานใหม่</span></div>
            <div className="checkbox-row"><input type="checkbox" defaultChecked/><span>สรุปรายสัปดาห์ทางอีเมล</span></div>
            <div className="checkbox-row"><input type="checkbox"/><span>อนุญาตให้นักเรียนนัดออนไลน์</span></div>
          </div>
          <ChangePasswordCard toast={toast}/>
        </div>
      </div>
    </div>
  );
}

window.TEACHER_NAV = TEACHER_NAV;
Object.assign(window, {
  TeacherHome, TeacherAssignments, TeacherReview, TeacherStudents, TeacherHistory, TeacherAnnounce, TeacherProfile,
});