// Cuti & Lembur — approval workspace
function CutiLembur({ dept, pushToast }) {
  const deptIds = new Set((dept === 'all' ? KARYAWAN : KARYAWAN.filter(k => k.deptId === dept)).map(k => k.id));
  const requests = CUTI_REQUESTS.filter(c => deptIds.has(c.karyawanId));
  const lembur = LEMBUR_RECENT.filter(l => deptIds.has(l.karyawanId));
  const totalDays = requests.reduce((s, r) => s + r.durasi, 0);
  const totalOvertime = lembur.reduce((s, l) => s + l.durasi, 0);
  const overtimeCost = lembur.reduce((s, l) => {
    const k = KARYAWAN_BY_ID[l.karyawanId];
    return s + Math.round((k.gajiPokok / 173) * 1.5 * l.durasi);
  }, 0);

  return (
    <>
      <PageHeader
        eyebrow="Approval Workspace"
        title="Cuti & Lembur"
        subtitle={`${requests.length} pengajuan cuti menunggu keputusan dan ${lembur.length} lembur recent masuk payroll. Total estimasi biaya lembur ${rupiah(overtimeCost, {sym:true})}.`}
        actions={<>
          <Btn icon="check" tone="primary" onClick={()=>pushToast({msg:'Semua cuti sesuai filter disetujui'})}>Approve Batch</Btn>
          <Btn icon="plus" tone="outline">Input Lembur</Btn>
        </>}
      />

      <div className="grid g-4" style={{marginBottom:18}}>
        <Kpi label="Pending Cuti" value={requests.length} sub={`${totalDays} hari diajukan`} icon="calendar" tone="amber" />
        <Kpi label="Jam Lembur" value={totalOvertime} sub={`${lembur.length} entry approved`} icon="clock" tone="accent" />
        <Kpi label="Biaya Lembur" value={rupiah(overtimeCost, {sym:true, compact:true})} sub="estimasi masuk payroll" icon="dollar" tone="green" />
        <Kpi label="Saldo Cuti Rata2" value="10,5" sub="hari tersisa / karyawan" icon="clipboard" tone="violet" />
      </div>

      <div className="grid" style={{gridTemplateColumns:'1fr 1fr', gap:18}}>
        <Card>
          <div style={{padding:'14px 16px', borderBottom:'1px solid hsl(var(--border))'}}>
            <SectionHead title="Pengajuan Cuti Pending" hint="Butuh approval manager/HR" />
          </div>
          <div style={{padding:'14px 16px', display:'flex', flexDirection:'column', gap:12}}>
            {requests.map(r => {
              const k = KARYAWAN_BY_ID[r.karyawanId];
              return (
                <div key={r.id} className="dept-card" style={{borderLeft:'3px solid hsl(var(--accent-h) var(--accent-s) var(--accent-l))'}}>
                  <div className="row between" style={{gap:12, alignItems:'flex-start'}}>
                    <div className="row gap-2" style={{alignItems:'center'}}>
                      <EmpAvatar name={k.nama} />
                      <div>
                        <div style={{fontWeight:800}}>{k.nama}</div>
                        <div className="text-sm muted">{k.dept} · {k.jabatan}</div>
                      </div>
                    </div>
                    <StatusPill status={r.status} />
                  </div>
                  <div className="form-grid" style={{marginTop:12}}>
                    <Field label="Jenis" value={r.tipe} />
                    <Field label="Durasi" value={`${r.durasi} hari`} />
                    <Field label="Mulai" value={formatDateID(r.mulai)} />
                    <Field label="Selesai" value={formatDateID(r.selesai)} />
                    <Field label="Saldo Cuti" value={`${r.sisa} hari`} />
                    <Field label="Diajukan" value={formatDateID(r.diajukan)} />
                  </div>
                  <div style={{marginTop:12, padding:'9px 10px', borderRadius:8, background:'hsl(var(--muted))', fontSize:12.5}}>{r.alasan}</div>
                  <div className="row gap-2" style={{marginTop:12}}>
                    <Btn icon="check" tone="primary" onClick={()=>pushToast({msg:`${r.id} disetujui`})}>Approve</Btn>
                    <Btn icon="x" tone="outline" onClick={()=>pushToast({msg:`${r.id} ditolak`, type:'warning'})}>Reject</Btn>
                    <Btn icon="eye" tone="ghost">Detail</Btn>
                  </div>
                </div>
              );
            })}
          </div>
        </Card>

        <Card>
          <div style={{padding:'14px 16px', borderBottom:'1px solid hsl(var(--border))'}}>
            <SectionHead title="Lembur Terbaru" hint="Approved dan masuk payroll April" action={<Btn icon="plus" tone="ghost">Tambah</Btn>} />
          </div>
          <div style={{padding:'14px 16px'}}>
            <table className="table">
              <thead><tr><th>Karyawan</th><th>Tanggal</th><th>Jam</th><th style={{textAlign:'right'}}>Durasi</th><th>Status</th></tr></thead>
              <tbody>
                {lembur.map(l => {
                  const k = KARYAWAN_BY_ID[l.karyawanId];
                  return (
                    <tr key={l.id}>
                      <td><div style={{fontWeight:700}}>{k.nama}</div><div className="text-sm muted">{k.dept}</div></td>
                      <td className="mono" style={{fontSize:12}}>{formatTanggalKerja(l.tanggal)}</td>
                      <td className="mono" style={{fontSize:12}}>{l.jamMulai}-{l.jamSelesai}</td>
                      <td style={{textAlign:'right', fontVariantNumeric:'tabular-nums'}}>{l.durasi} jam</td>
                      <td><StatusPill status={l.status}/></td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
            <div className="callout accent" style={{marginTop:14}}>
              <Icon name="info" size={14}/>
              <span>Lembur approved otomatis dihitung menggunakan rumus 1,5x upah per jam (gaji pokok / 173), lalu masuk komponen penghasilan slip gaji.</span>
            </div>
          </div>
        </Card>
      </div>
    </>
  );
}

window.CutiLembur = CutiLembur;