// Rekam Medis — patient medical records
const { useState: useStateRM } = React;

function RekamMedis({ role, pushToast }) {
  // Default to Pak Budi (P-00287) - hipertensi case with rich data
  const [pasienId, setPasienId] = useStateRM('P-00287');
  const p = PASIEN_BY_ID[pasienId];
  const visits = REKAM_MEDIS.filter(r => r.pasienId === pasienId);

  return (
    <>
      <PageHeader
        eyebrow="Rekam Medis Elektronik"
        title="Riwayat Medis Pasien"
        subtitle="Anamnesa, pemeriksaan fisik, diagnosis, terapi, dan rencana follow-up untuk setiap kunjungan."
        actions={<>
          <select className="select" value={pasienId} onChange={e=>setPasienId(e.target.value)} style={{width:'auto', minWidth:240, height:36}}>
            {PASIEN.map(x => <option key={x.id} value={x.id}>{x.nama} ({x.id})</option>)}
          </select>
          <Btn icon="plus" tone="primary" onClick={()=>pushToast({msg:'Buat catatan kunjungan baru'})}>Catatan Baru</Btn>
          <Btn icon="download" tone="outline">Cetak / PDF</Btn>
        </>}
      />

      <Card style={{marginBottom:18}}>
        <div className="patient-header">
          <PatientAvatar name={p.nama}/>
          <div style={{flex:1, minWidth:0}}>
            <div style={{fontSize:11, color:'hsl(var(--muted-foreground))', textTransform:'uppercase', letterSpacing:'0.06em', fontWeight:600}}>{p.id}</div>
            <div style={{fontSize:20, fontWeight:600, marginTop:2}}>{p.nama}</div>
            <div className="patient-meta" style={{marginTop:6}}>
              <span><Icon name="user" size={12}/> {p.usia} tahun · {p.gender === 'L' ? 'Laki-laki' : 'Perempuan'}</span>
              <span><Icon name="home" size={12}/> {p.alamat}</span>
              <span><Icon name="receipt" size={12}/> BPJS {p.bpjs}</span>
              <span><Icon name="clipboard" size={12}/> {p.visits} kunjungan</span>
            </div>
          </div>
          <div style={{textAlign:'right'}}>
            <div style={{fontSize:11, color:'hsl(var(--muted-foreground))', textTransform:'uppercase', letterSpacing:'0.06em', fontWeight:600}}>Kunjungan Terakhir</div>
            <div style={{fontSize:14, fontWeight:600, marginTop:2}}>{visits[0] ? formatDateID(visits[0].tanggal) : '—'}</div>
          </div>
        </div>

        {(p.kronis || p.alergi !== '—') && (
          <div style={{padding:'12px 18px 16px', display:'flex', flexDirection:'column', gap:8}}>
            {p.kronis && (
              <div className="callout warn">
                <Icon name="info" size={14}/>
                <span><b>Penyakit kronis:</b> {p.kronis} — perhatikan interaksi obat & monitoring rutin</span>
              </div>
            )}
            {p.alergi !== '—' && (
              <div className="callout danger">
                <Icon name="alert" size={14}/>
                <span><b>Alergi obat:</b> {p.alergi} — JANGAN diresepkan</span>
              </div>
            )}
          </div>
        )}
      </Card>

      <Card>
        <div style={{padding:'14px 18px', borderBottom:'1px solid hsl(var(--border))'}}>
          <SectionHead title="Riwayat Kunjungan" hint={`${visits.length} catatan medis`}/>
        </div>

        {visits.length === 0 && (
          <div style={{padding:'40px 20px', textAlign:'center', color:'hsl(var(--muted-foreground))'}}>
            Belum ada catatan rekam medis untuk pasien ini.
          </div>
        )}

        <div className="visit-card-grid">
          {visits.map((v, idx) => {
            const d = DOKTER.find(x => x.id === v.dokterId);
            return (
              <div key={v.id} className="visit-card">
                <div className="row between" style={{marginBottom:10}}>
                  <div>
                    <div style={{fontSize:14, fontWeight:600}}>{formatDateID(v.tanggal)}</div>
                    <div style={{fontSize:11.5, color:'hsl(var(--muted-foreground))', marginTop:2}}>
                      {v.id} · {d ? d.name + ' (' + d.spesialis + ')' : '—'}
                    </div>
                  </div>
                  {idx === 0 && <PastelPill color="teal">Terkini</PastelPill>}
                </div>

                <div style={{fontSize:13, lineHeight:1.5, padding:'10px 12px', background:'hsl(var(--accent-h) var(--accent-s) 97%)', borderRadius:6, marginBottom:12, fontWeight:500}}>
                  <span style={{fontSize:10.5, textTransform:'uppercase', letterSpacing:'0.06em', color:'hsl(var(--muted-foreground))', fontWeight:600, display:'block', marginBottom:2}}>Diagnosa</span>
                  {v.dx}
                </div>

                <div className="vitals">
                  <div className="vital">
                    <div className="vital-label">Tekanan Darah</div>
                    <div className="vital-value">{v.td} <span className="vital-unit">mmHg</span></div>
                  </div>
                  <div className="vital">
                    <div className="vital-label">Nadi</div>
                    <div className="vital-value">{v.nadi} <span className="vital-unit">/menit</span></div>
                  </div>
                  <div className="vital">
                    <div className="vital-label">Suhu</div>
                    <div className="vital-value">{v.suhu} <span className="vital-unit">°C</span></div>
                  </div>
                  <div className="vital">
                    <div className="vital-label">Berat Badan</div>
                    <div className="vital-value">{v.bb} <span className="vital-unit">kg</span></div>
                  </div>
                </div>

                <div style={{marginTop:14, display:'flex', flexDirection:'column', gap:10}}>
                  <RmSection label="Anamnesa" value={v.anamnesa}/>
                  <RmSection label="Terapi" value={v.terapi}/>
                  <RmSection label="Follow-up" value={v.followUp}/>
                </div>

                <div className="row gap-2" style={{marginTop:14, paddingTop:12, borderTop:'1px solid hsl(var(--border))'}}>
                  <Btn icon="eye" tone="outline" size="sm">Detail Lengkap</Btn>
                  <Btn icon="edit" tone="ghost" size="sm">Edit</Btn>
                </div>
              </div>
            );
          })}
        </div>
      </Card>
    </>
  );
}

function RmSection({label, value}) {
  return (
    <div>
      <div style={{fontSize:10.5, textTransform:'uppercase', letterSpacing:'0.06em', color:'hsl(var(--muted-foreground))', fontWeight:600, marginBottom:3}}>{label}</div>
      <div style={{fontSize:12.5, lineHeight:1.5}}>{value}</div>
    </div>
  );
}

window.RekamMedis = RekamMedis;