---
import Button from '@components/base/Button.astro';
import type { PaymentMethod } from '@/data/paymentData';

export interface Props {
    total: number;
    paymentMethods: readonly PaymentMethod[];
}

const { total, paymentMethods } = Astro.props;
---

<div class="bg-white p-8 rounded-2xl shadow-lg border border-gray-100 animate-slide-in-left">
    <!-- Payment method tabs -->
    <div class="flex border-b border-gray-200 mb-6">
        {paymentMethods.map((method) => (
                <button
                        data-tab={method.id}
                        class={`flex-1 py-3 text-sm md:text-base font-medium transition-colors border-b-2 ${
                            method.id === 'card'
                                ? 'text-amber-600 border-amber-500'
                                : 'text-gray-500 border-transparent hover:text-gray-800'
                        }`}
                >
                    {method.name}
                </button>
        ))}
    </div>

    <!-- Tab content -->
    <div>
        <!-- Card Payment -->
        <div
                id="tab-card"
                data-tab-content
                class="tab-content space-y-4"
        >
            <div>
                <label class="text-sm font-medium text-gray-700">
                    Kartennummer
                </label>
                <div class="relative mt-1">
                    <svg class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"></path>
                    </svg>
                    <input
                            type="text"
                            placeholder="0000 0000 0000 0000"
                            class="w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg focus:ring-amber-500 focus:border-amber-500"
                    />
                </div>
            </div>
            <div>
                <label class="text-sm font-medium text-gray-700">
                    Name auf der Karte
                </label>
                <input
                        type="text"
                        placeholder="Max Mustermann"
                        class="w-full mt-1 py-2 px-3 border border-gray-300 rounded-lg focus:ring-amber-500 focus:border-amber-500"
                />
            </div>
            <div class="flex gap-4">
                <div class="flex-1">
                    <label class="text-sm font-medium text-gray-700">
                        Gültig bis (MM/JJ)
                    </label>
                    <input
                            type="text"
                            placeholder="MM/JJ"
                            class="w-full mt-1 py-2 px-3 border border-gray-300 rounded-lg focus:ring-amber-500 focus:border-amber-500"
                    />
                </div>
                <div class="flex-1">
                    <label class="text-sm font-medium text-gray-700">
                        CVV
                    </label>
                    <div class="relative mt-1">
                        <svg class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
                        </svg>
                        <input
                                type="text"
                                placeholder="123"
                                class="w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg focus:ring-amber-500 focus:border-amber-500"
                        />
                    </div>
                </div>
            </div>
        </div>

        <!-- PayPal Payment -->
        <div
                id="tab-paypal"
                data-tab-content
                class="tab-content text-center py-8 hidden"
        >
            <p class="text-gray-600 mb-4">
                Sie werden zu PayPal weitergeleitet, um die Zahlung abzuschließen.
            </p>
            <Button
                    variant="secondary"
                    fullWidth={true}
                    class="bg-blue-600 hover:bg-blue-700 text-white py-3 px-4 rounded-lg font-semibold transition-colors flex items-center justify-center gap-2"
            >
                <svg class="w-6 h-6" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M7.5 14.25c0 .414.336.75.75.75h3.75c.414 0 .75-.336.75-.75s-.336-.75-.75-.75H8.25c-.414 0-.75.336-.75.75zm0-3c0 .414.336.75.75.75h6.75c.414 0 .75-.336.75-.75s-.336-.75-.75-.75H8.25c-.414 0-.75.336-.75.75z"/>
                    <path d="M21.25 4.5H2.75A2.75 2.75 0 000 7.25v9.5A2.75 2.75 0 002.75 19.5h18.5A2.75 2.75 0 0024 16.75v-9.5A2.75 2.75 0 0021.25 4.5zM22.5 16.75c0 .69-.56 1.25-1.25 1.25H2.75c-.69 0-1.25-.56-1.25-1.25v-9.5c0-.69.56-1.25 1.25-1.25h18.5c.69 0 1.25.56 1.25 1.25v9.5z"/>
                </svg>
                Mit PayPal bezahlen
            </Button>
        </div>
    </div>

    <!-- Payment button and security badges -->
    <div class="mt-8">
        <Button
                variant="primary"
                fullWidth={true}
                size="lg"
        >
            Jetzt bezahlen ({total.toFixed(2)} €)
        </Button>

        <!-- SecurityBadges component -->
        <div class="mt-6 text-center">
            <div class="flex items-center justify-center gap-2 text-sm text-green-700 mb-4">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
                </svg>
                <span>SSL-verschlüsselte & sichere Zahlung</span>
            </div>
            <div class="flex justify-center items-center space-x-5 opacity-70">
                <img
                        src="/images/payment/visa.svg"
                        alt="Visa"
                        width={42}
                        height={24}
                />
                <img
                        src="/images/payment/mastercard.svg"
                        alt="Mastercard"
                        width={42}
                        height={24}
                />
                <img
                        src="/images/payment/amex.svg"
                        alt="American Express"
                        width={42}
                        height={24}
                />
                <img
                        src="/images/payment/paypal.svg"
                        alt="PayPal"
                        width={50}
                        height={24}
                />
            </div>
        </div>
    </div>
</div>

<style>
    @keyframes slide-in-left {
        from {
            opacity: 0;
            transform: translateX(-30px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    .animate-slide-in-left {
        animation: slide-in-left 0.8s ease-out forwards;
    }

    .tab-content {
        transition: opacity 0.3s ease;
    }
</style>

<script>
    // Tab switching functionality
    document.addEventListener('DOMContentLoaded', function() {
        const tabButtons = document.querySelectorAll('[data-tab]');
        const tabContents = document.querySelectorAll('[data-tab-content]');

        tabButtons.forEach(button => {
            button.addEventListener('click', function() {
                const targetTab = this.getAttribute('data-tab');

                // Update active tab button
                tabButtons.forEach(btn => {
                    btn.classList.remove('text-amber-600', 'border-amber-500');
                    btn.classList.add('text-gray-500', 'border-transparent');
                });
                this.classList.add('text-amber-600', 'border-amber-500');
                this.classList.remove('text-gray-500', 'border-transparent');

                // Show target tab content
                tabContents.forEach(content => {
                    content.classList.add('hidden');
                });
                document.getElementById(`tab-${targetTab}`).classList.remove('hidden');
            });
        });
    });
</script>
