// Layout shell — Bali Drive Rentcar (BDR)
const { useState: useStateL, useMemo: useMemoL, useEffect: useEffectL, useRef: useRefL, Fragment } = React;

const NAV = [
  { group: 'Operasional', items: [
    { id: 'dashboard', label: 'Dashboard',     icon: 'home',       perm: null },
    { id: 'tracking',  label: 'Live Tracking', icon: 'navigation', perm: 'tracking' },
    { id: 'booking',   label: 'Booking',       icon: 'calendar',   perm: 'booking' },
    { id: 'serah',     label: 'Serah Terima',  icon: 'clipboard',  perm: 'booking' },
  ]},
  { group: 'Armada', items: [
    { id: 'armada',      label: 'Armada',      icon: 'car',     perm: 'armada' },
    { id: 'driver',      label: 'Driver',      icon: 'users',   perm: 'dispatch' },
    { id: 'maintenance', label: 'Maintenance', icon: 'wrench',  perm: 'maintenance' },
  ]},
  { group: 'Channel', items: [
    { id: 'driverApp',   label: 'Driver App',   icon: 'phone',    perm: null },
    { id: 'customerWeb', label: 'Customer Web', icon: 'globe',    perm: null },
  ]},
  { group: 'Manajemen', items: [
    { id: 'customer',  label: 'Pelanggan',  icon: 'id',         perm: 'customer' },
    { id: 'laporan',   label: 'Laporan',    icon: 'trending',   perm: 'report' },
  ]},
];

const PAGE_TITLES = {
  dashboard:   { t: 'Dashboard',          s: 'Ringkasan armada, booking, trip aktif & revenue hari ini' },
  tracking:    { t: 'Live GPS Tracking',  s: 'Peta real-time semua armada yang sedang on-trip / parked di Bali' },
  booking:     { t: 'Booking & Reservasi',s: 'Kalendar booking, status pembayaran, dan slot armada tersedia' },
  serah:       { t: 'Serah Terima (BAST)',s: 'Checklist serah terima kendaraan, foto kondisi, dan damage canvas' },
  armada:      { t: 'Armada / Fleet',     s: '60 mobil di 3 cabang — status, odometer, jadwal servis' },
  driver:      { t: 'Driver',             s: 'Daftar driver in-house, jadwal, dan trip yang sedang berlangsung' },
  maintenance: { t: 'Maintenance / Workshop', s: 'Work Order servis berkala, perbaikan, dan detailing' },
  driverApp:   { t: 'Driver App — Mobile',s: 'Preview aplikasi mobile untuk driver (BAST, tracking, navigasi)' },
  customerWeb: { t: 'Customer Web',       s: 'Preview website pemesanan untuk customer self-service' },
  customer:    { t: 'Pelanggan',          s: 'Database customer, riwayat sewa, dokumen (KTP/SIM/Passport)' },
  laporan:     { t: 'Laporan',            s: 'Revenue per cabang, utilisasi armada, top performer, 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') 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={statusTone(status)} dot>{statusLabel(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>;
}

function ElapsedPill({ since, urgentAfter = 10 }) {
  const mins = minutesSince(since);
  const urgent = mins >= urgentAfter;
  return (
    <span className="mono" style={{
      fontSize: 11.5, fontWeight: 600,
      color: urgent ? 'hsl(0 70% 42%)' : 'hsl(var(--muted-foreground))',
      fontVariantNumeric: 'tabular-nums',
    }}>
      {fmtMin(mins)}
    </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">Fleet · GPS · 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 === 'tracking')    return TRIPS.filter(t => t.status === 'in-trip').length;
  if (id === 'booking')     return BOOKINGS.filter(b => b.status === 'confirmed' || b.status === 'pending').length;
  if (id === 'maintenance') return MAINTENANCE.filter(m => m.status !== 'done').length;
  if (id === 'armada')      return ARMADA.filter(a => a.status === 'available').length + '/' + ARMADA.length;
  if (id === 'serah')       return BOOKINGS.filter(b => b.status === 'confirmed' && b.mulai.startsWith(TODAY)).length || null;
  return null;
}

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

function Topbar({ page, setPage }) {
  const alertCount = ALERTS.filter(a => a.sev === 'danger' || a.sev === '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 Armada + Booking) ─────────────────────────────

function VehicleCard({ veh, onClick, selected, compact }) {
  const iconName = veh.tipe === 'van' ? 'truck' : veh.tipe === 'premium' ? 'carFront' : 'car';
  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">{tipeArmadaLabel(veh.tipe)}</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>{statusLabel(veh.trans)}</span><span className="dot" />
              <span>{veh.seat} kursi</span><span className="dot" />
              <span>{statusLabel(veh.bbm)}</span><span className="dot" />
              <span>{veh.thn}</span>
            </div>
          </div>
          <StatusPill status={veh.status} />
        </div>
        {!compact && (
          <div className="veh-row-bottom mt-2">
            <div className="mono" style={{fontSize:11, color:'hsl(var(--muted-foreground))'}}>
              {veh.odo.toLocaleString('id-ID')} km · {cabangName(veh.cabang)}
            </div>
            <div className="veh-price">
              {rupiah(veh.tarif, {sym:true})}<span style={{fontSize:11, color:'hsl(var(--muted-foreground))', fontWeight:400}}> /hari</span>
            </div>
          </div>
        )}
      </div>
    </button>
  );
}

// ── Fuel gauge (mini) ──────────────────────────────────────────────────────

function FuelGauge({ pct, showLabel = true }) {
  const cls = pct < 30 ? 'fuel-low' : pct < 50 ? 'fuel-med' : 'fuel-ok';
  return (
    <div className="row gap-2" style={{alignItems:'center'}}>
      <div className="gauge" style={{flex:1, minWidth:60}}>
        <div className={'fill ' + cls} style={{width: pct + '%'}} />
      </div>
      {showLabel && (
        <span className="mono" style={{fontSize:11, fontWeight:600, fontVariantNumeric:'tabular-nums', minWidth:32, textAlign:'right'}}>{pct}%</span>
      )}
    </div>
  );
}

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