// Layout shell — Bengkel Mitra Sejahtera (BMS)
const { useState: useStateL, useMemo: useMemoL, useEffect: useEffectL, useRef: useRefL, Fragment } = React;

const NAV = [
  { group: 'Operasional', items: [
    { id: 'dashboard', label: 'Dashboard',     icon: 'home',     perm: 'view_dashboard' },
    { id: 'reminder',  label: 'Reminder',      icon: 'bellRing', perm: 'view_dashboard' },
    { id: 'booking',   label: 'Booking',       icon: 'calendar', perm: 'view_dashboard' },
    { id: 'workorder', label: 'Work Order',    icon: 'wrench',   perm: 'view_dashboard' },
  ]},
  { group: 'Kendaraan', items: [
    { id: 'kendaraan', label: 'Kendaraan',     icon: 'car',      perm: 'view_dashboard' },
    { id: 'health',    label: 'Health Dashboard', icon: 'heart', perm: 'view_dashboard' },
    { id: 'riwayat',   label: 'Riwayat Servis', icon: 'history', perm: 'view_dashboard' },
  ]},
  { group: 'Inventory', items: [
    { id: 'sparepart', label: 'Sparepart',     icon: 'package',  perm: 'view_sparepart' },
  ]},
  { group: 'Pelanggan', items: [
    { id: 'pelanggan', label: 'Pelanggan',     icon: 'users',    perm: 'view_customer' },
  ]},
  { group: 'Channel', items: [
    { id: 'customerApp', label: 'Customer App', icon: 'phone',   perm: null },
    { id: 'bengkelWeb',  label: 'Bengkel Web',  icon: 'globe',   perm: null },
  ]},
  { group: 'Manajemen', items: [
    { id: 'laporan',   label: 'Laporan',       icon: 'trending', perm: 'view_report' },
  ]},
];

const PAGE_TITLES = {
  dashboard:   { t: 'Dashboard',             s: 'Ringkasan reminder, booking, work order, dan revenue hari ini' },
  reminder:    { t: 'Reminder Servis & Dokumen', s: 'Daftar kendaraan customer yang perlu servis berkala atau dokumen mendekati expired' },
  booking:     { t: 'Booking Servis',         s: 'Kalendar slot mekanik, status booking, dan permintaan dari customer' },
  workorder:   { t: 'Work Order',             s: 'Job aktif di bay — progress, foto before/after, dan QC' },
  kendaraan:   { t: 'Kendaraan Customer',     s: '180 kendaraan terdaftar — STNK, asuransi, KIR, dan riwayat servis' },
  health:      { t: 'Vehicle Health Dashboard', s: 'Anatomi kendaraan interaktif — health score per komponen secara visual' },
  riwayat:     { t: 'Riwayat Servis',          s: 'Catatan servis lengkap per kendaraan dengan timeline dan foto' },
  sparepart:   { t: 'Inventory Sparepart',     s: 'Stok sparepart all-brand, rekomendasi merk, dan tren penjualan' },
  pelanggan:   { t: 'Pelanggan',               s: 'Database customer, family sharing, dan riwayat transaksi' },
  customerApp: { t: 'Customer App — Mobile',   s: 'Preview aplikasi untuk customer (booking, reminder, riwayat, foto servis)' },
  bengkelWeb:  { t: 'Bengkel Web',             s: 'Preview website publik bengkel — profil, layanan, dan booking online' },
  laporan:     { t: 'Laporan',                  s: 'Revenue per cabang, item terlaris, performa mekanik, dan P&L bulanan' },
};

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

function Card({ className = '', children, style, hoverLift }) {
  const cls = ['card'];
  if (className) cls.push(className);
  if (hoverLift) cls.push('hover-lift');
  return <div className={cls.join(' ')} style={style}>{children}</div>;
}

function Btn({ tone = 'outline', size = '', icon, children, onClick, disabled, title, type = 'button', className = '' }) {
  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');
  if (className) cls.push(className);
  return (
    <button type={type} onClick={onClick} disabled={disabled} title={title} className={cls.join(' ')}>
      {icon && <Icon name={icon} size={14} />}
      {children}
    </button>
  );
}

function Pill({ tone = 'neutral', children, dot }) {
  const cls = ['badge'];
  if (tone === 'success' || tone === 'ok' || tone === 'good') 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>;
}

function StatusPill({ status }) {
  return <Pill tone={bookingStatusTone(status)} dot>{bookingStatusLabel(status)}</Pill>;
}

function SectionHead({ title, hint, action }) {
  return (
    <div className="row between mb-4" style={{alignItems:'flex-end'}}>
      <div>
        <div style={{fontSize:14, fontWeight:600, fontFamily:'Fraunces, Georgia, serif', letterSpacing:'-0.01em'}}>{title}</div>
        {hint && <div style={{fontSize:12, color:'hsl(var(--muted-foreground))', marginTop:2}}>{hint}</div>}
      </div>
      {action}
    </div>
  );
}

function hashStr(s) {
  let h = 0;
  for (let i = 0; i < s.length; i++) h = ((h << 5) - h + s.charCodeAt(i)) | 0;
  return Math.abs(h);
}

function Avatar({ initials, className = '', tone }) {
  const h = (hashStr(initials || 'X') % 360);
  const bg = tone === 'accent'
    ? 'hsl(var(--accent-h) var(--accent-s) var(--accent-l))'
    : `hsl(${h} 38% 44%)`;
  return <div className={'avatar ' + className} style={{background: bg}}>{initials}</div>;
}

// Health badge (good/warn/danger + dot)
function HealthBadge({ tone, children }) {
  const cls = 'health-badge ' + (tone || 'good');
  return <span className={cls}><span className="dot" />{children}</span>;
}

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

function Sidebar({ active, setActive, role }) {
  const can = ROLES[role]?.can || {};
  return (
    <aside className="sidebar">
      <div className="sidebar-brand">
        <div className="sidebar-brand-mark">{TENANT.short}</div>
        <div className="sidebar-brand-text">
          <div className="sidebar-brand-name">{TENANT.name}</div>
          <div className="sidebar-brand-sub">Reminder · Health · Booking</div>
        </div>
      </div>

      <div style={{flex:1, overflowY:'auto', display:'flex', flexDirection:'column', gap:2}}>
        {NAV.map(group => {
          const visibleItems = group.items.filter(it => !it.perm || can[it.perm]);
          if (visibleItems.length === 0) return null;
          return (
            <div key={group.group}>
              <div className="sidebar-section">{group.group}</div>
              {visibleItems.map(item => {
                const tail = navTail(item.id);
                return (
                  <button
                    key={item.id}
                    onClick={() => setActive(item.id)}
                    className={'nav-item' + (active === item.id ? ' active' : '')}
                  >
                    <Icon name={item.icon} size={17} className="icon" />
                    <span style={{flex:1}}>{item.label}</span>
                    {tail != null && <span className="nav-item-tail">{tail}</span>}
                  </button>
                );
              })}
            </div>
          );
        })}
      </div>

      <div className="sidebar-user">
        <Avatar initials={ROLES[role].initials} tone="accent" />
        <div className="sidebar-user-text">
          <div className="sidebar-user-name">{ROLES[role].name}</div>
          <div className="sidebar-user-role">{ROLES[role].title}</div>
        </div>
      </div>
    </aside>
  );
}

// Tail counts for nav
function navTail(id) {
  if (id === 'reminder')  return KPI.reminderUrgent;
  if (id === 'booking')   return BOOKING_SERVIS.filter(b => b.status === 'confirmed' || b.status === 'pending').length;
  if (id === 'workorder') return WORK_ORDER.filter(w => w.status === 'in_progress' || w.status === 'qc').length;
  if (id === 'kendaraan') return KENDARAAN.length;
  if (id === 'sparepart') return SPAREPART.filter(s => stockLevel(s) !== 'ok').length || null;
  return null;
}

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

function Topbar({ page, setPage }) {
  const alertCount = ALERTS.filter(a => a.level === 'danger' || a.level === 'warn').length;
  return (
    <header className="topbar">
      <div style={{flex:1, minWidth:0}}>
        <div className="topbar-title">{(PAGE_TITLES[page] || {t:page}).t}</div>
        <div className="topbar-crumb">{(PAGE_TITLES[page] || {s:''}).s}</div>
      </div>
      <div className="row gap-2">
        <span className="badge accent dot">{SHIFT}</span>
        <span className="mono" style={{fontSize:13, color:'hsl(var(--muted-foreground))', fontVariantNumeric:'tabular-nums'}}>
          {NOW_HHMM} · {formatDateID(TODAY)}
        </span>
      </div>
      <button className="btn outline sm" title="Alert operasional" style={{position:'relative'}}>
        <Icon name="bell" size={14} />
        {alertCount > 0 && (
          <span style={{position:'absolute', top:-4, right:-4, minWidth:16, height:16, padding:'0 4px', borderRadius:999, background:'hsl(var(--destructive))', color:'#fff', fontSize:10, fontWeight:700, display:'flex', alignItems:'center', justifyContent:'center'}}>{alertCount}</span>
        )}
      </button>
    </header>
  );
}

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

function PageHeader({ eyebrow, title, subtitle, actions }) {
  return (
    <div className="row between mb-6" style={{alignItems:'flex-end'}}>
      <div>
        {eyebrow && (
          <div style={{fontSize:11, textTransform:'uppercase', letterSpacing:'0.08em', color:'hsl(var(--muted-foreground))', fontWeight:600, marginBottom:6}}>{eyebrow}</div>
        )}
        <h1 style={{margin:0, fontSize:28, fontWeight:600, fontFamily:'Fraunces, Georgia, serif', letterSpacing:'-0.02em'}}>{title}</h1>
        {subtitle && <div className="lede" style={{margin:'6px 0 0', maxWidth:680}}>{subtitle}</div>}
      </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 stat" style={{padding:'18px 20px'}}>
      <div className="row between" style={{marginBottom:8, alignItems:'flex-start'}}>
        <div className="stat-label">{label}</div>
        {icon && <div className="kpi-icon" data-tone={tone}><Icon name={icon} size={16} /></div>}
      </div>
      <div className="stat-value">{value}</div>
      {hint && <div className="stat-sub">{hint}</div>}
      {sub && <div className="stat-delta">{sub}</div>}
      {progress != null && (
        <div className="kpi-progress"><div style={{width: Math.min(100, progress) + '%'}} /></div>
      )}
    </div>
  );
}

// ── Doc header ─────────────────────────────────────────────────────────────

function DocHeader({ id, status, meta }) {
  return (
    <div className="doc-header">
      <div>
        <div className="doc-id">{id}</div>
        {meta && <div style={{fontSize:11.5, color:'hsl(var(--muted-foreground))', marginTop:3}}>{meta}</div>}
      </div>
      {status && <StatusPill status={status} />}
    </div>
  );
}

// ── Vehicle card (re-used in Kendaraan + Booking) ──────────────────────────

function VehicleCard({ veh, onClick, selected, compact }) {
  const iconName = veh.tipe === 'motor' ? 'motorbike' : veh.tipe === 'komersial' ? 'truck' : 'car';
  const owner = OWNER_BY_ID[veh.ownerId];
  const score = healthScore(veh);
  return (
    <button
      onClick={() => onClick && onClick(veh)}
      className={'veh-card' + (selected ? ' selected' : '')}
    >
      <div className={'veh-thumb ' + veh.tipe}>
        <span className="veh-plate">{veh.plat}</span>
        <span className="veh-cat-tag">{veh.trans}</span>
        <Icon name={iconName} size={48} />
      </div>
      <div>
        <div className="row between" style={{alignItems:'flex-start', gap:8}}>
          <div style={{minWidth:0, flex:1}}>
            <div className="veh-name">{veh.merk} {veh.model}</div>
            <div className="veh-meta">
              <span>{veh.tahun}</span><span className="dot" />
              <span>{veh.warna}</span><span className="dot" />
              <span>{veh.km.toLocaleString('id-ID')} km</span>
            </div>
          </div>
          {score != null && <HealthBadge tone={scoreTone(score)}>{score}</HealthBadge>}
        </div>
        {!compact && (
          <div className="veh-row-bottom mt-2">
            <div className="mono" style={{fontSize:11, color:'hsl(var(--muted-foreground))'}}>
              {owner?.name || '—'} · {cabangName(veh.cabang)}
            </div>
            <div className="veh-price" style={{fontSize:12, color:'hsl(var(--muted-foreground))'}}>
              Servis: {formatDateID(veh.lastService)}
            </div>
          </div>
        )}
      </div>
    </button>
  );
}

// ── Mini gauge ─────────────────────────────────────────────────────────────

function MiniGauge({ label, icon, ratio, sub }) {
  const pct = Math.min(100, Math.max(0, Math.round((ratio || 0) * 100)));
  const tone = componentTone(ratio);
  return (
    <div className="mini-gauge">
      <div className="mini-gauge-label">
        {icon && <Icon name={icon} size={12} />}
        {label}
      </div>
      <div className="mini-gauge-val">{pct}%</div>
      <div className="mini-gauge-bar"><div className={'fill ' + tone} style={{width: pct + '%'}} /></div>
      {sub && <div className="mini-gauge-sub">{sub}</div>}
    </div>
  );
}

Object.assign(window, {
  NAV, PAGE_TITLES,
  Card, Btn, Pill, StatusPill, SectionHead, Avatar, HealthBadge,
  Sidebar, Topbar, PageHeader, Kpi, DocHeader,
  VehicleCard, MiniGauge, hashStr,
});