import React, { lazy, Suspense } from 'react';
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
import { WalletProvider } from './context/WalletContext';
import ProtectedRoute from './components/ProtectedRoute';

// Lazy loading компонентов для code splitting
const LoginPage = lazy(() => import('./pages/LoginPage'));
const DashboardPage = lazy(() => import('./pages/DashboardPage'));
const WalletsPage = lazy(() => import('./pages/WalletsPage'));
const ManageCryptoPage = lazy(() => import('./pages/ManageCryptoPage'));
const CurrencyPage = lazy(() => import('./pages/CurrencyPage'));
const StakingPage = lazy(() => import('./pages/StakingPage'));
const SwapPage = lazy(() => import('./pages/SwapPage'));
const EarnPage = lazy(() => import('./pages/EarnPage'));
const SettingsPage = lazy(() => import('./pages/SettingsPage'));
const ReceivePage = lazy(() => import('./pages/ReceivePage'));

// Компонент загрузки
const LoadingFallback = () => (
  <div className="min-h-screen bg-[#1b1b1c] flex items-center justify-center">
    <div className="flex flex-col items-center gap-4">
      <svg className="animate-spin h-12 w-12 text-[#48FF91]" viewBox="0 0 24 24">
        <circle 
          className="opacity-25" 
          cx="12" 
          cy="12" 
          r="10" 
          stroke="currentColor" 
          strokeWidth="4"
          fill="none"
        />
        <path 
          className="opacity-75" 
          fill="currentColor" 
          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
        />
      </svg>
      <p className="text-gray-400 font-semibold">Загрузка...</p>
    </div>
  </div>
);

function App() {
  return (
    <WalletProvider>
      <Router>
        <Suspense fallback={<LoadingFallback />}>
          <Routes>
            <Route path="/login" element={<LoginPage />} />
            <Route path="/onboarding" element={<Navigate to="/" replace />} />
            <Route
              path="/"
              element={
                <ProtectedRoute>
                  <DashboardPage />
                </ProtectedRoute>
              }
            />
            <Route
              path="/wallets"
              element={
                <ProtectedRoute>
                  <WalletsPage />
                </ProtectedRoute>
              }
            />
            <Route
              path="/manage-crypto"
              element={
                <ProtectedRoute>
                  <ManageCryptoPage />
                </ProtectedRoute>
              }
            />
            <Route
              path="/currency/:symbol"
              element={
                <ProtectedRoute>
                  <CurrencyPage />
                </ProtectedRoute>
              }
            />
            <Route
              path="/staking/:symbol"
              element={
                <ProtectedRoute>
                  <StakingPage />
                </ProtectedRoute>
              }
            />
            <Route
              path="/swap"
              element={
                <ProtectedRoute>
                  <SwapPage />
                </ProtectedRoute>
              }
            />
            <Route
              path="/earn"
              element={
                <ProtectedRoute>
                  <EarnPage />
                </ProtectedRoute>
              }
            />
            <Route
              path="/settings"
              element={
                <ProtectedRoute>
                  <SettingsPage />
                </ProtectedRoute>
              }
            />
            <Route
              path="/receive"
              element={
                <ProtectedRoute>
                  <ReceivePage />
                </ProtectedRoute>
              }
            />
            <Route path="*" element={<Navigate to="/" replace />} />
          </Routes>
        </Suspense>
      </Router>
    </WalletProvider>
  );
}

export default App;
