import { lazy, StrictMode, Suspense } from 'react';
import { createRoot } from 'react-dom/client';
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import '@fontsource/vt323/400.css';
import '@fontsource/ibm-plex-mono/400.css';
import '@fontsource/ibm-plex-mono/600.css';
// Schriften der übrigen Designs (nur @font-face; geladen wird eine Datei erst, wenn das Design sie nutzt)
import '@fontsource/chakra-petch/latin-400.css';
import '@fontsource/chakra-petch/latin-500.css';
import '@fontsource/chakra-petch/latin-600.css';
import '@fontsource/oxanium/latin-700.css';
import '@fontsource/oxanium/latin-800.css';
import '@fontsource/roboto/latin-400.css';
import '@fontsource/roboto/latin-500.css';
import '@fontsource/roboto/latin-700.css';
import '@fontsource/roboto-condensed/latin-500.css';
import '@fontsource/roboto-condensed/latin-700.css';
import { AuthProvider, useAuth } from './auth.jsx';
import Layout from './components/Layout.jsx';
import ThemeBackground from './components/ThemeBackground.jsx';
import { LinksProvider } from './links.jsx';
import Account from './pages/Account.jsx';
import Haushalt from './pages/Haushalt.jsx';
import Kanban from './pages/Kanban.jsx';
import KanbanBoard from './pages/KanbanBoard.jsx';
import Home from './pages/Home.jsx';
import Login from './pages/Login.jsx';
import Monitoring from './pages/Monitoring.jsx';
import NotFound from './pages/NotFound.jsx';
import Projects from './pages/Projects.jsx';
import Users from './pages/Users.jsx';
import './theme.js';
import './styles.css';
import './themes.css';

// Artikelseite inkl. Editor erst bei Bedarf laden, damit die Startseite schnell bleibt
const Project = lazy(() => import('./pages/Project.jsx'));
// Weltkarte (d3, Kartendaten) ebenfalls nur bei Bedarf
const Reisen = lazy(() => import('./pages/Reisen.jsx'));

const router = createBrowserRouter([
  {
    element: <Layout />,
    children: [
      { index: true, element: <Home /> },
      { path: 'projekte', element: <Projects /> },
      {
        path: 'projekte/:id',
        element: <Suspense fallback={<p className="hint">Lade …</p>}><Project /></Suspense>,
      },
      { path: 'haushalt', element: <Haushalt /> },
      { path: 'reisen', element: <Suspense fallback={<p className="hint">Lade …</p>}><Reisen /></Suspense> },
      { path: 'kanban', element: <Kanban /> },
      { path: 'kanban/:id', element: <KanbanBoard /> },
      { path: 'monitoring', element: <Monitoring /> },
      { path: 'konto', element: <Account /> },
      { path: 'benutzer', element: <Users /> },
      { path: '*', element: <NotFound /> },
    ],
  },
]);

// Ohne Anmeldung gibt es nur die Login- bzw. Einrichtungsseite
function App() {
  const { state, user, error, retry } = useAuth();

  if (state === 'loading') {
    return (
      <div className="auth-page">
        {error ? (
          <div className="card auth-card">
            <p className="error">Server nicht erreichbar: {error}</p>
            <button className="btn" type="button" onClick={retry}>Erneut versuchen</button>
          </div>
        ) : (
          <p className="hint">Lade …</p>
        )}
      </div>
    );
  }
  if (state !== 'ready') return <Login />;

  return (
    <LinksProvider key={user.id}>
      <RouterProvider router={router} />
    </LinksProvider>
  );
}

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <ThemeBackground />
    <AuthProvider>
      <App />
    </AuthProvider>
  </StrictMode>,
);