/* Sidebar — left primary nav */
const { useState } = React;

function Icon({ name, size = 16 }) {
  const paths = {
    gauge:    <><path d="M12 14l4-4"/><path d="M3.34 19a10 10 0 1 1 17.32 0"/></>,
    turbines: <><path d="M9.6 4.6A2 2 0 1 1 11 8H2"/><path d="M12.6 19.4A2 2 0 1 0 14 16H2"/><path d="M17.5 8a2.5 2.5 0 1 1 2 4H2"/></>,
    alert:    <><path d="M10.3 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><path d="M12 9v4"/><path d="M12 17h.01"/></>,
    forecast: <><path d="M2 12h20"/><path d="M2 12s3-6 10-6 10 6 10 6-3 6-10 6-10-6-10-6z"/></>,
    reports:  <><rect x="4" y="3" width="16" height="18" rx="2"/><path d="M8 8h8M8 12h8M8 16h5"/></>,
    map:      <><path d="M9 2L3 5v17l6-3 6 3 6-3V2l-6 3z"/><path d="M9 2v17"/><path d="M15 5v17"/></>,
    settings: <><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></>,
    help:     <><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><path d="M12 17h.01"/></>,
  };
  return (
    <svg width={size} height={size} viewBox="0 0 24 24">{paths[name]}</svg>
  );
}

function Sidebar({ active = 'overview', onNav }) {
  const items = [
    { id: 'overview',  label: 'Overview',  icon: 'gauge' },
    { id: 'fleet',     label: 'Fleet',     icon: 'turbines' },
    { id: 'alerts',    label: 'Alerts',    icon: 'alert',    badge: '3' },
    { id: 'forecast',  label: 'Forecast',  icon: 'forecast' },
    { id: 'sites',     label: 'Sites',     icon: 'map' },
    { id: 'reports',   label: 'Reports',   icon: 'reports' },
  ];
  return (
    <aside className="sidebar">
      <div className="sb-brand">
        <svg className="mark" viewBox="0 0 64 64">
          <path d="M31 30 L30 60 L34 60 L33 30 Z" fill="currentColor"/>
          <circle cx="32" cy="30" r="3" fill="currentColor"/>
          <path d="M32 30 C 32 12, 28 6, 20 4 C 24 12, 28 20, 32 30 Z" fill="currentColor" opacity="0.92"/>
          <path d="M32 30 C 48 28, 56 30, 60 36 C 50 34, 42 32, 32 30 Z" fill="currentColor" opacity="0.78"/>
          <path d="M32 30 C 28 42, 22 52, 14 54 C 18 46, 24 38, 32 30 Z" fill="currentColor" opacity="0.6"/>
        </svg>
        <div className="name">WindTree</div>
        <div className="env">v2.4</div>
      </div>

      <div className="sb-section">Monitoring</div>
      {items.slice(0, 4).map(i => (
        <div key={i.id}
             className={'sb-item' + (active === i.id ? ' active' : '')}
             onClick={() => onNav && onNav(i.id)}>
          <Icon name={i.icon}/>
          <span>{i.label}</span>
          {i.badge && <span className="badge">{i.badge}</span>}
        </div>
      ))}

      <div className="sb-section">Manage</div>
      {items.slice(4).map(i => (
        <div key={i.id}
             className={'sb-item' + (active === i.id ? ' active' : '')}
             onClick={() => onNav && onNav(i.id)}>
          <Icon name={i.icon}/>
          <span>{i.label}</span>
        </div>
      ))}

      <div className="sb-footer">
        <div className="avatar">MR</div>
        <div className="who"><b>Maya Rhodes</b><span>Operations · Admin</span></div>
      </div>
    </aside>
  );
}

Object.assign(window, { Sidebar, Icon });