// Shared UI bits — icons, sidebar, topbar, mock data
// Uses window-scoped exports so other JSX files can reference.

const Ico = {
  search: (p={}) => <svg {...p} width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>,
  dashboard: (p={}) => <svg {...p} width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="3" width="7" height="9"/><rect x="14" y="3" width="7" height="5"/><rect x="14" y="12" width="7" height="9"/><rect x="3" y="16" width="7" height="5"/></svg>,
  orders: (p={}) => <svg {...p} width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z"/><path d="M3 6h18"/><path d="M16 10a4 4 0 0 1-8 0"/></svg>,
  products: (p={}) => <svg {...p} width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m7.5 4.27 9 5.15"/><path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"/><path d="M3.3 7 12 12l8.7-5"/><path d="M12 22V12"/></svg>,
  users: (p={}) => <svg {...p} width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>,
  ai: (p={}) => <svg {...p} width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 8V4H8"/><rect width="16" height="12" x="4" y="8" rx="2"/><path d="M2 14h2"/><path d="M20 14h2"/><path d="M15 13v2"/><path d="M9 13v2"/></svg>,
  b2b: (p={}) => <svg {...p} width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 21h18"/><path d="M5 21V7l7-4 7 4v14"/><path d="M9 9v.01"/><path d="M9 13v.01"/><path d="M9 17v.01"/><path d="M15 9v.01"/><path d="M15 13v.01"/><path d="M15 17v.01"/></svg>,
  datasheet: (p={}) => <svg {...p} width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/><path d="M9 13h6"/><path d="M9 17h6"/></svg>,
  gallery: (p={}) => <svg {...p} width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect width="18" height="18" x="3" y="3" rx="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/></svg>,
  pricing: (p={}) => <svg {...p} width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M20.59 13.41 13.42 20.58a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"/><line x1="7" x2="7.01" y1="7" y2="7"/></svg>,
  modules: (p={}) => <svg {...p} width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect width="7" height="7" x="3" y="3" rx="1"/><rect width="7" height="7" x="14" y="3" rx="1"/><rect width="7" height="7" x="14" y="14" rx="1"/><rect width="7" height="7" x="3" y="14" rx="1"/></svg>,
  settings: (p={}) => <svg {...p} width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg>,
  bell: (p={}) => <svg {...p} width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/></svg>,
  grid: (p={}) => <svg {...p} width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect width="7" height="7" x="3" y="3" rx="1"/><rect width="7" height="7" x="14" y="3" rx="1"/><rect width="7" height="7" x="14" y="14" rx="1"/><rect width="7" height="7" x="3" y="14" rx="1"/></svg>,
  plus: (p={}) => <svg {...p} width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14"/><path d="M12 5v14"/></svg>,
  download: (p={}) => <svg {...p} width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" x2="12" y1="15" y2="3"/></svg>,
  upload: (p={}) => <svg {...p} width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" x2="12" y1="3" y2="15"/></svg>,
  filter: (p={}) => <svg {...p} width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/></svg>,
  chev: (p={}) => <svg {...p} width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m6 9 6 6 6-6"/></svg>,
  chevRight: (p={}) => <svg {...p} width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m9 18 6-6-6-6"/></svg>,
  dots: (p={}) => <svg {...p} width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>,
  shield: (p={}) => <svg {...p} width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/></svg>,
  check: (p={}) => <svg {...p} width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>,
  x: (p={}) => <svg {...p} width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>,
  arrowUp: (p={}) => <svg {...p} width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><line x1="12" x2="12" y1="19" y2="5"/><polyline points="5 12 12 5 19 12"/></svg>,
  arrowDown: (p={}) => <svg {...p} width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><line x1="12" x2="12" y1="5" y2="19"/><polyline points="19 12 12 19 5 12"/></svg>,
  mail: (p={}) => <svg {...p} width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect width="20" height="16" x="2" y="4" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg>,
  lock: (p={}) => <svg {...p} width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect width="18" height="11" x="3" y="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>,
  logout: (p={}) => <svg {...p} width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" x2="9" y1="12" y2="12"/></svg>,
  construction: (p={}) => <svg {...p} width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="6" width="20" height="8" rx="1"/><path d="M17 14v7"/><path d="M7 14v7"/><path d="M17 3v3"/><path d="M7 3v3"/><path d="M10 14 2.3 6.3"/><path d="m14 6 7.7 7.7"/><path d="m8 6 8 8"/></svg>,
  sparkles: (p={}) => <svg {...p} width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"/></svg>,
};

// ───── Logo ─────
function Logo({ size = 32 }) {
  return (
    <div className="sb-logo-mark" style={{ width: size, height: size }} />
  );
}

// ───── Sparkline ─────
function Sparkline({ data, color = '#3a6da0', w = 80, h = 26 }) {
  const max = Math.max(...data), min = Math.min(...data);
  const range = max - min || 1;
  const pts = data.map((d, i) => {
    const x = (i / (data.length - 1)) * w;
    const y = h - ((d - min) / range) * (h - 4) - 2;
    return `${x},${y}`;
  }).join(' ');
  return (
    <svg width={w} height={h}>
      <polyline points={pts} fill="none" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}

// ───── Topbar ─────
function Topbar({ crumbs = [], showSearch = true, showLauncher = true }) {
  return (
    <div className="topbar">
      <div className="crumbs">
        {crumbs.map((c, i) => (
          <React.Fragment key={i}>
            {i > 0 && <span className="sep">/</span>}
            {i === crumbs.length - 1 ? <b>{c}</b> : <span>{c}</span>}
          </React.Fragment>
        ))}
      </div>
      {showSearch && (
        <div className="topbar-search">
          <Ico.search className="ico"/>
          <input placeholder="Hľadať objednávky, produkty, zákazníkov…" />
          <kbd>⌘K</kbd>
        </div>
      )}
      {showLauncher && (
        <button className="launcher-btn">
          <Ico.grid/> Aplikácie <Ico.chev/>
        </button>
      )}
      <button className="topbar-btn"><Ico.bell/><span className="dot"/></button>
    </div>
  );
}

// ───── Sidebar ─────
// Items map to module slugs in the DB; if a module is disabled (or missing in session.modules),
// we hide the sidebar row. Core modules (users/modules/integrations/settings) can't be disabled.
function Sidebar({ active = 'dashboard' }) {
  const items = [
    { id: 'dashboard', module: 'dashboard',        label: 'Prehľad',              ico: <Ico.dashboard className="ico"/> },
    { id: 'orders',    module: 'orders',           label: 'Objednávky',           ico: <Ico.orders className="ico"/> },
    { id: 'products',  module: 'products',         label: 'Produkty',             ico: <Ico.products className="ico"/> },
    { id: 'customers', module: 'users_customers',  label: 'Zákazníci',            ico: <Ico.users className="ico"/> },
    { id: 'pricing',   module: 'pricing',          label: 'Individ. ceny',        ico: <Ico.pricing className="ico"/> },
    { id: 'b2b',       module: 'b2b',              label: 'B2B schvaľ.',          ico: <Ico.b2b className="ico"/> },
    { id: 'datasheets',module: 'datasheets',       label: 'Datasheety',           ico: <Ico.datasheet className="ico"/> },
    { id: 'gallery',   module: 'gallery',          label: 'Realizácie',           ico: <Ico.gallery className="ico"/> },
    { id: 'ai',        module: 'ai',               label: 'AI asistent',          ico: <Ico.ai className="ico"/> },
    { id: 'calendar',  module: 'calendar',         label: 'Kalendár & dovolenky', ico: <Ico.construction className="ico"/> },
  ];
  const admin = [
    { id: 'users',        module: 'users',        label: 'CRM Používatelia', ico: <Ico.users className="ico"/> },
    { id: 'modules',      module: 'modules',      label: 'Moduly',           ico: <Ico.modules className="ico"/> },
    { id: 'integrations', module: 'integrations', label: 'Integrácie',       ico: <Ico.sparkles className="ico"/> },
    { id: 'settings',     module: 'settings',     label: 'Nastavenia',       ico: <Ico.settings className="ico"/> },
  ];

  // Build a map { slug → is_enabled } from current session; if no session yet, default to show all.
  const modules = (window.currentSession && window.currentSession.modules) || [];
  const enabled = modules.length
    ? Object.fromEntries(modules.map(m => [m.slug, !!m.is_enabled]))
    : null;
  const isEnabled = (slug) => enabled == null ? true : enabled[slug] !== false;

  const visibleItems = items.filter(it => isEnabled(it.module));
  const visibleAdmin = admin.filter(it => isEnabled(it.module));
  return (
    <aside className="sidebar">
      <div className="sb-logo">
        <Logo/>
        <div className="sb-logo-text">D&amp;D Energy<small>CRM</small></div>
      </div>
      <div className="sb-nav">
        {visibleItems.length > 0 && <div className="sb-section">Pracovné moduly</div>}
        {visibleItems.map(it => (
          <a key={it.id} className={active === it.id ? 'active' : ''}>
            {it.ico}<span>{it.label}</span>{it.badge && <span className="badge">{it.badge}</span>}
          </a>
        ))}
        {visibleAdmin.length > 0 && <div className="sb-section" style={{marginTop: 10}}>Administrácia</div>}
        {visibleAdmin.map(it => (
          <a key={it.id} className={active === it.id ? 'active' : ''}>
            {it.ico}<span>{it.label}</span>
          </a>
        ))}
      </div>
      <div className="sb-user">
        <div className="sb-avatar">DK</div>
        <div style={{minWidth:0, flex:1}}>
          <div className="sb-user-name">Dávid K.</div>
          <div className="sb-user-role">Administrátor</div>
        </div>
        <Ico.logout style={{color:'#8ea8c9', cursor:'pointer'}}/>
      </div>
    </aside>
  );
}

// ───── Page wrapper ─────
function AppShell({ active, crumbs, children }) {
  return (
    <div className="app">
      <Sidebar active={active}/>
      <div className="main">
        <Topbar crumbs={crumbs}/>
        <div className="content">{children}</div>
      </div>
    </div>
  );
}

// ───── Mock data ─────
const orders = [
  { id: '#DD-2841', date: '23.04.2026', customer: 'Peter Novotný', email: 'p.novotny@sunhome.sk', total: '4 782,00 €', status: 'new',      items: 3 },
  { id: '#DD-2840', date: '23.04.2026', customer: 'SolarTech s.r.o.', email: 'objednavky@solartech.sk', total: '12 450,00 €', status: 'paid',     items: 8 },
  { id: '#DD-2839', date: '22.04.2026', customer: 'Martina Hrušková', email: 'hruskova@gmail.com', total: '1 240,00 €', status: 'processing', items: 2 },
  { id: '#DD-2838', date: '22.04.2026', customer: 'Energomont a.s.', email: 'nakup@energomont.sk', total: '28 990,00 €', status: 'shipped',    items: 14 },
  { id: '#DD-2837', date: '22.04.2026', customer: 'Jozef Varga', email: 'j.varga@zoznam.sk', total: '890,00 €', status: 'paid',       items: 1 },
  { id: '#DD-2836', date: '21.04.2026', customer: 'EkoDom k.s.', email: 'info@ekodom.sk', total: '6 310,00 €', status: 'completed',  items: 5 },
  { id: '#DD-2835', date: '21.04.2026', customer: 'Lukáš Mikuláš', email: 'lmikulas@me.com', total: '2 190,00 €', status: 'cancelled',items: 2 },
  { id: '#DD-2834', date: '21.04.2026', customer: 'GreenGrid s.r.o.', email: 'orders@greengrid.eu', total: '18 720,00 €', status: 'processing',items: 11 },
  { id: '#DD-2833', date: '20.04.2026', customer: 'Andrea Štefanová', email: 'stefanova@azet.sk', total: '3 450,00 €', status: 'paid',       items: 4 },
  { id: '#DD-2832', date: '20.04.2026', customer: 'Slovakia Solar', email: 'dispecing@slovsolar.sk', total: '9 980,00 €', status: 'shipped',    items: 7 },
];

const statusMap = {
  new:        { label: 'Nová',       cls: 'amber' },
  paid:       { label: 'Zaplatená',  cls: 'navy' },
  processing: { label: 'Spracúva sa',cls: 'gray' },
  shipped:    { label: 'Odoslaná',   cls: 'green' },
  completed:  { label: 'Dokončená',  cls: 'green' },
  cancelled:  { label: 'Zrušená',    cls: 'red' },
};

const products = [
  { sku: 'PV-ECO-5',    name: 'Fotovoltická zostava ECO 5kW',       cat: 'Zostavy',    price: '4 980,00', stock: 14, var: 3, img: 'panel' },
  { sku: 'PV-PRE-8',    name: 'Fotovoltická zostava PREMIUM 8kW',   cat: 'Zostavy',    price: '7 290,00', stock: 8,  var: 4, img: 'panel' },
  { sku: 'PV-PRE-10',   name: 'Fotovoltická zostava PREMIUM 10kW',  cat: 'Zostavy',    price: '9 150,00', stock: 5,  var: 4, img: 'panel' },
  { sku: 'INV-GW-5K',   name: 'Menič GoodWe GW5K-ET',               cat: 'Meniče',     price: '1 240,00', stock: 22, var: 1, img: 'inverter' },
  { sku: 'INV-SOL-8K',  name: 'Menič Solax X3-Hybrid 8kW',          cat: 'Meniče',     price: '1 890,00', stock: 11, var: 2, img: 'inverter' },
  { sku: 'BAT-PYLON-5', name: 'Batéria Pylontech US5000 4.8kWh',    cat: 'Batérie',    price: '1 560,00', stock: 18, var: 1, img: 'battery' },
  { sku: 'BAT-BYD-10',  name: 'Batéria BYD Battery-Box HVS 10.2',   cat: 'Batérie',    price: '3 890,00', stock: 4,  var: 1, img: 'battery' },
  { sku: 'PAN-TRINA',   name: 'Panel Trina Solar Vertex 450Wp',     cat: 'Panely',     price: '89,00',    stock: 312,var: 1, img: 'panel' },
  { sku: 'PAN-JINKO',   name: 'Panel Jinko Tiger Pro 425Wp',        cat: 'Panely',     price: '79,00',    stock: 180,var: 1, img: 'panel' },
];

Object.assign(window, { Ico, Logo, Sparkline, Topbar, Sidebar, AppShell, orders, statusMap, products });
