// Layout shell for Toko Sumber Rejeki POS
const { useState, useMemo, useEffect, useRef, Fragment } = React;

const NAV = [
  { group: 'Operasional Toko', items: [
    { id: 'kasir',     label: 'Kasir',         icon: 'cart' },
    { id: 'shift',     label: 'Shift & Kas',   icon: 'cashbox' },
  ]},
  { group: 'Manajemen', items: [
    { id: 'dashboard', label: 'Dashboard',     icon: 'home' },
    { id: 'transaksi', label: 'Transaksi',     icon: 'receipt' },
    { id: 'produk',    label: 'Produk & Stok', icon: 'package' },
    { id: 'promo',     label: 'Promo & Member',icon: 'tag' },
  ]},
  { group: 'Analitik', items: [
    { id: 'laporan',   label: 'Laporan',       icon: 'trending' },
  ]},
];

const PAGE_TITLES = {
  kasir:     { t: 'Kasir',                       s: 'Terminal penjualan — pindai barcode atau cari produk' },
  shift:     { t: 'Shift & Kas',                 s: 'Buka/tutup shift kasir, modal awal & rekonsiliasi kas' },
  dashboard: { t: 'Dashboard',                   s: 'Ringkasan penjualan, top SKU, kasir, dan jam ramai' },
  transaksi: { t: 'Riwayat Transaksi',           s: 'Daftar struk per kasir, metode bayar, dan refund' },
  produk:    { t: 'Produk & Stok',               s: 'Master SKU, harga, dan stok per cabang' },
  promo:     { t: 'Promo & Member',              s: 'Diskon, bundling, voucher, dan tier keanggotaan' },
  laporan:   { t: 'Laporan Penjualan',           s: 'Penjualan harian, margin per kategori, slow-moving' },
};

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

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

function Btn({ tone = 'outline', size, 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={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 SectionHead({ title, hint, action }) {
  return (
    <div className="row between mb-4" style={{alignItems:'flex-end'}}>
      <div>
        <div style={{fontSize:13.5, fontWeight:600, letterSpacing:'-0.005em'}}>{title}</div>
        {hint && <div style={{fontSize:12, color:'hsl(var(--muted-foreground))', marginTop:2}}>{hint}</div>}
      </div>
      {action}
    </div>
  );
}

function Avatar({ initials, className = '' }) {
  const h = (window.hash ? hash(initials) : 0) % 360;
  const bg = `hsl(${h} 55% 48%)`;
  return <div className={'avatar ' + className} style={{background: bg}}>{initials}</div>;
}

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

function Sidebar({ active, setActive, role }) {
  return (
    <aside className="sidebar">
      <div className="sidebar-brand">
        <div className="sidebar-brand-mark" style={{background:'hsl(152 65% 42%)'}}>{TENANT.short}</div>
        <div className="sidebar-brand-text">
          <div className="sidebar-brand-name">Sumber Rejeki POS</div>
          <div className="sidebar-brand-sub">{TENANT.name}</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={16} className="icon" />
                <span>{item.label}</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={ROLES[role].initials} className="sm" />
          <div style={{minWidth:0, flex:1}}>
            <div className="sidebar-user-name">{ROLES[role].name}</div>
            <div className="sidebar-user-role">{ROLES[role].title}</div>
          </div>
        </div>
      </div>
    </aside>
  );
}

// ── Topbar + CabangSelector + CommandPalette ───────────────────────────────

function Topbar({ page, cabang, setCabang, setPage }) {
  const [cmdOpen, setCmdOpen] = useState(false);
  useEffect(() => {
    const onKey = (e) => {
      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') {
        e.preventDefault(); setCmdOpen(true);
      }
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, []);
  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>
        <CabangSelector value={cabang} onChange={setCabang} />
        <button className="btn outline sm" onClick={() => setCmdOpen(true)} title="Cari (⌘K)">
          <Icon name="search" size={14} />
        </button>
        <button className="btn outline sm" title="Notifikasi" style={{position:'relative'}}>
          <Icon name="bell" size={14} />
          <span style={{position:'absolute', top:6, right:6, width:6, height:6, borderRadius:999, background:'hsl(var(--destructive))'}} />
        </button>
      </header>
      <CommandPalette open={cmdOpen} onClose={() => setCmdOpen(false)} setPage={setPage} />
    </>
  );
}

function CabangSelector({ value, onChange }) {
  const [open, setOpen] = useState(false);
  const ref = useRef(null);
  useEffect(() => {
    const onDoc = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    document.addEventListener('mousedown', onDoc);
    return () => document.removeEventListener('mousedown', onDoc);
  }, []);
  const cur = CABANG_LIST.find(c => c.id === value) || CABANG_LIST[0];
  return (
    <div ref={ref} style={{position:'relative'}}>
      <button className="period-selector" onClick={() => setOpen(o => !o)}>
        <Icon name="storefront" size={14} className="icon" />
        <span style={{color:'hsl(var(--muted-foreground))'}}>Cabang</span>
        <span>{cur.name}</span>
        <Icon name="chevronDown" size={14} className="icon" />
      </button>
      {open && (
        <div style={{position:'absolute', right:0, top:'calc(100% + 4px)', minWidth:240, background:'hsl(var(--card))', border:'1px solid hsl(var(--border))', borderRadius:6, padding:4, boxShadow:'0 8px 24px rgba(0,0,0,0.08)', zIndex:50}}>
          {CABANG_LIST.map(p => (
            <button
              key={p.id}
              onClick={() => { onChange(p.id); setOpen(false); }}
              className="nav-item"
              style={{fontSize:12.5, padding:'6px 10px'}}
            >
              <span style={{flex:1}}>{p.name}</span>
              {p.id === value && <Icon name="check" size={14} />}
            </button>
          ))}
        </div>
      )}
    </div>
  );
}

function CommandPalette({ open, onClose, setPage }) {
  const [query, setQuery] = useState('');
  const inputRef = useRef(null);
  const commands = NAV.flatMap(g => g.items.map(i => ({ ...i, group: g.group, kw: (i.label + ' ' + g.group).toLowerCase() })));
  const results = commands.filter(c => !query || c.kw.includes(query.toLowerCase()));

  useEffect(() => {
    if (!open) return;
    setQuery('');
    setTimeout(() => inputRef.current?.focus(), 0);
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [open]);

  if (!open) return null;
  return (
    <div className="cmdk-backdrop" onMouseDown={onClose}>
      <div className="cmdk" onMouseDown={e => e.stopPropagation()}>
        <div className="cmdk-input-wrap">
          <Icon name="search" size={16} className="icon" />
          <input
            ref={inputRef}
            value={query}
            onChange={e => setQuery(e.target.value)}
            placeholder="Cari halaman, kasir, transaksi…"
            className="cmdk-input"
          />
        </div>
        <div className="cmdk-list">
          {results.length === 0 && <div className="empty">Tidak ada modul yang cocok.</div>}
          {results.map(c => (
            <button key={c.id} className="cmdk-item" onClick={() => { setPage(c.id); onClose(); }}>
              <Icon name={c.icon} size={16} className="icon" />
              <div style={{flex:1, minWidth:0}}>
                <div style={{fontWeight:500}}>{c.label}</div>
                <div style={{fontSize:11, color:'hsl(var(--muted-foreground))'}}>{c.group}</div>
              </div>
              <Icon name="chevronRight" size={14} className="icon" />
            </button>
          ))}
        </div>
      </div>
    </div>
  );
}

// ── Page header (used by report-style pages) ────────────────────────────────

function PageHeader({ title, subtitle, meta, actions }) {
  return (
    <div className="card" style={{padding:'18px 20px', display:'flex', alignItems:'flex-end', gap:24}}>
      <div style={{flex:1}}>
        <div style={{fontSize:11, textTransform:'uppercase', letterSpacing:'0.08em', color:'hsl(var(--muted-foreground))', fontWeight:600}}>{title}</div>
        <h2 style={{fontSize:20, fontWeight:600, letterSpacing:'-0.015em', margin:'4px 0 0'}}>{subtitle}</h2>
        {meta && <div style={{fontSize:12, color:'hsl(var(--muted-foreground))', marginTop:4}}>{meta}</div>}
      </div>
      {actions && <div className="row gap-2">{actions}</div>}
    </div>
  );
}

Object.assign(window, {
  NAV, PAGE_TITLES, Card, Btn, Pill, SectionHead, Avatar,
  Sidebar, Topbar, CabangSelector, CommandPalette, PageHeader,
});