// Dashboard HR — PT Bumi Niaga
function Dashboard({ role, dept, setPage, pushToast }) {
  const filtered = dept === 'all' ? KARYAWAN : KARYAWAN.filter(k => k.deptId === dept);
  const payroll = PAYROLL_RUNS[0];
  const hadirPct = Math.round((KPI.hadirHariIni / ABSENSI_HARI_INI.length) * 100);
  const topDept = COST_BREAKDOWN_DEPT[0];
  const pendingNames = CUTI_REQUESTS.slice(0, 3).map(c => KARYAWAN_BY_ID[c.karyawanId].nama);

  return (
    <>
      <PageHeader
        eyebrow={`${PERIODE_LABEL} · ${formatDateID(TODAY)}`}
        title={`Selamat bekerja, ${ROLES[role].name}`}
        subtitle={`${filtered.length} karyawan dalam filter aktif. Payroll ${PERIODE_LABEL} masih draft dan dijadwalkan run pada ${formatDateID(NEXT_PAYROLL)}.`}
        actions={<>
          <Btn icon="play" tone="primary" onClick={() => { setPage('payroll'); pushToast({msg:'Membuka draft payroll April'}); }}>Review Payroll</Btn>
          <Btn icon="plus" tone="outline" onClick={() => setPage('karyawan')}>Tambah Karyawan</Btn>
        </>}
      />

      <div className="payroll-hero">
        <Card className="payroll-run-card">
          <div className="row between" style={{alignItems:'flex-start', gap:18}}>
            <div>
              <div style={{fontSize:11, color:'hsl(var(--muted-foreground))', textTransform:'uppercase', letterSpacing:'0.08em', fontWeight:800}}>Draft Payroll</div>
              <div style={{fontSize:22, fontWeight:800, letterSpacing:'-0.03em', marginTop:4}}>{payroll.label}</div>
              <div className="payroll-run-total" style={{marginTop:10}}>{rupiah(payroll.total, {sym:true, compact:true})}</div>
              <div style={{fontSize:12.5, color:'hsl(var(--muted-foreground))', marginTop:4}}>{payroll.karyawan} karyawan · THP estimasi sebelum approval finance</div>
            </div>
            <StatusPill status={payroll.status}/>
          </div>
          <div className="payroll-stepper">
            <div className="payroll-step done"><div className="payroll-step-title">Absensi</div><div className="payroll-step-sub">Terkunci 22 Apr</div></div>
            <div className="payroll-step done"><div className="payroll-step-title">Komponen</div><div className="payroll-step-sub">Gaji + lembur</div></div>
            <div className="payroll-step active"><div className="payroll-step-title">Validasi HR</div><div className="payroll-step-sub">3 exception</div></div>
            <div className="payroll-step"><div className="payroll-step-title">Bayar</div><div className="payroll-step-sub">25 Apr</div></div>
          </div>
        </Card>

        <Card>
          <div style={{padding:'18px'}}>
            <SectionHead title="Tim Hari Ini" hint="Clock-in sample live" action={<Btn icon="clock" tone="ghost" onClick={()=>setPage('absensi')}>Absensi</Btn>} />
            <div className="row between" style={{marginBottom:14}}>
              <div className="emp-stack">
                {ABSENSI_HARI_INI.slice(0, 6).map(a => <EmpAvatar key={a.karyawanId} name={KARYAWAN_BY_ID[a.karyawanId].nama} />)}
              </div>
              <div style={{textAlign:'right'}}>
                <div style={{fontSize:26, fontWeight:800, letterSpacing:'-0.04em', fontVariantNumeric:'tabular-nums'}}>{hadirPct}%</div>
                <div style={{fontSize:11.5, color:'hsl(var(--muted-foreground))'}}>hadir dari sample</div>
              </div>
            </div>
            <div className="grid g-2">
              <MiniStat label="Hadir" value={KPI.hadirHariIni} color="green" />
              <MiniStat label="Telat" value={KPI.telatHariIni} color="amber" />
              <MiniStat label="Cuti" value={KPI.cutiHariIni} color="indigo" />
              <MiniStat label="Sakit" value={KPI.sakitHariIni} color="gray" />
            </div>
          </div>
        </Card>
      </div>

      <div className="grid g-4" style={{marginBottom:18}}>
        <Kpi label="Total Karyawan" value={KPI.totalKaryawan} sub={`${DEPT.length} departemen aktif`} icon="users" tone="accent" />
        <Kpi label="Payroll Draft" value={rupiah(KPI.payrollDraft, {sym:true, compact:true})} sub={`${KPI.payrollKaryawan} karyawan`} icon="creditCard" tone="violet" />
        <Kpi label="Pending Cuti" value={KPI.pendingCuti} sub={pendingNames.join(', ')} icon="calendar" tone="amber" />
        <Kpi label="Cost Center Top" value={topDept.dept.split(' ')[0]} sub={rupiah(topDept.total, {sym:true, compact:true})} icon="trending" tone="green" />
      </div>

      <div className="grid" style={{gridTemplateColumns:'1.2fr 0.8fr', gap:18}}>
        <Card>
          <div style={{padding:'14px 16px', borderBottom:'1px solid hsl(var(--border))'}}>
            <SectionHead title="Biaya Payroll per Departemen" hint="Estimasi THP April 2026" action={<Btn icon="download" tone="ghost" onClick={()=>pushToast({msg:'Ekspor cost center dimulai'})}>Ekspor</Btn>} />
          </div>
          <div style={{padding:'16px'}}>
            <div className="grid g-3">
              {COST_BREAKDOWN_DEPT.map(d => {
                const max = Math.max(...COST_BREAKDOWN_DEPT.map(x => x.total));
                return (
                  <div className="dept-card" key={d.deptId}>
                    <div className="row between" style={{gap:8}}>
                      <div style={{fontWeight:750, fontSize:13}}>{d.dept}</div>
                      <SoftPill color="indigo">{d.headcount}</SoftPill>
                    </div>
                    <div style={{fontSize:18, fontWeight:800, marginTop:8, fontVariantNumeric:'tabular-nums'}}>{rupiah(d.total, {sym:true, compact:true})}</div>
                    <div className="dept-bar"><div style={{width:(d.total / max) * 100 + '%'}} /></div>
                  </div>
                );
              })}
            </div>
          </div>
        </Card>

        <Card>
          <div style={{padding:'14px 16px', borderBottom:'1px solid hsl(var(--border))'}}>
            <SectionHead title="Aktivitas HR" hint="Log terbaru" />
          </div>
          <div style={{padding:'14px 16px'}}>
            <div className="timeline">
              {ACTIVITY.map(a => (
                <div className="timeline-item" key={a.id}>
                  <div className="timeline-time">{a.time}</div>
                  <div className="timeline-body">
                    <div style={{fontWeight:a.urgent ? 750 : 500}}>{a.text}</div>
                    <div style={{fontSize:11, color:'hsl(var(--muted-foreground))', marginTop:2}}>{a.who}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </Card>
      </div>
    </>
  );
}

function MiniStat({ label, value, color }) {
  return (
    <div style={{padding:'10px 12px', border:'1px solid hsl(var(--border))', borderRadius:10, background:'hsl(var(--card))'}}>
      <div style={{fontSize:11, color:'hsl(var(--muted-foreground))'}}>{label}</div>
      <div className="row gap-2" style={{marginTop:3}}>
        <SoftPill color={color}>{value}</SoftPill>
      </div>
    </div>
  );
}

window.Dashboard = Dashboard;