// Layout shell: Sidebar, Topbar, PeriodSelector, CommandPalette, primitives.
const { useState, useMemo, useEffect, useRef, Fragment } = React;

// ── Sidebar nav config ──────────────────────────────────────────────────────
const NAV = [
  { group: 'Beranda', items: [
    { id: 'dashboard', label: 'Dashboard', icon: 'home' },
  ]},
  { group: 'Laporan Keuangan', items: [
    { id: 'neraca',   label: 'Posisi Keuangan', icon: 'balance' },
    { id: 'labarugi', label: 'Laba Rugi',       icon: 'pnl' },
    { id: 'aruskas',  label: 'Arus Kas',        icon: 'cash' },
  ]},
  { group: 'Buku & Catatan', items: [
    { id: 'bukubesar', label: 'Buku Besar',  icon: 'ledger' },
    { id: 'jurnal',    label: 'Jurnal Umum', icon: 'journal' },
  ]},
  { group: 'Operasional', items: [
    { id: 'expense', label: 'Pengeluaran', icon: 'expense' },
    { id: 'fixed',   label: 'Aset Tetap',  icon: 'assets' },
  ]},
];

const PAGE_TITLES = {
  dashboard: { t: 'Dashboard',                     s: 'Ringkasan posisi keuangan & aktivitas terkini' },
  neraca:    { t: 'Laporan Posisi Keuangan',       s: 'Neraca — komparatif vs bulan sebelumnya' },
  labarugi:  { t: 'Laporan Laba Rugi',             s: 'Pendapatan, beban, dan surplus operasional' },
  aruskas:   { t: 'Laporan Arus Kas',              s: 'Metode tidak langsung — Operasi / Investasi / Pendanaan' },
  bukubesar: { t: 'Buku Besar',                    s: 'General ledger per akun dengan mutasi & saldo' },
  jurnal:    { t: 'Jurnal Umum',                   s: 'Catatan transaksi harian — entry, posting, approval' },
  expense:   { t: 'Pengeluaran',                   s: 'Tracker pengeluaran per kategori beban' },
  fixed:     { t: 'Aset Tetap',                    s: 'Register aktiva tetap, harga perolehan & nilai buku' },
};

// ── 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 .btn is primary */}
  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 = '' }) {
  // deterministic accent shade per initials
  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, setRole }) {
  return (
    <aside className="sidebar">
      <div className="sidebar-brand">
        <div className="sidebar-brand-mark">{SCHOOL.short}</div>
        <div className="sidebar-brand-text">
          <div className="sidebar-brand-name">Akunting Sekolah</div>
          <div className="sidebar-brand-sub">{SCHOOL.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 + PeriodSelector + CommandPalette ───────────────────────────────

function Topbar({ page, period, setPeriod, 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>
        <PeriodSelector value={period} onChange={setPeriod} />
        <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 PeriodSelector({ 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);
  }, []);
  return (
    <div ref={ref} style={{position:'relative'}}>
      <button className="period-selector" onClick={() => setOpen(o => !o)}>
        <span style={{color:'hsl(var(--muted-foreground))'}}>Periode</span>
        <span>{periodLabel(value)}</span>
        <Icon name="chevronDown" size={14} className="icon" />
      </button>
      {open && (
        <div style={{position:'absolute', right:0, top:'calc(100% + 4px)', minWidth:200, 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}}>
          {PERIOD_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.label}</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 laporan, buku besar, jurnal…"
            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>
  );
}

// ── Report header (used by Neraca / LabaRugi / ArusKas) ─────────────────────

function ReportHeader({ title, subtitle, meta }) {
  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>
        <div style={{fontSize:12, color:'hsl(var(--muted-foreground))', marginTop:4}}>{meta}</div>
      </div>
      <div className="row gap-2">
        <Btn icon="filter" size="sm">Filter</Btn>
        <Btn icon="download" size="sm">Ekspor</Btn>
        <Btn tone="primary" icon="print" size="sm" onClick={() => window.print()}>Cetak</Btn>
      </div>
    </div>
  );
}

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