veza/apps/web/src/app/App.tsx

import { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useQueryClient } from '@tanstack/react-query';
import { useAuthStore } from '@/features/auth/store/authStore';

import { useUIStore } from '@/stores/ui';
import { ErrorBoundary } from '@/components/ui/ErrorBoundary';
import { AstralBackground } from '@/components/ui/AstralBackground';
import { OfflineIndicator } from '@/components/OfflineIndicator';
import { AppRouter } from '@/router';
import { csrfService } from '@/services/csrf';
import { useGlobalKeyboardShortcuts } from '@/hooks/useGlobalKeyboardShortcuts';
import { KeyboardShortcutsPanel } from '@/components/ui/KeyboardShortcutsPanel';
import { useStateHydration } from '@/utils/stateHydration';
import { useQueryInvalidation } from '@/hooks/useQueryInvalidation';
import { usePatina } from '@/hooks/usePatina';
import { setupReactQuerySync } from '@/utils/reactQuerySync';
import { logger } from '@/utils/logger';
import { AudioProvider } from '@/context/AudioContext';

export function App() {
  const { t } = useTranslation();
  const { refreshUser } = useAuthStore();
  const { theme, setTheme, language, setLanguage } = useUIStore();
  const [showKeyboardHelp, setShowKeyboardHelp] = useState(false);
  // P1.2: Auth initialization state to prevent race condition
  const [isAuthReady, setIsAuthReady] = useState(false);
  const queryClient = useQueryClient();

  // FE-COMP-022: Enable global keyboard shortcuts
  useGlobalKeyboardShortcuts({
    enabled: true,
    onHelpOpen: () => setShowKeyboardHelp(true),
  });

  // FE-STATE-003: Hydrate state from server on app load
  useStateHydration({
    hydrateAuth: true,
    hydrateLibrary: false, // Can be enabled if needed
    hydrateChat: false, // Can be enabled if needed
    requireAuth: false, // Hydrate auth even if not authenticated (to check status)
  });

  // FE-STATE-004: Listen for query invalidation events
  useQueryInvalidation();

  // SUMI v3: Apply patina level based on user profile data
  usePatina();

  // Action 2.3.1.2: Initialize React Query cache synchronization across tabs
  useEffect(() => {
    const cleanup = setupReactQuerySync(queryClient, {
      enabled: true,
      channelName: 'veza-react-query-sync',
    });

    return cleanup;
  }, [queryClient]);

  // P1.2: Initialize auth state before rendering app
  // With httpOnly cookies we cannot read tokens in JS; always call refreshUser()
  // so getMe() is used to verify auth (cookies sent automatically).
  // CSRF token is fetched AFTER auth succeeds (no timing hack needed).
  useEffect(() => {
    const initAuth = async () => {
      try {
        await refreshUser();
        // Fetch CSRF only after auth is confirmed
        const { isAuthenticated } = useAuthStore.getState();
        if (isAuthenticated) {
          csrfService.refreshToken().catch((error) => {
            const msg = error instanceof Error ? error.message : String(error);
            if (!msg.includes('HTML page instead of JSON')) {
              logger.warn('Failed to fetch CSRF token on app init', { message: msg });
            }
          });
        }
      } catch (error) {
        logger.error('[App] Auth initialization failed', {
          error: error instanceof Error ? error.message : String(error),
          stack: error instanceof Error ? error.stack : undefined,
        });
      } finally {
        setIsAuthReady(true);
      }
    };

    initAuth();
  }, [refreshUser]);

  // Apply theme on load
  useEffect(() => {
    if (!theme || theme === 'system') {
      const root = document.documentElement;
      if (
        !root.classList.contains('dark') &&
        !root.classList.contains('light')
      ) {
        setTheme('dark');
      } else {
        setTheme(theme);
      }
    } else {
      setTheme(theme);
    }

    // Sync language with i18n on load
    if (typeof window !== 'undefined' && window.i18n) {
      const currentLang = window.i18n.language || language;
      if (currentLang !== language) {
        window.i18n.changeLanguage(language);
      } else if (language !== currentLang) {
        setLanguage(currentLang as 'en' | 'fr' | 'es');
      }
    }
  }, [setTheme, theme, language, setLanguage]);

  // Écouter les changements de préférence système pour le mode 'system'
  useEffect(() => {
    if (theme !== 'system') return;

    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
    const handleChange = (e: MediaQueryListEvent) => {
      const root = document.documentElement;
      if (e.matches) {
        root.classList.add('dark');
      } else {
        root.classList.remove('dark');
      }
    };

    // Écouter les changements
    if (mediaQuery.addEventListener) {
      mediaQuery.addEventListener('change', handleChange);
    } else {
      // Fallback pour les navigateurs plus anciens
      mediaQuery.addListener(handleChange);
    }

    return () => {
      if (mediaQuery.removeEventListener) {
        mediaQuery.removeEventListener('change', handleChange);
      } else {
        mediaQuery.removeListener(handleChange);
      }
    };
  }, [theme]);

  // S5.1: Branded loading screen (Spotify-like splash)
  if (!isAuthReady) {
    return (
      <div className="flex flex-col items-center justify-center min-h-screen bg-[var(--sumi-bg-void)]">
        {/* Logo mark */}
        <div className="relative mb-8 animate-[sumi-fade-in_0.6s_ease-out]">
          <svg
            width="56"
            height="56"
            viewBox="0 0 56 56"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
            className="text-primary"
            aria-hidden="true"
          >
            <rect width="56" height="56" rx="16" fill="currentColor" fillOpacity="0.15" />
            <path
              d="M18 38V18l20 10-20 10z"
              fill="currentColor"
              className="animate-pulse"
            />
          </svg>
        </div>
        {/* Brand name */}
        <h1 className="text-2xl font-heading font-bold text-foreground mb-6 animate-[sumi-fade-in_0.8s_ease-out_0.2s_both]">
          Veza
        </h1>
        {/* Progress bar */}
        <div className="w-48 h-0.5 bg-muted/30 rounded-full overflow-hidden animate-[sumi-fade-in_1s_ease-out_0.4s_both]">
          <div className="h-full bg-primary rounded-full animate-[loading-progress_1.5s_ease-in-out_infinite]" />
        </div>
      </div>
    );
  }

  return (
    <ErrorBoundary>
      <AudioProvider>
          {/* S3.1: Skip navigation link for keyboard/screen-reader users */}
          <a
            href="#main-content"
            className="sr-only focus:not-sr-only focus:fixed focus:top-4 focus:left-4 focus:z-[var(--sumi-z-max)] focus:bg-primary focus:text-primary-foreground focus:px-4 focus:py-2 focus:rounded-lg focus:shadow-lg"
          >
            {t('nav.skipToContent')}
          </a>
          <AstralBackground />
          {/* Offline/Online Status Indicator */}
          <OfflineIndicator />
          <AppRouter />
          {/* PWA Install Banner - Disabled for now as it is too intrusive */}
          {/* <PWAInstallBanner /> */}
          {/* Keyboard Shortcuts Panel (Discord-style overlay) */}
          <KeyboardShortcutsPanel
            isOpen={showKeyboardHelp}
            onClose={() => setShowKeyboardHelp(false)}
          />
      </AudioProvider>
    </ErrorBoundary>
  );
}