/* ============================================================
   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 EditAssignmentModal({assignment, onSave, onDelete, onClose}){
  const [a, setA] = React.useState({...assignment});
  const [confirmDel, setConfirmDel] = React.useState(false);
  const upd = patch => setA(s=>({...s, ...patch}));
  const lt = teacherById(a.leaveTeacherId);
  const STATUSES = [['pending','รอรับทราบ'],['acknowledged','รับทราบแล้ว'],['rejected','ปฏิเสธ'],['done','เสร็จสิ้น']];
  const save = ()=>{
    onSave(a.id, {
      reason:a.reason, date:a.date, period:+a.period,
      code:a.code, subject:a.subject, className:a.className,
      substituteId:a.substituteId, makeupDate:a.makeupDate, makeupPeriod:+a.makeupPeriod,
      status:a.status, rejectReason:a.rejectReason||'',
    });
  };
  return (
    <div className="modal-bg" onClick={onClose}>
      <div className="modal" onClick={e=>e.stopPropagation()} style={{maxWidth:560}}>
        <div className="modal-hd">
          <h3>แก้ไขประวัติการลา</h3>
          <div className="tiny" style={{marginTop:3}}>ครูที่ลา: <b>{lt?fullTitle(lt):'—'}</b> · กลุ่มคำขอ {a.groupId}</div>
        </div>
        <div className="modal-bd">
          <div className="field"><label>เหตุผลการลา</label>
            <select className="sel" value={a.reason} onChange={e=>upd({reason:e.target.value})}>
              {REASONS.map(r=><option key={r.id} value={r.id}>{r.label}</option>)}
            </select></div>
          <div style={{display:'grid',gridTemplateColumns:'1fr .7fr',gap:12}}>
            <div className="field mb0"><label>วันที่ลา</label>
              <input type="date" className="inp" value={a.date} onChange={e=>upd({date:e.target.value})}/>
              <div className="tiny" style={{marginTop:4,color:'var(--ink-3)'}}>{formatThaiDate(a.date,true)}</div>
            </div>
            <div className="field mb0"><label>คาบที่ลา</label>
              <select className="sel" value={a.period} onChange={e=>upd({period:+e.target.value})}>
                {PERIODS.map(p=><option key={p.p} value={p.p}>คาบ {p.p}</option>)}
              </select></div>
          </div>
          <div style={{display:'grid',gridTemplateColumns:'.8fr 1.2fr .7fr',gap:12,marginTop:14}}>
            <div className="field mb0"><label>รหัสวิชา</label>
              <input className="inp" value={a.code||''} onChange={e=>upd({code:e.target.value})}/></div>
            <div className="field mb0"><label>วิชา</label>
              <input className="inp" value={a.subject||''} onChange={e=>upd({subject:e.target.value})}/></div>
            <div className="field mb0"><label>ชั้น</label>
              <input className="inp" value={a.className||''} onChange={e=>upd({className:e.target.value})}/></div>
          </div>

          <div className="field" style={{marginTop:14}}><label>ครูที่สอนแทน</label>
            <select className="sel" value={a.substituteId||''} onChange={e=>upd({substituteId:e.target.value})}>
              <option value="">— ยังไม่กำหนด —</option>
              {TEACHERS.filter(t=>t.id!==a.leaveTeacherId).map(t=><option key={t.id} value={t.id}>{formalName(t)} · {t.primary}</option>)}
            </select></div>
          <div style={{display:'grid',gridTemplateColumns:'1fr .7fr',gap:12}}>
            <div className="field mb0"><label>วันที่กลับมาชดเชย</label>
              <input type="date" className="inp" value={a.makeupDate||''} onChange={e=>upd({makeupDate:e.target.value})}/>
              <div className="tiny" style={{marginTop:4,color:'var(--ink-3)'}}>{a.makeupDate?formatThaiDate(a.makeupDate,true):'—'}</div>
            </div>
            <div className="field mb0"><label>คาบชดเชย</label>
              <select className="sel" value={a.makeupPeriod||0} onChange={e=>upd({makeupPeriod:+e.target.value})}>
                <option value={0}>— เลือก —</option>
                {PERIODS.map(p=><option key={p.p} value={p.p}>คาบ {p.p}</option>)}
              </select></div>
          </div>

          <div className="field" style={{marginTop:14,marginBottom:0}}><label>สถานะ</label>
            <select className="sel" value={a.status} onChange={e=>upd({status:e.target.value})}>
              {STATUSES.map(([k,l])=><option key={k} value={k}>{l}</option>)}
            </select></div>
          {a.status==='rejected' && (
            <div className="field" style={{marginTop:14,marginBottom:0}}><label>เหตุผลการปฏิเสธ</label>
              <input className="inp" value={a.rejectReason||''} onChange={e=>upd({rejectReason:e.target.value})} placeholder="เช่น ติดสอนคาบนี้"/></div>
          )}

          <div className="divider"></div>
          {!confirmDel ? (
            <div className="flex ac jb gap12 wrap">
              <div>
                <div style={{fontWeight:600,fontSize:13.5,color:'var(--red)'}}>ลบรายการนี้</div>
                <div className="tiny">ลบคำขอเปลี่ยนคาบของคาบนี้ออกจากระบบ (ไม่กระทบคาบอื่นในกลุ่มเดียวกัน)</div>
              </div>
              <Btn size="sm" variant="ghost" icon="xCircle" onClick={()=>setConfirmDel(true)}>ลบรายการ</Btn>
            </div>
          ) : (
            <div className="note-box" style={{background:'var(--red-bg)',borderColor:'var(--red-line)',color:'var(--red)'}}>
              <Icon name="info" size={18} style={{flex:'none'}}/>
              <div className="grow"><b>ยืนยันลบรายการนี้?</b> การลบไม่สามารถกู้คืนได้</div>
              <Btn size="sm" variant="ghost" onClick={()=>setConfirmDel(false)}>ยกเลิก</Btn>
              <Btn size="sm" variant="primary" icon="xCircle" onClick={()=>{onDelete(a.id);onClose();}}>ยืนยันลบ</Btn>
            </div>
          )}
        </div>
        <div className="modal-ft">
          <Btn variant="ghost" onClick={onClose}>ยกเลิก</Btn>
          <Btn variant="primary" icon="check" onClick={()=>{save();onClose();}}>บันทึกการแก้ไข</Btn>
        </div>
      </div>
    </div>
  );
}

function AdminView({assignments, onEditAssignment, onDeleteAssignment}){
  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>จัดการ</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><Btn size="sm" variant="ghost" icon="edit" onClick={()=>setEditing(a)}>แก้ไข</Btn></td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>

      <div className="note-box mt16">
        <Icon name="info" size={18} style={{flex:'none'}}/>
        <div>ระบบบันทึกคาบที่ครูแต่ละท่านต้องกลับมาสอนชดเชยไว้ในคอลัมน์ “วันที่กลับมาชดเชย” และ “คาบชดเชย” เพื่อให้งานวิชาการตรวจสอบการสอนชดเชยได้ครบถ้วน · กดปุ่ม <b>แก้ไข</b> ในแต่ละแถวเพื่อปรับข้อมูลย้อนหลังหรือลบรายการได้</div>
      </div>

      {editing && (
        <EditAssignmentModal
          assignment={editing}
          onSave={(id,patch)=>onEditAssignment(id,patch)}
          onDelete={(id)=>onDeleteAssignment(id)}
          onClose={()=>setEditing(null)}
        />
      )}
    </div>
  );
}

window.AdminView = AdminView;
window.EditAssignmentModal = EditAssignmentModal;
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, lineLinks, 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}{lineLinks[t.id]?' · เชื่อม LINE แล้ว':''}</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 });