import React from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import './App.css';
import Login from './pages/Login';
import Register from './pages/Register';
import NotFound from './pages/NotFound';
import NavBar from './components/NavBar';
import Index from './pages/Index';
import AuthContextWrapper from './contexts/AuthContext';
import { Toaster } from './components/ui/toaster';
import ProfileManagement from './pages/ProfileManagement';
import Transactions from './pages/Transactions';
import SecurityPrivacySettings from './pages/SecurityPrivacySettings';
import NotificationSettings from './pages/NotificationSettings';
import HelpSupport from './pages/HelpSupport';
import ForgotPassword from './pages/ForgotPassword';
import Analytics from './pages/Analytics';
import PaymentMethods from './pages/PaymentMethods';
import Settings from './pages/Settings';
import { BudgetProvider } from './contexts/BudgetContext';

// 전역 오류 핸들러
const handleError = (error: any) => {
  console.error('앱 오류 발생:', error);
};

// 오류 경계 컴포넌트
class ErrorBoundary extends React.Component<
  { children: React.ReactNode },
  { hasError: boolean; error: Error | null }
> {
  constructor(props: { children: React.ReactNode }) {
    super(props);
    this.state = { hasError: false, error: null };
  }

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

  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
    handleError({ error, errorInfo });
  }

  render() {
    if (this.state.hasError) {
      return (
        <div className="min-h-screen flex items-center justify-center p-4 bg-gray-50">
          <div className="bg-white p-8 rounded-lg shadow-lg max-w-md w-full">
            <h1 className="text-2xl font-bold text-red-600 mb-4">오류가 발생했습니다</h1>
            <p className="text-gray-600 mb-4">
              앱에서 예상치 못한 오류가 발생했습니다. 페이지를 새로고침하거나 나중에 다시 시도해주세요.
            </p>
            <pre className="bg-gray-100 p-4 rounded text-xs overflow-auto max-h-40 mb-4">
              {this.state.error?.message}
            </pre>
            <button
              onClick={() => window.location.reload()}
              className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 w-full"
            >
              페이지 새로고침
            </button>
          </div>
        </div>
      );
    }

    return this.props.children;
  }
}

function App() {
  return (
    <ErrorBoundary>
      <AuthContextWrapper>
        <BudgetProvider>
          <Router>
            <div className="flex flex-col min-h-screen">
              <NavBar />
              <div className="flex-grow">
                <Routes>
                  <Route path="/" element={<Index />} />
                  <Route path="/login" element={<Login />} />
                  <Route path="/register" element={<Register />} />
                  <Route path="/profile" element={<ProfileManagement />} />
                  <Route path="/settings" element={<Settings />} />
                  <Route path="/transactions" element={<Transactions />} />
                  <Route path="/security-privacy" element={<SecurityPrivacySettings />} />
                  <Route path="/notifications" element={<NotificationSettings />} />
                  <Route path="/help-support" element={<HelpSupport />} />
                  <Route path="/forgot-password" element={<ForgotPassword />} />
                  <Route path="/analytics" element={<Analytics />} />
                  <Route path="/payment-methods" element={<PaymentMethods />} />
                  <Route path="*" element={<NotFound />} />
                </Routes>
              </div>
              <Toaster />
            </div>
          </Router>
        </BudgetProvider>
      </AuthContextWrapper>
    </ErrorBoundary>
  );
}

export default App;