import { Routes, Route, Navigate } from 'react-router-dom';
import { Suspense, lazy } from 'react';
import { Spin } from 'antd';

// Lazy load pages for code splitting
const Dashboard = lazy(() => import('./pages/Dashboard'));
const Kassekladde = lazy(() => import('./pages/Kassekladde'));
const HurtigBogforing = lazy(() => import('./pages/HurtigBogforing'));
const Kontooversigt = lazy(() => import('./pages/Kontooversigt'));
const Bankafstemning = lazy(() => import('./pages/Bankafstemning'));
const Momsindberetning = lazy(() => import('./pages/Momsindberetning'));
const Loenforstaelse = lazy(() => import('./pages/Loenforstaelse'));
const Settings = lazy(() => import('./pages/Settings'));

// Loading fallback component
function PageLoader() {
  return (
    <div
      style={{
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        height: '100%',
        minHeight: 400,
      }}
    >
      <Spin size="large" tip="Indlaeser..." />
    </div>
  );
}

export default function AppRoutes() {
  return (
    <Suspense fallback={<PageLoader />}>
      <Routes>
        {/* Dashboard */}
        <Route path="/" element={<Dashboard />} />

        {/* Accounting */}
        <Route path="/kassekladde" element={<Kassekladde />} />
        <Route path="/hurtig-bogforing" element={<HurtigBogforing />} />
        <Route path="/kontooversigt" element={<Kontooversigt />} />

        {/* Bank */}
        <Route path="/bankafstemning" element={<Bankafstemning />} />

        {/* Reporting */}
        <Route path="/momsindberetning" element={<Momsindberetning />} />
        <Route path="/loenforstaelse" element={<Loenforstaelse />} />

        {/* Settings */}
        <Route path="/indstillinger" element={<Settings />} />

        {/* Fallback redirect */}
        <Route path="*" element={<Navigate to="/" replace />} />
      </Routes>
    </Suspense>
  );
}
