import BottomNavigation from '@/components/BottomNavigation';
import { i18nManager } from '@/i18n/manager';
import { initLanguageFromStorage } from '@/i18n/utils';
import Create from '@/pages/create';
import History from '@/pages/history';
import Home from '@/pages/home';
import Result from '@/pages/result';
import { auth } from '@/services/auth';
import { useEffect, useState } from 'react';
import { Navigate, Route, Routes, useLocation } from 'react-router-dom';

import './app.css';

function App() {
  const [isLoading, setIsLoading] = useState(true);
  const location = useLocation();

  // Pages that don't need to show bottom navigation
  const hideBottomNavPages = ['/create', '/result'];

  useEffect(() => {
    const initApp = async () => {
      try {
        // Initialize internationalization
        await initLanguageFromStorage();
        await i18nManager.initializeApp();
        await auth.checkLogin();
      } catch (error) {
        console.error('Application initialization failed:', error);
      } finally {
        setIsLoading(false);
      }
    };

    initApp();
  }, []);

  // Show loading state
  if (isLoading) {
    return (
      <div className="app-loading">
        <div className="loading-container">
          <div className="loading-spinner"></div>
          <div className="loading-text">Initializing application...</div>
        </div>
      </div>
    );
  }

  return (
    <div className="app">
      <div className="app-content">
        <Routes>
          <Route path="/" element={<Navigate to="/home" replace />} />
          <Route path="/home" element={<Home />} />
          <Route path="/history" element={<History />} />
          <Route path="/create/:templateCode" element={<Create />} />
          <Route path="/result" element={<Result />} />
        </Routes>
      </div>
      {!hideBottomNavPages.some(path => location.pathname.startsWith(path)) && <BottomNavigation />}
    </div>
  );
}

export default App;
