/* global React */
const navItems = [
  { id: 'dashboard',  label: 'Dashboard',    icon: 'M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z' },
  { section: 'Relations' },
  { id: 'relations',  label: 'Companies',    icon: 'M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2M9 11a4 4 0 100-8 4 4 0 000 8zM23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75' },
  { section: 'Finance' },
  { id: 'outbound',   label: 'Invoices out', icon: 'M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8zM14 2v6h6M16 13H8M16 17H8M10 9H8' },
  { id: 'inbound',    label: 'Invoices in',  icon: 'M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3' },
  { id: 'expenses',   label: 'Expenses',     icon: 'M12 2v20M17 5H9.5a3.5 3.5 0 000 7h5a3.5 3.5 0 010 7H6' },
  { id: 'btw',        label: 'BTW / VAT',    icon: 'M9 14l6-6M10 9h.01M14 14h.01M21 21l-6-6m6 6V9a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2h14a2 2 0 002-2z' },
  { id: 'creditNotes',label: 'Credit notes', icon: 'M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8zM14 2v6h6M9 13h6' },
  { id: 'pl',         label: 'P&L',          icon: 'M18 20V10M12 20V4M6 20v-6' },
  { id: 'bank',       label: 'Bank',         icon: 'M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z' },
  { section: 'Tools' },
  { id: 'time',       label: 'Time tracker', icon: 'M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10zM12 6v6l4 2' },
  { id: 'recurring',  label: 'Recurring',    icon: 'M23 4v6h-6M1 20v-6h6M3.51 9a9 9 0 0114.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0020.49 15' },
  { section: 'Tax' },
  { id: 'ibprep',     label: 'IB Prep',      icon: 'M9 17H7a4 4 0 010-8h2M15 7h2a4 4 0 010 8h-2M8 12h8' },
  { section: 'Portal' },
  { id: 'agreements',     label: 'VOK agreements',  icon: 'M9 12l2 2 4-4M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z' },
  { id: 'documents',      label: 'Documents',       icon: 'M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z' },
  { id: 'customerGroups', label: 'Customer groups', icon: 'M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z' },
  { section: 'System' },
  { id: 'compliance', label: 'Compliance',    icon: 'M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z' },
  { id: 'register',   label: 'Art. 30 reg.',  icon: 'M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2M9 12h6M9 16h4' },
  { id: 'breaches',   label: 'Breach log',    icon: 'M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10zM12 8v4M12 16h.01' },
  { id: 'settings',   label: 'Settings',     icon: 'M12 15a3 3 0 100-6 3 3 0 000 6zM19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 010-2.83 2 2 0 012.83 0l.06.06A1.65 1.65 0 009 4.68a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 0 2 2 0 010 2.83l-.06.06A1.65 1.65 0 0019.4 9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z' },
];

function NavIcon({ d }) {
  return (
    <svg className="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d={d} />
    </svg>
  );
}

function Sidebar({ active, onNav, onLogout }) {
  return (
    <aside className="admin-sidebar">
      <div className="admin-sidebar__logo">
        <span className="admin-sidebar__logo-mark">Lake-Project</span>
        <span className="admin-sidebar__logo-sub">Admin · v1</span>
      </div>
      <nav className="admin-sidebar__nav">
        {navItems.map((item, i) =>
          item.section
            ? <div key={i} className="admin-sidebar__section">{item.section}</div>
            : (
              <button
                key={item.id}
                className={`admin-sidebar__link ${active === item.id ? 'is-active' : ''}`}
                onClick={() => onNav(item.id)}
              >
                <NavIcon d={item.icon} />
                {item.label}
              </button>
            )
        )}
      </nav>
      <div className="admin-sidebar__footer">
        <div className="admin-sidebar__user">
          <span>alexander</span>
          <button className="admin-sidebar__logout" onClick={onLogout}>sign out</button>
        </div>
      </div>
    </aside>
  );
}
window.Sidebar = Sidebar;