/* global React, ReactDOM, TopBar, Header, Home, VideoPage, AboutPage,
          TweaksPanel, useTweaks, TweakSection, TweakRadio, TweakSelect, TweakToggle */

// =============== DATA ====================================================
const CURATED = /*__DATA_PLACEHOLDER__*/ window.__PG_DATA__;

// =============== APP =====================================================
const DEFAULTS = /*EDITMODE-BEGIN*/{
  "density": "default",
  "accent": "gold",
  "showStatStrip": true,
  "cardStyle": "flat",
  "heroLayout": "sidebar",
  "theme": "light"
}/*EDITMODE-END*/;

function App() {
  const tweaks = useTweaks ? useTweaks(DEFAULTS) : [DEFAULTS, () => {}];
  const [T, setT] = tweaks;

  // expose for external previews / screenshots
  React.useEffect(() => { window.__setHero = (v) => setT('heroLayout', v); }, [setT]);

  const [route, setRoute] = React.useState('home'); // 'home' | 'video' | 'about'
  const [currentVideo, setCurrentVideo] = React.useState(null);
  const [search, setSearch] = React.useState('');

  const openVideo = (v) => {
    setCurrentVideo(v);
    setRoute('video');
    window.scrollTo({ top: 0, behavior: 'instant' });
  };
  const goHome = () => { setRoute('home'); };

  // density on body
  React.useEffect(() => {
    document.body.classList.remove('density-comfy','density-tight');
    if (T.density === 'comfy') document.body.classList.add('density-comfy');
    if (T.density === 'tight') document.body.classList.add('density-tight');
  }, [T.density]);

  // accent
  React.useEffect(() => {
    const map = {
      gold:   ['#F5A500', '#C78700'],
      red:    ['#E53935', '#B71C1C'],
      green:  ['#4CAF50', '#2E7D32'],
      cyan:   ['#00ACC1', '#00838F'],
    };
    const [a, b] = map[T.accent] || map.gold;
    document.documentElement.style.setProperty('--pg-gold', a);
    document.documentElement.style.setProperty('--pg-gold-deep', b);
  }, [T.accent]);

  // theme
  React.useEffect(() => {
    document.documentElement.setAttribute('data-theme', T.theme === 'dark' ? 'dark' : 'light');
  }, [T.theme]);

  const toggleTheme = () => setT('theme', T.theme === 'dark' ? 'light' : 'dark');

  return (
    <>
      <TopBar theme={T.theme} onToggleTheme={toggleTheme} />
      <Header
        route={route}
        onNav={(r) => { if (r === 'home') goHome(); else setRoute(r); }}
        search={search}
        setSearch={setSearch}
        onSearch={()=>{}}
      />
      {route === 'home' && (
        <Home data={CURATED} onOpen={openVideo} heroLayout={T.heroLayout} />
      )}
      {route === 'video' && (
        <div className="page">
          <VideoPage
            video={currentVideo}
            allVideos={[...CURATED.top, ...CURATED.recent, ...Object.values(CURATED.byTopic).flat()]}
            onBack={goHome}
            onOpen={openVideo}
          />
        </div>
      )}
      {route === 'about' && <AboutPage />}

      <footer className="pg-footer">
        <div className="pg-footer__row">
          <div>
            <strong style={{color:'var(--pg-ink)'}}>PaulosGarage.com</strong> · portal de conhecimento automotivo DIY · conteúdo do canal {' '}
            <a href="https://youtube.com/PaulosGarage">youtube.com/PaulosGarage</a>
          </div>
          <div className="pg-footer__links">
            <a href="#">Sobre</a>
            <a href="#">Contato</a>
            <a href="#">RSS</a>
            <a href="#">Créditos</a>
          </div>
        </div>
        <div style={{maxWidth:1360,margin:'10px auto 0',fontFamily:'var(--font-mono)',fontSize:10,letterSpacing:'0.1em',textTransform:'uppercase',color:'var(--pg-gray-3)'}}>
          BUILD · DESKTOP-FIRST · PAGEFIND · TUCHO v0.1
        </div>
      </footer>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Layout do Hero">
          <TweakRadio
            value={T.heroLayout}
            options={[
              { value: 'sidebar',  label: 'Jornada dominante + lista lateral ★' },
              { value: 'carousel', label: 'Carrossel duplo' },
              { value: 'strip',    label: 'Faixa horizontal única' },
            ]}
            onChange={(v) => setT('heroLayout', v)}
          />
        </TweakSection>
        <TweakSection label="Tema">
          <TweakRadio
            value={T.theme}
            options={[
              { value: 'light', label: 'Claro (manual técnico)' },
              { value: 'dark',  label: 'Escuro (oficina noturna)' },
            ]}
            onChange={(v) => setT('theme', v)}
          />
        </TweakSection>
        <TweakSection label="Acento">
          <TweakRadio
            value={T.accent}
            options={[
              { value: 'gold',  label: 'Ouro (padrão)' },
              { value: 'red',   label: 'Vermelho' },
              { value: 'green', label: 'Verde' },
              { value: 'cyan',  label: 'Ciano' },
            ]}
            onChange={(v) => setT('accent', v)}
          />
        </TweakSection>
        <TweakSection label="Densidade">
          <TweakRadio
            value={T.density}
            options={[
              { value: 'tight',   label: 'Compacta (Yahoo 2005)' },
              { value: 'default', label: 'Padrão (manual técnico)' },
              { value: 'comfy',   label: 'Confortável' },
            ]}
            onChange={(v) => setT('density', v)}
          />
        </TweakSection>
        <TweakSection label="Faixa de estatísticas">
          <TweakToggle
            checked={T.showStatStrip}
            label="Mostrar"
            onChange={(v) => setT('showStatStrip', v)}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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