/* ============================================================
   LeaveFormDoc.jsx — ใบลาอิเล็กทรอนิกส์ ตรงตามแบบฟอร์มจริงของโรงเรียน
   • ลาป่วย/ลากิจ/ลาคลอด/อื่นๆ  → "แบบใบลาป่วย ลาคลอดบุตร ลากิจส่วนตัว"
   • ไปราชการ                    → "บันทึกข้อความ ขออนุญาตไปราชการ"
   + แนบตารางมอบหมายการสอนแทน (หน้า 2) · พิมพ์ / บันทึก PDF
   ============================================================ */

const SCHOOL_NAME = 'โรงเรียนหนองตาคงพิทยาคาร';
const SCHOOL_FULL_ORG = 'โรงเรียนหนองตาคงพิทยาคาร สังกัดสำนักงานเขตพื้นที่การศึกษามัธยมศึกษาจันทบุรี ตราด สำนักงานคณะกรรมการการศึกษาขั้นพื้นฐาน กระทรวงศึกษาธิการ';

// ผู้ลงนามตามแบบฟอร์มจริง (แก้ไขได้ภายหลังหากมีการเปลี่ยนผู้ดำรงตำแหน่ง)
const FORM_SIGN = {
  inspector:      {name:'นางสาวณัฐกฤตา สุทธิวารี', pos:'ครูผู้ช่วย'},
  head_personnel: {name:'นางสาวธนพร ลิลากุด',       title:'หัวหน้ากลุ่มบริหารงานบุคคล'},
  head_academic:  {name:'นางสาวสุภาพร พลอยพานิชเจริญ', title:'หัวหน้ากลุ่มบริหารงานวิชาการ'},
  deputy:         {name:'นายประวิทย์ ศรีดาพันธ์',    title:'รองผู้อำนวยการโรงเรียน'},
  director:       {name:'นายบัณฑิต ศิริวรรณรักษ์',    title:'ผู้อำนวยการโรงเรียนหนองตาคงพิทยาคาร'},
};

function thaiDateParts(iso){
  if(!iso) return {day:'', month:'', year:''};
  const d = new Date(iso+'T00:00:00');
  return {day:d.getDate(), month:THAI_MONTHS[d.getMonth()], year:d.getFullYear()+543};
}
function leaveDocNo(group){
  const d = (group[0].date||'').replace(/-/g,'');
  const g = String(group[0].groupId||'').replace(/\D/g,'').slice(-3) || '001';
  return `นตค-${d}/${g}`;
}
// ช่องเติมข้อความแบบเส้นประ
 function Fill({v, w}){ return <u className="lf-fill" style={w?{minWidth:w}:null}>{v?` ${v} `:''}</u>; }
// วงเล็บกาเครื่องหมาย ( ✓ )
function Chk({on}){ return <span className="lf-paren">( {on?'✓':'\u00a0\u00a0'} )</span>; }
// ช่องกรอกข้อความแบบพิมพ์ได้ (บนจอแก้ไขได้ · ตอนพิมพ์แสดงเป็นข้อความบนเส้นประ)
function TextFill({value, onChange, w, ph}){
  return <input type="text" className="lf-inp" style={w?{width:w}:null} value={value||''} placeholder={ph||''} onChange={e=>onChange(e.target.value)}/>;
}
// ช่องเลือกวันที่ — บนจอเลือกได้ · ตอนพิมพ์แสดงวันที่ไทย
function DateFill({value, onChange}){
  const t = value ? thaiDateParts(value) : null;
  return (
    <span className="lf-datefield">
      <input type="date" className="lf-dinp" value={value||''} onChange={e=>onChange(e.target.value)}/>
      <span className="lf-dthai">{t?`${t.day} ${t.month} ${t.year}`:'..........................'}</span>
    </span>
  );
}
// นับจำนวนวัน (รวมวันเริ่มถึงวันสิ้นสุด)
function daysBetween(a,b){ if(!a||!b) return ''; const n=Math.round((new Date(b)-new Date(a))/86400000)+1; return n>0?n:''; }

// เก็บ/โหลดข้อมูลที่กรอกในใบลา (ต่อ 1 ใบลา) แยกตาม groupId
function useLeaveFormFill(groupId, defaults){
  const key = 'ntk_leaveform_'+groupId;
  const [data, setData] = React.useState(()=>{
    try{ const raw=localStorage.getItem(key); if(raw) return {...defaults, ...JSON.parse(raw)}; }catch(e){}
    return defaults;
  });
  const update = patch => setData(d=>{ const n={...d,...patch}; try{localStorage.setItem(key, JSON.stringify(n));}catch(e){} return n; });
  return [data, update];
}

function LeaveFormDoc({group, approval, approverRoles, me, assignments, onClose}){
  const first = group[0];
  const teacher = me || teacherById(first.leaveTeacherId);
  const reason = REASONS.find(r=>r.id===first.reason) || REASONS[0];
  const isGov = reason.id==='gov';
  const today = thaiDateParts(new Date().toISOString().slice(0,10));
  const dirApproved = approval && approval.final==='approved';
  const dirRejected = approval && approval.final==='rejected';
  // การลาครั้งล่าสุดของครูท่านนี้ (ก่อนวันที่ลาครั้งนี้)
  const prevLeave = React.useMemo(()=>{
    const mine = (assignments||[]).filter(a=>a.leaveTeacherId===teacher.id && a.date < first.date);
    if(!mine.length) return null;
    mine.sort((a,b)=> b.date.localeCompare(a.date));
    return mine[0];
  }, [assignments, teacher.id, first.date]);
  // ค่าเริ่มต้นของช่องกรอกข้อมูล
  const [fill, setFill] = useLeaveFormFill(first.groupId, {
    reasonText: (reason.id==='kit'||reason.id==='early') ? (reason.desc||'') : '',
    startDate: first.leaveStart || first.date,
    endDate: first.leaveEnd || first.date,
    contact: '',
    companions: [],
    govPurpose: reason.desc || '',
    govPlace: '',
  });
  const days = daysBetween(fill.startDate, fill.endDate);
  const dl = thaiDateParts(first.date);
  const ds = thaiDateParts(fill.startDate || first.date);
  const de = thaiDateParts(fill.endDate || first.date);
  // สตริงวันที่ไทยสำหรับวางทับฟอร์ม
  const pv = prevLeave ? thaiDateParts(prevLeave.date) : null;
  const pvStr = pv ? `${pv.day} ${pv.month} ${pv.year}` : '';
  const prevLabel = (prevLeave && (prevLeave.reason==='early'||prevLeave.reason==='gov')) ? (REASONS.find(r=>r.id===prevLeave.reason)||{}).label : '';

  return (
    <div className="lf-overlay">
      <div className="lf-toolbar">
        <button className="lf-x" onClick={onClose}><Icon name="x" size={17}/> ปิด</button>
        <div className="lf-tt"><Icon name="clipboard" size={15}/> ใบลาอิเล็กทรอนิกส์</div>
        <button className="lf-print" onClick={()=>window.print()}><Icon name="printer" size={15}/> พิมพ์ / บันทึก PDF</button>
      </div>

      <div className="lf-scroll">
        <div className={"lf-sheet"+(isGov?" lf-sheet-memo":" lf-sheet-slip")}>
          {isGov ? (
            /* ═══════════ บันทึกข้อความ ขออนุญาตไปราชการ ═══════════ */
            <div className="lf-doc lf-doc-memo">
              <div className="lf-memo-head">
                <image-slot id="memo-garuda" shape="rect" fit="contain" placeholder="วางตราครุฑ" class="lf-garuda" style={{width:'64px',height:'64px'}}></image-slot>
                <div className="lf-memo-title">บันทึกข้อความ</div>
              </div>
              <div className="lf-memo-meta">
                <div><b>ส่วนราชการ</b> {SCHOOL_NAME} อำเภอโป่งน้ำร้อน จังหวัดจันทบุรี</div>
                <div className="lf-memo-line2">
                  <span><b>ที่</b> ศธ 04247.16/<Fill w="70px"/></span>
                  <span><b>วันที่</b> <Fill v={`${today.day} ${today.month} ${today.year}`} w="150px"/></span>
                </div>
                <div><b>เรื่อง</b> ขออนุญาตไปราชการ</div>
                <div><b>เรียน</b> ผู้อำนวยการ{SCHOOL_NAME}</div>
              </div>

              <div className="lf-body">
                <p>ข้าพเจ้า <Fill v={formalName(teacher)} w="240px"/> ตำแหน่ง <Fill v="ครู" w="120px"/></p>
                <div className="lf-noindent lf-companions">
                  <span className="lf-comp-label">พร้อมด้วย</span>
                  <CompanionList list={fill.companions||[]} onChange={list=>setFill({companions:list})}/>
                </div>
                <p className="lf-noindent">ขออนุญาตไปราชการเพื่อ <TextFill value={fill.govPurpose} onChange={v=>setFill({govPurpose:v})} w="74%" ph="ระบุวัตถุประสงค์การไปราชการ"/></p>
                <p className="lf-noindent">และได้แนบสำเนาหนังสือต้นเรื่องมาด้วยแล้ว</p>
                <p className="lf-noindent">จึงขออนุญาตไปราชการ ตั้งแต่วันที่ <Fill v={`${ds.day} ${ds.month} ${ds.year}`} w="120px"/> ถึงวันที่ <Fill v={`${de.day} ${de.month} ${de.year}`} w="120px"/> รวม <Fill v={days} w="40px"/> วัน</p>
                <p className="lf-noindent">ณ <TextFill value={fill.govPlace} onChange={v=>setFill({govPlace:v})} w="90%" ph="สถานที่ไปราชการ"/></p>
                <p className="lf-noindent" style={{marginTop:10}}>จึงเรียนมาเพื่อโปรดทราบ</p>
              </div>

              <div className="lf-sign-applicant">
                <div>ลงชื่อ ................................................</div>
                <div className="lf-sign-name">( {formalName(teacher)} )</div>
                <div className="lf-sign-name">วันที่ {today.day} {today.month} {today.year}</div>
              </div>

              <div className="lf-grid2">
                <ApprBox title="ความเห็นหัวหน้ากลุ่มบริหารงานวิชาการ" lead="เห็นควร" sign={FORM_SIGN.head_academic}/>
                <ApprBox title="ความเห็นหัวหน้ากลุ่มบริหารงานบุคคล" sign={FORM_SIGN.head_personnel}/>
                <ApprBox title="ความเห็นของรองผู้อำนวยการโรงเรียน" sign={FORM_SIGN.deputy}/>
                <ApprBox title="ความเห็นของผู้อำนวยการโรงเรียน" sign={{name:FORM_SIGN.director.name, title:'ผู้อำนวยการโรงเรียน'}} approved={dirApproved} rejected={dirRejected}/>
              </div>
            </div>
          ) : (
            /* ═══════════ แบบใบลาป่วย ลาคลอดบุตร ลากิจส่วนตัว (HTML) ═══════════ */
            <div className="lf-doc lf-doc-slip">
              <div className="lf-slip-title">แบบใบลาป่วย ลาคลอดบุตร ลากิจส่วนตัว</div>

              <div className="lf-date-top">วันที่ <Fill v={today.day} w="34px"/> เดือน <Fill v={today.month} w="120px"/> พ.ศ. <Fill v={today.year} w="56px"/></div>
              <div className="lf-row"><b>เรื่อง</b> <Fill v={`ขอ${reason.verb}`} w="240px"/></div>
              <div className="lf-row"><b>เรียน</b> ผู้อำนวยการ{SCHOOL_NAME}</div>

              <div className="lf-body">
                <p>ข้าพเจ้า <Fill v={formalName(teacher)} w="250px"/> ตำแหน่ง <Fill v="ครู" w="150px"/></p>
                <p className="lf-noindent lf-org">{SCHOOL_FULL_ORG}</p>
              </div>

              <div className="lf-leave-checks">
                <div><Chk on={reason.id==='sick'}/> ลาป่วย</div>
                <div className="lf-check-inline"><Chk on={reason.id==='kit'}/> ลากิจส่วนตัว เนื่องจาก <TextFill value={reason.id==='kit'?fill.reasonText:''} onChange={v=>setFill({reasonText:v})} w="320px" ph="ระบุเหตุผลการลา"/></div>
                <div><Chk on={false}/> คลอดบุตร</div>
                <div className="lf-check-inline"><Chk on={reason.id==='early'}/> อื่นๆ <TextFill value={reason.id==='early'?fill.reasonText:''} onChange={v=>setFill({reasonText:v})} w="350px" ph={reason.id==='early'?'ขอออกก่อนเวลา — ระบุเหตุผล':''}/></div>
              </div>

              <div className="lf-body">
                <p className="lf-noindent lf-dateline">ตั้งแต่วันที่ <DateFill value={fill.startDate} onChange={v=>setFill({startDate:v})}/> ถึงวันที่ <DateFill value={fill.endDate} onChange={v=>setFill({endDate:v})}/> มีกำหนด <b className="lf-days">{days||'.....'}</b> วัน</p>
                <p className="lf-noindent">ข้าพเจ้าได้ลา <Chk on={prevLeave && prevLeave.reason==='sick'}/> ลาป่วย <Chk on={prevLeave && prevLeave.reason==='kit'}/> ลากิจ <Chk on={false}/> ลาคลอดบุตร <Chk on={prevLabel}/> อื่นๆ <Fill v={prevLabel} w="110px"/></p>
                <p className="lf-noindent">ครั้งสุดท้ายตั้งแต่วันที่ <Fill v={pvStr} w="150px"/> ถึงวันที่ <Fill v={pvStr} w="150px"/> มีกำหนด <Fill v={prevLeave?'1':''} w="34px"/> วัน</p>
                <p className="lf-noindent">ในระหว่างลาจะติดต่อข้าพเจ้าได้ที่ <TextFill value={fill.contact} onChange={v=>setFill({contact:v})} w="55%" ph="เบอร์โทรศัพท์ / ที่อยู่ที่ติดต่อได้"/></p>
              </div>

              <div className="lf-sign-applicant">
                <div>ขอแสดงความนับถือ</div>
                <div style={{marginTop:6}}>ลงชื่อ ................................................</div>
                <div className="lf-sign-name">( {formalName(teacher)} )</div>
              </div>

              <div className="lf-stats">
                <StatTable label="สถิติการลาในปีงบประมาณ ครั้งที่ 1 (1 ต.ค. ......... - 31 มี.ค. .........)"/>
                <StatTable label="สถิติการลาในปีงบประมาณ ครั้งที่ 2 (1 เม.ย. ......... - 30 ก.ย. .........)"/>
              </div>

              <div className="lf-inspector">
                <div>ลงชื่อ ................................................ ผู้ตรวจ</div>
                <div className="lf-sign-name">( {FORM_SIGN.inspector.name} )</div>
                <div className="lf-cmd-title">ตำแหน่ง {FORM_SIGN.inspector.pos}</div>
              </div>

              <div className="lf-cmd-grid">
                <div className="lf-cmd">
                  <div className="lf-cmd-h">ความเห็นหัวหน้ากลุ่มบริหารงานบุคคล</div>
                  <div className="lf-cmd-lines"><Fill w="100%"/></div>
                  <div className="lf-cmd-sign">ลงชื่อ ......................................................</div>
                  <div className="lf-sign-name">( {FORM_SIGN.head_personnel.name} )</div>
                  <div className="lf-cmd-title">{FORM_SIGN.head_personnel.title}</div>
                </div>
                <div className="lf-cmd">
                  <div className="lf-cmd-h">คำสั่ง</div>
                  <div className="lf-cmd-opts"><span><Chk on={dirApproved}/> อนุญาต</span><span><Chk on={dirRejected}/> ไม่อนุญาต</span></div>
                  <div className="lf-cmd-sign" style={{marginTop:24}}>ลงชื่อ ......................................................</div>
                  <div className="lf-sign-name">( {FORM_SIGN.director.name} )</div>
                  <div className="lf-cmd-title">{FORM_SIGN.director.title}</div>
                </div>
              </div>
            </div>
          )}

          {/* ═══════════ หน้า 2 : เอกสารแนบ — การมอบหมายสอนแทน ═══════════ */}
          <div className="lf-attach">
            <div className="lf-attach-h">เอกสารแนบ — การมอบหมายการสอนแทนและการสอนชดเชย</div>
            <div className="lf-attach-sub">แนบท้าย{isGov?'บันทึกข้อความขออนุญาตไปราชการ':'ใบลา'}เลขที่ {leaveDocNo(group)} · {formalName(teacher)} · วัน{formatThaiDate(first.date,true)}</div>
            <table className="lf-table">
              <thead>
                <tr><th>คาบที่</th><th>รหัสวิชา</th><th>วิชา</th><th>ชั้น</th><th>ครูผู้สอนแทน</th><th>วันที่สอนชดเชย</th><th>คาบที่</th></tr>
              </thead>
              <tbody>
                {group.slice().sort((a,b)=>a.period-b.period).map(a=>{
                  const sub = teacherById(a.substituteId);
                  return (
                    <tr key={a.id}>
                      <td className="c">{a.period}</td>
                      <td className="c">{a.code||'—'}</td>
                      <td>{a.subject}</td>
                      <td className="c">{a.className}</td>
                      <td>{a.status==='awaiting_chair' ? <i>รอประธานกลุ่มสาระจัด</i> : (sub?formalName(sub):'—')}</td>
                      <td className="c">{a.makeupDate?formatThaiDate(a.makeupDate):'—'}</td>
                      <td className="c">{a.makeupPeriod||'—'}</td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
            <div className="lf-attach-note">ข้าพเจ้าได้มอบหมายครูผู้สอนแทนครบทุกคาบเรียน และจะกลับมาปฏิบัติการสอนชดเชยตามตารางข้างต้น เพื่อมิให้กระทบต่อการเรียนของนักเรียน</div>
            <div className="lf-sign-applicant">
              <div>ลงชื่อ ................................................ ผู้ขอลา</div>
              <div className="lf-sign-name">( {formalName(teacher)} )</div>
            </div>
            <div className="lf-foot">เอกสารนี้จัดทำโดยระบบการลา (Leave Control System) {SCHOOL_NAME} · พิมพ์เมื่อ {today.day} {today.month} {today.year}</div>
          </div>
        </div>
      </div>
    </div>
  );
}

/* รายชื่อผู้ไปราชการด้วย — เพิ่ม/ลบ/พิมพ์ชื่อได้ */
function CompanionList({list, onChange}){
  const add = ()=> onChange([...(list||[]), '']);
  const set = (i,v)=>{ const n=[...list]; n[i]=v; onChange(n); };
  const del = (i)=> onChange(list.filter((_,j)=>j!==i));
  if(!list || list.length===0){
    return <button className="lf-comp-add" onClick={add} type="button"><Icon name="plus" size={13}/> เพิ่มชื่อผู้ไปราชการด้วย</button>;
  }
  return (
    <span className="lf-comp-items">
      {list.map((name,i)=>(
        <span className="lf-comp-item" key={i}>
          <span className="lf-comp-num">{i+1}.</span>
          <input className="lf-inp lf-comp-inp" value={name} placeholder="ชื่อ-นามสกุล / ตำแหน่ง" onChange={e=>set(i,e.target.value)}/>
          <button className="lf-comp-del" type="button" title="ลบ" onClick={()=>del(i)}><Icon name="x" size={12}/></button>
        </span>
      ))}
      <button className="lf-comp-add" onClick={add} type="button"><Icon name="plus" size={13}/> เพิ่มอีก</button>
    </span>
  );
}

/* ความเห็น 1 ช่อง (ใช้ในบันทึกข้อความไปราชการ) */
function ApprBox({title, lead, sign, approved, rejected}){
  return (
    <div className="lf-appr">
      <div className="lf-appr-h">{title}</div>
      <div className="lf-appr-lines"><Fill w="100%"/></div>
      <div className="lf-appr-opts">{lead?lead+' ':''}<Chk on={!!approved}/> อนุญาต &nbsp; <Chk on={!!rejected}/> ไม่อนุญาต</div>
      <div className="lf-appr-sign">(ลงชื่อ) ...............................................</div>
      <div className="lf-sign-name">( {sign.name} )</div>
      {sign.title && <div className="lf-cmd-title">{sign.title}</div>}
      <div className="lf-appr-date">.........../.........../...........</div>
    </div>
  );
}

/* ตารางสถิติการลา (ว่างให้เจ้าหน้าที่กรอก) */
function StatTable({label}){
  return (
    <table className="lf-stat-tb">
      <thead>
        <tr><th rowSpan={2}>ประเภทการลา</th><th colSpan={2}>ลามาแล้ว</th><th colSpan={2}>ลาครั้งนี้</th><th colSpan={2}>รวมเป็น</th></tr>
        <tr><th>ครั้ง</th><th>วันทำการ</th><th>ครั้ง</th><th>วันทำการ</th><th>ครั้ง</th><th>วันทำการ</th></tr>
      </thead>
      <tbody>
        {['ลาป่วย','ลากิจ','ลาคลอด','อื่นๆ'].map(r=>(
          <tr key={r}><td>{r}</td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
        ))}
      </tbody>
      <caption>{label}</caption>
    </table>
  );
}

Object.assign(window, { LeaveFormDoc });