"use client";

import Button from "@/components/ui/button/Button";
import {
  readSignupSetupPasswordToken,
  storeSignupSetupPasswordToken,
} from "@/lib/auth/signup-setup-token";
import { AlertCircle, ArrowLeft, KeyRound, LoaderCircle } from "lucide-react";
import Link from "next/link";
import { useRouter, useSearchParams } from "next/navigation";
import { useEffect, useState } from "react";
import SignupSetPasswordForm from "./components/SignupSetPasswordForm";

type TokenState = "checking" | "ready" | "missing";

export default function SignupSetPasswordModule() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const [setupPasswordToken, setSetupPasswordToken] = useState("");
  const [state, setState] = useState<TokenState>("checking");

  useEffect(() => {
    const storedToken = readSignupSetupPasswordToken().trim();
    if (storedToken) {
      setSetupPasswordToken(storedToken);
      setState("ready");
      return;
    }

    const queryToken =
      searchParams.get("setup_password_token")?.trim() || searchParams.get("token")?.trim() || "";

    if (queryToken) {
      storeSignupSetupPasswordToken(queryToken);
      setSetupPasswordToken(queryToken);
      setState("ready");
      router.replace("/signup/set-password");
      return;
    }

    setState("missing");
  }, [router, searchParams]);

  if (state === "checking") {
    return (
      <div className="flex flex-col justify-center flex-1 w-full max-w-md mx-auto">
        <div className="rounded-2xl border border-gray-200 bg-white p-6 shadow-theme-sm dark:border-gray-800 dark:bg-gray-900 sm:p-8">
          <div className="mb-6 flex h-14 w-14 items-center justify-center rounded-full bg-brand-50 text-brand-600 dark:bg-brand-500/10 dark:text-brand-300">
            <LoaderCircle className="h-7 w-7 animate-spin" />
          </div>
          <h1 className="text-2xl font-semibold text-gray-900 dark:text-white">
            Preparing your password setup
          </h1>
          <p className="mt-3 text-sm leading-6 text-gray-500 dark:text-gray-400">
            We&apos;re checking the secure signup link before letting you continue.
          </p>
        </div>
      </div>
    );
  }

  if (state === "missing") {
    return (
      <div className="flex flex-col justify-center flex-1 w-full max-w-md mx-auto">
        <div className="rounded-2xl border border-gray-200 bg-white p-6 shadow-theme-sm dark:border-gray-800 dark:bg-gray-900 sm:p-8">
          <div className="mb-6 flex h-14 w-14 items-center justify-center rounded-full bg-error-50 text-error-600 dark:bg-error-500/10 dark:text-error-300">
            <AlertCircle className="h-7 w-7" />
          </div>

          <div className="mb-6">
            <div className="mb-3 inline-flex items-center gap-2 rounded-full border border-brand-200 bg-brand-50 px-3 py-1 text-xs font-semibold uppercase text-brand-700 dark:border-brand-500/20 dark:bg-brand-500/10 dark:text-brand-300">
              <KeyRound className="h-3.5 w-3.5" />
              Finish Signup
            </div>
            <h1 className="text-2xl font-semibold text-gray-900 dark:text-white">
              Password link not found
            </h1>
            <p className="mt-3 text-sm leading-6 text-gray-500 dark:text-gray-400">
              We could not find the temporary setup token. Please reopen the email verification link
              from your inbox to continue creating your account.
            </p>
          </div>

          <div className="rounded-xl border border-gray-200 bg-gray-50 p-4 dark:border-gray-800 dark:bg-white/[0.03]">
            <p className="text-sm leading-6 text-gray-600 dark:text-gray-300">
              If the email link has expired, go back to sign up and request a fresh verification
              email.
            </p>
          </div>

          <div className="mt-6">
            <Button asChild className="w-full" size="sm" variant="outline">
              <Link href="/signup">
                <ArrowLeft className="h-4 w-4" />
                Back to Sign Up
              </Link>
            </Button>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="flex flex-col justify-center flex-1 w-full max-w-md mx-auto">
      <SignupSetPasswordForm setupPasswordToken={setupPasswordToken} />
    </div>
  );
}