// Slip Gaji — document view
const { useState: useStateSL } = React;

function SlipGaji({ dept, pushToast }) {
  const employees = dept === 'all' ? KARYAWAN : KARYAWAN.filter(k => k.deptId === dept);
  const [employeeId, setEmployeeId] = useStateSL(employees[0]?.id || 'EMP-1001');
  const currentId = employees.some(k => k.id === employeeId) ? employeeId : employees[0]?.id || 'EMP-1001';
  const sl = slipGaji(currentId);
  const k = sl.karyawan;

  return (
    <>
      <PageHeader
        eyebrow={`Slip Gaji ${PERIODE_LABEL}`}
        title="Slip Gaji Karyawan"
        subtitle="Preview dokumen slip gaji siap cetak dan siap dikirim melalui email/WhatsApp setelah payroll run disetujui Finance."
        actions={<>
          <select className="select" value={currentId} onChange={e=>setEmployeeId(e.target.value)} style={{width:'auto', minWidth:260, height:36}}>
            {employees.map(emp => <option key={emp.id} value={emp.id}>{emp.nama} · {emp.id}</option>)}
          </select>
          <Btn icon="print" tone="primary" onClick={()=>pushToast({msg:'Slip gaji dikirim ke printer'})}>Cetak</Btn>
          <Btn icon="download" tone="outline">PDF</Btn>
        </>}
      />

      <div className="grid" style={{gridTemplateColumns:'1fr 360px', gap:18}}>
        <PayslipDocument slip={sl} />

        <div style={{display:'flex', flexDirection:'column', gap:18}}>
          <Card>
            <div style={{padding:'16px 18px', borderBottom:'1px solid hsl(var(--border))'}}>
              <SectionHead title="Ringkasan Karyawan" />
              <div className="row" style={{gap:12}}>
                <EmpAvatar name={k.nama} size="lg" />
                <div>
                  <div style={{fontSize:16, fontWeight:800}}>{k.nama}</div>
                  <div className="text-sm muted">{k.jabatan}</div>
                  <div className="text-sm muted">{k.dept} · {k.statusKerja}</div>
                </div>
              </div>
            </div>
            <div style={{padding:'16px 18px'}}>
              <div className="form-grid">
                <Field label="Bank" value={k.bank} />
                <Field label="No Rekening" value={k.norek} />
                <Field label="Status Pajak" value={k.statusKawin} />
                <Field label="NPWP" value={k.npwp || 'Belum ada'} />
              </div>
            </div>
          </Card>

          <Card>
            <div style={{padding:'16px 18px'}}>
              <SectionHead title="Validasi Slip" hint="Pre-flight sebelum distribusi" />
              <div style={{display:'flex', flexDirection:'column', gap:10}}>
                <Checklist ok label="Data rekening valid" />
                <Checklist ok label="BPJS TK & Kesehatan aktif" />
                <Checklist ok={!!k.npwp} label={k.npwp ? 'NPWP tersedia' : 'NPWP belum tersedia'} />
                <Checklist ok={sl.absensi.alpha === 0} label={sl.absensi.alpha ? `${sl.absensi.alpha} alpha masuk potongan manual` : 'Tidak ada alpha'} />
                <Checklist ok label="Slip siap distribusi setelah approval" />
              </div>
            </div>
          </Card>
        </div>
      </div>
    </>
  );
}

function PayslipDocument({ slip }) {
  const k = slip.karyawan;
  return (
    <div className="payslip-doc">
      <div className="payslip-header">
        <div>
          <div className="payslip-title">Slip Gaji Karyawan</div>
          <div className="payslip-code">{TENANT.name} · {TENANT.npwp}</div>
          <div className="payslip-code" style={{marginTop:2}}>{TENANT.address}</div>
        </div>
        <div style={{textAlign:'right'}}>
          <div className="payslip-code">Periode</div>
          <div style={{fontSize:18, fontWeight:800, letterSpacing:'-0.02em'}}>{PERIODE_LABEL}</div>
          <StatusPill status="draft" />
        </div>
      </div>

      <div className="grid" style={{gridTemplateColumns:'1fr 1fr', gap:18, marginTop:16}}>
        <div>
          <div className="payslip-section-title">Data Karyawan</div>
          <div className="form-grid">
            <Field label="Nama" value={k.nama} />
            <Field label="NIK" value={k.id} />
            <Field label="Departemen" value={k.dept} />
            <Field label="Jabatan" value={k.jabatan} />
            <Field label="Status Pajak" value={k.statusKawin} />
            <Field label="Bank" value={`${k.bank} · ${k.norek}`} />
          </div>
        </div>
        <div>
          <div className="payslip-section-title">Absensi</div>
          <div className="form-grid">
            <Field label="Hari Kerja" value={`${slip.absensi.total} hari`} />
            <Field label="Hadir" value={`${slip.absensi.hadir} hari`} />
            <Field label="Cuti" value={`${slip.absensi.cuti} hari`} />
            <Field label="Sakit" value={`${slip.absensi.sakit} hari`} />
            <Field label="Telat" value={`${slip.absensi.telat} kali`} />
            <Field label="Lembur" value={`${slip.absensi.lemburJam} jam`} />
          </div>
        </div>
      </div>

      <div className="payslip-grid">
        <div>
          <div className="payslip-section-title">Penghasilan</div>
          <PayLine label="Gaji Pokok" value={slip.penghasilan.gajiPokok} />
          <PayLine label="Tunjangan Jabatan" value={slip.penghasilan.tunjJab} />
          <PayLine label="Tunjangan Transport" value={slip.penghasilan.tunjTrans} />
          <PayLine label="Tunjangan Makan" value={slip.penghasilan.tunjMakan} />
          <PayLine label="Lembur" value={slip.penghasilan.lembur} />
          <PayLine label="Insentif" value={slip.penghasilan.insentif} />
          <PayLine label="Total Penghasilan" value={slip.penghasilan.total} strong />
        </div>
        <div>
          <div className="payslip-section-title">Potongan</div>
          <PayLine label="BPJS Kesehatan" value={slip.potongan.bpjsKes} />
          <PayLine label="BPJS JHT" value={slip.potongan.bpjsJht} />
          <PayLine label="BPJS JP" value={slip.potongan.bpjsJp} />
          <PayLine label="PPh 21" value={slip.potongan.pph21} />
          <PayLine label="Pinjaman" value={slip.potongan.pinjaman} />
          <PayLine label="Total Potongan" value={slip.potongan.total} strong />
        </div>
      </div>

      <div className="payslip-total">
        <div>
          <div style={{fontSize:11, color:'hsl(var(--muted-foreground))', textTransform:'uppercase', letterSpacing:'0.08em', fontWeight:800}}>Take Home Pay</div>
          <div style={{fontSize:12, color:'hsl(var(--muted-foreground))', marginTop:2}}>Ditransfer ke rekening {k.bank}</div>
        </div>
        <div className="value">{rupiah(slip.takeHome, {sym:true})}</div>
      </div>

      <div style={{marginTop:20, display:'grid', gridTemplateColumns:'1fr 1fr', gap:30, fontSize:12, color:'hsl(var(--muted-foreground))'}}>
        <div><div style={{borderTop:'1px solid hsl(var(--border))', paddingTop:8}}>Dibuat oleh HR</div></div>
        <div><div style={{borderTop:'1px solid hsl(var(--border))', paddingTop:8}}>Disetujui Finance</div></div>
      </div>
    </div>
  );
}

function PayLine({ label, value, strong }) {
  return (
    <div className="payslip-line" style={strong ? {fontWeight:800} : undefined}>
      <span>{label}</span>
      <b>{rupiah(value, {sym:true})}</b>
    </div>
  );
}

function Checklist({ ok, label }) {
  return (
    <div className="row gap-2">
      <Icon name={ok ? 'checkCircle' : 'alert'} size={15} style={{color: ok ? 'hsl(152 60% 38%)' : 'hsl(38 90% 42%)'}} />
      <span className="text-sm" style={{fontWeight:600}}>{label}</span>
    </div>
  );
}

window.SlipGaji = SlipGaji;