@php
    $user = Auth::user();
    $referralCode = $user->referral_code ?? '';
    $referralLink = $user->referral_link ?? '';
    $referralCount = $user->referral_count ?? 0;
    $hasCode = !empty($referralCode);
@endphp

<div class="referral-card">
    <div class="referral-card__header">
        <div class="referral-card__icon">
            <x-lucide-share-2 width="20" height="20" />
        </div>
        <div class="referral-card__title">
            <h4>رابط الدعوة</h4>
            <p>شارك رابط الدعوة مع أصدقائك</p>
        </div>
        @if($hasCode)
            <div class="referral-card__badge">
                <x-lucide-users width="16" height="16" />
                {{ $referralCount }} دعوة
            </div>
        @endif
    </div>

    <div class="referral-card__content">
        @if($hasCode)
            <div class="referral-card__field">
                <span class="referral-card__label">كود الدعوة:</span>
                <div class="referral-card__value copyable-container" data-copy-value="{{ $referralCode }}" role="button">
                    <x-lucide-clipboard width="16" height="16" />
                    <code>{{ $referralCode }}</code>
                </div>
            </div>

            <div class="referral-card__field">
                <span class="referral-card__label">رابط الدعوة:</span>
                <div class="referral-card__value referral-card__link copyable-container" data-copy-value="{{ $referralLink }}" role="button">
                    <x-lucide-clipboard width="16" height="16" />
                    <code>{{ $referralLink }}</code>
                </div>
            </div>
        @else
            <div class="referral-card__empty">
                <p>أنشئ كود الدعوة الخاص بك وشاركه مع أصدقائك</p>
                <button type="button" class="btn-custom-primary" id="generate-referral-btn" onclick="generateReferralCode()">
                    <x-lucide-plus-circle width="16" height="16" />
                    إنشاء كود الدعوة
                </button>
            </div>
        @endif
    </div>
</div>

<script>
function generateReferralCode() {
    const btn = document.getElementById('generate-referral-btn');
    btn.disabled = true;
    btn.innerHTML = `{!! svg("lucide-hourglass", ["width" => 16, "height" => 16])->toHtml() !!} جاري الإنشاء...`;

    fetch('{{ route("profile.referral.generate") }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Accept': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.err) {
            btn.disabled = false;
            btn.innerHTML = `{!! svg("lucide-plus-circle", ["width" => 16, "height" => 16])->toHtml() !!} إنشاء كود الدعوة`;
            alert(data.msg);
        } else {
            location.reload();
        }
    })
    .catch(error => {
        btn.disabled = false;
        btn.innerHTML = `{!! svg("lucide-plus-circle", ["width" => 16, "height" => 16])->toHtml() !!} إنشاء كود الدعوة`;
        alert('حدث خطأ، حاول مرة أخرى');
    });
}
</script>