import '@fontsource/inter/400.css';

import React from 'react';
import { createRoot } from 'react-dom/client';
import {
  HashRouter,
  Navigate,
  Outlet,
  Route,
  Routes,
} from 'react-router-dom';
import './styles/index.css';
import DocumentsRoute from './app/DocumentsRoute';
import DropOverlay from './app/DropOverlay';
import LoginRoute from './app/LoginRoute';
import SettingsRoute from './app/SettingsRoute';
import { AppStateProvider } from './app/appState';
import { useDocumentsPreferences } from './app/useDocumentsPreferences';
import { AppShellContext } from './appShellContext';
import useDocumentsWorkspace from './hooks/documents/useDocumentsWorkspace';
import UploadQueueOverlay from './app/UploadQueueOverlay';

const AppLayout: React.FC = () => {
  const documentsPreferences = useDocumentsPreferences();
  const {
    appStatus,
    location,
    shellRef,
    dropOverlayState,
    managementModals,
    contextValue,
    settingsOpen,
    closeSettings,
  } = useDocumentsWorkspace({
    documentsViewMode: documentsPreferences.documentsViewMode,
    documentsSortField: documentsPreferences.documentsSortField,
    documentsSortDirection: documentsPreferences.documentsSortDirection,
    documentsSortFieldRef: documentsPreferences.documentsSortFieldRef,
    documentsSortDirectionRef: documentsPreferences.documentsSortDirectionRef,
    onDocumentsViewModeChange: documentsPreferences.handleDocumentsViewModeChange,
    onDocumentsSortFieldChange: documentsPreferences.handleDocumentsSortFieldChange,
    onDocumentsSortDirectionToggle: documentsPreferences.handleDocumentsSortDirectionToggle,
    searchIncludeDescendants: documentsPreferences.searchIncludeDescendants,
    onSetSearchIncludeDescendants: documentsPreferences.setSearchIncludeDescendants,
    sortRefreshReadyRef: documentsPreferences.sortRefreshReadyRef,
  });

  if (['logged-out', 'authenticating', 'selecting-tenant'].includes(appStatus)) {
    const redirectTarget = `${location.pathname}${location.search}${location.hash || ''}`;
    return (
      <Navigate
        to="/account/login"
        replace
        state={{ from: redirectTarget }}
      />
    );
  }

  return (
    <AppShellContext.Provider value={contextValue}>
      <div className="app-shell" ref={shellRef}>
        <DropOverlay
          active={dropOverlayState.active}
          folderName={dropOverlayState.folderName}
        />
        <UploadQueueOverlay
          queue={contextValue.uploadQueue || []}
          onClearQueue={contextValue.clearUploadQueue}
        />
        <Outlet />
        {managementModals}
        {settingsOpen ? (
          <SettingsRoute open onClose={closeSettings} />
        ) : null}
      </div>
    </AppShellContext.Provider>
  );
};

const AppRouter: React.FC = () => (
  <Routes>
    <Route path="/account/login" element={<LoginRoute />} />
    <Route element={<AppLayout />}>
      <Route path="/" element={<Navigate to="/documents" replace />} />
      <Route path="/documents" element={<DocumentsRoute />} />
      <Route path="/documents/folder/:folderId" element={<DocumentsRoute />} />
      <Route path="/documents/:documentId" element={<DocumentsRoute />} />
      <Route path="*" element={<Navigate to="/documents" replace />} />
    </Route>
  </Routes>
);

const container = document.getElementById('app');

if (!container) {
  throw new Error('App root element #app not found');
}

const root = createRoot(container);
root.render(
  <AppStateProvider>
    <HashRouter>
      <AppRouter />
    </HashRouter>
  </AppStateProvider>,
);