// Dashboard — Klinik Mitra Sehat
function Dashboard({ role, setPage, pushToast }) {
  const nextWaiting = ANTRIAN.filter(a => a.status === 'waiting').slice(0, 3);
  const inRoom = ANTRIAN.filter(a => a.status === 'in-room');
  const currentNow = inRoom[0];
  const currentNext = nextWaiting[0];
  const currentP = currentNow ? PASIEN_BY_ID[currentNow.pasienId] : null;
  const currentD = currentNow ? DOKTER.find(d => d.id === currentNow.dokterId) : null;
  const nextP = currentNext ? PASIEN_BY_ID[currentNext.pasienId] : null;
  const nextD = currentNext ? DOKTER.find(d => d.id === currentNext.dokterId) : null;

  // dokter activity today
  const dokterToday = DOKTER.map(d => {
    const list = ANTRIAN.filter(a => a.dokterId === d.id);
    return {
      ...d,
      done: list.filter(a => a.status === 'done').length,
      inRoom: list.filter(a => a.status === 'in-room').length,
      waiting: list.filter(a => a.status === 'waiting').length,
      total: list.length,
    };
  });

  const lowStock = OBAT.filter(o => o.stock < o.par).sort((a,b) => (a.stock/a.par) - (b.stock/b.par)).slice(0, 5);

  return (
    <>
      <PageHeader
        eyebrow={formatDateID(TODAY)}
        title={`Selamat ${SHIFT.startsWith('Pagi') ? 'pagi' : SHIFT.startsWith('Siang') ? 'siang' : 'sore'}, ${ROLES[role].name.split(' ').slice(0,2).join(' ')}`}
        subtitle={`${KPI.pasienWaiting} pasien menunggu, ${KPI.pasienInRoom} sedang ditangani. Apotek menyiapkan ${RESEP.filter(r=>r.status==='pending').length} resep, ${lowStock.length} item obat di bawah par stock.`}
        actions={<>
          <Btn icon="plus" tone="primary" onClick={() => { setPage('antrian'); pushToast({msg:'Buka pendaftaran pasien baru'}); }}>Pendaftaran Baru</Btn>
          <Btn icon="search" tone="outline" onClick={() => setPage('pasien')}>Cari Pasien</Btn>
        </>}
      />

      {/* Queue display — signature */}
      <div className="queue-display" style={{marginBottom:18}}>
        <QueueTile
          kind="now"
          queueNo={currentNow?.no}
          pasienName={currentP?.nama}
          dokter={currentD?.name}
          room={currentD?.room}
          meta={currentNow ? `Mulai ${currentNow.calledAt} · ${fmtMin(minutesSince(currentNow.calledAt))} di ruang` : null}
        />
        <QueueTile
          kind="next"
          queueNo={currentNext?.no}
          pasienName={nextP?.nama}
          dokter={nextD?.name}
          room={nextD?.room}
          meta={currentNext ? `Daftar ${currentNext.registeredAt} · menunggu ${fmtMin(minutesSince(currentNext.registeredAt))}` : null}
        />
      </div>

      {/* KPI tiles */}
      <div className="grid g-4" style={{marginBottom:18}}>
        <Kpi label="Pasien Hari Ini" value={KPI.pasienToday} hint={`${KPI.pasienDone} selesai · ${KPI.pasienInRoom} di ruang · ${KPI.pasienWaiting} menunggu`} icon="users" tone="accent" />
        <Kpi label="Rata² Tunggu" value={fmtMin(KPI.avgWaitMin)} hint={`Konsultasi ${fmtMin(KPI.avgConsultMin)}`} icon="clock" tone="amber" />
        <Kpi label="Revenue Hari Ini" value={rupiah(KPI.revenueToday, {sym:true, compact:true})} hint={`${KPI.bpjsClaim} klaim BPJS, ${KPI.pasienDone - KPI.bpjsClaim} umum`} icon="dollar" tone="green" />
        <Kpi label="Resep Pending" value={RESEP.filter(r=>r.status==='pending').length} hint={`${RESEP.filter(r=>r.status==='dispensed').length} diserahkan hari ini`} icon="package" tone="violet" />
      </div>

      <div className="grid" style={{gridTemplateColumns:'1.4fr 1fr', gap:18}}>
        {/* Dokter strip */}
        <Card>
          <div style={{padding:'14px 16px', borderBottom:'1px solid hsl(var(--border))'}}>
            <SectionHead title="Aktivitas Dokter Hari Ini" hint="Beban pasien per dokter & ruang" action={<Btn tone="ghost" size="sm" icon="calendar" onClick={()=>setPage('jadwal')}>Lihat Jadwal</Btn>}/>
          </div>
          <div style={{padding:'12px 16px 16px'}}>
            <div className="dokter-strip">
              {dokterToday.map(d => (
                <div key={d.id} className="dokter-card">
                  <div className="row between" style={{marginBottom:6}}>
                    <div>
                      <div style={{fontWeight:600, fontSize:13.5}}>{d.name}</div>
                      <div style={{fontSize:11.5, color:'hsl(var(--muted-foreground))'}}>{d.spesialis} · {d.room}</div>
                    </div>
                    {d.inRoom > 0 && <PastelPill color="amber">Sedang konsul</PastelPill>}
                  </div>
                  <div style={{fontSize:11.5, color:'hsl(var(--muted-foreground))', marginTop:4}}>Shift {d.shift}</div>
                  <div className="row gap-3" style={{marginTop:10, fontSize:12}}>
                    <span><b style={{fontVariantNumeric:'tabular-nums'}}>{d.done}</b> selesai</span>
                    <span style={{color:'hsl(var(--muted-foreground))'}}>·</span>
                    <span><b style={{fontVariantNumeric:'tabular-nums'}}>{d.waiting}</b> menunggu</span>
                  </div>
                  <div className="kpi-progress" style={{marginTop:10}}>
                    <div style={{width: Math.min(100, (d.total / d.avgPerVisit) * 100) + '%'}}/>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </Card>

        {/* Aktivitas */}
        <Card>
          <div style={{padding:'14px 16px', borderBottom:'1px solid hsl(var(--border))'}}>
            <SectionHead title="Aktivitas Terbaru" hint="Log real-time klinik"/>
          </div>
          <div style={{padding:'4px 0'}}>
            {ACTIVITY.map(a => (
              <div key={a.id} className="row" style={{padding:'10px 16px', borderTop: a.id === 1 ? 'none' : '1px solid hsl(var(--border))', alignItems:'flex-start', gap:10}}>
                <div style={{width:42, fontSize:11.5, color:'hsl(var(--muted-foreground))', fontVariantNumeric:'tabular-nums', paddingTop:1}}>{a.time}</div>
                <div style={{flex:1, minWidth:0}}>
                  <div style={{fontSize:12.5, lineHeight:1.45}}>{a.text}</div>
                  <div style={{fontSize:11, color:'hsl(var(--muted-foreground))', marginTop:2}}>{a.who}</div>
                </div>
                {a.urgent && <PastelPill color="rose">Urgent</PastelPill>}
              </div>
            ))}
          </div>
        </Card>
      </div>

      {/* Lower row */}
      <div className="grid" style={{gridTemplateColumns:'1fr 1fr', gap:18, marginTop:18}}>
        {/* Trend */}
        <Card>
          <div style={{padding:'14px 16px'}}>
            <SectionHead title="Tren Kunjungan 14 Hari" hint="Total pasien per hari" action={<Btn tone="ghost" size="sm" icon="trending" onClick={()=>setPage('laporan')}>Laporan</Btn>}/>
            <div className="row" style={{gap:6, alignItems:'flex-end', height:120, marginTop:14}}>
              {VISITS_DAILY.map(v => {
                const max = Math.max(...VISITS_DAILY.map(x => x.total));
                const h = (v.total / max) * 100;
                const today = v.date === TODAY;
                return (
                  <div key={v.date} style={{flex:1, display:'flex', flexDirection:'column', alignItems:'center', gap:4}}>
                    <div style={{fontSize:10, fontVariantNumeric:'tabular-nums', color:'hsl(var(--muted-foreground))'}}>{v.total}</div>
                    <div style={{width:'100%', height: h + '%', minHeight:4, background: today ? 'hsl(var(--accent-h) var(--accent-s) var(--accent-l))' : 'hsl(var(--accent-h) var(--accent-s) 80%)', borderRadius:'3px 3px 0 0'}}/>
                    <div style={{fontSize:10, color:'hsl(var(--muted-foreground))'}}>{v.date.slice(8)}</div>
                  </div>
                );
              })}
            </div>
          </div>
        </Card>

        {/* Low stock */}
        <Card>
          <div style={{padding:'14px 16px'}}>
            <SectionHead title="Stok Obat Perlu Perhatian" hint="Di bawah par level" action={<Btn tone="ghost" size="sm" icon="package" onClick={()=>setPage('apotek')}>Apotek</Btn>}/>
            <table className="table" style={{marginTop:10}}>
              <thead><tr><th>Obat</th><th>Stok</th><th style={{textAlign:'right'}}>Status</th></tr></thead>
              <tbody>
                {lowStock.map(o => {
                  const ratio = o.stock / o.par;
                  const cls = ratio < 0.5 ? 'stock-row-critical' : 'stock-row-low';
                  return (
                    <tr key={o.sku} className={cls}>
                      <td>
                        <div style={{fontWeight:500}}>{o.nama}</div>
                        <div style={{fontSize:11, color:'hsl(var(--muted-foreground))'}}>{o.kategori} · {o.satuan}</div>
                      </td>
                      <td style={{fontVariantNumeric:'tabular-nums'}}>{o.stock} / {o.par}</td>
                      <td style={{textAlign:'right'}}>
                        {ratio < 0.5 ? <PastelPill color="rose">Kritis</PastelPill> : <PastelPill color="amber">Rendah</PastelPill>}
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        </Card>
      </div>
    </>
  );
}

window.Dashboard = Dashboard;