/* Sidebar navigation */

const NAV_ITEMS = [
  { section: 'Data' },
  { id: 'data',       label: 'Data beheer', icon: 'database' },
  { id: 'pand-zoek',  label: 'Data',        icon: 'search' },
  { id: 'kaart',      label: 'Kaart',       icon: 'map' },
  { section: 'Analyse' },
  { id: 'pipeline',   label: 'Pipeline',    icon: 'play-circle' },
  { id: 'flow',       label: 'Flow',        icon: 'workflow' },
  { id: 'resultaten', label: 'Resultaten',  icon: 'bar-chart-3' },
  { id: 'training',   label: 'Training',    icon: 'graduation-cap' },
  { id: 'review',     label: 'Review',      icon: 'search-check' },
  { section: 'Export' },
  { id: 'rapporten',  label: 'Rapporten',   icon: 'file-text' },
];

function Sidebar({ scherm, setScherm }) {
  const [ingeklapt, setIngeklapt] = React.useState(() => localStorage.getItem('bd-sidebar-ingeklapt') === '1');
  React.useEffect(() => { localStorage.setItem('bd-sidebar-ingeklapt', ingeklapt ? '1' : '0'); }, [ingeklapt]);
  return (
    <aside className={'bd-sidebar' + (ingeklapt ? ' is-ingeklapt' : '')}>
      <div className="bd-brand">
        <img className="bd-brand-mark-img" src="theme/centric-mark.png" alt="Centric" />
        <div className="bd-brand-text">
          <img className="bd-brand-logo" src="theme/centric-logo.png" alt="Centric" />
          <span className="bd-brand-sub">Objectdetectie</span>
        </div>
      </div>

      <nav className="bd-nav">
        {NAV_ITEMS.map((item, i) =>
          item.section
            ? <div key={'s'+i} className="bd-nav-section">{item.section}</div>
            : (
              <a
                key={item.id}
                href="#"
                onClick={(e) => { e.preventDefault(); setScherm(item.id); }}
                className={'tc-nav-item' + (scherm === item.id ? ' is-active' : '')}
                title={item.label}
              >
                <Icon name={item.icon} size={16} />
                <span className="tc-nav-label">{item.label}</span>
              </a>
            )
        )}
      </nav>

      <div className="bd-nav-footer">
        <a
          href="#"
          onClick={(e) => { e.preventDefault(); setIngeklapt(v => !v); }}
          className="tc-nav-item"
          title={ingeklapt ? 'Menu uitklappen' : 'Menu inklappen'}
        >
          <Icon name={ingeklapt ? 'panel-left-open' : 'panel-left-close'} size={16} />
          <span className="tc-nav-label">Inklappen</span>
        </a>
        <a
          href="#"
          onClick={(e) => { e.preventDefault(); setScherm('instellingen'); }}
          className={'tc-nav-item' + (scherm === 'instellingen' ? ' is-active' : '')}
          title="Instellingen"
        >
          <Icon name="settings" size={16} />
          <span className="tc-nav-label">Instellingen</span>
        </a>
      </div>
    </aside>
  );
}

function Topbar({ scherm }) {
  const labels = {
    data: 'Data beheer', 'pand-zoek': 'Data', kaart: 'Kaart', pipeline: 'Pipeline',
    flow: 'Flow', resultaten: 'Resultaten', training: 'Training', review: 'Review', rapporten: 'Rapporten',
    instellingen: 'Instellingen',
  };
  return (
    <div className="bd-topbar">
      <div className="bd-topbar-crumbs">
        <span className="tc-crumb">Centric Objectdetectie</span>
        <Icon name="chevron-right" size={14} />
        <span className="tc-crumb tc-crumb--current">{labels[scherm] || ''}</span>
      </div>
      <div className="bd-topbar-actions">
        <span className="bd-env-pill"><span className="bd-env-pill-dot" /> Productie</span>
        <button className="tc-icon-btn" aria-label="Help"><Icon name="life-buoy" size={18} /></button>
        <button className="tc-icon-btn" aria-label="Meldingen"><Icon name="bell" size={18} /></button>
      </div>
    </div>
  );
}

Object.assign(window, { Sidebar, Topbar, NAV_ITEMS });