// Jadwal Dokter — weekly schedule grid
function Jadwal({ pushToast }) {
  const totalSlot = JADWAL.reduce((s, d) => s + d.slots.reduce((ss, sl) => ss + (sl.cuti ? 0 : sl.capacity), 0), 0);
  const totalBooked = JADWAL.reduce((s, d) => s + d.slots.reduce((ss, sl) => ss + (sl.cuti ? 0 : sl.booked), 0), 0);
  const cutiCount = JADWAL.reduce((s, d) => s + d.slots.filter(sl => sl.cuti).length, 0);

  return (
    <>
      <PageHeader
        eyebrow="Minggu 17 — 20 s.d. 25 April 2026"
        title="Jadwal Praktik Dokter"
        subtitle={`Utilisasi minggu ini ${Math.round(totalBooked/totalSlot*100)}% (${totalBooked}/${totalSlot} slot terisi). ${cutiCount} sesi cuti dijadwalkan.`}
        actions={<>
          <Btn icon="plus" tone="primary" onClick={()=>pushToast({msg:'Tambah jadwal praktik baru'})}>Tambah Jadwal</Btn>
          <Btn icon="calendar" tone="outline">Pindah Minggu</Btn>
          <Btn icon="download" tone="outline">Cetak Jadwal</Btn>
        </>}
      />

      <div className="grid g-4" style={{marginBottom:18}}>
        <Kpi label="Slot Tersedia" value={totalSlot - totalBooked} sub={`dari ${totalSlot} slot total minggu ini`} icon="calendar" tone="accent"/>
        <Kpi label="Slot Terisi" value={totalBooked} sub={`Utilisasi ${Math.round(totalBooked/totalSlot*100)}%`} icon="users" tone="green" progress={Math.round(totalBooked/totalSlot*100)}/>
        <Kpi label="Sesi Cuti" value={cutiCount} sub="dr. Citra (Sel), dr. Dimas (Sab)" icon="alert" tone="amber"/>
        <Kpi label="Dokter Aktif" value={DOKTER.length} sub="2 umum, 1 anak, 1 gigi" icon="user" tone="violet"/>
      </div>

      <Card>
        <div style={{padding:'14px 18px', borderBottom:'1px solid hsl(var(--border))'}}>
          <SectionHead
            title="Jadwal Praktik per Dokter"
            hint="Klik sel untuk melihat detail / mengubah"
            action={<div className="row gap-3 text-sm muted">
              <span><span className="legend-dot" style={{background:'hsl(var(--accent-h) var(--accent-s) 80%)'}}/> Tersedia</span>
              <span><span className="legend-dot" style={{background:'hsl(var(--accent-h) var(--accent-s) 45%)'}}/> Hampir penuh</span>
              <span><span className="legend-dot" style={{background:'hsl(0 70% 90%)'}}/> Cuti</span>
            </div>}
          />
        </div>

        <div style={{padding:'18px', overflowX:'auto'}}>
          <div className="schedule-grid">
            <div className="schedule-cell header" style={{textAlign:'left'}}>Dokter</div>
            {JADWAL.map(d => (
              <div key={d.date} className={'schedule-cell header' + (d.date === TODAY ? ' today' : '')}>
                <div style={{fontSize:11.5, fontWeight:600}}>{d.day}</div>
                <div style={{fontSize:10.5, color:'hsl(var(--muted-foreground))', marginTop:2, fontVariantNumeric:'tabular-nums', fontWeight:400}}>{d.date.slice(8)} Apr</div>
              </div>
            ))}

            {DOKTER.map(dk => (
              <React.Fragment key={dk.id}>
                <div className="schedule-cell dokter-label" style={{flexDirection:'column', alignItems:'flex-start', gap:1}}>
                  <div style={{fontWeight:600, fontSize:12.5}}>{dk.name}</div>
                  <div style={{fontSize:10.5, color:'hsl(var(--muted-foreground))', fontWeight:400}}>{dk.spesialis} · {dk.room}</div>
                  <div style={{fontSize:10.5, color:'hsl(var(--muted-foreground))', fontWeight:400}}>{dk.shift}</div>
                </div>
                {JADWAL.map(d => {
                  const slot = d.slots.find(s => s.dokterId === dk.id);
                  if (slot.cuti) {
                    return (
                      <div key={d.date} className="schedule-cell cuti" title="Cuti">
                        <div style={{fontSize:11, fontWeight:600}}>CUTI</div>
                      </div>
                    );
                  }
                  const ratio = slot.booked / slot.capacity;
                  return (
                    <div key={d.date} className="schedule-cell" onClick={()=>pushToast({msg:`Detail slot ${dk.name} ${d.day}`})} style={{cursor:'pointer'}}>
                      <div style={{fontVariantNumeric:'tabular-nums'}}>
                        <span style={{fontSize:14, fontWeight:600}}>{slot.booked}</span>
                        <span style={{fontSize:11, color:'hsl(var(--muted-foreground))'}}> / {slot.capacity}</span>
                      </div>
                      <div style={{fontSize:10.5, color:'hsl(var(--muted-foreground))', marginTop:2}}>
                        {ratio >= 0.85 ? 'Hampir penuh' : ratio >= 0.6 ? 'Sedang' : 'Tersedia'}
                      </div>
                      <div className="booked-bar"><div style={{width: ratio*100 + '%'}}/></div>
                    </div>
                  );
                })}
              </React.Fragment>
            ))}
          </div>
        </div>
      </Card>

      <div className="grid" style={{gridTemplateColumns:'1fr 1fr', gap:18, marginTop:18}}>
        <Card>
          <div style={{padding:'14px 18px'}}>
            <SectionHead title="Profil Dokter" hint="4 dokter aktif"/>
            <div style={{display:'flex', flexDirection:'column', gap:10, marginTop:10}}>
              {DOKTER.map(d => (
                <div key={d.id} className="dokter-card" style={{padding:'12px 14px'}}>
                  <div className="row between">
                    <div>
                      <div style={{fontWeight:600, fontSize:13.5}}>{d.name}</div>
                      <div style={{fontSize:11.5, color:'hsl(var(--muted-foreground))', marginTop:2}}>
                        Spesialis {d.spesialis} · {d.room}
                      </div>
                    </div>
                    <PastelPill color="teal">{d.shift}</PastelPill>
                  </div>
                  <div style={{fontSize:11.5, color:'hsl(var(--muted-foreground))', marginTop:6}}>
                    Rata-rata konsultasi {d.avgPerVisit} menit per pasien
                  </div>
                </div>
              ))}
            </div>
          </div>
        </Card>

        <Card>
          <div style={{padding:'14px 18px'}}>
            <SectionHead title="Catatan & Pengumuman"/>
            <div style={{display:'flex', flexDirection:'column', gap:10, marginTop:10}}>
              <div className="callout warn">
                <Icon name="info" size={14}/>
                <div>
                  <div style={{fontWeight:600}}>dr. Citra Lestari — Cuti Selasa 21 April</div>
                  <div style={{fontSize:11.5, marginTop:2}}>Pasien anak diarahkan ke dr. Anita atau ditunda ke Rabu 22 April.</div>
                </div>
              </div>
              <div className="callout warn">
                <Icon name="info" size={14}/>
                <div>
                  <div style={{fontWeight:600}}>dr. Dimas Pratomo — Cuti Sabtu 25 April</div>
                  <div style={{fontSize:11.5, marginTop:2}}>Praktik gigi tutup. Pasien yang sudah booking dihubungi reschedule.</div>
                </div>
              </div>
              <div className="callout accent">
                <Icon name="info" size={14}/>
                <div>
                  <div style={{fontWeight:600}}>Tambahan jam praktik dr. Bayu</div>
                  <div style={{fontSize:11.5, marginTop:2}}>Mulai minggu depan dr. Bayu praktik tambahan Sabtu 08:00–12:00 untuk mengisi shift dr. Dimas.</div>
                </div>
              </div>
            </div>
          </div>
        </Card>
      </div>
    </>
  );
}

window.Jadwal = Jadwal;