// Layout shell for Klinik Mitra Sehat
const { useState, useMemo, useEffect, useRef, Fragment } = React;

const NAV = [
  { group: 'Operasional', items: [
    { id: 'dashboard',  label: 'Dashboard',         icon: 'home' },
    { id: 'antrian',    label: 'Antrian Pasien',    icon: 'users' },
    { id: 'apotek',     label: 'Apotek & Resep',    icon: 'package' },
  ]},
  { group: 'Master Data', items: [
    { id: 'pasien',     label: 'Pasien',            icon: 'user' },
    { id: 'rekam',      label: 'Rekam Medis',       icon: 'clipboard' },
    { id: 'jadwal',     label: 'Jadwal Dokter',     icon: 'calendar' },
  ]},
  { group: 'Analitik', items: [
    { id: 'laporan',    label: 'Laporan',           icon: 'trending' },
  ]},
];

const PAGE_TITLES = {
  dashboard: { t: 'Dashboard',         s: 'Ringkasan operasional klinik hari ini' },
  antrian:   { t: 'Antrian Pasien',    s: 'Live queue display, panggilan pasien per dokter' },
  apotek:    { t: 'Apotek & Resep',    s: 'Resep masuk, dispensing obat, dan stok apotek' },
  pasien:    { t: 'Pasien',            s: 'Database pasien terdaftar, riwayat kunjungan' },
  rekam:     { t: 'Rekam Medis',       s: 'Riwayat medis pasien, anamnesa, terapi' },
  jadwal:    { t: 'Jadwal Dokter',     s: 'Jadwal praktik mingguan & kapasitas slot' },
  laporan:   { t: 'Laporan',           s: 'Statistik kunjungan, top diagnosis, revenue' },
};

// ── Primitives ──────────────────────────────────────────────────────────────

function Card({ className = '', children, style }) {
  return <div className={'card ' + className} style={style}>{children}</div>;
}

function Btn({ tone = 'outline', size = 'sm', icon, children, onClick, disabled, title, type = 'button' }) {
  const cls = ['btn'];
  if (tone === 'primary') {/* default */}
  else if (tone === 'secondary') cls.push('secondary');
  else if (tone === 'ghost') cls.push('ghost');
  else if (tone === 'destructive') cls.push('destructive');
  else cls.push('outline');
  if (size === 'sm') cls.push('sm');
  if (size === 'lg') cls.push('lg');
  return (
    <button type={type} onClick={onClick} disabled={disabled} title={title} className={cls.join(' ')}>
      {icon && <Icon name={icon} size={13} />}
      {children}
    </button>
  );
}

function Pill({ tone = 'neutral', children, dot }) {
  const cls = ['badge'];
  if (tone === 'success' || tone === 'ok') cls.push('success');
  else if (tone === 'warn' || tone === 'warning') cls.push('warning');
  else if (tone === 'danger' || tone === 'destructive') cls.push('destructive');
  else if (tone === 'accent') cls.push('accent');
  else cls.push('neutral');
  if (dot) cls.push('dot');
  return <span className={cls.join(' ')}>{children}</span>;
}

// Pastel pill — clinical statuses (signature)
function PastelPill({ color = 'teal', children }) {
  return <span className={'pill-pastel ' + color}>{children}</span>;
}

function StatusPill({ status }) {
  const tone = statusTone(status);
  const colorMap = {
    'done': 'green', 'in-room': 'amber', 'waiting': 'teal',
    'pending': 'amber', 'dispensed': 'green', 'cancelled': 'gray',
  };
  if (colorMap[status]) return <PastelPill color={colorMap[status]}>{statusLabel(status)}</PastelPill>;
  return <Pill tone={tone}>{statusLabel(status)}</Pill>;
}

function SectionHead({ title, hint, action }) {
  return (
    <div className="row between" style={{marginBottom:12}}>
      <div>
        <h3 style={{fontSize:14, fontWeight:600, margin:0, letterSpacing:'-0.005em'}}>{title}</h3>
        {hint && <div style={{fontSize:11.5, color:'hsl(var(--muted-foreground))', marginTop:2}}>{hint}</div>}
      </div>
      {action}
    </div>
  );
}

function Avatar({ initials, className = '' }) {
  return <div className={'avatar ' + className}>{initials}</div>;
}

// Patient avatar — large, teal, used on rekam-medis header
function PatientAvatar({ name }) {
  const init = name.split(' ').filter(w => w.length > 2).slice(0, 2).map(w => w[0]).join('').toUpperCase();
  return <div className="patient-avatar">{init || name.slice(0, 2).toUpperCase()}</div>;
}

// ── Sidebar ────────────────────────────────────────────────────────────────

function Sidebar({ active, setActive, role }) {
  const r = ROLES[role];
  const initials = r.name.split(' ').filter(w => w.length > 2).slice(0, 2).map(w => w[0]).join('').toUpperCase();
  return (
    <aside className="sidebar">
      <div className="sidebar-brand">
        <div className="sidebar-brand-mark" style={{background:'hsl(178 55% 38%)'}}>
          <Icon name="bell" size={18} style={{color:'white'}}/>
        </div>
        <div className="sidebar-brand-text">
          <div className="sidebar-brand-name">Mitra Sehat</div>
          <div className="sidebar-brand-sub">Klinik Praktik</div>
        </div>
      </div>

      <div style={{flex:1, overflowY:'auto'}}>
        {NAV.map(group => (
          <div key={group.group}>
            <div className="sidebar-section">{group.group}</div>
            {group.items.map(item => (
              <button
                key={item.id}
                onClick={() => setActive(item.id)}
                className={'nav-item' + (active === item.id ? ' active' : '')}
              >
                <Icon name={item.icon} size={15} className="icon" />
                <span>{item.label}</span>
                {item.id === 'antrian' && KPI.pasienWaiting > 0 && (
                  <span style={{marginLeft:'auto', fontSize:11, fontWeight:600, color:'hsl(var(--accent-h) var(--accent-s) 28%)', background:'hsl(178 50% 92%)', padding:'2px 8px', borderRadius:999}}>
                    {KPI.pasienWaiting}
                  </span>
                )}
              </button>
            ))}
          </div>
        ))}
      </div>

      <div style={{padding:'10px 4px 4px', borderTop:'1px solid hsl(var(--border))', marginTop:8}}>
        <div className="row" style={{padding:'4px 6px'}}>
          <Avatar initials={initials} className="sm" />
          <div style={{minWidth:0, flex:1}}>
            <div className="sidebar-user-name">{r.name}</div>
            <div className="sidebar-user-role">{r.role}</div>
          </div>
        </div>
      </div>
    </aside>
  );
}

// ── Topbar ────────────────────────────────────────────────────────────────

function Topbar({ page, dokter, setDokter, setPage }) {
  const cur = PAGE_TITLES[page] || { t: page, s: '' };
  return (
    <header className="topbar">
      <div style={{flex:1, minWidth:0}}>
        <div className="topbar-title">{cur.t}</div>
        <div className="topbar-crumb">{cur.s}</div>
      </div>
      <div className="row gap-2 text-sm muted">
        <Icon name="clock" size={13}/>
        <span className="mono" style={{fontWeight:500, color:'hsl(var(--foreground))'}}>{NOW_HHMM}</span>
        <span>·</span>
        <span>{SHIFT}</span>
      </div>
      <DokterFilter value={dokter} onChange={setDokter} />
      <button className="btn outline sm" title="Notifikasi" style={{position:'relative'}}>
        <Icon name="bell" size={13} />
        <span style={{position:'absolute', top:5, right:5, width:6, height:6, borderRadius:999, background:'hsl(var(--destructive))'}} />
      </button>
    </header>
  );
}

function DokterFilter({ value, onChange }) {
  return (
    <select className="select" value={value} onChange={e => onChange(e.target.value)} style={{width:'auto', minWidth:180, height:32}}>
      <option value="all">Semua Dokter</option>
      {DOKTER.map(d => <option key={d.id} value={d.id}>{d.name} · {d.spesialis}</option>)}
    </select>
  );
}

// ── Page header ────────────────────────────────────────────────────────────

function PageHeader({ eyebrow, title, subtitle, actions }) {
  return (
    <div className="card" style={{padding:'18px 22px', marginBottom:18, display:'flex', alignItems:'flex-start', gap:18}}>
      <div style={{flex:1, minWidth:0}}>
        {eyebrow && <div style={{fontSize:11, textTransform:'uppercase', letterSpacing:'0.08em', color:'hsl(var(--muted-foreground))', fontWeight:600, marginBottom:6}}>{eyebrow}</div>}
        <h1 style={{fontSize:22, fontWeight:600, letterSpacing:'-0.02em', margin:0, lineHeight:1.2}}>{title}</h1>
        {subtitle && <p style={{fontSize:13.5, color:'hsl(var(--muted-foreground))', marginTop:6, marginBottom:0, maxWidth:780, lineHeight:1.55}}>{subtitle}</p>}
      </div>
      {actions && <div className="row gap-2">{actions}</div>}
    </div>
  );
}

// ── KPI tile ───────────────────────────────────────────────────────────────

function Kpi({ label, value, hint, icon, tone, progress, sub }) {
  return (
    <div className="card kpi" style={{padding:16}}>
      <div className="row between" style={{marginBottom:8}}>
        <div style={{fontSize:11, color:'hsl(var(--muted-foreground))', textTransform:'uppercase', letterSpacing:'0.06em', fontWeight:600}}>{label}</div>
        {icon && <div className="kpi-icon" data-tone={tone}><Icon name={icon} size={14} /></div>}
      </div>
      <div style={{fontSize:24, fontWeight:600, letterSpacing:'-0.025em', fontVariantNumeric:'tabular-nums', lineHeight:1.1}}>{value}</div>
      {sub && <div style={{fontSize:12, color:'hsl(var(--muted-foreground))', marginTop:6}}>{sub}</div>}
      {hint && <div style={{fontSize:11.5, color:'hsl(var(--muted-foreground))', marginTop:4}}>{hint}</div>}
      {progress != null && (
        <div className="kpi-progress"><div style={{width: Math.min(100, progress) + '%'}} /></div>
      )}
    </div>
  );
}

// ── Antrian queue tile (signature) ─────────────────────────────────────────

function QueueTile({ kind, queueNo, pasienName, dokter, room, meta }) {
  return (
    <div className={'queue-tile ' + kind}>
      <div className="queue-tile-label">{kind === 'now' ? 'Sedang Dipanggil' : 'Berikutnya'}</div>
      <div className="queue-tile-number">{queueNo || '—'}</div>
      <div className="queue-tile-meta">
        {pasienName ? (<><b>{pasienName}</b> · {dokter} · {room}</>) : 'Tidak ada antrian'}
      </div>
      {meta && <div className="queue-tile-meta" style={{opacity:0.7}}>{meta}</div>}
    </div>
  );
}

Object.assign(window, {
  NAV, PAGE_TITLES,
  Card, Btn, Pill, PastelPill, StatusPill, SectionHead, Avatar, PatientAvatar,
  Sidebar, Topbar, DokterFilter,
  PageHeader, Kpi, QueueTile,
});