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

// ===================== TOP BAR =====================
function TopBar({ screen, activeConvo, model, setModel, models = window.MODELS, onMobileMenu, onShortcuts, tweaks, setTweaks, onToggleSidebar }) {
  const [modelOpen, setModelOpen] = useState(false);
  const ref = useRef();
  useEffect(() => {
    const onClick = (e) => { if (ref.current && !ref.current.contains(e.target)) setModelOpen(false); };
    window.addEventListener("mousedown", onClick);
    return () => window.removeEventListener("mousedown", onClick);
  }, []);
  const cur = models.find(m => m.id === model) || models[0] || { label: "Model", glyph: "●", sub: "" };

  return (
    <header className="topbar">
      <button className="icon-btn mobile-menu" onClick={onMobileMenu} aria-label="Open menu">
        <svg viewBox="0 0 24 24" width="20" height="20"><path d="M4 7h16M4 12h16M4 17h16" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/></svg>
      </button>

      <button className="icon-btn sidebar-toggle" onClick={onToggleSidebar} aria-label={tweaks.sidebarVisible ? "Collapse sidebar" : "Expand sidebar"} title={tweaks.sidebarVisible ? "Collapse sidebar" : "Expand sidebar"}>
        {tweaks.sidebarVisible
          ? <svg viewBox="0 0 24 24" width="18" height="18"><rect x="3" y="4" width="18" height="16" rx="2" fill="none" stroke="currentColor" strokeWidth="1.5"/><path d="M9 4v16" stroke="currentColor" strokeWidth="1.5"/><path d="M14 9l-2 3 2 3" stroke="currentColor" strokeWidth="1.5" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
          : <svg viewBox="0 0 24 24" width="18" height="18"><rect x="3" y="4" width="18" height="16" rx="2" fill="none" stroke="currentColor" strokeWidth="1.5"/><path d="M9 4v16" stroke="currentColor" strokeWidth="1.5"/><path d="M12 9l2 3-2 3" stroke="currentColor" strokeWidth="1.5" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>}
      </button>

      <div className="topbar-title">
        {screen === "chat" && (activeConvo
          ? <><span className="crumb">Chat</span><span className="crumb-sep">/</span><span>{activeConvo.title}</span></>
          : <><span className="crumb">Chat</span><span className="crumb-sep">/</span><span className="crumb-muted">New conversation</span></>)}
        {screen === "settings" && <><span className="crumb">Settings</span></>}
        {screen === "history"  && <><span className="crumb">All history</span></>}
        {screen === "login"    && <><span className="crumb">Sign in</span></>}
      </div>

      <div className="topbar-right">
        {screen === "chat" && (
          <div className="model-picker" ref={ref}>
            <button className="model-btn" onClick={() => setModelOpen(v => !v)}>
              <span className="model-glyph">{cur.glyph}</span>
              <span className="model-label">{cur.label}</span>
              <svg viewBox="0 0 24 24" width="12" height="12"><path d="M6 9l6 6 6-6" stroke="currentColor" strokeWidth="1.6" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
            </button>
            {modelOpen && (
              <div className="model-menu">
                <div className="model-menu-h">Model</div>
                {models.map(m => (
                  <button key={m.id} className={"model-opt " + (m.id === model ? "selected" : "")} onClick={() => { setModel(m.id); setModelOpen(false); }}>
                    <span className="model-glyph">{m.glyph}</span>
                    <span className="model-opt-text">
                      <span className="model-opt-label">{m.label}</span>
                      <span className="model-opt-sub">{m.sub}</span>
                    </span>
                    {m.id === model && <svg viewBox="0 0 24 24" width="14" height="14"><path d="M5 13l4 4 10-10" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>}
                  </button>
                ))}
              </div>
            )}
          </div>
        )}

        <button className="icon-btn theme-toggle" onClick={() => setTweaks("dark", !tweaks.dark)} aria-label="Toggle theme">
          {tweaks.dark
            ? <svg viewBox="0 0 24 24" width="17" height="17"><circle cx="12" cy="12" r="4" fill="none" stroke="currentColor" strokeWidth="1.5"/><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.5" strokeLinecap="round"/></svg>
            : <svg viewBox="0 0 24 24" width="17" height="17"><path d="M21 13A8.5 8.5 0 1 1 11 3a7 7 0 0 0 10 10Z" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round"/></svg>}
        </button>
        <button className="icon-btn" onClick={onShortcuts} aria-label="Shortcuts">
          <svg viewBox="0 0 24 24" width="17" height="17"><rect x="3" y="6" width="18" height="12" rx="2" fill="none" stroke="currentColor" strokeWidth="1.4"/><path d="M7 10h.5M11 10h.5M15 10h.5M7 14h10" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/></svg>
        </button>
      </div>
    </header>
  );
}

window.TopBar = TopBar;
window.MODELS = [
  { id: "smart",     label: "Gemini 3 Flash Preview",   sub: "Fast general chat and everyday reasoning",   glyph: "●" },
  { id: "reasoning", label: "Gemini 3.1 Pro Preview",   sub: "Deep reasoning, coding, and complex analysis", glyph: "◉" },
];

window.THINKING_LEVELS = [
  { id: "auto",    label: "Auto",    sub: "Let Gemini choose dynamically" },
  { id: "minimal", label: "Minimal", sub: "Lowest latency; Flash only" },
  { id: "low",     label: "Low",     sub: "Lower cost and latency" },
  { id: "medium",  label: "Medium",  sub: "Balanced reasoning" },
  { id: "high",    label: "High",    sub: "Maximum reasoning depth" },
];