/* =========================================================================
   payslip.jsx — Payslip generator + A5 print, Settings
   ========================================================================= */

/* ====================== PAYSLIP ====================== */
function PayslipDoc({ p, settings }){
  const w = p.worker;
  const fmtD = s => { const d=parseYMD(s); return d.getDate()+' '+TH_MONTHS_SHORT[d.getMonth()]; };
  const isDaily = w.type==='daily';
  const rows = [
    [isDaily ? ('ค่าแรงรายวัน × '+num(p.dayUnits,1)+' วัน @ '+baht(w.dailyRate,0)) : 'เงินเดือน (ครึ่งงวด)', p.base, false],
    ['ค่าล่วงเวลา OT ('+num(p.otHours)+' ชม.)', p.otPay, false],
  ];
  const deds = [
    ...(p.dailyAdvance>0 ? [['เบิกระหว่างงวด (กิน-ใช้ รายวัน)', p.dailyAdvance]] : []),
    ...p.adjs.map(a=> [a.label, a.amount]),
  ];

  const siteList = Object.entries(p.bySite).map(([sid,v])=>({ s: (window.__sites||[]).find(x=>x.id===sid), v }));

  return (
    <div className="bg-white text-[#1a1a1a] w-full" style={{fontFamily:"'IBM Plex Sans Thai', sans-serif"}}>
      {/* header */}
      <div className="relative">
        <div className="h-2 brand-strip"></div>
        <div className="px-8 pt-6 pb-4 flex items-start justify-between border-b-2 border-[#1a1a1a]">
          <div>
            <div className="font-display font-extrabold text-xl leading-tight" style={{color:'#92500f'}}>{settings.company}</div>
            <div className="text-[11px] text-[#555] mt-1 max-w-[280px] leading-snug">{settings.address}</div>
            <div className="text-[11px] text-[#555] num mt-0.5">เลขประจำตัวผู้เสียภาษี {settings.taxId} · โทร {settings.phone}</div>
          </div>
          <div className="text-right">
            <div className="font-display font-bold text-lg whitespace-nowrap">สลิปเงินเดือน</div>
            <div className="text-[11px] text-[#777]">PAYSLIP</div>
            <div className="text-[12px] mt-1 font-semibold whitespace-nowrap">{p.period.label}</div>
            <div className="text-[10px] text-[#777] num whitespace-nowrap">{p.period.range}</div>
          </div>
        </div>
      </div>

      {/* employee info */}
      <div className="px-8 py-4 grid grid-cols-2 gap-x-6 gap-y-1.5 text-[12.5px] border-b border-[#ddd] [&_span]:whitespace-nowrap">
        <div className="flex justify-between gap-2"><span className="text-[#777]">ชื่อพนักงาน</span><span className="font-semibold">{w.name}</span></div>
        <div className="flex justify-between gap-2"><span className="text-[#777]">รหัสพนักงาน</span><span className="num">{w.code}</span></div>
        <div className="flex justify-between gap-2"><span className="text-[#777]">ประเภทการจ้าง</span><span className="font-semibold">{TYPE[w.type].th}</span></div>
        <div className="flex justify-between gap-2"><span className="text-[#777]">กลุ่มแรงงาน</span><span>{w.group||'—'}</span></div>
        <div className="flex justify-between gap-2 col-span-2"><span className="text-[#777]">หน้างานที่ปฏิบัติงาน</span><span className="text-right !whitespace-normal">{siteList.map(x=>x.s?.name).filter(Boolean).join(', ')||'—'}</span></div>
        {w.bankAccount && <div className="flex justify-between gap-2 col-span-2"><span className="text-[#777]">ชำระโดยโอนเข้าบัญชี</span><span className="num">{w.bankName} {w.bankAccount}</span></div>}
      </div>

      {/* daily attendance detail */}
      {isDaily && (
        <div className="px-8 py-3 border-b border-[#ddd] text-[11.5px]">
          <div className="font-bold text-[#92500f] mb-1.5">รายละเอียดการลงเวลา (รายวัน)</div>
          <div className="flex gap-2 mb-1"><span className="text-[#777] w-24 shrink-0">มาเต็มวัน ({p.fullDays.length})</span><span className="text-[#333]">{p.fullDays.map(fmtD).join(', ')||'—'}</span></div>
          <div className="flex gap-2 mb-1"><span className="text-[#777] w-24 shrink-0">มาครึ่งวัน ({p.halfDays.length})</span><span className="text-[#333]">{p.halfDays.map(fmtD).join(', ')||'—'}</span></div>
          {p.absentDays.length>0 && <div className="flex gap-2"><span className="text-[#777] w-24 shrink-0">ขาดงาน ({p.absentDays.length})</span><span className="text-[#b3261e]">{p.absentDays.map(fmtD).join(', ')}</span></div>}
        </div>
      )}

      {/* earnings / deductions */}
      <div className="px-8 py-4 grid grid-cols-2 gap-6">
        <div>
          <div className="text-[11px] font-bold uppercase tracking-wide text-[#92500f] border-b border-[#1a1a1a] pb-1 mb-2">รายได้</div>
          {rows.map(([l,v])=> v>0 && (
            <div key={l} className="flex justify-between gap-2 text-[12.5px] py-1"><span className="text-[#444]">{l}</span><span className="num whitespace-nowrap">{baht(v)}</span></div>
          ))}
          <div className="flex justify-between text-[13px] font-bold border-t border-[#ccc] mt-1 pt-1.5 whitespace-nowrap"><span>รวมรายได้</span><span className="num">{baht(p.gross)}</span></div>
        </div>
        <div>
          <div className="text-[11px] font-bold uppercase tracking-wide text-[#b3261e] border-b border-[#1a1a1a] pb-1 mb-2">รายการหัก</div>
          {deds.length===0 && <div className="text-[12.5px] text-[#999] py-1">— ไม่มีรายการหัก —</div>}
          {deds.map(([l,v],i)=>(
            <div key={i} className="flex justify-between gap-2 text-[12.5px] py-1"><span className="text-[#444]">{l}</span><span className="num whitespace-nowrap">{baht(v)}</span></div>
          ))}
          <div className="flex justify-between text-[13px] font-bold border-t border-[#ccc] mt-1 pt-1.5 whitespace-nowrap"><span>รวมรายการหัก</span><span className="num">{baht(p.deductions)}</span></div>
        </div>
      </div>

      {/* net */}
      <div className="mx-8 my-2 rounded-lg px-5 py-3 flex items-center justify-between" style={{background:'#101216',color:'#E8852B'}}>
        <span className="font-display font-bold text-[15px] text-white whitespace-nowrap">เงินสุทธิที่ได้รับ</span>
        <span className="num font-display font-extrabold text-2xl">{baht(p.net)}</span>
      </div>

      {/* footer */}
      <div className="px-8 pt-3 pb-6">
        <div className="text-[11px] text-[#777] mb-6">{settings.slipNote}</div>
        <div className="grid grid-cols-2 gap-10 text-center text-[11px] text-[#555]">
          <div className="border-t border-[#999] pt-1.5">ลายมือชื่อผู้รับเงิน</div>
          <div className="border-t border-[#999] pt-1.5">ลายมือชื่อผู้จ่ายเงิน</div>
        </div>
      </div>
    </div>
  );
}

function Payslip({ slip, setSlip }){
  const { db } = useDB();
  window.__sites = db.sites;
  const [period,setPeriod] = uS(slip?.period || currentPeriod());
  const [workerId,setWorkerId] = uS(slip?.workerId || db.workers[0]?.id);
  uE(()=>{ if(slip){ if(slip.period) setPeriod(slip.period); setWorkerId(slip.workerId); } },[slip]);

  const p = workerId ? computePayroll(db, workerId, period) : null;

  const doPrint = ()=>{
    if(!p){ alert('ยังไม่มีข้อมูลสลิป กรุณาเลือกคนงานก่อน'); return; }
    try{
      // 1) เรนเดอร์สลิปลง container ชั่วคราว (offscreen) เพื่อดึง HTML พร้อมคลาส Tailwind
      const holder = document.createElement('div');
      holder.style.cssText = 'position:fixed;left:-99999px;top:0;width:520px;';
      document.body.appendChild(holder);
      const hroot = ReactDOM.createRoot(holder);
      hroot.render(<PayslipDoc p={p} settings={db.settings}/>);

      requestAnimationFrame(()=> requestAnimationFrame(()=>{
        try{
          const slipHTML = holder.innerHTML;
          // 2) รวบรวม CSS ทั้งหมดในหน้า (Tailwind ที่ generate แล้ว + สไตล์ของเรา)
          let css='';
          document.querySelectorAll('style').forEach(s=>{ css += s.textContent + '\n'; });
          // 3) สร้าง iframe ซ่อนแล้วพิมพ์จากในนั้น (ไม่โดนป๊อปอัปบล็อก / ไม่ชน CSS หน้าหลัก)
          const old = document.getElementById('print-frame'); if(old) old.remove();
          const iframe = document.createElement('iframe');
          iframe.id = 'print-frame';
          iframe.setAttribute('aria-hidden','true');
          iframe.style.cssText = 'position:fixed;right:0;bottom:0;width:0;height:0;border:0;visibility:hidden;';
          document.body.appendChild(iframe);
          const idoc = iframe.contentWindow.document;
          idoc.open();
          idoc.write(
            '<!DOCTYPE html><html lang="th"><head><meta charset="utf-8"/>'
            + '<link href="https://fonts.googleapis.com/css2?family=Kanit:wght@400;500;600;700;800&family=IBM+Plex+Sans+Thai:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap" rel="stylesheet"/>'
            + '<style>' + css
            + ' @page{size:A5;margin:7mm;} html,body{background:#fff;margin:0;padding:0;}'
            + ' body{-webkit-print-color-adjust:exact;print-color-adjust:exact;}'
            + ' @media print{ body, body *{ visibility:visible !important; } }'  // ยกเลิกกฎซ่อนของหน้าหลัก
            + '</style></head><body>' + slipHTML + '</body></html>'
          );
          idoc.close();
          const cleanup = ()=>{ const f=document.getElementById('print-frame'); if(f) f.remove(); try{ hroot.unmount(); }catch(_){} if(holder.parentNode) holder.parentNode.removeChild(holder); };
          const fire = ()=>{
            try{ iframe.contentWindow.focus(); iframe.contentWindow.print(); }
            catch(e){ window.print(); }
            setTimeout(cleanup, 1500);
          };
          // รอฟอนต์/สไตล์โหลดสักครู่แล้วค่อยพิมพ์
          setTimeout(fire, 450);
        }catch(e){ if(holder.parentNode) holder.parentNode.removeChild(holder); try{ window.print(); }catch(_){ alert('พิมพ์ไม่สำเร็จ: '+e.message+' — ลองกด Ctrl+P'); } }
      }));
    }catch(e){ alert('เกิดข้อผิดพลาดตอนพิมพ์: '+e.message+' — ลองกด Ctrl+P'); }
  };

  return (
    <div data-screen>
      <PageHead title="ออกสลิปเงินเดือน" sub="เลือกคนงานและงวด ดูตัวอย่าง แล้วพิมพ์ขนาด A5"
        actions={<Button icon="print" onClick={doPrint} disabled={!p}>พิมพ์สลิป</Button>} />

      <div className="grid lg:grid-cols-[320px_1fr] gap-6">
        {/* controls */}
        <div className="space-y-4">
          <Card>
            <div className="space-y-4">
              <Field label="งวด (รอบตัดวิก)"><PeriodPicker value={period} onChange={setPeriod}/></Field>
              <Field label="เลือกคนงาน">
                <Select value={workerId} onChange={e=>setWorkerId(e.target.value)}>
                  {db.workers.map(w=><option key={w.id} value={w.id}>{w.name} ({TYPE[w.type].short})</option>)}
                </Select>
              </Field>
            </div>
          </Card>
          {p && (
            <Card>
              <div className="text-xs font-semibold text-haze uppercase tracking-wide mb-3">สรุปอย่างย่อ</div>
              <div className="space-y-2 text-sm">
                <div className="flex justify-between"><span className="text-haze">รวมรายได้</span><span className="num">{baht(p.gross)}</span></div>
                <div className="flex justify-between"><span className="text-haze">รวมรายการหัก</span><span className="num text-bad">−{baht(p.deductions)}</span></div>
                <div className="flex justify-between border-t border-line pt-2 font-display font-bold"><span>สุทธิ</span><span className="num text-brand">{baht(p.net)}</span></div>
              </div>
            </Card>
          )}
          <div className="text-xs text-haze flex items-start gap-2 px-1">
            <Icon name="warn" size={15} className="text-hazard mt-0.5 shrink-0"/>
            หัวบิลและรายละเอียดบริษัทแก้ไขได้ที่หน้า "ตั้งค่า"
          </div>
        </div>

        {/* preview */}
        <div>
          <div className="text-xs text-haze mb-2 flex items-center gap-1.5"><Icon name="slip" size={14}/>ตัวอย่างสลิป (ขนาด A5)</div>
          {p ? (
            <div className="bg-[#3a3a3a] rounded-xl p-4 sm:p-8 overflow-x-auto">
              <div className="mx-auto shadow-pop" style={{width:'520px',maxWidth:'100%'}}>
                <PayslipDoc p={p} settings={db.settings}/>
              </div>
            </div>
          ) : <Card><Empty title="ไม่พบข้อมูล" sub="เลือกคนงานเพื่อสร้างสลิป"/></Card>}
        </div>
      </div>
    </div>
  );
}

/* ====================== WORK TYPES MANAGER (เพิ่ม/แก้/ลบ ประเภทงาน) ====================== */
function WorkTypeModal({ open, onClose, initial }){
  const { saveWorkType } = useDB();
  const blank = { id:null, name:'', group:'structure', std:0 };
  const [t,setT] = uS(blank);
  uE(()=>{ if(open) setT(initial?{...initial, group:initial.group||initial.grp}:blank); },[open,initial]);
  const f=(k,v)=>setT(p=>({...p,[k]:v}));
  const save=()=>{ if(!t.name.trim()) return; saveWorkType(t); onClose(); };
  return (
    <Modal open={open} onClose={onClose} title={initial?'แก้ไขประเภทงาน':'เพิ่มประเภทงานใหม่'}
      footer={<><Button variant="ghost" onClick={onClose}>ยกเลิก</Button><Button icon="check" onClick={save}>บันทึก</Button></>}>
      <div className="space-y-4">
        <Field label="ชื่อประเภทงาน" req><Input value={t.name} onChange={e=>f('name',e.target.value)} placeholder="เช่น งานเทพื้นโรงงาน"/></Field>
        <Field label="หมวดงาน" req>
          <Select value={t.group} onChange={e=>f('group',e.target.value)}>
            {WORK_GROUPS.map(g=><option key={g.key} value={g.key}>{g.th}</option>)}
          </Select>
        </Field>
        <Field label="เกณฑ์มาตรฐาน (วัน-คน ต่อ 1 หน่วยงาน)" hint="ใช้เทียบประสิทธิภาพในหน้า 'สถิติงาน' — ใส่ 0 ถ้าไม่มีเกณฑ์">
          <NumberInput value={t.std||0} onChange={v=>f('std',v)} step={1} blankZero/>
        </Field>
      </div>
    </Modal>
  );
}

function WorkTypesManager(){
  const { db, removeWorkType } = useDB();
  const [modal,setModal]=uS(false);
  const [editing,setEditing]=uS(null);
  const types = db.workTypes||[];
  return (
    <Card>
      <div className="flex items-center justify-between gap-2 mb-4">
        <div className="flex items-center gap-2">
          <div className="w-9 h-9 rounded-lg bg-brand/12 border border-brand/30 text-brand flex items-center justify-center"><Icon name="site" size={18}/></div>
          <div>
            <h2 className="font-display font-bold text-lg">หมวด / ประเภทงาน</h2>
            <p className="text-haze text-sm">เพิ่ม แก้ไข หรือลบประเภทงานที่ใช้ตอนลงเวลา ({types.length} รายการ)</p>
          </div>
        </div>
        <Button size="sm" icon="plus" onClick={()=>{setEditing(null);setModal(true);}}>เพิ่ม</Button>
      </div>
      <div className="space-y-4">
        {WORK_GROUPS.map(g=>{
          const list = types.filter(t=>(t.group||t.grp)===g.key);
          if(list.length===0) return null;
          return (
            <div key={g.key}>
              <div className="mb-2"><Badge tone={g.tone}>{g.th}</Badge></div>
              <div className="grid sm:grid-cols-2 gap-2">
                {list.map(t=>(
                  <div key={t.id} className="flex items-center gap-2 bg-ink border border-line rounded-lg px-3 py-2 group">
                    <span className="flex-1 min-w-0 text-sm truncate">{t.name}</span>
                    {t.std>0 && <span className="num text-xs text-haze shrink-0">เกณฑ์ {num(t.std)} วัน</span>}
                    <button onClick={()=>{setEditing(t);setModal(true);}} className="tap p-1.5 text-haze hover:text-brand rounded shrink-0"><Icon name="edit" size={15}/></button>
                    <button onClick={()=>{ if(confirm(`ลบประเภทงาน "${t.name}"?`)) removeWorkType(t.id); }} className="tap p-1.5 text-haze hover:text-bad rounded shrink-0"><Icon name="trash" size={15}/></button>
                  </div>
                ))}
              </div>
            </div>
          );
        })}
      </div>
      <div className="text-xs text-haze mt-4 flex items-start gap-2"><Icon name="warn" size={14} className="text-hazard mt-0.5 shrink-0"/>การลบประเภทงานจะไม่กระทบการลงเวลาเดิมที่บันทึกไว้แล้ว แต่จะไม่แสดงให้เลือกในรายการใหม่</div>
      <WorkTypeModal open={modal} onClose={()=>setModal(false)} initial={editing}/>
    </Card>
  );
}

/* ====================== HOLIDAYS MANAGER (วันหยุด) ====================== */
function HolidaysManager(){
  const { db, saveHoliday, removeHoliday } = useDB();
  const [date,setDate]=uS('');
  const [name,setName]=uS('');
  const [reason,setReason]=uS('');
  const add=()=>{ if(!date||!name.trim()) return; saveHoliday({ date, name:name.trim(), reason:reason.trim() }); setDate('');setName('');setReason(''); };
  const list = [...(db.holidays||[])].sort((a,b)=>a.date<b.date?1:-1);
  const presets = ['ฝนตก ทำงานไม่ได้','วันพระใหญ่','วันแรงงานแห่งชาติ','สั่งหยุด (เหตุพิเศษ)'];
  return (
    <Card>
      <div className="flex items-center gap-2 mb-4">
        <div className="w-9 h-9 rounded-lg bg-warn/12 border border-warn/30 text-warn flex items-center justify-center"><Icon name="calendar" size={18}/></div>
        <div>
          <h2 className="font-display font-bold text-lg">วันหยุด (ทุกคนหยุด)</h2>
          <p className="text-haze text-sm">ฝนตก · วันพระใหญ่ · วันแรงงาน · วันสั่งหยุด — วันหยุดจะขึ้นเตือนในหน้าลงเวลา</p>
        </div>
      </div>

      <div className="bg-ink border border-line rounded-lg p-4 mb-4">
        <div className="grid sm:grid-cols-[150px_1fr] gap-3">
          <Field label="วันที่" req><Input type="date" value={date} onChange={e=>setDate(e.target.value)} className="[color-scheme:dark]"/></Field>
          <Field label="ชื่อวันหยุด" req><Input value={name} onChange={e=>setName(e.target.value)} placeholder="เช่น วันแรงงานแห่งชาติ"/></Field>
        </div>
        <div className="mt-3"><Field label="เหตุผล / หมายเหตุ"><Input value={reason} onChange={e=>setReason(e.target.value)} placeholder="เช่น สั่งหยุดเพราะฝนตกหนัก"/></Field></div>
        <div className="flex flex-wrap items-center gap-2 mt-3">
          {presets.map(p=><button key={p} onClick={()=>setName(p)} className="tap text-xs px-2.5 py-1 rounded-md border border-line text-haze hover:text-chalk hover:border-haze/50">{p}</button>)}
          <div className="flex-1"></div>
          <Button size="sm" icon="plus" onClick={add} disabled={!date||!name.trim()}>เพิ่มวันหยุด</Button>
        </div>
      </div>

      {list.length===0 ? <div className="text-haze text-sm text-center py-4">ยังไม่มีวันหยุดที่กำหนด</div> : (
        <div className="space-y-2">
          {list.map(h=>(
            <div key={h.date} className="flex items-center gap-3 bg-ink border border-line rounded-lg px-3 py-2.5 group">
              <div className="w-9 h-9 rounded-lg bg-warn/10 border border-warn/30 text-warn flex flex-col items-center justify-center shrink-0 leading-none">
                <span className="num text-sm font-bold">{h.date.slice(8)}</span>
                <span className="text-[9px]">{TH_MONTHS_SHORT[parseYMD(h.date).getMonth()]}</span>
              </div>
              <div className="flex-1 min-w-0">
                <div className="font-medium text-sm truncate">{h.name}</div>
                <div className="text-xs text-haze truncate">{thaiDate(h.date)}{h.reason?` · ${h.reason}`:''}</div>
              </div>
              <button onClick={()=>{ if(confirm(`ลบวันหยุด "${h.name}" (${thaiDate(h.date)})?`)) removeHoliday(h.date); }} className="tap p-1.5 text-haze hover:text-bad rounded shrink-0"><Icon name="trash" size={15}/></button>
            </div>
          ))}
        </div>
      )}
    </Card>
  );
}

/* ====================== SETTINGS ====================== */
function Settings(){
  const { db, saveSettings, resetAll } = useDB();
  const [s,setS] = uS(db.settings);
  const [saved,setSaved] = uS(false);
  uE(()=>{ setS(db.settings); },[db.settings]);
  const f=(k,v)=>setS(p=>({...p,[k]:v}));
  const save=()=>{ saveSettings(s); setSaved(true); setTimeout(()=>setSaved(false),1800); };

  return (
    <div data-screen className="max-w-3xl">
      <PageHead title="ตั้งค่าระบบ" sub="แก้ไขหัวบิลสลิป ข้อมูลบริษัท และค่าคำนวณเงินเดือน"
        actions={<Button icon="check" onClick={save}>{saved?'บันทึกแล้ว ✓':'บันทึกการตั้งค่า'}</Button>} />

      <div className="space-y-5">
        <Card>
          <div className="flex items-center gap-2 mb-4">
            <div className="w-9 h-9 rounded-lg bg-brand/12 border border-brand/30 text-brand flex items-center justify-center"><Icon name="slip" size={18}/></div>
            <h2 className="font-display font-bold text-lg">หัวบิล / ข้อมูลบนสลิป</h2>
          </div>
          <div className="space-y-4">
            <Field label="ชื่อบริษัท / หจก."><Input value={s.company} onChange={e=>f('company',e.target.value)}/></Field>
            <Field label="ที่อยู่"><Input value={s.address} onChange={e=>f('address',e.target.value)}/></Field>
            <div className="grid sm:grid-cols-2 gap-4">
              <Field label="เลขประจำตัวผู้เสียภาษี"><Input value={s.taxId} onChange={e=>f('taxId',e.target.value)} className="num"/></Field>
              <Field label="เบอร์โทรศัพท์"><Input value={s.phone} onChange={e=>f('phone',e.target.value)} className="num"/></Field>
            </div>
            <Field label="ข้อความท้ายสลิป"><Input value={s.slipNote} onChange={e=>f('slipNote',e.target.value)}/></Field>
          </div>
        </Card>

        <Card>
          <div className="flex items-center gap-2 mb-4">
            <div className="w-9 h-9 rounded-lg bg-hazard/12 border border-hazard/30 text-hazard flex items-center justify-center"><Icon name="calendar" size={18}/></div>
            <h2 className="font-display font-bold text-lg">งวดการจ่าย (ตัดวิก)</h2>
          </div>
          <div className="bg-ink border border-line rounded-lg p-4 text-sm text-haze space-y-2">
            <div className="flex items-center gap-2 text-chalk font-medium"><Icon name="bolt" size={15} className="text-brand"/>ตัดวิกเดือนละ 2 งวด — วันที่ 10 และวันที่ 25</div>
            <div>• งวดตัดวันที่ 10 ครอบคลุม 26 ของเดือนก่อน ถึง 10 ของเดือนนี้</div>
            <div>• งวดตัดวันที่ 25 ครอบคลุม 11 ถึง 25 ของเดือนนี้</div>
            <div className="pt-1 text-xs">วันที่ 10 และ 25 คือ "วันทำงานวันสุดท้าย" ของแต่ละงวด — เริ่มงวดถัดไปวันรุ่งขึ้น</div>
            <div className="pt-1 text-xs">ประกันสังคม / เบิกล่วงหน้า / รายการหักอื่น ๆ ให้คนทำบัญชีเพิ่มเองในหน้า "สรุปเงินเดือน" ของแต่ละงวด</div>
          </div>
        </Card>

        <WorkTypesManager/>
        <HolidaysManager/>

        <Card className="border-bad/30">
          <div className="flex items-center justify-between gap-4 flex-wrap">
            <div>
              <h2 className="font-display font-bold text-lg text-bad">รีเซ็ตข้อมูลทั้งหมด</h2>
              <p className="text-haze text-sm">ลบข้อมูลปัจจุบันและกลับไปใช้ข้อมูลตัวอย่าง</p>
            </div>
            <Button variant="danger" icon="trash" onClick={()=>{ if(confirm('ลบข้อมูลทั้งหมดและรีเซ็ตเป็นข้อมูลตัวอย่าง?')) resetAll(); }}>รีเซ็ตข้อมูล</Button>
          </div>
        </Card>
      </div>
    </div>
  );
}

Object.assign(window, { Payslip, Settings, PayslipDoc });