@extends('layouts.app', ['tab' => 'ip'])
@php
    $isRtl = app()->getLocale() === 'ar';
    $progress = max(0, min(100, $totalPoints));
    $link = $user->getReferralLink();
    $title = $isRtl ? setting('ip_title_ar', __('messages.ip_tab')) : setting('ip_title_en', __('messages.ip_tab'));
    $step1 = $isRtl ? setting('ip_step1_ar', __('messages.ip_step1')) : setting('ip_step1_en', __('messages.ip_step1'));
    $step2 = $isRtl ? setting('ip_step2_ar', __('messages.ip_step2')) : setting('ip_step2_en', __('messages.ip_step2'));
    $step3 = $isRtl ? setting('ip_step3_ar', __('messages.ip_step3')) : setting('ip_step3_en', __('messages.ip_step3'));
@endphp
@section('title', $title)

@section('content')

{{-- Header --}}
<div class="mb-6 sm:mb-8 flex items-center gap-3">
    <span class="inline-flex items-center justify-center w-12 h-12 rounded-2xl bg-gradient-to-br from-violet-400 to-violet-700 text-2xl shadow-lg shadow-violet-500/40">🚀</span>
    <div>
        <h1 class="text-2xl sm:text-3xl font-extrabold text-white">{{ $title }} <span class="teal-text">— {{ __('messages.your_referral_link') }}</span></h1>
        <p class="text-sm text-gray-400">{{ __('messages.welcome') }}</p>
    </div>
</div>

<div class="grid lg:grid-cols-3 gap-5">
    {{-- Steps --}}
    <section class="lg:col-span-2 rounded-2xl bg-[#111827] border border-white/5 p-5 sm:p-6 shadow-card">
        <h2 class="text-base font-bold text-white mb-4 flex items-center gap-2">
            <span class="w-1.5 h-5 rounded-full bg-teal-400"></span>
            {{ __('messages.how_ip_works') }}
        </h2>
        <ol class="grid sm:grid-cols-3 gap-4">
            @foreach([
                ['n'=>'1','icon'=>'📤','t'=>$step1],
                ['n'=>'2','icon'=>'✅','t'=>$step2],
                ['n'=>'3','icon'=>'👑','t'=>$step3],
            ] as $step)
                <li class="rounded-xl bg-black/20 border border-white/5 p-4 relative">
                    <div class="absolute -top-2 {{ $isRtl ? '-left-2' : '-right-2' }} w-7 h-7 rounded-lg bg-gradient-to-br from-teal-400 to-teal-600 text-[#0a0f1e] text-xs font-extrabold flex items-center justify-center shadow-lg">
                        {{ $step['n'] }}
                    </div>
                    <div class="text-2xl mb-2">{{ $step['icon'] }}</div>
                    <p class="text-sm text-gray-200 leading-relaxed">{{ $step['t'] }}</p>
                </li>
            @endforeach
        </ol>
    </section>

    {{-- Points circle --}}
    <section class="rounded-2xl bg-gradient-to-br from-[#1a1206] via-[#111827] to-[#0a0f1e] border border-teal-500/30 p-5 sm:p-6 shadow-card relative overflow-hidden">
        <div class="absolute -top-12 -right-12 w-40 h-40 rounded-full bg-teal-500/10 blur-2xl"></div>
        <div class="relative text-center">
            <div class="text-xs font-semibold text-teal-300 uppercase tracking-widest">{{ __('messages.your_points') }}</div>
            @php
                $r = 56; $c = 2 * 3.14159 * $r;
                $offset = $c * (1 - $progress / 100);
            @endphp
            <div class="mx-auto mt-3 relative w-36 h-36">
                <svg class="w-36 h-36 -rotate-90" viewBox="0 0 140 140">
                    <circle cx="70" cy="70" r="{{ $r }}" stroke="rgba(255,255,255,0.08)" stroke-width="10" fill="none" />
                    <circle cx="70" cy="70" r="{{ $r }}" stroke="url(#g)" stroke-width="10" fill="none"
                            stroke-dasharray="{{ number_format($c, 2, '.', '') }}" stroke-dashoffset="{{ number_format($offset, 2, '.', '') }}" stroke-linecap="round" />
                    <defs>
                        <linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
                            <stop offset="0%" stop-color="#4db6ac"/>
                            <stop offset="100%" stop-color="#00796b"/>
                        </linearGradient>
                    </defs>
                </svg>
                <div class="absolute inset-0 flex flex-col items-center justify-center">
                    <div class="text-3xl font-extrabold teal-text">{{ $totalPoints }}</div>
                    <div class="text-[10px] uppercase tracking-widest text-gray-400">/ 100</div>
                </div>
            </div>
            <div class="text-xs text-gray-400 mt-3">
                {{ __('messages.status_pending') }}: <span class="text-teal-200 font-bold">{{ $pendingPoints }}</span>
            </div>

            @if($canRedeem)
                <form method="POST" action="{{ route('referral.redeem') }}" class="mt-4">
                    @csrf
                    <button class="w-full rounded-xl btn-teal py-3 text-sm shadow-teal-glow animate-pulse-teal">
                        ⚡ {{ __('messages.redeem_points') }}
                    </button>
                </form>
            @endif
        </div>
    </section>
</div>

{{-- Referral link --}}
<section class="mt-5 rounded-2xl bg-gradient-to-br from-[#0c1633] via-[#0a0f1e] to-[#0a0f1e] border border-blue-500/20 p-5 sm:p-6 shadow-card"
         x-data="{ copied: false }">
    <div class="flex items-center gap-2 mb-3">
        <span class="w-1.5 h-5 rounded-full bg-blue-400"></span>
        <h2 class="text-base font-bold text-white">{{ __('messages.your_referral_link') }}</h2>
    </div>
    <div class="flex flex-col sm:flex-row gap-2">
        <div class="flex-1 rounded-xl bg-black/40 border border-white/10 px-3 py-2.5 font-mono text-sm text-gray-200 truncate" dir="ltr">{{ $link }}</div>
        <button type="button"
                @click="navigator.clipboard.writeText('{{ $link }}'); copied = true; setTimeout(() => copied = false, 1800)"
                class="rounded-xl btn-teal px-4 py-2.5 text-sm whitespace-nowrap inline-flex items-center justify-center gap-2 hover:brightness-110 transition">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16h8M8 12h8m-8-4h6M5 21h14a2 2 0 002-2V7l-4-4H5a2 2 0 00-2 2v14a2 2 0 002 2z"/></svg>
            <span x-show="!copied">{{ __('messages.copy_link') }}</span>
            <span x-show="copied">✓ {{ __('messages.link_copied') }}</span>
        </button>
    </div>
    <div class="mt-3 text-xs text-gray-400">
        {{ __('messages.referral_code') }}: <span class="font-mono text-teal-300 font-bold">{{ $user->referral_code }}</span>
    </div>
</section>

{{-- Referrals table --}}
<section class="mt-5 rounded-2xl bg-[#111827] border border-white/5 p-5 sm:p-6 shadow-card">
    <div class="flex items-center justify-between mb-4">
        <div class="flex items-center gap-2">
            <span class="w-1.5 h-5 rounded-full bg-violet-400"></span>
            <h2 class="text-base font-bold text-white">{{ __('messages.referrals') }}</h2>
        </div>
        <span class="text-xs text-gray-400">{{ $referrals->count() }}</span>
    </div>

    @if($referrals->isEmpty())
        <div class="text-center py-10 text-gray-400 text-sm">—</div>
    @else
        <div class="overflow-x-auto -mx-5 sm:-mx-6 px-5 sm:px-6">
            <table class="min-w-full text-sm">
                <thead>
                    <tr class="text-start text-xs font-semibold text-gray-400 uppercase tracking-wider border-b border-white/5">
                        <th class="text-start py-2.5">{{ __('messages.name') }}</th>
                        <th class="text-start py-2.5">{{ __('messages.dashboard') }}</th>
                        <th class="text-start py-2.5">{{ __('messages.your_points') }}</th>
                        <th class="text-start py-2.5">{{ __('messages.status_pending') }}</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-white/5">
                    @foreach($referrals as $ref)
                        <tr class="hover:bg-white/2.5">
                            <td class="py-3">
                                <div class="flex items-center gap-2.5">
                                    <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-blue-500 to-blue-700 text-white text-xs font-bold flex items-center justify-center">
                                        {{ mb_substr(optional($ref->referred)->name ?? '?', 0, 1) }}
                                    </div>
                                    <div class="font-semibold text-white">{{ optional($ref->referred)->name ?? '—' }}</div>
                                </div>
                            </td>
                            <td class="py-3 text-gray-400">{{ optional($ref->created_at)->format('Y-m-d') }}</td>
                            <td class="py-3 font-bold text-teal-300">+{{ $ref->points_awarded }}</td>
                            <td class="py-3">
                                @if($ref->status === 'confirmed')
                                    <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-md bg-emerald-500/15 text-emerald-300 text-xs font-bold">✓ {{ __('messages.status_confirmed') }}</span>
                                @else
                                    <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-md bg-teal-500/15 text-teal-300 text-xs font-bold">… {{ __('messages.status_pending') }}</span>
                                @endif
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    @endif
</section>
@endsection