// Laporan — clinic analytics & reports
const { useState: useStateLP } = React;

function Laporan({ pushToast }) {
  const [range, setRange] = useStateLP('30');

  // Build derived stats
  const total30 = VISITS_DAILY.reduce((s, v) => s + v.total, 0);
  const avgDaily = Math.round(total30 / VISITS_DAILY.length);
  const peakDay = VISITS_DAILY.reduce((max, v) => v.total > max.total ? v : max, VISITS_DAILY[0]);
  const lowDay = VISITS_DAILY.reduce((min, v) => v.total < min.total ? v : min, VISITS_DAILY[0]);

  // Revenue projection (rough)
  const revenue30 = total30 * 85_000; // average per visit
  const bpjsCount = Math.round(total30 * 0.62);
  const umumCount = total30 - bpjsCount;

  // Dokter performance
  const dokterPerf = DOKTER.map(d => {
    const list = ANTRIAN.filter(a => a.dokterId === d.id && a.status === 'done');
    return {
      ...d,
      pasien: list.length,
      revenue: list.length * (d.spesialis === 'Gigi' ? 180_000 : d.spesialis === 'Anak' ? 120_000 : 75_000),
    };
  }).sort((a,b) => b.pasien - a.pasien);

  return (
    <>
      <PageHeader
        eyebrow="Periode 30 Hari Terakhir"
        title="Laporan & Analitik Klinik"
        subtitle={`${total30} kunjungan dalam 30 hari terakhir, rata-rata ${avgDaily} pasien per hari operasional. Hari tersibuk ${formatDateID(peakDay.date)} (${peakDay.total} pasien).`}
        actions={<>
          <select className="select" value={range} onChange={e=>setRange(e.target.value)} style={{width:'auto', minWidth:160, height:36}}>
            <option value="7">7 hari terakhir</option>
            <option value="30">30 hari terakhir</option>
            <option value="90">3 bulan terakhir</option>
          </select>
          <Btn icon="download" tone="primary" onClick={()=>pushToast({msg:'Laporan PDF diunduh'})}>Unduh PDF</Btn>
          <Btn icon="upload" tone="outline">Kirim ke Email</Btn>
        </>}
      />

      <div className="grid g-4" style={{marginBottom:18}}>
        <Kpi label="Total Kunjungan" value={total30} sub={`Avg ${avgDaily}/hari · ${VISITS_DAILY.length} hari operasional`} icon="users" tone="accent"/>
        <Kpi label="Estimasi Revenue" value={rupiah(revenue30, {sym:true, compact:true})} sub="Asumsi avg Rp 85rb/kunjungan" icon="dollar" tone="green"/>
        <Kpi label="Komposisi BPJS" value={`${Math.round(bpjsCount/total30*100)}%`} sub={`${bpjsCount} BPJS · ${umumCount} umum`} icon="receipt" tone="violet"/>
        <Kpi label="Hari Tersibuk" value={peakDay.total} sub={formatDateID(peakDay.date)} icon="trending" tone="amber"/>
      </div>

      <div className="grid" style={{gridTemplateColumns:'1.4fr 1fr', gap:18, marginBottom:18}}>
        <Card>
          <div style={{padding:'14px 16px', borderBottom:'1px solid hsl(var(--border))'}}>
            <SectionHead title="Tren Kunjungan Harian" hint="14 hari terakhir"/>
          </div>
          <div style={{padding:'18px 16px 14px'}}>
            <div className="row" style={{gap:6, alignItems:'flex-end', height:200}}>
              {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;
                const isMinggu = new Date(v.date + 'T00:00:00').getDay() === 0;
                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))', fontWeight:500}}>{v.total}</div>
                    <div title={`${v.date}: ${v.total} pasien`} style={{
                      width:'100%', height: h + '%', minHeight:4,
                      background: today ? 'hsl(var(--accent-h) var(--accent-s) var(--accent-l))'
                                  : isMinggu ? 'hsl(0 30% 88%)'
                                  : 'hsl(var(--accent-h) var(--accent-s) 78%)',
                      borderRadius:'3px 3px 0 0'
                    }}/>
                    <div style={{fontSize:10, color:'hsl(var(--muted-foreground))', fontVariantNumeric:'tabular-nums'}}>{v.date.slice(8)}</div>
                  </div>
                );
              })}
            </div>
            <div className="row gap-3 text-sm muted" style={{marginTop:14, justifyContent:'center'}}>
              <span><span className="legend-dot" style={{background:'hsl(var(--accent-h) var(--accent-s) var(--accent-l))'}}/> Hari ini</span>
              <span><span className="legend-dot" style={{background:'hsl(var(--accent-h) var(--accent-s) 78%)'}}/> Hari kerja</span>
              <span><span className="legend-dot" style={{background:'hsl(0 30% 88%)'}}/> Minggu (tutup)</span>
            </div>
          </div>
        </Card>

        <Card>
          <div style={{padding:'14px 16px', borderBottom:'1px solid hsl(var(--border))'}}>
            <SectionHead title="Top Diagnosis" hint="30 hari terakhir"/>
          </div>
          <div style={{padding:'12px 16px'}}>
            {TOP_DX.map((dx, i) => (
              <div key={dx.dx} style={{padding:'8px 0', borderTop: i === 0 ? 'none' : '1px solid hsl(var(--border))'}}>
                <div className="row between" style={{marginBottom:5}}>
                  <div style={{fontSize:12.5, fontWeight:500}}>{dx.dx}</div>
                  <div style={{fontSize:12, fontVariantNumeric:'tabular-nums'}}>
                    <b>{dx.count}</b>
                    <span style={{color:'hsl(var(--muted-foreground))', marginLeft:6}}>{dx.pct}%</span>
                  </div>
                </div>
                <div style={{height:5, background:'hsl(var(--muted))', borderRadius:999, overflow:'hidden'}}>
                  <div style={{
                    width: dx.pct * 3 + '%',
                    height:'100%',
                    background:'hsl(var(--accent-h) var(--accent-s) var(--accent-l))',
                    borderRadius:999
                  }}/>
                </div>
              </div>
            ))}
          </div>
        </Card>
      </div>

      <Card style={{marginBottom:18}}>
        <div style={{padding:'14px 16px', borderBottom:'1px solid hsl(var(--border))'}}>
          <SectionHead title="Performa Dokter" hint="Pasien & estimasi revenue hari ini"/>
        </div>
        <table className="table">
          <thead>
            <tr>
              <th>Dokter</th>
              <th>Spesialis</th>
              <th>Ruang</th>
              <th style={{textAlign:'right'}}>Pasien</th>
              <th style={{textAlign:'right'}}>Avg. Konsul</th>
              <th style={{textAlign:'right'}}>Estimasi Revenue</th>
            </tr>
          </thead>
          <tbody>
            {dokterPerf.map(d => (
              <tr key={d.id}>
                <td>
                  <div style={{fontWeight:500}}>{d.name}</div>
                </td>
                <td><PastelPill color="teal">{d.spesialis}</PastelPill></td>
                <td style={{fontSize:12.5}}>{d.room}</td>
                <td style={{textAlign:'right', fontVariantNumeric:'tabular-nums', fontWeight:500}}>{d.pasien}</td>
                <td style={{textAlign:'right', fontVariantNumeric:'tabular-nums'}}>{d.avgPerVisit} mnt</td>
                <td style={{textAlign:'right', fontVariantNumeric:'tabular-nums', fontWeight:500}}>{rupiah(d.revenue, {sym:true})}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </Card>

      <div className="grid" style={{gridTemplateColumns:'1fr 1fr', gap:18}}>
        <Card>
          <div style={{padding:'14px 16px', borderBottom:'1px solid hsl(var(--border))'}}>
            <SectionHead title="Klaim BPJS" hint="Status submission"/>
          </div>
          <div style={{padding:'14px 16px'}}>
            <div className="form-grid">
              <BpjsRow label="Submitted bulan ini" value="287 klaim"/>
              <BpjsRow label="Approved" value="265 (92%)" tone="green"/>
              <BpjsRow label="Pending verifikasi" value="18 klaim" tone="amber"/>
              <BpjsRow label="Ditolak" value="4 klaim" tone="rose"/>
              <BpjsRow label="Total nilai klaim" value={rupiah(287 * 75_000, {sym:true, compact:true})}/>
              <BpjsRow label="Estimasi disbursement" value="2026-05-15"/>
            </div>
            <div className="callout accent" style={{marginTop:14}}>
              <Icon name="info" size={14}/>
              <span>Periode klaim 1—30 April 2026. Submission terakhir akan diproses tanggal 30 April pukul 23:59.</span>
            </div>
          </div>
        </Card>

        <Card>
          <div style={{padding:'14px 16px', borderBottom:'1px solid hsl(var(--border))'}}>
            <SectionHead title="Indikator Mutu Klinik" hint="Bulan berjalan"/>
          </div>
          <div style={{padding:'14px 16px', display:'flex', flexDirection:'column', gap:14}}>
            <QualityBar label="Waktu tunggu rata-rata" value={KPI.avgWaitMin} unit=" menit" target={20} better="lower"/>
            <QualityBar label="Lama konsultasi rata-rata" value={KPI.avgConsultMin} unit=" menit" target={15} better="higher"/>
            <QualityBar label="Tingkat kunjungan kembali" value={68} unit="%" target={70} better="higher"/>
            <QualityBar label="Kepuasan pasien (survei)" value={4.6} unit="/5" target={4.5} better="higher"/>
            <QualityBar label="Resep tanpa interaksi alergi" value={100} unit="%" target={100} better="higher"/>
          </div>
        </Card>
      </div>
    </>
  );
}

function BpjsRow({ label, value, tone }) {
  const colorMap = { green:'green', amber:'amber', rose:'rose' };
  return (
    <div>
      <div style={{fontSize:11, textTransform:'uppercase', letterSpacing:'0.06em', color:'hsl(var(--muted-foreground))', fontWeight:600, marginBottom:3}}>{label}</div>
      <div style={{fontSize:14, fontWeight:600, fontVariantNumeric:'tabular-nums'}}>
        {tone ? <PastelPill color={colorMap[tone]}>{value}</PastelPill> : value}
      </div>
    </div>
  );
}

function QualityBar({ label, value, unit, target, better }) {
  const pct = better === 'higher' ? Math.min(100, (value / target) * 100) : Math.min(100, (target / value) * 100);
  const ok = better === 'higher' ? value >= target : value <= target;
  return (
    <div>
      <div className="row between" style={{marginBottom:4}}>
        <div style={{fontSize:12.5, fontWeight:500}}>{label}</div>
        <div style={{fontSize:12.5, fontVariantNumeric:'tabular-nums'}}>
          <b>{value}{unit}</b>
          <span style={{color:'hsl(var(--muted-foreground))', marginLeft:6}}>target {target}{unit}</span>
        </div>
      </div>
      <div style={{height:6, background:'hsl(var(--muted))', borderRadius:999, overflow:'hidden'}}>
        <div style={{width: pct + '%', height:'100%', background: ok ? 'hsl(152 60% 45%)' : 'hsl(38 90% 52%)', borderRadius:999}}/>
      </div>
    </div>
  );
}

window.Laporan = Laporan;