/* ============================================================
   LeaveView.jsx — มุมครูที่ลา: แจ้งลา + เลือกครูสอนแทน
   ============================================================ */

function SubPicker({schedules, date, period, className, excludeId, value, onPick}){
  const [open, setOpen] = React.useState(false);
  const sel = value ? teacherById(value) : null;
  const ranked = rankSubstitutes(schedules, date, period, className, excludeId);
  const free = ranked.filter(r=>r.free);
  const busy = ranked.filter(r=>!r.free);
  const selRow = ranked.find(r=>r.teacher.id===value);

  const Row = ({r})=>(
    <button className={`subrow ${value===r.teacher.id?'on':''}`} onClick={()=>{onPick(r.teacher.id);setOpen(false);}}>
      <Avatar t={r.teacher} size="sm"/>
      <div className="nm">
        <div className="n1">{fullTitle(r.teacher)} {r.teachesClass && <span title="เคยสอนห้องนี้" style={{color:'var(--amber)'}}>★</span>}</div>
        <div className="n2">{r.teacher.primary}{r.teachesClass?` · เคยสอน ${className}`:''}</div>
      </div>
      {r.free
        ? <span className="free-note"><Icon name="check" size={13}/>ว่าง</span>
        : <span className="busy-note" title={r.busy?(r.busy.className||r.busy.activity):''}><Icon name="clock" size={13}/>{r.busy?(r.busy.className||r.busy.activity||'มีคาบ'):'มีคาบ'}</span>}
    </button>
  );

  return (
    <div>
      {!open && (
        <button className={`subrow ${sel?'on':''}`} onClick={()=>setOpen(true)}>
          {sel ? <Avatar t={sel} size="sm"/> : <span style={{width:34,height:34,borderRadius:'50%',background:'var(--brand-50)',display:'flex',alignItems:'center',justifyContent:'center',color:'var(--brand-400)'}}><Icon name="user" size={17}/></span>}
          <div className="nm">
            <div className="n1">{sel ? fullTitle(sel) : 'เลือกครูสอนแทน'}</div>
            <div className="n2">{sel
              ? `${sel.primary}${selRow?(selRow.free?' · ว่างคาบนี้':' · มีคาบสอนคาบนี้'):''}${selRow&&selRow.teachesClass?' · เคยสอนห้องนี้':''}`
              : `ระบบแนะนำครูที่ว่างคาบนี้ + เคยสอน ${className} ก่อน`}</div>
          </div>
          <Icon name="chevronRight" size={16} style={{color:'var(--ink-3)'}}/>
        </button>
      )}
      {open && (
        <div className="card" style={{borderColor:'var(--brand-100)',boxShadow:'var(--shadow-md)'}}>
          <div style={{padding:'10px 14px',display:'flex',alignItems:'center',gap:8,borderBottom:'1px solid var(--line-2)'}}>
            <Icon name="users" size={16} style={{color:'var(--brand-600)'}}/>
            <b style={{fontSize:13}}>เลือกครูสอนแทน — คาบ {period} · {className}</b>
            <button style={{marginLeft:'auto',background:'none',border:'none',color:'var(--ink-3)'}} onClick={()=>setOpen(false)}><Icon name="x" size={18}/></button>
          </div>
          <div style={{maxHeight:300,overflowY:'auto',padding:10,display:'flex',flexDirection:'column',gap:7}}>
            <div className="tiny" style={{padding:'2px 4px',color:'var(--green)',fontWeight:600,display:'flex',alignItems:'center',gap:5}}><Icon name="checkCircle" size={13}/> ว่างคาบนี้ ({free.length} ท่าน) — ★ = เคยสอนห้องนี้</div>
            {free.map(r=><Row key={r.teacher.id} r={r}/>)}
            <div className="tiny" style={{padding:'8px 4px 2px',color:'var(--amber)',fontWeight:600,display:'flex',alignItems:'center',gap:5,borderTop:'1px dashed var(--line)',marginTop:4}}><Icon name="clock" size={13}/> มีคาบสอนคาบนี้ ({busy.length} ท่าน)</div>
            {busy.map(r=><Row key={r.teacher.id} r={r}/>)}
          </div>
        </div>
      )}
    </div>
  );
}

function LeaveForm({me, schedules, onSubmit, onCancel}){
  const [reason, setReason] = React.useState('kit');
  const [date, setDate] = React.useState(nextWeekdayISO(1));
  const [rows, setRows] = React.useState({});
  const mySched = schedules[me.id] || me.schedule;
  const classes = classesOnDay(mySched, date);
  const acts = activitiesOnDay(mySched, 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]);

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

  const submit = ()=>{
    const gid = 'g'+Date.now();
    const list = included.map(c=>{
      const r = rows[c.period];
      return {
        id:newId(), groupId:gid, leaveTeacherId:me.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,
      };
    });
    onSubmit(list);
  };

  return (
    <div className="list-gap">
      <Card>
        <CardHead icon="edit" title="แบบฟอร์มแจ้งลา / ขอเปลี่ยนคาบสอน" sub={`ผู้แจ้ง: ${formalName(me)} (${me.primary})`}/>
        <div className="card-pad">
          <div className="field">
            <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 className="field mb0">
            <label>วันที่ลา</label>
            <input type="date" className="inp" value={date} onChange={e=>setDate(e.target.value)} style={{maxWidth:260}}/>
            <div className="hint">{formatThaiDate(date,true)} · ระบบดึงคาบสอนของท่านจากตารางสอนจริงในวันนี้</div>
          </div>
        </div>
      </Card>

      <Card>
        <CardHead icon="calendar" title="คาบสอนของท่านในวันที่ลา" 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={me.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>

          {acts.length>0 && !weekend && (
            <div className="note-box mt16" style={{background:'var(--amber-bg)',borderColor:'var(--amber-line)',color:'var(--amber)'}}>
              <Icon name="info" size={18} style={{flex:'none'}}/>
              <div>วันนี้ท่านมีภาระงานอื่นด้วย: {acts.map(a=>`คาบ ${a.period} ${a.activity}`).join(', ')} (ไม่ต้องหาครูสอนแทน)</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>
          {!ready && included.length>0 && <div className="tiny right mt8">กรุณาเลือกครูสอนแทนและกำหนดวัน/คาบชดเชยให้ครบทุกคาบที่เลือก</div>}
        </div>
      </Card>
    </div>
  );
}

function LeaveGroupCard({group, approval, onResend, onRequestApproval}){
  const first = group[0];
  const allSubsReady = group.every(a=>a.status==='acknowledged');
  return (
    <Card>
      <div style={{padding:'15px 18px',display:'flex',alignItems:'center',gap:12,borderBottom:'1px solid var(--line-2)',flexWrap:'wrap'}}>
        <Icon name="calendar" size={18} style={{color:'var(--brand-600)'}}/>
        <b style={{fontFamily:'Kanit'}}>{formatThaiDate(first.date,true)}</b>
        <ReasonTag reason={first.reason}/>
        <span className="grow"/>
        <span className="tiny">{group.length} คาบ</span>
      </div>
      <div style={{padding:'6px 18px 14px'}}>
        {group.map(a=>{
          const sub = teacherById(a.substituteId);
          return (
            <div key={a.id} className="kv" style={{alignItems:'center'}}>
              <div className="flex ac gap10" style={{minWidth:0}}>
                <span className="num" style={{width:30,height:30,borderRadius:8,background:'var(--brand-50)',color:'var(--brand-700)',display:'flex',alignItems:'center',justifyContent:'center',fontWeight:600,flex:'none'}}>{a.period}</span>
                <div style={{minWidth:0}}>
                  <div style={{fontWeight:500,fontSize:13.5}}>{a.subject} · ชั้น {a.className}</div>
                  <div className="tiny">สอนแทนโดย {sub?fullTitle(sub):'—'} · ชดเชย {formatThaiDate(a.makeupDate)} คาบ {a.makeupPeriod}</div>
                </div>
              </div>
              <div className="flex ac gap8"><StatusBadge status={a.status}/>{a.status==='rejected' && <Btn size="sm" variant="ghost" icon="swap" onClick={()=>onResend(a)}>หาครูใหม่</Btn>}</div>
            </div>
          );
        })}
        {group.some(a=>a.status==='rejected') && (
          <div className="note-box mt12" style={{background:'var(--red-bg)',borderColor:'var(--red-line)',color:'var(--red)'}}>
            <Icon name="info" size={17} style={{flex:'none'}}/>
            <div>มีคาบที่ครูสอนแทนปฏิเสธ: “{group.find(a=>a.status==='rejected').rejectReason}” — กรุณาเลือกครูสอนแทนท่านใหม่</div>
          </div>
        )}

        {/* ขออนุญาตลา */}
        <div className="divider"></div>
        {!approval ? (
          <div className="flex ac jb wrap gap12">
            <div style={{minWidth:0}}>
              <div style={{fontWeight:600,fontSize:13.5}}>ขั้นขออนุญาตการลา</div>
              <div className="tiny">ส่งคำขอไปยัง รองฯ วิชาการ → รองฯ บุคคล → ผู้อำนวยการ (แจ้งเตือนทาง LINE)</div>
            </div>
            <Btn variant="primary" icon="send" onClick={()=>onRequestApproval(first.groupId)}>ขออนุญาตลา</Btn>
          </div>
        ) : (
          <div className="appr-box">
            <div className="ab-hd"><Icon name="layers" size={14}/> สถานะการขออนุญาตลา</div>
            <ApprovalStepper approval={approval}/>
            <div className="appr-final">
              {approval.final==='approved' && <span className="badge b-ack"><Icon name="checkCircle" size={13}/> ผู้อำนวยการอนุญาตแล้ว</span>}
              {approval.final==='rejected' && <span className="badge b-reject"><Icon name="xCircle" size={13}/> ไม่ได้รับการอนุมัติ</span>}
              {approval.final==='pending' && <span className="badge b-pending"><span className="b-dot"/> อยู่ระหว่างพิจารณาของ {APPROVER_BY_ROLE[APPROVAL_CHAIN[approval.current]].short}</span>}
              {approval.chain.filter(s=>s.note).map((s,i)=>(
                <div key={i} className="tiny" style={{marginTop:5}}><b style={{color:'var(--ink-2)'}}>{APPROVER_BY_ROLE[s.role].short}:</b> “{s.note}”</div>
              ))}
            </div>
          </div>
        )}
      </div>
    </Card>
  );
}

function LeaveView({me, assignments, schedules, approvals, onSubmit, onRequestApproval}){
  const [mode, setMode] = React.useState('list');
  const mine = assignments.filter(a=>a.leaveTeacherId===me.id);
  const groups = {};
  mine.forEach(a=>{ (groups[a.groupId]=groups[a.groupId]||[]).push(a); });
  const groupList = Object.values(groups).sort((a,b)=> (b[0].createdAt||'').localeCompare(a[0].createdAt||''));

  if(mode==='form') return <LeaveForm me={me} schedules={schedules} onSubmit={(list)=>{onSubmit(list);setMode('list');}} onCancel={()=>setMode('list')}/>;

  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}}>{formalName(me)} · {me.primary}</p>
        </div>
        <Btn variant="primary" icon="plus" onClick={()=>setMode('form')}>แจ้งลา / ขอเปลี่ยนคาบสอน</Btn>
      </div>
      {groupList.length===0
        ? <Card><Empty icon="clipboard" title="ยังไม่มีรายการแจ้งลา" desc="กดปุ่ม “แจ้งลา / ขอเปลี่ยนคาบสอน” เพื่อเริ่ม"/></Card>
        : <div className="list-gap">{groupList.map((g,i)=><LeaveGroupCard key={i} group={g} approval={approvals[g[0].groupId]} onResend={()=>setMode('form')} onRequestApproval={onRequestApproval}/>)}</div>}
    </div>
  );
}

Object.assign(window, { LeaveView, LeaveForm, SubPicker, LeaveGroupCard });