"use client";

import { Loader2 } from "lucide-react";
import { useRouter, usePathname } from "next/navigation";
import { useEffect, useRef, useState } from "react";

import { getApiBaseUrl } from "@/lib/api";
import { logoutSession, verifyAccessTokenWithAttempt } from "@/lib/auth-api";
import { getAccessToken } from "@/lib/auth-storage";
import { useUserStore } from "@/stores/user-store";

type Props = {
  children: React.ReactNode;
};

/**
 * Vérifie le JWT via `POST auth/attempt` à chaque navigation sous `/admin`.
 * - role_id 1 (super-admin) ou 2 (admin) → accès autorisé
 * - role_id 3 (résident/user)            → redirige vers /user
 * - autre / non authentifié              → redirige vers /
 */
export function AdminAuthGuard({ children }: Props) {
  const router = useRouter();
  const pathname = usePathname();
  const [ready, setReady] = useState(false);
  const isFirstCheck = useRef(true);

  useEffect(() => {
    let cancelled = false;

    async function run() {
      if (isFirstCheck.current) {
        setReady(false);
      }

      if (!getApiBaseUrl()) {
        logoutSession();
        router.replace("/");
        return;
      }

      if (!getAccessToken()) {
        logoutSession();
        router.replace("/");
        return;
      }

      try {
        await verifyAccessTokenWithAttempt();

        if (!cancelled) {
          const user = useUserStore.getState().user;
          const roleId = Number(user?.role_id);

          if (roleId === 3) {
            router.replace("/user");
            return;
          }

          // Seuls role_id 1 et 2 ont accès au backoffice
          if (roleId !== 1 && roleId !== 2) {
            logoutSession();
            router.replace("/");
            return;
          }

          setReady(true);
          isFirstCheck.current = false;
        }
      } catch {
        if (!cancelled) {
          logoutSession();
          router.replace("/");
        }
      }
    }

    void run();

    return () => {
      cancelled = true;
    };
  }, [pathname, router]);

  if (!ready) {
    return (
      <div className="flex h-[100dvh] flex-col items-center justify-center gap-3 bg-muted/40">
        <Loader2
          className="h-10 w-10 animate-spin text-muted-foreground"
          aria-hidden
        />
        <p className="text-sm text-muted-foreground">Vérification de la session…</p>
      </div>
    );
  }

  return <>{children}</>;
}