@extends('admin.layout')
@section('title', 'Referral Analytics')
@section('page-title')
    <span class="flex items-center gap-2">Referral: {{ $referral->name }} <code class="text-xs text-indigo-400 bg-indigo-500/10 px-2 py-1 rounded-lg font-normal">{{ $referral->code }}</code></span>
@endsection

@section('content')
<!-- Referral Link Card -->
<div class="bg-gray-900 border border-gray-800 rounded-2xl p-5 mb-6">
    <div class="flex flex-wrap items-center justify-between gap-4">
        <div>
            <p class="text-xs text-gray-500 mb-1">Referral Link</p>
            <div class="flex items-center gap-2">
                <code class="text-sm text-indigo-400 bg-indigo-500/10 px-3 py-1.5 rounded-xl">{{ $referral->getLink() }}</code>
                <button onclick="navigator.clipboard.writeText('{{ $referral->getLink() }}'); this.innerHTML='<i class=\'fas fa-check\'></i> Copied!'; setTimeout(() => this.innerHTML='<i class=\'fas fa-copy\'></i> Copy', 2000)"
                    class="px-3 py-1.5 bg-indigo-600 hover:bg-indigo-500 text-white text-xs font-semibold rounded-xl transition-all flex items-center gap-1.5">
                    <i class="fas fa-copy"></i> Copy
                </button>
            </div>
        </div>
        <div class="flex gap-2">
            <a href="{{ route('admin.referrals.edit', $referral) }}" class="px-3 py-1.5 bg-gray-800 hover:bg-gray-700 text-gray-300 text-xs rounded-xl transition-all"><i class="fas fa-edit mr-1"></i>Edit</a>
            <form action="{{ route('admin.referrals.reset', $referral) }}" method="POST" onsubmit="return confirm('Reset all click data?')">@csrf
                <button class="px-3 py-1.5 bg-red-500/10 hover:bg-red-500 text-red-400 hover:text-white text-xs rounded-xl transition-all"><i class="fas fa-redo mr-1"></i>Reset</button>
            </form>
        </div>
    </div>
</div>

<!-- Stats Cards -->
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-4 mb-6">
    @php
        $statCards = [
            ['label' => 'Total Clicks', 'value' => number_format($referral->total_clicks), 'icon' => 'fas fa-mouse-pointer', 'color' => 'indigo'],
            ['label' => 'Unique Clicks', 'value' => number_format($uniqueClicks), 'icon' => 'fas fa-user', 'color' => 'cyan'],
            ['label' => 'Conversions', 'value' => $conversions, 'icon' => 'fas fa-check-circle', 'color' => 'green'],
            ['label' => 'Today', 'value' => $todayClicks, 'icon' => 'fas fa-calendar-day', 'color' => 'yellow'],
            ['label' => 'This Week', 'value' => $weekClicks, 'icon' => 'fas fa-calendar-week', 'color' => 'purple'],
            ['label' => 'Conv. Rate', 'value' => $referral->getConversionRate() . '%', 'icon' => 'fas fa-percentage', 'color' => 'emerald'],
        ];
    @endphp
    @foreach($statCards as $card)
        <div class="bg-gray-900 border border-gray-800 rounded-2xl p-4 text-center">
            <div class="w-8 h-8 bg-{{ $card['color'] }}-500/10 rounded-lg flex items-center justify-center mx-auto mb-2">
                <i class="{{ $card['icon'] }} text-{{ $card['color'] }}-400 text-xs"></i>
            </div>
            <p class="text-xl font-black text-white">{{ $card['value'] }}</p>
            <p class="text-xs text-gray-500">{{ $card['label'] }}</p>
        </div>
    @endforeach
</div>

<!-- Charts Row -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-4 mb-6">
    <!-- Devices -->
    <div class="bg-gray-900 border border-gray-800 rounded-2xl p-5">
        <h3 class="text-sm font-semibold text-white mb-4 flex items-center gap-2"><i class="fas fa-laptop text-indigo-400 text-xs"></i> Devices</h3>
        @forelse($devices as $device => $count)
            <div class="flex items-center justify-between py-2 border-b border-gray-800 last:border-0">
                <div class="flex items-center gap-2">
                    <i class="fas fa-{{ $device === 'desktop' ? 'desktop' : ($device === 'mobile' ? 'mobile-alt' : 'tablet-alt') }} text-gray-400 text-xs w-4"></i>
                    <span class="text-sm text-gray-300">{{ ucfirst($device) }}</span>
                </div>
                <div class="flex items-center gap-2">
                    <div class="w-24 h-2 bg-gray-800 rounded-full overflow-hidden">
                        <div class="h-full bg-indigo-500 rounded-full" style="width: {{ $referral->total_clicks > 0 ? ($count / $referral->total_clicks) * 100 : 0 }}%"></div>
                    </div>
                    <span class="text-xs text-gray-500 w-8 text-right">{{ $count }}</span>
                </div>
            </div>
        @empty
            <p class="text-xs text-gray-600 text-center py-4">No data yet</p>
        @endforelse
    </div>

    <!-- Browsers -->
    <div class="bg-gray-900 border border-gray-800 rounded-2xl p-5">
        <h3 class="text-sm font-semibold text-white mb-4 flex items-center gap-2"><i class="fas fa-globe text-cyan-400 text-xs"></i> Browsers</h3>
        @forelse($browsers as $browser => $count)
            <div class="flex items-center justify-between py-2 border-b border-gray-800 last:border-0">
                <span class="text-sm text-gray-300">{{ $browser }}</span>
                <div class="flex items-center gap-2">
                    <div class="w-24 h-2 bg-gray-800 rounded-full overflow-hidden">
                        <div class="h-full bg-cyan-500 rounded-full" style="width: {{ $referral->total_clicks > 0 ? ($count / $referral->total_clicks) * 100 : 0 }}%"></div>
                    </div>
                    <span class="text-xs text-gray-500 w-8 text-right">{{ $count }}</span>
                </div>
            </div>
        @empty
            <p class="text-xs text-gray-600 text-center py-4">No data yet</p>
        @endforelse
    </div>

    <!-- OS -->
    <div class="bg-gray-900 border border-gray-800 rounded-2xl p-5">
        <h3 class="text-sm font-semibold text-white mb-4 flex items-center gap-2"><i class="fas fa-server text-purple-400 text-xs"></i> Operating Systems</h3>
        @forelse($systems as $os => $count)
            <div class="flex items-center justify-between py-2 border-b border-gray-800 last:border-0">
                <span class="text-sm text-gray-300">{{ $os }}</span>
                <div class="flex items-center gap-2">
                    <div class="w-24 h-2 bg-gray-800 rounded-full overflow-hidden">
                        <div class="h-full bg-purple-500 rounded-full" style="width: {{ $referral->total_clicks > 0 ? ($count / $referral->total_clicks) * 100 : 0 }}%"></div>
                    </div>
                    <span class="text-xs text-gray-500 w-8 text-right">{{ $count }}</span>
                </div>
            </div>
        @empty
            <p class="text-xs text-gray-600 text-center py-4">No data yet</p>
        @endforelse
    </div>
</div>

<!-- Recent Messages via Referral -->
@if($messages->count() > 0)
<div class="bg-gray-900 border border-gray-800 rounded-2xl p-5 mb-6">
    <h3 class="text-sm font-semibold text-white mb-4 flex items-center gap-2"><i class="fas fa-envelope text-green-400 text-xs"></i> Conversions (Messages)</h3>
    @foreach($messages as $msg)
        <a href="{{ route('admin.messages.show', $msg) }}" class="flex items-center justify-between py-3 border-b border-gray-800 last:border-0 hover:bg-gray-800/50 rounded-lg px-2 transition-all">
            <div class="flex items-center gap-3">
                <div class="w-8 h-8 bg-green-500/10 rounded-lg flex items-center justify-center text-green-400 text-xs"><i class="fas fa-check"></i></div>
                <div>
                    <p class="text-sm text-white font-medium">{{ $msg->name }}</p>
                    <p class="text-xs text-gray-500">{{ $msg->email }}</p>
                </div>
            </div>
            <span class="text-xs text-gray-500">{{ $msg->created_at->diffForHumans() }}</span>
        </a>
    @endforeach
</div>
@endif

<!-- Click Log -->
<div class="bg-gray-900 border border-gray-800 rounded-2xl p-5">
    <h3 class="text-sm font-semibold text-white mb-4 flex items-center gap-2"><i class="fas fa-list text-indigo-400 text-xs"></i> Recent Clicks</h3>

    @if($clicks->count() > 0)
    <div class="overflow-x-auto">
        <table class="w-full">
            <thead class="border-b border-gray-800">
                <tr>
                    <th class="text-left px-3 py-2 text-xs text-gray-500">Time</th>
                    <th class="text-left px-3 py-2 text-xs text-gray-500">IP</th>
                    <th class="text-left px-3 py-2 text-xs text-gray-500">Device</th>
                    <th class="text-left px-3 py-2 text-xs text-gray-500">Browser</th>
                    <th class="text-left px-3 py-2 text-xs text-gray-500">OS</th>
                    <th class="text-center px-3 py-2 text-xs text-gray-500">Unique</th>
                    <th class="text-center px-3 py-2 text-xs text-gray-500">Converted</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-800">
                @foreach($clicks as $click)
                <tr class="hover:bg-gray-800/30 transition-colors">
                    <td class="px-3 py-2.5 text-xs text-gray-400">{{ $click->created_at->format('M d, h:i A') }}</td>
                    <td class="px-3 py-2.5 text-xs text-gray-400 font-mono">{{ $click->ip_address }}</td>
                    <td class="px-3 py-2.5 text-xs text-gray-400">
                        <i class="fas fa-{{ $click->device === 'desktop' ? 'desktop' : ($click->device === 'mobile' ? 'mobile-alt' : 'tablet-alt') }} mr-1"></i>
                        {{ ucfirst($click->device ?? 'Unknown') }}
                    </td>
                    <td class="px-3 py-2.5 text-xs text-gray-400">{{ $click->browser ?? 'Unknown' }}</td>
                    <td class="px-3 py-2.5 text-xs text-gray-400">{{ $click->os ?? 'Unknown' }}</td>
                    <td class="px-3 py-2.5 text-center">
                        @if($click->is_unique)<span class="text-green-400"><i class="fas fa-check text-xs"></i></span>@else<span class="text-gray-600">—</span>@endif
                    </td>
                    <td class="px-3 py-2.5 text-center">
                        @if($click->converted)<span class="px-2 py-0.5 bg-green-500/10 text-green-400 text-xs rounded-full">Yes</span>@else<span class="text-gray-600">—</span>@endif
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
    <div class="mt-4">{{ $clicks->links() }}</div>
    @else
        <p class="text-xs text-gray-600 text-center py-8">No clicks recorded yet. Share the referral link to start tracking.</p>
    @endif
</div>
@endsection