// === Main app — orchestrates screens, manages state, wires Tweaks ===
const { useState: uS, useEffect: uE, useRef: uR } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": ["#00f0ff", "#ff2bd6", "#c6ff3d"],
  "intensity": 1,
  "showHud": true,
  "tickerOn": true,
  "verdictIdx": 0,
  "tone": "playful"
}/*EDITMODE-END*/;

const ROUTE_SCREENS = new Set(['landing', 'mindmap', 'updates']);

function getInitialScreen() {
  const screen = new URLSearchParams(window.location.search).get('screen');
  return ROUTE_SCREENS.has(screen) ? screen : 'landing';
}

function App() {
  const [tweaks, setTweak] = window.useTweaks(TWEAK_DEFAULTS);
  const [screen, _setScreen] = uS(getInitialScreen); // landing | matchmaking | results | profile | h2h | updates | mindmap
  const screenRef = uR(screen);
  const [prevScreen, setPrevScreen] = uS('landing');
  const setScreen = (s) => { _setScreen(prev => { if (prev !== s) setPrevScreen(prev); return s; }); };
  const [query, setQuery] = uS('');
  const [useCase, setUseCase] = uS(null);
  const [contenders, setContenders] = uS([]);
  const [routeLookupPending, setRouteLookupPending] = uS(false);
  const [matchmakingComplete, setMatchmakingComplete] = uS(false);
  const [submitPending, setSubmitPending] = uS(false);
  const submitPendingRef = uR(false);
  const [activeTool, setActiveTool] = uS(null);
  const [compareLeft, setCompareLeft] = uS(null);
  const [compareRight, setCompareRight] = uS(null);
  const [mapPath, setMapPath] = uS([]);

  // Apply theme palette
  uE(() => {
    const root = document.documentElement;
    if (tweaks.palette?.[0]) root.style.setProperty('--cyan', tweaks.palette[0]);
    if (tweaks.palette?.[1]) root.style.setProperty('--magenta', tweaks.palette[1]);
    if (tweaks.palette?.[2]) root.style.setProperty('--lime', tweaks.palette[2]);
  }, [tweaks.palette]);

  uE(() => {
    screenRef.current = screen;
  }, [screen]);

  uE(() => {
    const resetTransientSearch = (event) => {
      if (!event.persisted) return;
      if (screenRef.current !== 'matchmaking' && !submitPendingRef.current) return;

      setQuery('');
      setUseCase(null);
      setContenders([]);
      setRouteLookupPending(false);
      setMatchmakingComplete(false);
      submitPendingRef.current = false;
      setSubmitPending(false);
      setPrevScreen('landing');
      _setScreen('landing');
    };

    window.addEventListener('pageshow', resetTransientSearch);
    return () => window.removeEventListener('pageshow', resetTransientSearch);
  }, []);

  const getLocalUseCase = (q) => {
    // Match query to use case (loose contains match)
    const lc = q.toLowerCase();
    let uc = window.USE_CASES.find(u => lc.includes(u.q.split(' ')[0]) || lc.includes(u.cat));
    if (uc) return uc;

    // keyword fallback
    const map = [
      ['cod', 'coding'], ['ide', 'coding'], ['program', 'coding'],
      ['meet', 'meetings'], ['transcr', 'meetings'], ['note', 'meetings'],
      ['local', 'local'], ['privat', 'local'], ['offline', 'local'], ['llm', 'local'],
      ['video', 'video'], ['market', 'video'], ['reel', 'video'],
      ['legal', 'legal'], ['contract', 'legal'], ['document', 'legal'],
      ['chat', 'chat'], ['assist', 'chat'],
    ];
    const hit = map.find(([k]) => lc.includes(k));
    return window.USE_CASES.find(u => u.cat === (hit ? hit[1] : 'chat'));
  };

  const goToLocalResults = (uc, cont) => {
    setUseCase(uc);
    setContenders(cont);
    submitPendingRef.current = false;
    setSubmitPending(false);
    setMatchmakingComplete(false);
    setRouteLookupPending(false);
    setScreen('matchmaking');
  };

  const submitQuery = (q) => {
    const uc = getLocalUseCase(q);
    const cont = window.TOOLS.filter(t => t.cat === uc.cat).slice(0, 4);
    setQuery(q);

    const routeLookup = window.findRecommendedUseCaseRoute?.(q);

    // Without a recommender we stay in the prototype and show the local
    // comparison. That path has no refinement questions, so the analysing
    // transition still belongs in front of those local results.
    if (!routeLookup) {
      goToLocalResults(uc, cont);
      return;
    }

    // With a recommender, jump straight to the guided refinement questions.
    // Show a lightweight pending state on the landing for instant feedback
    // while the canonical use case resolves. The analysing animation now runs
    // after the questions, on the refine page, not before them.
    submitPendingRef.current = true;
    setSubmitPending(true);
    routeLookup.then((route) => {
      if (route?.slug) {
        window.parent.location.href = `/use-case/${route.slug}/refine?q=${encodeURIComponent(String(q || '').trim())}`;
        return;
      }
      goToLocalResults(uc, cont);
    }).catch(() => {
      goToLocalResults(uc, cont);
    });
  };

  uE(() => {
    if (matchmakingComplete && !routeLookupPending) {
      setScreen('results');
    }
  }, [matchmakingComplete, routeLookupPending]);

  const onMatchmakingDone = () => setMatchmakingComplete(true);
  const openTool = (t) => { setActiveTool(t); setScreen('profile'); };
  const compareWith = (t) => {
    setCompareLeft(t);
    const opp = window.TOOLS.find(o => o.cat === t.cat && o.id !== t.id) || window.TOOLS[0];
    setCompareRight(opp);
    setScreen('h2h');
  };
  const compareTwo = (a, b) => {
    setCompareLeft(a);
    setCompareRight(b);
    setScreen('h2h');
  };

  const goLanding = () => setScreen('landing');

  return (
    <div className="app">
      <Chrome screen={screen} onNav={(s) => setScreen(s)} />
      {screen === 'landing' && <Landing onSubmit={submitQuery} verdictIdx={tweaks.verdictIdx || 0} pending={submitPending} />}
      {screen === 'matchmaking' && <Matchmaking query={query} useCase={useCase} onDone={onMatchmakingDone} />}
      {screen === 'results' && <Compare useCase={useCase} contenders={contenders} onOpenTool={openTool} onCompareTwo={compareTwo} onBack={goLanding} />}
      {screen === 'profile' && activeTool && <ToolProfile tool={activeTool} onBack={() => setScreen(prevScreen === 'profile' ? 'landing' : prevScreen)} backLabel={prevScreen === 'mindmap' ? 'BACK TO MAP' : prevScreen === 'h2h' ? 'BACK TO COMPARISON' : prevScreen === 'updates' ? 'BACK TO UPDATES' : prevScreen === 'results' ? 'BACK TO COMPARISON' : 'BACK'} onCompare={compareWith} />}
      {screen === 'h2h' && compareLeft && compareRight && <HeadToHead left={compareLeft} right={compareRight} onBack={() => setScreen('results')} onSetSide={() => {}} onOpenTool={openTool} />}
      {screen === 'updates' && <Updates onBack={goLanding} onOpenTool={openTool} />}
      {screen === 'mindmap' && <MindMap onBack={goLanding} onOpenTool={openTool} path={mapPath} setPath={setMapPath} />}

      {tweaks.tickerOn && !['landing', 'matchmaking'].includes(screen) && <Ticker />}
      <AppTweaks tweaks={tweaks} setTweak={setTweak} />
    </div>
  );
}

function Chrome({ screen, onNav }) {
  return (
    <div className="chrome">
      <div className="chrome__logo" onClick={() => onNav('landing')}>
        <div className="chrome__logo-mark">⌬</div>
        <div className="chrome__logo-text">
          toomany<b>aitools</b>.com
        </div>
      </div>
      <nav className="chrome__nav">
        <button className={screen === 'landing' ? 'is-active' : ''} onClick={() => onNav('landing')}>HOME</button>
        <button className={screen === 'mindmap' ? 'is-active' : ''} onClick={() => onNav('mindmap')}>THE MAP</button>
        <button className={screen === 'updates' ? 'is-active' : ''} onClick={() => onNav('updates')}>WHAT MOVED</button>
        <button onClick={() => alert('Coming soon')}>RANKINGS</button>
      </nav>
      <div className="chrome__meta">
        <div className="chrome__legal">
          <a href="/privacy" target="_parent">PRIVACY</a>
          <a href="/terms" target="_parent">TERMS</a>
        </div>
        <div className="chrome__live">CATALOG · LIVE</div>
      </div>
    </div>
  );
}

function Ticker() {
  const items = window.UPDATES.concat(window.UPDATES);
  return (
    <div className="ticker">
      <div className="ticker__label">FEED</div>
      <div className="ticker__track">
        {items.map((u, i) => {
          const t = window.TOOLS.find(x => x.name === u.tool);
          return (
            <span key={i} className="ticker__item">
              <span className="ticker__glyph" style={{color: t?.color}}>{t?.emoji}</span>
              <b>{u.tool}</b> {u.what} <span className="ticker__time">· {u.when}</span>
              <span className="ticker__sep">◆</span>
            </span>
          );
        })}
      </div>
    </div>
  );
}

function AppTweaks({ tweaks, setTweak }) {
  return (
    <window.TweaksPanel title="TWEAKS">
      <window.TweakSection label="THEME">
        <window.TweakColor
          label="Palette"
          value={tweaks.palette}
          onChange={(v) => setTweak('palette', v)}
          options={[
            ['#00f0ff', '#ff2bd6', '#c6ff3d'],
            ['#ff7a00', '#ff2bd6', '#ffe14a'],
            ['#3affb6', '#9d4dff', '#ff5c8a'],
            ['#ffffff', '#00f0ff', '#ff2bd6'],
          ]}
        />
      </window.TweakSection>
      <window.TweakSection label="MOTION + UI">
        <window.TweakToggle label="Background grid intensity" value={tweaks.intensity > 0.5} onChange={(v) => setTweak('intensity', v ? 1 : 0.3)} />
        <window.TweakToggle label="Live ticker" value={tweaks.tickerOn} onChange={(v) => setTweak('tickerOn', v)} />
        <window.TweakToggle label="Corner HUD on landing" value={tweaks.showHud} onChange={(v) => setTweak('showHud', v)} />
      </window.TweakSection>
      <window.TweakSection label="VERDICT OF THE DAY">
        <window.TweakSelect
          label="Headline"
          value={tweaks.verdictIdx}
          onChange={(v) => setTweak('verdictIdx', +v)}
          options={window.VERDICTS.map((v, i) => ({ value: i, label: v.headline }))}
        />
      </window.TweakSection>
    </window.TweaksPanel>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);