"use client";

import { usePathname, useRouter } from "next/navigation";
import { type ReactNode, useEffect, useMemo } from "react";
import {
  getMandatoryOnboardingPath,
  useDemoBrowserState,
} from "@/lib/demo-session-store";

type MandatoryOnboardingGuardProps = {
  children: ReactNode;
  scope: "app" | "onboarding";
};

export function MandatoryOnboardingGuard({
  children,
  scope,
}: MandatoryOnboardingGuardProps) {
  const router = useRouter();
  const pathname = usePathname();
  const browserState = useDemoBrowserState();

  void scope;

  const requiredPath = useMemo(
    () => getMandatoryOnboardingPath(browserState.onboarding),
    [browserState.onboarding],
  );

  const isBlocked = useMemo(() => {
    if (!requiredPath) {
      return false;
    }

    return pathname !== requiredPath;
  }, [pathname, requiredPath]);

  useEffect(() => {
    if (!requiredPath) {
      return;
    }

    if (pathname !== requiredPath) {
      router.replace(requiredPath);
    }
  }, [pathname, requiredPath, router]);

  if (isBlocked) {
    return (
      <main className="app-shell min-h-screen px-5 py-8 sm:px-8 lg:px-10">
        <div className="relative z-10 mx-auto flex min-h-[80vh] max-w-4xl items-center justify-center">
          <div className="glass-card w-full max-w-2xl rounded-[32px] px-8 py-10 text-center">
            <p className="text-sm font-semibold uppercase tracking-[0.22em] text-[var(--primary)]">
              Onboarding obligatoire
            </p>
            <h1 className="mt-4 text-3xl font-extrabold text-[var(--ink)]">
              Redirection vers l&apos;etape requise...
            </h1>
          </div>
        </div>
      </main>
    );
  }

  return <>{children}</>;
}