import React, { Suspense } from 'react';
import { Routes, Route, Navigate } from 'react-router-dom';
import { LoginPage } from './components/LoginPage';
import { DashboardPage } from './components/DashboardPage';
import { ConstablesPage } from './components/ConstablesPage';
import { ViolationDetail } from './components/ViolationDetail';
import { ProtectedRoute } from './components/ProtectedRoute';
import { OTPVerification } from './components/OTPVerification';

// Loading component for Suspense fallback
const LoadingFallback = () => (
    <div className="flex items-center justify-center min-h-screen bg-gray-50">
        <div className="text-center">
            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
            <p className="text-gray-600">Loading application...</p>
        </div>
    </div>
);

// Error boundary component for route errors
class RouteErrorBoundary extends React.Component {
    constructor(props) {
        super(props);
        this.state = { hasError: false, error: null };
    }

    static getDerivedStateFromError(error) {
        return { hasError: true, error };
    }

    componentDidCatch(error, errorInfo) {
        console.error('Route Error:', error, errorInfo);
    }

    render() {
        if (this.state.hasError) {
            return (
                <div className="flex items-center justify-center min-h-screen bg-gray-50">
                    <div className="text-center max-w-md mx-auto p-6">
                        <h1 className="text-xl font-semibold text-gray-800 mb-4">Page Not Found</h1>
                        <p className="text-gray-600 mb-4">
                            The page you're looking for doesn't exist or there was an error loading it.
                        </p>
                        <div className="space-y-2">
                            <button 
                                onClick={() => window.location.href = '/dashboard'} 
                                className="w-full px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"
                            >
                                Go to Dashboard
                            </button>
                            <button 
                                onClick={() => window.location.reload()} 
                                className="w-full px-4 py-2 bg-gray-600 text-white rounded-md hover:bg-gray-700"
                            >
                                Refresh Page
                            </button>
                        </div>
                    </div>
                </div>
            );
        }

        return this.props.children;
    }
}

function App() {
    return (
        <RouteErrorBoundary>
            <Suspense fallback={<LoadingFallback />}>
                <Routes>
                    <Route path="/login" element={<LoginPage />} />
                    
                    {/* OTP verification route (can be accessed directly if needed) */}
                    <Route path="/verify-otp" element={<OTPVerification />} />
                    
                    {/* Root path redirects to login */}
                    <Route path="/" element={<Navigate to="/login" replace />} />
                    
                    {/* Dashboard route */}
                    <Route 
                        path="/dashboard" 
                        element={
                            <ProtectedRoute>
                                <DashboardPage />
                            </ProtectedRoute>
                        } 
                    />

                    {/* Constables route */}
                    <Route 
                        path="/constables" 
                        element={
                            <ProtectedRoute>
                                <ConstablesPage />
                            </ProtectedRoute>
                        } 
                    />

                    {/* Violation Detail route */}
                    <Route 
                        path="/violation/:id" 
                        element={
                            <ProtectedRoute>
                                <ViolationDetail />
                            </ProtectedRoute>
                        } 
                    />

                    {/* Default redirect to login for unmatched routes */}
                    <Route path="*" element={<Navigate to="/login" replace />} />
                </Routes>
            </Suspense>
        </RouteErrorBoundary>
    );
}

export default App;