import { Suspense } from 'react';

import { Routes, Route } from 'react-router-dom';

import { GlassShowcase } from '@/components/GlassShowcase';
import { AppLayout } from '@/components/layout/AppLayout';
import { PublicLayout } from '@/components/layout/PublicLayout';
import { NardoGreyShowcase } from '@/components/NardoGreyShowcase';
import ProtectedRoute from '@/components/routing/ProtectedRoute';
import { ThemeDocumentation } from '@/components/ThemeDocumentation';
import { BrandingSettings } from '@/features/org/BrandingSettings';
import { DomainSettings } from '@/features/org/DomainSettings';
import { AdminPage } from '@/pages/AdminPage';
import { TerritoryManagers } from '@/pages/admin/TerritoryManagers';
import SuperAdminRoute from '@/components/routing/SuperAdminRoute';
import { AnalyticsPage } from '@/pages/AnalyticsPage';
import { CheckoutCancelPage } from '@/pages/CheckoutCancelPage';
import { CheckoutSuccessPage } from '@/pages/CheckoutSuccessPage';
import { CustomersPage } from '@/pages/CustomersPage';
import { DashboardPage } from '@/pages/DashboardPage';
import { OrdersPage } from '@/pages/OrdersPage';
import { 
  ErrorPage, 
  NotFoundPage, 
  UnauthorizedPage, 
  ServerErrorPage, 
  NetworkErrorPage 
} from '@/pages/ErrorPage';
import { EventCreatePage } from '@/pages/events/EventCreatePage';
import { EventsIndexPage } from '@/pages/events/EventsIndexPage';
import { HomePage } from '@/pages/HomePage';
import LoginPage from '@/pages/LoginPage';
import { SettingsPage } from '@/pages/SettingsPage';
import { TicketsPage } from '@/pages/TicketsPage';
import { TicketConfigDemo } from '@/pages/TicketConfigDemo';

// Static pages
import { AboutPage } from '@/pages/AboutPage';
import { ContactPage } from '@/pages/ContactPage';
import { TermsPage } from '@/pages/TermsPage';
import { PrivacyPage } from '@/pages/PrivacyPage';
import { CalendarPage } from '@/pages/CalendarPage';

import { BrandingSettings as AdminBrandingSettings } from '../pages/admin/BrandingSettings';

// Lazy-loaded components with their skeleton fallbacks
import { 
  EventDetailPage,
  GateOpsPage, 
  PaymentSettings,
  ScannerPage,
  SeatMapDemo,
  TicketPurchaseDemo,
  EventDetailPageSkeleton,
  GateOpsPageSkeleton,
  PaymentSettingsPageSkeleton,
  ScannerPageSkeleton
} from './lazy-routes';

/**
 * Comprehensive routing configuration for Black Canyon Tickets
 * Implements role-based access control with protected routes
 * 
 * Role hierarchy:
 * - superadmin: Full platform access
 * - orgAdmin: Organization-level administration
 * - territoryManager: Territory-specific management
 * - staff: Basic event and ticket access
 */
export function AppRoutes(): JSX.Element {
  return (
    <Routes>
      {/* Public routes - no authentication required */}
      <Route path="/login" element={<LoginPage />} />
      <Route path="/home" element={<HomePage />} />
      <Route path="/showcase" element={<GlassShowcase />} />
      <Route path="/nardo" element={<NardoGreyShowcase />} />
      <Route path="/docs" element={<ThemeDocumentation />} />
      <Route path="/ticket-config-demo" element={<TicketConfigDemo />} />
      <Route path="/seat-map-demo" element={
        <Suspense fallback={<div className="flex items-center justify-center h-screen">Loading seat map demo...</div>}>
          <SeatMapDemo />
        </Suspense>
      } />
      <Route path="/ticket-purchase-demo" element={
        <Suspense fallback={<div className="flex items-center justify-center h-screen">Loading ticket purchase demo...</div>}>
          <TicketPurchaseDemo />
        </Suspense>
      } />
      
      {/* Static content pages */}
      <Route path="/about" element={<AboutPage />} />
      <Route path="/contact" element={<ContactPage />} />
      <Route path="/terms" element={<PublicLayout><TermsPage /></PublicLayout>} />
      <Route path="/privacy" element={<PublicLayout><PrivacyPage /></PublicLayout>} />
      <Route path="/calendar" element={<CalendarPage />} />
      
      {/* Public checkout routes */}
      <Route path="/checkout/success" element={<CheckoutSuccessPage />} />
      <Route path="/checkout/cancel" element={<CheckoutCancelPage />} />
      
      {/* Main public route - no authentication required */}
      <Route path="/" element={<HomePage />} />
      
      {/* Protected dashboard routes */}
      <Route 
        path="/dashboard" 
        element={
          <ProtectedRoute>
            <AppLayout title="Dashboard" subtitle="Overview of your events and performance">
              <DashboardPage />
            </AppLayout>
          </ProtectedRoute>
        } 
      />
      
      {/* Events management routes */}
      <Route 
        path="/events" 
        element={
          <ProtectedRoute>
            <AppLayout title="Events" subtitle="Manage your upcoming events">
              <EventsIndexPage />
            </AppLayout>
          </ProtectedRoute>
        } 
      />
      
      {/* Event creation route */}
      <Route 
        path="/events/new" 
        element={
          <ProtectedRoute roles={['orgAdmin', 'superadmin']}>
            <EventCreatePage />
          </ProtectedRoute>
        } 
      />
      
      {/* Event detail page - requires staff+ roles */}
      <Route 
        path="/events/:eventId" 
        element={
          <ProtectedRoute roles={['staff', 'territoryManager', 'orgAdmin', 'superadmin']}>
            <AppLayout title="Event Details" subtitle="View and manage event details">
              <Suspense fallback={<EventDetailPageSkeleton />}>
                <EventDetailPage />
              </Suspense>
            </AppLayout>
          </ProtectedRoute>
        } 
      />
      
      {/* Gate operations - staff+ roles only */}
      <Route 
        path="/events/:eventId/gate-ops" 
        element={
          <ProtectedRoute roles={['staff', 'territoryManager', 'orgAdmin', 'superadmin']}>
            <AppLayout title="Gate Operations" subtitle="Live scanning monitoring and control">
              <Suspense fallback={<GateOpsPageSkeleton />}>
                <GateOpsPage />
              </Suspense>
            </AppLayout>
          </ProtectedRoute>
        } 
      />
      
      {/* Organization payment settings - orgAdmin+ only */}
      <Route 
        path="/org/:orgId/payments" 
        element={
          <ProtectedRoute roles={['orgAdmin', 'superadmin']}>
            <AppLayout title="Payment Settings" subtitle="Connect your Stripe account to accept payments">
              <Suspense fallback={<PaymentSettingsPageSkeleton />}>
                <PaymentSettings />
              </Suspense>
            </AppLayout>
          </ProtectedRoute>
        } 
      />
      
      {/* Additional organization routes */}
      <Route 
        path="/org/:orgId/branding" 
        element={
          <ProtectedRoute roles={['orgAdmin', 'superadmin']}>
            <AppLayout title="Branding Settings" subtitle="Customize your organization's visual identity">
              <BrandingSettings />
            </AppLayout>
          </ProtectedRoute>
        } 
      />
      
      {/* Admin branding settings - simplified route */}
      <Route 
        path="/admin/branding" 
        element={
          <ProtectedRoute roles={['superadmin']}>
            <AdminBrandingSettings />
          </ProtectedRoute>
        } 
      />
      <Route 
        path="/org/:orgId/domains" 
        element={
          <ProtectedRoute roles={['orgAdmin', 'superadmin']}>
            <AppLayout title="Domain Settings" subtitle="Manage custom domains for your platform">
              <DomainSettings />
            </AppLayout>
          </ProtectedRoute>
        } 
      />
      
      {/* Scanner route - staff+ roles only */}
      <Route 
        path="/scan" 
        element={
          <ProtectedRoute roles={['staff', 'territoryManager', 'orgAdmin', 'superadmin']}>
            <Suspense fallback={<ScannerPageSkeleton />}>
              <ScannerPage />
            </Suspense>
          </ProtectedRoute>
        } 
      />
      
      {/* Order management */}
      <Route 
        path="/orders" 
        element={
          <ProtectedRoute>
            <AppLayout title="Orders" subtitle="Track and manage customer orders across all events">
              <OrdersPage />
            </AppLayout>
          </ProtectedRoute>
        } 
      />

      {/* Ticket management */}
      <Route 
        path="/tickets" 
        element={
          <ProtectedRoute>
            <AppLayout title="Tickets" subtitle="Manage and track all issued tickets across your events">
              <TicketsPage />
            </AppLayout>
          </ProtectedRoute>
        } 
      />
      
      {/* Customer management */}
      <Route 
        path="/customers" 
        element={
          <ProtectedRoute>
            <AppLayout title="Customers" subtitle="Manage customer relationships and track purchase history">
              <CustomersPage />
            </AppLayout>
          </ProtectedRoute>
        } 
      />
      
      {/* Analytics */}
      <Route 
        path="/analytics" 
        element={
          <ProtectedRoute>
            <AppLayout title="Analytics" subtitle="View detailed performance metrics">
              <AnalyticsPage />
            </AppLayout>
          </ProtectedRoute>
        } 
      />
      
      {/* User settings */}
      <Route 
        path="/settings" 
        element={
          <ProtectedRoute>
            <AppLayout title="Settings" subtitle="Configure your account and preferences">
              <SettingsPage />
            </AppLayout>
          </ProtectedRoute>
        } 
      />
      
      {/* Territory Managers - superadmin only */}
      <Route 
        path="/admin/territory-managers" 
        element={
          <SuperAdminRoute>
            <TerritoryManagers />
          </SuperAdminRoute>
        } 
      />
      
      {/* Admin routes - admin role required */}
      <Route 
        path="/admin/*" 
        element={
          <ProtectedRoute roles={['superadmin']}>
            <AppLayout title="Admin" subtitle="Platform administration">
              <AdminPage />
            </AppLayout>
          </ProtectedRoute>
        } 
      />
      
      {/* Error routes */}
      <Route path="/unauthorized" element={<UnauthorizedPage />} />
      <Route path="/error/network" element={<NetworkErrorPage />} />
      <Route path="/error/server" element={<ServerErrorPage />} />
      <Route path="/error/timeout" element={<NetworkErrorPage />} />
      <Route path="/error" element={<ErrorPage />} />
      
      {/* 404 catch-all route - must be last */}
      <Route path="*" element={<NotFoundPage />} />
    </Routes>
  );
}

export default AppRoutes;