@extends('layouts.customer')

@section('title', 'My Referrals')

@section('content')

<main class="flex-1 overflow-y-auto p-6">

    {{-- Referral Link Card --}}
    <div class="bg-gradient-to-r from-green-500 to-teal-600 text-white p-6 rounded-xl shadow-lg mb-6">
        <h2 class="text-2xl font-bold mb-2">Referral Dashboard</h2>
        <p class="mb-2">Share your referral link and earn points when someone completes a shipment!</p>

        <div class="flex gap-2 mb-2">
            @if($referralLink)
            {{-- Show referral link --}}
            <input type="text" value="{{ $referralLink }}" readonly
                class="flex-1 px-4 py-2 rounded-lg text-black font-medium" id="refLink">
            <button onclick="navigator.clipboard.writeText(document.getElementById('refLink').value)"
                class="bg-white text-green-600 px-4 py-2 rounded-lg font-semibold hover:bg-gray-100">
                Copy Link
            </button>
            @else
            {{-- Generate referral code --}}
            <form method="POST" action="{{ route('customer.referrals.generate') }}">
                @csrf
                <button class="bg-white text-green-600 px-4 py-2 rounded-lg font-semibold hover:bg-gray-100">
                    Generate Referral Code
                </button>
            </form>
            @endif
        </div>

        <p class="mt-2 font-bold text-lg">Total Referral Points: {{ $totalPoints ?? 0 }}</p>
    </div>

    {{-- Referrals Table --}}
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        @forelse($referrals as $index => $ref)
        @php
        $position = $index + 1;

        // Only completed referrals count
        $pointsEarned = $ref->status === 'completed' ? $ref->points_awarded : 0;
        $isPremium = $ref->referredUser && $ref->referredUser->isPremium();

        // Badge colors
        $badgeColor = match($position) {
        1 => 'bg-yellow-400 text-gray-900',
        2 => 'bg-orange-500 text-white',
        3 => 'bg-red-500 text-white',
        default => 'bg-gray-200 text-gray-900',
        };
        @endphp

        <div class="bg-white rounded-xl shadow-lg p-6 border border-gray-200 hover:shadow-xl transition relative">


            <span class="absolute top-4 right-4 px-2 py-1 text-xs font-semibold rounded-full {{ $badgeColor }}">
                @if($position <= 3)
                    {{ ordinal($position) }} Referral
                    @else
                    Referral #{{ $position }}
                    @endif

                    </span>

                    <h3 class="text-lg font-bold mb-1">{{ $ref->referredUser->name ?? 'N/A' }}</h3>
                    <p class="text-sm text-gray-500 mb-2">{{ $ref->referredUser->email ?? 'N/A' }}</p>

                    <div class="flex items-center gap-2">
                        <span class="font-semibold">Points Earned:</span>
                        <span class="text-green-600 font-bold text-lg">{{ $pointsEarned }}</span>
                        @if($isPremium && $ref->status === 'completed')
                        <span class="bg-purple-600 text-white text-xs px-2 py-1 rounded-full font-semibold">×10 Premium</span>
                        @endif
                    </div>

                    <p class="mt-2 text-sm">
                        Subscribed Premium?
                        @if($isPremium)
                        <span class="text-green-600 font-semibold">Yes</span>
                        @else
                        <span class="text-gray-500">No</span>
                        @endif
                    </p>

                    @if($ref->status === 'pending')
                    <p class="mt-2 text-sm text-yellow-600 font-semibold">Pending: Points will be awarded when user performs a shipment</p>
                    @endif
        </div>
        @empty
        <p class="text-sm text-gray-500 col-span-3">No referrals yet.</p>
        @endforelse
    </div>

</main>

@endsection