/* global React, ReactDOM, Nav, Footer, Home, About, Team, BlogPost, BlogIndex, Guide, Waitlist, Privacy, Terms,
          useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakColor, TweakSlider, CursorRing */
const { useState, useEffect } = React;

const PALETTES = {
  lavender: ['#F1ECDD', '#FAF6EC', '#C9C2DC', '#E8DCC9', '#221F1A'],
  blush:    ['#F5EFE6', '#FBF6EE', '#E5C5C9', '#E8DCC9', '#2A2520'],
  sage:     ['#ECE7D5', '#F8F5E8', '#B8C5A6', '#E0D8C0', '#1F1B17'],
  cool:     ['#EDEAE0', '#F7F5EC', '#B8C5D6', '#D9D2C4', '#1E1F22'],
};

function App(){
  const [t, setTweak] = useTweaks(window.AYLA_TWEAKS);
  const [route, setRouteState] = useState(() =>
    window.AylaRouter.routeFromPath(window.location.pathname)
  );
  useEffect(() => {
    window.AylaRouter.setupHistory(setRouteState);
  }, []);

  const setRoute = (next, options) => {
    window.AylaRouter.navigate(next, setRouteState, options);
  };

  // apply palette tokens
  useEffect(()=>{
    const [g, iv, lav, rose, ink] = t.palette;
    const root = document.documentElement;
    root.style.setProperty('--ground', g);
    root.style.setProperty('--ivory',  iv);
    root.style.setProperty('--lavender', lav);
    root.style.setProperty('--rose',   rose);
    root.style.setProperty('--ink',    ink);
    root.style.setProperty('--nav-logo-inset', `${t.navLogoInset}px`);
    root.setAttribute('data-motion', t.motion);
  }, [t.palette, t.motion, t.navLogoInset]);

  // page-change scroll reset + re-trigger reveal animations after route change
  useEffect(() => {
    const hash = window.location.hash;
    const scrollPage = () => {
      if (hash && window.AylaRouter?.scrollToHash(hash, false)) return;
      window.scrollTo({ top: 0, left: 0, behavior: 'auto' });
    };
    scrollPage();
    requestAnimationFrame(scrollPage);
    setTimeout(() => {
      document.querySelectorAll('.reveal').forEach((el) => el.classList.remove('in'));
    }, 0);
  }, [route]);

  useEffect(() => {
    const { page } = window.AylaRouter.parseRoute(route);
    document.documentElement.classList.toggle('is-home', page === 'home');
    return () => document.documentElement.classList.remove('is-home');
  }, [route]);

  useEffect(() => {
    const { page } = window.AylaRouter.parseRoute(route);
    const isLocalDev = ['localhost', '127.0.0.1'].includes(window.location.hostname);
    if ((page === 'guide' || page === 'pcos-guide') && !isLocalDev) {
      window.AylaRouter.navigate('waitlist', setRouteState, { replace: true });
    }
  }, [route]);

  const { page: routePage, slug: routeSlug } = window.AylaRouter.parseRoute(route);

  let page;
  if (routePage === 'home')              page = <Home setRoute={setRoute}/>;
  else if (routePage === 'about')        page = <About setRoute={setRoute}/>;
  else if (routePage === 'team')         page = <Team setRoute={setRoute}/>;
  else if (routePage === 'journal')      page = <BlogIndex setRoute={setRoute}/>;
  else if (routePage === 'journal-post') page = <BlogPost setRoute={setRoute} slug={routeSlug || ''}/>;
  else if (routePage === 'guide' || routePage === 'pcos-guide') {
    const isLocalDev = ['localhost', '127.0.0.1'].includes(window.location.hostname);
    page = isLocalDev ? <Guide setRoute={setRoute}/> : <Waitlist setRoute={setRoute}/>;
  }
  else if (routePage === 'waitlist')     page = <Waitlist setRoute={setRoute}/>;
  else if (routePage === 'privacy')      page = <Privacy setRoute={setRoute}/>;
  else if (routePage === 'terms')        page = <Terms setRoute={setRoute}/>;
  else                                   page = <Home setRoute={setRoute}/>;

  return (
    <>
      <CursorRing/>
      <Nav route={route} setRoute={setRoute}/>
      {page}
      <Footer setRoute={setRoute}/>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Palette"/>
        <TweakColor
          label="Mood"
          value={t.palette}
          options={[ PALETTES.lavender, PALETTES.blush, PALETTES.sage, PALETTES.cool ]}
          onChange={(v)=> setTweak('palette', v)}
        />
        <TweakSection label="Motion"/>
        <TweakRadio
          label="Animation"
          value={t.motion}
          options={['quiet','soft','playful']}
          onChange={(v)=> setTweak('motion', v)}
        />
        <TweakSection label="Nav"/>
        <TweakSlider
          label="Logo inset"
          value={t.navLogoInset ?? 20}
          min={0}
          max={80}
          step={1}
          unit="px"
          onChange={(v)=> setTweak('navLogoInset', v)}
        />
        <TweakSection label="Navigate"/>
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:6}}>
          {[
            ['home','Home'],
            ['about','Philosophy'],
            ['team','Founders'],
            ['journal','Journal'],
            ['journal-post:why-your-healthy-routine-might-be-hurting-your-hormones','Latest blog'],
            ['waitlist','Waitlist'],
          ].map(([id,label])=>(
            <button key={id}
              onClick={()=> setRoute(id, { smoothScroll: true })}
              style={{
                padding:'8px 10px', fontSize:11, borderRadius:8,
                border:'1px solid rgba(34,31,26,.15)',
                background: route===id || route.startsWith(id+':') ? '#221F1A' : 'transparent',
                color: route===id || route.startsWith(id+':') ? '#FAF6EC' : '#221F1A',
                cursor:'pointer'
              }}>{label}</button>
          ))}
        </div>
      </TweaksPanel>
    </>
  );
}

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