/* ============================================================
   ChairView.jsx — ประธานกลุ่มสาระ จัดสอนแทนให้สมาชิกกรณีฉุกเฉิน
   ============================================================ */

function ChairForm({chair, group, members, schedules, onSubmit, onCancel}){
  const [memberId, setMemberId] = React.useState(members[0]?.id || '');
  const [reason, setReason] = React.useState('sick');
  const [date, setDate] = React.useState(nextWeekdayISO(1));
  const [rows, setRows] = React.useState({});
  const member = teacherById(memberId);
  const mSched = member ? (schedules[member.id] || member.schedule) : null;
  const classes = member ? classesOnDay(mSched, date) : [];
  const weekend = !isWeekday(date);

  React.useEffect(()=>{
    const init = {};
    classes.forEach(c=>{ init[c.period] = {include:true, substituteId:'', makeupDate:nextWeekdayISO(8), makeupPeriod:c.period}; });
    setRows(init);
  // eslint-disable-next-line
  },[date, memberId]);

  const upd = (p, patch)=> setRows(r=>({...r,[p]:{...r[p],...patch}}));
  const included = classes.filter(c=>rows[c.period]?.include);
  const ready = member && included.length>0 && included.every(c=>{ const r=rows[c.period]; return r.substituteId && r.makeupDate && r.makeupPeriod; });

  const submit = ()=>{
    const gid = 'gc'+Date.now();
    const list = included.map(c=>{
      const r = rows[c.period];
      return {
        id:newId(), groupId:gid, leaveTeacherId:member.id, reason, date,
        period:c.period, code:c.code, subject:c.subject, className:c.className,
        substituteId:r.substituteId, makeupDate:r.makeupDate, makeupPeriod:+r.makeupPeriod,
        status:'pending', rejectReason:'', createdAt:new Date().toISOString().slice(0,16), decidedAt:null,
        arrangedByChairId: chair.id, subjectGroup: group,
      };
    });
    onSubmit(list);
  };

  return (
    <div className="list-gap">
      <Card>
        <CardHead icon="shield" title="จัดสอนแทนฉุกเฉินให้สมาชิกกลุ่มสาระ" sub={`ดำเนินการโดยประธานกลุ่มสาระ${group} · ${fullTitle(chair)}`}/>
        <div className="card-pad">
          <div className="note-box" style={{marginBottom:16,background:'var(--amber-bg)',borderColor:'var(--amber-line)',color:'#7c4408'}}>
            <Icon name="info" size={18} style={{flex:'none'}}/>
            <div>ใช้สำหรับกรณี<b>ฉุกเฉิน</b>ที่สมาชิกในกลุ่มสาระไม่สามารถแจ้งลาเองได้ (เช่น เจ็บป่วยกะทันหัน) ประธานกลุ่มสาระจัดหาครูสอนแทนแทนให้ และระบบจะแจ้งเตือนครูสอนแทนทาง LINE</div>
          </div>

          <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:12}}>
            <div className="field mb0">
              <label>สมาชิกที่ต้องจัดสอนแทนให้</label>
              <select className="sel" value={memberId} onChange={e=>setMemberId(e.target.value)}>
                {members.map(m=><option key={m.id} value={m.id}>{formalName(m)}</option>)}
              </select>
            </div>
            <div className="field mb0">
              <label>วันที่ขาดสอน</label>
              <input type="date" className="inp" value={date} onChange={e=>setDate(e.target.value)}/>
            </div>
          </div>
          <div className="field" style={{marginTop:16,marginBottom:0}}>
            <label>เหตุผล</label>
            <div className="chips">
              {REASONS.map(r=>(
                <button key={r.id} className={`chip-r ${reason===r.id?'on':''}`} onClick={()=>setReason(r.id)}>
                  <span className="ic" style={{color:reason===r.id?'var(--brand-600)':'var(--ink-3)'}}><Icon name={r.icon} size={20}/></span>
                  <span className="ttl">{r.label}</span><span className="ds">{r.desc}</span>
                </button>
              ))}
            </div>
          </div>
        </div>
      </Card>

      <Card>
        <CardHead icon="calendar" title={`คาบสอนของ${member?fullTitle(member):'สมาชิก'} ในวันที่ขาด`} sub="เลือกคาบที่ต้องหาครูสอนแทน แล้วกำหนดครู + วัน/คาบที่จะมาสอนชดเชย"/>
        <div className="card-pad">
          {weekend && <Empty icon="calendar" title="วันหยุด — ไม่มีคาบสอน" desc="กรุณาเลือกวันจันทร์–ศุกร์"/>}
          {!weekend && classes.length===0 && <Empty icon="calendar" title="ไม่มีคาบสอนในวันนี้" desc="สมาชิกท่านนี้ไม่มีคาบสอนตามตารางในวันที่เลือก"/>}

          <div className="list-gap">
            {classes.map(c=>{
              const r = rows[c.period] || {};
              return (
                <div key={c.period} className="card" style={{borderColor:r.include?'var(--brand-100)':'var(--line)',background:r.include?'#fff':'var(--bg-2)'}}>
                  <div style={{padding:'13px 15px',display:'flex',alignItems:'center',gap:13}}>
                    <div style={{width:46,height:46,flex:'none',borderRadius:11,background:r.include?'var(--brand-700)':'var(--ink-3)',color:'#fff',display:'flex',flexDirection:'column',alignItems:'center',justifyContent:'center',lineHeight:1}}>
                      <b className="num" style={{fontSize:19}}>{c.period}</b><span style={{fontSize:9.5,opacity:.85}}>คาบ</span>
                    </div>
                    <div className="grow" style={{minWidth:0}}>
                      <div style={{fontWeight:600}}>{c.subject} <span className="num" style={{color:'var(--brand-600)',fontWeight:500,fontSize:13}}>{c.code}</span></div>
                      <div style={{fontSize:12.5,color:'var(--ink-2)',display:'flex',gap:10,flexWrap:'wrap'}}><span style={{color:'var(--brand-600)',fontWeight:500}}>ชั้น {c.className}</span>{c.room&&<span style={{color:'var(--ink-3)'}}>ห้อง {c.room}</span>}<span style={{color:'var(--ink-3)'}}>{c.time}</span></div>
                    </div>
                    <label style={{display:'flex',alignItems:'center',gap:7,fontSize:12.5,color:'var(--ink-2)',cursor:'pointer',whiteSpace:'nowrap'}}>
                      <input type="checkbox" checked={!!r.include} onChange={e=>upd(c.period,{include:e.target.checked})} style={{width:17,height:17,accentColor:'var(--brand-600)'}}/>
                      หาครูสอนแทน
                    </label>
                  </div>
                  {r.include && (
                    <div style={{padding:'0 15px 15px',borderTop:'1px solid var(--line-2)',paddingTop:14}}>
                      <div className="field" style={{marginBottom:14}}>
                        <label>ครูที่จะสอนแทน</label>
                        <SubPicker schedules={schedules} date={date} period={c.period} className={c.className} excludeId={member.id} value={r.substituteId} onPick={id=>upd(c.period,{substituteId:id})}/>
                      </div>
                      <div style={{display:'grid',gridTemplateColumns:'1.3fr .9fr',gap:12}}>
                        <div className="field mb0"><label>วันที่กลับมาสอนชดเชย</label>
                          <input type="date" className="inp" value={r.makeupDate} onChange={e=>upd(c.period,{makeupDate:e.target.value})}/></div>
                        <div className="field mb0"><label>คาบที่ชดเชย</label>
                          <select className="sel" value={r.makeupPeriod} onChange={e=>upd(c.period,{makeupPeriod:+e.target.value})}>
                            {PERIODS.map(p=><option key={p.p} value={p.p}>คาบ {p.p}</option>)}
                          </select></div>
                      </div>
                    </div>
                  )}
                </div>
              );
            })}
          </div>

          {included.length>0 && (
            <div className="note-box mt16">
              <Icon name="send" size={18} style={{flex:'none'}}/>
              <div>เมื่อกดส่งคำขอ ระบบจะแจ้งเตือนผ่าน <b>เบราว์เซอร์ (Web Push)</b> ไปยังครูสอนแทนทั้ง {included.length} ท่านโดยอัตโนมัติ เพื่อให้กดรับทราบในระบบ</div>
            </div>
          )}
          <div className="flex gap10 mt16" style={{justifyContent:'flex-end'}}>
            <Btn variant="ghost" onClick={onCancel}>ยกเลิก</Btn>
            <Btn variant="primary" icon="send" disabled={!ready} onClick={submit}>ส่งคำขอ &amp; แจ้งเตือน</Btn>
          </div>
        </div>
      </Card>
    </div>
  );
}

function ChairView({chair, group, members, assignments, schedules, pushSubs, onSubmit, onChairAssign}){
  const [mode, setMode] = React.useState('list');
  const [assignTarget, setAssignTarget] = React.useState(null);
  // คำขอที่ประธานจัดให้ + คำขอของสมาชิกในกลุ่ม
  const memberIds = new Set(members.map(m=>m.id));
  const groupAssigns = assignments.filter(a=> memberIds.has(a.leaveTeacherId))
    .sort((a,b)=> (b.createdAt||'').localeCompare(a.createdAt||''));
  const byChair = groupAssigns.filter(a=>a.arrangedByChairId===chair.id);
  const pending = groupAssigns.filter(a=>a.status==='awaiting_chair');

  if(mode==='form'){
    return <ChairForm chair={chair} group={group} members={members.filter(m=>m.id!==chair.id)} schedules={schedules}
      onSubmit={(list)=>{onSubmit(list);setMode('list');}} onCancel={()=>setMode('list')}/>;
  }

  const linkedCount = members.filter(m=>pushSubs[m.id]).length;

  return (
    <div>
      <div className="flex ac jb wrap gap12" style={{marginBottom:18}}>
        <div>
          <h1 style={{fontSize:22,color:'var(--brand-900)'}}>ประธานกลุ่มสาระ{group}</h1>
          <p style={{margin:'4px 0 0',color:'var(--ink-2)',fontSize:14}}>{formalName(chair)} — จัดสอนแทนฉุกเฉินให้สมาชิกในกลุ่มสาระ</p>
        </div>
        <Btn variant="primary" icon="plus" onClick={()=>setMode('form')}>จัดสอนแทนฉุกเฉินให้สมาชิก</Btn>
      </div>

      <div className="stats" style={{gridTemplateColumns:'repeat(3,1fr)'}}>
        <Stat k="สมาชิกในกลุ่มสาระ" v={members.length} unit="ท่าน" tone="blue" icon="users"/>
        <Stat k="รอประธานจัดครูสอนแทน" v={pending.length} unit="คาบ" tone="amber" icon="hourglass"/>
        <Stat k="คำขอที่ประธานจัดให้" v={byChair.length} unit="คาบ" tone="green" icon="shield"/>
      </div>

      {pending.length>0 && (
        <>
          <div className="flex ac gap8" style={{margin:'4px 0 10px'}}>
            <Icon name="hourglass" size={17} style={{color:'var(--amber)',flex:'none'}}/>
            <b style={{fontFamily:'Kanit',fontSize:15,color:'var(--ink)',whiteSpace:'nowrap'}}>คำขอที่รอให้ประธานจัดครูสอนแทน</b>
            <span className="badge b-chair" style={{marginLeft:2}}>{pending.length}</span>
          </div>
          <div className="list-gap" style={{marginBottom:24}}>
            {pending.map(a=>{
              const lt = teacherById(a.leaveTeacherId);
              return (
                <Card key={a.id}>
                  <div style={{padding:'13px 16px',display:'flex',alignItems:'center',gap:12,flexWrap:'wrap'}}>
                    <Avatar t={lt} size="sm"/>
                    <div className="grow" style={{minWidth:0}}>
                      <div style={{fontWeight:600,fontSize:13.5}}>{fullTitle(lt)} · {a.subject} ชั้น {a.className}</div>
                      <div className="tiny">{formatThaiDate(a.date,true)} คาบ {a.period} · {a.room?`ห้อง ${a.room} · `:''}ยังไม่ได้จัดครูสอนแทน</div>
                    </div>
                    <ReasonTag reason={a.reason}/>
                    <Btn size="sm" variant="primary" icon="shield" onClick={()=>setAssignTarget(a)}>จัดครูสอนแทน</Btn>
                  </div>
                </Card>
              );
            })}
          </div>
        </>
      )}

      <div className="flex ac gap8" style={{margin:'4px 0 10px'}}>
        <Icon name="users" size={17} style={{color:'var(--brand-600)',flex:'none'}}/>
        <b style={{fontFamily:'Kanit',fontSize:15,color:'var(--ink)',whiteSpace:'nowrap'}}>สมาชิกในกลุ่มสาระ</b>
      </div>
      <Card>
        <div>
          {members.map(m=>(
            <div key={m.id} className="usr-row">
              <Avatar t={m} size="sm"/>
              <div className="nm">
                <div className="n1">{formalName(m)} {m.id===chair.id && <span className="chair-badge"><Icon name="shield" size={11}/>ประธาน</span>}</div>
                <div className="n2">{m.primary}</div>
              </div>
              {pushSubs[m.id]
                ? <span className="push-status"><span className="ds"></span>แจ้งเตือน</span>
                : <span className="badge b-pending" style={{fontSize:11}}>ยังไม่เปิดแจ้งเตือน</span>}
            </div>
          ))}
        </div>
      </Card>

      {byChair.length>0 && (
        <>
          <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(--ink)',whiteSpace:'nowrap'}}>การจัดสอนแทนที่ประธานดำเนินการ</b>
          </div>
          <div className="list-gap">
            {byChair.map(a=>{
              const lt = teacherById(a.leaveTeacherId), sub = teacherById(a.substituteId);
              return (
                <Card key={a.id}>
                  <div style={{padding:'13px 16px',display:'flex',alignItems:'center',gap:12,flexWrap:'wrap'}}>
                    <Avatar t={lt} size="sm"/>
                    <div className="grow" style={{minWidth:0}}>
                      <div style={{fontWeight:600,fontSize:13.5}}>{fullTitle(lt)} · {a.subject} ชั้น {a.className}</div>
                      <div className="tiny">{formatThaiDate(a.date,true)} คาบ {a.period} · สอนแทนโดย {fullTitle(sub)} · ชดเชย {formatThaiDate(a.makeupDate)} คาบ {a.makeupPeriod}</div>
                    </div>
                    <div className="flex ac gap8">
                      <ReasonTag reason={a.reason}/>
                      <StatusBadge status={a.status}/>
                    </div>
                  </div>
                </Card>
              );
            })}
          </div>
        </>
      )}
      {assignTarget && <ChairAssignModal a={assignTarget} schedules={schedules}
        onAssign={(patch)=>{onChairAssign(assignTarget.id, patch); setAssignTarget(null);}}
        onClose={()=>setAssignTarget(null)}/>}
    </div>
  );
}

/* ---------- ประธานจัดครูสอนแทนให้คำขอที่รออยู่ ---------- */
function ChairAssignModal({a, schedules, onAssign, onClose}){
  const lt = teacherById(a.leaveTeacherId);
  const [r, setR] = React.useState({substituteId:'', makeupDate:'', makeupPeriod:'', makeupDay:''});
  const upd = patch => setR(s=>({...s,...patch}));
  const pickSub = (id)=>{
    const patch = {substituteId:id};
    const subSched = schedules[id] || (teacherById(id)||{}).schedule;
    const slots = slotsTeachingClass(subSched, a.className);
    if(slots.length){ const f=slots[0]; patch.makeupDay=f.day; patch.makeupPeriod=f.period; patch.makeupDate=nextDateForWeekday(f.day, a.date); }
    upd(patch);
  };
  const ready = r.substituteId && r.makeupDate && r.makeupPeriod;
  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} · {formatThaiDate(a.date,true)} คาบ {a.period}</div>
        </div>
        <div className="modal-bd">
          <div className="field"><label>ครูที่จะสอนแทน</label>
            <SubPicker schedules={schedules} date={a.date} period={a.period} className={a.className} excludeId={a.leaveTeacherId} value={r.substituteId} onPick={pickSub}/>
          </div>
          <MakeupPicker schedules={schedules} substituteId={r.substituteId} className={a.className} leaveDate={a.date} value={r} onChange={upd}/>
        </div>
        <div className="modal-ft">
          <Btn variant="ghost" onClick={onClose}>ยกเลิก</Btn>
          <Btn variant="primary" icon="send" disabled={!ready} onClick={()=>onAssign({substituteId:r.substituteId, makeupDate:r.makeupDate, makeupPeriod:+r.makeupPeriod})}>ยืนยัน &amp; แจ้งเตือน</Btn>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ChairView, ChairForm, ChairAssignModal });