// app.jsx — Router + mount

const { useState: useStateApp, useEffect: useEffectApp } = React;

// init route + lang globals (read by components)
function parseHash() {
  const h = (window.location.hash || '#/').replace(/^#/, '');
  const parts = h.split('/').filter(Boolean);
  return { path: '/' + parts.join('/'), parts };
}

window.__route = parseHash();
window.__lang = localStorage.getItem('zoee.lang') || 'en';
document.documentElement.lang = window.__lang;

// language switching: components dispatch 'lang:set', we persist and re-broadcast
window.addEventListener('lang:set', (e) => {
  const next = e.detail;
  if (!next || next === window.__lang) return;
  window.__lang = next;
  document.documentElement.lang = next;
  try { localStorage.setItem('zoee.lang', next); } catch (err) {}
  if (typeof applyDataLang === 'function') applyDataLang(next);
  window.dispatchEvent(new CustomEvent('lang:change', { detail: next }));
});

window.addEventListener('hashchange', () => {
  window.__route = parseHash();
  window.dispatchEvent(new CustomEvent('route:change', { detail: window.__route }));
  window.scrollTo({ top: 0, behavior: 'instant' });
});

// Apply persisted tweaks early
(function applyEarlyTweaks() {
  try {
    const raw = localStorage.getItem('zoee.tweaks');
    if (raw) {
      const t = JSON.parse(raw);
      if (t.dark) document.documentElement.setAttribute('data-theme', 'dark');
      if (t.density) document.documentElement.setAttribute('data-density', t.density);
      if (t.primary) document.documentElement.style.setProperty('--midnight', t.primary);
    }
  } catch(e) {}
})();

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "dark": false,
  "density": "regular",
  "primary": "#1A2A55"
}/*EDITMODE-END*/;

function ZoeeApp() {
  const route = useRoute();
  const { parts } = route;

  // Resolve page from route
  let page;
  const seg0 = parts[0] || '';
  if (!seg0) page = <PageHome/>;
  else if (seg0 === 'recursos' && parts.length === 1) page = <PageFeatures/>;
  else if (seg0 === 'recursos' && parts[1]) page = <PageModule id={parts[1]}/>;
  else if (seg0 === 'cowork') page = <PageCowork/>;
  else if (seg0 === 'precos') page = <PagePricing/>;
  else if (seg0 === 'solucoes' && parts.length === 1) page = <PageSolutions/>;
  else if (seg0 === 'solucoes' && parts[1]) page = <PageSolutions id={parts[1]}/>;
  else if (seg0 === 'clientes') page = <PageCustomers/>;
  else if (seg0 === 'blog' && parts.length === 1) page = <PageBlog/>;
  else if (seg0 === 'blog' && parts[1]) page = <PageBlog postId={parts[1]}/>;
  else if (seg0 === 'sobre') page = <PageAbout/>;
  else if (seg0 === 'carreiras') page = <PageCareers/>;
  else if (seg0 === 'contato') page = <PageContact/>;
  else if (seg0 === 'changelog') page = <PageChangelog/>;
  else if (seg0 === 'docs') page = <PageDocs/>;
  else if (seg0 === 'suporte') page = <PageSupport/>;
  else if (seg0 === 'legal') page = <PageLegal kind={parts[1] || 'privacidade'}/>;
  else if (seg0 === 'tutores' || seg0 === 'pet-owners') page = <PageTutors/>;
  else page = <PageNotFound/>;

  // Tweaks
  const [tweaksOpen, setTweaksOpen] = useStateApp(false);
  const [tweaks, setTweaksState] = useStateApp(() => {
    try { return Object.assign({}, TWEAK_DEFAULTS, JSON.parse(localStorage.getItem('zoee.tweaks') || '{}')); }
    catch(e) { return TWEAK_DEFAULTS; }
  });

  const setTweak = (key, val) => {
    setTweaksState(prev => {
      const next = typeof key === 'object' ? { ...prev, ...key } : { ...prev, [key]: val };
      localStorage.setItem('zoee.tweaks', JSON.stringify(next));
      // apply
      document.documentElement.setAttribute('data-theme', next.dark ? 'dark' : 'light');
      document.documentElement.setAttribute('data-density', next.density || 'regular');
      document.documentElement.style.setProperty('--midnight', next.primary);
      try { window.parent.postMessage({ type: '__edit_mode_set_keys', edits: next }, '*'); } catch(e) {}
      return next;
    });
  };

  useEffectApp(() => {
    // apply on mount
    document.documentElement.setAttribute('data-theme', tweaks.dark ? 'dark' : 'light');
    document.documentElement.setAttribute('data-density', tweaks.density || 'regular');
    document.documentElement.style.setProperty('--midnight', tweaks.primary);

    const handler = (e) => {
      if (!e || !e.data) return;
      if (e.data.type === '__activate_edit_mode') setTweaksOpen(true);
      if (e.data.type === '__deactivate_edit_mode') setTweaksOpen(false);
    };
    window.addEventListener('message', handler);
    try { window.parent.postMessage({ type: '__edit_mode_available' }, '*'); } catch(e) {}
    return () => window.removeEventListener('message', handler);
  }, []);

  return (
    <>
      <Nav/>
      <main>{page}</main>
      <Footer/>
      <WhatsAppFab/>
      {tweaksOpen && (
        <TweaksPanel title="Tweaks" onClose={() => { setTweaksOpen(false); try { window.parent.postMessage({type:'__edit_mode_dismissed'}, '*'); } catch(e){} }}>
          <TweakSection title="Tema">
            <TweakToggle label="Modo escuro" value={tweaks.dark} onChange={v=>setTweak('dark', v)}/>
          </TweakSection>
          <TweakSection title="Cor primária">
            <TweakColor
              label="Midnight"
              value={tweaks.primary}
              options={['#1A2A55','#0F172A','#2E1065','#0B3D2E','#7C2D12']}
              onChange={v=>setTweak('primary', v)}
            />
          </TweakSection>
          <TweakSection title="Densidade">
            <TweakRadio
              label="Espaçamento"
              value={tweaks.density}
              options={[{label:'Compacto',value:'compact'},{label:'Regular',value:'regular'},{label:'Espaçoso',value:'spacious'}]}
              onChange={v=>setTweak('density', v)}
            />
          </TweakSection>
        </TweaksPanel>
      )}
    </>
  );
}

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