import { useEffect, useState, type ReactNode } from "react";
import { apiV26 } from "../lib/api";
import { useAuthStore } from "../store/auth";
import { useLogout } from "../pages/Inventory/panelMenu";

// گیتِ پروژه‌های مدیر پروژه (PM → 1:N):
//  - لیست پروژه‌های تخصیص‌یافته را از بک‌اند می‌گیرد و پروژه‌ی فعالِ ذخیره‌شده را
//    اعتبارسنجی می‌کند؛ اگر پروژه باطل شده باشد به اولین پروژه برمی‌گردد
//    (localStorage هم با همان store به‌روز می‌شود).
//  - اگر هیچ پروژه‌ای تخصیص نیافته باشد: صفحه‌ی خالی با پیام + دکمه‌ی خروج
//    (بدون حلقه‌ی ریدایرکت و بدون باطل‌کردن نشست).
//  - حالت توسعه (بدون توکن) از همین پروژه‌ی انتخابیِ dev استفاده می‌کند.
export function RequirePmProjects({ children }: { children: ReactNode }) {
  const user = useAuthStore((s) => s.user);
  const isDev = useAuthStore((s) => s.isDev);
  const setProjects = useAuthStore((s) => s.setProjects);
  const logout = useLogout();

  const isPm = user?.role === "pm";
  const [state, setState] = useState<"loading" | "ok" | "empty">(isPm ? "loading" : "ok");

  useEffect(() => {
    if (!user || user.role !== "pm") {
      setState("ok");
      return;
    }
    if (isDev) {
      setState(user.project_id ? "ok" : "empty");
      return;
    }
    let alive = true;
    setState("loading");
    void apiV26.users
      .myProjects()
      .then((list) => {
        if (!alive) return;
        setProjects(list); // پروژه‌ی فعال را اعتبارسنجی/جایگزین می‌کند
        setState(list.length ? "ok" : "empty");
      })
      .catch(() => {
        // خطای شبکه نباید کاربر را قفل کند — با وضعیت فعلی ادامه می‌دهیم
        if (alive) setState("ok");
      });
    return () => {
      alive = false;
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [user?.id, user?.role, isDev]);

  if (state === "loading") {
    return (
      <div className="flex min-h-screen items-center justify-center text-sm text-muted">
        در حال بارگذاری پروژه‌ها…
      </div>
    );
  }

  if (state === "empty") {
    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">هیچ پروژه‌ای به شما تخصیص داده نشده است</h1>
          <p className="mt-2 text-[12.5px] leading-6 text-muted">
            در حال حاضر هیچ پروژه‌ای به شما تخصیص داده نشده است. برای دسترسی به پنل انبار، از مدیر
            سیستم بخواهید پروژه‌ای را به شما اختصاص دهد.
          </p>
          <button
            type="button"
            onClick={logout}
            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>
    );
  }

  return <>{children}</>;
}