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 Kontooversigt = lazy(() => import('./pages/Kontooversigt'));
const Bankafstemning = lazy(() => import('./pages/Bankafstemning'));
const Momsindberetning = lazy(() => import('./pages/Momsindberetning'));
const Loenforstaelse = lazy(() => import('./pages/Loenforstaelse'));
const Eksport = lazy(() => import('./pages/Eksport'));
const Settings = lazy(() => import('./pages/Settings'));
const UserSettings = lazy(() => import('./pages/UserSettings'));
const Admin = lazy(() => import('./pages/Admin'));

// Invoicing pages
const Kunder = lazy(() => import('./pages/Kunder'));
const Produkter = lazy(() => import('./pages/Produkter'));
const Fakturaer = lazy(() => import('./pages/Fakturaer'));
const Kreditnotaer = lazy(() => import('./pages/Kreditnotaer'));
const Ordrer = lazy(() => import('./pages/Ordrer'));

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

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

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

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

        {/* Invoicing */}
        <Route path="/kunder" element={<Kunder />} />
        <Route path="/produkter" element={<Produkter />} />
        <Route path="/ordrer" element={<Ordrer />} />
        <Route path="/fakturaer" element={<Fakturaer />} />
        <Route path="/kreditnotaer" element={<Kreditnotaer />} />

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

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

        {/* Admin */}
        <Route path="/admin" element={<Admin />} />

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