import { lazy, Suspense } from "react";
import { Navigate, Route, Routes } from "react-router-dom";
import { useAuthStore } from "./store/auth";
import { MobileTabBar } from "./components/layout/MobileTabBar";

// هر صفحه با React.lazy لود می‌شود (code splitting)
const DashboardPage = lazy(() =>
  import("./pages/Dashboard/DashboardPage").then((m) => ({ default: m.DashboardPage })),
);
const WizardPage = lazy(() => import("./pages/Wizard/WizardPage").then((m) => ({ default: m.WizardPage })));
const SuppliersPage = lazy(() =>
  import("./pages/Suppliers/SuppliersPage").then((m) => ({ default: m.SuppliersPage })),
);
const CategoryPage = lazy(() =>
  import("./pages/Suppliers/CategoryPage").then((m) => ({ default: m.CategoryPage })),
);
const SupplierDetailPage = lazy(() =>
  import("./pages/Suppliers/SupplierDetailPage").then((m) => ({ default: m.SupplierDetailPage })),
);
const ProjectsPage = lazy(() =>
  import("./pages/Projects/ProjectsPage").then((m) => ({ default: m.ProjectsPage })),
);
const UnitsPage = lazy(() => import("./pages/Units/UnitsPage").then((m) => ({ default: m.UnitsPage })));
const LoginPage = lazy(() => import("./pages/Auth/LoginPage").then((m) => ({ default: m.LoginPage })));
const InventoryPage = lazy(() =>
  import("./pages/Inventory/InventoryPage").then((m) => ({ default: m.InventoryPage })),
);
const ArrivalsPage = lazy(() => import("./pages/Inventory/ArrivalsPage").then((m) => ({ default: m.ArrivalsPage })));
const ChangeInventoryPage = lazy(() =>
  import("./pages/Inventory/ChangeInventoryPage").then((m) => ({ default: m.ChangeInventoryPage })),
);
const DailyControlPage = lazy(() =>
  import("./pages/Inventory/DailyControlPage").then((m) => ({ default: m.DailyControlPage })),
);
const WarehousesPage = lazy(() =>
  import("./pages/Inventory/WarehousesPage").then((m) => ({ default: m.WarehousesPage })),
);
const OrganizationPage = lazy(() =>
  import("./pages/Inventory/OrganizationPage").then((m) => ({ default: m.OrganizationPage })),
);
const AdminPanelPage = lazy(() =>
  import("./pages/Admin/AdminPanel").then((m) => ({ default: m.AdminPanel })),
);

function Loading() {
  return (
    <div className="flex min-h-screen items-center justify-center text-sm text-muted">
      در حال بارگذاری...
    </div>
  );
}

// همه‌ی صفحات پشت ورود هستند — بدون نشست، به صفحه‌ی ورود می‌رویم.
function RequireAuth({ children }: { children: React.ReactNode }) {
  const user = useAuthStore((s) => s.user);
  if (!user) return <Navigate to="/login" replace />;
  return <>{children}</>;
}

// صفحه‌ی اصلی بر اساس نقش: مدیر پروژه → پنل انبار؛ مدیر تدارکات/ادمین → دفتر
function HomeRoute() {
  const user = useAuthStore((s) => s.user);
  if (user?.role === "pm") return <Navigate to="/inventory" replace />;
  return <DashboardPage />;
}

export default function App() {
  return (
    <>
      <Suspense fallback={<Loading />}>
        <Routes>
        <Route path="/login" element={<LoginPage />} />
        <Route
          path="/"
          element={
            <RequireAuth>
              <HomeRoute />
            </RequireAuth>
          }
        />
        <Route
          path="/wizard"
          element={
            <RequireAuth>
              <WizardPage />
            </RequireAuth>
          }
        />
        <Route
          path="/suppliers"
          element={
            <RequireAuth>
              <SuppliersPage />
            </RequireAuth>
          }
        />
        {/* سلسله‌مراتب دامنه: دسته → تأمین‌کننده. کارت دسته مستقیم به
            فهرست تأمین‌کننده‌های همان دسته می‌رود (بدون صفحه‌ی واسط متریال). */}
        <Route
          path="/suppliers/category/:category"
          element={
            <RequireAuth>
              <CategoryPage />
            </RequireAuth>
          }
        />
        {/* مسیرهای قدیمی (درخت معکوس topic → material → supplier) — ریدایرکت */}
        <Route
          path="/topics/:topic/:category"
          element={<Navigate to="/suppliers/category/:category" replace />}
        />
        <Route
          path="/topics/:topic"
          element={<Navigate to="/suppliers" replace />}
        />
        <Route
          path="/suppliers/:id"
          element={
            <RequireAuth>
              <SupplierDetailPage />
            </RequireAuth>
          }
        />
        <Route
          path="/projects"
          element={
            <RequireAuth>
              <ProjectsPage />
            </RequireAuth>
          }
        />
        <Route
          path="/units"
          element={
            <RequireAuth>
              <UnitsPage />
            </RequireAuth>
          }
        />
        <Route
          path="/inventory"
          element={
            <RequireAuth>
              <InventoryPage />
            </RequireAuth>
          }
        />
        <Route
          path="/inventory/arrivals"
          element={
            <RequireAuth>
              <ArrivalsPage />
            </RequireAuth>
          }
        />
        <Route
          path="/inventory/change"
          element={
            <RequireAuth>
              <ChangeInventoryPage />
            </RequireAuth>
          }
        />
        <Route
          path="/inventory/daily"
          element={
            <RequireAuth>
              <DailyControlPage />
            </RequireAuth>
          }
        />
        <Route
          path="/inventory/warehouses"
          element={
            <RequireAuth>
              <WarehousesPage />
            </RequireAuth>
          }
        />
        <Route
          path="/inventory/org"
          element={
            <RequireAuth>
              <OrganizationPage />
            </RequireAuth>
          }
        />
        <Route
          path="/admin"
          element={
            <RequireAuth>
              <AdminPanelPage />
            </RequireAuth>
          }
        />
        <Route path="*" element={<Navigate to="/" replace />} />
        </Routes>
      </Suspense>
      <MobileTabBar />
    </>
  );
}