@extends('layouts.app')

@section('title', 'Dashboard')

@section('content')
    <div class="max-w-7xl mx-auto px-6 py-10">

        {{-- Header --}}
        <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-10">
            <div class="slide-up">
                <p class="text-sm font-bold text-gray-500 uppercase tracking-widest mb-1">Dashboard</p>
                <h1 class="text-3xl font-black text-white">Good day, {{ explode(' ', auth()->user()->name)[0] }} 👋</h1>
            </div>
            <div class="flex gap-3 slide-up" style="animation-delay:.1s">
                <a href="{{ route('deposits.create') }}"
                    class="px-4 py-2.5 rounded-xl bg-white/5 border border-white/10 text-sm font-bold text-gray-300 hover:border-indigo-500/40 transition-all">
                    + Fund Wallet
                </a>
                <a href="{{ route('campaigns.create') }}"
                    class="btn-primary px-4 py-2.5 rounded-xl text-sm font-bold text-white">
                    New Campaign
                </a>
            </div>
        </div>

        {{-- Stat Cards --}}
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-10">
            @php
                $stats = [
                    ['Wallet Balance', '₦' . number_format($wallet->balance ?? 0, 2), 'text-emerald-400', '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', 'bg-emerald-500/10'],
                ['Total Campaigns', auth()->user()->emailCampaigns()->count(), 'text-indigo-400', 'M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z', 'bg-indigo-500/10'],
                ['Emails Sent', number_format($totalSent), 'text-purple-400', 'M12 19l9 2-9-18-9 18 9-2zm0 0v-8', 'bg-purple-500/10'],
                ['Total Deposits', auth()->user()->deposits()->count(), 'text-pink-400', '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', 'bg-pink-500/10'],
                ];
            @endphp

            @foreach($stats as $i => $s)
                <div class="card-glass rounded-2xl p-5 slide-up" style="animation-delay:{{ $i * 0.07 }}s">
                    <div class="w-9 h-9 rounded-xl {{ $s[4] }} flex items-center justify-center mb-4">
                        <svg class="w-5 h-5 {{ $s[2] }}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="{{ $s[3] }}" />
                        </svg>
                    </div>
                    <div class="text-2xl font-black text-white">{{ $s[1] }}</div>
                    <div class="text-xs text-gray-500 font-semibold mt-1">{{ $s[0] }}</div>
                </div>
            @endforeach
        </div>

        <div class="grid md:grid-cols-2 gap-6">

            {{-- Recent Campaigns --}}
            <div class="card-glass rounded-2xl p-6 slide-up" style="animation-delay:.2s">
                <div class="flex items-center justify-between mb-5">
                    <h2 class="font-black text-white">Recent Campaigns</h2>
                    <a href="{{ route('campaigns.index') }}"
                        class="text-xs font-bold text-indigo-400 hover:text-indigo-300 transition-colors">View all →</a>
                </div>

                @if($campaigns->isEmpty())
                    <div class="text-center py-10">
                        <svg class="w-10 h-10 text-gray-700 mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                                d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                        </svg>
                        <p class="text-sm text-gray-600 font-semibold">No campaigns yet</p>
                        <a href="{{ route('campaigns.create') }}"
                            class="text-xs text-indigo-400 font-bold mt-1 inline-block">Create your first →</a>
                    </div>
                @else
                    <div class="space-y-3">
                        @foreach($campaigns as $campaign)
                            <a href="{{ route('campaigns.show', $campaign) }}"
                                class="flex items-center justify-between p-3 rounded-xl bg-white/3 hover:bg-white/5 transition-all group">
                                <div>
                                    <div class="text-sm font-bold text-white group-hover:text-indigo-300 transition-colors">
                                        {{ $campaign->title }}</div>
                                    <div class="text-xs text-gray-500 mt-0.5 font-medium">{{ $campaign->recipient_count }}
                                        recipients · {{ $campaign->created_at->diffForHumans() }}</div>
                                </div>
                                @php
                                    $colors = ['sent' => 'text-emerald-400 bg-emerald-500/10', 'queued' => 'text-yellow-400 bg-yellow-500/10', 'sending' => 'text-blue-400 bg-blue-500/10', 'failed' => 'text-red-400 bg-red-500/10', 'draft' => 'text-gray-400 bg-gray-500/10'];
                                @endphp
                                <span
                                    class="text-xs font-black px-2.5 py-1 rounded-full {{ $colors[$campaign->status] ?? 'text-gray-400 bg-gray-500/10' }}">
                                    {{ ucfirst($campaign->status) }}
                                </span>
                            </a>
                        @endforeach
                    </div>
                @endif
            </div>

            {{-- Recent Deposits --}}
            <div class="card-glass rounded-2xl p-6 slide-up" style="animation-delay:.3s">
                <div class="flex items-center justify-between mb-5">
                    <h2 class="font-black text-white">Recent Deposits</h2>
                    <a href="{{ route('deposits.index') }}"
                        class="text-xs font-bold text-indigo-400 hover:text-indigo-300 transition-colors">View all →</a>
                </div>

                @if($deposits->isEmpty())
                    <div class="text-center py-10">
                        <svg class="w-10 h-10 text-gray-700 mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                                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>
                        <p class="text-sm text-gray-600 font-semibold">No deposits yet</p>
                        <a href="{{ route('deposits.create') }}"
                            class="text-xs text-indigo-400 font-bold mt-1 inline-block">Fund your wallet →</a>
                    </div>
                @else
                    <div class="space-y-3">
                        @foreach($deposits as $deposit)
                            <div class="flex items-center justify-between p-3 rounded-xl bg-white/3">
                                <div>
                                    <div class="text-sm font-bold text-white">₦{{ number_format($deposit->amount, 2) }}</div>
                                    <div class="text-xs text-gray-500 mt-0.5 font-medium">Ref: {{ $deposit->reference }} ·
                                        {{ $deposit->created_at->diffForHumans() }}</div>
                                </div>
                                @php
                                    $dc = ['pending' => 'text-yellow-400 bg-yellow-500/10', 'approved' => 'text-emerald-400 bg-emerald-500/10', 'rejected' => 'text-red-400 bg-red-500/10'];
                                @endphp
                                <span class="text-xs font-black px-2.5 py-1 rounded-full {{ $dc[$deposit->status] ?? '' }}">
                                    {{ ucfirst($deposit->status) }}
                                </span>
                            </div>
                        @endforeach
                    </div>
                @endif
            </div>

        </div>
    </div>
@endsection