/**
 * Stripe Payment Element Component
 * Renders Stripe Payment Element with custom appearance
 * NOTE: This component renders ONLY the PaymentElement, not the Elements wrapper
 */

"use client"

import { useState } from "react"
import { PaymentElement } from "@stripe/react-stripe-js"
import { Skeleton } from "@/components/ui/skeleton"

interface StripePaymentFormProps {
  onReady?: () => void
}

export function StripePaymentForm({ onReady }: StripePaymentFormProps) {
  const [isLoading, setIsLoading] = useState(true)

  return (
    <div className="relative">
      {isLoading && (
        <div className="absolute inset-0 flex items-center justify-center bg-card/50 backdrop-blur-sm rounded-xl z-10">
          <div className="flex flex-col items-center gap-3">
            <div className="h-8 w-8 border-2 border-primary border-t-transparent rounded-full animate-spin" />
            <p className="text-sm text-muted-foreground">Loading payment methods...</p>
          </div>
        </div>
      )}
      <PaymentElement
        onReady={() => {
          console.log("[v0] Payment Element mounted and ready")
          setIsLoading(false)
          onReady?.()
        }}
        options={{
          layout: "tabs",
          paymentMethodOrder: [
            'apple_pay',      // Apple Pay first
            'google_pay',     // Google Pay second
            'amazon_pay',     // Amazon Pay third
            'card',           // Credit/Debit cards
            'paypal',         // PayPal
            'link',           // Link by Stripe
            'klarna',         // Klarna
            'affirm',         // Affirm
            'afterpay_clearpay', // Afterpay/Clearpay
            'cashapp',        // Cash App Pay
          ],
        }}
      />
    </div>
  )
}

export function StripePaymentFormSkeleton() {
  return (
    <div className="rounded-xl border border-border/50 bg-card p-8 space-y-6">
      {/* Skeleton for payment element */}
      <div className="space-y-4">
        <div className="flex items-center gap-2">
          <Skeleton className="h-5 w-5 rounded-full" />
          <Skeleton className="h-5 w-32" />
        </div>
        <Skeleton className="h-14 w-full rounded-lg" />
      </div>
      
      <div className="space-y-4">
        <div className="flex items-center gap-2">
          <Skeleton className="h-5 w-5 rounded-full" />
          <Skeleton className="h-5 w-28" />
        </div>
        <Skeleton className="h-14 w-full rounded-lg" />
      </div>

      <div className="text-center pt-2">
        <Skeleton className="h-4 w-48 mx-auto" />
      </div>
    </div>
  )
}