import { StrictMode, Suspense, lazy } from "react";
import type { ComponentType } from "react";
import { createRoot } from "react-dom/client";
import { HashRouter, Navigate, Route, Routes } from "react-router-dom";

import AppShell from "@/components/AppShell";
import { siteConfig } from "@/lib/site-config";

import "@/styles.css";

/**
 * 自动路由注册：src/pages/ 下每个 .tsx 文件就是一个页面，
 * 文件名（去掉扩展名，支持子目录）即路由路径，例如：
 *   src/pages/overview.tsx      → /#/overview
 *   src/pages/report/detail.tsx → /#/report/detail
 * 生成页面时只需新增文件，无需改动本文件。
 */
const pageModules = import.meta.glob("./pages/**/*.tsx");

const pageRoutes = Object.entries(pageModules).map(([file, loader]) => {
  const routePath = file.replace(/^\.\//, "").replace(/\.tsx$/, "");
  const LazyPage = lazy(loader as () => Promise<{ default: ComponentType }>);
  return {
    path: `/${routePath}`,
    element: (
      <Suspense fallback={<PageLoading />}>
        <LazyPage />
      </Suspense>
    ),
  };
});

const firstPage =
  siteConfig.nav.find((item) => item.page)?.page ??
  (pageRoutes[0] ? pageRoutes[0].path.slice(1) : "");

function PageLoading() {
  return (
    <div className="page-loading" role="status">
      页面加载中…
    </div>
  );
}

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <HashRouter>
      <Routes>
        <Route element={<AppShell />}>
          <Route index element={<Navigate to={`/${firstPage}`} replace />} />
          {pageRoutes.map((r) => (
            <Route key={r.path} path={r.path} element={r.element} />
          ))}
          <Route
            path="*"
            element={
              <div className="page-loading">
                <p>页面不存在</p>
                <a href={`#/${firstPage}`}>返回首页</a>
              </div>
            }
          />
        </Route>
      </Routes>
    </HashRouter>
  </StrictMode>,
);