// Master Karyawan
const { useState: useStateKR } = React;

function Karyawan({ dept, setPage, pushToast }) {
  const [q, setQ] = useStateKR('');
  const [selectedId, setSelectedId] = useStateKR('EMP-1001');
  const list = KARYAWAN.filter(k => {
    const matchDept = dept === 'all' || k.deptId === dept;
    const hay = `${k.id} ${k.nama} ${k.dept} ${k.jabatan} ${k.bank}`.toLowerCase();
    return matchDept && (!q || hay.includes(q.toLowerCase()));
  });
  const selected = KARYAWAN_BY_ID[selectedId] || list[0] || KARYAWAN[0];
  const slip = slipGaji(selected.id);

  const byStatus = {
    tetap: KARYAWAN.filter(k => k.statusKerja === 'Tetap').length,
    kontrak: KARYAWAN.filter(k => k.statusKerja === 'Kontrak').length,
    noNpwp: KARYAWAN.filter(k => !k.npwp).length,
  };

  return (
    <>
      <PageHeader
        eyebrow="Master Data SDM"
        title="Database Karyawan"
        subtitle={`${KARYAWAN.length} karyawan aktif: ${byStatus.tetap} tetap, ${byStatus.kontrak} kontrak. ${byStatus.noNpwp} karyawan belum melengkapi NPWP.`}
        actions={<>
          <Btn icon="plus" tone="primary" onClick={()=>pushToast({msg:'Form karyawan baru dibuka'})}>Tambah Karyawan</Btn>
          <Btn icon="upload" tone="outline">Impor XLS</Btn>
          <Btn icon="download" tone="outline">Ekspor</Btn>
        </>}
      />

      <div className="grid g-4" style={{marginBottom:18}}>
        <Kpi label="Karyawan Aktif" value={KARYAWAN.length} sub={`${DEPT.length} departemen`} icon="users" tone="accent" />
        <Kpi label="Tetap" value={byStatus.tetap} sub="Status PKWTT" icon="checkCircle" tone="green" />
        <Kpi label="Kontrak" value={byStatus.kontrak} sub="PKWT aktif" icon="clipboard" tone="amber" />
        <Kpi label="NPWP Belum Ada" value={byStatus.noNpwp} sub="Perlu follow-up PPh21" icon="alert" tone="rose" />
      </div>

      <div className="grid" style={{gridTemplateColumns:'1.35fr 0.9fr', gap:18}}>
        <Card>
          <div style={{padding:'12px 16px', borderBottom:'1px solid hsl(var(--border))'}}>
            <input className="input" placeholder="Cari ID, nama, departemen, jabatan, bank..." value={q} onChange={e=>setQ(e.target.value)} />
          </div>
          <div style={{maxHeight:'62vh', overflowY:'auto'}}>
            <table className="table">
              <thead style={{position:'sticky', top:0, background:'hsl(var(--card))', zIndex:1}}>
                <tr>
                  <th>Karyawan</th>
                  <th>Departemen</th>
                  <th>Jabatan</th>
                  <th>Status</th>
                  <th>Bank</th>
                  <th style={{textAlign:'right'}}>THP Est.</th>
                </tr>
              </thead>
              <tbody>
                {list.map(k => {
                  const sl = slipGaji(k.id);
                  return (
                    <tr key={k.id} onClick={()=>setSelectedId(k.id)} style={{cursor:'pointer', background:selected.id === k.id ? 'hsl(var(--accent-h) var(--accent-s) 96%)' : undefined}}>
                      <td>
                        <div className="row gap-2">
                          <EmpAvatar name={k.nama} size="sm" />
                          <div>
                            <div style={{fontWeight:700}}>{k.nama}</div>
                            <div className="mono" style={{fontSize:11, color:'hsl(var(--muted-foreground))'}}>{k.id}</div>
                          </div>
                        </div>
                      </td>
                      <td style={{fontSize:12.5}}>{k.dept}</td>
                      <td style={{fontSize:12.5}}>{k.jabatan}</td>
                      <td><SoftPill color={k.statusKerja === 'Tetap' ? 'green' : 'amber'}>{k.statusKerja}</SoftPill></td>
                      <td style={{fontSize:12.5}}>{k.bank}</td>
                      <td style={{textAlign:'right', fontWeight:700, fontVariantNumeric:'tabular-nums'}}>{rupiah(sl.takeHome, {sym:true, compact:true})}</td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        </Card>

        <Card>
          <div style={{padding:'18px', borderBottom:'1px solid hsl(var(--border))'}}>
            <div className="row" style={{gap:14, alignItems:'center'}}>
              <EmpAvatar name={selected.nama} size="lg" />
              <div style={{flex:1, minWidth:0}}>
                <div className="mono" style={{fontSize:11, color:'hsl(var(--muted-foreground))'}}>{selected.id}</div>
                <div style={{fontSize:18, fontWeight:800, letterSpacing:'-0.02em'}}>{selected.nama}</div>
                <div style={{fontSize:12.5, color:'hsl(var(--muted-foreground))', marginTop:2}}>{selected.jabatan} · {selected.dept}</div>
              </div>
              <SoftPill color={selected.statusKerja === 'Tetap' ? 'green' : 'amber'}>{selected.statusKerja}</SoftPill>
            </div>
          </div>

          <div style={{padding:'16px 18px', borderBottom:'1px solid hsl(var(--border))'}}>
            <SectionHead title="Identitas & Kepesertaan" />
            <div className="form-grid">
              <Field label="Tanggal Masuk" value={formatDateID(selected.masuk)} />
              <Field label="Golongan" value={selected.golongan} />
              <Field label="Status Pajak" value={selected.statusKawin} />
              <Field label="NPWP" value={selected.npwp || 'Belum ada'} />
              <Field label="BPJS TK" value={selected.bpjsTk} />
              <Field label="BPJS Kes" value={selected.bpjsKes} />
            </div>
          </div>

          <div style={{padding:'16px 18px', borderBottom:'1px solid hsl(var(--border))'}}>
            <SectionHead title="Komponen Payroll" hint="Base April 2026" />
            <div className="form-grid">
              <Field label="Gaji Pokok" value={rupiah(selected.gajiPokok, {sym:true})} />
              <Field label="Tunj. Jabatan" value={rupiah(selected.tunjJabatan, {sym:true})} />
              <Field label="Tunj. Transport" value={rupiah(selected.tunjTransport, {sym:true})} />
              <Field label="Tunj. Makan" value={rupiah(selected.tunjMakan, {sym:true})} />
              <Field label="Bank" value={`${selected.bank} · ${selected.norek}`} />
              <Field label="THP Est." value={rupiah(slip.takeHome, {sym:true})} />
            </div>
          </div>

          <div style={{padding:'16px 18px'}}>
            {!selected.npwp && (
              <div className="callout warn" style={{marginBottom:12}}>
                <Icon name="alert" size={14}/>
                <span>NPWP belum lengkap. Payroll tetap bisa diproses, tetapi PPh21 dihitung dengan risiko koreksi.</span>
              </div>
            )}
            <div className="row gap-2" style={{flexWrap:'wrap'}}>
              <Btn icon="receipt" tone="primary" onClick={()=>setPage('slip')}>Lihat Slip</Btn>
              <Btn icon="edit" tone="outline" onClick={()=>pushToast({msg:'Edit data karyawan'})}>Edit Data</Btn>
              <Btn icon="clock" tone="outline" onClick={()=>setPage('absensi')}>Absensi</Btn>
            </div>
          </div>
        </Card>
      </div>
    </>
  );
}

window.Karyawan = Karyawan;