/* 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' },
  { 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: 'Publishing' },
  { id: 'social',     label: 'Social posts', icon: 'M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z' },
];

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;