// Layout shell for CV Mitra Logistik inventory & warehouse
const { useState, useMemo, useEffect, useRef, Fragment } = React;

const NAV = [
  { group: 'Operasional', items: [
    { id: 'dashboard',  label: 'Dashboard',           icon: 'home' },
    { id: 'masuk',      label: 'Stok Masuk',          icon: 'inbox' },
    { id: 'keluar',     label: 'Stok Keluar',         icon: 'outbox' },
    { id: 'transfer',   label: 'Transfer Antar',      icon: 'shuffle' },
  ]},
  { group: 'Audit & Master', items: [
    { id: 'opname',     label: 'Stock Opname',        icon: 'clipboard' },
    { id: 'master',     label: 'Master SKU',          icon: 'package' },
  ]},
  { group: 'Analitik', items: [
    { id: 'laporan',    label: 'Laporan',             icon: 'trending' },
  ]},
];

const PAGE_TITLES = {
  dashboard: { t: 'Dashboard',           s: 'Ringkasan stok, alur masuk-keluar, dan utilisasi gudang' },
  masuk:     { t: 'Stok Masuk',          s: 'Penerimaan barang dari supplier (GR) & PO yang berjalan' },
  keluar:    { t: 'Stok Keluar',         s: 'Pengiriman ke customer (DO) & Sales Order yang menunggu' },
  transfer:  { t: 'Transfer Antar Gudang', s: 'Pemindahan stok antar lokasi (Pusat / Bandung / Surabaya)' },
  opname:    { t: 'Stock Opname',        s: 'Audit fisik stok per zona, rekonsiliasi & adjustment' },
  master:    { t: 'Master SKU',          s: 'Katalog produk: HPP, harga jual, supplier, lokasi bin, min/max' },
  laporan:   { t: 'Laporan',             s: 'Kartu stok, valuasi inventori, slow-moving, dan turnover' },
};

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

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:13, fontWeight:600, letterSpacing:'-0.005em'}}>{title}</div>
        {hint && <div style={{fontSize:11.5, color:'hsl(var(--muted-foreground))', marginTop:1}}>{hint}</div>}
      </div>
      {action}
    </div>
  );
}

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

function SkuTag({ sku }) {
  return <span className="sku-tag">{sku}</span>;
}

function BinLoc({ bin }) {
  if (!bin || bin === '—') return <span style={{color:'hsl(var(--muted-foreground))'}}>—</span>;
  return <span className="bin-loc">{bin}</span>;
}

function StockBar({ value, min, max }) {
  const pct = Math.min(100, max > 0 ? (value / max) * 100 : 0);
  let tone = 'normal';
  if (value === 0) tone = 'danger';
  else if (value < min) tone = 'danger';
  else if (value < min * 1.5) tone = 'warn';
  return (
    <span className="stock-cell">
      <span style={{minWidth:34, textAlign:'right'}} className="num-mono">{value}</span>
      <span className="stock-bar"><div className={tone} style={{width: pct + '%'}} /></span>
    </span>
  );
}

// Synthetic barcode strip — visual ornament
function BarcodeStrip({ seed = 'X' }) {
  const h = hash(String(seed));
  // Generate ~32 lines, mix thin/thick/short/gap based on hash bits
  const cells = React.useMemo(() => {
    const out = [];
    let r = h;
    for (let i = 0; i < 36; i++) {
      r = (r * 1103515245 + 12345) >>> 0;
      const b = r & 0b111;
      let cls = '';
      if (b === 0) cls = 'gap';
      else if (b === 1 || b === 2) cls = 'thin';
      else if (b === 6 || b === 7) cls = 'thick';
      if ((r & 0b11000) === 0b11000) cls += ' short';
      out.push(cls);
    }
    return out;
  }, [h]);
  return (
    <div className="barcode-strip" title={`Barcode ${seed}`}>
      {cells.map((c, i) => <span key={i} className={c} />)}
    </div>
  );
}

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

function Sidebar({ active, setActive, role }) {
  return (
    <aside className="sidebar">
      <div className="sidebar-brand">
        <div className="sidebar-brand-mark" style={{background:'hsl(215 50% 45%)'}}>{TENANT.short}</div>
        <div className="sidebar-brand-text">
          <div className="sidebar-brand-name">Mitra Logistik WMS</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={15} 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 + GudangSelector + CommandPalette ───────────────────────────────

function Topbar({ page, gudang, setGudang, 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>
        <GudangSelector value={gudang} onChange={setGudang} />
        <button className="btn outline sm" onClick={() => setCmdOpen(true)} title="Cari (⌘K)">
          <Icon name="search" size={13} />
        </button>
        <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>
      <CommandPalette open={cmdOpen} onClose={() => setCmdOpen(false)} setPage={setPage} />
    </>
  );
}

const GUDANG_OPTIONS = [
  { id: 'all',      name: 'Semua Gudang' },
  ...GUDANG_LIST.map(g => ({ id: g.id, name: g.name })),
];

function GudangSelector({ 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 = GUDANG_OPTIONS.find(g => g.id === value) || GUDANG_OPTIONS[0];
  return (
    <div ref={ref} style={{position:'relative'}}>
      <button className="period-selector" onClick={() => setOpen(o => !o)}>
        <Icon name="warehouse" size={13} className="icon" />
        <span style={{color:'hsl(var(--muted-foreground))'}}>Gudang</span>
        <span>{cur.name}</span>
        <Icon name="chevronDown" size={13} 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}}>
          {GUDANG_OPTIONS.map(g => (
            <button
              key={g.id}
              onClick={() => { onChange(g.id); setOpen(false); }}
              className="nav-item"
              style={{fontSize:12.5, padding:'6px 10px'}}
            >
              <span style={{flex:1}}>{g.name}</span>
              {g.id === value && <Icon name="check" size={13} />}
            </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={15} className="icon" />
          <input
            ref={inputRef}
            value={query}
            onChange={e => setQuery(e.target.value)}
            placeholder="Cari modul, dokumen, SKU…"
            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={15} 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={13} className="icon" />
            </button>
          ))}
        </div>
      </div>
    </div>
  );
}

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

function PageHeader({ title, subtitle, meta, actions }) {
  return (
    <div className="card inv-page-header">
      <div style={{flex:1}}>
        <div style={{fontSize:10.5, textTransform:'uppercase', letterSpacing:'0.08em', color:'hsl(var(--muted-foreground))', fontWeight:600}}>{title}</div>
        <h2 style={{fontSize:18, fontWeight:600, letterSpacing:'-0.015em', margin:'3px 0 0'}}>{subtitle}</h2>
        {meta && <div style={{fontSize:11.5, color:'hsl(var(--muted-foreground))', marginTop:3}}>{meta}</div>}
      </div>
      {actions && <div className="row gap-2">{actions}</div>}
    </div>
  );
}

// ── Doc header (used on GR/DO/TR drawer-detail panels) ────────────────────

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

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

function Kpi({ label, value, hint, icon, tone, progress }) {
  return (
    <div className="card kpi" style={{padding:14}}>
      <div className="row between" style={{marginBottom:8}}>
        <div style={{fontSize:11, color:'hsl(var(--muted-foreground))', textTransform:'uppercase', letterSpacing:'0.04em', fontWeight:600}}>{label}</div>
        {icon && <div className="kpi-icon" data-tone={tone}><Icon name={icon} size={14} /></div>}
      </div>
      <div style={{fontSize:22, fontWeight:600, letterSpacing:'-0.025em', fontVariantNumeric:'tabular-nums', lineHeight:1.1}}>{value}</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>
  );
}

Object.assign(window, {
  NAV, PAGE_TITLES, GUDANG_OPTIONS,
  Card, Btn, Pill, StatusPill, SectionHead, Avatar,
  SkuTag, BinLoc, StockBar, BarcodeStrip,
  Sidebar, Topbar, GudangSelector, CommandPalette,
  PageHeader, DocHeader, Kpi,
});