"use client";
/**
 * CheckoutSuccessClient
 *
 * Shown after Stripe payment success.
 *
 * - If already signed in: redirect immediately to /activate/[orderId].
 * - If not signed in: show email + password sign-up form (no phone).
 *   After sign-up or sign-in, redirect to /activate/[orderId].
 *
 * The orderId is verified server-side before this component renders.
 */
import { useState, FormEvent, useEffect, useCallback } from "react";
import { useSignUp, useSignIn } from "@clerk/nextjs";
import { useClerk, useAuth } from "@clerk/nextjs";
import { useRouter } from "next/navigation";
import { completeEmailSignUpAfterVerify } from "@/lib/complete-email-sign-up";

type AuthMode = "signup" | "signin";
type FlowStep = "idle" | "credentials" | "verify" | "redirecting" | "claim-error";

interface Props {
  orderId: string;
  sessionId: string;
  templateId: string;
  purchaserEmail: string | null;
}

export function CheckoutSuccessClient({
  orderId,
  sessionId,
  templateId,
  purchaserEmail,
}: Props) {
  const { isLoaded: authLoaded, isSignedIn } = useAuth();
  const { signUp, isLoaded: signUpLoaded } = useSignUp();
  const { signIn, isLoaded: signInLoaded } = useSignIn();
  const { setActive } = useClerk();
  const router = useRouter();

  const activateUrl = `/activate/${encodeURIComponent(orderId)}`;
  const [mode, setMode] = useState<AuthMode>("signup");
  const [step, setStep] = useState<FlowStep>("idle");
  const [email, setEmail] = useState(purchaserEmail ?? "");
  const [password, setPassword] = useState("");
  const [code, setCode] = useState("");
  const [error, setError] = useState<string | null>(null);
  const [loading, setLoading] = useState(false);
  const emailLocked = Boolean(purchaserEmail);

  const claimOrderAndRedirect = useCallback(async (afterAuth = false) => {
    setStep("redirecting");
    setError(null);
    try {
      const res = await fetch("/api/checkout/claim", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ sessionId, templateId }),
      });
      if (!res.ok) {
        const err = (await res.json()) as { error?: string };
        throw new Error(err.error ?? "Failed to link your purchase to this account");
      }
      router.replace(activateUrl);
    } catch (err) {
      setStep(afterAuth || isSignedIn ? "claim-error" : "credentials");
      setError(err instanceof Error ? err.message : "Failed to link your purchase to this account");
    }
  }, [activateUrl, isSignedIn, router, sessionId, templateId]);

  // If already signed in, claim the paid order before activating.
  useEffect(() => {
    if (!authLoaded) return;
    if (isSignedIn) {
      void claimOrderAndRedirect(true);
    } else {
      setStep("credentials");
    }
  }, [authLoaded, isSignedIn, claimOrderAndRedirect]);

  function clerkErrMsg(err: unknown): string {
    const e = err as { errors?: Array<{ longMessage?: string; message?: string }> };
    return (
      e?.errors?.[0]?.longMessage ??
      e?.errors?.[0]?.message ??
      "Something went wrong. Please try again."
    );
  }

  // ── Sign-up flow ──────────────────────────────────────────────────────────

  async function handleSignUp(e: FormEvent<HTMLFormElement>) {
    e.preventDefault();
    if (!signUpLoaded || !signUp) return;
    if (purchaserEmail && email.toLowerCase() !== purchaserEmail.toLowerCase()) {
      setError("Use the same email address you entered at checkout.");
      return;
    }
    setError(null);
    setLoading(true);
    try {
      await signUp.create({ emailAddress: email, password });
      await signUp.prepareEmailAddressVerification({ strategy: "email_code" });
      setStep("verify");
    } catch (err) {
      setError(clerkErrMsg(err));
    } finally {
      setLoading(false);
    }
  }

  async function handleVerify(e: FormEvent<HTMLFormElement>) {
    e.preventDefault();
    if (!signUpLoaded || !signUp) return;
    setError(null);
    setLoading(true);
    try {
      const result = await signUp.attemptEmailAddressVerification({ code });
      const completion = await completeEmailSignUpAfterVerify(signUp, result);
      if (completion.status === "complete") {
        await setActive({ session: completion.sessionId });
        await claimOrderAndRedirect(true);
      } else {
        setError(completion.message);
      }
    } catch (err) {
      setError(clerkErrMsg(err));
    } finally {
      setLoading(false);
    }
  }

  // ── Sign-in flow ──────────────────────────────────────────────────────────

  async function handleSignIn(e: FormEvent<HTMLFormElement>) {
    e.preventDefault();
    if (!signInLoaded || !signIn) return;
    if (purchaserEmail && email.toLowerCase() !== purchaserEmail.toLowerCase()) {
      setError("Use the same email address you entered at checkout.");
      return;
    }
    setError(null);
    setLoading(true);
    try {
      const result = await signIn.create({
        identifier: email,
        password,
      });
      if (result.status === "complete" && result.createdSessionId) {
        await setActive({ session: result.createdSessionId });
        await claimOrderAndRedirect(true);
      } else {
        setError("Sign-in incomplete. Please try again.");
      }
    } catch (err) {
      setError(clerkErrMsg(err));
    } finally {
      setLoading(false);
    }
  }

  // ── Render ────────────────────────────────────────────────────────────────

  if (step === "idle" || step === "redirecting") {
    return (
      <div className="flex min-h-[calc(100vh-4rem)] items-center justify-center px-4">
        <div className="text-center space-y-3">
          <div className="mx-auto size-8 animate-spin rounded-full border-2 border-[var(--brand-accent)] border-t-transparent" />
          <p className="text-sm text-sand-600 dark:text-sand-400">
            {step === "redirecting" ? "Activating your eSIM…" : "Loading…"}
          </p>
        </div>
      </div>
    );
  }

  if (step === "claim-error") {
    return (
      <div className="flex min-h-[calc(100vh-4rem)] items-center justify-center px-4 py-16">
        <div className="w-full max-w-md space-y-6 text-center">
          <div className="rounded-2xl border border-emerald-500/30 bg-emerald-500/10 px-6 py-4">
            <p className="text-lg font-semibold text-emerald-300">✓ Payment successful!</p>
          </div>
          <div className="rounded-2xl border border-sand-200 dark:border-sand-800 bg-white dark:bg-sand-900 p-8 backdrop-blur space-y-4">
            <p className="text-sm text-sand-700 dark:text-sand-200">We could not link this purchase to your account.</p>
            {error && (
              <p className="rounded-lg border border-red-500/30 bg-red-500/10 px-3 py-2 text-xs text-red-300">
                {error}
              </p>
            )}
            <button
              type="button"
              onClick={() => void claimOrderAndRedirect(true)}
              className="w-full rounded-lg bg-[var(--brand-accent)] py-2 text-sm font-semibold text-white transition-opacity hover:opacity-90"
            >
              Try again
            </button>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="flex min-h-[calc(100vh-4rem)] items-center justify-center px-4 py-16">
      <div className="w-full max-w-md space-y-6">
        {/* Payment success banner */}
        <div className="rounded-2xl border border-emerald-500/30 bg-emerald-500/10 px-6 py-4 text-center">
          <p className="text-lg font-semibold text-emerald-300">✓ Payment successful!</p>
          <p className="mt-1 text-sm text-emerald-200/70">
            Create an account to activate your eSIM.
          </p>
        </div>

        {/* Auth card */}
        <div className="rounded-2xl border border-sand-200 dark:border-sand-800 bg-white dark:bg-sand-900 p-8 backdrop-blur">
          {/* Mode toggle */}
          {step === "credentials" && (
            <div className="flex rounded-lg border border-sand-200 dark:border-sand-800 p-1 mb-6">
              <button
                type="button"
                onClick={() => { setMode("signup"); setError(null); }}
                className={`flex-1 rounded-md py-1.5 text-sm font-medium transition-colors ${
                  mode === "signup"
                    ? "bg-[var(--brand-accent)] text-sand-900 dark:text-sand-50"
                    : "text-sand-500 hover:text-sand-600 dark:text-sand-300"
                }`}
              >
                Create account
              </button>
              <button
                type="button"
                onClick={() => { setMode("signin"); setError(null); }}
                className={`flex-1 rounded-md py-1.5 text-sm font-medium transition-colors ${
                  mode === "signin"
                    ? "bg-[var(--brand-accent)] text-sand-900 dark:text-sand-50"
                    : "text-sand-500 hover:text-sand-600 dark:text-sand-300"
                }`}
              >
                Sign in
              </button>
            </div>
          )}

          {/* Sign-up: credentials step */}
          {step === "credentials" && mode === "signup" && (
            <>
              <h2 className="text-base font-semibold text-sand-900 dark:text-sand-50 mb-1">Create your account</h2>
              <p className="text-xs text-sand-500 mb-5">
                {emailLocked
                  ? "Use the email from your checkout to create your account."
                  : "Email and password — no phone required."}
              </p>
              <form onSubmit={handleSignUp} className="space-y-4">
                <div>
                  <label className="block text-xs font-medium text-sand-600 dark:text-sand-400 mb-1" htmlFor="su-email">
                    Email address
                  </label>
                  <input
                    id="su-email"
                    type="email"
                    autoComplete="email"
                    required
                    readOnly={emailLocked}
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                    className="w-full rounded-lg border border-sand-200 dark:border-sand-800 bg-sand-50 dark:bg-sand-950 px-3 py-2 text-sm text-sand-900 dark:text-sand-50 placeholder:text-sand-400 focus:border-[var(--brand-accent)] focus:outline-none"
                    placeholder="you@example.com"
                  />
                </div>
                <div>
                  <label className="block text-xs font-medium text-sand-600 dark:text-sand-400 mb-1" htmlFor="su-password">
                    Password
                  </label>
                  <input
                    id="su-password"
                    type="password"
                    autoComplete="new-password"
                    required
                    minLength={8}
                    value={password}
                    onChange={(e) => setPassword(e.target.value)}
                    className="w-full rounded-lg border border-sand-200 dark:border-sand-800 bg-sand-50 dark:bg-sand-950 px-3 py-2 text-sm text-sand-900 dark:text-sand-50 placeholder:text-sand-400 focus:border-[var(--brand-accent)] focus:outline-none"
                    placeholder="Min. 8 characters"
                  />
                </div>
                {error && (
                  <p className="rounded-lg border border-red-500/30 bg-red-500/10 px-3 py-2 text-xs text-red-300">
                    {error}
                  </p>
                )}
                <button
                  type="submit"
                  disabled={loading || !signUpLoaded}
                  className="w-full rounded-lg bg-[var(--brand-accent)] py-2 text-sm font-semibold text-white transition-opacity hover:opacity-90 disabled:opacity-50"
                >
                  {loading ? "Creating account…" : "Create account & activate eSIM"}
                </button>
              </form>
            </>
          )}

          {/* Sign-in: credentials step */}
          {step === "credentials" && mode === "signin" && (
            <>
              <h2 className="text-base font-semibold text-sand-900 dark:text-sand-50 mb-1">Sign in</h2>
              <p className="text-xs text-sand-500 mb-5">
                {emailLocked
                  ? "Sign in with the email from your checkout to activate your eSIM."
                  : "Sign in to activate your eSIM."}
              </p>
              <form onSubmit={handleSignIn} className="space-y-4">
                <div>
                  <label className="block text-xs font-medium text-sand-600 dark:text-sand-400 mb-1" htmlFor="si-email">
                    Email address
                  </label>
                  <input
                    id="si-email"
                    type="email"
                    autoComplete="email"
                    required
                    readOnly={emailLocked}
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                    className="w-full rounded-lg border border-sand-200 dark:border-sand-800 bg-sand-50 dark:bg-sand-950 px-3 py-2 text-sm text-sand-900 dark:text-sand-50 placeholder:text-sand-400 focus:border-[var(--brand-accent)] focus:outline-none"
                    placeholder="you@example.com"
                  />
                </div>
                <div>
                  <label className="block text-xs font-medium text-sand-600 dark:text-sand-400 mb-1" htmlFor="si-password">
                    Password
                  </label>
                  <input
                    id="si-password"
                    type="password"
                    autoComplete="current-password"
                    required
                    value={password}
                    onChange={(e) => setPassword(e.target.value)}
                    className="w-full rounded-lg border border-sand-200 dark:border-sand-800 bg-sand-50 dark:bg-sand-950 px-3 py-2 text-sm text-sand-900 dark:text-sand-50 placeholder:text-sand-400 focus:border-[var(--brand-accent)] focus:outline-none"
                    placeholder="Your password"
                  />
                </div>
                {error && (
                  <p className="rounded-lg border border-red-500/30 bg-red-500/10 px-3 py-2 text-xs text-red-300">
                    {error}
                  </p>
                )}
                <button
                  type="submit"
                  disabled={loading || !signInLoaded}
                  className="w-full rounded-lg bg-[var(--brand-accent)] py-2 text-sm font-semibold text-white transition-opacity hover:opacity-90 disabled:opacity-50"
                >
                  {loading ? "Signing in…" : "Sign in & activate eSIM"}
                </button>
              </form>
            </>
          )}

          {/* Email verification step */}
          {step === "verify" && (
            <>
              <h2 className="text-base font-semibold text-sand-900 dark:text-sand-50 mb-1">Check your email</h2>
              <p className="text-xs text-sand-500 mb-5">
                We sent a 6-digit code to <span className="text-sand-600 dark:text-sand-300">{email}</span>.
              </p>
              <form onSubmit={handleVerify} className="space-y-4">
                <div>
                  <label className="block text-xs font-medium text-sand-600 dark:text-sand-400 mb-1" htmlFor="verify-code">
                    Verification code
                  </label>
                  <input
                    id="verify-code"
                    type="text"
                    inputMode="numeric"
                    autoComplete="one-time-code"
                    required
                    maxLength={6}
                    value={code}
                    onChange={(e) => setCode(e.target.value.replace(/\D/g, ""))}
                    className="w-full rounded-lg border border-sand-200 dark:border-sand-800 bg-sand-50 dark:bg-sand-950 px-3 py-2 text-center text-lg tracking-[0.4em] text-sand-900 dark:text-sand-50 placeholder:text-sand-400 focus:border-[var(--brand-accent)] focus:outline-none"
                    placeholder="000000"
                  />
                </div>
                {error && (
                  <p className="rounded-lg border border-red-500/30 bg-red-500/10 px-3 py-2 text-xs text-red-300">
                    {error}
                  </p>
                )}
                <button
                  type="submit"
                  disabled={loading || code.length < 6}
                  className="w-full rounded-lg bg-[var(--brand-accent)] py-2 text-sm font-semibold text-white transition-opacity hover:opacity-90 disabled:opacity-50"
                >
                  {loading ? "Verifying…" : "Verify & activate eSIM"}
                </button>
              </form>
              <button
                type="button"
                onClick={() => { setStep("credentials"); setError(null); setCode(""); }}
                className="mt-4 w-full text-center text-xs text-sand-400 hover:text-sand-500"
              >
                ← Back
              </button>
            </>
          )}
        </div>

        <p className="text-center text-xs text-sand-400">
          Your payment is confirmed. Account setup is required to receive your eSIM QR code.
        </p>
      </div>
    </div>
  );
}