"use client";

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

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

  useEffect(() => {
    // Supabase JS verarbeitet automatisch den ?code= oder #access_token= aus der URL
    // und etabliert die Session (detectSessionInUrl ist standardmäßig aktiviert).
    // Wir warten kurz und prüfen dann die Session.
    const { data: { subscription } } = supabase.auth.onAuthStateChange((event, session) => {
      if (event === "SIGNED_IN" && session) {
        setStatus("success");
        setTimeout(() => router.replace("/kunden/dashboard"), 1500);
      } else if (event === "TOKEN_REFRESHED" && session) {
        setStatus("success");
        setTimeout(() => router.replace("/kunden/dashboard"), 1500);
      }
    });

    // Fallback: Session direkt prüfen (falls onAuthStateChange zu spät feuert)
    supabase.auth.getSession().then(({ data: { session } }) => {
      if (session) {
        setStatus("success");
        setTimeout(() => router.replace("/kunden/dashboard"), 1500);
      } else {
        // Noch kurz warten, Supabase braucht manchmal einen Moment
        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-[80vh] flex items-center justify-center px-4">
        <div className="text-center">
          <div className="w-10 h-10 border-2 border-[#f7d334] border-t-transparent rounded-full animate-spin mx-auto mb-4" />
          <p className="text-slate-500 text-sm">E-Mail-Adresse wird bestätigt…</p>
        </div>
      </div>
    );
  }

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

  return (
    <div className="min-h-[80vh] flex items-center justify-center px-4">
      <div className="w-full max-w-md text-center border border-slate-200 bg-white p-8">
        <div className="w-12 h-12 bg-red-50 rounded-full flex items-center justify-center mx-auto mb-4">
          <XCircle className="w-6 h-6 text-red-500" />
        </div>
        <h2 className="text-xl font-bold text-slate-900 mb-2">Bestätigung fehlgeschlagen</h2>
        <p className="text-slate-500 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-[#f7d334] hover:bg-[#fcd34d] text-[#1c1917] rounded-md font-semibold px-6 py-2.5 text-sm transition-all duration-200 hover:scale-110"
        >
          Zur Registrierung
        </Link>
      </div>
    </div>
  );
}