import { lazy } from "react";
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import Layout from "./components/Layout";
import Login from "./pages/Login";

// Code-splitting: mỗi trang là 1 chunk riêng, chỉ tải khi người dùng mở tool đó
// (Suspense fallback đặt trong Layout). Login + Layout giữ eager vì là điểm vào.
const Home = lazy(() => import("./pages/Home"));
const DownList = lazy(() => import("./pages/DownList"));
const CutVideo = lazy(() => import("./pages/CutVideo"));
const ShuffleVideo = lazy(() => import("./pages/ShuffleVideo"));
const DubVideo = lazy(() => import("./pages/DubVideo"));
const TextVideo = lazy(() => import("./pages/TextVideo"));
const Guide = lazy(() => import("./pages/Guide"));
const Support = lazy(() => import("./pages/Support"));
const Placeholder = lazy(() => import("./pages/Placeholder"));
const ListingImage = lazy(() => import("./pages/ListingImage"));
// Ẩn tạm "Listing ảnh Free" — bật lại thì bỏ comment dòng dưới + route bên dưới
// const ListingFree = lazy(() => import("./pages/ListingFree"));
const Flux2Gen = lazy(() => import("./pages/Flux2Gen"));
const CreateVideo = lazy(() => import("./pages/CreateVideo"));
const AdminUsers = lazy(() => import("./pages/AdminUsers"));
const PersonalHistory = lazy(() => import("./pages/PersonalHistory"));

const router = createBrowserRouter([
  {
    path: "/dang-nhap",
    element: <Login />,
  },
  {
    element: <Layout />,
    children: [
      { path: "/", element: <Home /> },
      { path: "/down-list", element: <DownList /> },
      { path: "/cut", element: <CutVideo /> },
      { path: "/xao", element: <ShuffleVideo /> },
      { path: "/dub", element: <DubVideo /> },
      { path: "/chen-chu", element: <TextVideo /> },
      { path: "/listing-anh", element: <ListingImage /> },
      // { path: "/listing-free", element: <ListingFree /> },   // Ẩn tạm Listing ảnh Free
      { path: "/flux2", element: <Flux2Gen /> },
      { path: "/tao-video", element: <CreateVideo /> },
      { path: "/huong-dan", element: <Guide /> },
      { path: "/ho-tro", element: <Support /> },
      { path: "/quan-tri", element: <AdminUsers /> },
      { path: "/lich-su", element: <PersonalHistory /> },
      { path: "*", element: <Placeholder title="Không tìm thấy" desc="Trang bạn tìm không tồn tại." /> },
    ],
  },
]);

export default function App() {
  return <RouterProvider router={router} />;
}