/* ============================================================
   AdminView.jsx — มุมผู้บริหาร / ฝ่ายวิชาการ: ภาพรวมทั้งหมด
   ============================================================ */

function Stat({k, v, unit, tone, icon}){
  return (
    <div className={`stat s-${tone}`}>
      <div className="k"><Icon name={icon} size={15}/>{k}</div>
      <div className="v num">{v}{unit && <small> {unit}</small>}</div>
    </div>
  );
}

function AdminView({assignments, schedules, onEditAssign, onDeleteAssign}){
  const [filter, setFilter] = React.useState('all');
  const [editing, setEditing] = React.useState(null);
  const counts = {
    all:assignments.length,
    pending:assignments.filter(a=>a.status==='pending').length,
    acknowledged:assignments.filter(a=>a.status==='acknowledged').length,
    rejected:assignments.filter(a=>a.status==='rejected').length,
  };
  const teachersOnLeave = new Set(assignments.map(a=>a.leaveTeacherId)).size;
  const rows = (filter==='all'?assignments:assignments.filter(a=>a.status===filter))
    .slice().sort((a,b)=> (a.date||'').localeCompare(b.date||'') || a.period-b.period);

  return (
    <div>
      <div style={{marginBottom:18}}>
        <h1 style={{fontSize:22,color:'var(--brand-900)'}}>ภาพรวมการจัดสอนแทน</h1>
        <p style={{margin:'4px 0 0',color:'var(--ink-2)',fontSize:14}}>ฝ่ายบริหาร / งานวิชาการ — ติดตามสถานะการเปลี่ยนคาบสอนทั้งหมดของโรงเรียน</p>
      </div>

      <div className="stats">
        <Stat k="คำขอทั้งหมด" v={counts.all} unit="คาบ" tone="blue" icon="layers"/>
        <Stat k="รอครูสอนแทนรับทราบ" v={counts.pending} unit="คาบ" tone="amber" icon="hourglass"/>
        <Stat k="รับทราบแล้ว" v={counts.acknowledged} unit="คาบ" tone="green" icon="checkCircle"/>
        <Stat k="ถูกปฏิเสธ — ต้องจัดใหม่" v={counts.rejected} unit="คาบ" tone="red" icon="xCircle"/>
      </div>

      <div className="filterbar">
        <Icon name="filter" size={16} style={{color:'var(--ink-3)'}}/>
        <div className="seg">
          {[['all','ทั้งหมด'],['pending','รอรับทราบ'],['acknowledged','รับทราบแล้ว'],['rejected','ปฏิเสธ']].map(([k,l])=>(
            <button key={k} className={filter===k?'on':''} onClick={()=>setFilter(k)}>{l}{k!=='all'?` (${counts[k]})`:''}</button>
          ))}
        </div>
        <span className="grow"/>
        <span className="tiny">ครูที่มีการลา {teachersOnLeave} ท่าน</span>
      </div>

      <div className="scroll-x-hint">← เลื่อนตารางแนวนอนเพื่อดูทุกคอลัมน์ →</div>
      <div className="tbl-wrap">
        <table className="tbl">
          <thead>
            <tr>
              <th>ครูที่ลา</th>
              <th>เหตุผล</th>
              <th>วันที่ลา</th>
              <th>คาบที่</th>
              <th>รหัสวิชา</th>
              <th>วิชา</th>
              <th>ชั้น</th>
              <th>ครูที่สอนแทน</th>
              <th>วันที่กลับมาชดเชย</th>
              <th>คาบชดเชย</th>
              <th>สถานะ</th>
              <th style={{textAlign:'center'}}>จัดการ</th>
            </tr>
          </thead>
          <tbody>
            {rows.length===0 && (
              <tr><td colSpan={12}><Empty icon="inbox" title="ไม่มีรายการในหมวดนี้"/></td></tr>
            )}
            {rows.map(a=>{
              const lt = teacherById(a.leaveTeacherId);
              const sub = teacherById(a.substituteId);
              return (
                <tr key={a.id}>
                  <td>
                    <div className="flex ac gap8">
                      <Avatar t={lt} size="sm"/>
                      <span style={{fontWeight:500,whiteSpace:'nowrap'}}>{fullTitle(lt)}</span>
                    </div>
                  </td>
                  <td><ReasonTag reason={a.reason}/></td>
                  <td style={{whiteSpace:'nowrap'}}>{formatThaiDate(a.date)}</td>
                  <td className="num" style={{textAlign:'center',fontWeight:600}}>{a.period}</td>
                  <td className="tc-code">{a.code}</td>
                  <td style={{whiteSpace:'nowrap'}}>{a.subject}</td>
                  <td className="tc-cls">{a.className}</td>
                  <td style={{whiteSpace:'nowrap'}}>
                    {sub ? <div className="flex ac gap8"><Avatar t={sub} size="sm"/><span style={{fontWeight:500}}>{fullTitle(sub)}</span></div> : <span className="muted">—</span>}
                  </td>
                  <td style={{whiteSpace:'nowrap'}}>{formatThaiDate(a.makeupDate)}</td>
                  <td className="num" style={{textAlign:'center'}}>{a.makeupPeriod}</td>
                  <td><StatusBadge status={a.status}/></td>
                  <td>
                    <div className="flex ac gap6" style={{justifyContent:'center'}}>
                      <button className="icon-btn" title="แก้ไขรายการ" onClick={()=>setEditing(a)}><Icon name="edit" size={15}/></button>
                      <button className="icon-btn danger" title="ลบรายการ" onClick={()=>{ if(confirm('ลบรายการการลานี้ออกจากประวัติ?')) onDeleteAssign(a.id); }}><Icon name="trash" size={15}/></button>
                    </div>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>

      <div className="note-box mt16">
        <Icon name="info" size={18} style={{flex:'none'}}/>
        <div>ระบบบันทึกคาบที่ครูแต่ละท่านต้องกลับมาสอนชดเชยไว้ในคอลัมน์ “วันที่กลับมาชดเชย” และ “คาบชดเชย” เพื่อให้งานวิชาการตรวจสอบการสอนชดเชยได้ครบถ้วน · ผู้ดูแลระบบสามารถกด <b>แก้ไข/ลบ</b> รายการเพื่อปรับปรุงประวัติการลาได้</div>
      </div>
      {editing && <EditLeaveModal a={editing} schedules={schedules} onSave={(patch)=>{onEditAssign(editing.id,patch);setEditing(null);}} onClose={()=>setEditing(null)}/>}
    </div>
  );
}

/* ---------- แก้ไขประวัติการลา (เฉพาะ admin) ---------- */
function EditLeaveModal({a, schedules, onSave, onClose}){
  const lt = teacherById(a.leaveTeacherId);
  const [reason, setReason] = React.useState(a.reason);
  const [date, setDate] = React.useState(a.date);
  const [substituteId, setSubstituteId] = React.useState(a.substituteId||'');
  const [makeupDate, setMakeupDate] = React.useState(a.makeupDate||'');
  const [makeupPeriod, setMakeupPeriod] = React.useState(a.makeupPeriod||'');
  const [status, setStatus] = React.useState(a.status);

  // แนะนำคาบชดเชยจากตารางครูสอนแทนในชั้นนี้
  const subSched = substituteId ? (schedules[substituteId] || (teacherById(substituteId)||{}).schedule) : null;
  const slots = subSched ? slotsTeachingClass(subSched, a.className) : [];

  const save = ()=>{
    onSave({reason, date, substituteId, makeupDate, makeupPeriod:+makeupPeriod, status});
  };
  return (
    <div className="modal-bg" onClick={onClose}>
      <div className="modal" onClick={e=>e.stopPropagation()}>
        <div className="modal-hd">
          <h3>แก้ไขประวัติการลา</h3>
          <div className="tiny" style={{marginTop:3}}>{fullTitle(lt)} · {a.subject} ({a.code}) · ชั้น {a.className} · คาบ {a.period}</div>
        </div>
        <div className="modal-bd">
          <div className="field"><label>เหตุผลการลา</label>
            <select className="sel" value={reason} onChange={e=>setReason(e.target.value)}>
              {REASONS.map(r=><option key={r.id} value={r.id}>{r.label}</option>)}
            </select></div>
          <div className="field"><label>วันที่ลา</label>
            <input type="date" className="inp" value={date} onChange={e=>setDate(e.target.value)}/>
            <div className="hint">{formatThaiDate(date,true)}</div></div>
          <div className="field"><label>ครูที่สอนแทน</label>
            <select className="sel" value={substituteId} onChange={e=>setSubstituteId(e.target.value)}>
              <option value="">— ไม่ระบุ —</option>
              {TEACHERS.map(t=><option key={t.id} value={t.id}>{formalName(t)}{teachesClass(schedules[t.id]||t.schedule, a.className)?` · เคยสอน ${a.className}`:''}</option>)}
            </select></div>
          <div style={{display:'grid',gridTemplateColumns:'1.3fr .9fr',gap:12}}>
            <div className="field mb0"><label>วันที่กลับมาชดเชย</label>
              <input type="date" className="inp" value={makeupDate} onChange={e=>setMakeupDate(e.target.value)}/></div>
            <div className="field mb0"><label>คาบชดเชย</label>
              <select className="sel" value={makeupPeriod} onChange={e=>setMakeupPeriod(e.target.value)}>
                <option value="">—</option>
                {PERIODS.map(p=><option key={p.p} value={p.p}>คาบ {p.p}</option>)}
              </select></div>
          </div>
          {slots.length>0 && (
            <div className="note-box" style={{marginTop:11,fontSize:12.5}}>
              <Icon name="info" size={16} style={{flex:'none'}}/>
              <div>คาบที่ครูสอนแทนสอนชั้น {a.className}:&nbsp;
                {slots.map((s,i)=>(
                  <button key={i} className="mk-inline" onClick={()=>{setMakeupDate(nextDateForWeekday(s.day,date));setMakeupPeriod(s.period);}}>{s.day} คาบ {s.period}</button>
                ))}
              </div>
            </div>
          )}
          <div className="field" style={{marginTop:14,marginBottom:0}}><label>สถานะ</label>
            <div className="seg seg-full">
              {[['pending','รอรับทราบ'],['acknowledged','รับทราบแล้ว'],['rejected','ปฏิเสธ']].map(([k,l])=>(
                <button key={k} className={status===k?'on':''} onClick={()=>setStatus(k)}>{l}</button>
              ))}
            </div></div>
        </div>
        <div className="modal-ft">
          <Btn variant="ghost" onClick={onClose}>ยกเลิก</Btn>
          <Btn variant="primary" icon="check" onClick={save}>บันทึกการแก้ไข</Btn>
        </div>
      </div>
    </div>
  );
}
window.EditLeaveModal = EditLeaveModal;

window.AdminView = AdminView;
window.Stat = Stat;

/* ---------- จัดการผู้ใช้ (เฉพาะ admin) ---------- */
function AddUserModal({nextUser, onSave, onClose}){
  const [pre, setPre] = React.useState('นางสาว');
  const [name, setName] = React.useState('');
  const [primary, setPrimary] = React.useState(SUBJECT_GROUPS[0]);
  const [err, setErr] = React.useState('');
  const save = ()=>{
    if(!name.trim()){ setErr('กรุณากรอกชื่อ–สกุล'); return; }
    onSave({pre, name:name.trim(), primary});
  };
  return (
    <div className="modal-bg" onClick={onClose}>
      <div className="modal" onClick={e=>e.stopPropagation()}>
        <div className="modal-hd"><h3>เพิ่มผู้ใช้ / ครูใหม่</h3><div className="tiny" style={{marginTop:3}}>เฉพาะผู้ดูแลระบบเท่านั้น</div></div>
        <div className="modal-bd">
          <div style={{display:'grid',gridTemplateColumns:'auto 1fr',gap:12}}>
            <div className="field mb0" style={{width:120}}><label>คำนำหน้า</label>
              <select className="sel" value={pre} onChange={e=>setPre(e.target.value)}>
                {['นางสาว','นาง','นาย','ว่าที่ร้อยตรี'].map(p=><option key={p}>{p}</option>)}
              </select></div>
            <div className="field mb0"><label>ชื่อ – สกุล</label>
              <input className="inp" value={name} onChange={e=>{setName(e.target.value);setErr('');}} placeholder="เช่น สมหญิง ตั้งใจสอน" autoFocus/></div>
          </div>
          <div className="field" style={{marginTop:14,marginBottom:14}}><label>กลุ่มสาระ/วิชาหลัก</label>
            <select className="sel" value={primary} onChange={e=>setPrimary(e.target.value)}>{SUBJECT_GROUPS.map(s=><option key={s}>{s}</option>)}</select></div>
          <div className="usr-new-note">
            <Icon name="info" size={18} style={{flex:'none'}}/>
            <div>ระบบจะกำหนดชื่อผู้ใช้ให้อัตโนมัติ: <span className="num">{nextUser}</span> · รหัสผ่านเริ่มต้น <span className="num">1234</span><br/>ครูสามารถเข้าไปเพิ่มตารางสอนและเปลี่ยนรหัสผ่านได้เองภายหลัง</div>
          </div>
          {err && <div className="login-err mt12" style={{marginBottom:0}}><Icon name="xCircle" size={16}/>{err}</div>}
        </div>
        <div className="modal-ft">
          <Btn variant="ghost" onClick={onClose}>ยกเลิก</Btn>
          <Btn variant="primary" icon="plus" onClick={save}>เพิ่มผู้ใช้</Btn>
        </div>
      </div>
    </div>
  );
}

function EditUserModal({teacher, username, onSave, onResetPassword, onClose}){
  const [pre, setPre] = React.useState(teacher.pre);
  const [name, setName] = React.useState(teacher.name);
  const [primary, setPrimary] = React.useState(teacher.primary);
  const [resetMode, setResetMode] = React.useState(false);
  const [newPass, setNewPass] = React.useState('');
  const [err, setErr] = React.useState('');
  const [msg, setMsg] = React.useState('');

  const preList = ['นางสาว','นาง','นาย','ว่าที่ร้อยตรี','ว่าที่ร้อยตรีหญิง'];
  const save = ()=>{
    if(!name.trim()){ setErr('กรุณากรอกชื่อ–สกุล'); return; }
    onSave(teacher.id, {pre, name:name.trim(), primary});
  };
  const doReset = (toDefault)=>{
    const p = toDefault ? '1234' : newPass;
    if(!toDefault && p.length<4){ setErr('รหัสผ่านใหม่ต้องยาวอย่างน้อย 4 ตัว'); return; }
    onResetPassword(teacher.id, p);
    setMsg(`รีเซ็ตรหัสผ่านเป็น “${p}” แล้ว · แจ้งครูให้เปลี่ยนรหัสภายหลัง`);
    setResetMode(false); setNewPass(''); setErr('');
  };

  return (
    <div className="modal-bg" onClick={onClose}>
      <div className="modal" onClick={e=>e.stopPropagation()}>
        <div className="modal-hd">
          <h3>แก้ไขข้อมูลครู</h3>
          <div className="tiny" style={{marginTop:3}}>ชื่อผู้ใช้: <span className="num" style={{color:'var(--brand-700)',fontWeight:600}}>{username}</span> (ระบบกำหนด แก้ไขไม่ได้)</div>
        </div>
        <div className="modal-bd">
          <div style={{display:'grid',gridTemplateColumns:'auto 1fr',gap:12}}>
            <div className="field mb0" style={{width:130}}><label>คำนำหน้า</label>
              <select className="sel" value={pre} onChange={e=>{setPre(e.target.value);setErr('');}}>
                {preList.map(p=><option key={p}>{p}</option>)}
              </select></div>
            <div className="field mb0"><label>ชื่อ – สกุล</label>
              <input className="inp" value={name} onChange={e=>{setName(e.target.value);setErr('');}} placeholder="เช่น สมหญิง ตั้งใจสอน"/></div>
          </div>
          <div className="field" style={{marginTop:14,marginBottom:0}}><label>กลุ่มสาระ/วิชาหลัก</label>
            <select className="sel" value={primary} onChange={e=>{setPrimary(e.target.value);setErr('');}}>{SUBJECT_GROUPS.map(s=><option key={s}>{s}</option>)}</select></div>

          <div className="divider"></div>

          {!resetMode ? (
            <div className="flex ac jb gap12 wrap">
              <div>
                <div style={{fontWeight:600,fontSize:13.5}}>รหัสผ่าน</div>
                <div className="tiny">สำหรับครูที่ลืมรหัสผ่าน — ผู้ดูแลรีเซ็ตให้ได้</div>
              </div>
              <div className="flex gap8">
                <Btn size="sm" variant="ghost" icon="swap" onClick={()=>doReset(true)}>รีเซ็ตเป็น 1234</Btn>
                <Btn size="sm" variant="ghost" onClick={()=>{setResetMode(true);setMsg('');}}>ตั้งรหัสเอง</Btn>
              </div>
            </div>
          ) : (
            <div className="field mb0"><label>ตั้งรหัสผ่านใหม่ให้ครู</label>
              <div className="flex gap8">
                <input className="inp" type="text" value={newPass} onChange={e=>{setNewPass(e.target.value);setErr('');}} placeholder="อย่างน้อย 4 ตัว" autoFocus/>
                <Btn variant="primary" size="sm" icon="check" onClick={()=>doReset(false)}>ตั้งรหัส</Btn>
                <Btn variant="ghost" size="sm" onClick={()=>{setResetMode(false);setErr('');}}>ยกเลิก</Btn>
              </div>
            </div>
          )}
          {msg && <div className="note-box mt12" style={{background:'var(--green-bg)',borderColor:'var(--green-line)',color:'var(--green)'}}><Icon name="checkCircle" size={17} style={{flex:'none'}}/><div>{msg}</div></div>}
          {err && <div className="login-err mt12" style={{marginBottom:0}}><Icon name="xCircle" size={16}/>{err}</div>}
        </div>
        <div className="modal-ft">
          <Btn variant="ghost" onClick={onClose}>ปิด</Btn>
          <Btn variant="primary" icon="check" onClick={save}>บันทึกข้อมูล</Btn>
        </div>
      </div>
    </div>
  );
}

function AdminUsers({credentials, chairs, pushSubs, approverRoles, onAddTeacher, onEditTeacher, onResetPassword, onSetChair, onSetApprover}){
  const [adding, setAdding] = React.useState(false);
  const [editing, setEditing] = React.useState(null);
  const [q, setQ] = React.useState('');
  const list = TEACHERS.filter(t=> !q || t.short.includes(q) || t.name.includes(q) || (credentials[t.id]&&credentials[t.id].username.includes(q.toLowerCase())) || t.primary.includes(q));
  const nextUser = nextUsername(credentials);
  // กลุ่มสาระที่มีครู (ไม่รวมงานบริหาร)
  const groups = SUBJECT_GROUPS.filter(g=> g!=='งานบริหาร/อื่น ๆ' && membersOfGroup(g).length>0);

  return (
    <div>
      <div className="flex ac jb wrap gap12" style={{marginBottom:18}}>
        <div>
          <h1 style={{fontSize:22,color:'var(--brand-900)'}}>จัดการผู้ใช้งาน</h1>
          <p style={{margin:'4px 0 0',color:'var(--ink-2)',fontSize:14}}>บัญชีครูทั้งหมด {TEACHERS.length} ท่าน · แต่งตั้งประธานกลุ่มสาระ · เพิ่ม/แก้ไขข้อมูลครูได้เฉพาะผู้ดูแลระบบ</p>
        </div>
        <Btn variant="primary" icon="plus" onClick={()=>setAdding(true)}>เพิ่มผู้ใช้ / ครูใหม่</Btn>
      </div>

      {/* แต่งตั้งผู้บริหาร / สายอนุมัติการลา */}
      <div className="flex ac gap8" style={{margin:'2px 0 10px'}}>
        <Icon name="shield" size={17} style={{color:'var(--amber)',flex:'none'}}/>
        <b style={{fontFamily:'Kanit',fontSize:15,color:'var(--brand-900)',whiteSpace:'nowrap'}}>ผู้บริหาร / สายอนุมัติการลา</b>
        <span className="tiny">— กำหนดผู้ดำรงตำแหน่งในสายการอนุมัติ 3 ขั้น</span>
      </div>
      <Card>
        <div className="chair-grid">
          {APPROVERS.map(a=>{
            const tid = approverRoles[a.role];
            const holder = tid ? teacherById(tid) : null;
            return (
              <div key={a.role} className="chair-cell">
                <div className="cc-grp">{a.title}</div>
                <div className="flex ac gap8">
                  {holder && <Avatar t={holder} size="sm"/>}
                  <select className="sel" value={tid||''} onChange={e=>onSetApprover(a.role, e.target.value||null)} style={{flex:1}}>
                    <option value="">— ยังไม่กำหนด —</option>
                    {TEACHERS.map(t=><option key={t.id} value={t.id}>{formalName(t)}</option>)}
                  </select>
                </div>
              </div>
            );
          })}
        </div>
      </Card>

      {/* แต่งตั้งประธานกลุ่มสาระ */}
      <div className="flex ac gap8" style={{margin:'24px 0 10px'}}>
        <Icon name="shield" size={17} style={{color:'var(--brand-600)',flex:'none'}}/>
        <b style={{fontFamily:'Kanit',fontSize:15,color:'var(--brand-900)',whiteSpace:'nowrap'}}>ประธานกลุ่มสาระ</b>
        <span className="tiny">— ประธานช่วยจัดสอนแทนให้สมาชิกในกลุ่มกรณีฉุกเฉินได้</span>
      </div>
      <Card>
        <div className="chair-grid">
          {groups.map(g=>{
            const chairId = chairs[g];
            const chair = chairId ? teacherById(chairId) : null;
            const mem = membersOfGroup(g);
            return (
              <div key={g} className="chair-cell">
                <div className="cc-grp">{g} <span className="tiny">· {mem.length} ท่าน</span></div>
                <div className="flex ac gap8">
                  {chair && <Avatar t={chair} size="sm"/>}
                  <select className="sel" value={chairId||''} onChange={e=>onSetChair(g, e.target.value||null)} style={{flex:1}}>
                    <option value="">— ยังไม่กำหนด —</option>
                    {mem.map(m=><option key={m.id} value={m.id}>{formalName(m)}</option>)}
                  </select>
                </div>
              </div>
            );
          })}
        </div>
      </Card>

      <div className="flex ac gap8" style={{margin:'24px 0 10px'}}>
        <Icon name="users" size={17} style={{color:'var(--brand-600)',flex:'none'}}/>
        <b style={{fontFamily:'Kanit',fontSize:15,color:'var(--brand-900)',whiteSpace:'nowrap'}}>รายชื่อบัญชีครู</b>
      </div>
      <Card>
        <div style={{padding:'12px 15px',borderBottom:'1px solid var(--line-2)'}}>
          <input className="inp" value={q} onChange={e=>setQ(e.target.value)} placeholder="ค้นหาชื่อครู / ชื่อผู้ใช้ / กลุ่มสาระ…"/>
        </div>
        <div>
          {list.map(t=>{
            const chairGrp = chairGroupOf(chairs, t.id);
            return (
              <div key={t.id} className="usr-row">
                <Avatar t={t} size="sm"/>
                <div className="nm">
                  <div className="n1">{formalName(t)} {chairGrp && <span className="chair-badge"><Icon name="shield" size={11}/>ประธาน{chairGrp}</span>}</div>
                  <div className="n2">{t.primary}{pushSubs[t.id]?' · เปิดแจ้งเตือนแล้ว':''}</div>
                </div>
                <span className="usr-user">{credentials[t.id]?credentials[t.id].username:t.username}</span>
                <Btn size="sm" variant="ghost" icon="edit" onClick={()=>setEditing(t)}>แก้ไข</Btn>
              </div>
            );
          })}
          {list.length===0 && <Empty icon="users" title="ไม่พบผู้ใช้ที่ค้นหา"/>}
        </div>
      </Card>

      {adding && <AddUserModal nextUser={nextUser} onSave={(d)=>{onAddTeacher(d);setAdding(false);}} onClose={()=>setAdding(false)}/>}
      {editing && <EditUserModal teacher={editing} username={credentials[editing.id]?credentials[editing.id].username:editing.username}
        onSave={(id,patch)=>{onEditTeacher(id,patch);setEditing(null);}}
        onResetPassword={onResetPassword}
        onClose={()=>setEditing(null)}/>}
    </div>
  );
}

Object.assign(window, { AdminUsers, AddUserModal, EditUserModal });

/* ============================================================
   AdminSchedule — admin จัดการตารางสอน/ภาระงานของครูทุกคน
   ============================================================ */
function AdminSchedule({schedules, duties, onSetCell, onAddDuty, onRemoveDuty}){
  const [selectedId, setSelectedId] = React.useState(null);
  const [q, setQ] = React.useState('');
  const [groupFilter, setGroupFilter] = React.useState('all');

  const allTeachers = (window.TEACHERS || []);
  const groups = ['all', ...SUBJECT_GROUPS, 'งานบริหาร/อื่น ๆ'];
  const filtered = allTeachers.filter(t=>{
    if(groupFilter!=='all' && t.primary!==groupFilter) return false;
    if(!q) return true;
    const lq = q.toLowerCase();
    return t.short.includes(q) || t.name.includes(q) || t.primary.includes(q) || (t.username||'').toLowerCase().includes(lq);
  }).sort((a,b)=> a.primary.localeCompare(b.primary,'th') || a.short.localeCompare(b.short,'th'));

  const sel = selectedId ? teacherById(selectedId) : null;

  // กำลังแก้ของครูคนใดคนหนึ่ง — เปลี่ยน mode เป็น ScheduleView ของครูคนนั้น
  if(sel){
    const sch = schedules[sel.id] || sel.schedule;
    const ds  = duties[sel.id] || sel.duties || [];
    return (
      <div>
        <div style={{marginBottom:18}}>
          <button onClick={()=>setSelectedId(null)}
            style={{background:'none',border:'none',color:'var(--brand-600)',cursor:'pointer',fontSize:14,padding:0,marginBottom:8,display:'flex',alignItems:'center',gap:6}}>
            <Icon name="arrowLeft" size={14}/> เลือกครูคนอื่น
          </button>
          <div className="flex ac gap12" style={{marginBottom:6}}>
            <Avatar t={sel} size="md"/>
            <div>
              <h1 style={{fontSize:22,color:'var(--brand-900)',margin:0}}>จัดการตารางสอน · {formalName(sel)}</h1>
              <div className="tiny" style={{color:'var(--ink-3)'}}>{sel.primary} · username <span className="num">{sel.username}</span></div>
            </div>
          </div>
        </div>
        <div className="note-box" style={{marginBottom:16,background:'#fff8e6',borderColor:'#e1b54e'}}>
          <Icon name="info" size={17} style={{flex:'none',color:'#a85b08'}}/>
          <div>การเปลี่ยนแปลงที่ทำในหน้านี้จะมีผลกับตารางสอนของ <b>{formalName(sel)}</b> โดยตรง — กระทบรายการสอนแทนและการแนะนำครูแทนในระบบ</div>
        </div>
        <ScheduleView
          me={sel}
          schedule={sch}
          duties={ds}
          onUpdateCell={(d,p,slot)=>onSetCell(sel.id,d,p,slot)}
          onDeleteCell={(d,p)=>onSetCell(sel.id,d,p,null)}
          onAddDuty={(d)=>onAddDuty(sel.id,d)}
          onRemoveDuty={(i)=>onRemoveDuty(sel.id,i)}
        />
      </div>
    );
  }

  // หน้าเลือกครู
  return (
    <div>
      <div style={{marginBottom:18}}>
        <h1 style={{fontSize:22,color:'var(--brand-900)'}}>จัดการตารางสอน / ภาระงาน</h1>
        <div className="tiny" style={{color:'var(--ink-3)'}}>เลือกครูเพื่อดู เพิ่ม แก้ไข ลบ คาบสอนและภาระงานอื่นๆ ของท่านนั้น</div>
      </div>

      <div className="flex ac gap10 wrap" style={{marginBottom:18}}>
        <input className="inp" value={q} onChange={e=>setQ(e.target.value)} placeholder="🔍 ค้นหาชื่อครู / ชื่อเล่น / username..." style={{maxWidth:340,flex:1}}/>
        <select className="sel" value={groupFilter} onChange={e=>setGroupFilter(e.target.value)} style={{maxWidth:240}}>
          {groups.map(g=><option key={g} value={g}>{g==='all'?'ทุกกลุ่มสาระ':g}</option>)}
        </select>
      </div>

      <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fill,minmax(290px,1fr))',gap:12}}>
        {filtered.map(t=>{
          const sch = schedules[t.id] || t.schedule || {};
          let classes=0, activities=0;
          WEEKDAYS.forEach(d=>(sch[d]||[]).forEach(s=>{ if(s){ if(isTeachingSlot(s)) classes++; else if(s.activity) activities++; } }));
          const dutyCount = (duties[t.id] || t.duties || []).length;
          return (
            <button key={t.id} onClick={()=>setSelectedId(t.id)}
              className="card"
              style={{padding:14,cursor:'pointer',textAlign:'left',display:'flex',gap:12,alignItems:'center',border:'1px solid var(--line)',background:'#fff',transition:'all .15s',borderRadius:10}}
              onMouseEnter={e=>{e.currentTarget.style.borderColor='var(--brand-500)';e.currentTarget.style.boxShadow='0 2px 8px rgba(31,75,160,.08)';}}
              onMouseLeave={e=>{e.currentTarget.style.borderColor='var(--line)';e.currentTarget.style.boxShadow='none';}}>
              <Avatar t={t} size="md"/>
              <div style={{flex:1,minWidth:0}}>
                <div className="ui" style={{fontWeight:600,whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'}}>{formalName(t)}</div>
                <div className="tiny" style={{color:'var(--ink-3)',marginBottom:4}}>{t.primary}</div>
                <div className="tiny" style={{color:'var(--brand-700)'}}>📚 {classes} คาบ · 📋 {activities} ภาระ · 📌 {dutyCount} งาน</div>
              </div>
              <Icon name="chevronRight" size={16} style={{color:'var(--ink-3)',flex:'none'}}/>
            </button>
          );
        })}
        {!filtered.length && (
          <div style={{gridColumn:'1 / -1',padding:30,textAlign:'center',color:'var(--ink-3)',background:'#fff',border:'1px dashed var(--line)',borderRadius:10}}>
            ไม่พบครูที่ตรงตามเงื่อนไข
          </div>
        )}
      </div>

      <div className="tiny" style={{marginTop:16,color:'var(--ink-3)'}}>
        ทั้งหมด {filtered.length} ท่าน {q || groupFilter!=='all' ? `(กรองจาก ${allTeachers.length} ท่าน)` : ''}
      </div>
    </div>
  );
}
window.AdminSchedule = AdminSchedule;

/* ============================================================
   LineSettingsView — ตั้งค่าการแจ้งเตือนผ่าน LINE OA
   ============================================================ */
function LineSettingsView({settings, lineUserIds, webhookUrl, onSave, onUnbind, onTest}){
  const [token, setToken] = React.useState(settings.token || '');
  const [secret, setSecret] = React.useState(settings.secret || '');
  const [enabled, setEnabled] = React.useState(!!settings.enabled);
  const [busy, setBusy] = React.useState(false);
  const [filter, setFilter] = React.useState('all'); // all | bound | unbound
  React.useEffect(()=>{ setToken(settings.token||''); setSecret(settings.secret||''); setEnabled(!!settings.enabled); },[settings.token,settings.secret,settings.enabled]);

  const teachers = (window.TEACHERS || []).filter(t=>t.primary!=='งานบริหาร/อื่น ๆ' || lineUserIds[t.id]);
  const bound = teachers.filter(t=>lineUserIds[t.id]).length;
  const total = teachers.length;
  const rows = teachers.filter(t=>{
    if(filter==='bound') return !!lineUserIds[t.id];
    if(filter==='unbound') return !lineUserIds[t.id];
    return true;
  }).sort((a,b)=> (lineUserIds[b.id]?1:0)-(lineUserIds[a.id]?1:0) || a.short.localeCompare(b.short,'th'));

  const handleSave = async ()=>{
    setBusy(true);
    try { await onSave({token:token.trim(), secret:secret.trim(), enabled}); }
    finally { setBusy(false); }
  };
  const copy = (txt)=> { try{ navigator.clipboard.writeText(txt); }catch(e){} };

  return (
    <div>
      <div style={{marginBottom:18}}>
        <h1 style={{fontSize:22,color:'var(--brand-900)'}}>ตั้งค่าการแจ้งเตือนผ่าน LINE</h1>
        <div className="tiny" style={{color:'var(--ink-3)'}}>เปิดบัญชี LINE OA · วาง Channel Access Token · ครูพิมพ์ผูกบัญชีผ่าน OA ของโรงเรียน</div>
      </div>

      {/* ---- กล่องตั้งค่า ---- */}
      <div className="card" style={{padding:18,marginBottom:18}}>
        <div className="ui" style={{fontWeight:700,marginBottom:12,fontSize:16}}>
          <Icon name="shield" size={17}/> ค่าเชื่อมต่อ LINE OA
        </div>

        <div style={{display:'grid',gap:14}}>
          <label className="form-row">
            <div className="ui" style={{fontWeight:600,marginBottom:4}}>Channel Access Token (long-lived)</div>
            <textarea className="inp" rows={3} value={token} onChange={e=>setToken(e.target.value)} placeholder="วาง Channel Access Token จาก LINE Developers Console → Messaging API"/>
          </label>
          <label className="form-row">
            <div className="ui" style={{fontWeight:600,marginBottom:4}}>Channel Secret (สำหรับตรวจสอบ webhook)</div>
            <input className="inp" value={secret} onChange={e=>setSecret(e.target.value)} placeholder="วาง Channel Secret จากแท็บ Basic settings"/>
          </label>
          <label className="form-row flex ac gap10" style={{cursor:'pointer'}}>
            <input type="checkbox" checked={enabled} onChange={e=>setEnabled(e.target.checked)}/>
            <span className="ui" style={{fontWeight:600}}>เปิดใช้งานการแจ้งเตือนผ่าน LINE</span>
            <span className="tiny" style={{color:'var(--ink-3)'}}>(ถ้าปิดอยู่ระบบจะข้ามการส่ง LINE — ใช้แค่ in-app + Web Push)</span>
          </label>

          <div className="form-row" style={{background:'#f6f8fb',padding:12,borderRadius:8,border:'1px dashed var(--line)'}}>
            <div className="ui" style={{fontWeight:600,marginBottom:6}}>Webhook URL (วางใน LINE Developers Console)</div>
            <div className="flex ac gap8" style={{wordBreak:'break-all'}}>
              <code style={{fontSize:13,padding:'4px 8px',background:'#fff',borderRadius:6,border:'1px solid var(--line)',flex:1}}>{webhookUrl}</code>
              <button className="tiny" onClick={()=>copy(webhookUrl)} style={{padding:'6px 12px',borderRadius:6,border:'1px solid var(--line)',background:'#fff',cursor:'pointer'}}>คัดลอก</button>
            </div>
            <div className="tiny" style={{color:'var(--ink-3)',marginTop:6}}>นำไปวางที่ Messaging API → Webhook URL → กด Verify → เปิด Use webhook</div>
          </div>

          <div className="flex ac gap10">
            <Btn variant="green" icon="checkCircle" onClick={handleSave} disabled={busy}>{busy?'กำลังบันทึก…':'บันทึกการตั้งค่า'}</Btn>
            <span className="tiny" style={{color:enabled?'#0f7b3a':'var(--ink-3)'}}>
              {enabled? '🟢 เปิดอยู่ — ระบบจะยิง LINE ทุกครั้งที่มีแจ้งเตือน' : '⚪️ ปิดอยู่ — เปิดเมื่อพร้อม'}
            </span>
          </div>
        </div>
      </div>

      {/* ---- สถานะการผูกบัญชีของครู ---- */}
      <div className="card" style={{padding:18}}>
        <div className="flex ac jc" style={{marginBottom:12}}>
          <div className="ui" style={{fontWeight:700,fontSize:16}}>
            <Icon name="users" size={17}/> การผูกบัญชี LINE ของครู — {bound}/{total} คน
          </div>
          <div className="flex ac gap8">
            <button className={`pill ${filter==='all'?'active':''}`} onClick={()=>setFilter('all')}>ทั้งหมด ({total})</button>
            <button className={`pill ${filter==='bound'?'active':''}`} onClick={()=>setFilter('bound')}>ผูกแล้ว ({bound})</button>
            <button className={`pill ${filter==='unbound'?'active':''}`} onClick={()=>setFilter('unbound')}>ยังไม่ผูก ({total-bound})</button>
          </div>
        </div>

        <div style={{background:'#fff8e6',border:'1px dashed #e1b54e',borderRadius:8,padding:'10px 14px',marginBottom:14,fontSize:13.5}}>
          <b>วิธีให้ครูผูกบัญชี:</b> 1) แอด LINE OA ของโรงเรียนเป็นเพื่อน → 2) พิมพ์ในช่องแชต:
          <code style={{background:'#fff',padding:'2px 8px',borderRadius:4,margin:'0 4px',fontSize:13}}>ผูกบัญชี &lt;username&gt; &lt;password&gt;</code>
          → 3) ระบบจะตอบกลับยืนยัน และรายชื่อจะ ✓ ในตารางนี้อัตโนมัติ
        </div>

        <div style={{overflowX:'auto'}}>
          <table className="lf-table" style={{width:'100%',fontSize:14}}>
            <thead><tr><th style={{width:32}}></th><th>ครู</th><th>กลุ่มสาระ</th><th className="c" style={{width:120}}>สถานะ LINE</th><th className="c" style={{width:200}}>จัดการ</th></tr></thead>
            <tbody>
              {rows.map(t=>{
                const uid = lineUserIds[t.id];
                return (
                  <tr key={t.id}>
                    <td><Avatar t={t} size="sm"/></td>
                    <td>{formalName(t)}</td>
                    <td><span className="tiny">{t.primary}</span></td>
                    <td className="c">{uid ? <span style={{color:'#0f7b3a',fontWeight:600}}>✓ ผูกแล้ว</span> : <span style={{color:'var(--ink-3)'}}>—</span>}</td>
                    <td className="c">
                      {uid && (
                        <div className="flex ac jc gap6">
                          <button className="tiny" style={{padding:'4px 10px',borderRadius:6,border:'1px solid var(--line)',background:'#fff',cursor:'pointer'}} onClick={()=>onTest(t.id)}>ทดสอบส่ง</button>
                          <button className="tiny" style={{padding:'4px 10px',borderRadius:6,border:'1px solid #b5403a',background:'#fff',color:'#b5403a',cursor:'pointer'}} onClick={()=>onUnbind(t.id)}>ปลดผูก</button>
                        </div>
                      )}
                    </td>
                  </tr>
                );
              })}
              {!rows.length && <tr><td colSpan={5} className="c" style={{padding:30,color:'var(--ink-3)'}}>ไม่มีรายการ</td></tr>}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

window.LineSettingsView = LineSettingsView;