"use client";

import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { CheckCircle2, XCircle } from "lucide-react";
import Link from "next/link";
import { createBrowserSupabaseClient } from "@/lib/supabase";

export default function AuthCallbackPage() {
  const router = useRouter();
  const [status, setStatus] = useState<"loading" | "success" | "error">("loading");

  useEffect(() => {
    const supabase = createBrowserSupabaseClient();

    const { data: { subscription } } = supabase.auth.onAuthStateChange((event, session) => {
      if ((event === "SIGNED_IN" || event === "TOKEN_REFRESHED") && session) {
        setStatus("success");
        setTimeout(() => router.replace("/kunden/dashboard"), 1500);
      }
    });

    supabase.auth.getSession().then(({ data: { session } }) => {
      if (session) {
        setStatus("success");
        setTimeout(() => router.replace("/kunden/dashboard"), 1500);
      } else {
        setTimeout(() => {
          supabase.auth.getSession().then(({ data: { session: s } }) => {
            if (s) {
              setStatus("success");
              setTimeout(() => router.replace("/kunden/dashboard"), 1500);
            } else {
              setStatus("error");
            }
          });
        }, 2000);
      }
    });

    return () => subscription.unsubscribe();
  }, [router]);

  if (status === "loading") {
    return (
      <div className="min-h-screen bg-[#111925] flex items-center justify-center px-4">
        <div className="text-center">
          <div className="w-10 h-10 border-2 border-orange-500 border-t-transparent rounded-full animate-spin mx-auto mb-4" />
          <p className="text-slate-400 text-sm">E-Mail-Adresse wird bestätigt…</p>
        </div>
      </div>
    );
  }

  if (status === "success") {
    return (
      <div className="min-h-screen bg-[#111925] flex items-center justify-center px-4">
        <div className="w-full max-w-md text-center bg-[#18212f] border border-gray-800 rounded-2xl p-8">
          <div className="w-12 h-12 bg-green-500/10 rounded-full flex items-center justify-center mx-auto mb-4 border border-green-500/20">
            <CheckCircle2 className="w-6 h-6 text-green-400" />
          </div>
          <h2 className="text-xl font-bold text-white mb-2">E-Mail bestätigt!</h2>
          <p className="text-slate-400 text-sm">Sie werden automatisch weitergeleitet…</p>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-[#111925] flex items-center justify-center px-4">
      <div className="w-full max-w-md text-center bg-[#18212f] border border-gray-800 rounded-2xl p-8">
        <div className="w-12 h-12 bg-red-500/10 rounded-full flex items-center justify-center mx-auto mb-4 border border-red-500/20">
          <XCircle className="w-6 h-6 text-red-400" />
        </div>
        <h2 className="text-xl font-bold text-white mb-2">Bestätigung fehlgeschlagen</h2>
        <p className="text-slate-400 text-sm mb-6">
          Der Bestätigungslink ist abgelaufen oder ungültig. Bitte registrieren Sie sich erneut.
        </p>
        <Link
          href="/kunden/registrieren"
          className="inline-flex items-center justify-center bg-orange-500 hover:bg-orange-600 text-white rounded-xl font-semibold px-6 py-2.5 text-sm transition-colors"
        >
          Zur Registrierung
        </Link>
      </div>
    </div>
  );
}