<x-admin-layout>
    <div class="min-h-screen bg-slate-50/50">
        <div class="max-w-6xl mx-auto px-6 sm:px-8 lg:px-10 py-12">

            <!-- Page Header -->
            <div class="mb-12">
                <h1 class="text-3xl font-black text-slate-900 tracking-tight">Vue d'ensemble</h1>
                <p class="text-slate-400 text-sm mt-2 font-medium">Suivez vos contributions et votre participation aux projets de l'association.</p>
            </div>

            <!-- Stats Grid -->
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16">

                <!-- Personal Contributions Stat -->
                <div class="bg-white border border-slate-100 rounded-3xl p-8 shadow-sm hover:shadow-md transition-all hover:-translate-y-0.5 duration-200">
                    <div class="flex items-center justify-between mb-6">
                        <div class="w-12 h-12 rounded-2xl flex items-center justify-center" style="background-color: rgba(16, 185, 129, 0.12);">
                            <svg class="w-6 h-6" style="color: #10b981;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg>
                        </div>
                        <span class="text-[11px] font-black uppercase tracking-widest px-3 py-1.5 rounded-full" style="color: #10b981; background-color: rgba(16, 185, 129, 0.08);">Personnel</span>
                    </div>
                    <p class="text-sm font-semibold text-slate-400 uppercase tracking-widest mb-2">Total Cotisé</p>
                    <h2 class="text-4xl font-black text-slate-900 tracking-tight">{{ \App\Models\Setting::format($totalContributed) }}</h2>
                </div>

                <!-- Collective GIE Stat -->
                <div class="bg-white border border-slate-100 rounded-3xl p-8 shadow-sm hover:shadow-md transition-all hover:-translate-y-0.5 duration-200">
                    <div class="flex items-center justify-between mb-6">
                        <div class="w-12 h-12 rounded-2xl flex items-center justify-center" style="background-color: rgba(251, 191, 36, 0.12);">
                            <svg class="w-6 h-6" style="color: #fbbf24;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
                            </svg>
                        </div>
                        <span class="text-[11px] font-black uppercase tracking-widest px-3 py-1.5 rounded-full" style="color: #d97706; background-color: rgba(251, 191, 36, 0.1);">Collectif</span>
                    </div>
                    <p class="text-sm font-semibold text-slate-400 uppercase tracking-widest mb-2">Flux Total</p>
                    <h2 class="text-4xl font-black text-slate-900 tracking-tight">{{ \App\Models\Setting::format($totalGIE) }}</h2>
                </div>

                <!-- Projects Stat -->
                <div class="bg-white border border-slate-100 rounded-3xl p-8 shadow-sm hover:shadow-md transition-all hover:-translate-y-0.5 duration-200">
                    <div class="flex items-center justify-between mb-6">
                        <div class="w-12 h-12 rounded-2xl flex items-center justify-center" style="background-color: rgba(239, 68, 68, 0.1);">
                            <svg class="w-6 h-6" style="color: #ef4444;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
                            </svg>
                        </div>
                        <span class="text-[11px] font-black uppercase tracking-widest px-3 py-1.5 rounded-full" style="color: #ef4444; background-color: rgba(239, 68, 68, 0.08);">Mes Projets</span>
                    </div>
                    <p class="text-sm font-semibold text-slate-400 uppercase tracking-widest mb-2">Participation</p>
                    <h2 class="text-5xl font-black text-slate-900 tracking-tight">{{ $projects->count() }}</h2>
                </div>
            </div>

            <!-- Bottom Section Grid -->
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">

                <!-- Left: My Projects Table (Spans 2 columns) -->
                <div class="lg:col-span-2 bg-white border border-slate-100 rounded-3xl shadow-sm overflow-hidden">
                    <div class="px-8 py-6 border-b border-slate-100 flex items-center justify-between">
                        <div>
                            <h3 class="text-base font-black text-slate-900 uppercase tracking-widest">État de mes Projets</h3>
                            <p class="text-xs text-slate-400 mt-1 font-medium">Suivi de vos cotisations par projet</p>
                        </div>
                        <div class="w-2 h-2 rounded-full bg-amber-400 animate-pulse"></div>
                    </div>
                    <div class="overflow-x-auto">
                        <table class="min-w-full">
                            <thead>
                                <tr class="border-b border-slate-100">
                                    <th class="px-8 py-4 text-left text-[11px] font-black text-slate-400 uppercase tracking-widest">Projet</th>
                                    <th class="px-8 py-4 text-left text-[11px] font-black text-slate-400 uppercase tracking-widest">Cotisé</th>
                                    <th class="px-8 py-4 text-center text-[11px] font-black text-slate-400 uppercase tracking-widest">Statut</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($contributionsByProject as $item)
                                    <tr class="border-b border-slate-50 hover:bg-slate-50/80 transition-colors duration-150">
                                        <td class="px-8 py-5">
                                            <div class="font-bold text-slate-900 uppercase tracking-tight">{{ $item['project']->name }}</div>
                                            <div class="text-[11px] text-slate-400 mt-0.5">Depuis {{ $item['project']->start_date ? \Carbon\Carbon::parse($item['project']->start_date)->format('M Y') : '-' }}</div>
                                        </td>
                                        <td class="px-8 py-5">
                                            <span class="font-black text-slate-900 text-base tracking-tight">{{ $item['paid'] > 0 ? \App\Models\Setting::format($item['paid']) : '0,00 €' }}</span>
                                        </td>
                                        <td class="px-8 py-5 text-center">
                                            @if($item['remaining'] <= 0)
                                                <span class="inline-flex items-center px-4 py-1.5 rounded-full text-[10px] font-black uppercase tracking-widest text-black" style="background-color: #fbbf24;">À jour</span>
                                            @else
                                                <span class="inline-flex items-center px-4 py-1.5 rounded-full text-[10px] font-black uppercase tracking-widest" style="color: #92400e; background-color: rgba(251, 191, 36, 0.15);">{{ \App\Models\Setting::format($item['remaining']) }} DÛ</span>
                                            @endif
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="3" class="px-8 py-16 text-center text-slate-400 text-sm font-medium">Aucune activité enregistrée.</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- Right: Recent Transactions -->
                <div class="lg:col-span-1 bg-white border border-slate-100 rounded-3xl shadow-sm overflow-hidden">
                    <div class="px-8 py-6 border-b border-slate-100 flex items-center justify-between">
                        <div>
                            <h3 class="text-base font-black text-slate-900 uppercase tracking-widest">Mouvements récents</h3>
                            <p class="text-xs text-slate-400 mt-1 font-medium">Vos dernières transactions</p>
                        </div>
                        <div class="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></div>
                    </div>
                    <div class="overflow-x-auto">
                        <table class="min-w-full">
                            <thead>
                                <tr class="border-b border-slate-100">
                                    <th class="px-8 py-4 text-left text-[11px] font-black text-slate-400 uppercase tracking-widest">Date</th>
                                    <th class="px-8 py-4 text-right text-[11px] font-black text-slate-400 uppercase tracking-widest">Montant</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($recentContributions as $contribution)
                                    <tr class="border-b border-slate-50 hover:bg-slate-50/80 transition-colors duration-150">
                                        <td class="px-8 py-5">
                                            <div class="font-bold text-slate-900 tracking-tight">{{ $contribution->payment_date->format('d/m/Y') }}</div>
                                            <div class="text-[11px] text-slate-400 uppercase font-medium mt-0.5">{{ $contribution->project->name }}</div>
                                        </td>
                                        <td class="px-8 py-5 text-right">
                                            <div class="font-black text-slate-900 text-base">{{ \App\Models\Setting::format($contribution->amount) }}</div>
                                            <div class="text-[11px] mt-0.5 font-semibold {{ $contribution->status === 'paye' ? 'text-emerald-500' : 'text-amber-500' }}">{{ $contribution->status === 'paye' ? 'Validé' : 'En attente' }}</div>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="2" class="px-8 py-16 text-center text-slate-400 text-sm font-medium">Aucun mouvement.</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>

            </div>
        </div>
    </div>
</x-admin-layout>