// --- Main App ---

const DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "green",
  "hero": "arcade",
  "live": true
}/*EDITMODE-END*/;

function App() {
  const [state, setStateRaw] = useState(() => {
    try {
      const saved = JSON.parse(localStorage.getItem('gg_tweaks') || 'null');
      return { ...DEFAULTS, ...(saved || {}) };
    } catch { return { ...DEFAULTS }; }
  });
  const [showGame, setShowGame] = useState(false);
  const [konami, setKonami] = useState(false);

  const setState = useCallback((patch) => {
    setStateRaw(prev => {
      const next = { ...prev, ...patch };
      localStorage.setItem('gg_tweaks', JSON.stringify(next));
      try {
        window.parent.postMessage({ type: '__edit_mode_set_keys', edits: patch }, '*');
      } catch {}
      return next;
    });
  }, []);

  // apply theme
  useEffect(() => {
    document.documentElement.setAttribute('data-theme', state.theme);
  }, [state.theme]);

  // Konami easter egg
  useEffect(() => {
    const seq = ['ArrowUp','ArrowUp','ArrowDown','ArrowDown','ArrowLeft','ArrowRight','ArrowLeft','ArrowRight','b','a'];
    let idx = 0;
    const onKey = (e) => {
      const k = e.key.length === 1 ? e.key.toLowerCase() : e.key;
      if (k === seq[idx]) {
        idx++;
        if (idx === seq.length) {
          idx = 0;
          setKonami(true);
          setTimeout(() => setKonami(false), 3500);
        }
      } else {
        idx = (k === seq[0]) ? 1 : 0;
      }
      // shortcuts
      if (e.key === 'F2') { e.preventDefault(); setShowGame(true); }
      if (e.key === 'Escape') setShowGame(false);
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, []);

  const heroEl = state.hero === 'boot'
    ? <HeroBoot live={state.live} onPlayGame={() => setShowGame(true)} />
    : state.hero === 'tv'
      ? <HeroLivingroom live={state.live} onPlayGame={() => setShowGame(true)} />
      : <HeroArcade live={state.live} onPlayGame={() => setShowGame(true)} />;

  const tickerItems = [
    'GREEKGRANDPA.OS v3.8',
    'STATUS: ΣΤΟ ΚΑΤΕΡΓΟ',
    'STREAMS: ΟΤΑΝ ΓΙΝΕΤΑΙ Η ΦΑΣΟΥΛΑ',
    'ΜΕΝΟΥΝ 27 ΧΡΟΝΙΑ ΓΙΑ ΣΥΝΤΑΞΗ',
    'HI-SCORE ΣΥΝΤΑΞΗ RUSH: ' + (localStorage.getItem('gg_highscore') || 0),
    'DISCORD: ΓΗΡΟΚΟΜΕΙΟ',
    'ΚΑΦΕΣ: ΠΛΗΡΗΣ',
  ];

  return (
    <div className="app flicker">
      <TopBar live={state.live} theme={state.theme} />
      {heroEl}
      <Ticker items={tickerItems} />
      <StatsRow />

      <About />
      <Schedule />
      <Projects />

      <SectionHeader id="vods" kicker="cat ~/vods/latest" title="ΠΡΟΣΦΑΤΟ VOD" />
      <div className="grid grid-2">
        <a className="vod" href={VODS[0].href} target="_blank" rel="noreferrer" style={{textDecoration:'none', color:'inherit'}}>
          <div className="thumb">
            <div className="play"></div>
            <div className="dur">TWITCH</div>
          </div>
          <div className="meta">
            <div className="ttl">{VODS[0].title}</div>
            <div className="sub"><span className="amber">{VODS[0].views}</span> · {VODS[0].when}</div>
          </div>
        </a>
        <ChatReplay />
      </div>

      <Socials />

      <div className="footer">
        <div>© {new Date().getFullYear()} GREEKGRANDPA — μένουν {GRANDPA.years_until_retirement}y ως τη σύνταξη</div>
        <div>press <span className="kbd">F2</span> for mini-game · try the <span className="kbd">konami code</span></div>
      </div>

      {showGame && <MiniGame onClose={() => setShowGame(false)} />}
      {konami && (
        <div className="konami-toast">
          ◉ CHEAT ΕΝΕΡΓΟ: +99 ΚΑΦΕΔΕΣ · ΣΥΝΤΑΞΗ -5Y
        </div>
      )}
    </div>
  );
}

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