// Layout shell for Warung Kopi Senja F&B POS
const { useState: useStateL, useMemo: useMemoL, useEffect: useEffectL, useRef: useRefL, Fragment } = React;

const NAV = [
  { group: 'Operasional', items: [
    { id: 'dashboard',  label: 'Dashboard',     icon: 'home' },
    { id: 'order',      label: 'Order / Kasir', icon: 'receipt' },
    { id: 'meja',       label: 'Meja',          icon: 'map' },
  ]},
  { group: 'Dapur & Bar', items: [
    { id: 'kdsBar',     label: 'KDS Bar',       icon: 'coffee' },
    { id: 'kdsDapur',   label: 'KDS Dapur',     icon: 'chefHat' },
  ]},
  { group: 'Manajemen', items: [
    { id: 'menu',       label: 'Menu',          icon: 'utensils' },
    { id: 'reservasi',  label: 'Reservasi',     icon: 'bellHotel' },
    { id: 'laporan',    label: 'Laporan',       icon: 'trending' },
  ]},
];

const PAGE_TITLES = {
  dashboard: { t: 'Dashboard',     s: 'Ringkasan operasional outlet, KDS aktif, dan top items hari ini' },
  order:     { t: 'Order / Kasir', s: 'Buka order baru, tambah item, kirim ke dapur/bar, proses pembayaran' },
  meja:      { t: 'Floor Plan',    s: 'Status meja real-time: kosong, terisi, reserved, cleaning' },
  kdsBar:    { t: 'KDS — Bar',     s: 'Antrian minuman & manual brew untuk barista' },
  kdsDapur:  { t: 'KDS — Dapur',   s: 'Antrian makanan & snack untuk cook' },
  menu:      { t: 'Menu',          s: 'Katalog item: harga, HPP, kategori, station routing, status aktif' },
  reservasi: { t: 'Reservasi',     s: 'Booking meja hari ini, deposit, dan walk-in queue' },
  laporan:   { t: 'Laporan',       s: 'Penjualan harian, jam ramai, top item, dan margin per kategori' },
};

// ── 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>
  );
}

// Simple hash
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} 45% 42%)`;
  return <div className={'avatar ' + className} style={{background: bg}}>{initials}</div>;
}

// Mini "elapsed time" pill, urgent-aware
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 }) {
  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">Coffee Shop · POS</div>
        </div>
      </div>

      <div style={{flex:1, overflowY:'auto', display:'flex', flexDirection:'column', gap:2}}>
        {NAV.map(group => (
          <div key={group.group}>
            <div className="sidebar-section">{group.group}</div>
            {group.items.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 (live-feel)
function navTail(id) {
  if (id === 'order')     return ORDERS.filter(o => o.status !== 'served' && o.status !== 'paid').length;
  if (id === 'kdsBar')    return ORDERS.flatMap(o => o.items).filter(it => it.station === 'bar' && (it.status === 'queued' || it.status === 'in-progress')).length;
  if (id === 'kdsDapur')  return ORDERS.flatMap(o => o.items).filter(it => it.station === 'kitchen' && (it.status === 'queued' || it.status === 'in-progress')).length;
  if (id === 'reservasi') return RESERVATIONS.length;
  if (id === 'meja')      return TABLES.filter(t => t.status === 'occupied').length + '/' + TABLES.length;
  return null;
}

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

function Topbar({ page, setPage }) {
  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 {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="Notifikasi" style={{position:'relative'}}>
        <Icon name="bell" size={14} />
        <span style={{position:'absolute', top:5, right:5, width:7, height:7, borderRadius:999, background:'hsl(var(--destructive))'}} />
      </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>
  );
}

// ── Floor table tile (re-used by Meja + Order pages) ────────────────────────

function FloorTable({ table, onClick, selected }) {
  const order = ORDERS.find(o => o.id === table.orderId);
  return (
    <button
      onClick={() => onClick && onClick(table)}
      className={'floor-table ' + table.status}
      style={selected ? { boxShadow: '0 0 0 3px hsl(var(--accent-h) var(--accent-s) var(--accent-l) / 0.32), var(--shadow)' } : null}
    >
      {table.status === 'occupied' && <span className="floor-table-elapsed">{fmtMin(minutesSince(table.occupiedSince))}</span>}
      <div className="floor-table-label">{table.label}</div>
      <div className="floor-table-seats">
        {table.status === 'occupied' && table.guests ? `${table.guests}/${table.seats} seats` : `${table.seats} seats`}
      </div>
      {order && <div className="muted" style={{fontSize:11, marginTop:6, fontVariantNumeric:'tabular-nums'}}>{rupiah(orderTotal(order), {sym:true})}</div>}
      {table.status === 'reserved' && (
        <div className="muted" style={{fontSize:11, marginTop:6}}>{table.reservedAt} · {table.reservedBy}</div>
      )}
      <div className="floor-table-status">{statusLabel(table.status)}</div>
    </button>
  );
}

// ── Order ticket (compact, reusable) ───────────────────────────────────────

function OrderTicket({ order, onClick }) {
  const total = orderTotal(order);
  const itemCount = order.items.reduce((s, it) => s + it.qty, 0);
  const elapsed = minutesSince(order.opened);
  return (
    <div className="order-ticket" onClick={onClick}>
      <div className="order-ticket-table">{order.table}</div>
      <div style={{minWidth:0}}>
        <div className="row gap-2" style={{alignItems:'center'}}>
          <span className="order-ticket-id">{order.id}</span>
          <StatusPill status={order.status} />
        </div>
        <div className="order-ticket-summary">
          {itemCount} item · {order.guests} tamu
        </div>
        <div className="order-ticket-meta">
          Dibuka {order.opened} · {fmtMin(elapsed)} · {order.kasir}
        </div>
      </div>
      <div className="order-ticket-amount">{rupiah(total, {sym:true})}</div>
    </div>
  );
}

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