// Sidebar.jsx — left rail navigation for the ASK platform
const { useState } = React;

function Icon({ name, size = 18 }) {
  const stroke = "currentColor";
  const sw = 1.5;
  const common = { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke, strokeWidth: sw, strokeLinecap: "round", strokeLinejoin: "round" };
  switch (name) {
    case "chat":
      return <svg {...common}><path d="M21 12a8 8 0 0 1-12.5 6.6L3 20l1.4-5.5A8 8 0 1 1 21 12Z"/></svg>;
    case "notebook":
      return <svg {...common}><path d="M4 4h12a3 3 0 0 1 3 3v13a0 0 0 0 1 0 0H7a3 3 0 0 1-3-3Z"/><path d="M8 7v13"/><path d="M12 11h4M12 15h4"/></svg>;
    case "vertical":
      return <svg {...common}><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>;
    case "pod":
      return <svg {...common}><ellipse cx="12" cy="6" rx="8" ry="3"/><path d="M4 6v6c0 1.7 3.6 3 8 3s8-1.3 8-3V6"/><path d="M4 12v6c0 1.7 3.6 3 8 3s8-1.3 8-3v-6"/></svg>;
    case "shield":
      return <svg {...common}><path d="M12 3 4 6v6c0 5 3.4 8.5 8 9 4.6-.5 8-4 8-9V6Z"/></svg>;
    case "radar":
      return <svg {...common}><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="5"/><path d="M12 12 19 5"/></svg>;
    case "audit":
      return <svg {...common}><path d="M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9Z"/><path d="M14 3v6h6"/><path d="M9 13h6M9 17h4"/></svg>;
    case "plus":
      return <svg {...common}><path d="M12 5v14M5 12h14"/></svg>;
    case "send":
      return <svg {...common}><path d="m4 12 16-8-6 16-3-7Z"/><path d="m4 12 7 3"/></svg>;
    case "search":
      return <svg {...common}><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>;
    case "user":
      return <svg {...common}><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></svg>;
    case "lock":
      return <svg {...common}><rect x="4" y="11" width="16" height="10" rx="1"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg>;
    case "play":
      return <svg {...common}><path d="m6 4 14 8-14 8Z"/></svg>;
    case "check":
      return <svg {...common}><path d="m4 12 5 5L20 6"/></svg>;
    case "x":
      return <svg {...common}><path d="m6 6 12 12M6 18 18 6"/></svg>;
    case "external":
      return <svg {...common}><path d="M14 4h6v6"/><path d="M20 4 10 14"/><path d="M20 14v4a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h4"/></svg>;
    case "alert":
      return <svg {...common}><path d="M12 3 2 21h20Z"/><path d="M12 10v5"/><circle cx="12" cy="18" r="0.5" fill={stroke}/></svg>;
    case "clock":
      return <svg {...common}><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>;
    default:
      return <svg {...common}/>;
  }
}

function Sidebar({ env, onEnv, onShadowRadar }) {
  const items = [
    { id: "chat", label: "General Chat", icon: "chat" },
    { id: "notebook", label: "Research Notebook", icon: "notebook" },
    { id: "vertical", label: "Vertical Apps", icon: "vertical" },
  ];
  return (
    <aside className="ask-sidebar">
      <div className="ask-sidebar__brand">
        <img src="../../assets/mirai-icon-light.svg" alt="" width="22" height="22" />
        <span className="ask-sidebar__brand-name">ASK</span>
        <span className="ask-sidebar__brand-tag">v4.2</span>
      </div>

      <button className="ask-sidebar__new">
        <Icon name="plus" size={14}/> New session
      </button>

      <div className="ask-sidebar__section">
        <div className="ask-sidebar__heading">Environment</div>
        {items.map(it => (
          <button key={it.id} className={`ask-sidebar__nav ${env === it.id ? "is-active" : ""}`} onClick={() => onEnv(it.id)}>
            <Icon name={it.icon} size={16}/>
            <span>{it.label}</span>
          </button>
        ))}
      </div>

      <div className="ask-sidebar__section">
        <div className="ask-sidebar__heading">Knowledge Pods</div>
        {[
          { id: "legal", name: "pod-legal-eu", count: "1,402" },
          { id: "fin", name: "pod-finance-us", count: "  837" },
          { id: "rd", name: "pod-research-de", count: "3,109" },
        ].map(p => (
          <button key={p.id} className="ask-sidebar__pod">
            <Icon name="pod" size={14}/>
            <span className="ask-sidebar__pod-name">{p.name}</span>
            <span className="ask-sidebar__pod-count">{p.count}</span>
          </button>
        ))}
      </div>

      <div className="ask-sidebar__section">
        <div className="ask-sidebar__heading">Governance</div>
        <button className="ask-sidebar__nav" onClick={onShadowRadar}>
          <Icon name="radar" size={16}/>
          <span>Shadow AI Radar</span>
          <span className="ask-sidebar__pill">2</span>
        </button>
        <button className="ask-sidebar__nav">
          <Icon name="audit" size={16}/>
          <span>Audit Trail</span>
        </button>
        <button className="ask-sidebar__nav">
          <Icon name="shield" size={16}/>
          <span>Walled Garden</span>
        </button>
      </div>

      <div className="ask-sidebar__user">
        <div className="ask-sidebar__user-avatar">MR</div>
        <div className="ask-sidebar__user-meta">
          <div className="ask-sidebar__user-name">Matteo Rizzo</div>
          <div className="ask-sidebar__user-role">Admin · Tenant 04</div>
        </div>
      </div>
    </aside>
  );
}

window.Icon = Icon;
window.Sidebar = Sidebar;