// ── View: RawatInapRujukan — Antrean Rujukan masuk Rawat Inap ─────────────────
// Sumber rujukan: Rawat Jalan (poli) dan IGD.
// Rujukan dari RS eksternal selalu masuk via IGD terlebih dahulu.

const RUJUKAN_LIST = [
  {
    id: 'RUJ-001',
    noRujukan: '0301R0010426V000142',
    nama: 'Budi Santoso',
    rm: '02-14-88-21',
    usia: '54 th',
    jk: 'L',
    tipe: 'BPJS',
    noBpjs: '0001234567890',
    hakKelas: 'Kelas 1',
    asal: 'rajal',
    asalLabel: 'Poli Penyakit Dalam',
    dokterPerujuk: 'dr. Rina Kusuma, Sp.PD',
    dpjpTarget: 'dr. Andi Wijaya, Sp.PD',
    diagnosis: 'I10 — Essential hypertension',
    indikasiSingkat: 'TD 158/96 mmHg tidak terkontrol, perlu monitoring ketat & titrasi antihipertensi',
    catatan: 'Pasien sudah mendapat amlodipine 5 mg & bisoprolol 2.5 mg. Disarankan opname 3–5 hari untuk stabilisasi.',
    waktuRujukan: '2026-04-28 08:32',
    status: 'menunggu',
    prioritas: 'normal',
  },
  {
    id: 'RUJ-002',
    noRujukan: '0301R0010426V000139',
    nama: 'Siti Rahayu',
    rm: '01-09-22-07',
    usia: '38 th',
    jk: 'P',
    tipe: 'BPJS',
    noBpjs: '0009876543210',
    hakKelas: 'Kelas 2',
    asal: 'igd',
    asalLabel: 'IGD',
    dokterPerujuk: 'dr. Hendra Gunawan',
    dpjpTarget: 'dr. Sari Dewi, Sp.OG',
    diagnosis: 'O60 — Preterm labour',
    indikasiSingkat: 'Kontraksi 3x/10 menit, usia kehamilan 34+2 minggu, monitoring & tokolisis',
    catatan: 'GBS status unknown. CTG: reaktif. Konsul Sp.OG sudah dilakukan.',
    waktuRujukan: '2026-04-28 07:15',
    status: 'dikonfirmasi',
    prioritas: 'tinggi',
  },
  {
    id: 'RUJ-003',
    noRujukan: '0301R0010426V000137',
    nama: 'Agus Hermawan',
    rm: '03-27-55-14',
    usia: '61 th',
    jk: 'L',
    tipe: 'Umum',
    noBpjs: null,
    hakKelas: null,
    asal: 'igd',
    asalLabel: 'IGD',
    dokterPerujuk: 'dr. Yusuf Pratama',
    dpjpTarget: 'dr. Wulan Pratiwi, Sp.JP',
    diagnosis: 'I21.9 — Acute MI, unspecified',
    indikasiSingkat: 'STEMI anterior, sudah thrombolysis, perlu evaluasi lanjut & cath lab',
    catatan: 'Streptokinase 1.5 juta unit diberikan 2 jam lalu. EKG terlampir di EMR IGD. Perlu ICCU.',
    waktuRujukan: '2026-04-28 06:48',
    status: 'menunggu',
    prioritas: 'kritis',
  },
  {
    id: 'RUJ-004',
    noRujukan: '0301R0010426V000136',
    nama: 'Dewi Lestari',
    rm: '00-88-31-03',
    usia: '45 th',
    jk: 'P',
    tipe: 'BPJS',
    noBpjs: '0005551234567',
    hakKelas: 'Kelas 3',
    asal: 'rajal',
    asalLabel: 'Poli Bedah',
    dokterPerujuk: 'dr. Fajar Nugroho, Sp.B',
    dpjpTarget: 'dr. Fajar Nugroho, Sp.B',
    diagnosis: 'K80.2 — Calculus of gallbladder with acute cholecystitis',
    indikasiSingkat: 'Nyeri RUQ, demam, rencana laparoskopi kolesistektomi elektif',
    catatan: 'Puasa sejak pukul 00.00. Informed consent sudah ditandatangani.',
    waktuRujukan: '2026-04-27 17:05',
    status: 'checked-in',
    prioritas: 'normal',
  },
];

const STATUS_META = {
  menunggu:     { label: 'Menunggu',     cls: 'warn', icon: 'clock' },
  dikonfirmasi: { label: 'Dikonfirmasi', cls: 'info', icon: 'phone' },
  'checked-in': { label: 'Check-in ✓',  cls: 'ok',   icon: 'check' },
};

const PRIORITAS_META = {
  normal: { label: 'Normal', color: 'var(--text-3)' },
  tinggi: { label: 'Tinggi', color: 'var(--warn)' },
  kritis: { label: 'Kritis', color: 'var(--err)' },
};

const ASAL_META = {
  rajal: { icon: 'stethoscope', color: 'var(--accent)',   label: 'Rawat Jalan' },
  igd:   { icon: 'heart',       color: 'var(--err)',      label: 'IGD' },
};

// ── Sub-components ────────────────────────────────────────────────────────────

const FieldLabel = ({ children }) => (
  <div style={{fontSize:10.5, fontWeight:600, color:'var(--text-3)', letterSpacing:'0.04em', textTransform:'uppercase', marginBottom:5}}>
    {children}
  </div>
);

const Field = ({ label, value, mono }) => (
  <div>
    <FieldLabel>{label}</FieldLabel>
    <div style={{fontSize:12.5, fontFamily: mono ? 'var(--font-mono)' : 'inherit', color:'var(--text)'}}>{value}</div>
  </div>
);

const AsalBadge = ({ asal }) => {
  const meta = ASAL_META[asal] || ASAL_META.rajal;
  return (
    <span style={{display:'inline-flex', alignItems:'center', gap:4, fontSize:11, color: meta.color, fontWeight:600}}>
      <Icon name={meta.icon} size={11}/>{meta.label}
    </span>
  );
};

// ── Detail panel ──────────────────────────────────────────────────────────────

const DetailPanel = ({ rujukan, onCheckin, onConfirm, onClose }) => {
  const [bangsal, setBangsal] = React.useState('Melati');
  const [bed, setBed] = React.useState('308B');
  const [dpjp, setDpjp] = React.useState(rujukan.dpjpTarget);
  const [kelas, setKelas] = React.useState(rujukan.hakKelas || 'Kelas 1');

  const status = STATUS_META[rujukan.status];
  const prioritas = PRIORITAS_META[rujukan.prioritas];
  const checkedIn = rujukan.status === 'checked-in';

  return (
    <div style={{display:'flex', flexDirection:'column', gap:14}}>

      {/* ── Patient header ── */}
      <div style={{display:'flex', alignItems:'center', justifyContent:'space-between'}}>
        <div style={{display:'flex', alignItems:'center', gap:10}}>
          <div style={{
            width:42, height:42, borderRadius:'50%',
            background:'var(--accent-soft)', color:'var(--accent)',
            display:'grid', placeItems:'center', fontSize:15, fontWeight:700, flexShrink:0,
          }}>
            {rujukan.nama.split(' ').map(w => w[0]).slice(0, 2).join('')}
          </div>
          <div>
            <div style={{fontWeight:700, fontSize:14.5}}>{rujukan.nama}</div>
            <div style={{fontSize:11, color:'var(--text-3)', fontFamily:'var(--font-mono)'}}>
              {rujukan.rm} · {rujukan.usia} · {rujukan.jk === 'L' ? 'Laki-laki' : 'Perempuan'}
            </div>
          </div>
        </div>
        <div style={{display:'flex', gap:6, alignItems:'center'}}>
          {rujukan.prioritas !== 'normal' && (
            <span style={{fontSize:11, fontWeight:700, color: prioritas.color}}>● {prioritas.label}</span>
          )}
          <span className={`badge ${status.cls}`}>{status.label}</span>
          <button className="btn btn-ghost btn-sm" onClick={onClose}><Icon name="x" size={13}/></button>
        </div>
      </div>

      {/* ── Rujukan info ── */}
      <div className="card">
        <div className="card-h"><h3>Data Rujukan</h3></div>
        <div className="card-b" style={{display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:14}}>
          <Field label="No. Rujukan" value={rujukan.noRujukan} mono />
          <div>
            <FieldLabel>Asal</FieldLabel>
            <AsalBadge asal={rujukan.asal} />
            <div style={{fontSize:12, color:'var(--text-2)', marginTop:2}}>{rujukan.asalLabel}</div>
          </div>
          <Field label="Dokter Perujuk" value={rujukan.dokterPerujuk} />
          <Field label="Tipe Pasien" value={rujukan.tipe} />
          {rujukan.noBpjs  && <Field label="No. BPJS"  value={rujukan.noBpjs}  mono />}
          {rujukan.hakKelas && <Field label="Hak Kelas" value={rujukan.hakKelas} />}
          <Field label="Waktu Rujukan" value={rujukan.waktuRujukan} mono />
        </div>
      </div>

      {/* ── Diagnosis ── */}
      <div className="card">
        <div className="card-h"><h3>Diagnosis & Indikasi</h3></div>
        <div className="card-b" style={{display:'flex', flexDirection:'column', gap:10}}>
          <div>
            <FieldLabel>Diagnosis (ICD-10)</FieldLabel>
            <div style={{
              padding:'8px 10px', background:'var(--surface-2)',
              border:'1px solid var(--border)', borderRadius:'var(--r)',
              fontSize:12.5, fontFamily:'var(--font-mono)',
            }}>
              {rujukan.diagnosis}
            </div>
          </div>
          <div>
            <FieldLabel>Indikasi Rawat Inap</FieldLabel>
            <div style={{
              padding:'8px 10px', background:'var(--surface-2)',
              border:'1px solid var(--border)', borderRadius:'var(--r)',
              fontSize:12.5, lineHeight:1.6,
            }}>
              {rujukan.indikasiSingkat}
            </div>
          </div>
          {rujukan.catatan && (
            <div>
              <FieldLabel>Catatan Dokter Perujuk</FieldLabel>
              <div style={{
                padding:'9px 12px',
                background:'rgba(234,179,8,0.07)', border:'1px solid var(--warn)',
                borderRadius:'var(--r)', fontSize:12, lineHeight:1.65, color:'var(--text-2)',
              }}>
                {rujukan.catatan}
              </div>
            </div>
          )}
        </div>
      </div>

      {/* ── Bed & DPJP assignment (hidden after check-in) ── */}
      {!checkedIn && (
        <div className="card">
          <div className="card-h"><h3>Penempatan & DPJP</h3></div>
          <div className="card-b" style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:12}}>
            <div>
              <FieldLabel>DPJP yang Ditunjuk</FieldLabel>
              <select value={dpjp} onChange={e => setDpjp(e.target.value)} style={{width:'100%', padding:'7px 10px', fontSize:12, background:'var(--surface-2)', border:'1px solid var(--border)', borderRadius:'var(--r)', color:'var(--text)', outline:'none'}}>
                <option>dr. Andi Wijaya, Sp.PD</option>
                <option>dr. Sari Dewi, Sp.OG</option>
                <option>dr. Wulan Pratiwi, Sp.JP</option>
                <option>dr. Fajar Nugroho, Sp.B</option>
              </select>
            </div>
            <div>
              <FieldLabel>Kelas Kamar</FieldLabel>
              <div className="seg">
                {['VIP','Kelas 1','Kelas 2','Kelas 3','ICCU','ICU'].map(k => (
                  <button key={k} className={kelas === k ? 'on' : ''} onClick={() => setKelas(k)}>{k}</button>
                ))}
              </div>
            </div>
            <div>
              <FieldLabel>Bangsal</FieldLabel>
              <select value={bangsal} onChange={e => setBangsal(e.target.value)} style={{width:'100%', padding:'7px 10px', fontSize:12, background:'var(--surface-2)', border:'1px solid var(--border)', borderRadius:'var(--r)', color:'var(--text)', outline:'none'}}>
                <option>Melati (4 kosong)</option>
                <option>Anggrek (5 kosong)</option>
                <option>Mawar (2 kosong)</option>
                <option>ICCU (1 kosong)</option>
              </select>
            </div>
            <div>
              <FieldLabel>Nomor Bed</FieldLabel>
              <select value={bed} onChange={e => setBed(e.target.value)} style={{width:'100%', padding:'7px 10px', fontSize:12, fontFamily:'var(--font-mono)', background:'var(--surface-2)', border:'1px solid var(--border)', borderRadius:'var(--r)', color:'var(--text)', outline:'none'}}>
                <option>308B</option><option>312A</option><option>312B</option>
              </select>
            </div>
            <div style={{gridColumn:'1 / -1', padding:'9px 12px', background:'var(--ok-soft)', border:'1px solid var(--ok)', borderRadius:'var(--r)', fontSize:11.5}}>
              <b style={{color:'var(--ok)'}}>Bed dipilih: {bangsal.split(' ')[0]} {bed}</b>
              <span style={{color:'var(--text-2)', marginLeft:8}}>Lantai 3 · {kelas} · Status: Kosong & siap</span>
            </div>
          </div>
        </div>
      )}

      {/* ── Actions ── */}
      {!checkedIn && (
        <div style={{display:'flex', gap:8}}>
          {rujukan.status === 'menunggu' && (
            <button className="btn btn-ghost" onClick={onConfirm} style={{flex:1}}>
              <Icon name="phone" size={13}/> Konfirmasi ke Pasien
            </button>
          )}
          <button className="btn btn-primary" onClick={onCheckin} style={{flex:2}}>
            <Icon name="check" size={14}/> Check-in Rawat Inap
          </button>
        </div>
      )}

      {checkedIn && (
        <div style={{padding:'12px 14px', background:'var(--ok-soft)', border:'1px solid var(--ok)', borderRadius:'var(--r)', fontSize:12.5, display:'flex', gap:10, alignItems:'center'}}>
          <Icon name="check" size={16}/>
          <div>
            <b style={{color:'var(--ok)'}}>Pasien sudah Check-in.</b>
            <span style={{color:'var(--text-2)', marginLeft:8}}>
              Terdaftar di bangsal Melati 308B · DPJP: dr. Fajar Nugroho, Sp.B
            </span>
          </div>
        </div>
      )}
    </div>
  );
};

// ── Main view ─────────────────────────────────────────────────────────────────

const RawatInapRujukan = ({ onNavigate }) => {
  const [list, setList]       = React.useState(RUJUKAN_LIST);
  const [selected, setSelected] = React.useState(RUJUKAN_LIST[0]);
  const [filter, setFilter]   = React.useState('semua');
  const [toast, setToast]     = React.useState(null);

  const showToast = (msg) => {
    setToast(msg);
    setTimeout(() => setToast(null), 3000);
  };

  const updateSelected = (patch) => {
    const updated = { ...selected, ...patch };
    setList(prev => prev.map(r => r.id === updated.id ? updated : r));
    setSelected(updated);
  };

  const handleConfirm = () => {
    updateSelected({ status: 'dikonfirmasi' });
    showToast('Pasien dikonfirmasi — status diperbarui.');
  };

  const handleCheckin = () => {
    updateSelected({ status: 'checked-in' });
    showToast('Check-in berhasil! Pasien terdaftar rawat inap.');
  };

  const FILTERS = [
    { k: 'semua',        label: 'Semua' },
    { k: 'menunggu',     label: 'Menunggu' },
    { k: 'dikonfirmasi', label: 'Dikonfirmasi' },
    { k: 'checked-in',   label: 'Check-in' },
  ];

  const counts = {
    menunggu:     list.filter(r => r.status === 'menunggu').length,
    dikonfirmasi: list.filter(r => r.status === 'dikonfirmasi').length,
    'checked-in': list.filter(r => r.status === 'checked-in').length,
  };

  const filtered = filter === 'semua' ? list : list.filter(r => r.status === filter);

  return (
    <>
      {/* Toast notification */}
      {toast && (
        <div style={{
          position: 'fixed', top: 20, right: 20, zIndex: 9999,
          padding: '10px 18px', background: 'var(--ok)', color: '#fff',
          borderRadius: 'var(--r-md)', fontSize: 12.5, fontWeight: 600,
          boxShadow: '0 4px 16px rgba(0,0,0,0.18)',
        }}>
          {toast}
        </div>
      )}

      {/* Page header */}
      <div className="page-header">
        <div>
          <h1 className="page-title">Antrean Rujukan Masuk</h1>
          <div className="page-sub">
            Pasien dirujuk dari Rawat Jalan atau IGD — review data, konfirmasi, lalu lakukan check-in
          </div>
        </div>
        <div className="page-actions">
          <button className="btn btn-ghost" onClick={() => onNavigate('bed-map')}>
            <Icon name="grid" size={13}/> Peta Bed
          </button>
          <button className="btn btn-ghost" onClick={() => onNavigate('admisi')}>
            <Icon name="plus" size={13}/> Admisi Manual
          </button>
        </div>
      </div>

      {/* Summary strip */}
      <div style={{display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:10, marginBottom:14}}>
        {[
          { label: 'Menunggu Review',        count: counts.menunggu,     cls: 'warn', icon: 'clock' },
          { label: 'Dikonfirmasi',           count: counts.dikonfirmasi, cls: 'info', icon: 'phone' },
          { label: 'Check-in hari ini',      count: counts['checked-in'], cls: 'ok',  icon: 'check' },
        ].map(({ label, count, cls, icon }) => (
          <div key={label} className="card" style={{padding:'14px 16px', display:'flex', gap:12, alignItems:'center'}}>
            <div style={{
              width: 36, height: 36, borderRadius: 'var(--r)', flexShrink: 0,
              background: cls === 'warn' ? 'rgba(234,179,8,0.12)'
                        : cls === 'info' ? 'rgba(59,130,246,0.12)'
                        : 'var(--ok-soft)',
              color: `var(--${cls})`,
              display: 'grid', placeItems: 'center',
            }}>
              <Icon name={icon} size={16}/>
            </div>
            <div>
              <div style={{fontSize:24, fontWeight:700, lineHeight:1}}>{count}</div>
              <div style={{fontSize:11, color:'var(--text-3)', marginTop:3}}>{label}</div>
            </div>
          </div>
        ))}
      </div>

      {/* Split layout: list + detail */}
      <div style={{display:'grid', gridTemplateColumns:'340px 1fr', gap:14, alignItems:'start'}}>

        {/* ── Left: list ── */}
        <div style={{display:'flex', flexDirection:'column', gap:8}}>

          {/* Filter tabs */}
          <div style={{display:'flex', gap:4, flexWrap:'wrap'}}>
            {FILTERS.map(({ k, label }) => (
              <button key={k} onClick={() => setFilter(k)} style={{
                padding: '5px 12px', borderRadius: 'var(--r)', fontSize: 11.5,
                fontWeight: 500, cursor: 'pointer',
                background: filter === k ? 'var(--accent)' : 'var(--surface-2)',
                color:      filter === k ? '#fff'          : 'var(--text-2)',
                border:    `1px solid ${filter === k ? 'var(--accent)' : 'var(--border)'}`,
              }}>
                {label}
                {k !== 'semua' && counts[k] > 0 && (
                  <span style={{
                    marginLeft: 6, fontSize: 10, borderRadius: 10,
                    padding: '1px 6px',
                    background: filter === k ? 'rgba(255,255,255,0.3)' : 'var(--surface-3)',
                  }}>
                    {counts[k]}
                  </span>
                )}
              </button>
            ))}
          </div>

          {/* List items */}
          {filtered.length === 0 && (
            <div className="card" style={{padding:32, textAlign:'center', color:'var(--text-3)', fontSize:12.5}}>
              <Icon name="folder" size={28}/>
              <div style={{marginTop:8}}>Tidak ada rujukan dengan status ini.</div>
            </div>
          )}

          {filtered.map(r => {
            const st    = STATUS_META[r.status];
            const pr    = PRIORITAS_META[r.prioritas];
            const asal  = ASAL_META[r.asal] || ASAL_META.rajal;
            const active = selected?.id === r.id;
            return (
              <button key={r.id} onClick={() => setSelected(r)} style={{
                display: 'flex', flexDirection: 'column', gap: 7,
                padding: '12px 14px', textAlign: 'left', cursor: 'pointer',
                background: active ? 'var(--accent-soft)' : 'var(--surface)',
                border: `1px solid ${active ? 'var(--accent)' : 'var(--border)'}`,
                borderRadius: 'var(--r-md)', width: '100%',
              }}>

                {/* Name + status */}
                <div style={{display:'flex', justifyContent:'space-between', alignItems:'flex-start'}}>
                  <div style={{display:'flex', gap:8, alignItems:'center'}}>
                    <div style={{color: asal.color, flexShrink:0}}>
                      <Icon name={asal.icon} size={13}/>
                    </div>
                    <div>
                      <div style={{fontWeight:600, fontSize:13, color: active ? 'var(--accent)' : 'var(--text)'}}>
                        {r.nama}
                      </div>
                      <div style={{fontSize:10.5, color:'var(--text-3)', fontFamily:'var(--font-mono)'}}>
                        {r.rm} · {r.usia} · {r.jk}
                      </div>
                    </div>
                  </div>
                  <div style={{display:'flex', flexDirection:'column', gap:4, alignItems:'flex-end', flexShrink:0}}>
                    <span className={`badge ${st.cls}`}>{st.label}</span>
                    {r.prioritas !== 'normal' && (
                      <span style={{fontSize:10, fontWeight:700, color: pr.color}}>● {pr.label}</span>
                    )}
                  </div>
                </div>

                {/* Source + type */}
                <div style={{fontSize:11.5, color:'var(--text-2)', display:'flex', gap:8, alignItems:'center'}}>
                  <AsalBadge asal={r.asal}/>
                  {r.asalLabel !== ASAL_META[r.asal]?.label && (
                    <span style={{color:'var(--text-3)'}}>· {r.asalLabel}</span>
                  )}
                  <span style={{color:'var(--border)'}}>·</span>
                  <span>{r.tipe}</span>
                </div>

                {/* Diagnosis */}
                <div style={{
                  fontSize: 11.5, color: 'var(--text-2)', fontFamily: 'var(--font-mono)',
                  background: 'var(--surface-2)', padding: '4px 8px',
                  borderRadius: 'var(--r)', overflow: 'hidden',
                  textOverflow: 'ellipsis', whiteSpace: 'nowrap',
                }}>
                  {r.diagnosis}
                </div>

                {/* Doctor + time */}
                <div style={{fontSize:10.5, color:'var(--text-3)', display:'flex', justifyContent:'space-between'}}>
                  <span>{r.dokterPerujuk}</span>
                  <span className="mono">{r.waktuRujukan}</span>
                </div>
              </button>
            );
          })}
        </div>

        {/* ── Right: detail panel ── */}
        <div>
          {selected ? (
            <div className="card">
              <div style={{padding:'16px'}}>
                <DetailPanel
                  key={selected.id}
                  rujukan={selected}
                  onClose={() => setSelected(null)}
                  onConfirm={handleConfirm}
                  onCheckin={handleCheckin}
                />
              </div>
            </div>
          ) : (
            <div className="card" style={{padding:72, textAlign:'center', color:'var(--text-3)'}}>
              <Icon name="search" size={32}/>
              <div style={{marginTop:12, fontSize:13}}>
                Pilih rujukan dari daftar untuk melihat detail & melakukan check-in.
              </div>
            </div>
          )}
        </div>
      </div>
    </>
  );
};