import React, { Suspense } from 'react';
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
import { HelmetProvider } from 'react-helmet-async';
import * as Sentry from "@sentry/react";
import { Login } from './pages/admin/Login';
// Lazy load admin components for better performance
import { lazy } from 'react';
const Dashboard = lazy(() => import('./pages/admin/Dashboard').then(module => ({ default: module.Dashboard })));
const Reservaciones = lazy(() => import('./pages/admin/Reservaciones').then(module => ({ default: module.Reservaciones })));
const Calendario = lazy(() => import('./pages/admin/Calendario').then(module => ({ default: module.Calendario })));
const Clientes = lazy(() => import('./pages/admin/Clientes').then(module => ({ default: module.Clientes })));
const Cabanas = lazy(() => import('./pages/admin/Cabanas').then(module => ({ default: module.Cabanas })));
const MenuAdmin = lazy(() => import('./pages/admin/MenuAdmin').then(module => ({ default: module.MenuAdmin })));
const Reviews = lazy(() => import('./pages/admin/Reviews').then(module => ({ default: module.Reviews })));
const Settings = lazy(() => import('./pages/admin/Settings').then(module => ({ default: module.Settings })));
import { AdminLayout } from './components/AdminLayout';
import { ProtectedRoute } from './components/ProtectedRoute';

// Error Boundary Component
class ErrorBoundary extends React.Component<
  { children: React.ReactNode },
  { hasError: boolean; error?: Error }
> {
  constructor(props: { children: React.ReactNode }) {
    super(props);
    this.state = { hasError: false };
  }

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

  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
    console.error('Error Boundary caught an error:', error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return (
        <div className="min-h-screen flex items-center justify-center bg-gray-50">
          <div className="text-center p-8 bg-white rounded-lg shadow-md max-w-md">
            <h2 className="text-2xl font-bold text-gray-900 mb-4">
              ¡Ups! Algo salió mal
            </h2>
            <p className="text-gray-600 mb-6">
              Ha ocurrido un error inesperado. Por favor, intenta de nuevo.
            </p>
            <div className="space-y-3">
              <button
                onClick={() => window.location.reload()}
                className="w-full bg-sky-500 text-white px-6 py-2 rounded-lg hover:bg-sky-600 transition-colors"
              >
                Recargar Página
              </button>
              <button
                onClick={() => window.history.back()}
                className="w-full bg-gray-200 text-gray-700 px-6 py-2 rounded-lg hover:bg-gray-300 transition-colors"
              >
                Volver Atrás
              </button>
            </div>
          </div>
        </div>
      );
    }

    return this.props.children;
  }
}

function App() {
  return (
    <HelmetProvider>
      <Sentry.ErrorBoundary fallback={<p>Algo salió mal 😢</p>}>
        <ErrorBoundary>
          <Suspense fallback={
            <div className="min-h-screen flex items-center justify-center">
              <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-emerald-600"></div>
            </div>
          }>
            <Router>
              <Routes>
                <Route path="/login" element={<Login />} />

                <Route path="/" element={<ProtectedRoute><AdminLayout /></ProtectedRoute>}>
                  <Route index element={<Dashboard />} />
                  <Route path="reservaciones" element={<Reservaciones />} />
                  <Route path="calendario" element={<Calendario />} />
                  <Route path="clientes" element={<Clientes />} />
                  <Route path="cabanas" element={<Cabanas />} />
                  <Route path="menu" element={<MenuAdmin />} />
                  <Route path="reviews" element={<Reviews />} />
                  <Route path="settings" element={<Settings />} />
                </Route>

                <Route path="*" element={<Navigate to="/" replace />} />
              </Routes>
            </Router>
          </Suspense>
        </ErrorBoundary>
      </Sentry.ErrorBoundary>
    </HelmetProvider>
  );
}

export default App;