// Router + root — usa History API (URLs limpas, sem #)
// navigate() ainda aceita '#/rota' para compatibilidade com os demais arquivos.

function App() {
  const [route, setRoute] = useState(() => {
    // Se ainda tem hash na URL (link antigo / bookmark), migra para pathname limpo
    if (window.location.hash && window.location.hash.startsWith('#/')) {
      const clean = window.location.hash.slice(1); // '#/landing' → '/landing'
      history.replaceState(null, '', clean);
      return clean;
    }
    const p = window.location.pathname;
    return p === '/' ? '/landing' : p;
  });

  const [tweaks, setTweaks] = useState(window.__TWEAKS__ || {});
  const [tweaksVisible, setTweaksVisible] = useState(false);
  const [booted, setBooted] = useState(false);
  const [, forceRerender] = useState(0);

  // navigate aceita '/admin' ou '#/admin' — normaliza internamente
  const navigate = (to) => {
    const path = to.startsWith('#') ? to.slice(1) : to;
    if (window.location.pathname === path) {
      setRoute(path); // mesmo caminho, força re-render
    } else {
      history.pushState(null, '', path);
      setRoute(path);
    }
  };

  // Botão voltar/avançar do browser
  useEffect(() => {
    const onPop = () => {
      const p = window.location.pathname;
      setRoute(p === '/' ? '/landing' : p);
    };
    window.addEventListener('popstate', onPop);
    return () => window.removeEventListener('popstate', onPop);
  }, []);

  // Carrega sessão do backend antes de decidir rota protegida
  useEffect(() => {
    (window.__sessionReady || Promise.resolve()).finally(() => setBooted(true));
    const unsub = window.DB.onUserChange(() => forceRerender(v => v + 1));
    return unsub;
  }, []);

  // Edit-mode protocol
  useEffect(() => {
    const onMsg = (e) => {
      const d = e.data || {};
      if (d.type === '__activate_edit_mode') setTweaksVisible(true);
      if (d.type === '__deactivate_edit_mode') setTweaksVisible(false);
    };
    window.addEventListener('message', onMsg);
    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
    return () => window.removeEventListener('message', onMsg);
  }, []);

  // Apply tweaks → body attrs / css vars
  useEffect(() => {
    document.documentElement.setAttribute('data-theme', tweaks.theme || 'light');
    document.body.classList.toggle('density-compact', tweaks.density === 'compact');
    const accents = {
      terracotta: { a:'#C96442', d:'#A64E30', soft:'#F3E3D8' },
      olive:      { a:'#5C6B3F', d:'#3F4A2A', soft:'#E7EADE' },
      azul:       { a:'#4A6B8A', d:'#2F4A68', soft:'#DDE6ED' },
      rosa:       { a:'#C46B6B', d:'#9E4D4D', soft:'#F3E0E0' },
    };
    const t = accents[tweaks.accent] || accents.terracotta;
    document.documentElement.style.setProperty('--accent', t.a);
    document.documentElement.style.setProperty('--accent-deep', t.d);
    document.documentElement.style.setProperty('--accent-soft', t.soft);
  }, [tweaks]);

  if (!booted) return <BootScreen/>;

  let screen;
  if (route.startsWith('/landing'))        screen = <Landing navigate={navigate}/>;
  else if (route.startsWith('/login'))     screen = <Login navigate={navigate}/>;
  else if (route.startsWith('/signup'))    screen = <Signup navigate={navigate}/>;
  else if (route.startsWith('/reset'))     screen = <ResetPassword navigate={navigate}/>;
  else if (route.startsWith('/forgot'))    screen = <ForgotPassword navigate={navigate}/>;
  else if (route.startsWith('/checkout')) {
    if (!window.USER) { navigate('/login'); return <BootScreen/>; }
    const params = new URLSearchParams(route.split('?')[1]);
    screen = <Checkout navigate={navigate} initialPlan={params.get('plan')}/>;
  }
  else if (route.startsWith('/presets'))   screen = <Presets navigate={navigate}/>;
  else if (route.startsWith('/dashboard')) {
    if (!window.USER) { navigate('/login'); return <BootScreen/>; }
    screen = <Editor navigate={navigate}/>;
  }
  else if (route.startsWith('/account')) {
    if (!window.USER) { navigate('/login'); return <BootScreen/>; }
    screen = <Account navigate={navigate}/>;
  }
  else if (route.startsWith('/admin')) {
    screen = <AdminRoute navigate={navigate}/>;
  }
  else screen = <Landing navigate={navigate}/>;

  return (
    <div className="app-root" data-screen-label={routeLabel(route)}>
      {screen}
      <TweaksPanel tweaks={tweaks} setTweaks={setTweaks} visible={tweaksVisible}/>
    </div>
  );
}

function BootScreen() {
  return (
    <div style={{
      minHeight:'100dvh', background:'var(--bg)',
      display:'flex', alignItems:'center', justifyContent:'center',
      flexDirection:'column', gap: 16,
      paddingTop: 'var(--safe-top)', paddingBottom: 'var(--safe-bottom)',
    }}>
      <div style={{
        width: 48, height: 48, borderRadius: 12,
        background:'linear-gradient(135deg, var(--accent), #8B5A3C)',
        boxShadow: '0 8px 20px -8px rgba(201,100,66,.45)',
        animation: 'pulseMark 1.4s ease-in-out infinite',
      }}/>
      <style>{`@keyframes pulseMark { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .7; transform: scale(.96); } }`}</style>
      <div style={{ color:'var(--ink-3)', fontSize: 13 }}>Carregando sua sessão…</div>
    </div>
  );
}

function routeLabel(r) {
  if (r.startsWith('/landing'))   return 'Landing';
  if (r.startsWith('/login'))     return 'Login';
  if (r.startsWith('/signup'))    return 'Signup';
  if (r.startsWith('/forgot'))    return 'Esqueci senha';
  if (r.startsWith('/reset'))     return 'Redefinir';
  if (r.startsWith('/checkout'))  return 'Checkout';
  if (r.startsWith('/presets'))   return 'Predefinições';
  if (r.startsWith('/dashboard')) return 'Editor';
  if (r.startsWith('/admin'))     return 'Admin';
  return 'Home';
}

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