// Antrian Pasien — live queue management
const { useState: useStateAQ } = React;

function Antrian({ dokter, role, pushToast }) {
  const [filter, setFilter] = useStateAQ('all');
  const [selected, setSelected] = useStateAQ(null);

  let list = ANTRIAN;
  if (dokter !== 'all') list = list.filter(a => a.dokterId === dokter);
  if (filter !== 'all') list = list.filter(a => a.status === filter);

  const sel = selected ? ANTRIAN.find(a => a.no === selected) : null;
  const selP = sel ? PASIEN_BY_ID[sel.pasienId] : null;
  const selD = sel ? DOKTER.find(d => d.id === sel.dokterId) : null;

  const counts = {
    all: ANTRIAN.length,
    waiting: ANTRIAN.filter(a => a.status === 'waiting').length,
    'in-room': ANTRIAN.filter(a => a.status === 'in-room').length,
    done: ANTRIAN.filter(a => a.status === 'done').length,
  };

  return (
    <>
      <PageHeader
        eyebrow={`${formatDateID(TODAY)} · ${NOW_HHMM} WIB`}
        title="Antrian Pasien Hari Ini"
        subtitle={`${counts.waiting} pasien menunggu, ${counts['in-room']} sedang ditangani, ${counts.done} selesai. Rata² waktu tunggu hari ini ${fmtMin(KPI.avgWaitMin)}.`}
        actions={<>
          <Btn icon="plus" tone="primary" onClick={()=>pushToast({msg:'Form pendaftaran pasien dibuka'})}>Pendaftaran Baru</Btn>
          <Btn icon="play" tone="outline" onClick={()=>pushToast({msg:'Display antrian dibuka di tab baru'})}>Display Antrian</Btn>
        </>}
      />

      <div className="grid" style={{gridTemplateColumns: sel ? '1.6fr 1fr' : '1fr', gap:18}}>
        <Card>
          <div className="row between" style={{padding:'12px 16px', borderBottom:'1px solid hsl(var(--border))', flexWrap:'wrap', gap:8}}>
            <div className="row gap-2">
              {[
                {id:'all',label:'Semua', tone:'gray'},
                {id:'waiting',label:'Menunggu', tone:'teal'},
                {id:'in-room',label:'Di Ruang', tone:'amber'},
                {id:'done',label:'Selesai', tone:'green'},
              ].map(f => (
                <button key={f.id} onClick={()=>setFilter(f.id)}
                  className={'btn ' + (filter === f.id ? '' : 'outline') + ' sm'}>
                  {f.label} <span style={{marginLeft:6, opacity:0.7, fontVariantNumeric:'tabular-nums'}}>{counts[f.id]}</span>
                </button>
              ))}
            </div>
            <input className="input" placeholder="Cari nomor antrian / nama pasien…" style={{maxWidth:280}}/>
          </div>

          <div style={{maxHeight:'62vh', overflowY:'auto'}}>
            <table className="table">
              <thead style={{position:'sticky', top:0, background:'hsl(var(--card))', zIndex:1}}>
                <tr>
                  <th style={{width:80}}>No.</th>
                  <th>Pasien</th>
                  <th>Dokter</th>
                  <th>Tipe</th>
                  <th>Daftar</th>
                  <th>Tunggu</th>
                  <th>Status</th>
                </tr>
              </thead>
              <tbody>
                {list.map(a => {
                  const p = PASIEN_BY_ID[a.pasienId];
                  const d = DOKTER.find(x => x.id === a.dokterId);
                  const wait = a.status === 'waiting' ? minutesSince(a.registeredAt)
                             : a.status === 'in-room' ? (() => { const [h,m]=a.calledAt.split(':').map(Number); const [rh,rm]=a.registeredAt.split(':').map(Number); return (h*60+m)-(rh*60+rm); })()
                             : (() => { const [h,m]=a.calledAt.split(':').map(Number); const [rh,rm]=a.registeredAt.split(':').map(Number); return (h*60+m)-(rh*60+rm); })();
                  return (
                    <tr key={a.no} onClick={()=>setSelected(a.no)} style={{cursor:'pointer', background: selected===a.no ? 'hsl(var(--accent-h) 50% 95%)' : undefined}}>
                      <td><span className="mono" style={{fontWeight:600}}>{a.no}</span></td>
                      <td>
                        <div style={{fontWeight:500}}>{p.nama}</div>
                        <div style={{fontSize:11, color:'hsl(var(--muted-foreground))'}}>{p.id} · {p.usia}th {p.gender}</div>
                      </td>
                      <td>
                        <div style={{fontSize:12.5}}>{d.name}</div>
                        <div style={{fontSize:11, color:'hsl(var(--muted-foreground))'}}>{d.spesialis} · {d.room}</div>
                      </td>
                      <td><Pill tone={a.tipe==='BPJS'?'accent':'neutral'}>{a.tipe}</Pill></td>
                      <td className="mono" style={{fontVariantNumeric:'tabular-nums'}}>{a.registeredAt}</td>
                      <td className="mono" style={{fontVariantNumeric:'tabular-nums', color: wait > 30 ? 'hsl(var(--destructive))' : undefined}}>{fmtMin(wait)}</td>
                      <td><StatusPill status={a.status}/></td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
            {list.length === 0 && <div style={{padding:'24px', textAlign:'center', color:'hsl(var(--muted-foreground))', fontSize:13}}>Tidak ada antrian sesuai filter.</div>}
          </div>
        </Card>

        {sel && (
          <Card>
            <div style={{padding:'16px 18px', borderBottom:'1px solid hsl(var(--border))'}}>
              <div className="row between">
                <div>
                  <div style={{fontSize:11, textTransform:'uppercase', letterSpacing:'0.06em', color:'hsl(var(--muted-foreground))', fontWeight:600}}>Antrian</div>
                  <div className="mono" style={{fontSize:22, fontWeight:600, marginTop:2}}>{sel.no}</div>
                </div>
                <button className="btn ghost sm" onClick={()=>setSelected(null)}><Icon name="x" size={14}/></button>
              </div>
              <div style={{marginTop:10}}><StatusPill status={sel.status}/></div>
            </div>

            <div style={{padding:'16px 18px', borderBottom:'1px solid hsl(var(--border))'}}>
              <div className="row gap-3" style={{alignItems:'center'}}>
                <PatientAvatar name={selP.nama}/>
                <div style={{flex:1, minWidth:0}}>
                  <div style={{fontWeight:600, fontSize:14}}>{selP.nama}</div>
                  <div style={{fontSize:12, color:'hsl(var(--muted-foreground))'}}>{selP.id} · {selP.usia} tahun · {selP.gender === 'L' ? 'Laki-laki' : 'Perempuan'}</div>
                  <div style={{fontSize:12, color:'hsl(var(--muted-foreground))', marginTop:2}}>{selP.alamat}</div>
                </div>
              </div>
              {selP.kronis && (
                <div className="callout warn" style={{marginTop:12}}>
                  <Icon name="info" size={14}/>
                  <span><b>Penyakit kronis:</b> {selP.kronis}</span>
                </div>
              )}
              {selP.alergi !== '—' && (
                <div className="callout danger" style={{marginTop:8}}>
                  <Icon name="alert" size={14}/>
                  <span><b>Alergi obat:</b> {selP.alergi}</span>
                </div>
              )}
            </div>

            <div style={{padding:'16px 18px', borderBottom:'1px solid hsl(var(--border))'}}>
              <SectionHead title="Detail Konsultasi"/>
              <div className="form-grid">
                <Field label="Dokter" value={`${selD.name} (${selD.spesialis})`}/>
                <Field label="Ruang" value={selD.room}/>
                <Field label="Tipe Bayar" value={sel.tipe}/>
                <Field label="No. BPJS" value={selP.bpjs}/>
                <Field label="Daftar" value={`${sel.registeredAt} WIB`}/>
                <Field label="Dipanggil" value={sel.calledAt ? `${sel.calledAt} WIB` : '—'}/>
              </div>
              <div style={{marginTop:12}}>
                <div style={{fontSize:11, textTransform:'uppercase', letterSpacing:'0.06em', color:'hsl(var(--muted-foreground))', fontWeight:600, marginBottom:4}}>Keluhan</div>
                <div style={{fontSize:13, lineHeight:1.5, padding:'8px 10px', background:'hsl(var(--muted))', borderRadius:6}}>{sel.keluhan}</div>
              </div>
            </div>

            <div style={{padding:'16px 18px'}}>
              <div className="row gap-2" style={{flexWrap:'wrap'}}>
                {sel.status === 'waiting' && <Btn icon="play" tone="primary" onClick={()=>pushToast({msg:`${sel.no} dipanggil ke ${selD.room}`})}>Panggil ke Ruang</Btn>}
                {sel.status === 'in-room' && <Btn icon="check" tone="primary" onClick={()=>pushToast({msg:`${sel.no} ditandai selesai`})}>Selesai Konsultasi</Btn>}
                <Btn icon="clipboard" tone="outline" onClick={()=>pushToast({msg:'Buka rekam medis pasien'})}>Rekam Medis</Btn>
                <Btn icon="package" tone="outline" onClick={()=>pushToast({msg:'Buat resep baru'})}>Buat Resep</Btn>
                <Btn icon="x" tone="ghost" onClick={()=>pushToast({msg:`${sel.no} dibatalkan`, type:'warning'})}>Batalkan</Btn>
              </div>
            </div>
          </Card>
        )}
      </div>
    </>
  );
}

function Field({label, value}) {
  return (
    <div>
      <div style={{fontSize:11, textTransform:'uppercase', letterSpacing:'0.06em', color:'hsl(var(--muted-foreground))', fontWeight:600, marginBottom:2}}>{label}</div>
      <div style={{fontSize:13, fontWeight:500}}>{value}</div>
    </div>
  );
}

window.Antrian = Antrian;
window.Field = Field;