// ─── Sidebar.jsx ─────────────────────────────────────────────
// Navy chrome, gold active state. Logo box uses --gold-grad.
// All sidebar items are RTL with min hit-area 36px.

function SidebarIcon({ name }) {
  const P = {
    new:       <path d="M8 1.7 L9.4 6.6 L14.3 8 L9.4 9.4 L8 14.3 L6.6 9.4 L1.7 8 L6.6 6.6 Z"></path>,
    history:   <g><circle cx="8" cy="8" r="6"></circle><path d="M8 4.6 V8 L10.4 9.5"></path></g>,
    doctrines: <g><line x1="8" y1="2.6" x2="8" y2="13.4"></line><line x1="5" y1="13.4" x2="11" y2="13.4"></line><line x1="3" y1="4.6" x2="13" y2="4.6"></line><path d="M3 4.6 L1.4 8.6 H4.6 Z"></path><path d="M13 4.6 L11.4 8.6 H14.6 Z"></path><circle cx="8" cy="2.6" r="1"></circle></g>,
    search:    <g><circle cx="7" cy="7" r="4.5"></circle><line x1="10.5" y1="10.5" x2="14" y2="14"></line></g>,
    pad:       <g><rect x="3.5" y="2.5" width="9" height="11" rx="1.5"></rect><line x1="6" y1="5.6" x2="10" y2="5.6"></line><line x1="6" y1="8" x2="10" y2="8"></line><line x1="6" y1="10.4" x2="8.6" y2="10.4"></line></g>,
    matters:   <path d="M2.5 4.6 H6.4 L7.8 6.1 H13.5 V12.4 A1 1 0 0 1 12.5 13.4 H3.5 A1 1 0 0 1 2.5 12.4 Z"></path>,
    memos:     <g><path d="M5 2.5 H10.3 L13.5 5.6 V13.5 H5 Z"></path><path d="M10.1 2.5 V5.7 H13.5"></path><line x1="6.8" y1="9" x2="11.6" y2="9"></line><line x1="6.8" y1="11.3" x2="11.6" y2="11.3"></line></g>,
    dash:      <g><line x1="2.6" y1="13.4" x2="13.4" y2="13.4"></line><rect x="3.6" y="8" width="2.4" height="5"></rect><rect x="6.8" y="4.6" width="2.4" height="8.4"></rect><rect x="10" y="9.6" width="2.4" height="3.4"></rect></g>,
    plan:      <path d="M8 1.8 L9.8 6 L14.3 6.3 L10.8 9.3 L12 13.8 L8 11.3 L4 13.8 L5.2 9.3 L1.7 6.3 L6.2 6 Z"></path>,
    settings:  <g><circle cx="8" cy="8" r="2.4"></circle><path d="M8 1.6 V3 M8 13 V14.4 M14.4 8 H13 M3 8 H1.6 M12.5 3.5 L11.5 4.5 M4.5 11.5 L3.5 12.5 M12.5 12.5 L11.5 11.5 M4.5 4.5 L3.5 3.5"></path></g>,
  };
  return (
    <svg width="17" height="17" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      {P[name] || null}
    </svg>
  );
}

function Sidebar({ active, onPick }) {
  const sections = [
    {
      title: 'מחקר',
      items: [
        { id: 'new',       icon: 'new',       label: 'שיחה חדשה' },
        { id: 'history',   icon: 'history',   label: 'היסטוריה',   count: 42 },
        { id: 'doctrines', icon: 'doctrines', label: 'דוקטרינות',  count: 29 },
        { id: 'search',    icon: 'search',    label: 'חיפוש קורפוס' },
      ],
    },
    {
      title: 'העבודה שלי',
      items: [
        { id: 'pad',     icon: 'pad',     label: 'הפנקס' },
        { id: 'matters', icon: 'matters', label: 'התיקים שלי', count: 7 },
        { id: 'memos',   icon: 'memos',   label: 'מזכרי ליטיגציה' },
      ],
    },
    {
      title: 'חשבון',
      items: [
        { id: 'dash',  icon: 'dash',  label: 'הדשבורד שלי' },
        { id: 'plan',  icon: 'plan',  label: 'Founding 50' },
      ],
    },
  ];

  return (
    <aside className="le-sidebar">
      <div className="le-sidebar-header">
        <div className="le-sidebar-logo">
          <EyeGlyph size={22} theme="dark" />
        </div>
        <div>
          <div className="le-sidebar-title">legal<b className="le-g-dark">eye</b></div>
          <div className="le-sidebar-subtitle">LEGAL INTELLIGENCE</div>
        </div>
      </div>

      <nav className="le-sidebar-nav">
        {sections.map(s => (
          <div className="le-sidebar-section" key={s.title}>
            <div className="le-sidebar-section-title">{s.title}</div>
            {s.items.map(it => (
              <button
                key={it.id}
                className={`le-sidebar-item ${active === it.id ? 'active' : ''}`}
                onClick={() => onPick && onPick(it.id)}
              >
                <span className="le-sidebar-item-icon"><SidebarIcon name={it.icon} /></span>
                <span>{it.label}</span>
                {it.count != null && (
                  <span className="le-sidebar-item-count">{it.count}</span>
                )}
              </button>
            ))}
          </div>
        ))}
      </nav>

      <div className="le-sidebar-footer">
        <span>v2.99.1</span>
        <button title="הגדרות"><SidebarIcon name="settings" /></button>
      </div>
    </aside>
  );
}

window.Sidebar = Sidebar;