import React, { Component, ErrorInfo, ReactNode } from "react";
import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom";
import { CmsLayout } from "./components/CmsLayout";
import { useSession } from "./lib/auth-client";
import { AccountSettingsPage } from "./routes/AccountSettingsPage";
import { AgentDetailPage } from "./routes/AgentDetailPage";
import { AgentEditPage } from "./routes/AgentEditPage";
import { AgentNewPage } from "./routes/AgentNewPage";
import { AgentsPage } from "./routes/AgentsPage";
import { AuthCallbackPage } from "./routes/AuthCallbackPage";
import { AuthPage } from "./routes/AuthPage";
import { AuthVerifyPage } from "./routes/AuthVerifyPage";
import { AdminDashboardPage } from "./routes/admin/AdminDashboardPage";
import { AdminLayout } from "./routes/admin/AdminLayout";
import { AdminMachinesPage } from "./routes/admin/AdminMachinesPage";
import { AdminUsersPage } from "./routes/admin/AdminUsersPage";
import { BoardLabelsPage } from "./routes/BoardLabelsPage";
import { BoardPage } from "./routes/BoardPage";
import { BoardSettingsPage } from "./routes/BoardSettingsPage";
import { HomePage } from "./routes/HomePage";
import { LandingPage } from "./routes/LandingPage";
import { MachineDetailPage } from "./routes/MachineDetailPage";
import { MachinesPage } from "./routes/MachinesPage";
import { MaintainerDetailPage } from "./routes/MaintainerDetailPage";
import { MockChatPage } from "./routes/MockChatPage";
import { NewBoardPage } from "./routes/NewBoardPage";
import { OnboardingPage } from "./routes/OnboardingPage";
import { ProjectDetailPage } from "./routes/ProjectDetailPage";
import { ProjectsPage } from "./routes/ProjectsPage";
import { RepositoriesPage } from "./routes/RepositoriesPage";
import { SharePage } from "./routes/SharePage";
import { SkillsPage } from "./routes/SkillsPage";

interface ErrorBoundaryProps {
  children?: ReactNode;
}

interface ErrorBoundaryState {
  hasError: boolean;
  error?: Error;
}

class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
  public state: ErrorBoundaryState = {
    hasError: false,
  };

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

  public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
    console.error("Uncaught React error:", error, errorInfo);
  }

  public render() {
    if (this.state.hasError) {
      return (
        <div className="min-h-screen bg-background text-foreground flex items-center justify-center p-6 text-center">
          <div className="max-w-md space-y-4 border p-6 rounded-lg bg-card shadow-lg">
            <h2 className="text-2xl font-bold text-destructive">Đã xảy ra lỗi hệ thống!</h2>
            <p className="text-sm text-muted-foreground">{this.state.error?.message || "Không thể tải giao diện ứng dụng."}</p>
            <button
              onClick={() => window.location.reload()}
              className="px-4 py-2 bg-primary text-primary-foreground rounded text-sm font-medium hover:bg-primary/90"
            >
              Tải Lại Trang
            </button>
          </div>
        </div>
      );
    }

    return this.props.children;
  }
}

function ProtectedRoute({ children }: { children: React.ReactNode }) {
  const { data: session, isPending } = useSession();

  if (isPending) return null;
  if (!session) return <Navigate to="/auth" replace />;
  return <>{children}</>;
}

function AdminRoute({ children }: { children: React.ReactNode }) {
  const { data: session, isPending } = useSession();

  if (isPending) return null;
  if (!session) return <Navigate to="/auth" replace />;
  if ((session.user as any).role !== "admin") return <Navigate to="/" replace />;
  return <>{children}</>;
}

function RootRoute() {
  const { data: session, isPending } = useSession();

  if (isPending) return null;
  if (!session) return <LandingPage />;
  return <Navigate to="/projects" replace />;
}

export function App() {
  return (
    <ErrorBoundary>
      <BrowserRouter>
        <Routes>
          <Route path="/auth" element={<AuthPage />} />
          <Route path="/auth/callback" element={<AuthCallbackPage />} />
          <Route path="/auth/verify" element={<AuthVerifyPage />} />
          <Route path="/landing" element={<LandingPage />} />
          <Route path="/mock/chat" element={<MockChatPage />} />
          <Route path="/share/:slug" element={<SharePage />} />
          <Route path="/" element={<RootRoute />} />
          <Route
            path="/onboarding"
            element={
              <ProtectedRoute>
                <OnboardingPage />
              </ProtectedRoute>
            }
          />
          <Route
            element={
              <ProtectedRoute>
                <CmsLayout />
              </ProtectedRoute>
            }
          >
            <Route path="/projects" element={<ProjectsPage />} />
            <Route path="/projects/:projectId" element={<ProjectDetailPage />} />
            <Route path="/projects/:projectId/board" element={<BoardPage />} />
            <Route path="/projects/:projectId/kanban" element={<BoardPage />} />
            <Route path="/home" element={<HomePage />} />
            <Route path="/boards/new" element={<NewBoardPage />} />
            <Route path="/boards/:boardId" element={<BoardPage />} />
            <Route path="/boards/:boardId/settings" element={<BoardSettingsPage />} />
            <Route path="/boards/:boardId/maintainers/:maintainerId" element={<MaintainerDetailPage />} />
            <Route path="/boards/:boardId/labels" element={<BoardLabelsPage />} />
            <Route path="/machines" element={<MachinesPage />} />
            <Route path="/machines/:id" element={<MachineDetailPage />} />
            <Route path="/agents" element={<AgentsPage />} />
            <Route path="/agents/new" element={<AgentNewPage />} />
            <Route path="/agents/:id" element={<AgentDetailPage />} />
            <Route path="/agents/:id/edit" element={<AgentEditPage />} />
            <Route path="/repositories" element={<RepositoriesPage />} />
            <Route path="/skills" element={<SkillsPage />} />
            <Route path="/settings" element={<Navigate to="/settings/profile" replace />} />
            <Route path="/settings/*" element={<AccountSettingsPage />} />
          </Route>
          <Route
            path="/admin"
            element={
              <AdminRoute>
                <AdminLayout />
              </AdminRoute>
            }
          >
            <Route index element={<AdminDashboardPage />} />
            <Route path="users" element={<AdminUsersPage />} />
            <Route path="machines" element={<AdminMachinesPage />} />
          </Route>
        </Routes>
      </BrowserRouter>
    </ErrorBoundary>
  );
}