@extends('layouts.user', ['heading' => 'Referral Center'])

@section('content')
    <div class="mb-4 user-card bg-gradient-to-r from-indigo-600 to-violet-600 p-5 text-white">
        <div class="text-xs uppercase tracking-wide text-indigo-100">Referral Dashboard</div>
        <div class="mt-2 text-xl font-semibold">{{ auth()->user()->name }}</div>
        <div class="text-sm text-indigo-100">
            Sponsor Code: {{ auth()->user()->referral_code }} | Auto Suggested Leg: {{ ucfirst($autoLeg) }}
        </div>
    </div>

    <div class="grid grid-cols-2 gap-4 md:grid-cols-4">
        <div class="user-card p-4">
            <div class="text-xs text-[var(--user-muted)]">Direct Referrals</div>
            <div class="mt-2 text-2xl font-semibold" data-count-to="{{ $summary['direct_count'] }}">0</div>
            <div class="text-xs text-emerald-600">{{ $summary['active_direct_count'] }} active</div>
        </div>
        <div class="user-card p-4">
            <div class="text-xs text-[var(--user-muted)]">Left Team</div>
            <div class="mt-2 text-2xl font-semibold" data-count-to="{{ $summary['left_team'] }}">0</div>
        </div>
        <div class="user-card p-4">
            <div class="text-xs text-[var(--user-muted)]">Right Team</div>
            <div class="mt-2 text-2xl font-semibold" data-count-to="{{ $summary['right_team'] }}">0</div>
        </div>
        <div class="user-card p-4">
            <div class="text-xs text-[var(--user-muted)]">Direct Income</div>
            <div class="mt-2 text-2xl font-semibold">Rs. <span data-count-to="{{ $summary['direct_income'] }}">0</span></div>
        </div>
    </div>

    <div class="mt-6 user-card p-4">
        <div class="mb-3 text-sm font-semibold">3 Referral Links (Left / Right / Auto)</div>
        <div class="grid grid-cols-1 gap-4 md:grid-cols-3">
            @foreach(['left' => 'Left Join Link', 'right' => 'Right Join Link', 'auto' => 'Auto Placement Link'] as $type => $label)
                <div class="rounded-xl border border-[var(--user-border)] p-3">
                    <div class="text-xs text-[var(--user-muted)]">{{ $label }}</div>
                    <div class="mt-1 break-all rounded bg-slate-50 p-2 text-xs font-mono">{{ $links[$type] }}</div>
                    <div class="mt-2 flex flex-wrap gap-2">
                        <button class="copy-btn rounded bg-slate-900 px-3 py-1 text-xs text-white" data-link="{{ $links[$type] }}">Copy</button>
                        <a class="rounded bg-emerald-600 px-3 py-1 text-xs text-white" href="https://wa.me/?text={{ urlencode($links[$type]) }}" target="_blank" rel="noreferrer">WhatsApp</a>
                        <a class="rounded bg-indigo-600 px-3 py-1 text-xs text-white" href="{{ $links[$type] }}" target="_blank" rel="noreferrer">Open</a>
                    </div>
                    <img class="mt-3 rounded border border-[var(--user-border)]" src="https://api.qrserver.com/v1/create-qr-code/?size=140x140&data={{ urlencode($links[$type]) }}" alt="{{ $label }} QR">
                </div>
            @endforeach
        </div>
    </div>

    <div class="mt-6 grid grid-cols-1 gap-4 md:grid-cols-2">
        <div class="user-card p-4">
            <div class="mb-2 text-sm font-semibold">Binary BV Snapshot</div>
            <div class="grid grid-cols-2 gap-2 text-sm">
                <div class="rounded bg-slate-50 p-2">Joining Left: <span class="font-semibold">{{ number_format((float) $summary['left_joining_bv'], 2) }}</span></div>
                <div class="rounded bg-slate-50 p-2">Joining Right: <span class="font-semibold">{{ number_format((float) $summary['right_joining_bv'], 2) }}</span></div>
                <div class="rounded bg-slate-50 p-2">Repurchase Left: <span class="font-semibold">{{ number_format((float) $summary['left_repurchase_bv'], 2) }}</span></div>
                <div class="rounded bg-slate-50 p-2">Repurchase Right: <span class="font-semibold">{{ number_format((float) $summary['right_repurchase_bv'], 2) }}</span></div>
            </div>
        </div>

        <div class="user-card p-4">
            <div class="mb-2 text-sm font-semibold">Placement Hint</div>
            <div class="rounded-lg border border-indigo-200 bg-indigo-50 p-3 text-sm text-indigo-800">
                Auto placement currently points to
                <span class="font-semibold">{{ strtoupper($autoLeg) }}</span>
                leg based on your lower combined BV side.
            </div>
            <div class="mt-3 flex flex-wrap gap-2">
                <a href="{{ route('user.team', ['tab' => 'binary']) }}" class="rounded border px-3 py-1 text-xs">View Binary Team</a>
                <a href="{{ route('user.plans') }}" class="rounded border px-3 py-1 text-xs">View Plan Rules</a>
            </div>
        </div>
    </div>

    <script>
        document.querySelectorAll('.copy-btn').forEach((btn) => {
            btn.addEventListener('click', () => {
                navigator.clipboard.writeText(btn.dataset.link || '');
                const text = btn.textContent;
                btn.textContent = 'Copied';
                setTimeout(() => {
                    btn.textContent = text;
                }, 1200);
            });
        });
    </script>
@endsection