/* global React */
const { useState, useEffect, useRef, useMemo } = React;

// ===================== SIDEBAR =====================
function Sidebar({ convos, activeId, onOpen, onNew, onSettings, onHistory, onCloseMobile, visible }) {
  const [query, setQuery] = useState("");

  const filtered = useMemo(() => {
    if (!query) return convos;
    const q = query.toLowerCase();
    return convos.filter(c => c.title.toLowerCase().includes(q) || c.preview.toLowerCase().includes(q));
  }, [query, convos]);

  const groups = {};
  for (const c of filtered) {
    (groups[c.date] = groups[c.date] || []).push(c);
  }

  return (
    <aside className="sidebar" data-visible={visible ? "true" : "false"}>
      <div className="sidebar-head">
        <div className="brand" onClick={onNew}>
          <span className="brand-mark" aria-hidden="true">
            <svg viewBox="0 0 24 24" width="22" height="22"><path d="M4 19V5a1 1 0 0 1 1-1h11l4 4v11a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1Z" fill="none" stroke="currentColor" strokeWidth="1.5"/><path d="M9 9h6M9 13h6M9 17h4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/></svg>
          </span>
          <span className="brand-name">Shannon<span className="brand-dot">·</span>Learning</span>
        </div>
        <button className="icon-btn close-mobile" onClick={onCloseMobile} aria-label="Close menu">
          <svg viewBox="0 0 24 24" width="18" height="18"><path d="M6 6l12 12M18 6L6 18" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/></svg>
        </button>
      </div>

      <button className="new-chat" onClick={onNew}>
        <svg viewBox="0 0 24 24" width="16" height="16"><path d="M12 5v14M5 12h14" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/></svg>
        <span>New conversation</span>
        <kbd>⌘K</kbd>
      </button>

      <div className="search">
        <svg viewBox="0 0 24 24" width="14" height="14"><circle cx="11" cy="11" r="6" fill="none" stroke="currentColor" strokeWidth="1.5"/><path d="m20 20-3.5-3.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/></svg>
        <input
          placeholder="Search conversations"
          value={query}
          onChange={(e) => setQuery(e.target.value)}
        />
      </div>

      <div className="sidebar-scroll">
        {Object.entries(groups).map(([date, list]) => (
          <div className="side-section" key={date}>
            <div className="side-section-h">{date}</div>
            {list.map(c => (
              <ConvoRow key={c.id} convo={c} active={c.id === activeId} onClick={() => onOpen(c.id)} />
            ))}
          </div>
        ))}

        {filtered.length === 0 && query && (
          <div className="side-empty">No conversations match "{query}".</div>
        )}
        {convos.length === 0 && !query && (
          <div className="side-empty">No conversations yet.</div>
        )}
      </div>

      <div className="sidebar-foot">
        <button className="foot-link" onClick={onHistory}>
          <svg viewBox="0 0 24 24" width="15" height="15"><circle cx="12" cy="12" r="8" fill="none" stroke="currentColor" strokeWidth="1.4"/><path d="M12 8v4l3 2" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/></svg>
          All history
        </button>
        <button className="foot-link" onClick={onSettings}>
          <svg viewBox="0 0 24 24" width="15" height="15"><circle cx="12" cy="12" r="3" fill="none" stroke="currentColor" strokeWidth="1.4"/><path d="M12 3v2M12 19v2M3 12h2M19 12h2M5.6 5.6l1.4 1.4M17 17l1.4 1.4M5.6 18.4 7 17M17 7l1.4-1.4" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/></svg>
          Settings
        </button>
        <button className="foot-link account" onClick={onSettings}>
          <span className="avatar">S</span>
          <span className="account-name">Local Vertex AI</span>
          <span className="plan-pill">Ready</span>
        </button>
      </div>
    </aside>
  );
}

function ConvoRow({ convo, active, onClick }) {
  return (
    <button className={"convo-row " + (active ? "active" : "")} onClick={onClick}>
      <span className="convo-title">{convo.title}</span>
    </button>
  );
}

window.Sidebar = Sidebar;