/* ============================================================
   SubstituteView.jsx — มุมครูสอนแทน: กดรับทราบ / ปฏิเสธ
   ============================================================ */

function RejectModal({assignment, onConfirm, onClose}){
  const [reason, setReason] = React.useState('');
  const presets = ['ติดคุมสอบในคาบเดียวกัน','มีคาบสอนของตนเองในคาบนี้','ติดราชการ/อบรมนอกสถานที่','ลาในวันดังกล่าวเช่นกัน'];
  return (
    <div className="modal-bg" onClick={onClose}>
      <div className="modal" onClick={e=>e.stopPropagation()}>
        <div className="modal-hd"><h3>ปฏิเสธการสอนแทน</h3></div>
        <div className="modal-bd">
          <p style={{margin:'0 0 14px',fontSize:13.5,color:'var(--ink-2)'}}>
            คาบ {assignment.period} · ชั้น {assignment.className} · {formatThaiDate(assignment.date,true)}<br/>
            กรุณาระบุเหตุผล เพื่อบันทึกไว้ในระบบให้ครูที่ลารับทราบ
          </p>
          <div className="flex wrap gap8" style={{marginBottom:12}}>
            {presets.map(p=><button key={p} className="badge b-done" style={{cursor:'pointer',border:'1px solid var(--brand-100)'}} onClick={()=>setReason(p)}>{p}</button>)}
          </div>
          <textarea className="ta" placeholder="ระบุเหตุผล…" value={reason} onChange={e=>setReason(e.target.value)} autoFocus/>
        </div>
        <div className="modal-ft">
          <Btn variant="ghost" onClick={onClose}>ยกเลิก</Btn>
          <Btn variant="danger" icon="xCircle" disabled={!reason.trim()} onClick={()=>onConfirm(reason.trim())}>ยืนยันปฏิเสธ</Btn>
        </div>
      </div>
    </div>
  );
}

function SubCard({a, onAck, onRej}){
  const lt = teacherById(a.leaveTeacherId);
  const pending = a.status==='pending';
  return (
    <Card>
      <div style={{padding:'15px 18px 0',display:'flex',alignItems:'center',gap:11,flexWrap:'wrap'}}>
        <Avatar t={lt} size="md"/>
        <div className="grow" style={{minWidth:0}}>
          <div style={{fontWeight:600}}>{fullTitle(lt)} <span style={{fontWeight:400,color:'var(--ink-3)',fontSize:13}}>ขอให้สอนแทน</span></div>
          <div className="tiny flex ac gap8"><ReasonTag reason={a.reason}/> · แจ้งเมื่อ {a.createdAt?.replace('T',' ')}</div>
        </div>
        <StatusBadge status={a.status}/>
      </div>

      <div className="card-pad" style={{paddingTop:14}}>
        <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(130px,1fr))',gap:0,border:'1px solid var(--line-2)',borderRadius:12,overflow:'hidden'}}>
          {[
            ['วันที่สอนแทน',formatThaiDate(a.date,true)],
            ['คาบที่ / ชั้น',`คาบ ${a.period} · ${a.className}`],
            ['วิชา',`${a.subject} (${a.code})`],
            ['ครูที่ลากลับมาชดเชย',`${formatThaiDate(a.makeupDate)} · คาบ ${a.makeupPeriod}`],
          ].map(([k,v],i)=>(
            <div key={i} style={{padding:'11px 14px',borderRight:'1px solid var(--line-2)',borderBottom:'1px solid var(--line-2)'}}>
              <div className="tiny">{k}</div>
              <div style={{fontWeight:500,fontSize:13.5,marginTop:2}}>{v}</div>
            </div>
          ))}
        </div>

        {/* ข้อความ LINE ที่ได้รับ */}
        <div style={{marginTop:14,background:'#f4f7fc',border:'1px solid var(--line)',borderLeft:'3px solid var(--line-green)',borderRadius:'4px 10px 10px 4px',padding:'12px 14px',fontSize:13,lineHeight:1.6,color:'var(--ink-2)'}}>
          <div className="tiny" style={{color:'var(--line-green)',fontWeight:700,marginBottom:5,display:'flex',alignItems:'center',gap:5}}><Icon name="bell" size={13}/> ข้อความที่ได้รับทาง LINE</div>
          {buildRequestMsg(a)}
        </div>

        {a.status==='rejected' && (
          <div className="note-box mt12" style={{background:'var(--red-bg)',borderColor:'var(--red-line)',color:'var(--red)'}}>
            <Icon name="xCircle" size={17} style={{flex:'none'}}/><div>ท่านได้ปฏิเสธคาบนี้: “{a.rejectReason}”</div>
          </div>
        )}
        {a.status==='acknowledged' && (
          <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>ท่านรับทราบและยืนยันการสอนแทนแล้ว · สถานะได้บันทึกในระบบ ครูที่ลาสามารถตรวจสอบสถานะได้</div>
          </div>
        )}

        {pending && (
          <div className="flex gap10 mt16" style={{justifyContent:'flex-end'}}>
            <Btn variant="danger" icon="xCircle" onClick={()=>onRej(a)}>ปฏิเสธ</Btn>
            <Btn variant="green" icon="checkCircle" onClick={()=>onAck(a)}>รับทราบการสอนแทน</Btn>
          </div>
        )}
      </div>
    </Card>
  );
}

function SubstituteView({me, assignments, onAcknowledge, onReject}){
  const [rejecting, setRejecting] = React.useState(null);
  const mine = assignments.filter(a=>a.substituteId===me.id);
  const pending = mine.filter(a=>a.status==='pending');
  const decided = mine.filter(a=>a.status!=='pending').sort((a,b)=>(b.decidedAt||'').localeCompare(a.decidedAt||''));

  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}}>{formalName(me)} · {me.subject} — โปรดกดรับทราบหรือปฏิเสธคำขอ</p>
      </div>

      <div style={{marginBottom:10}} className="flex ac gap8">
        <Icon name="hourglass" size={17} style={{color:'var(--amber)',flex:'none'}}/>
        <b style={{fontFamily:'Kanit',fontSize:15,color:'var(--ink)',whiteSpace:'nowrap'}}>รอท่านกดรับทราบ</b>
        {pending.length>0 && <span className="badge b-pending num">{pending.length}</span>}
      </div>
      {pending.length===0
        ? <Card><Empty icon="checkCircle" title="ไม่มีคำขอค้างอยู่" desc="คำขอใหม่จะแสดงที่นี่ พร้อมแจ้งเตือนทาง LINE"/></Card>
        : <div className="list-gap">{pending.map(a=><SubCard key={a.id} a={a} onAck={onAcknowledge} onRej={setRejecting}/>)}</div>}

      {decided.length>0 && (
        <>
          <div style={{margin:'26px 0 10px'}} className="flex ac gap8">
            <Icon name="clipboard" size={17} style={{color:'var(--ink-3)',flex:'none'}}/>
            <b style={{fontFamily:'Kanit',fontSize:15,color:'var(--ink)',whiteSpace:'nowrap'}}>ประวัติการตอบรับ</b>
          </div>
          <div className="list-gap">{decided.map(a=><SubCard key={a.id} a={a} onAck={onAcknowledge} onRej={setRejecting}/>)}</div>
        </>
      )}

      {rejecting && (
        <RejectModal assignment={rejecting}
          onClose={()=>setRejecting(null)}
          onConfirm={(reason)=>{onReject(rejecting,reason);setRejecting(null);}}/>
      )}
    </div>
  );
}

Object.assign(window, { SubstituteView, SubCard, RejectModal });