import { lazy, Suspense } from "react";
import { Navigate, Route, Routes, useLocation } from "react-router-dom";
import { useAuthStore } from "./store/auth";
import { ErrorBoundary } from "./components/ErrorBoundary";
import { RequirePmProjects } from "./components/RequirePmProjects";
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/Organization/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);
  const { pathname } = useLocation();
  if (!user) return <Navigate to="/login" replace />;
  if (user.role === "supervisor") {
    // اگر سرپرست پروژه‌ای نداشته باشد، دسترسی مسدود می‌شود
    if (!user.projects || user.projects.length === 0) {
      return (
        <div className="flex min-h-screen items-center justify-center bg-bg px-4">
          <div className="w-full max-w-md rounded-2xl border border-line bg-panel p-8 text-center shadow-sm">
            <h1 className="text-[16px] font-extrabold text-red">پروژه تخصیص داده نشده است</h1>
            <p className="mt-2 text-[12.5px] leading-6 text-muted">
              شما به عنوان سرپرست پروژه در سیستم ثبت شده‌اید اما هنوز هیچ پروژه‌ای به شما تخصیص داده نشده است.
              تا زمان تخصیص پروژه توسط مدیر سیستم، اجازه ورود به سامانه را ندارید.
            </p>
            <button
              type="button"
              onClick={() => {
                useAuthStore.getState().logout();
                window.location.href = "/login";
              }}
              className="mt-5 inline-flex h-10 w-full cursor-pointer items-center justify-center rounded-lg bg-accent px-4 text-[13px] font-bold text-white transition-colors hover:bg-accent-dark"
            >
              خروج از حساب
            </button>
          </div>
        </div>
      );
    }
    // سرپرست پروژه فقط به انبار و PM دسترسی دارد
    if (!pathname.startsWith("/inventory") && pathname !== "/panel/pm") {
      return <Navigate to="/panel/pm" replace />;
    }
  }
  return <>{children}</>;
}

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

// دسترسی ایجاد استعلام/پیشنهاد (ویزارد): مدیر تدارکات، مدیر پروژه و ادمین
function RequireProcurementWrite({ children }: { children: React.ReactNode }) {
  const user = useAuthStore((s) => s.user);
  if (user?.role !== "admin" && user?.role !== "procurement_manager" && user?.role !== "pm") {
    return <Navigate to={user?.role === "supervisor" ? "/inventory" : "/"} replace />;
  }
  return <>{children}</>;
}

// پنل «مدیریت پروژه (PM)» — اپ PM روی همان دامنه زیر مسیر /pm سرو می‌شود
function PmPanelPage() {
  return (
    <iframe
      src="/pm/"
      title="مدیریت پروژه (PM)"
      className="h-dvh w-full border-0"
    />
  );
}

// دسترسی پنل PM: همه نقش‌ها دسترسی دارند
function RequirePmPanel({ children }: { children: React.ReactNode }) {
  const user = useAuthStore((s) => s.user);
  const allowed = user?.role === "admin" || user?.role === "procurement_manager" || user?.role === "pm" || user?.role === "supervisor";
  if (!allowed) return <Navigate to="/" replace />;
  return <>{children}</>;
}

// دسترسی پنل سازمان‌دهی: فقط ادمین، مدیر تدارکات و مدیر پروژه
function RequireOrganization({ children }: { children: React.ReactNode }) {
  const user = useAuthStore((s) => s.user);
  const allowed = user?.role === "admin" || user?.role === "procurement_manager" || user?.role === "pm";
  if (!allowed) return <Navigate to={user?.role === "supervisor" ? "/inventory" : "/"} replace />;
  return <>{children}</>;
}

// دسترسی تغییر موجودی انبار: فقط سرپرست پروژه و ادمین (مدیر تدارکات و مدیر پروژه نمی‌توانند موجودی تغییر دهند)
function RequireInventoryChange({ children }: { children: React.ReactNode }) {
  const user = useAuthStore((s) => s.user);
  if (user?.role !== "admin" && user?.role !== "supervisor") {
    return <Navigate to="/inventory" replace />;
  }
  return <>{children}</>;
}

// دسترسی مدیریت انبارها: فقط مدیران و ادمین (سرپرست پروژه فقط می‌تواند موجودی تغییر دهد)
function RequireWarehouseManage({ children }: { children: React.ReactNode }) {
  const user = useAuthStore((s) => s.user);
  if (user?.role === "supervisor") {
    return <Navigate to="/inventory" replace />;
  }
  return <>{children}</>;
}

export default function App() {
  return (
    <ErrorBoundary>
      <Suspense fallback={<Loading />}>
        <Routes>
        <Route path="/login" element={<LoginPage />} />
        <Route
          path="/"
          element={
            <RequireAuth>
              <HomeRoute />
            </RequireAuth>
          }
        />
        <Route
          path="/wizard"
          element={
            <RequireAuth>
              <RequireProcurementWrite>
                <WizardPage />
              </RequireProcurementWrite>
            </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>
              <RequirePmProjects>
                <InventoryPage />
              </RequirePmProjects>
            </RequireAuth>
          }
        />
        <Route
          path="/inventory/arrivals"
          element={
            <RequireAuth>
              <RequirePmProjects>
                <ArrivalsPage />
              </RequirePmProjects>
            </RequireAuth>
          }
        />
        <Route
          path="/inventory/change"
          element={
            <RequireAuth>
              <RequirePmProjects>
                <RequireInventoryChange>
                  <ChangeInventoryPage />
                </RequireInventoryChange>
              </RequirePmProjects>
            </RequireAuth>
          }
        />
        <Route
          path="/inventory/daily"
          element={
            <RequireAuth>
              <RequirePmProjects>
                <DailyControlPage />
              </RequirePmProjects>
            </RequireAuth>
          }
        />
        <Route
          path="/inventory/warehouses"
          element={
            <RequireAuth>
              <RequirePmProjects>
                <RequireWarehouseManage>
                  <WarehousesPage />
                </RequireWarehouseManage>
              </RequirePmProjects>
            </RequireAuth>
          }
        />
        <Route
          path="/inventory/org"
          element={<Navigate to="/organization" replace />}
        />
        <Route
          path="/organization"
          element={
            <RequireAuth>
              <RequireOrganization>
                <OrganizationPage />
              </RequireOrganization>
            </RequireAuth>
          }
        />
        <Route
          path="/admin"
          element={
            <RequireAuth>
              <AdminPanelPage />
            </RequireAuth>
          }
        />
        {/* پنل مدیریت پروژه — فقط ادمین و مدیر پروژه */}
        <Route
          path="/panel/pm"
          element={
            <RequireAuth>
              <RequirePmPanel>
                <PmPanelPage />
              </RequirePmPanel>
            </RequireAuth>
          }
        />
        <Route path="*" element={<Navigate to="/" replace />} />
        </Routes>
      </Suspense>
      <MobileTabBar />
    </ErrorBoundary>
  );
}