/* ============================================================
   ApproverView.jsx — มุมผู้อนุมัติ (รองฯ วิชาการ / รองฯ บุคคล / ผอ.)
   ============================================================ */

function groupAssignments(assignments){
  const g = {};
  assignments.forEach(a=>{ (g[a.groupId]=g[a.groupId]||[]).push(a); });
  return g;
}

function ApprovalDecisionModal({group, approver, decision, onConfirm, onClose}){
  const [note, setNote] = React.useState('');
  const lt = teacherById(group[0].leaveTeacherId);
  const approve = decision==='approved';
  const presetReject = ['คาบสอนยังไม่มีครูสอนแทนครบ','เอกสารประกอบไม่ครบถ้วน','ติดภารกิจสำคัญของโรงเรียนในวันดังกล่าว','ขอให้ปรับวันสอนชดเชยใหม่'];
  return (
    <div className="modal-bg" onClick={onClose}>
      <div className="modal" onClick={e=>e.stopPropagation()}>
        <div className="modal-hd"><h3>{approve ? (approver.role==='director'?'อนุญาตการลา':'ให้ความเห็นชอบ (เห็นควรอนุญาต)') : 'ไม่อนุญาต / ส่งกลับ'}</h3>
          <div className="tiny" style={{marginTop:3}}>{fullTitle(lt)} · {REASONS.find(r=>r.id===group[0].reason).label} · {formatThaiDate(group[0].date,true)}</div>
        </div>
        <div className="modal-bd">
          {!approve && (
            <div className="flex wrap gap8" style={{marginBottom:12}}>
              {presetReject.map(p=><button key={p} className="badge b-done" style={{cursor:'pointer',border:'1px solid var(--brand-100)'}} onClick={()=>setNote(p)}>{p}</button>)}
            </div>
          )}
          <div className="field mb0">
            <label>{approve ? 'บันทึก / ความเห็นเพิ่มเติม (ถ้ามี)' : 'เหตุผลที่ไม่อนุญาต'}</label>
            <textarea className="ta" value={note} onChange={e=>setNote(e.target.value)} placeholder={approve?'เช่น เห็นควรอนุญาต':'ระบุเหตุผล…'} autoFocus={!approve}/>
          </div>
        </div>
        <div className="modal-ft">
          <Btn variant="ghost" onClick={onClose}>ยกเลิก</Btn>
          {approve
            ? <Btn variant="green" icon="checkCircle" onClick={()=>onConfirm(note.trim())}>{approver.role==='director'?'ยืนยันอนุญาต':'ยืนยันเห็นควรอนุญาต'}</Btn>
            : <Btn variant="danger" icon="xCircle" disabled={!note.trim()} onClick={()=>onConfirm(note.trim())}>ยืนยันไม่อนุญาต</Btn>}
        </div>
      </div>
    </div>
  );
}

function ApprovalCard({group, approval, approver, actionable, onAct}){
  const lt = teacherById(group[0].leaveTeacherId);
  const r = REASONS.find(x=>x.id===group[0].reason);
  const {periods, classes} = summarizeGroup(group);
  const myStepIndex = APPROVAL_CHAIN.indexOf(approver.role);
  return (
    <Card>
      <div style={{padding:'15px 18px 0',display:'flex',alignItems:'center',gap:12,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}}>· {lt.primary}</span></div>
          <div className="tiny flex ac gap8" style={{flexWrap:'wrap'}}><ReasonTag reason={group[0].reason}/> · ยื่นเมื่อ {approval.requestedAt?.replace('T',' ')}</div>
        </div>
        <StatusBadge status={approval.final==='approved'?'acknowledged':approval.final==='rejected'?'rejected':'pending'}/>
      </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(group[0].date,true)],
            ['คาบที่', `คาบ ${periods}`],
            ['ชั้น', classes],
            ['จำนวนคาบที่ลา', `${group.length} คาบ`],
          ].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>

        {/* รายการคาบ + ครูสอนแทน */}
        <div style={{marginTop:12}}>
          {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:28,height:28,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}}>{a.subject} · ชั้น {a.className}</div>
                    <div className="tiny">สอนแทนโดย {sub?fullTitle(sub):'—'} {sub && <StatusBadgeInline status={a.status}/>} · ชดเชย {formatThaiDate(a.makeupDate)} คาบ {a.makeupPeriod}</div>
                  </div>
                </div>
              </div>
            );
          })}
        </div>

        {/* stepper */}
        <div className="appr-box mt16">
          <div className="ab-hd"><Icon name="layers" size={14}/> ลำดับการพิจารณาอนุญาต</div>
          <ApprovalStepper approval={approval}/>
          {approval.chain.some(s=>s.note) && (
            <div className="appr-final">
              {approval.chain.filter(s=>s.note).map((s,i)=>(
                <div key={i} className="tiny" style={{marginBottom:3}}><b style={{color:'var(--ink-2)'}}>{APPROVER_BY_ROLE[s.role].short}:</b> “{s.note}”</div>
              ))}
            </div>
          )}
        </div>

        {/* LINE message preview */}
        <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)',whiteSpace:'pre-wrap'}}>
          <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>
          {buildApprovalMsg(group, approver.role)}
        </div>

        {actionable && (
          <div className="flex gap10 mt16" style={{justifyContent:'flex-end'}}>
            <Btn variant="danger" icon="xCircle" onClick={()=>onAct(group,'rejected')}>ไม่อนุญาต</Btn>
            <Btn variant="green" icon="checkCircle" onClick={()=>onAct(group,'approved')}>
              {approver.role==='director'?'อนุญาต':'เห็นควรอนุญาต'}
            </Btn>
          </div>
        )}
      </div>
    </Card>
  );
}

function StatusBadgeInline({status}){
  const map={acknowledged:['b-ack','รับทราบ'],rejected:['b-reject','ปฏิเสธ'],pending:['b-pending','รอสอนแทน']};
  const [c,l]=map[status]||map.pending;
  return <span className={`badge ${c}`} style={{fontSize:10,padding:'1px 7px',verticalAlign:'middle'}}>{l}</span>;
}

function ApproverView({approver, assignments, approvals, onDecide}){
  const [acting, setActing] = React.useState(null); // {group, decision}
  const groups = groupAssignments(assignments);
  const myIdx = APPROVAL_CHAIN.indexOf(approver.role);

  const entries = Object.entries(groups).map(([gid,group])=>({gid, group, ap:approvals[gid]})).filter(e=>e.ap);
  // คิวที่รอเราพิจารณา
  const queue = entries.filter(e=> e.ap.final==='pending' && APPROVAL_CHAIN[e.ap.current]===approver.role);
  // ประวัติที่เราพิจารณาไปแล้ว
  const history = entries.filter(e=> e.ap.chain[myIdx] && e.ap.chain[myIdx].status!=='pending')
    .sort((a,b)=> (b.ap.chain[myIdx].at||'').localeCompare(a.ap.chain[myIdx].at||''));

  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}}>{approver.title} — {approver.role==='director'?'พิจารณาอนุญาตขั้นสุดท้าย':'ให้ความเห็นชอบและส่งต่อขั้นถัดไป'}</p>
      </div>

      <div className="flex ac gap8" style={{margin:'2px 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>
        {queue.length>0 && <span className="badge b-pending num">{queue.length}</span>}
      </div>
      {queue.length===0
        ? <Card><Empty icon="checkCircle" title="ไม่มีคำขอรอพิจารณา" desc="คำขอใหม่จะแสดงที่นี่ พร้อมแจ้งเตือนทาง LINE"/></Card>
        : <div className="list-gap">{queue.map(e=><ApprovalCard key={e.gid} group={e.group} approval={e.ap} approver={approver} actionable onAct={(g,d)=>setActing({group:g,decision:d})}/>)}</div>}

      {history.length>0 && (
        <>
          <div className="flex ac gap8" style={{margin:'26px 0 10px'}}>
            <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">{history.map(e=><ApprovalCard key={e.gid} group={e.group} approval={e.ap} approver={approver} actionable={false}/>)}</div>
        </>
      )}

      {acting && (
        <ApprovalDecisionModal group={acting.group} approver={approver} decision={acting.decision}
          onClose={()=>setActing(null)}
          onConfirm={(note)=>{ onDecide(acting.group[0].groupId, acting.decision, note); setActing(null); }}/>
      )}
    </div>
  );
}

Object.assign(window, { ApproverView, ApprovalCard, ApprovalDecisionModal, StatusBadgeInline, groupAssignments });