import { createBrowserRouter, RouterProvider, Navigate } from "react-router-dom";
import React from "react";
import ReactDOM from "react-dom/client";
import { AppThemeProvider } from "./theme";
import "./index.css";
// Pages will be imported as we migrate them
import { LoginPage } from "./pages/LoginPage";
import { AggregatorDemoPage } from "./pages/AggregatorDemoPage";
import { RegisterPage } from "./pages/RegisterPage";
import { ForgotPasswordPage } from "./pages/ForgotPasswordPage";
import { ResetPasswordPage } from "./pages/ResetPasswordPage";
import { VerifyPage } from "./pages/VerifyPage";
import { LandingPage } from "./pages/LandingPage";
import { ProtectedRoute } from "./pages/ProtectedRoute";
import { Sidebar } from "./pages/Sidebar";
import { DashboardPage } from "./pages/DashboardPage";
import { SuperAdminDashboardPage } from "./pages/SuperAdminDashboardPage";
import { AggregatorDashboardPage } from "./pages/AggregatorDashboardPage";
import { TemplatesPage } from "./pages/TemplatesPage";
import { CreateTemplatePage } from "./pages/CreateTemplatePage";
import { TemplateViewerPage } from "./pages/TemplateViewerPage";
import { ContactsPage } from "./pages/ContactsPage";
import { CampaignsPage } from "./pages/CampaignsPage";
import { CampaignDetailsPage } from "./pages/CampaignDetailsPage";
import { CampaignWizardPage } from "./pages/CampaignWizardPage";
import { ChatInboxPage } from "./pages/ChatInboxPage";
import { ChatPage } from "./pages/ChatPage";
import { ChatTemplatesPage } from "./pages/ChatTemplatesPage";
import { UsersPage } from "./pages/UsersPage";
import { AggregatorsPage } from "./pages/AggregatorsPage";
import { BusinessesPage } from "./pages/BusinessesPage";
import { BusinessDetailsPage } from "./pages/BusinessDetailsPage";
import { AggregatorBusinessesPage } from "./pages/AggregatorBusinessesPage";
import { UserWalletPage } from "./pages/UserWalletPage";
import { AggregatorWalletPage } from "./pages/AggregatorWalletPage";
import { AdminWalletPage } from "./pages/AdminWalletPage";
import { AdminLimitsPage } from "./pages/AdminLimitsPage";
import { WalletLogsPage } from "./pages/WalletLogsPage";
import { ProfilePage } from "./pages/ProfilePage";
import { EmbeddedSignupPage } from "./pages/EmbeddedSignupPage";
import { SuperAdminConfigPage } from "./pages/SuperAdminConfigPage";
import { AggregatorBillingConfigPage } from "./pages/AggregatorBillingConfigPage";
import { MessageAnalyticsPage } from "./pages/MessageAnalyticsPage";
import { BillingLogsPage } from "./pages/BillingLogsPage";
import { ChatbotSettingsPage } from "./pages/ChatbotSettingsPage";
import { ChatbotLeadsPage } from "./pages/ChatbotLeadsPage";
import { AgentDraftsPage } from "./pages/AgentDraftsPage";
import { AgentManagementPage } from "./pages/AgentManagementPage";
import { ChatbotManagementPage } from "./pages/ChatbotManagementPage";
import { ChatbotTestPage } from "./pages/ChatbotTestPage";
import { FeatureGuard } from "./pages/FeatureGuard";
import { InstagramPage } from "./pages/InstagramPage";

// Error Boundary Component
function ErrorBoundary() {
  return (
    <div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: '#f5f5f5' }}>
      <div style={{ maxWidth: '28rem', width: '100%', backgroundColor: 'white', boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1)', borderRadius: '0.5rem', padding: '1.5rem', textAlign: 'center' }}>
        <div style={{ fontSize: '3.75rem', marginBottom: '1rem' }}>⚠️</div>
        <h1 style={{ fontSize: '1.5rem', fontWeight: 700, color: '#111827', marginBottom: '0.5rem' }}>Oops! Something went wrong</h1>
        <p style={{ color: '#4b5563', marginBottom: '1.5rem' }}>We're sorry, but something unexpected happened.</p>
        <button 
          onClick={() => window.location.href = '/'}
          style={{ backgroundColor: '#3b82f6', color: 'white', fontWeight: 500, padding: '0.5rem 1rem', borderRadius: '0.5rem', border: 'none', cursor: 'pointer' }}
        >
          Go Home
        </button>
      </div>
    </div>
  );
}

// 404 Not Found Component
function NotFound() {
  return (
    <div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: '#f5f5f5' }}>
      <div style={{ maxWidth: '28rem', width: '100%', backgroundColor: 'white', boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1)', borderRadius: '0.5rem', padding: '1.5rem', textAlign: 'center' }}>
        <div style={{ fontSize: '3.75rem', marginBottom: '1rem', color: '#9ca3af' }}>🔍</div>
        <h1 style={{ fontSize: '1.5rem', fontWeight: 700, color: '#111827', marginBottom: '0.5rem' }}>Page Not Found</h1>
        <p style={{ color: '#4b5563', marginBottom: '1.5rem' }}>The page you're looking for doesn't exist.</p>
        <button 
          onClick={() => window.location.href = '/'}
          style={{ backgroundColor: '#3b82f6', color: 'white', fontWeight: 500, padding: '0.5rem 1rem', borderRadius: '0.5rem', border: 'none', cursor: 'pointer' }}
        >
          Go Home
        </button>
      </div>
    </div>
  );
}

function withSidebar(element: React.ReactNode) {
  return (
    <div style={{ display: 'flex' }}>
      <Sidebar />
      <div style={{ flex: 1 }}>{element}</div>
    </div>
  );
}

// Root redirect: if token exists, go to dashboard; otherwise go to login
function RootRedirect() {
  try {
    const token = localStorage.getItem('token');
    const userData = localStorage.getItem('user');
    if (token && userData) {
      return <Navigate to="/dashboard" replace />;
    }
  } catch {}
  return <Navigate to="/login" replace />;
}

// Role-based Dashboard Component
function RoleBasedDashboard() {
  try {
    const user = JSON.parse(localStorage.getItem('user') || '{}');
    
    if (user.role === 'super_admin') {
      return <SuperAdminDashboardPage />;
    } else if (user.role === 'aggregator') {
      return <AggregatorDashboardPage />;
    } else {
      return <DashboardPage />;
    }
  } catch (error) {
    console.error('Error in RoleBasedDashboard:', error);
    return <DashboardPage />;
  }
}

// Placeholder for pages that will be migrated
function ComingSoonPage({ pageName }: { pageName: string }) {
  return (
    <div style={{ padding: '2rem', textAlign: 'center' }}>
      <h1>{pageName} - Coming Soon</h1>
      <p>This page is being migrated to MUI. Check back soon!</p>
    </div>
  );
}

// Create router - will be expanded as we migrate pages
const router = createBrowserRouter([
  { 
    path: "/", 
    element: <RootRedirect />,
    errorElement: <ErrorBoundary />
  },
  { path: "/login", element: <LoginPage /> },
  { path: "/aggregatorDemo", element: <AggregatorDemoPage /> },
  { path: "/register", element: <RegisterPage /> },
  { path: "/forgot-password", element: <ForgotPasswordPage /> },
  { path: "/reset-password", element: <ResetPasswordPage /> },
  { path: "/verify", element: <VerifyPage /> },
  { 
    path: "/dashboard", 
    element: <ProtectedRoute>{withSidebar(<RoleBasedDashboard />)}</ProtectedRoute> 
  },
  {
    path: "/templates",
    element: <ProtectedRoute>{withSidebar(<TemplatesPage />)}</ProtectedRoute>
  },
      {
        path: "/templates/create",
        element: <ProtectedRoute>{withSidebar(<CreateTemplatePage />)}</ProtectedRoute>
      },
      {
        path: "/templates/:id",
        element: <ProtectedRoute>{withSidebar(<TemplateViewerPage />)}</ProtectedRoute>
      },
      {
        path: "/contacts",
        element: <ProtectedRoute>{withSidebar(<ContactsPage />)}</ProtectedRoute>
      },
      {
        path: "/campaigns",
        element: <ProtectedRoute>{withSidebar(<CampaignsPage />)}</ProtectedRoute>
      },
      {
        path: "/campaigns/:id",
        element: <ProtectedRoute>{withSidebar(<CampaignDetailsPage />)}</ProtectedRoute>
      },
      {
        path: "/campaigns/create",
        element: <ProtectedRoute>{withSidebar(<CampaignWizardPage />)}</ProtectedRoute>
      },
      {
        path: "/chat",
        element: <ProtectedRoute>{withSidebar(<ChatInboxPage />)}</ProtectedRoute>
      },
      {
        path: "/chat/simple",
        element: <ProtectedRoute>{withSidebar(<ChatPage />)}</ProtectedRoute>
      },
      {
        path: "/chat-templates",
        element: <ProtectedRoute>{withSidebar(<ChatTemplatesPage />)}</ProtectedRoute>
      },
      {
        path: "/users",
        element: <ProtectedRoute roles={['super_admin']}>{withSidebar(<UsersPage />)}</ProtectedRoute>
      },
      {
        path: "/aggregators",
        element: <ProtectedRoute roles={['super_admin']}>{withSidebar(<AggregatorsPage />)}</ProtectedRoute>
      },
      {
        path: "/businesses",
        element: <ProtectedRoute roles={['super_admin', 'aggregator']}>{withSidebar(<BusinessesPage />)}</ProtectedRoute>
      },
      {
        path: "/businesses/:id",
        element: <ProtectedRoute roles={['super_admin', 'aggregator']}>{withSidebar(<BusinessDetailsPage />)}</ProtectedRoute>
      },
      {
        path: "/aggregator/businesses",
        element: <ProtectedRoute roles={['aggregator']}>{withSidebar(<AggregatorBusinessesPage />)}</ProtectedRoute>
      },
      {
        path: "/wallet",
        element: <ProtectedRoute>{withSidebar(<UserWalletPage />)}</ProtectedRoute>
      },
      {
        path: "/aggregator/wallet",
        element: <ProtectedRoute roles={['aggregator']}>{withSidebar(<AggregatorWalletPage />)}</ProtectedRoute>
      },
      {
        path: "/admin/wallet",
        element: <ProtectedRoute roles={['super_admin']}>{withSidebar(<AdminWalletPage />)}</ProtectedRoute>
      },
      {
        path: "/admin/limits",
        element: <ProtectedRoute roles={['super_admin']}>{withSidebar(<AdminLimitsPage />)}</ProtectedRoute>
      },
      {
        path: "/wallet-logs",
        element: <ProtectedRoute>{withSidebar(<WalletLogsPage />)}</ProtectedRoute>
      },
      {
        path: "/profile",
        element: <ProtectedRoute>{withSidebar(<ProfilePage />)}</ProtectedRoute>
      },
      {
        path: "/setup",
        element: <ProtectedRoute>{withSidebar(<EmbeddedSignupPage />)}</ProtectedRoute>
      },
      {
        path: "/billing-config",
        element: <ProtectedRoute roles={['super_admin']}>{withSidebar(<SuperAdminConfigPage />)}</ProtectedRoute>
      },
      {
        path: "/aggregator/billing-config",
        element: <ProtectedRoute roles={['aggregator']}>{withSidebar(<AggregatorBillingConfigPage />)}</ProtectedRoute>
      },
      {
        path: "/message-analytics",
        element: <ProtectedRoute roles={['super_admin']}>{withSidebar(<MessageAnalyticsPage />)}</ProtectedRoute>
      },
      {
        path: "/billing",
        element: <ProtectedRoute>{withSidebar(<BillingLogsPage />)}</ProtectedRoute>
      },
      {
        path: "/chatbot-settings",
        element: <ProtectedRoute>{withSidebar(<ChatbotSettingsPage />)}</ProtectedRoute>
      },
      {
        path: "/chatbot-test",
        element: <ProtectedRoute>{withSidebar(<ChatbotTestPage />)}</ProtectedRoute>
      },
      {
        path: "/chatbot-leads",
        element: <ProtectedRoute>{withSidebar(<ChatbotLeadsPage />)}</ProtectedRoute>
      },
      {
        path: "/agent-drafts",
        element: <ProtectedRoute>{withSidebar(<AgentDraftsPage />)}</ProtectedRoute>
      },
      {
        path: "/chatbot-management",
        element: <ProtectedRoute roles={["super_admin"]}>{withSidebar(<ChatbotManagementPage />)}</ProtectedRoute>
      },
      {
        path: "/agent-management",
        element: <ProtectedRoute roles={["super_admin"]}>{withSidebar(<AgentManagementPage />)}</ProtectedRoute>
      },
      {
        path: "/instagram",
        element: (
          <ProtectedRoute>
            <FeatureGuard feature="instagram" redirectTo="/dashboard">
              {withSidebar(<InstagramPage />)}
            </FeatureGuard>
          </ProtectedRoute>
        )
      },
  { 
    path: "*", 
    element: <NotFound />,
    errorElement: <ErrorBoundary />
  },
]);

// Mount the app
const rootElement = document.getElementById("root");
if (!rootElement) {
  console.error("Root element not found!");
  document.body.innerHTML = '<div style="padding: 20px; color: red;">Error: Root element not found!</div>';
} else {
  console.log("Root element found, mounting React app...");
  try {
    ReactDOM.createRoot(rootElement).render(
      <React.StrictMode>
        <AppThemeProvider>
          <RouterProvider router={router} />
        </AppThemeProvider>
      </React.StrictMode>
    );
    console.log("React app mounted successfully");
  } catch (error) {
    console.error("Error mounting React app:", error);
    document.body.innerHTML = '<div style="padding: 20px; color: red;">Error mounting React app: ' + String(error) + '</div>';
  }
}