@extends('layouts.portal')

@section('title', 'Agent Dashboard')
@section('page_title', 'Agent Portal')
@section('page_subtitle', 'Your Referral & Earnings Hub')

@section('sidebar')
    @include('agent.partials.sidebar', ['active' => 'dashboard'])
@endsection

@section('content')
    <!-- Agent Hero Banner - Earnings Focused -->
    <div class="bg-gradient-to-r from-[#772B10] via-[#8B3D15] to-[#9F4F1A] rounded-2xl p-8 text-white mb-8 shadow-2xl relative overflow-hidden">
        <div class="absolute top-0 right-0 w-64 h-64 bg-white/10 rounded-full -mr-32 -mt-32"></div>
        <div class="absolute bottom-0 left-0 w-48 h-48 bg-white/10 rounded-full -ml-24 -mb-24"></div>
        
        <div class="relative z-10">
            <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-6">
                <div>
                    <div class="flex items-center gap-3 mb-2">
                        <div class="w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center backdrop-blur-sm">
                            <i class="fas fa-trophy text-2xl"></i>
                        </div>
                        <span class="bg-white/20 px-4 py-1 rounded-full text-sm font-medium backdrop-blur-sm">Agent Level</span>
                    </div>
                    <h1 class="text-3xl md:text-4xl font-bold mb-2">Welcome back, {{ auth()->user()->name }}!</h1>
                    <p class="text-white/80 text-lg">Your earnings are growing. Keep referring!</p>
                </div>
                <div class="bg-white/20 backdrop-blur-sm rounded-2xl p-6 text-center min-w-[200px]">
                    <p class="text-white/80 text-sm mb-1">Total Earnings</p>
                    <p class="text-4xl font-bold">RM{{ number_format($stats['commission_earned'] ?? 0, 2) }}</p>
                    <p class="text-white/80 text-xs mt-2">Lifetime Commission</p>
                </div>
            </div>
        </div>
    </div>

    <!-- MLM Hierarchy Section -->
    <div class="grid grid-cols-1 gap-6 mb-8">
        <!-- Upline Display -->
        @if(!empty($upline))
        <div class="bg-white rounded-2xl shadow-lg p-6 border-2 border-purple-200">
            <h3 class="text-lg font-bold text-gray-800 mb-4 flex items-center">
                <span class="mr-2">⬆️</span> Your Upline
            </h3>
            <div class="space-y-3">
                @foreach($upline as $uplineMember)
                <div class="flex items-center p-4 bg-purple-50 rounded-xl">
                    <div class="w-12 h-12 bg-purple-500 rounded-full flex items-center justify-center text-white font-bold text-lg mr-4">
                        {{ substr($uplineMember['agent']->name, 0, 1) }}
                    </div>
                    <div>
                        <p class="font-semibold text-gray-900">{{ $uplineMember['agent']->name }}</p>
                        <p class="text-sm text-gray-500">{{ $uplineMember['agent']->email }}</p>
                        <p class="text-xs text-purple-600 mt-1">Level {{ $uplineMember['level'] }} Upline</p>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
        @endif

        <!-- Commission Breakdown -->
        <!-- <div class="bg-white rounded-2xl shadow-lg p-6 border-2 border-blue-200">
            <h3 class="text-lg font-bold text-gray-800 mb-4 flex items-center">
                <span class="mr-2">💰</span> Commission Breakdown
            </h3>
            <div class="space-y-3">
                <div class="flex justify-between items-center p-3 bg-blue-50 rounded-lg">
                    <div>
                        <p class="font-semibold text-gray-900">Level 1 (Direct)</p>
                        <p class="text-xs text-gray-500">{{ $commissionBreakdown['level1']['count'] }} commissions</p>
                    </div>
                    <div class="text-right">
                        <p class="font-bold text-blue-600">RM{{ number_format($commissionBreakdown['level1']['amount'], 2) }}</p>
                        <p class="text-xs text-gray-500">{{ $commissionBreakdown['level1']['rate'] }}%</p>
                    </div>
                </div>
                <div class="flex justify-between items-center p-3 bg-green-50 rounded-lg">
                    <div>
                        <p class="font-semibold text-gray-900">Level 2 (Upline)</p>
                        <p class="text-xs text-gray-500">{{ $commissionBreakdown['level2']['count'] }} commissions</p>
                    </div>
                    <div class="text-right">
                        <p class="font-bold text-green-600">RM{{ number_format($commissionBreakdown['level2']['amount'], 2) }}</p>
                        <p class="text-xs text-gray-500">{{ $commissionBreakdown['level2']['rate'] }}%</p>
                    </div>
                </div>
                <div class="flex justify-between items-center p-3 bg-orange-50 rounded-lg">
                    <div>
                        <p class="font-semibold text-gray-900">Level 3 (Senior)</p>
                        <p class="text-xs text-gray-500">{{ $commissionBreakdown['level3']['count'] }} commissions</p>
                    </div>
                    <div class="text-right">
                        <p class="font-bold text-orange-600">RM{{ number_format($commissionBreakdown['level3']['amount'], 2) }}</p>
                        <p class="text-xs text-gray-500">{{ $commissionBreakdown['level3']['rate'] }}%</p>
                    </div>
                </div>
            </div>
        </div> -->
    </div>

    <!-- Pending Agent Approvals -->
    @if($pendingAgents->count() > 0)
    <div class="bg-white rounded-2xl shadow-lg p-6 mb-8 border-2 border-yellow-200">
        <h3 class="text-lg font-bold text-gray-800 mb-4 flex items-center">
            <span class="mr-2">🔔</span> Pending Agent Approvals
        </h3>
        <div class="space-y-4">
            @foreach($pendingAgents as $pendingAgent)
            <div class="flex items-center justify-between p-4 bg-yellow-50 rounded-xl">
                <div class="flex items-center">
                    <div class="w-10 h-10 bg-yellow-500 rounded-full flex items-center justify-center text-white font-bold mr-4">
                        {{ substr($pendingAgent->name, 0, 1) }}
                    </div>
                    <div>
                        <p class="font-semibold text-gray-900">{{ $pendingAgent->name }}</p>
                        <p class="text-sm text-gray-500">{{ $pendingAgent->email }}</p>
                        <p class="text-xs text-yellow-600 mt-1">Waiting for your approval</p>
                    </div>
                </div>
                <div class="flex items-center gap-2">
                    <form action="{{ route('agent.approve', $pendingAgent) }}" method="POST" class="inline">
                        @csrf
                        <button type="submit" class="px-4 py-2 bg-green-500 text-white rounded-lg text-sm font-medium hover:bg-green-600 transition">
                            ✓ Approve
                        </button>
                    </form>
                    <form action="{{ route('agent.reject', $pendingAgent) }}" method="POST" class="inline">
                        @csrf
                        <button type="submit" class="px-4 py-2 bg-red-500 text-white rounded-lg text-sm font-medium hover:bg-red-600 transition">
                            ✗ Reject
                        </button>
                    </form>
                </div>
            </div>
            @endforeach
        </div>
    </div>
    @endif

    <!-- Approved Agents -->
    @if(isset($approvedAgents) && $approvedAgents->count() > 0)
    <div class="bg-white rounded-2xl shadow-lg p-6 mb-8 border-2 border-green-200">
        <h3 class="text-lg font-bold text-gray-800 mb-4 flex items-center">
            <span class="mr-2">✅</span> Your Referred Agents
        </h3>
        <div class="space-y-4">
            @foreach($approvedAgents as $approvedAgent)
            <div class="flex items-center justify-between p-4 bg-green-50 rounded-xl">
                <div class="flex items-center">
                    <div class="w-10 h-10 bg-green-500 rounded-full flex items-center justify-center text-white font-bold mr-4">
                        {{ substr($approvedAgent->name, 0, 1) }}
                    </div>
                    <div>
                        <p class="font-semibold text-gray-900">{{ $approvedAgent->name }}</p>
                        <p class="text-sm text-gray-500">{{ $approvedAgent->email }}</p>
                        <p class="text-xs text-green-600 mt-1">Level {{ $approvedAgent->getMlmLevel() }} • {{ $approvedAgent->clients()->count() }} clients</p>
                    </div>
                </div>
                <div class="text-right">
                    <p class="text-sm font-semibold text-green-600">Active</p>
                </div>
            </div>
            @endforeach
        </div>
    </div>
    @endif

    <!-- Downline Display -->
    @if(!empty($downline))
    <div class="bg-white rounded-2xl shadow-lg p-6 mb-8 border-2 border-green-200">
        <h3 class="text-lg font-bold text-gray-800 mb-4 flex items-center">
            <span class="mr-2">⬇️</span> Your Downline Team
        </h3>
        <div class="space-y-4">
            @foreach($downline as $member)
            <div class="flex items-center justify-between p-4 bg-green-50 rounded-xl hover:bg-green-100 transition-colors">
                <div class="flex items-center">
                    <div class="w-10 h-10 bg-green-500 rounded-full flex items-center justify-center text-white font-bold mr-4">
                        {{ substr($member['agent']->name, 0, 1) }}
                    </div>
                    <div>
                        <p class="font-semibold text-gray-900">{{ $member['agent']->name }}</p>
                        <p class="text-sm text-gray-500">{{ $member['agent']->email }}</p>
                        <p class="text-xs text-green-600 mt-1">Level {{ $member['level'] }} Agent • {{ $member['clients_count'] }} clients</p>
                    </div>
                </div>
                <div class="text-right">
                    <p class="font-bold text-green-600">RM{{ number_format($member['commission_earned'], 2) }}</p>
                    <p class="text-xs text-gray-500">{{ $member['wills_count'] }} wills</p>
                </div>
            </div>
            @endforeach
        </div>
    </div>
    @endif

    <!-- Earnings Performance Cards -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
        <!-- Total Earnings -->
        <div class="bg-gradient-to-br from-[#772B10] to-[#8B3D15] rounded-2xl p-6 text-white shadow-xl hover:shadow-2xl transform hover:scale-105 transition-all duration-300">
            <div class="flex items-start justify-between mb-4">
                <div class="w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center backdrop-blur-sm">
                    <i class="fas fa-coins text-2xl"></i>
                </div>
                <span class="bg-white/20 px-2 py-1 rounded-lg text-xs backdrop-blur-sm">This Month</span>
            </div>
            <p class="text-[#772B10]/80 text-sm mb-1">Total Earnings</p>
            <p class="text-3xl font-bold">RM{{ number_format($stats['commission_earned'] ?? 0, 2) }}</p>
        </div>
        
        <!-- Active Referrals -->
        <div class="bg-gradient-to-br from-teal-500 to-cyan-600 rounded-2xl p-6 text-white shadow-xl hover:shadow-2xl transform hover:scale-105 transition-all duration-300">
            <div class="flex items-start justify-between mb-4">
                <div class="w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center backdrop-blur-sm">
                    <i class="fas fa-users text-2xl"></i>
                </div>
                <span class="bg-white/20 px-2 py-1 rounded-lg text-xs backdrop-blur-sm">Active</span>
            </div>
            <p class="text-teal-100 text-sm mb-1">Active Referrals</p>
            <p class="text-3xl font-bold">{{ $stats['total_referrals'] ?? 0 }}</p>
        </div>
        
        <!-- This Month Referrals -->
        <div class="bg-gradient-to-br from-emerald-500 to-green-600 rounded-2xl p-6 text-white shadow-xl hover:shadow-2xl transform hover:scale-105 transition-all duration-300">
            <div class="flex items-start justify-between mb-4">
                <div class="w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center backdrop-blur-sm">
                    <i class="fas fa-calendar-check text-2xl"></i>
                </div>
                <span class="bg-white/20 px-2 py-1 rounded-lg text-xs backdrop-blur-sm">New</span>
            </div>
            <p class="text-emerald-100 text-sm mb-1">This Month</p>
            <p class="text-3xl font-bold">{{ $stats['this_month'] ?? 0 }}</p>
        </div>
        
        <!-- Pending Payouts -->
        <div class="bg-gradient-to-br from-purple-500 to-pink-600 rounded-2xl p-6 text-white shadow-xl hover:shadow-2xl transform hover:scale-105 transition-all duration-300">
            <div class="flex items-start justify-between mb-4">
                <div class="w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center backdrop-blur-sm">
                    <i class="fas fa-wallet text-2xl"></i>
                </div>
                <span class="bg-white/20 px-2 py-1 rounded-lg text-xs backdrop-blur-sm">Pending</span>
            </div>
            <p class="text-purple-100 text-sm mb-1">Pending Payout</p>
            <p class="text-3xl font-bold">$0.00</p>
        </div>
    </div>
    
    <!-- Quick Action Cards -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
        <!-- Referral Link Card -->
        <div class="bg-gradient-to-br from-[#772B10] to-[#8B3D15] rounded-2xl p-6 shadow-lg text-white transform hover:scale-105 transition-all duration-300">
            <div class="flex items-center gap-3 mb-4">
                <div class="w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center backdrop-blur-sm">
                    <span class="text-2xl">🔗</span>
                </div>
                <div>
                    <h3 class="text-lg font-bold">Referral Link</h3>
                    <p class="text-white/80 text-sm">Share to earn</p>
                </div>
            </div>
            <div class="bg-white/10 rounded-lg p-3 mb-3 backdrop-blur-sm">
                <p class="text-sm text-white/90 break-all">{{ url('/agent/register?ref=' . auth()->user()->referral_code) }}</p>
            </div>
            <button onclick="copyReferralLink()" class="w-full py-2 bg-white !text-red-800 rounded-lg font-semibold hover:bg-white/90 transition">
                <span class="mr-2">📋</span> Copy Link
            </button>
        </div>

        <a href="{{ route('agent.clients.create') }}"
           class="group bg-white rounded-2xl p-6 shadow-lg hover:shadow-2xl transform hover:scale-105 transition-all duration-300 border-2 border-[#772B10]/30 hover:border-[#772B10]">
            <div class="flex items-center gap-3 mb-4">
                <div class="w-12 h-12 bg-gradient-to-br from-[#772B10] to-[#8B3D15] rounded-xl flex items-center justify-center shadow-md group-hover:scale-110 transition-transform">
                    <span class="text-white text-xl">👤</span>
                </div>
                <div>
                    <h3 class="text-lg font-bold text-gray-800">Add Client</h3>
                    <p class="text-gray-600 text-sm">New referral</p>
                </div>
            </div>
            <div class="flex items-center justify-between">
                <span class="text-[#772B10] font-semibold">Create Client</span>
                <span class="text-[#772B10] group-hover:translate-x-1 transition-transform">→</span>
            </div>
        </a>

        <a href="{{ route('agent.genealogy') }}"
           class="group bg-white rounded-2xl p-6 shadow-lg hover:shadow-2xl transform hover:scale-105 transition-all duration-300 border-2 border-purple-200 hover:border-purple-400">
            <div class="flex items-center gap-3 mb-4">
                <div class="w-12 h-12 bg-gradient-to-br from-purple-500 to-pink-500 rounded-xl flex items-center justify-center shadow-md group-hover:scale-110 transition-transform">
                    <span class="text-white text-xl">🌳</span>
                </div>
                <div>
                    <h3 class="text-lg font-bold text-gray-800">My Network</h3>
                    <p class="text-gray-600 text-sm">View genealogy</p>
                </div>
            </div>
            <div class="flex items-center justify-between">
                <span class="text-purple-600 font-semibold">View Tree</span>
                <span class="text-purple-600 group-hover:translate-x-1 transition-transform">→</span>
            </div>
        </a>

        <a href="{{ route('agent.reports') }}"
           class="group bg-white rounded-2xl p-6 shadow-lg hover:shadow-2xl transform hover:scale-105 transition-all duration-300 border-2 border-blue-200 hover:border-blue-400">
            <div class="flex items-center gap-3 mb-4">
                <div class="w-12 h-12 bg-gradient-to-br from-blue-500 to-cyan-500 rounded-xl flex items-center justify-center shadow-md group-hover:scale-110 transition-transform">
                    <span class="text-white text-xl">📊</span>
                </div>
                <div>
                    <h3 class="text-lg font-bold text-gray-800">Reports</h3>
                    <p class="text-gray-600 text-sm">View analytics</p>
                </div>
            </div>
            <div class="flex items-center justify-between">
                <span class="text-blue-600 font-semibold">View Reports</span>
                <span class="text-blue-600 group-hover:translate-x-1 transition-transform">→</span>
            </div>
        </a>

        <a href="{{ route('agent.clients.index') }}"
           class="group bg-white rounded-2xl p-6 shadow-lg hover:shadow-2xl transform hover:scale-105 transition-all duration-300 border-2 border-teal-200 hover:border-teal-400">
            <div class="flex items-center gap-3 mb-4">
                <div class="w-12 h-12 bg-gradient-to-br from-teal-500 to-cyan-500 rounded-xl flex items-center justify-center shadow-md group-hover:scale-110 transition-transform">
                    <span class="text-white text-xl">👥</span>
                </div>
                <div>
                    <h3 class="text-lg font-bold text-gray-800">My Referrals</h3>
                    <p class="text-gray-600 text-sm">Track clients</p>
                </div>
            </div>
            <div class="flex items-center justify-between">
                <span class="text-teal-600 font-semibold">View All</span>
                <span class="text-teal-600 group-hover:translate-x-1 transition-transform">→</span>
            </div>
        </a>

        <a href="{{ route('agent.commission') }}"
           class="group bg-white rounded-2xl p-6 shadow-lg hover:shadow-2xl transform hover:scale-105 transition-all duration-300 border-2 border-orange-200 hover:border-orange-400">
            <div class="flex items-center gap-3 mb-4">
                <div class="w-12 h-12 bg-gradient-to-br from-orange-500 to-red-500 rounded-xl flex items-center justify-center shadow-md group-hover:scale-110 transition-transform">
                    <span class="text-white text-xl">💰</span>
                </div>
                <div>
                    <h3 class="text-lg font-bold text-gray-800">Commission</h3>
                    <p class="text-gray-600 text-sm">View earnings</p>
                </div>
            </div>
            <div class="flex items-center justify-between">
                <span class="text-orange-600 font-semibold">See Details</span>
                <span class="text-orange-600 group-hover:translate-x-1 transition-transform">→</span>
            </div>
        </a>
    </div>
    
    <!-- Recent Referrals Table -->
    <div class="bg-white rounded-2xl shadow-xl overflow-hidden">
        <div class="bg-gradient-to-r from-[#772B10] to-[#8B3D15] px-6 py-4">
            <div class="flex items-center justify-between">
                <h3 class="text-lg font-bold text-white flex items-center">
                    <i class="fas fa-clock mr-2"></i>Recent Referrals
                </h3>
                <a href="{{ route('agent.clients.index') }}" class="text-white/90 hover:text-white text-sm font-medium flex items-center">
                    View All <i class="fas fa-arrow-right ml-2"></i>
                </a>
            </div>
        </div>
        
        @if($referredClients->count() > 0)
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead class="bg-gradient-to-r from-gray-50 to-gray-100">
                        <tr class="text-left text-xs font-bold text-gray-700 uppercase tracking-wider">
                            <th class="px-8 py-5 rounded-tl-xl">Client Name</th>
                            <th class="px-6 py-4">Email</th>
                            <th class="px-6 py-4">Phone</th>
                            <th class="px-6 py-4">Status</th>
                            <th class="px-6 py-4">Date</th>
                            <th class="px-6 py-4">Action</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-100">
                        @foreach($referredClients as $client)
                            <tr class="hover:bg-gradient-to-r hover:from-indigo-50 hover:to-purple-50 transition-colors">
                                <td class="px-8 py-5">
                                    <div class="flex items-center">
                                        <div class="w-12 h-12 bg-gradient-to-br from-indigo-500 to-purple-500 rounded-xl flex items-center justify-center text-white font-bold text-lg mr-4 shadow-lg">
                                            {{ substr($client->first_name, 0, 1) }}
                                        </div>
                                        <div>
                                            <p class="font-bold text-gray-900 text-base">{{ $client->first_name }} {{ $client->last_name }}</p>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-6 py-5 text-gray-700 font-medium">{{ $client->email }}</td>
                                <td class="px-6 py-5 text-gray-700 font-medium">{{ $client->phone }}</td>
                                <td class="px-6 py-5">
                                    @if($client->status == 'active')
                                        <span class="px-4 py-2 bg-gradient-to-r from-green-100 to-emerald-100 text-green-700 rounded-full text-xs font-bold border border-green-200">Active</span>
                                    @elseif($client->status == 'pending')
                                        <span class="px-4 py-2 bg-gradient-to-r from-yellow-100 to-amber-100 text-yellow-700 rounded-full text-xs font-bold border border-yellow-200">Pending</span>
                                    @elseif($client->status == 'pending_approval')
                                        <span class="px-6 py-2 bg-orange-500 text-white rounded-full text-sm font-bold border border-orange-600 whitespace-nowrap">Pending Approval</span>
                                    @else
                                        <span class="px-4 py-2 bg-red-500 text-white rounded-full text-sm font-bold border border-red-600">{{ ucfirst(str_replace('_', ' ', $client->status ?? 'Unknown')) }}</span>
                                    @endif
                                </td>
                                <td class="px-6 py-5 text-gray-700 font-medium">{{ $client->created_at->format('M d, Y') }}</td>
                                <td class="px-6 py-5">
                                    <a href="{{ route('agent.clients.show', $client) }}" class="text-indigo-600 hover:text-indigo-700 font-bold text-sm bg-indigo-50 px-4 py-2 rounded-lg hover:bg-indigo-100 transition">
                                        View Details
                                    </a>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            <div class="px-6 py-4 bg-gray-50 border-t">
                {{ $referredClients->links() }}
            </div>
        @else
            <div class="text-center py-16">
                <div class="w-20 h-20 bg-gradient-to-br from-[#772B10]/20 to-[#8B3D15]/20 rounded-full flex items-center justify-center mx-auto mb-4">
                    <i class="fas fa-user-plus text-[#772B10] text-3xl"></i>
                </div>
                <h3 class="text-xl font-bold text-gray-800 mb-2">No Referrals Yet</h3>
                <p class="text-gray-600 mb-6">Start referring clients and earn commissions!</p>
                <a href="{{ route('agent.clients.create') }}" class="inline-flex items-center px-6 py-3 bg-gradient-to-r from-[#772B10] to-[#8B3D15] text-white rounded-xl font-semibold shadow-lg hover:shadow-xl transform hover:scale-105 transition-all">
                    <i class="fas fa-plus mr-2"></i>Add First Referral
                </a>
            </div>
        @endif
    </div>

    <script>
        function copyReferralLink() {
            const referralLink = '{{ url('/agent/register?ref=' . auth()->user()->referral_code) }}';
            navigator.clipboard.writeText(referralLink).then(() => {
                alert('Referral link copied to clipboard!');
            }).catch(err => {
                console.error('Failed to copy: ', err);
            });
        }
    </script>
@endsection