import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
import { Toaster } from 'react-hot-toast';
// DISABLED: Speed Insights removed for performance
// import { SpeedInsights } from '@vercel/speed-insights/react';
import { lazy, Suspense, useState, useEffect } from 'react';
import { AuthProvider } from './contexts/AuthContext';
import { ThemeProvider } from './contexts/ThemeContext';
import { WorkspaceProvider } from './contexts/WorkspaceContext';
// DISABLED: Analytics tracking removed for performance
// import { usePageTracking } from './hooks/useAnalytics';
import ProtectedRoute from './components/ProtectedRoute';
import WorkspaceRoleRoute from './components/WorkspaceRoleRoute';
import MainLayout from './layouts/MainLayout';
import ClientLayout from './layouts/ClientLayout';
import PublicOnlyRoute from './components/PublicOnlyRoute';
import useDirection from './hooks/useDirection';
import PaymentWall from './components/PaymentWall';
import ErrorBoundary from './components/ErrorBoundary';

// Loading component
const PageLoader = () => (
  <div className="flex items-center justify-center min-h-screen">
    <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600"></div>
  </div>
);

// Lazy load all pages
const Login = lazy(() => import('./pages/Login'));
const ForgotPassword = lazy(() => import('./pages/ForgotPassword'));
const ResetPassword = lazy(() => import('./pages/ResetPassword'));
const Dashboard = lazy(() => import('./pages/Dashboard'));
const Landing = lazy(() => import('./pages/Landing'));
const Register = lazy(() => import('./pages/Register'));
const About = lazy(() => import('./pages/About'));
const Contact = lazy(() => import('./pages/Contact'));
const Privacy = lazy(() => import('./pages/Privacy'));
const Terms = lazy(() => import('./pages/Terms'));
const Clients = lazy(() => import('./pages/Clients'));
const ClientDetail = lazy(() => import('./pages/ClientDetail'));
const Projects = lazy(() => import('./pages/Projects'));
const ProjectDetail = lazy(() => import('./pages/ProjectDetail'));
const Tasks = lazy(() => import('./pages/Tasks'));
const Proposals = lazy(() => import('./pages/Proposals'));
const ProposalDetail = lazy(() => import('./pages/ProposalDetail'));
const Contracts = lazy(() => import('./pages/Contracts'));
const ContractDetail = lazy(() => import('./pages/ContractDetail'));
const Reports = lazy(() => import('./pages/Reports'));
const TimeTracking = lazy(() => import('./pages/TimeTracking'));
const Budgets = lazy(() => import('./pages/Budgets'));
const BudgetDetail = lazy(() => import('./pages/BudgetDetail'));
const Invoices = lazy(() => import('./pages/Invoices'));
const InvoiceDetail = lazy(() => import('./pages/InvoiceDetail'));
const Payments = lazy(() => import('./pages/Payments'));
const SubscriptionPlans = lazy(() => import('./pages/SubscriptionPlans'));
const Settings = lazy(() => import('./pages/Settings'));
const Templates = lazy(() => import('./pages/Templates'));
const Notifications = lazy(() => import('./pages/Notifications'));
const Notes = lazy(() => import('./pages/Notes'));
const Activities = lazy(() => import('./pages/Activities'));
const AcceptInvitation = lazy(() => import('./pages/AcceptInvitation'));
const PublicCV = lazy(() => import('./pages/PublicCV'));
const ClientDashboard = lazy(() => import('./pages/client/ClientDashboard'));
const ClientProjects = lazy(() => import('./pages/client/ClientProjects'));
const ClientProjectDetail = lazy(() => import('./pages/client/ClientProjectDetail'));
const ClientContracts = lazy(() => import('./pages/client/ClientContracts'));
const ClientContractDetail = lazy(() => import('./pages/client/ClientContractDetail'));
const ClientProposals = lazy(() => import('./pages/client/ClientProposals'));
const ClientProposalDetail = lazy(() => import('./pages/client/ClientProposalDetail'));
const ClientInvoices = lazy(() => import('./pages/client/ClientInvoices'));
const ClientInvoiceDetail = lazy(() => import('./pages/client/ClientInvoiceDetail'));
const RecurringInvoices = lazy(() => import('./pages/RecurringInvoices'));
const ReportIssue = lazy(() => import('./pages/ReportIssue'));
const NotFound = lazy(() => import('./pages/NotFound'));
const AdminDashboard = lazy(() => import('./pages/AdminDashboard'));
const ComingSoon = lazy(() => import('./pages/ComingSoon'));
const WorkspaceSettings = lazy(() => import('./pages/WorkspaceSettings'));
const AcceptWorkspaceInvitation = lazy(() => import('./pages/AcceptWorkspaceInvitation'));

// Component to handle page tracking inside Router context
function AppRoutes() {
  // DISABLED: Automatic page tracking disabled for performance
  // usePageTracking();

  return (
    <Suspense fallback={<PageLoader />}>
      <Routes>
        <Route element={<PublicOnlyRoute />}>
          <Route path="/" element={<Landing />} />
          <Route path="/register" element={<Register />} />
          <Route path="/login" element={<Login />} />
          <Route path="/forgot-password" element={<ForgotPassword />} />
          <Route path="/reset-password/:token" element={<ResetPassword />} />
        </Route>

        {/* Public Pages */}
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
        <Route path="/privacy" element={<Privacy />} />
        <Route path="/terms" element={<Terms />} />

        {/* Client invitation acceptance (public) */}
        <Route path="/invitation/:token" element={<AcceptInvitation />} />

        {/* Workspace invitation acceptance (public) */}
        <Route path="/workspace/invitation/:token" element={<AcceptWorkspaceInvitation />} />

        {/* Public CV (public) */}
        <Route path="/cv/:slug" element={<PublicCV />} />

        {/* Client Portal Routes - Only for clients */}
        <Route path="/client" element={
          <ProtectedRoute allowedRoles={['client']}>
            <ClientLayout />
          </ProtectedRoute>
        }>
          <Route path="dashboard" element={<ClientDashboard />} />
          <Route path="projects" element={<ClientProjects />} />
          <Route path="projects/:id" element={<ClientProjectDetail />} />
          <Route path="contracts" element={<ClientContracts />} />
          <Route path="contracts/:id" element={<ClientContractDetail />} />
          <Route path="proposals" element={<ClientProposals />} />
          <Route path="proposals/:id" element={<ClientProposalDetail />} />
          <Route path="invoices" element={<ClientInvoices />} />
          <Route path="invoices/:id" element={<ClientInvoiceDetail />} />
        </Route>

        {/* Freelancer Routes - Only for freelancers */}
        <Route element={
          <ProtectedRoute allowedRoles={['freelancer']}>
            <MainLayout />
          </ProtectedRoute>
        }>
          <Route path="/dashboard" element={
            <WorkspaceRoleRoute requireAdminOrOwner>
              <Dashboard />
            </WorkspaceRoleRoute>
          } />
          <Route path="/clients" element={
            <WorkspaceRoleRoute requireAdminOrOwner>
              <Clients />
            </WorkspaceRoleRoute>
          } />
          <Route path="/clients/:id" element={
            <WorkspaceRoleRoute requireAdminOrOwner>
              <ClientDetail />
            </WorkspaceRoleRoute>
          } />
          <Route path="/proposals" element={
            <WorkspaceRoleRoute requireAdminOrOwner>
              <Proposals />
            </WorkspaceRoleRoute>
          } />
          <Route path="/proposals/:id" element={
            <WorkspaceRoleRoute requireAdminOrOwner>
              <ProposalDetail />
            </WorkspaceRoleRoute>
          } />
          <Route path="/contracts" element={
            <WorkspaceRoleRoute requireAdminOrOwner>
              <Contracts />
            </WorkspaceRoleRoute>
          } />
          <Route path="/contracts/:id" element={
            <WorkspaceRoleRoute requireAdminOrOwner>
              <ContractDetail />
            </WorkspaceRoleRoute>
          } />
          <Route path="/reports" element={
            <WorkspaceRoleRoute requireAdminOrOwner>
              <Reports />
            </WorkspaceRoleRoute>
          } />
          <Route path="/budgets" element={
            <WorkspaceRoleRoute requireAdminOrOwner>
              <Budgets />
            </WorkspaceRoleRoute>
          } />
          <Route path="/budgets/:id" element={
            <WorkspaceRoleRoute requireAdminOrOwner>
              <BudgetDetail />
            </WorkspaceRoleRoute>
          } />
          <Route path="/invoices" element={
            <WorkspaceRoleRoute requireAdminOrOwner>
              <Invoices />
            </WorkspaceRoleRoute>
          } />
          <Route path="/invoices/:id" element={
            <WorkspaceRoleRoute requireAdminOrOwner>
              <InvoiceDetail />
            </WorkspaceRoleRoute>
          } />
          <Route path="/recurring-invoices" element={
            <WorkspaceRoleRoute requireAdminOrOwner>
              <RecurringInvoices />
            </WorkspaceRoleRoute>
          } />
          <Route path="/payments" element={
            <WorkspaceRoleRoute requireAdminOrOwner>
              <Payments />
            </WorkspaceRoleRoute>
          } />
          <Route path="/subscription" element={
            <WorkspaceRoleRoute requireAdminOrOwner>
              <ComingSoon />
            </WorkspaceRoleRoute>
          } />
          <Route path="/settings" element={
            <WorkspaceRoleRoute requireAdminOrOwner>
              <Settings />
            </WorkspaceRoleRoute>
          } />
          <Route path="/workspace/settings" element={
            <WorkspaceRoleRoute requireAdminOrOwner>
              <WorkspaceSettings />
            </WorkspaceRoleRoute>
          } />
          
          {/* Routes accessible to all workspace members */}
          <Route path="/projects" element={<Projects />} />
          <Route path="/projects/:id" element={<ProjectDetail />} />
          <Route path="/tasks" element={<Tasks />} />
          <Route path="/time" element={<TimeTracking />} />
          <Route path="/time-tracking" element={<TimeTracking />} />
          <Route path="/templates" element={
            <WorkspaceRoleRoute requireAdminOrOwner>
              <Templates />
            </WorkspaceRoleRoute>
          } />
          <Route path="/notifications" element={<Notifications />} />
          <Route path="/notes" element={<Notes />} />
          <Route path="/activities" element={<Activities />} />
          <Route path="/report-issue" element={<ReportIssue />} />
          <Route path="/system/admin" element={<AdminDashboard />} />
        </Route>

        <Route path="*" element={<NotFound />} />
      </Routes>
    </Suspense>
  );
}

function App() {
  useDirection();
  const [showPaywall, setShowPaywall] = useState(false);

  useEffect(() => {
    const handler = () => setShowPaywall(true);
    window.addEventListener('payment-required', handler);
    return () => window.removeEventListener('payment-required', handler);
  }, []);

  return (
    <ErrorBoundary>
      <Router>
        <ThemeProvider>
          <AuthProvider>
            <WorkspaceProvider>
              {showPaywall && <PaymentWall onClose={() => setShowPaywall(false)} />}
              <Toaster
                position="top-right"
                toastOptions={{
                  // Default options
                  duration: 3000,
                  style: {
                    background: 'var(--toast-bg, #fff)',
                    color: 'var(--toast-color, #363636)',
                  },
                  // Success
                  success: {
                    style: {
                      background: 'var(--toast-success-bg, #10b981)',
                      color: '#fff',
                    },
                    iconTheme: {
                      primary: '#fff',
                      secondary: '#10b981',
                    },
                  },
                  // Error
                  error: {
                    style: {
                      background: 'var(--toast-error-bg, #ef4444)',
                      color: '#fff',
                    },
                    iconTheme: {
                      primary: '#fff',
                      secondary: '#ef4444',
                    },
                  },
                }}
              />
              {/* DISABLED: Speed Insights removed for performance */}
              {/* <SpeedInsights /> */}
              <AppRoutes />
            </WorkspaceProvider>
          </AuthProvider>
        </ThemeProvider>
      </Router>
    </ErrorBoundary>
  );
}

export default App;