<script setup lang="ts">
/**
 * Mock PayPal Button Component
 *
 * Simulates a PayPal payment for development/testing purposes.
 * In production, this would be replaced with the real PayPal SDK integration.
 *
 * Features:
 * - Displays mock PayPal button with branding
 * - Simulates 2-second payment processing
 * - Emits success event after "payment" completes
 * - Shows loading state during processing
 * - Displays amount to be paid
 */

interface Props {
  orderId: string
  amount: number
}

const props = defineProps<Props>()

const emit = defineEmits<{
  success: []
}>()

const isProcessing = ref(false)

/**
 * Simulate PayPal payment
 * In production, this would integrate with PayPal SDK
 */
async function handlePayment() {
  isProcessing.value = true

  try {
    // Simulate payment processing delay (2 seconds)
    await new Promise((resolve) => setTimeout(resolve, 2000))

    // In production: Call PayPal API to process payment
    // const result = await processPayPalPayment(props.orderId, props.amount)

    // Emit success event
    emit('success')
  } catch (error) {
    console.error('Mock payment failed:', error)
    // In production: Show error message to user
  } finally {
    isProcessing.value = false
  }
}
</script>

<template>
  <div class="space-y-4">
    <!-- Payment Amount Info -->
    <div class="flex items-center justify-between p-4 bg-white/5 rounded-lg border border-white/10">
      <span class="text-white/80">Zu zahlen:</span>
      <span class="text-xl font-bold text-experimenta-accent">
        {{
          new Intl.NumberFormat('de-DE', {
            style: 'currency',
            currency: 'EUR',
          }).format(amount)
        }}
      </span>
    </div>

    <!-- Mock PayPal Button -->
    <button
      @click="handlePayment"
      :disabled="isProcessing"
      class="w-full relative overflow-hidden bg-[#0070ba] hover:bg-[#005ea6] disabled:bg-[#0070ba]/50 disabled:cursor-not-allowed text-white font-bold py-4 px-6 rounded-lg transition-colors shadow-lg"
    >
      <span v-if="!isProcessing" class="flex items-center justify-center gap-3">
        <!-- PayPal Logo SVG -->
        <svg
          class="w-6 h-6"
          viewBox="0 0 24 24"
          fill="currentColor"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M20.067 8.478c.492.88.556 2.014.3 3.327-.74 3.806-3.276 5.12-6.514 5.12h-.5a.805.805 0 00-.794.683l-.94 5.96-.267 1.69a.404.404 0 01-.4.342H7.55a.48.48 0 01-.474-.555l.912-5.782.916-5.816a.959.959 0 01.948-.812h1.964c4.332 0 7.299-1.775 8.06-6.145a4.803 4.803 0 00-.808-4.014 6.186 6.186 0 00-1.636-1.293A7.943 7.943 0 0013.784 0H6.732A.959.959 0 005.784.812L2.076 23.235a.48.48 0 00.474.555h3.952a.959.959 0 00.948-.812l.912-5.782h1.74c4.919 0 8.74-2.016 9.965-7.718z"
          />
        </svg>
        <span>Mit PayPal bezahlen (Mock)</span>
      </span>
      <span v-else class="flex items-center justify-center gap-2">
        <div
          class="animate-spin rounded-full h-5 w-5 border-2 border-white/20 border-t-white"
        />
        Zahlung wird verarbeitet...
      </span>
    </button>

    <!-- Mock Info -->
    <div class="text-center">
      <p class="text-xs text-white/40 italic">
        Dies ist ein Mock-PayPal-Button für Entwicklungszwecke.
        <br />
        Die Zahlung wird simuliert und ist nicht echt.
      </p>
    </div>
  </div>
</template>
