import React from "react";
import { useCheckout } from "@stripe/react-stripe-js";
import { Button } from "@/components/ui/button"; // Shadcn Button-Komponente importieren
import { Loader2 } from "lucide-react"; // Lucide-Icon für den Ladezustand
import { useCartStore } from "@/hooks/useCartStore";
import { useRouter } from "next/navigation";

export const PayButton = () => {
  const { confirm } = useCheckout();
  const [loading, setLoading] = React.useState(false);
  const [error, setError] = React.useState<null | { message: string }>(null);
  /*
    ⚡ Bolt Optimization: Selective Zustand Selector
    Subscribing only to 'clearCart' to avoid re-renders when other store properties
    (like 'items' or 'isOpen') change.
  */
  const clearCart = useCartStore((state) => state.clearCart);
  const router = useRouter();

  // Klick-Handler für den Button
  const handleClick = () => {
    setLoading(true);
    confirm({ redirect: "if_required" }).then((result) => {
      console.log("this is the result:" + result);
      if (result.type === "error") {
        setError({ message: result.error.message });
      } else if (result.type === "success") {
        router.push("/order/success");
      }

      setLoading(false); // Ladezustand zurücksetzen
    });
  };

  return (
    <div className="flex flex-col items-center space-y-2">
      {/* Shadcn Button-Komponente */}
      <Button
        disabled={loading} // Deaktiviert den Button während des Ladens
        onClick={handleClick}
        className="mt-6 w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 transition h-10" // Breite und Höhe des Buttons
        variant={loading ? "secondary" : "default"} // Dynamische Varianten
      >
        {loading ? (
          <>
            <Loader2 className="w-4 h-4 mr-2 animate-spin" /> Verarbeite...
          </>
        ) : (
          "Bezahlen"
        )}
      </Button>
      {/* Fehleranzeige */}
      {error && <div className="text-red-500 text-sm">{error.message}</div>}
    </div>
  );
};