import React, { useEffect } from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';

// Styles
import './styles/design-system.css';
import './styles/index.css';

// Stores
import { useAuthStore } from './stores/authStore';
import { useFinanceStore } from './stores/financeStore';

// Layout
import { AppLayout } from './components/layout/AppLayout';
import { AuthGuard, GuestGuard } from './components/layout/AuthGuard';
import { ErrorBoundary } from './components/ErrorBoundary';
import { PWAPrompt, OfflineIndicator } from './components/PWAPrompt';
import { CommandPalette, useCommandPalette } from './components/CommandPalette';

// Pages
import { LandingPage } from './pages/LandingPage';
import { LoginPage } from './pages/LoginPage';
import { RegisterPage } from './pages/RegisterPage';
import { DashboardPage } from './pages/DashboardPage';
import { TransactionsPage } from './pages/TransactionsPage';
import { BudgetPage } from './pages/BudgetPage';
import { AccountsPage } from './pages/AccountsPage';
import { AnalyticsPage } from './pages/AnalyticsPage';
import CalendarPage from './pages/CalendarPage';
import { RulesPage } from './pages/RulesPage';
import { ForgotPasswordPage } from './pages/ForgotPasswordPage';
import { ResetPasswordPage } from './pages/ResetPasswordPage';
import { SettingsPage } from './pages/SettingsPage';
import { GoalsPage } from './pages/GoalsPage';
import { BillRemindersPage } from './pages/BillRemindersPage';

// App Component
const App: React.FC = () => {
    const { checkAuth, isLoading } = useAuthStore();
    const { initializeData } = useFinanceStore();
    const { isOpen: isCommandPaletteOpen, close: closeCommandPalette } = useCommandPalette();

    useEffect(() => {
        checkAuth();
    }, [checkAuth]);

    useEffect(() => {
        initializeData();
    }, [initializeData]);

    if (isLoading) {
        return (
            <div className="min-h-screen bg-black flex items-center justify-center">
                <div className="flex flex-col items-center gap-4">
                    <div className="w-12 h-12 border-4 border-blue-600 border-t-transparent rounded-full animate-spin" />
                    <p className="text-zinc-400 text-sm">Loading Pace...</p>
                </div>
            </div>
        );
    }

    return (
        <BrowserRouter>
            <OfflineIndicator />
            <PWAPrompt />
            <CommandPalette isOpen={isCommandPaletteOpen} onClose={closeCommandPalette} />
            <Routes>
                {/* Public routes */}
                <Route path="/" element={<LandingPage />} />

                {/* Auth routes (redirect if already authenticated) */}
                <Route
                    path="/login"
                    element={
                        <GuestGuard>
                            <LoginPage />
                        </GuestGuard>
                    }
                />
                <Route
                    path="/register"
                    element={
                        <GuestGuard>
                            <RegisterPage />
                        </GuestGuard>
                    }
                />
                <Route
                    path="/forgot-password"
                    element={
                        <GuestGuard>
                            <ForgotPasswordPage />
                        </GuestGuard>
                    }
                />
                <Route
                    path="/reset-password"
                    element={<ResetPasswordPage />}
                />

                {/* Protected routes */}
                <Route
                    path="/dashboard"
                    element={
                        <AuthGuard>
                            <AppLayout>
                                <DashboardPage />
                            </AppLayout>
                        </AuthGuard>
                    }
                />
                <Route
                    path="/transactions"
                    element={
                        <AuthGuard>
                            <AppLayout>
                                <TransactionsPage />
                            </AppLayout>
                        </AuthGuard>
                    }
                />
                <Route
                    path="/budget"
                    element={
                        <AuthGuard>
                            <AppLayout>
                                <BudgetPage />
                            </AppLayout>
                        </AuthGuard>
                    }
                />
                <Route
                    path="/accounts"
                    element={
                        <AuthGuard>
                            <AppLayout>
                                <AccountsPage />
                            </AppLayout>
                        </AuthGuard>
                    }
                />
                <Route
                    path="/analytics"
                    element={
                        <AuthGuard>
                            <AppLayout>
                                <AnalyticsPage />
                            </AppLayout>
                        </AuthGuard>
                    }
                />
                <Route
                    path="/calendar"
                    element={
                        <AuthGuard>
                            <AppLayout>
                                <CalendarPage />
                            </AppLayout>
                        </AuthGuard>
                    }
                />
                <Route
                    path="/goals"
                    element={
                        <AuthGuard>
                            <AppLayout>
                                <GoalsPage />
                            </AppLayout>
                        </AuthGuard>
                    }
                />
                <Route
                    path="/bills"
                    element={
                        <AuthGuard>
                            <AppLayout>
                                <BillRemindersPage />
                            </AppLayout>
                        </AuthGuard>
                    }
                />
                <Route
                    path="/rules"
                    element={
                        <AuthGuard>
                            <AppLayout>
                                <RulesPage />
                            </AppLayout>
                        </AuthGuard>
                    }
                />
                <Route
                    path="/settings"
                    element={
                        <AuthGuard>
                            <AppLayout>
                                <SettingsPage />
                            </AppLayout>
                        </AuthGuard>
                    }
                />

                {/* Fallback */}
                <Route path="*" element={<Navigate to="/" replace />} />
            </Routes>
        </BrowserRouter>
    );
};

// Mount the app
const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
root.render(
    <React.StrictMode>
        <ErrorBoundary>
            <App />
        </ErrorBoundary>
    </React.StrictMode>
);