/* ========================================================================
   chrome.jsx — Sidebar, Topbar, App shell
   ====================================================================== */

function Sidebar() {
  const { route, go, navOpen, setNavOpen, currentProject } = React.useContext(AppCtx);
  return (
    <aside className="sidebar dark-scroll">
      <div className="brand">
        <div className="brand-mark">
          <BoltMark size={20} color="var(--yellow-ink)" slice="var(--yellow)" />
        </div>
        <div style={{ minWidth: 0, flex: 1 }}>
          <div className="brand-name" style={{ fontFamily: "Anton, Impact, sans-serif", letterSpacing: "0.04em", fontSize: 18 }}>BOLT<span style={{ color: "var(--yellow)" }}>KIT</span></div>
          <div className="brand-sub">AI launch packs</div>
        </div>
        <button className="icon-btn mobile-only" onClick={() => setNavOpen(false)} style={{ color: "var(--nav-muted)" }}>
          <Icon name="close" size={16} stroke={2} />
        </button>
      </div>

      <nav style={{ flex: 1, overflowY: "auto", padding: "6px 0 16px" }}>
        {NAV.map(group => (
          <div key={group.section} className="nav-section">
            <div className="nav-section-label">{group.section}</div>
            <div className="nav-list">
              {group.items.map(item => (
                <button
                  key={item.id}
                  className={"nav-item" + (route === item.id ? " active" : "")}
                  onClick={() => go(item.id)}
                >
                  <Icon name={item.icon} size={16} stroke={2} style={{ color: "inherit" }} className="nav-ico" />
                  <span>{item.label}</span>
                  {item.count != null && <span className="nav-count">{item.count}</span>}
                </button>
              ))}
            </div>
          </div>
        ))}
      </nav>

      <div className="sidebar-footer">
        <button className="workspace-card" onClick={() => go("settings")} style={{ width: "100%", textAlign: "left" }}>
          <div className="avatar">JC</div>
          <div className="meta">
            <div className="nm">Jamie Chen</div>
            <div className="sm">Solo workspace · Pro</div>
          </div>
          <Icon name="chevron_right" size={14} stroke={2} style={{ color: "var(--nav-muted)" }} />
        </button>
      </div>
    </aside>
  );
}

function ProjectMenu() {
  const { currentProject, currentProjectId, setCurrentProjectId, showToast, go } = React.useContext(AppCtx);
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    if (!open) return;
    const close = () => setOpen(false);
    window.addEventListener("click", close);
    return () => window.removeEventListener("click", close);
  }, [open]);
  return (
    <div style={{ position: "relative" }} onClick={e => e.stopPropagation()}>
      <button className="project-pill" onClick={() => setOpen(o => !o)}>
        <AppIcon project={currentProject} size={26} rounded="7px" />
        <span className="lbl">{currentProject.name}</span>
        <Icon name="chevron_down" size={14} stroke={2.2} style={{ color: "var(--fg-muted)" }} />
      </button>
      {open && (
        <div className="card" style={{ position: "absolute", top: "calc(100% + 8px)", left: 0, width: 320, zIndex: 50, boxShadow: "var(--shadow-lg)" }}>
          <div className="card-pad" style={{ paddingBottom: 8 }}>
            <div className="text-xs uppercase muted" style={{ letterSpacing: "0.14em", fontWeight: 800 }}>Switch project</div>
          </div>
          <div style={{ maxHeight: 320, overflowY: "auto", padding: "0 8px 8px" }}>
            {PROJECTS.map(p => (
              <button
                key={p.id}
                onClick={() => { setCurrentProjectId(p.id); setOpen(false); showToast(`Switched to ${p.name}`); }}
                style={{
                  display: "flex", width: "100%", alignItems: "center", gap: 10,
                  padding: "8px 10px", borderRadius: 8,
                  background: p.id === currentProjectId ? "var(--surface-2)" : "transparent",
                }}
              >
                <AppIcon project={p} size={28} rounded="7px" />
                <div style={{ flex: 1, textAlign: "left", minWidth: 0 }}>
                  <div className="fw-7 text-sm" style={{ whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{p.name}</div>
                  <div className="text-xs muted" style={{ whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{p.tagline}</div>
                </div>
                <Pill variant={p.statusVariant}>{p.status}</Pill>
              </button>
            ))}
          </div>
          <div className="hr" />
          <div className="card-pad" style={{ paddingTop: 10 }}>
            <Btn variant="dark" size="sm" icon="plus" onClick={() => { setOpen(false); go("wizard"); }}>New project</Btn>
          </div>
        </div>
      )}
    </div>
  );
}

function Topbar() {
  const { go, setNavOpen, generating, runGeneration, currentProject, setCurrentProjectId, setSelectedPackForOutput, showToast } = React.useContext(AppCtx);
  const quickPack = PACK_TYPES.find(pack => pack.id === "social") || PACK_TYPES[0];
  const [query, setQuery] = React.useState("");
  const [searchOpen, setSearchOpen] = React.useState(false);
  const [notificationsOpen, setNotificationsOpen] = React.useState(false);
  const searchRef = React.useRef(null);
  const searchResults = React.useMemo(() => {
    const q = query.trim().toLowerCase();
    const pages = NAV.flatMap(group => group.items.map(item => ({
      id: `page-${item.id}`,
      label: item.label,
      sub: group.section,
      icon: item.icon,
      action: () => go(item.id),
    })));
    const projects = PROJECTS.map(project => ({
      id: `project-${project.id}`,
      label: project.name,
      sub: project.tagline || project.url || "Project",
      icon: "folder",
      action: () => { setCurrentProjectId(project.id); go("overview"); },
    }));
    const packs = PACK_TYPES.map(pack => ({
      id: `pack-${pack.id}`,
      label: pack.name,
      sub: pack.desc,
      icon: pack.icon,
      action: () => { setSelectedPackForOutput(pack.id); go("generate"); },
    }));
    const prompts = [...CLAUDE_PROMPTS.map(p => ({ ...p, route: "claude-prompts", icon: "sparkle" })), ...CODEX_PROMPTS.map(p => ({ ...p, route: "codex-prompts", icon: "code" }))].map(prompt => ({
      id: `prompt-${prompt.route}-${prompt.name}`,
      label: prompt.name,
      sub: prompt.purpose || prompt.stack || "Prompt pack",
      icon: prompt.icon,
      action: () => go(prompt.route),
    }));
    const all = [...pages, ...projects, ...packs, ...prompts];
    return (q ? all.filter(item => `${item.label} ${item.sub}`.toLowerCase().includes(q)) : all).slice(0, 9);
  }, [query, go, setCurrentProjectId, setSelectedPackForOutput]);
  const pick = (item) => {
    item.action();
    setQuery("");
    setSearchOpen(false);
    showToast(`Opened ${item.label}`);
  };
  React.useEffect(() => {
    const onKey = (event) => {
      if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") {
        event.preventDefault();
        setSearchOpen(true);
        setTimeout(() => searchRef.current?.focus(), 0);
      }
      if (event.key === "Escape") setSearchOpen(false);
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, []);
  return (
    <header className="topbar">
      <button className="icon-btn mobile-only" onClick={() => setNavOpen(true)}>
        <Icon name="menu" size={18} stroke={2} />
      </button>

      <ProjectMenu />

      <div className="search desktop-only hide-mobile" style={{ position: "relative" }}>
        <Icon name="search" size={15} stroke={2} style={{ color: "var(--fg-subtle)" }} />
        <input
          ref={searchRef}
          placeholder="Search projects, packs, prompts…"
          value={query}
          onFocus={() => setSearchOpen(true)}
          onChange={event => { setQuery(event.target.value); setSearchOpen(true); }}
          onKeyDown={event => {
            if (event.key === "Enter" && searchResults[0]) pick(searchResults[0]);
          }}
        />
        <span className="kbd">⌘K</span>
        {searchOpen && (
          <div className="command-menu" onMouseDown={event => event.preventDefault()}>
            <div className="command-head">
              <span>{query ? `Results for "${query}"` : "Quick jump"}</span>
              <button onClick={() => setSearchOpen(false)}><Icon name="close" size={13} /></button>
            </div>
            {searchResults.length === 0 ? (
              <div className="command-empty">No matches. Try a project, pack, prompt or page name.</div>
            ) : searchResults.map((item, index) => (
              <button key={item.id} className="command-item" onClick={() => pick(item)}>
                <span className="command-icon"><Icon name={item.icon} size={15} /></span>
                <span className="command-copy">
                  <b>{item.label}</b>
                  <small>{item.sub}</small>
                </span>
                {index === 0 && <span className="command-enter">Enter</span>}
              </button>
            ))}
          </div>
        )}
      </div>

      <div className="row gap-8 right">
        <Btn variant="secondary" size="sm" icon="download" onClick={() => go("exports")}>Export</Btn>
        <Btn
          variant="primary"
          size="sm"
          icon="sparkle"
          onClick={() => runGeneration(quickPack)}
          disabled={!!generating}
        >
          Quick Generate
        </Btn>
        <div style={{ position: "relative" }}>
          <IconBtn icon="bell" title="Notifications" onClick={() => setNotificationsOpen(v => !v)} />
          <span className="notify-dot" />
          {notificationsOpen && (
            <div className="notify-menu">
              <div className="command-head">
                <span>Launch Activity</span>
                <button onClick={() => setNotificationsOpen(false)}><Icon name="close" size={13} /></button>
              </div>
              {[
                ["Full Launch Pack ready", `${currentProject.name} has exportable content waiting`, "sparkle"],
                ["Usage refreshed", "Demo workspace has 42 mock generations used", "activity"],
                ["Missing assets", "App Store hero video is still recommended", "alert"],
              ].map(([title, sub, icon]) => (
                <button key={title} className="command-item" onClick={() => { setNotificationsOpen(false); icon === "alert" ? go("assets") : go("outputs"); }}>
                  <span className="command-icon"><Icon name={icon} size={15} /></span>
                  <span className="command-copy"><b>{title}</b><small>{sub}</small></span>
                </button>
              ))}
            </div>
          )}
        </div>
        <div className="avatar-circle" title="Jamie Chen">JC</div>
      </div>
    </header>
  );
}

Object.assign(window, { Sidebar, Topbar, ProjectMenu });