@php
    $refId = Auth::user()->referral_id ?? Auth::user()->id;

    $examples = [
        ['label' => 'Homepage',        'url' => 'https://sgtgodoy.com/'],
        ['label' => 'PoliceExam911',   'url' => 'https://sgtgodoy.com/px911'],
    ];
@endphp

<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">Link Generator</h2>
    </x-slot>

    <div class="py-8">
        <div class="max-w-7xl mx-auto px-6 lg:px-8 space-y-6">

            {{-- Referral ID + example links --}}
            <div class="bg-white shadow-sm sm:rounded-lg p-6">
                <p class="text-[15px] font-semibold text-gray-800 mb-1">Your Tracking ID</p>
                <div class="flex items-center gap-4 mb-5">
                    <span class="text-3xl font-bold text-gray-900 tracking-tight">{{ $refId }}</span>
                    <span class="text-sm text-gray-400">Use <code class="bg-gray-100 text-gray-700 px-1.5 py-0.5 rounded font-mono text-[13px]">?ref={{ $refId }}</code> on any sgtgodoy.com URL to track your referrals. Examples:</span>
                </div>
                <div class="border-t border-gray-100"></div>
                <div class="divide-y divide-gray-100">
                    @foreach($examples as $page)
                    @php $affiliateUrl = rtrim($page['url'], '/') . '?ref=' . $refId; @endphp
                    <div class="py-4 flex items-center gap-4">
                        <span class="w-36 flex-shrink-0 text-[14px] font-medium text-gray-700">{{ $page['label'] }}</span>
                        <code class="flex-1 text-[13px] font-mono text-gray-500 bg-gray-50 rounded px-3 py-2 truncate">{{ $affiliateUrl }}</code>
                        <button
                            type="button"
                            onclick="copyLink(this, '{{ $affiliateUrl }}')"
                            class="flex-shrink-0 text-[13px] font-semibold text-indigo-600 hover:text-indigo-700 transition-colors"
                        >Copy</button>
                    </div>
                    @endforeach
                </div>
            </div>

            {{-- Custom URL --}}
            <div class="bg-white shadow-sm sm:rounded-lg p-6">
                <h3 class="text-[15px] font-semibold text-gray-800 mb-1">Custom URL</h3>
                <p class="text-sm text-gray-400 mb-5">Paste any sgtgodoy.com URL to generate your affiliate link.</p>
                <div class="flex gap-3">
                    <input
                        type="url"
                        id="customUrl"
                        placeholder="https://www.sgtgodoy.com/..."
                        oninput="updateCustomLink()"
                        class="flex-1 border border-gray-200 rounded-lg px-4 py-2.5 text-sm text-gray-800 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
                    />
                    <button
                        type="button"
                        id="customCopyBtn"
                        disabled
                        onclick="copyLink(this, document.getElementById('customResult').textContent)"
                        class="flex-shrink-0 px-5 py-2.5 bg-indigo-600 text-white text-sm font-semibold rounded-lg hover:bg-indigo-700 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
                    >Copy</button>
                </div>
                <div id="customResultWrap" class="hidden mt-3">
                    <code id="customResult" class="block text-[13px] font-mono text-gray-500 bg-gray-50 rounded px-3 py-2 break-all"></code>
                </div>
            </div>

        </div>
    </div>

    <script>
        const REF_ID = '{{ $refId }}';

        function updateCustomLink() {
            const input = document.getElementById('customUrl');
            const wrap  = document.getElementById('customResultWrap');
            const result = document.getElementById('customResult');
            const btn   = document.getElementById('customCopyBtn');
            const raw   = input.value.trim();

            if (!raw) {
                wrap.classList.add('hidden');
                btn.disabled = true;
                return;
            }

            try {
                const u = new URL(raw);
                u.searchParams.set('ref', REF_ID);
                result.textContent = u.toString();
                wrap.classList.remove('hidden');
                btn.disabled = false;
            } catch {
                wrap.classList.add('hidden');
                btn.disabled = true;
            }
        }

        async function copyLink(btn, url) {
            try {
                await navigator.clipboard.writeText(url);
                const orig = btn.textContent;
                btn.textContent = 'Copied!';
                btn.disabled = true;
                setTimeout(() => { btn.textContent = orig; btn.disabled = false; }, 2000);
            } catch {
                alert('Failed to copy.');
            }
        }
    </script>
</x-app-layout>