/* ==========================================================
   NewsNator — App shell, routing, Tweaks
   ========================================================== */

// ---------- Tweak defaults --------------------
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroLayout": "editorial",
  "bubbleStyle": "packed",
  "navStyle": "left",
  "density": "comfy",
  "accent": "#FF6A00"
}/*EDITMODE-END*/;

// ---------- History API router --------------------
function parsePath() {
  // Backwards-compat: if old #/foo URL hit, treat fragment as path
  let p = location.pathname || '/';
  if (p === '/' && location.hash && location.hash.startsWith('#/')) {
    p = location.hash.slice(1);
  }
  p = p.replace(/\/$/, '') || '/';
  if (p === '/') return { page: 'builders' };
  const parts = p.split('/').filter(Boolean);
  const [seg, p1] = parts;
  if (seg === 'newsletter') return { page: 'newsletter' };
  if (seg === 'makers' && p1) return { page: 'maker', slug: p1 };
  if (seg === 'makers') return { page: 'builders' };
  if (seg === 'builders' && p1) return { page: 'maker', slug: p1 };
  if (seg === 'builders') return { page: 'builders' };
  if (seg === 'tools' && p1) return { page: 'tool', domain: p1 };
  if (seg === 'tools') return { page: 'tools' };
  if (seg === 'trends' && p1) return { page: 'trend', slug: p1 };
  if (seg === 'trends') return { page: 'trends' };
  if (seg === 'archive' && p1) return { page: 'archive-week', yearWeek: p1 };
  if (seg === 'archive') return { page: 'archive' };
  if (seg === 'about') return { page: 'about' };
  if (seg === 'opt-out') return { page: 'optout' };
  if (seg === 'logos') return { page: 'logos' };
  return { page: 'builders' };
}

function navigate(path) {
  // Accept legacy "#/foo" and bare "foo" inputs
  if (path.startsWith('#')) path = path.slice(1);
  if (!path.startsWith('/')) path = '/' + path;
  if (path === location.pathname) return;
  history.pushState({}, '', path);
  window.dispatchEvent(new PopStateEvent('popstate'));
}
window.navigate = navigate;

// Intercept clicks on internal links so they don't trigger a full page reload
document.addEventListener('click', (e) => {
  if (e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
  const a = e.target.closest && e.target.closest('a');
  if (!a || a.tagName !== 'A') return;
  const href = a.getAttribute('href');
  if (!href || !href.startsWith('/')) return;
  if (a.target && a.target !== '_self') return;
  if (a.hasAttribute('download')) return;
  e.preventDefault();
  navigate(href);
});

// ---------- Theme persistence --------------------
function useTheme() {
  const [theme, setTheme] = useState(() => localStorage.getItem('nn_theme') || 'light');
  useEffect(() => {
    document.documentElement.setAttribute('data-theme', theme);
    localStorage.setItem('nn_theme', theme);
  }, [theme]);
  return [theme, setTheme];
}

function useLang() {
  const [lang, setLang] = useState(() => localStorage.getItem('nn_lang') || 'en');
  window.__lang = lang;
  useEffect(() => {
    localStorage.setItem('nn_lang', lang);
    document.documentElement.setAttribute('lang', lang);
  }, [lang]);
  return [lang, setLang];
}

function useRoute() {
  const [route, setRoute] = useState(parsePath());
  useEffect(() => {
    const onPop = () => {
      setRoute(parsePath());
      // scroll top on route change UNLESS there's an in-page #anchor
      if (!location.hash) {
        window.scrollTo({ top: 0, behavior: 'instant' });
      }
    };
    window.addEventListener('popstate', onPop);
    return () => window.removeEventListener('popstate', onPop);
  }, []);
  return route;
}

// ---------- Tweaks panel --------------------
function NewsNatorTweaks() {
  const [t2, setTweak] = useTweaks(TWEAK_DEFAULTS);

  useEffect(() => {
    document.documentElement.style.setProperty('--accent', t2.accent);
    // dark accent stays as a derived value
    if (t2.accent !== TWEAK_DEFAULTS.accent) {
      // Optional: re-derive soft variant
      document.documentElement.style.setProperty('--accent-soft',
        t2.accent + '22');
    }
  }, [t2.accent]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Layout">
        <TweakRadio label="Hero" value={t2.heroLayout} onChange={v => setTweak('heroLayout', v)} options={[
          { value: 'editorial', label: 'Editorial' },
          { value: 'metric',    label: 'Metric-first' },
        ]}/>
        <TweakRadio label="Tool wall" value={t2.bubbleStyle} onChange={v => setTweak('bubbleStyle', v)} options={[
          { value: 'packed', label: 'Bubbles' },
          { value: 'grid',   label: 'Grid' },
        ]}/>
        <TweakRadio label="Density" value={t2.density} onChange={v => setTweak('density', v)} options={[
          { value: 'comfy',   label: 'Comfy' },
          { value: 'compact', label: 'Compact' },
        ]}/>
      </TweakSection>
      <TweakSection title="Brand">
        <TweakColor label="Accent" value={t2.accent} onChange={v => setTweak('accent', v)}
                    options={['#FF6A00','#0E8A6A','#5E6AD2','#7B3AED','#B89149']}/>
      </TweakSection>
      <TweakSection title="Logos">
        <TweakButton onClick={()=>navigate('/logos')}>View 3 logo proposals →</TweakButton>
      </TweakSection>
    </TweaksPanel>
  );
}

// ---------- Top-of-page page transition wrapper ------
function App() {
  const route = useRoute();
  const [theme, setTheme] = useTheme();
  const [lang, setLang] = useLang();
  const [subscribeOpen, setSubscribeOpen] = useState(false);
  const openSubscribe = () => setSubscribeOpen(true);
  const closeSubscribe = () => setSubscribeOpen(false);

  let pageEl;
  switch (route.page) {
    case 'builders':     pageEl = <MakersListPage/>; break;
    case 'newsletter':   pageEl = <HomePage/>; break;
    case 'maker':        pageEl = <MakerProfilePage slug={route.slug}/>; break;
    case 'tools':        pageEl = <ToolsListPage/>; break;
    case 'tool':         pageEl = <ToolDetailPage domain={route.domain}/>; break;
    case 'trends':       pageEl = <TrendsListPage/>; break;
    case 'trend':        pageEl = <TrendDetailPage slug={route.slug}/>; break;
    case 'archive':      pageEl = <ArchiveListPage/>; break;
    case 'archive-week': pageEl = <ArchiveWeekPage yearWeek={route.yearWeek}/>; break;
    case 'about':        pageEl = <AboutPage/>; break;
    case 'optout':       pageEl = <OptOutPage/>; break;
    case 'logos':        pageEl = <LogosPage/>; break;
    default:             pageEl = <MakersListPage/>;
  }

  return (
    <div className="shell" key={lang + '-' + theme}>
      <TopNav route={route} lang={lang} setLang={setLang} theme={theme} setTheme={setTheme} openSubscribe={openSubscribe}/>
      {pageEl}
      <Footer openSubscribe={openSubscribe}/>
      <NewsletterModal open={subscribeOpen} onClose={closeSubscribe}/>
      <NewsNatorTweaks/>
    </div>
  );
}

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