// Pasien — patient database
const { useState: useStateP } = React;

function Pasien({ role, setPage, pushToast }) {
  const [q, setQ] = useStateP('');
  const [selected, setSelected] = useStateP(null);

  const filtered = PASIEN.filter(p => !q || (p.nama + ' ' + p.id + ' ' + p.alamat).toLowerCase().includes(q.toLowerCase()));
  const sel = selected ? PASIEN_BY_ID[selected] : null;

  const stats = {
    total: PASIEN.length,
    bpjs: PASIEN.filter(p => p.bpjs !== '—').length,
    kronis: PASIEN.filter(p => p.kronis).length,
    visitsAvg: Math.round(PASIEN.reduce((s,p)=>s+p.visits, 0) / PASIEN.length),
  };

  return (
    <>
      <PageHeader
        eyebrow="Master Data"
        title="Database Pasien"
        subtitle={`${stats.total} pasien terdaftar · ${stats.bpjs} peserta BPJS · ${stats.kronis} pasien dengan penyakit kronis. Rata-rata ${stats.visitsAvg} kunjungan per pasien.`}
        actions={<>
          <Btn icon="plus" tone="primary" onClick={()=>pushToast({msg:'Form pasien baru dibuka'})}>Daftarkan Pasien</Btn>
          <Btn icon="download" tone="outline">Ekspor CSV</Btn>
        </>}
      />

      <div className="grid g-4" style={{marginBottom:18}}>
        <Kpi label="Total Pasien" value={stats.total} icon="users" tone="accent"/>
        <Kpi label="Peserta BPJS" value={`${stats.bpjs} / ${stats.total}`} sub={`${Math.round(stats.bpjs/stats.total*100)}% dari total`} icon="receipt" tone="green"/>
        <Kpi label="Penyakit Kronis" value={stats.kronis} sub="HT, DM, Kolesterol" icon="alert" tone="amber"/>
        <Kpi label="Avg. Kunjungan" value={stats.visitsAvg} sub="per pasien (life-time)" icon="trending" tone="violet"/>
      </div>

      <div className="grid" style={{gridTemplateColumns: sel ? '1.3fr 1fr' : '1fr', gap:18}}>
        <Card>
          <div style={{padding:'12px 16px', borderBottom:'1px solid hsl(var(--border))'}}>
            <input className="input" placeholder="Cari nama, ID pasien, atau alamat…" value={q} onChange={e=>setQ(e.target.value)}/>
          </div>
          <div style={{maxHeight:'58vh', overflowY:'auto'}}>
            <table className="table">
              <thead style={{position:'sticky', top:0, background:'hsl(var(--card))', zIndex:1}}>
                <tr>
                  <th>ID Pasien</th>
                  <th>Nama</th>
                  <th>Usia / JK</th>
                  <th>Alamat</th>
                  <th>BPJS</th>
                  <th style={{textAlign:'right'}}>Kunjungan</th>
                </tr>
              </thead>
              <tbody>
                {filtered.map(p => (
                  <tr key={p.id} onClick={()=>setSelected(p.id)} style={{cursor:'pointer', background: selected===p.id ? 'hsl(var(--accent-h) 50% 95%)' : undefined}}>
                    <td><span className="mono">{p.id}</span></td>
                    <td>
                      <div style={{fontWeight:500}}>{p.nama}</div>
                      {p.kronis && <div style={{fontSize:11, color:'hsl(var(--destructive))', marginTop:1}}>{p.kronis}</div>}
                    </td>
                    <td style={{fontVariantNumeric:'tabular-nums'}}>{p.usia} / {p.gender}</td>
                    <td style={{fontSize:12.5}}>{p.alamat}</td>
                    <td>{p.bpjs === '—' ? <span style={{color:'hsl(var(--muted-foreground))'}}>—</span> : <span className="mono" style={{fontSize:11.5}}>{p.bpjs}</span>}</td>
                    <td style={{textAlign:'right', fontVariantNumeric:'tabular-nums', fontWeight:500}}>{p.visits}×</td>
                  </tr>
                ))}
              </tbody>
            </table>
            {filtered.length === 0 && <div style={{padding:'24px', textAlign:'center', color:'hsl(var(--muted-foreground))', fontSize:13}}>Tidak ada pasien yang cocok.</div>}
          </div>
        </Card>

        {sel && (
          <Card>
            <div className="patient-header">
              <PatientAvatar name={sel.nama}/>
              <div style={{flex:1, minWidth:0}}>
                <div style={{fontSize:11, color:'hsl(var(--muted-foreground))', textTransform:'uppercase', letterSpacing:'0.06em', fontWeight:600}}>{sel.id}</div>
                <div style={{fontSize:18, fontWeight:600, marginTop:2}}>{sel.nama}</div>
                <div style={{fontSize:12.5, color:'hsl(var(--muted-foreground))', marginTop:2}}>
                  {sel.usia} tahun · {sel.gender === 'L' ? 'Laki-laki' : 'Perempuan'} · {sel.visits} kunjungan
                </div>
              </div>
              <button className="btn ghost sm" onClick={()=>setSelected(null)}><Icon name="x" size={14}/></button>
            </div>

            {(sel.kronis || sel.alergi !== '—') && (
              <div style={{padding:'12px 18px 0'}}>
                {sel.kronis && (
                  <div className="callout warn" style={{marginBottom:8}}>
                    <Icon name="info" size={14}/>
                    <span><b>Penyakit kronis:</b> {sel.kronis}</span>
                  </div>
                )}
                {sel.alergi !== '—' && (
                  <div className="callout danger">
                    <Icon name="alert" size={14}/>
                    <span><b>Alergi:</b> {sel.alergi}</span>
                  </div>
                )}
              </div>
            )}

            <div style={{padding:'16px 18px', borderTop:'1px solid hsl(var(--border))', marginTop:16}}>
              <SectionHead title="Data Pasien"/>
              <div className="form-grid">
                <Field label="Telepon" value={sel.phone}/>
                <Field label="No. BPJS" value={sel.bpjs}/>
                <Field label="Alamat" value={sel.alamat}/>
                <Field label="Total Kunjungan" value={`${sel.visits}×`}/>
              </div>
            </div>

            <div style={{padding:'12px 18px 18px', borderTop:'1px solid hsl(var(--border))'}}>
              <div className="row gap-2" style={{flexWrap:'wrap'}}>
                <Btn icon="clipboard" tone="primary" onClick={()=>setPage('rekam')}>Lihat Rekam Medis</Btn>
                <Btn icon="plus" tone="outline" onClick={()=>pushToast({msg:'Daftarkan pasien ke antrian'})}>Daftar Antrian</Btn>
                <Btn icon="edit" tone="outline">Ubah Data</Btn>
              </div>
            </div>
          </Card>
        )}
      </div>
    </>
  );
}

window.Pasien = Pasien;