@php
$statsCards = [
[
'label' => 'Total Clicks',
'value' => number_format($stats['total_clicks']),
'trend' => 'Lifetime',
'color' => 'indigo',
'icon' => 'M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5'
],
[
'label' => 'Conversions',
'value' => number_format($stats['total_conversions']),
'trend' => number_format($stats['conversion_rate'], 1) . '% CR',
'color' => 'emerald',
'icon' => 'M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0
013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42
3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0
00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z'
],
[
'label' => 'Available Balance',
'value' => '$' . number_format($stats['available_balance'], 2),
'trend' => 'Ready to Payout',
'color' => 'amber',
'icon' => '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'
],
[
'label' => 'Total Earned',
'value' => '$' . number_format($stats['total_earned'], 2),
'trend' => 'Lifetime Earnings',
'color' => 'purple',
'icon' => 'M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2
0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z'
],
];

$financialStats = [
['label' => 'Pending', 'value' => '$' . number_format($stats['pending_commission'], 2), 'color' => 'neutral-500'],
['label' => 'Approved', 'value' => '$' . number_format($stats['approved_commission'], 2), 'color' => 'indigo-400'],
['label' => 'Paid', 'value' => '$' . number_format($stats['paid_commission'], 2), 'color' => 'emerald-400'],
['label' => 'Requested', 'value' => '$' . number_format($stats['requested_payouts'], 2), 'color' => 'amber-400'],
['label' => 'Paid Out', 'value' => '$' . number_format($stats['paid_out_total'], 2), 'color' => 'blue-400'],
];
@endphp

<x-layouts::app title="Affiliate Dashboard">
    <div class="space-y-8">
        {{-- Header Section --}}
        <div class="flex flex-col md:flex-row md:items-center justify-between gap-6">
            <div>
                <h1 class="text-3xl font-black text-text-base dark:text-white font-bricolage tracking-tight">Affiliate Partner Center</h1>
                <p class="text-text-dim text-sm mt-1">Monitor your traffic, conversions, and earnings in real-time.
                </p>
            </div>
            <div class="flex items-center gap-3">
                <a href="{{ route('account.affiliate.profile') }}"
                    class="h-11 px-5 rounded-2xl bg-white/5 border border-white/10 hover:bg-white/10 text-text-base dark:text-white text-xs font-black uppercase tracking-widest transition-all flex items-center gap-2">
                    <svg class="w-4 h-4 text-indigo-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"
                        stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round"
                            d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
                        <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                    </svg>
                    Profile
                </a>
                <a href="{{ route('account.affiliate.payouts') }}"
                    class="h-11 px-6 rounded-2xl bg-indigo-600 hover:bg-indigo-500 text-white text-xs font-black uppercase tracking-widest transition-all flex items-center shadow-[0_0_20px_rgba(79,70,229,0.3)]">
                    Request Payout
                </a>
            </div>
        </div>

        {{-- Stats Grid --}}
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">
            @foreach ($statsCards as $card)
            <div
                class="bg-surface-primary/5 border border-border-subtle rounded-3xl p-5 shadow-2xl relative overflow-hidden group hover:border-indigo-500/30 transition-all duration-300">
                <div
                    class="absolute -right-4 -top-4 w-20 h-20 bg-{{ $card['color'] }}-500/5 rounded-full blur-2xl group-hover:bg-{{ $card['color'] }}-500/10 transition-all duration-500">
                </div>
                <div class="relative z-10 flex items-start justify-between">
                    <div>
                        <p class="text-[9px] font-black text-text-dim uppercase tracking-[0.2em] mb-1.5">{
                            {
                            $card['label'] }}</p>
                        <p class="text-2xl font-black text-text-base dark:text-white font-bricolage tracking-tight">
                            {{ $card['value'] }}</p>
                            <span
                                class="flex h-1.5 w-1.5 rounded-full bg-{{ $card['color'] }}-500 shadow-[0_0_8px_rgba(var(--{{ $card['color'] }}-rgb),0.5)]"></span>
                            <span class="text-[10px] font-bold text-text-dim uppercase tracking-widest">{{
                                $card['trend'] }}</span>
                        </div>
                    </div>
                        <div
                            class="w-9 h-9 rounded-xl flex items-center justify-center border shadow-inner group-hover:scale-110 transition-transform bg-{{ $card['color'] }}-500/10 text-{{ $card['color'] }}-400 border-{{ $card['color'] }}-500/20">
                        <svg class="w-4.5 h-4.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"
                            stroke-width="2.5">
                            <path stroke-linecap="round" stroke-linejoin="round" d="{{ $card['icon'] }}" />
                        </svg>
                    </div>
                </div>
            </div>
            @endforeach
        </div>

        {{-- Financial Summary --}}
        <div class="bg-[#0A0A0A] border border-white/5 rounded-3xl p-6 shadow-2xl relative overflow-hidden">
            <div class="absolute right-0 bottom-0 w-64 h-64 bg-indigo-500/5 rounded-full blur-3xl -z-10"></div>
            <div class="grid grid-cols-2 md:grid-cols-5 gap-6 relative z-10">
                @foreach ($financialStats as $f)
                    <div class="flex flex-col {{ !$loop->last ? 'md:border-r border-white/5 pr-4' : '' }}">
                    <p class="text-[9px] font-black text-text-dim uppercase tracking-[0.2em] mb-1">{{ $f['label'] }}
                    </p>
                    <p class="text-lg font-black text-white font-bricolage">{{ $f['value'] }}</p>
                    <div class="w-6 h-0.5 bg-{{ $f['color'] }} rounded-full mt-2 opacity-30"></div>
                </div>
                @endforeach
            </div>
        </div>

        <div class="grid grid-cols-1 xl:grid-cols-3 gap-6">
            {{-- Referral Link Box --}}
            <div class="xl:col-span-2 space-y-5">
                <div class="bg-[#0A0A0A] border border-white/5 rounded-3xl p-6 shadow-2xl relative overflow-hidden">
                    <div class="absolute -left-10 -bottom-10 w-40 h-40 bg-indigo-500/5 rounded-full blur-3xl"></div>

                    <div class="relative z-10">
                        <h3 class="text-lg font-black text-white font-bricolage tracking-tight mb-5">Referral Assets
                        </h3>

                        <div class="space-y-5">
                            <div class="space-y-2">
                                <label
                                    class="text-[9px] font-black text-text-dim uppercase tracking-[0.2em] ml-2">Referral
                                    Link</label>
                                <div class="flex items-center gap-2">
                                    <div
                                        class="flex-1 h-12 px-4 rounded-xl bg-black border border-white/5 flex items-center text-indigo-400 font-mono text-xs overflow-hidden whitespace-nowrap">
                                        {{ route('home', ['ref' => $affiliate->affiliate_code]) }}
                                    </div>
                                    <button data-url="{{ route('home', ['ref' => $affiliate->affiliate_code]) }}"
                                        onclick="copyToClipboard(this.dataset.url)"
                                        class="w-12 h-12 rounded-xl bg-indigo-600 hover:bg-indigo-500 text-white flex items-center justify-center transition-all group active:scale-95 shadow-lg shadow-indigo-500/20">
                                        <svg class="w-4.5 h-4.5 group-hover:rotate-12 transition-transform" fill="none"
                                            viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
                                            <path stroke-linecap="round" stroke-linejoin="round"
                                                d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
                                        </svg>
                                    </button>
                                </div>
                            </div>

                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                                <div class="space-y-2">
                                    <label
                                        class="text-[9px] font-black text-text-dim uppercase tracking-[0.2em] ml-2">Partner
                                        Code</label>
                                    <div
                                        class="h-12 px-4 rounded-xl bg-black border border-white/5 flex items-center justify-between">
                                        <span class="text-white font-black tracking-[0.2em] text-xs">{{
                                            $affiliate->affiliate_code }}</span>
                                        <button data-code="{{ $affiliate->affiliate_code }}"
                                            onclick="copyToClipboard(this.dataset.code)"
                                            class="text-text-dim hover:text-white transition-colors">
                                            <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"
                                                stroke-width="2.5">
                                                <path stroke-linecap="round" stroke-linejoin="round"
                                                    d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
                                            </svg>
                                        </button>
                                    </div>
                                </div>
                                <div class="space-y-2">
                                    <label
                                        class="text-[9px] font-black text-text-dim uppercase tracking-[0.2em] ml-2">Quick
                                        Share</label>
                                    <div class="h-12 flex items-center gap-2">
                                        <button
                                            class="flex-1 h-full rounded-xl bg-blue-500/10 hover:bg-blue-500 text-blue-400 hover:text-white border border-blue-500/20 text-[9px] font-black uppercase tracking-widest transition-all">Twitter</button>
                                        <button
                                            class="flex-1 h-full rounded-xl bg-white/5 hover:bg-white/10 text-white border border-white/10 text-[9px] font-black uppercase tracking-widest transition-all">FB</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Recent Conversions Feed --}}
                <div
                    class="bg-[#0A0A0A] border border-white/5 rounded-3xl overflow-hidden shadow-2xl transition-all duration-300">
                        <div class="px-6 py-5 border-b border-white/5 flex items-center justify-between">
                        <div>
                            <h3 class="text-lg font-black text-white font-bricolage tracking-tight">Recent Sales</h3>
                        </div>
                        <a href="{{ route('account.affiliate.commissions') }}"
                            class="text-[9px] font-black text-indigo-400 hover:text-indigo-300 uppercase tracking-widest transition-colors">
                            Full Ledger
                        </a>
                    </div>
                    <div class="overflow-x-auto">
                        @if($stats['recent_conversions']->count() > 0)
                        <table class="w-full text-left">
                            <thead>
                                <tr class="bg-white/[0.02]">
                                    <th
                                        class="px-8 py-4 text-[10px] font-black text-text-dim uppercase tracking-[0.2em]">
                                        Referral</th>
                                    <th
                                        class="px-8 py-4 text-[10px] font-black text-text-dim uppercase tracking-[0.2em] text-center">
                                        Amount</th>
                                    <th
                                        class="px-8 py-4 text-[10px] font-black text-text-dim uppercase tracking-[0.2em] text-center">
                                        Earnings</th>
                                    <th
                                        class="px-8 py-4 text-[10px] font-black text-text-dim uppercase tracking-[0.2em] text-right">
                                        Date</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-white/5">
                                @foreach ($stats['recent_conversions'] as $conv)
                                <tr class="hover:bg-white/[0.02] transition-colors group">
                                    <td class="px-8 py-5">
                                        <div class="flex items-center gap-4">
                                            <div
                                                class="w-10 h-10 rounded-2xl bg-indigo-500/10 border border-indigo-500/20 flex items-center justify-center shrink-0 shadow-inner group-hover:scale-110 transition-transform">
                                                <svg class="w-5 h-5 text-indigo-400" fill="none" viewBox="0 0 24 24"
                                                    stroke="currentColor" stroke-width="2">
                                                    <path stroke-linecap="round" stroke-linejoin="round"
                                                        d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
                                                </svg>
                                            </div>
                                            <div>
                                                <p class="text-sm font-bold text-white mb-0.5">{{
                                                    $conv->conversion_type
                                                    === 'order' ? 'Customer Purchase' : 'New Sign-up' }}</p>
                                                <p class="text-[10px] font-mono text-text-dim uppercase">#{{
                                                    substr($conv->source_reference_id ?? 'N/A', -8) }}</p>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="px-8 py-5 text-center">
                                        <span class="text-sm font-bold text-text-dim">${{
                                            number_format($conv->amount, 2) }}</span>
                                    </td>
                                    <td class="px-8 py-5 text-center">
                                        <span class="text-sm font-black text-emerald-400">+${{
                                            number_format($conv->commission_amount, 2) }}</span>
                                    </td>
                                    <td class="px-8 py-5 text-right">
                                        <span class="text-[11px] text-text-dim font-medium">{{
                                            $conv->created_at->format('M d, H:i') }}</span>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                        @else
                        <div class="py-12 flex flex-col items-center justify-center text-center">
                            <div
                                class="w-16 h-16 rounded-full bg-neutral-800/50 border border-white/5 flex items-center justify-center mb-4">
                                <svg class="w-8 h-8 text-text-dim" fill="none" viewBox="0 0 24 24"
                                    stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round"
                                        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>
                            <h4 class="text-white font-bold mb-1">No sales yet</h4>
                            <p class="text-xs text-text-dim">Share your link to start earning!</p>
                        </div>
                        @endif
                    </div>
                </div>
            </div>

            {{-- Right Column: Side Activity --}}
            <div class="space-y-5">
                {{-- Quick Stats Chart (Simulated) --}}
                <div
                    class="bg-[#0A0A0A] border border-white/5 rounded-3xl p-6 shadow-2xl transition-all duration-300 hover:bg-[#0C0C0C]">
                    <h4 class="text-[10px] font-black text-white font-bricolage uppercase tracking-[0.2em] mb-5">Traffic
                        Trend</h4>
                    <div class="flex items-end gap-1.5 h-24 mb-6">
                        @foreach ([30, 45, 60, 40, 75, 90, 65, 80, 50, 100] as $h)
                        <div class="flex-1 bg-indigo-500/10 rounded-t-md group relative cursor-pointer"
                            :style="'height: ' + {{ $h }} + '%'">
                            <div
                                class="absolute inset-0 bg-indigo-500/30 rounded-t-md opacity-0 group-hover:opacity-100 transition-opacity">
                            </div>
                        </div>
                        @endforeach
                    </div>
                    <div class="flex items-center justify-between pt-5 border-t border-white/5">
                        <div>
                            <p class="text-[9px] font-black text-text-dim uppercase tracking-widest mb-1">Avg CR</p>
                            <p class="text-base font-black text-white font-bricolage">{{
                                number_format($stats['conversion_rate'], 1) }}%</p>
                        </div>
                        <div class="text-right">
                            <p class="text-[9px] font-black text-text-dim uppercase tracking-widest mb-1">EPC</p>
                            <p class="text-base font-black text-white font-bricolage">${{ $stats['total_clicks'] > 0 ?
                                number_format($stats['total_earned'] / $stats['total_clicks'], 2) : '0.00' }}</p>
                        </div>
                    </div>
                </div>

                {{-- Recent Clicks Feed --}}
                <div class="bg-[#0A0A0A] border border-white/5 rounded-3xl p-6 shadow-2xl">
                    <div class="flex items-center justify-between mb-5">
                        <h4 class="text-[10px] font-black text-white font-bricolage uppercase tracking-[0.2em]">Recent
                            Traffic</h4>
                        <a href="{{ route('account.affiliate.referrals') }}"
                            class="text-[9px] font-black text-indigo-400 hover:text-indigo-300 uppercase tracking-[0.2em] transition-colors">Details</a>
                    </div>

                    <div class="space-y-3">
                        @foreach ($stats['recent_clicks'] as $click)
                        <div class="flex items-center gap-3 group">
                                <div
                                class="w-8 h-8 rounded-lg bg-black border border-white/5 flex items-center justify-center group-hover:border-indigo-500/30 transition-colors">
                                <span class="text-[9px] font-black text-text-dim group-hover:text-indigo-400">{{
                                    $click->country ?? 'UN' }}</span>
                            </div>
                            <div class="flex-1 min-w-0">
                                <p class="text-[11px] font-bold text-text-base truncate">{{ $click->browser ??
                                    'Browser' }}</p>
                                <p class="text-[9px] text-text-dim tracking-tight">{{
                                    $click->created_at->diffForHumans() }}</p>
                            </div>
                            @if($click->is_unique)
                            <div class="w-1.5 h-1.5 rounded-full bg-indigo-500 shadow-[0_0_8px_rgba(99,102,241,0.4)]">
                            </div>
                            @endif
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>

    <script>
        function copyToClipboard(text) {
            navigator.clipboard.writeText(text).then(() => {
                const toast = document.createElement('div');
                toast.className = 'fixed bottom-8 left-1/2 -translate-x-1/2 px-8 py-4 bg-indigo-600 text-white rounded-2xl font-black uppercase tracking-widest shadow-2xl animate-bounce z-[100] text-[10px]';
                toast.innerText = 'Copied to clipboard!';
                document.body.appendChild(toast);
                setTimeout(() => toast.remove(), 2000);
            });
        }
    </script>
</x-layouts::app>