"use client";

import { useEffect, useState, useCallback, Suspense } from "react";
import { CheckCircle, Loader2, AlertTriangle } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import Link from "next/link";
import { useCartStore } from "@/hooks/useCartStore";
import useCheckoutStore from "@/hooks/useCheckoutStore";
import { useSearchParams } from "next/navigation";
import { checkOrderStatus } from "@/actions/orders";

const SuccessContent = () => {
  const [status, setStatus] = useState<"verifying" | "success" | "delayed">("verifying");
  const clearCart = useCartStore((state) => state.clearCart);
  const setClientSecret = useCheckoutStore((state) => state.setClientSecret);
  const searchParams = useSearchParams();
  const sessionId = searchParams.get("session_id");

  const verifyOrder = useCallback(async (attempts = 0) => {
    if (!sessionId) {
      setStatus("success");
      return;
    }

    try {
      const response = await checkOrderStatus({ sessionId });
      
      if (response?.success && response.data?.exists) {
        clearCart();
        setClientSecret(null);
        setStatus("success");
      } else if (attempts < 5) {
        // Retry every 2 seconds for up to 10 seconds
        setTimeout(() => verifyOrder(attempts + 1), 2000);
      } else {
        setStatus("delayed");
      }
    } catch (err) {
      setStatus("delayed");
    }
  }, [sessionId, clearCart, setClientSecret]);

  useEffect(() => {
    verifyOrder();
  }, [verifyOrder]);

  return (
    <div className="flex justify-center items-center min-h-[calc(100vh-25rem)]">
      <Card className="w-full max-w-md shadow-lg">
        <CardHeader className="text-center">
          {status === "verifying" && (
            <Loader2 className="mx-auto text-blue-500 animate-spin" size={48} />
          )}
          {status === "success" && (
            <CheckCircle className="mx-auto text-green-500" size={48} />
          )}
          {status === "delayed" && (
            <AlertTriangle className="mx-auto text-amber-500" size={48} />
          )}
          
          <CardTitle className="text-2xl font-bold mt-4">
            {status === "verifying" && "Bestellung wird bestätigt..."}
            {status === "success" && "Bestellung Erfolgreich!"}
            {status === "delayed" && "Zahlung erhalten!"}
          </CardTitle>
        </CardHeader>
        <CardContent className="text-center">
          {status === "verifying" && (
            <p className="text-gray-600">
              Wir verknüpfen Ihre Zahlung gerade mit Ihrer Bestellung. Bitte schließen Sie dieses Fenster nicht.
            </p>
          )}
          {status === "success" && (
            <p className="text-gray-600">
              Vielen Dank für Ihre Bestellung. Ihre Transaktion war erfolgreich
              und wir bearbeiten Ihre Bestellung.
            </p>
          )}
          {status === "delayed" && (
            <div className="space-y-4">
              <p className="text-gray-600">
                Ihre Zahlung war erfolgreich, aber die Erstellung der Bestellung dauert etwas länger als gewöhnlich.
              </p>
              <p className="text-sm text-amber-700 bg-amber-50 p-2 rounded border border-amber-200">
                Keine Sorge! Wir haben Ihre Zahlungsbestätigung erhalten und verarbeiten diese im Hintergrund. Sie erhalten in Kürze eine Bestätigung.
              </p>
            </div>
          )}
          <Button asChild className="mt-6">
            <Link href={"/"}>Zur Startseite</Link>
          </Button>
        </CardContent>
      </Card>
    </div>
  );
};

const SuccessPage = () => {
  return (
    <Suspense fallback={
      <div className="flex justify-center items-center min-h-[calc(100vh-25rem)]">
        <Card className="w-full max-w-md shadow-lg">
          <CardHeader className="text-center">
            <Loader2 className="mx-auto text-blue-500 animate-spin" size={48} />
            <CardTitle className="text-2xl font-bold mt-4">
              Bestellung wird bestätigt...
            </CardTitle>
          </CardHeader>
          <CardContent className="text-center">
            <p className="text-gray-600">
              Einen Moment bitte...
            </p>
          </CardContent>
        </Card>
      </div>
    }>
      <SuccessContent />
    </Suspense>
  );
};

export default SuccessPage;