/* App shell — gerencia rotas entre Landing, Login, Dashboard
   + listener de autenticação Firebase (SF.auth.onAuthStateChanged)
   + carrega token claims (cnpj, allowedStores, allowedPages…)    */

const { useState, useEffect } = React;

function App() {
  const [t, setTweak] = useTweaks(/*EDITMODE-BEGIN*/{
    "screen":   "landing",
    "density":  "comfortable",
    "radius":   "rounded",
    "accent":   "#0B69C7"
  }/*EDITMODE-END*/);

  // Aplica o tema salvo antes de qualquer render (evita flash branco no loading)
  // Aplica tema salvo imediatamente (tela de loading respeita dark mode)
  useEffect(() => {
    try {
      document.documentElement.setAttribute('data-theme', localStorage.getItem('sf-theme') ?? 'light');
    } catch {}
  }, []);

  // Após auth: login e landing são sempre claros; dashboard restaura tema salvo
  useEffect(() => {
    if (!authReady) return;
    const root = document.documentElement;
    if (t.screen === 'dashboard') {
      try {
        root.setAttribute('data-theme', localStorage.getItem('sf-theme') ?? 'light');
      } catch {
        root.setAttribute('data-theme', 'light');
      }
    } else {
      root.setAttribute('data-theme', 'light');
    }
  }, [t.screen, authReady]);

  // Usuário autenticado (claims do token, espelho do mobile User model)
  const [sfUser,     setSfUser]     = useState(null);
  const [authReady,  setAuthReady]  = useState(false); // listener disparou ao menos 1x

  /* ── Aplicar tweaks de estilo ao :root ─────────────────────────────────── */
  useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty('--density', t.density === 'compact' ? '0.85' : '1');
    const radii = {
      sharp:   ['4px',  '2px',  '8px' ],
      rounded: ['12px', '8px',  '18px'],
      soft:    ['18px', '12px', '24px'],
    };
    const r = radii[t.radius] || radii.rounded;
    root.style.setProperty('--radius',    r[0]);
    root.style.setProperty('--radius-sm', r[1]);
    root.style.setProperty('--radius-lg', r[2]);
    root.style.setProperty('--brand-500', t.accent);
  }, [t]);

  /* ── Listener Firebase Auth ────────────────────────────────────────────── */
  useEffect(() => {
    const unsub = SF.auth.onAuthStateChanged(async (firebaseUser) => {
      if (firebaseUser) {
        try {
          const user = await SF.parseUserToken(firebaseUser);
          setSfUser(user);
          if (user.isSupport) {
            setAuthReady(true);
            setTweak('screen', 'support');
          } else {
            // Carrega mapa de filiais em background (não bloqueia UI)
            SF.loadFiliaisMap(user.cnpj).catch(() => {});
            // Inicia heartbeat "Visto" (espelho do mobile)
            SF.startHeartbeat(user.cnpj);
            setAuthReady(true);
            setTweak('screen', 'dashboard');
          }
        } catch (err) {
          console.error('[app] parseUserToken failed:', err);
          setSfUser(null);
          setAuthReady(true);
          SF.auth.signOut().catch(() => {});
          setTweak('screen', 'login');
        }
      } else {
        setSfUser(null);
        setAuthReady(true);
        // Volta para landing (o tweak de screen controla a rota)
        setTweak('screen', 'landing');
      }
    });
    return unsub;
  }, []);

  const navigate = (screen) => setTweak('screen', screen);

  const handleLogout = async () => {
    SF.stopHeartbeat();
    SF.clearSession();
    await SF.auth.signOut().catch(() => {});
    setSfUser(null);
    navigate('landing');
  };

  /* ── Loading inicial (auth ainda não respondeu) ─────────────────────────── */
  if (!authReady) {
    return (
      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        minHeight: '100vh', background: 'var(--ink-50)',
        flexDirection: 'column', gap: 16,
      }}>
        <Logo size={28} />
        <Spinner size={28} color="var(--brand-500)" />
      </div>
    );
  }

  return (
    <>
      {t.screen === 'landing'   && <Landing   navigate={navigate} />}
      {t.screen === 'login'     && <Login     navigate={navigate} />}
      {t.screen === 'dashboard' && (
        <Dashboard navigate={navigate} user={sfUser} onLogout={handleLogout} />
      )}
      {t.screen === 'support' && (
        <SupportView user={sfUser} onLogout={handleLogout} />
      )}

      <TweaksPanel title="Tweaks">
        <TweakSection label="Tela" />
        <TweakRadio
          label="Tela ativa"
          value={t.screen}
          options={[
            { label: 'Landing',   value: 'landing' },
            { label: 'Login',     value: 'login' },
            { label: 'Dashboard', value: 'dashboard' },
            { label: 'Suporte',   value: 'support' },
          ]}
          onChange={(v) => setTweak('screen', v)}
        />

        <TweakSection label="Estilo visual" />
        <TweakRadio
          label="Densidade"
          value={t.density}
          options={[
            { label: 'Confortável', value: 'comfortable' },
            { label: 'Compacto',    value: 'compact' },
          ]}
          onChange={(v) => setTweak('density', v)}
        />
        <TweakRadio
          label="Cantos"
          value={t.radius}
          options={[
            { label: 'Reto',  value: 'sharp' },
            { label: 'Médio', value: 'rounded' },
            { label: 'Suave', value: 'soft' },
          ]}
          onChange={(v) => setTweak('radius', v)}
        />
        <TweakColor
          label="Tom de azul"
          value={t.accent}
          options={['#0B69C7', '#0A56A6', '#1A6EE0', '#1E40AF', '#0E7490']}
          onChange={(v) => setTweak('accent', v)}
        />
      </TweaksPanel>
    </>
  );
}

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