/* ============================================================
   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:'', makeupPeriod:0}; });
    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, makeupDate:'', makeupPeriod:0})}/>
                      </div>
                      <div className="field mb0">
                        <label>วัน/คาบที่กลับมาสอนชดเชย <span className="tiny" style={{color:'var(--ink-3)',fontWeight:400}}>(เลือกตามตารางสอนของครูสอนแทนในห้อง {c.className} เพื่อสลับคาบกัน)</span></label>
                        <MakeupPicker schedules={schedules} substituteId={r.substituteId} leaveDate={date} className={c.className} value={r} onPick={patch=>upd(c.period,patch)}/>
                      </div>
                    </div>
                  )}
                </div>
              );
            })}
          </div>

          {included.length>0 && (
            <div className="note-box mt16">
              <Icon name="send" size={18} style={{flex:'none'}}/>
              <div>เมื่อกดส่งคำขอ ระบบจะแจ้งเตือนผ่าน <b>LINE</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; แจ้งเตือน LINE</Btn>
          </div>
        </div>
      </Card>
    </div>
  );
}

function ChairView({chair, group, members, assignments, schedules, lineLinks, onSubmit}){
  const [mode, setMode] = React.useState('list');
  // คำขอที่ประธานจัดให้ + คำขอของสมาชิกในกลุ่ม
  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);

  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=>lineLinks[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="เชื่อม LINE แล้ว" v={linkedCount} unit={`/ ${members.length}`} tone="green" icon="swap"/>
        <Stat k="คำขอที่ประธานจัดให้" v={byChair.length} unit="คาบ" tone="amber" icon="shield"/>
      </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>
              {lineLinks[m.id]
                ? <span className="line-link-status"><span className="ds"></span>LINE</span>
                : <span className="badge b-pending" style={{fontSize:11}}>ยังไม่เชื่อม LINE</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>
        </>
      )}
    </div>
  );
}

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