@extends('layouts.app')

@section('content')
    <!-- Hero Section -->
    <section class="relative py-20 bg-gradient-to-br from-rose-50 via-pink-50 to-amber-50">
        <div class="max-w-7xl mx-auto px-6">
            <div class="flex items-center justify-between mb-8">
                <div>
                    <span class="text-rose-600 uppercase tracking-[0.3em] text-[10px] mb-2 block">Mon Compte</span>
                    <h1 class="font-serif text-4xl md:text-5xl italic text-gray-900">Mes Points de Fidélité</h1>
                </div>
                <a href="{{ route('loyalty') }}" class="text-rose-600 hover:text-rose-700 flex items-center gap-2 text-sm">
                    <i data-lucide="info" class="w-4 h-4"></i>
                    Comment ça marche ?
                </a>
            </div>

            <!-- Carte Points Principaux -->
            <div class="grid md:grid-cols-3 gap-6 mb-12">
                <!-- Points Disponibles -->
                <div class="bg-gradient-to-br from-rose-500 to-pink-600 p-8 rounded-3xl text-white relative overflow-hidden">
                    <div class="absolute top-0 right-0 w-32 h-32 bg-white/10 rounded-full -mr-16 -mt-16"></div>
                    <div class="relative z-10">
                        <i data-lucide="gift" class="w-10 h-10 mb-4 opacity-80"></i>
                        <p class="text-white/80 text-sm uppercase tracking-wider mb-2">Points Disponibles</p>
                        <p class="text-5xl font-bold">{{ number_format($user->total_loyalty_points) }}</p>
                        <p class="text-white/70 text-xs mt-2">≈ {{ number_format($user->total_loyalty_points * 0.1, 2) }} د.ت</p>
                    </div>
                </div>

                <!-- Points Gagnés -->
                <div class="bg-white p-8 rounded-3xl border-2 border-gray-100 hover:shadow-xl transition-shadow">
                    <i data-lucide="trending-up" class="w-8 h-8 text-green-600 mb-4"></i>
                    <p class="text-gray-600 text-sm uppercase tracking-wider mb-2">Total Gagné</p>
                    <p class="text-4xl font-bold text-gray-900">{{ number_format($totalEarned) }}</p>
                    <p class="text-gray-500 text-xs mt-2">Depuis votre inscription</p>
                </div>

                <!-- Points Utilisés -->
                <div class="bg-white p-8 rounded-3xl border-2 border-gray-100 hover:shadow-xl transition-shadow">
                    <i data-lucide="shopping-cart" class="w-8 h-8 text-purple-600 mb-4"></i>
                    <p class="text-gray-600 text-sm uppercase tracking-wider mb-2">Total Utilisé</p>
                    <p class="text-4xl font-bold text-gray-900">{{ number_format($totalUsed) }}</p>
                    <p class="text-gray-500 text-xs mt-2">En réductions</p>
                </div>
            </div>

            <!-- Code de Parrainage -->
            <div class="bg-gradient-to-br from-purple-50 to-pink-50 p-8 rounded-3xl mb-12">
                <div class="flex items-start justify-between">
                    <div class="flex-1">
                        <div class="flex items-center gap-3 mb-3">
                            <i data-lucide="users" class="w-6 h-6 text-purple-600"></i>
                            <h3 class="text-2xl font-serif italic text-gray-900">Parrainez vos amis</h3>
                        </div>
                        <p class="text-gray-600 mb-4">
                            Partagez votre code et gagnez 500 points quand un ami passe sa première commande. 
                            Votre ami bénéficie également de 15% de réduction !
                        </p>
                        <div class="flex items-center gap-4">
                            <div class="flex-1 max-w-md">
                                <label class="block text-xs text-gray-600 mb-2 uppercase tracking-wider">Votre code de parrainage</label>
                                <div class="flex items-center gap-2">
                                    <input type="text" 
                                           id="referralCode" 
                                           value="{{ $user->referral_code }}" 
                                           readonly 
                                           class="flex-1 px-4 py-3 bg-white border-2 border-purple-200 rounded-xl text-center font-mono text-lg font-bold text-purple-600">
                                    <button onclick="copyReferralCode()" 
                                            class="px-6 py-3 bg-gradient-to-r from-purple-500 to-pink-600 text-white rounded-xl hover:shadow-lg transition-all">
                                        <i data-lucide="copy" class="w-5 h-5"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Échanger des Points -->
            @if($user->total_loyalty_points >= 100)
            <div class="bg-gradient-to-br from-amber-50 to-orange-50 p-8 rounded-3xl mb-12">
                <div class="flex items-center gap-3 mb-4">
                    <i data-lucide="sparkles" class="w-6 h-6 text-amber-600"></i>
                    <h3 class="text-2xl font-serif italic text-gray-900">Échanger vos points</h3>
                </div>
                <p class="text-gray-600 mb-6">
                    Transformez vos points en code promo ! 100 points = 10 د.ت de réduction
                </p>
                
                <form action="{{ route('loyalty.redeem') }}" method="POST" class="max-w-md">
                    @csrf
                    <div class="flex gap-3">
                        <input type="number" 
                               name="points" 
                               min="100" 
                               step="100" 
                               max="{{ $user->total_loyalty_points }}" 
                               placeholder="Nombre de points"
                               class="flex-1 px-4 py-3 border-2 border-amber-200 rounded-xl focus:outline-none focus:border-amber-400">
                        <button type="submit" 
                                class="px-8 py-3 bg-gradient-to-r from-amber-500 to-orange-600 text-white rounded-xl hover:shadow-lg transition-all font-medium uppercase text-xs tracking-wider">
                            Échanger
                        </button>
                    </div>
                    <p class="text-xs text-gray-500 mt-2">Minimum 100 points requis</p>
                </form>
            </div>
            @endif

            @if(session('success'))
            <div class="bg-green-50 border-2 border-green-200 text-green-800 px-6 py-4 rounded-xl mb-6 flex items-center gap-3">
                <i data-lucide="check-circle" class="w-5 h-5"></i>
                <span>{{ session('success') }}</span>
            </div>
            @endif

            @if(session('error'))
            <div class="bg-red-50 border-2 border-red-200 text-red-800 px-6 py-4 rounded-xl mb-6 flex items-center gap-3">
                <i data-lucide="alert-circle" class="w-5 h-5"></i>
                <span>{{ session('error') }}</span>
            </div>
            @endif
        </div>
    </section>

    <!-- Historique des Points -->
    <section class="py-16 bg-white">
        <div class="max-w-7xl mx-auto px-6">
            <h2 class="font-serif text-3xl italic text-gray-900 mb-8">Historique des transactions</h2>
            
            <div class="bg-white rounded-2xl border-2 border-gray-100 overflow-hidden">
                @forelse($pointsHistory as $point)
                <div class="flex items-center justify-between p-6 border-b border-gray-100 hover:bg-gray-50 transition-colors">
                    <div class="flex items-center gap-4">
                        <!-- Icône selon le type -->
                        @if($point->action_type === 'purchase')
                            <div class="w-12 h-12 bg-rose-100 rounded-full flex items-center justify-center">
                                <i data-lucide="shopping-bag" class="w-6 h-6 text-rose-600"></i>
                            </div>
                        @elseif($point->action_type === 'registration')
                            <div class="w-12 h-12 bg-amber-100 rounded-full flex items-center justify-center">
                                <i data-lucide="user-plus" class="w-6 h-6 text-amber-600"></i>
                            </div>
                        @elseif($point->action_type === 'referral_giver')
                            <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center">
                                <i data-lucide="users" class="w-6 h-6 text-purple-600"></i>
                            </div>
                        @elseif($point->action_type === 'birthday')
                            <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center">
                                <i data-lucide="cake" class="w-6 h-6 text-blue-600"></i>
                            </div>
                        @elseif($point->action_type === 'review')
                            <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center">
                                <i data-lucide="message-circle" class="w-6 h-6 text-green-600"></i>
                            </div>
                        @elseif($point->action_type === 'redemption')
                            <div class="w-12 h-12 bg-gray-100 rounded-full flex items-center justify-center">
                                <i data-lucide="gift" class="w-6 h-6 text-gray-600"></i>
                            </div>
                        @endif

                        <div>
                            <p class="font-medium text-gray-900">{{ $point->description }}</p>
                            <p class="text-sm text-gray-500">{{ $point->created_at->format('d/m/Y H:i') }}</p>
                        </div>
                    </div>

                    <div class="text-right">
                        <p class="text-2xl font-bold {{ $point->points > 0 ? 'text-green-600' : 'text-red-600' }}">
                            {{ $point->points > 0 ? '+' : '' }}{{ number_format($point->points) }}
                        </p>
                        <p class="text-xs text-gray-500">points</p>
                    </div>
                </div>
                @empty
                <div class="p-12 text-center">
                    <i data-lucide="inbox" class="w-16 h-16 text-gray-300 mx-auto mb-4"></i>
                    <p class="text-gray-500">Aucune transaction pour le moment</p>
                    <a href="{{ route('shop') }}" class="inline-block mt-4 text-rose-600 hover:text-rose-700 text-sm font-medium">
                        Commencer à gagner des points →
                    </a>
                </div>
                @endforelse
            </div>

            @if($pointsHistory->hasPages())
            <div class="mt-8">
                {{ $pointsHistory->links() }}
            </div>
            @endif
        </div>
    </section>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            lucide.createIcons();
        });

        function copyReferralCode() {
            const codeInput = document.getElementById('referralCode');
            codeInput.select();
            document.execCommand('copy');
            
            // Afficher un message de confirmation
            alert('Code de parrainage copié : ' + codeInput.value);
        }
    </script>
@endsection