"use client";

import { checkout } from "@/actions/checkout";
import { useCartStore } from "@/hooks/useCartStore";
import useCheckoutStore from "@/hooks/useCheckoutStore";
import { CheckoutProvider } from "@stripe/react-stripe-js";
import { loadStripe, Stripe } from "@stripe/stripe-js";
import { useEffect, useState } from "react";
import { useAction } from "@/hooks/useAction";

let stripePromise: Promise<Stripe | null> | null = null;

const getStripePromise = () => {
  if (!stripePromise) {
    stripePromise = loadStripe(
      process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY!,
      {
        betas: ["custom_checkout_beta_5"],
      }
    );
  }
  return stripePromise;
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  const items = useCartStore((state) => state.items);
  const clientSecret = useCheckoutStore((state) => state.clientSecret);
  const setClientSecret = useCheckoutStore((state) => state.setClientSecret);

  const [isMounted, setIsMounted] = useState(false);
  const [hasError, setHasError] = useState(false);
  const { execute, isLoading } = useAction(checkout);

  useEffect(() => {
    setIsMounted(true); 
    
    // Only fetch if we have items and don't have a secret yet, and are not currently loading
    if (isMounted && items.length > 0 && !clientSecret && !isLoading && !hasError) {
      const initCheckout = async () => {
        try {
          const response = await execute(items);
          if (response?.success && response.data?.clientSecret) {
            setClientSecret(response.data.clientSecret);
          } else if (response && !response.success) {
            console.error("Checkout initialization failed:", response.error);
            setHasError(true);
          }
        } catch (err) {
          console.error("Unexpected checkout error:", err);
          setHasError(true);
        }
      };
      initCheckout();
    }
  }, [isMounted, items, clientSecret, setClientSecret, execute, isLoading, hasError]);

  // 1. Initial Loading State
  if (!isMounted) {
    return (
      <main className="min-h-screen flex flex-col items-center justify-center bg-gray-100">
        <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-blue-500"></div>
      </main>
    );
  }

  // 2. Error State
  if (hasError) {
    return (
      <main className="min-h-screen flex flex-col items-center justify-center bg-gray-100 p-4 text-center">
        <AlertTriangle className="text-amber-500 w-12 h-12 mb-4" />
        <h1 className="text-xl font-bold text-gray-800">Checkout momentan nicht verfügbar</h1>
        <p className="text-gray-600 mt-2">Wir konnten Ihre Bezahlsitzung nicht initialisieren.</p>
        <button 
          onClick={() => window.location.reload()} 
          className="mt-6 px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
        >
          Seite neu laden
        </button>
      </main>
    );
  }

  // 3. No Items State
  if (items.length === 0 && !clientSecret) {
    return <main id="main-content">{children}</main>;
  }

  // 4. Waiting for Secret State
  if (!clientSecret && items.length > 0) {
    return (
      <main className="min-h-screen flex flex-col items-center justify-center bg-gray-100">
        <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-blue-500 mb-4"></div>
        <p className="text-gray-600 font-medium">Sichere Verbindung zu Stripe wird aufgebaut...</p>
      </main>
    );
  }

  // 5. Active Checkout Session
  const publishableKey = process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY;
  if (!publishableKey) {
    return <div className="p-8 text-red-500">Fehler: Stripe Publishable Key fehlt in .env.local</div>;
  }

  const stripe = getStripePromise();
  
  if (!clientSecret) {
     return <main id="main-content">{children}</main>;
  }

  try {
    return (
      <CheckoutProvider stripe={stripe} options={{ clientSecret }}>
        <main id="main-content">{children}</main>
      </CheckoutProvider>
    );
  } catch (err) {
    console.error("Critical error in CheckoutProvider:", err);
    return (
      <main className="min-h-screen flex flex-col items-center justify-center bg-gray-100 p-4">
        <h1 className="text-xl font-bold text-red-600">Checkout-Komponente abgestürzt</h1>
        <p className="mt-2 text-gray-600">Ein Browser-Plugin (z.B. ein Ad-Blocker) könnte die Verbindung zu Stripe blockieren.</p>
        <button onClick={() => window.location.reload()} className="mt-4 px-4 py-2 bg-blue-600 text-white rounded">
          Erneut versuchen
        </button>
      </main>
    );
  }
}

import { AlertTriangle } from "lucide-react";