"use client";

import Link from "next/link";
import { useRouter, useSearchParams } from "next/navigation";
import { Suspense, useEffect, useState } from "react";
import { useRooSports, type SessionUser } from "@/components/app-provider";
import { RooSportsLogo } from "@/components/roosports-logo";

type VerifyResponse = {
  ok?: boolean;
  user?: SessionUser;
  message?: string;
  error?: string;
  previewUrl?: string;
  previewCode?: string;
};

const heroTitleClass =
  "text-[2.35rem] font-extrabold leading-none tracking-[-0.055em] sm:text-5xl lg:text-[3.35rem] lg:leading-[1.02] xl:text-[3.75rem]";

export default function VerifyEmailPage() {
  return (
    <div className="min-h-screen bg-[radial-gradient(circle_at_82%_18%,rgba(255,191,93,0.22),transparent_24%),linear-gradient(145deg,#dcebf1_0%,#f6f8f8_58%,#fff9ee_100%)] text-[#0B0F12]">
      <header className="mx-auto flex w-full max-w-7xl items-center justify-between px-6 py-7 md:px-12 lg:px-16">
        <Link
          href="/"
          aria-label="RooSports home"
          className="text-3xl text-[#0b0f12] transition-opacity hover:opacity-70 md:text-4xl"
        >
          <RooSportsLogo />
        </Link>
        <Link
          href="/login"
          className="flex items-center gap-2 rounded-full bg-white/50 px-5 py-3 text-xs font-bold uppercase tracking-[0.13em] backdrop-blur-xl transition-transform hover:-translate-y-0.5"
        >
          Back to login
          <span className="material-symbols-outlined text-lg">arrow_forward</span>
        </Link>
      </header>

      <Suspense fallback={<div className="min-h-[60vh]" />}>
        <VerifyEmailForm />
      </Suspense>
    </div>
  );
}

function VerifyEmailForm() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const { setAuthenticatedUser } = useRooSports();
  const [email, setEmail] = useState("");
  const [code, setCode] = useState("");
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [isResending, setIsResending] = useState(false);
  const [error, setError] = useState("");
  const [info, setInfo] = useState("");
  const [previewUrl, setPreviewUrl] = useState("");
  const [previewCode, setPreviewCode] = useState("");
  const [autoTokenHandled, setAutoTokenHandled] = useState(false);

  useEffect(() => {
    const prefilledEmail = searchParams.get("email")?.trim();
    if (prefilledEmail) {
      queueMicrotask(() => setEmail(prefilledEmail));
    }
    const preview = searchParams.get("previewCode")?.trim();
    if (preview) {
      queueMicrotask(() => setPreviewCode(preview));
    }
  }, [searchParams]);

  useEffect(() => {
    const token = searchParams.get("token")?.trim();
    if (!token || autoTokenHandled) return;

    const activateFromLink = async () => {
      setAutoTokenHandled(true);
      setIsSubmitting(true);
      setError("");
      try {
        const response = await fetch("/api/auth/verify-email", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          credentials: "include",
          body: JSON.stringify({
            token,
            email: searchParams.get("email")?.trim().toLowerCase() || undefined,
          }),
        });
        const text = await response.text();
        let payload: VerifyResponse = {};
        try {
          if (text && text.trim()) payload = JSON.parse(text) as VerifyResponse;
        } catch {
          // Non-JSON fallback
        }
        if (!response.ok || !payload.user) {
          throw new Error(payload.error || "This activation link is invalid or expired.");
        }
        setAuthenticatedUser(payload.user, true);
        if (payload.user.role === "parent") router.push("/onboarding/family");
        else if (payload.user.role === "coach") router.push("/coach/verification");
        else router.push("/dashboard");
      } catch (requestError) {
        setError(
          requestError instanceof Error
            ? requestError.message
            : "This activation link is invalid or expired.",
        );
        setIsSubmitting(false);
      }
    };

    void activateFromLink();
  }, [autoTokenHandled, router, searchParams, setAuthenticatedUser]);

  const finishVerification = async (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    setIsSubmitting(true);
    setError("");
    setInfo("");

    try {
      const response = await fetch("/api/auth/verify-email", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        credentials: "include",
        body: JSON.stringify({ email, code }),
      });
      const text = await response.text();
      let payload: VerifyResponse = {};
      try {
        if (text && text.trim()) payload = JSON.parse(text) as VerifyResponse;
      } catch {
        // Non-JSON fallback
      }
      if (!response.ok || !payload.user) {
        throw new Error(payload.error || "Unable to verify this email.");
      }

      setAuthenticatedUser(payload.user, true);
      if (payload.user.role === "parent") router.push("/onboarding/family");
      else if (payload.user.role === "coach") router.push("/coach/verification");
      else router.push("/dashboard");
    } catch (requestError) {
      setError(
        requestError instanceof Error ? requestError.message : "Unable to verify this email.",
      );
      setIsSubmitting(false);
    }
  };

  const resendCode = async () => {
    setIsResending(true);
    setError("");
    setInfo("");
    try {
      const response = await fetch("/api/auth/verify-email", {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ email }),
      });
      const text = await response.text();
      let payload: VerifyResponse = {};
      try {
        if (text && text.trim()) payload = JSON.parse(text) as VerifyResponse;
      } catch {
        // Non-JSON fallback
      }
      if (!response.ok) throw new Error(payload.error || "Unable to resend the code.");
      setInfo(payload.message || "If an account needs verification, a new code has been sent.");
      setPreviewUrl(payload.previewUrl || "");
      setPreviewCode(payload.previewCode || "");
    } catch (requestError) {
      setError(
        requestError instanceof Error ? requestError.message : "Unable to resend the code.",
      );
    } finally {
      setIsResending(false);
    }
  };

  return (
    <main className="mx-auto grid w-full max-w-7xl gap-10 px-6 pb-16 pt-8 md:px-12 md:pt-16 lg:grid-cols-[1.05fr_0.95fr] lg:items-center lg:gap-20 lg:px-16">
      <section className="min-w-0 max-w-xl lg:max-w-none">
        <p className="mb-5 flex items-center gap-3 text-xs font-bold uppercase tracking-[0.2em] text-[#5c6970]">
          <span className="h-2.5 w-2.5 rounded-full bg-[#ef7d00]" />
          Email verification
        </p>
        <h1 className={heroTitleClass}>Activate your account.</h1>
        <p className="mt-7 max-w-lg text-base leading-7 text-[#5c6970] md:text-lg">
          We sent a 6-digit code and a short activation link to your inbox. Enter the code here
          or open the link to finish signing up.
        </p>

        <div className="mt-10 grid grid-cols-3 gap-4 text-sm text-[#5c6970]">
          {[
            ["pin", "6-digit code"],
            ["link", "Short link"],
            ["schedule", "30 minute limit"],
          ].map(([icon, label]) => (
            <div key={label} className="flex flex-col gap-3">
              <span className="material-symbols-outlined text-2xl text-[#ef7d00]">{icon}</span>
              <span>{label}</span>
            </div>
          ))}
        </div>
      </section>

      <section className="relative overflow-hidden rounded-[2.5rem] bg-white/55 p-7 shadow-[0_30px_80px_rgba(43,64,74,0.09)] backdrop-blur-2xl sm:p-10">
        <div className="absolute -right-20 -top-20 h-52 w-52 rounded-full bg-[#ffd16e]/60" />
        <div className="absolute -right-6 -top-6 h-28 w-28 rounded-full border-[22px] border-white/45" />

        <div className="relative">
          <span className="inline-flex rounded-full bg-[#0B0F12] px-4 py-2 text-[11px] font-bold uppercase tracking-[0.16em] text-white">
            Verify email
          </span>
          <h2 className="mt-8 max-w-sm text-3xl font-extrabold leading-tight tracking-[-0.04em] sm:text-4xl">
            Enter your short code.
          </h2>
          <p className="mt-4 max-w-md text-sm leading-6 text-[#647179]">
            Codes expire after 30 minutes and can only be used once.
          </p>

          <form className="mt-8 space-y-5" onSubmit={finishVerification}>
            <label className="block">
              <span className="mb-2 block text-xs font-bold uppercase tracking-[0.14em] text-[#5c6970]">
                Email
              </span>
              <input
                type="email"
                required
                readOnly
                value={email}
                className="h-12 w-full cursor-default rounded-2xl bg-[#eef3f5] px-4 text-sm font-medium text-[#405760] outline-none ring-1 ring-[#adc0c8]/30"
                placeholder="you@email.com"
                aria-readonly="true"
              />
            </label>

            <div>
              <span className="mb-2 block text-xs font-bold uppercase tracking-[0.14em] text-[#5c6970]">
                Verification code
              </span>
              <div className="flex items-center gap-3">
                <input
                  type="text"
                  inputMode="numeric"
                  pattern="\d{6}"
                  maxLength={6}
                  required
                  value={code}
                  onChange={(event) => setCode(event.target.value.replace(/\D/g, "").slice(0, 6))}
                  className="h-12 min-w-0 flex-1 rounded-2xl bg-white/80 px-4 text-center text-2xl font-extrabold tracking-[0.35em] outline-none ring-1 ring-[#adc0c8]/35 transition focus:ring-[#ef7d00]/45"
                  placeholder="000000"
                  autoComplete="one-time-code"
                />
                <button
                  type="button"
                  onClick={resendCode}
                  disabled={isResending || !email.trim()}
                  className="inline-flex h-12 shrink-0 items-center justify-center rounded-2xl bg-[#0B0F12] px-4 text-xs font-bold uppercase tracking-[0.12em] text-white transition hover:-translate-y-0.5 hover:bg-[#1a2228] disabled:cursor-not-allowed disabled:opacity-50"
                >
                  {isResending ? "Sending..." : "Resend"}
                </button>
              </div>
            </div>

            {error ? (
              <p className="rounded-2xl bg-[#f8e2df] px-4 py-3 text-sm font-medium text-[#9a4338]">
                {error}
              </p>
            ) : null}
            {info ? (
              <p className="rounded-2xl bg-[#dcefe4] px-4 py-3 text-sm font-medium text-[#246845]">
                {info}
              </p>
            ) : null}
            {previewCode || previewUrl ? (
              <div className="rounded-2xl bg-[#fff0d9] px-4 py-3 text-sm text-[#a8580b]">
                <p className="font-bold">Development preview</p>
                {previewCode ? <p className="mt-1 tracking-[0.2em]">{previewCode}</p> : null}
                {previewUrl ? (
                  <a className="mt-2 inline-block break-all underline" href={previewUrl}>
                    Open activation link
                  </a>
                ) : null}
              </div>
            ) : null}

            <button
              type="submit"
              disabled={isSubmitting || !email.trim()}
              className="flex h-12 w-full items-center justify-center rounded-full bg-[#0B0F12] text-sm font-bold uppercase tracking-[0.14em] text-white transition hover:-translate-y-0.5 disabled:cursor-not-allowed disabled:opacity-60"
            >
              {isSubmitting ? "Verifying..." : "Verify and continue"}
            </button>
          </form>
        </div>
      </section>
    </main>
  );
}