@extends('layouts.app')

@section('title', 'Collecte')

@section('content')
<div x-data="campaignDetail({{ $campaign->id }})" x-cloak class="grid grid-cols-3 gap-8">
    <!-- Contenu principal -->
    <div class="col-span-2 space-y-8">
        <!-- En-tête -->
        <div class="bg-gradient-to-br from-green-400 to-green-600 h-80 rounded-lg flex items-center justify-center text-white text-8xl">
            @switch($campaign->category)
                @case('health') 🏥 @break
                @case('education') 📚 @break
                @case('emergency') 🆘 @break
                @case('community') 👥 @break
                @default ➕
            @endswitch
        </div>

        <!-- Titre & Description -->
        <div>
            <div class="flex items-center gap-2 mb-2">
                <h1 class="text-4xl font-bold text-gray-900">{{ $campaign->title }}</h1>
                @if($campaign->is_urgent)
                    <span class="bg-red-100 text-red-800 px-3 py-1 rounded-full text-sm font-medium">🔥 Urgent</span>
                @endif
            </div>

            <div class="flex items-center text-gray-600 mb-6">
                <img src="https://ui-avatars.com/api/?name={{ urlencode($campaign->user->name) }}&background=random" alt="" class="w-10 h-10 rounded-full mr-3">
                <div>
                    <p class="font-medium">{{ $campaign->user->organization_name ?? $campaign->user->name }}</p>
                    <p class="text-sm">{{ $campaign->user->name }}</p>
                </div>
            </div>

            <p class="text-lg text-gray-700 mb-6">{{ $campaign->description }}</p>
        </div>

        <!-- Donations -->
        <div class="bg-white rounded-lg shadow-md p-8">
            <h2 class="text-2xl font-bold text-gray-900 mb-6">💬 Derniers soutiens</h2>

            <div class="space-y-4" x-show="!loadingDonations">
                <template x-for="donation in recentDonations" :key="donation.id">
                    <div class="flex items-center justify-between pb-4 border-b border-gray-200">
                        <div>
                            <p class="font-medium text-gray-900" x-text="donation.donor_name || 'Donateur anonyme'"></p>
                            <template x-if="donation.donor_message">
                                <p class="text-sm text-gray-600 italic" x-text="'« ' + donation.donor_message + ' »'"></p>
                            </template>
                        </div>
                        <p class="font-bold text-green-600" x-text="'€' + donation.amount.toFixed(2)"></p>
                    </div>
                </template>
            </div>

            <template x-if="recentDonations.length === 0">
                <p class="text-gray-500 text-center py-4">Aucun soutien pour le moment...</p>
            </template>
        </div>
    </div>

    <!-- Sidebar -->
    <div class="space-y-6">
        <!-- Statistiques -->
        <div class="bg-white rounded-lg shadow-md p-8">
            <!-- Progrès -->
            <div class="mb-6">
                <div class="flex justify-between items-baseline mb-2">
                    <h3 class="text-3xl font-bold text-green-600">{{ $campaign->current_amount ? '€' . number_format($campaign->current_amount, 2) : '€0' }}</h3>
                    <span class="text-gray-600">sur <strong>€{{ number_format($campaign->goal_amount, 2) }}</strong></span>
                </div>
                <div class="w-full bg-gray-200 rounded-full h-4 mb-2">
                    <div class="bg-green-600 h-4 rounded-full transition-all" style="width: {{ min(100, ($campaign->current_amount / $campaign->goal_amount) * 100) }}%"></div>
                </div>
                <p class="text-sm text-gray-600">{{ round(($campaign->current_amount / $campaign->goal_amount) * 100) }}% de l'objectif atteint</p>
            </div>

            <!-- Stats -->
            <div class="grid grid-cols-2 gap-4 mb-6 text-center">
                <div>
                    <p class="text-3xl font-bold text-gray-900">{{ $campaign->donor_count }}</p>
                    <p class="text-sm text-gray-600">contributeurs</p>
                </div>
                <div>
                    <p class="text-3xl font-bold text-gray-900">{{ $campaign->created_at->diffForHumans() }}</p>
                    <p class="text-sm text-gray-600">lancée</p>
                </div>
            </div>

            <!-- Partage -->
            <button onclick="navigator.share({ title: '{{ $campaign->title }}', url: window.location.href })" class="w-full bg-blue-600 text-white py-3 rounded-lg hover:bg-blue-700 font-medium mb-3">
                📤 Partager
            </button>

            <!-- Copier lien -->
            <button @click="copyLink()" class="w-full bg-gray-200 text-gray-900 py-2 rounded-lg hover:bg-gray-300 font-medium text-sm">
                Copier le lien
            </button>
        </div>

        <!-- Donation Form -->
        <div class="bg-white rounded-lg shadow-md p-8">
            <h3 class="text-2xl font-bold text-gray-900 mb-6">Contribuer</h3>

            <form @submit.prevent="submitDonation()" class="space-y-4">
                <!-- Montant -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Montant (€)</label>
                    <div class="grid grid-cols-3 gap-2 mb-2">
                        <button type="button" @click="amount = 5" :class="amount === 5 ? 'bg-green-600 text-white' : 'bg-gray-100'" class="py-2 rounded-lg font-medium">5€</button>
                        <button type="button" @click="amount = 20" :class="amount === 20 ? 'bg-green-600 text-white' : 'bg-gray-100'" class="py-2 rounded-lg font-medium">20€</button>
                        <button type="button" @click="amount = 50" :class="amount === 50 ? 'bg-green-600 text-white' : 'bg-gray-100'" class="py-2 rounded-lg font-medium">50€</button>
                    </div>
                    <input type="number" x-model.number="amount" min="5" placeholder="Montant personnalisé" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500" required>
                </div>

                <!-- Donateur -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Nom (optionnel)</label>
                    <input type="text" x-model="donorName" placeholder="Votre nom" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500">
                </div>

                <!-- Email -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Email (optionnel)</label>
                    <input type="email" x-model="donorEmail" placeholder="votre@email.com" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500">
                </div>

                <!-- Message -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Message (optionnel)</label>
                    <textarea x-model="donorMessage" placeholder="Un message de soutien..." class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 resize-none" rows="3"></textarea>
                </div>

                <!-- Stripe Element -->
                <div id="card-element" class="px-4 py-3 border border-gray-300 rounded-lg"></div>
                <div id="card-errors" class="text-red-600 text-sm mt-2"></div>

                <!-- Submit -->
                <button type="submit" :disabled="loading" class="w-full bg-green-600 text-white py-3 rounded-lg hover:bg-green-700 font-bold disabled:opacity-50">
                    <template x-if="!loading">Contribuer €<span x-text="amount.toFixed(2)"></span></template>
                    <template x-if="loading">⏳ Traitement...</template>
                </button>

                <p class="text-xs text-gray-500 text-center">Paiement sécurisé via Stripe</p>
            </form>
        </div>
    </div>
</div>

<script>
function campaignDetail(campaignId) {
    return {
        amount: 20,
        donorName: '',
        donorEmail: '',
        donorMessage: '',
        loading: false,
        loadingDonations: true,
        recentDonations: [],
        stripe: null,
        elements: null,
        cardElement: null,

        async init() {
            this.stripe = Stripe('{{ config('services.stripe.public') }}');
            this.elements = this.stripe.elements();
            this.cardElement = this.elements.create('card');
            this.cardElement.mount('#card-element');

            this.cardElement.addEventListener('change', (event) => {
                const displayError = document.getElementById('card-errors');
                displayError.textContent = event.error ? event.error.message : '';
            });

            await this.loadDonations();
        },

        async loadDonations() {
            try {
                const response = await fetch(`/api/campaigns/${campaignId}/donations`);
                if (response.ok) {
                    const data = await response.json();
                    this.recentDonations = data.data || [];
                }
            } catch (error) {
                console.error('Error loading donations:', error);
            } finally {
                this.loadingDonations = false;
            }
        },

        async submitDonation() {
            this.loading = true;

            try {
                // Créer PaymentMethod via Stripe
                const { paymentMethod, error } = await this.stripe.createPaymentMethod({
                    type: 'card',
                    card: this.cardElement,
                    billing_details: {
                        name: this.donorName,
                        email: this.donorEmail,
                    }
                });

                if (error) {
                    document.getElementById('card-errors').textContent = error.message;
                    this.loading = false;
                    return;
                }

                // Envoyer donation à l'API
                const response = await fetch(`/api/campaigns/${campaignId}/donate`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]').content
                    },
                    body: JSON.stringify({
                        amount: this.amount,
                        payment_method_id: paymentMethod.id,
                        donor_email: this.donorEmail,
                        donor_name: this.donorName,
                        donor_message: this.donorMessage
                    })
                });

                if (response.ok) {
                    alert('Merci pour votre contribution !');
                    this.amount = 20;
                    this.donorName = '';
                    this.donorEmail = '';
                    this.donorMessage = '';
                    await this.loadDonations();
                } else {
                    const error = await response.json();
                    alert('Erreur: ' + (error.error || 'Paiement échoué'));
                }
            } catch (error) {
                console.error('Error:', error);
                alert('Erreur lors du traitement');
            } finally {
                this.loading = false;
            }
        },

        copyLink() {
            navigator.clipboard.writeText(window.location.href);
            alert('Lien copié !');
        }
    }
}
</script>
@endsection