import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import { QueryClientProvider } from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import { queryClient } from './lib/queryClient';
import './styles/index.css';

// Import route components (will be implemented in next phases)
import { Dashboard } from './routes/Dashboard';
import { Login } from './routes/Login';
import { NewJob } from './routes/jobs/NewJob';
import { JobsList } from './routes/jobs/JobsList';
import { JobDetail } from './routes/jobs/JobDetail';
import { QCList } from './routes/admin/QCList';
import { QCDetail } from './routes/admin/QCDetail';
import { FinalList } from './routes/admin/FinalList';
import { FinalDetail } from './routes/admin/FinalDetail';
import { UserList } from './routes/admin/UserList';
import { UserDetail } from './routes/admin/UserDetail';
import { ClientList } from './routes/admin/ClientList';
import { ClientDetail } from './routes/admin/ClientDetail';
import { GlossaryList } from './routes/admin/glossaries/GlossaryList';
import { GlossaryUpload } from './routes/admin/glossaries/GlossaryUpload';
import { GlossaryDetail } from './routes/admin/glossaries/GlossaryDetail';
import { AuditLog } from './routes/admin/AuditLog';
import { FailuresList } from './routes/admin/FailuresList';
import { BriefsList } from './routes/briefs/BriefsList';
import { NewBrief } from './routes/briefs/NewBrief';
import { BriefDetail } from './routes/briefs/BriefDetail';
import { LinguistQueue } from './routes/jobs/LinguistQueue';
import { ReviewerQueue } from './routes/jobs/ReviewerQueue';
import { Downloads } from './routes/Downloads';
import { Help } from './routes/Help';
import { Profile } from './routes/Profile';
import { ShareView } from './routes/ShareView';
import { AcceptInvite } from './routes/AcceptInvite';
import { NoAccess } from './routes/NoAccess';
import { OrgSettingsLayout } from './routes/org/OrgSettingsLayout';
import { OrgMembersPage } from './routes/org/OrgMembersPage';
import { OrgTeamsPage } from './routes/org/OrgTeamsPage';
import { OrgInvitationsPage } from './routes/org/OrgInvitationsPage';
import { OrgGeneralPage } from './routes/org/OrgGeneralPage';
import { RequireAuth } from './components/Auth/RequireAuth';
import { RoleGate } from './components/Auth/RoleGate';
import { ErrorBoundary } from './components/ErrorBoundary';
import { ToastContainer } from './components/Toast/Toast';
import { ToastProvider, useToastContext } from './contexts/ToastContext';
import { NotificationProvider } from './contexts/NotificationContext';
import { GlobalWebSocketProvider } from './contexts/GlobalWebSocketContext';
import { Layout } from './components/Layout/Layout';

// Helper component to wrap authenticated routes with Layout
function AuthenticatedRoute({ children }: { children: React.ReactNode }) {
  return (
    <RequireAuth>
      <Layout>
        {children}
      </Layout>
    </RequireAuth>
  );
}

function AppContent() {
  const { toasts, removeToast } = useToastContext();

  return (
    <Router basename="/video-accessibility">
      <div className="min-h-screen bg-gray-50">
        <Routes>
            <Route path="/login" element={<Login />} />
            <Route path="/share/:token" element={<ShareView />} />
            <Route path="/accept-invite" element={<AcceptInvite />} />
            <Route path="/no-access" element={
              <AuthenticatedRoute>
                <NoAccess />
              </AuthenticatedRoute>
            } />
            <Route path="/org/:orgSlug/settings" element={
              <AuthenticatedRoute>
                <OrgSettingsLayout />
              </AuthenticatedRoute>
            }>
              <Route index element={<OrgMembersPage />} />
              <Route path="members" element={<OrgMembersPage />} />
              <Route path="teams" element={<OrgTeamsPage />} />
              <Route path="invitations" element={<OrgInvitationsPage />} />
              <Route path="general" element={<OrgGeneralPage />} />
            </Route>
            <Route path="/" element={
              <AuthenticatedRoute>
                <Dashboard />
              </AuthenticatedRoute>
            } />
            <Route path="/jobs" element={
              <AuthenticatedRoute>
                <JobsList />
              </AuthenticatedRoute>
            } />
            <Route path="/jobs/new" element={
              <AuthenticatedRoute>
                <NewJob />
              </AuthenticatedRoute>
            } />
            <Route path="/jobs/:id" element={
              <AuthenticatedRoute>
                <JobDetail />
              </AuthenticatedRoute>
            } />
            <Route path="/admin/qc" element={
              <AuthenticatedRoute>
                <RoleGate allowedRoles={['reviewer', 'linguist', 'production', 'admin']}>
                  <QCList />
                </RoleGate>
              </AuthenticatedRoute>
            } />
            <Route path="/admin/qc/:id" element={
              <AuthenticatedRoute>
                <RoleGate allowedRoles={['reviewer', 'linguist', 'production', 'admin']}>
                  <QCDetail />
                </RoleGate>
              </AuthenticatedRoute>
            } />
            <Route path="/admin/final" element={
              <AuthenticatedRoute>
                <RoleGate allowedRoles={['reviewer', 'linguist', 'production', 'admin', 'project_manager']}>
                  <FinalList />
                </RoleGate>
              </AuthenticatedRoute>
            } />
            <Route path="/admin/final/:id" element={
              <AuthenticatedRoute>
                <RoleGate allowedRoles={['reviewer', 'linguist', 'production', 'admin', 'project_manager']}>
                  <FinalDetail />
                </RoleGate>
              </AuthenticatedRoute>
            } />
            <Route path="/admin/users" element={
              <AuthenticatedRoute>
                <RoleGate allowedRoles={['admin']}>
                  <UserList />
                </RoleGate>
              </AuthenticatedRoute>
            } />
            <Route path="/admin/users/:id" element={
              <AuthenticatedRoute>
                <RoleGate allowedRoles={['admin']}>
                  <UserDetail />
                </RoleGate>
              </AuthenticatedRoute>
            } />
            <Route path="/admin/clients" element={
              <AuthenticatedRoute>
                <RoleGate allowedRoles={['admin', 'project_manager']}>
                  <ClientList />
                </RoleGate>
              </AuthenticatedRoute>
            } />
            <Route path="/admin/clients/:clientId" element={
              <AuthenticatedRoute>
                <RoleGate allowedRoles={['admin', 'project_manager']}>
                  <ClientDetail />
                </RoleGate>
              </AuthenticatedRoute>
            } />
            <Route path="/admin/clients/:clientId/glossaries" element={
              <AuthenticatedRoute>
                <RoleGate allowedRoles={['admin', 'project_manager', 'linguist', 'reviewer', 'production']}>
                  <GlossaryList />
                </RoleGate>
              </AuthenticatedRoute>
            } />
            <Route path="/admin/clients/:clientId/glossaries/upload" element={
              <AuthenticatedRoute>
                <RoleGate allowedRoles={['admin', 'project_manager']}>
                  <GlossaryUpload />
                </RoleGate>
              </AuthenticatedRoute>
            } />
            <Route path="/admin/clients/:clientId/glossaries/:glossaryId" element={
              <AuthenticatedRoute>
                <RoleGate allowedRoles={['admin', 'project_manager', 'linguist', 'reviewer', 'production']}>
                  <GlossaryDetail />
                </RoleGate>
              </AuthenticatedRoute>
            } />
            <Route path="/admin/audit-log" element={
              <AuthenticatedRoute>
                <RoleGate allowedRoles={['production', 'admin', 'project_manager']}>
                  <AuditLog />
                </RoleGate>
              </AuthenticatedRoute>
            } />
            <Route path="/admin/failures" element={
              <AuthenticatedRoute>
                <RoleGate allowedRoles={['production', 'admin']}>
                  <FailuresList />
                </RoleGate>
              </AuthenticatedRoute>
            } />
            <Route path="/briefs" element={
              <AuthenticatedRoute>
                <RoleGate allowedRoles={['client', 'project_manager', 'admin', 'production']}>
                  <BriefsList />
                </RoleGate>
              </AuthenticatedRoute>
            } />
            <Route path="/briefs/new" element={
              <AuthenticatedRoute>
                <RoleGate allowedRoles={['client', 'project_manager', 'admin', 'production']}>
                  <NewBrief />
                </RoleGate>
              </AuthenticatedRoute>
            } />
            <Route path="/briefs/:id" element={
              <AuthenticatedRoute>
                <RoleGate allowedRoles={['client', 'project_manager', 'admin', 'production']}>
                  <BriefDetail />
                </RoleGate>
              </AuthenticatedRoute>
            } />
            <Route path="/qc/queue" element={
              <AuthenticatedRoute>
                <RoleGate allowedRoles={['linguist', 'reviewer', 'production', 'admin']}>
                  <LinguistQueue />
                </RoleGate>
              </AuthenticatedRoute>
            } />
            <Route path="/qc/reviewer-queue" element={
              <AuthenticatedRoute>
                <RoleGate allowedRoles={['reviewer', 'admin']}>
                  <ReviewerQueue />
                </RoleGate>
              </AuthenticatedRoute>
            } />
            <Route path="/downloads/:id" element={
              <AuthenticatedRoute>
                <Downloads />
              </AuthenticatedRoute>
            } />
            <Route path="/help" element={
              <AuthenticatedRoute>
                <Help />
              </AuthenticatedRoute>
            } />
            <Route path="/profile" element={
              <AuthenticatedRoute>
                <Profile />
              </AuthenticatedRoute>
            } />
          </Routes>
        <ToastContainer toasts={toasts} onRemove={removeToast} />
        </div>
      </Router>
    );
}

function App() {
  return (
    <ErrorBoundary>
      <QueryClientProvider client={queryClient}>
        <NotificationProvider>
          <ToastProvider>
            <GlobalWebSocketProvider>
              <AppContent />
            </GlobalWebSocketProvider>
            <ReactQueryDevtools initialIsOpen={false} />
          </ToastProvider>
        </NotificationProvider>
      </QueryClientProvider>
    </ErrorBoundary>
  );
}

export default App;
