/* App entry — router, theme, tweaks */
const { useState: aaUseState, useEffect: aaUseEffect } = React;

const THEME_STORAGE_KEY = 'lc.theme';
const initialTheme = (() => {
  try {
    const v = localStorage.getItem(THEME_STORAGE_KEY);
    if (v === 'dark' || v === 'light') return v;
  } catch (e) {}
  try {
    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) return 'dark';
  } catch (e) {}
  return 'light';
})();

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "light",
  "accent": "signal",
  "density": "comfortable"
}/*EDITMODE-END*/;

function App() {
  const route = useRoute();
  const [t, setTweak] = useTweaks({ ...TWEAK_DEFAULTS, theme: initialTheme });

  // Apply theme + persist to localStorage so a refresh keeps the user's choice
  aaUseEffect(() => {
    const theme = t.theme || 'light';
    document.documentElement.setAttribute('data-theme', theme);
    try { localStorage.setItem(THEME_STORAGE_KEY, theme); } catch (e) {}
  }, [t.theme]);

  const toggleTheme = () => setTweak('theme', t.theme === 'dark' ? 'light' : 'dark');

  // Apply accent
  aaUseEffect(() => {
    const map = {
      signal: { light: 'oklch(0.6 0.14 148)', deep: 'oklch(0.42 0.11 148)' },
      ink:    { light: 'oklch(0.55 0.04 250)', deep: 'oklch(0.32 0.04 250)' },
      ember:  { light: 'oklch(0.58 0.16 36)',  deep: 'oklch(0.42 0.14 30)' },
      indigo: { light: 'oklch(0.55 0.16 270)', deep: 'oklch(0.36 0.14 270)' },
    };
    const v = map[t.accent] || map.signal;
    document.documentElement.style.setProperty('--signal', v.light);
    document.documentElement.style.setProperty('--signal-deep', v.deep);
  }, [t.accent]);

  // Density
  aaUseEffect(() => {
    document.documentElement.style.setProperty('--pad', t.density === 'compact' ? 'clamp(16px, 2vw, 28px)' : 'clamp(20px, 3vw, 40px)');
    document.body.style.fontSize = t.density === 'compact' ? '14px' : '15px';
  }, [t.density]);

  const Page = route.name === 'landing'   ? LandingPage
              : route.name === 'dashboard' ? DashboardPage
              : route.name === 'pricing'   ? PricingPage
              : route.name === 'about'     ? AboutPage
              : route.name === 'auth'      ? AuthPage
              : NotFoundPage;

  // hide nav on auth & 404 (auth has own layout, 404 still uses nav for back-nav)
  const hideNav = route.name === 'auth';

  return (
    <div data-screen-label={`${route.name} page`}>
      {!hideNav && <Nav active={route.name} theme={t.theme} onToggleTheme={toggleTheme} />}
      {route.name === 'auth' && (
        <div style={{ position: 'absolute', top: 20, left: 20, zIndex: 40 }}>
          <a href="#/" onClick={(e)=>{e.preventDefault();go('');}} style={{ color: 'var(--paper)', mixBlendMode: 'difference' }}>
            <Logo/>
          </a>
        </div>
      )}
      <Page key={route.slug}/>
      {!hideNav && route.name !== 'dashboard' && <Footer/>}

      <TweaksPanel title="Tweaks">
        <TweakSection label="Theme">
          <TweakRadio label="Mode" value={t.theme} options={['light','dark']} onChange={v => setTweak('theme', v)}/>
        </TweakSection>
        <TweakSection label="Accent">
          <TweakColor label="Signal color" value={t.accent}
            options={['#3a8a5a','#3a4a6e','#b25a32','#5b48b0']}
            onChange={v => {
              const reverse = {'#3a8a5a':'signal','#3a4a6e':'ink','#b25a32':'ember','#5b48b0':'indigo'};
              setTweak('accent', reverse[v] || 'signal');
            }}/>
        </TweakSection>
        <TweakSection label="Density">
          <TweakRadio label="Spacing" value={t.density} options={['comfortable','compact']} onChange={v => setTweak('density', v)}/>
        </TweakSection>
        <TweakSection label="Quick links">
          <div style={{ display:'grid', gap: 4 }}>
            {[['', 'Home'],['dashboard','Dashboard'],['pricing','Pricing'],['about','About'],['login','Sign in'],['signup','Sign up'],['404','404']].map(([p,l]) => (
              <button key={p} onClick={()=>go(p)} style={{textAlign:'left', padding:'5px 8px', border:'1px solid rgba(0,0,0,.12)', background:'transparent', color:'inherit', fontSize:11, cursor:'pointer'}}>
                → {l}
              </button>
            ))}
          </div>
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

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