// app.jsx — main marketplace prototype shell

const { useState: useStateA, useEffect: useEffectA, useMemo: useMemoA, useCallback: useCallbackA } = React;

function App() {
  const [route, setRoute] = useStateA({ name: "home", params: {} });
  const [query, setQuery] = useStateA("");
  const [cmdOpen, setCmdOpen] = useStateA(false);
  const [installSkill, setInstallSkill] = useStateA(null);
  const [installedSet, setInstalledSet] = useStateA(() => new Set(INSTALLED_IDS));
  const [savedSet, setSavedSet] = useStateA(() => new Set(SAVED_IDS));
  const [teamMode, setTeamMode] = useStateA(false);
  const [tweaks, setTweak] = useTweaks(/*EDITMODE-BEGIN*/{
    "accent": "#10413B",
    "density": "regular",
    "homeHero": "search-first",
    "showTrustStrip": true,
    "showTeamsBlock": true,
    "cornerRadius": 10
  }/*EDITMODE-END*/);

  // Apply tweaks to root
  useEffectA(() => {
    const root = document.documentElement;
    root.style.setProperty("--accent", tweaks.accent);
    // soft accent
    root.style.setProperty("--accent-soft", hexToSoft(tweaks.accent));
    root.style.setProperty("--r-3", tweaks.cornerRadius + "px");
    root.style.setProperty("--r-4", (tweaks.cornerRadius + 2) + "px");
  }, [tweaks]);

  // External drive (canvas)
  useEffectA(() => {
    window.__driveRoute = (r) => {
      if (!r) return;
      if (r.team) setTeamMode(true);
      setRoute({ name: r.name, params: { id: r.id, team: !!r.team } });
    };
  }, []);

  // Cmd+K
  useEffectA(() => {
    function onKey(e) {
      if ((e.metaKey || e.ctrlKey) && e.key === "k") { e.preventDefault(); setCmdOpen(o => !o); }
    }
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, []);

  const onNav = useCallbackA((name, params = {}) => {
    setRoute({ name, params });
    if (params.q) setQuery(params.q);
    window.scrollTo({ top: 0, behavior: "instant" });
  }, []);

  const onOpen = useCallbackA((id, opts = {}) => {
    setRoute({ name: "detail", params: { id, team: opts.team || teamMode } });
    window.scrollTo({ top: 0, behavior: "instant" });
  }, [teamMode]);

  const onInstall = useCallbackA((skill) => {
    setInstallSkill(skill);
  }, []);

  const onInstallConfirm = useCallbackA((skill, action) => {
    setInstalledSet(prev => new Set([...prev, skill.id]));
    setInstallSkill(null);
    if (action === "library") onNav("library");
  }, [onNav]);

  let body = null;
  if (route.name === "home") {
    body = <HomeScreen onOpen={onOpen} onInstall={onInstall} onNav={onNav}
      onOpenSearch={() => setCmdOpen(true)}
      query={query} setQuery={setQuery}
      installedSet={installedSet} savedSet={savedSet}
    />;
  } else if (route.name === "browse") {
    body = <BrowseScreen onOpen={onOpen} onInstall={onInstall}
      query={query} setQuery={setQuery}
      prefilters={route.params}
      installedSet={installedSet}
    />;
  } else if (route.name === "detail") {
    body = <DetailScreen skillId={route.params.id} onOpen={onOpen} onInstall={onInstall} onNav={onNav}
      teamView={route.params.team || teamMode} installedSet={installedSet}
    />;
  } else if (route.name === "library") {
    body = <LibraryScreen onOpen={onOpen} onInstall={onInstall} installedSet={installedSet} savedSet={savedSet} />;
  } else if (route.name === "teams") {
    body = <TeamsScreen onOpen={onOpen} onInstall={onInstall} onNav={onNav} installedSet={installedSet} />;
  } else if (route.name === "collection") {
    body = <CollectionScreen collectionId={route.params.id} onOpen={onOpen} onInstall={onInstall} installedSet={installedSet} onNav={onNav} />;
  } else if (route.name === "publish" || route.name === "studio") {
    body = <CreatorStudio />;
  }

  // Track active route name for top bar
  const routeName = route.name === "collection" ? "home" : (route.name === "detail" ? null : route.name);

  return (
    <div className="app-shell">
      <TopBar
        route={routeName}
        onNav={onNav}
        onOpenSearch={() => setCmdOpen(true)}
        query={query}
      />
      {body}
      <CommandSearch open={cmdOpen} onClose={() => setCmdOpen(false)} onPick={(id) => onOpen(id)} />
      <InstallModal skill={installSkill} open={!!installSkill}
        onClose={() => setInstallSkill(null)}
        onConfirm={onInstallConfirm} />

      <TweaksPanel>
        <TweakSection label="Brand" />
        <TweakColor label="Accent" value={tweaks.accent}
          options={["#10413B","#185A4D","#071C19","#0f1115","#1e5fd6","#5a3fa9"]}
          onChange={(v) => setTweak("accent", v)} />
        <TweakSlider label="Corner radius" value={tweaks.cornerRadius} min={4} max={16} unit="px"
          onChange={(v) => setTweak("cornerRadius", v)} />

        <TweakSection label="Layout" />
        <TweakRadio label="Density" value={tweaks.density}
          options={["compact","regular","comfy"]}
          onChange={(v) => setTweak("density", v)} />
        <TweakSelect label="Home hero" value={tweaks.homeHero}
          options={["search-first","editorial","collection-first"]}
          onChange={(v) => setTweak("homeHero", v)} />
        <TweakToggle label="Trust strip on home" value={tweaks.showTrustStrip}
          onChange={(v) => setTweak("showTrustStrip", v)} />
        <TweakToggle label="Teams CTA on home" value={tweaks.showTeamsBlock}
          onChange={(v) => setTweak("showTeamsBlock", v)} />

        <TweakSection label="Demo" />
        <TweakToggle label="View as workspace admin" value={teamMode}
          onChange={(v) => setTeamMode(v)} />
        <TweakButton label="Reset installed skills" onClick={() => setInstalledSet(new Set(INSTALLED_IDS))} />
      </TweaksPanel>
    </div>
  );
}

function hexToSoft(hex) {
  // simple lighten — convert to rgb, blend with white
  const c = hex.replace("#","");
  const r = parseInt(c.slice(0,2), 16), g = parseInt(c.slice(2,4), 16), b = parseInt(c.slice(4,6), 16);
  const mix = (v) => Math.round(v + (255 - v) * 0.92);
  return `rgb(${mix(r)},${mix(g)},${mix(b)})`;
}

window.App = App;