"use client";

import { useEffect, useState } from "react";
import { isSignInWithEmailLink, signInWithEmailLink } from "firebase/auth";
import { firebaseAuth } from "@/lib/firebase";
import { useAppRouter } from "@/hooks/use-app-router";
import { Spinner } from "@buzzwaretech/ui";

export default function MagicLinkSignInPage() {
  const router = useAppRouter();
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const signIn = async () => {
      if (isSignInWithEmailLink(firebaseAuth, window.location.href)) {
        let email = window.localStorage.getItem("emailForSignIn");
        if (!email) {
          email = window.prompt("Please provide your email for confirmation");
        }
        if (!email) {
          setError("Email is required to complete sign-in.");
          return;
        }

        try {
          await signInWithEmailLink(firebaseAuth, email, window.location.href);
          window.localStorage.removeItem("emailForSignIn");
          router.push("/");
        } catch (error) {
          console.error("Magic link sign-in error:", error);
          setError("Failed to sign in with magic link. The link may be expired or invalid.");
        }
      } else {
        setError("Invalid magic link.");
      }
    };

    signIn();
  }, [router]);

  return (
    <div className="flex h-screen w-full items-center justify-center">
      {error ? (
        <div className="text-red-500">{error}</div>
      ) : (
        <div className="flex items-center gap-2">
          <Spinner />
          <p>Signing you in...</p>
        </div>
      )}
    </div>
  );
}