@extends('admin.layout')
@section('title', 'Referrals')
@section('page-title', 'Referral Tracking')

@section('content')
<div class="max-w-full">
    <!-- Stats -->
    <div class="grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4 mb-6">
        <div class="bg-gray-900 border border-gray-800 rounded-2xl p-4 sm:p-5">
            <div class="w-9 h-9 bg-indigo-500/10 rounded-xl flex items-center justify-center mb-2"><i class="fas fa-link text-indigo-400"></i></div>
            <p class="text-xl sm:text-2xl font-black text-white">{{ $totalReferrals }}</p>
            <p class="text-xs text-gray-500">Total Links</p>
        </div>
        <div class="bg-gray-900 border border-gray-800 rounded-2xl p-4 sm:p-5">
            <div class="w-9 h-9 bg-cyan-500/10 rounded-xl flex items-center justify-center mb-2"><i class="fas fa-mouse-pointer text-cyan-400"></i></div>
            <p class="text-xl sm:text-2xl font-black text-white">{{ number_format($totalClicks) }}</p>
            <p class="text-xs text-gray-500">Total Clicks</p>
        </div>
        <div class="bg-gray-900 border border-gray-800 rounded-2xl p-4 sm:p-5">
            <div class="w-9 h-9 bg-green-500/10 rounded-xl flex items-center justify-center mb-2"><i class="fas fa-check-circle text-green-400"></i></div>
            <p class="text-xl sm:text-2xl font-black text-white">{{ $totalConversions }}</p>
            <p class="text-xs text-gray-500">Conversions</p>
        </div>
        <div class="bg-gray-900 border border-gray-800 rounded-2xl p-4 sm:p-5">
            <div class="w-9 h-9 bg-yellow-500/10 rounded-xl flex items-center justify-center mb-2"><i class="fas fa-percentage text-yellow-400"></i></div>
            <p class="text-xl sm:text-2xl font-black text-white">{{ $totalClicks > 0 ? round(($totalConversions / $totalClicks) * 100, 1) : 0 }}%</p>
            <p class="text-xs text-gray-500">Conv. Rate</p>
        </div>
    </div>

    <!-- Actions -->
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-6">
        <p class="text-gray-400 text-sm">{{ $activeReferrals }} active links</p>
        <a href="{{ route('admin.referrals.create') }}" class="px-4 py-2.5 bg-indigo-600 hover:bg-indigo-500 text-white text-sm font-semibold rounded-xl transition-all flex items-center gap-2 self-start sm:self-auto">
            <i class="fas fa-plus text-xs"></i> Create Link
        </a>
    </div>

    @if($referrals->count() > 0)
    <!-- Desktop Table -->
    <div class="hidden lg:block bg-gray-900 border border-gray-800 rounded-2xl overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full">
                <thead class="border-b border-gray-800">
                    <tr>
                        <th class="text-left px-5 py-3 text-xs font-semibold text-gray-500 uppercase">Person</th>
                        <th class="text-left px-5 py-3 text-xs font-semibold text-gray-500 uppercase">Code / Link</th>
                        <th class="text-center px-5 py-3 text-xs font-semibold text-gray-500 uppercase">Clicks</th>
                        <th class="text-center px-5 py-3 text-xs font-semibold text-gray-500 uppercase">Convs</th>
                        <th class="text-center px-5 py-3 text-xs font-semibold text-gray-500 uppercase">Rate</th>
                        <th class="text-left px-5 py-3 text-xs font-semibold text-gray-500 uppercase">Last Click</th>
                        <th class="text-right px-5 py-3 text-xs font-semibold text-gray-500 uppercase">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-800">
                    @foreach($referrals as $ref)
                    <tr class="hover:bg-gray-800/50 transition-colors">
                        <td class="px-5 py-4">
                            <div class="flex items-center gap-3">
                                <div class="w-9 h-9 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-xl flex items-center justify-center text-white font-bold text-sm flex-shrink-0">{{ substr($ref->name, 0, 1) }}</div>
                                <div>
                                    <p class="text-sm font-medium text-white">{{ $ref->name }}</p>
                                    <span class="text-xs px-1.5 py-0.5 rounded {{ $ref->type === 'team' ? 'bg-indigo-500/10 text-indigo-400' : ($ref->type === 'partner' ? 'bg-cyan-500/10 text-cyan-400' : ($ref->type === 'affiliate' ? 'bg-green-500/10 text-green-400' : 'bg-yellow-500/10 text-yellow-400')) }}">{{ ucfirst($ref->type) }}</span>
                                </div>
                            </div>
                        </td>
                        <td class="px-5 py-4">
                            <div class="flex items-center gap-2">
                                <code class="text-xs text-indigo-400 bg-indigo-500/10 px-2 py-1 rounded-lg">{{ $ref->code }}</code>
                                <button onclick="navigator.clipboard.writeText('{{ $ref->getLink() }}'); this.innerHTML='<i class=\'fas fa-check text-green-400\'></i>'; setTimeout(() => this.innerHTML='<i class=\'fas fa-copy\'></i>', 1500)"
                                    class="w-7 h-7 bg-gray-800 hover:bg-gray-700 rounded-lg flex items-center justify-center text-gray-400 text-xs transition-all" title="Copy"><i class="fas fa-copy"></i></button>
                            </div>
                        </td>
                        <td class="px-5 py-4 text-center"><span class="text-sm font-bold text-white">{{ number_format($ref->total_clicks) }}</span></td>
                        <td class="px-5 py-4 text-center"><span class="text-sm font-bold {{ $ref->total_conversions > 0 ? 'text-green-400' : 'text-gray-500' }}">{{ $ref->total_conversions }}</span></td>
                        <td class="px-5 py-4 text-center"><span class="text-sm {{ $ref->getConversionRate() > 5 ? 'text-green-400' : 'text-gray-400' }}">{{ $ref->getConversionRate() }}%</span></td>
                        <td class="px-5 py-4"><span class="text-xs text-gray-500">{{ $ref->last_click_at ? $ref->last_click_at->diffForHumans() : 'Never' }}</span></td>
                        <td class="px-5 py-4">
                            <div class="flex items-center justify-end gap-1">
                                <a href="{{ route('admin.referrals.show', $ref) }}" class="w-8 h-8 bg-cyan-500/10 hover:bg-cyan-500 text-cyan-400 hover:text-white rounded-lg flex items-center justify-center text-xs"><i class="fas fa-chart-bar"></i></a>
                                <a href="{{ route('admin.referrals.edit', $ref) }}" class="w-8 h-8 bg-indigo-500/10 hover:bg-indigo-500 text-indigo-400 hover:text-white rounded-lg flex items-center justify-center text-xs"><i class="fas fa-edit"></i></a>
                                @include('admin.partials.delete-btn', ['route' => route('admin.referrals.destroy', $ref)])
                            </div>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>

    <!-- Mobile Cards -->
    <div class="lg:hidden space-y-3">
        @foreach($referrals as $ref)
            <div class="bg-gray-900 border border-gray-800 rounded-2xl p-4">
                <div class="flex items-start justify-between gap-3 mb-3">
                    <div class="flex items-center gap-3 flex-1 min-w-0">
                        <div class="w-10 h-10 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-xl flex items-center justify-center text-white font-bold text-sm flex-shrink-0">{{ substr($ref->name, 0, 1) }}</div>
                        <div class="min-w-0">
                            <p class="text-sm font-medium text-white truncate">{{ $ref->name }}</p>
                            <code class="text-xs text-indigo-400">{{ $ref->code }}</code>
                        </div>
                    </div>
                    <span class="text-xs px-2 py-0.5 rounded {{ $ref->type === 'team' ? 'bg-indigo-500/10 text-indigo-400' : 'bg-cyan-500/10 text-cyan-400' }} flex-shrink-0">{{ ucfirst($ref->type) }}</span>
                </div>
                <div class="grid grid-cols-3 gap-2 mb-3 pb-3 border-b border-gray-800">
                    <div class="text-center"><p class="text-xs text-gray-500">Clicks</p><p class="text-sm font-bold text-white">{{ $ref->total_clicks }}</p></div>
                    <div class="text-center"><p class="text-xs text-gray-500">Convs</p><p class="text-sm font-bold text-green-400">{{ $ref->total_conversions }}</p></div>
                    <div class="text-center"><p class="text-xs text-gray-500">Rate</p><p class="text-sm font-bold text-indigo-400">{{ $ref->getConversionRate() }}%</p></div>
                </div>
                <div class="flex items-center justify-between gap-2">
                    <button onclick="navigator.clipboard.writeText('{{ $ref->getLink() }}'); this.innerHTML='<i class=\'fas fa-check\'></i> Copied!'; setTimeout(() => this.innerHTML='<i class=\'fas fa-copy\'></i> Copy Link', 1500)"
                        class="flex-1 px-3 py-2 bg-gray-800 text-gray-300 text-xs rounded-lg flex items-center justify-center gap-1.5"><i class="fas fa-copy"></i> Copy Link</button>
                    <a href="{{ route('admin.referrals.show', $ref) }}" class="w-9 h-9 bg-cyan-500/10 text-cyan-400 rounded-lg flex items-center justify-center text-xs"><i class="fas fa-chart-bar"></i></a>
                    <a href="{{ route('admin.referrals.edit', $ref) }}" class="w-9 h-9 bg-indigo-500/10 text-indigo-400 rounded-lg flex items-center justify-center text-xs"><i class="fas fa-edit"></i></a>
                    @include('admin.partials.delete-btn', ['route' => route('admin.referrals.destroy', $ref)])
                </div>
            </div>
        @endforeach
    </div>

    <div class="mt-4">{{ $referrals->links() }}</div>
    @else
        @include('admin.partials.empty-state', ['icon' => 'fas fa-link', 'title' => 'No Referral Links Yet', 'actionRoute' => route('admin.referrals.create'), 'actionText' => 'Create First Link'])
    @endif
</div>
@endsection