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

@section('content')
    <div class="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4">
        <div class="user-card p-4">
            <div class="text-xs text-[var(--user-muted)]">Total Earnings</div>
            <div class="mt-2 text-2xl font-semibold">Rs. <span data-count-to="{{ $stats['total_income'] ?? 0 }}">0</span></div>
        </div>
        <div class="user-card p-4">
            <div class="text-xs text-[var(--user-muted)]">Today Income</div>
            <div class="mt-2 text-2xl font-semibold">Rs. <span data-count-to="{{ $stats['today_income'] ?? 0 }}">0</span></div>
        </div>
        <div class="user-card p-4">
            <div class="text-xs text-[var(--user-muted)]">Available Wallet Balance</div>
            <div class="mt-2 text-2xl font-semibold">Rs. <span data-count-to="{{ $stats['withdrawable_balance'] ?? 0 }}">0</span></div>
        </div>
        <div class="user-card p-4">
            <div class="text-xs text-[var(--user-muted)]">Current Rank</div>
            <div class="mt-2 text-2xl font-semibold">{{ $stats['rank'] ?: 'N/A' }}</div>
        </div>
    </div>

    <div class="mt-6 grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4">
        <div class="user-card p-4">
            <div class="text-xs text-[var(--user-muted)]">Team Left</div>
            <div class="mt-2 text-2xl font-semibold" data-count-to="{{ $stats['team_left'] ?? 0 }}">0</div>
        </div>
        <div class="user-card p-4">
            <div class="text-xs text-[var(--user-muted)]">Team Right</div>
            <div class="mt-2 text-2xl font-semibold" data-count-to="{{ $stats['team_right'] ?? 0 }}">0</div>
        </div>
        <div class="user-card p-4">
            <div class="text-xs text-[var(--user-muted)]">Active Directs</div>
            <div class="mt-2 text-2xl font-semibold" data-count-to="{{ $stats['active_directs'] ?? 0 }}">0</div>
        </div>
        <div class="user-card p-4">
            <div class="text-xs text-[var(--user-muted)]">Today BV</div>
            <div class="mt-2 text-2xl font-semibold" data-count-to="{{ $stats['today_bv'] ?? 0 }}">0</div>
        </div>
    </div>

    <div class="mt-6 grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4">
        <div class="user-card p-4">
            <div class="text-xs text-[var(--user-muted)]">Business Left</div>
            <div class="mt-2 text-2xl font-semibold" data-count-to="{{ $stats['left_business'] ?? 0 }}">0</div>
        </div>
        <div class="user-card p-4">
            <div class="text-xs text-[var(--user-muted)]">Business Right</div>
            <div class="mt-2 text-2xl font-semibold" data-count-to="{{ $stats['right_business'] ?? 0 }}">0</div>
        </div>
        <div class="user-card p-4">
            <div class="text-xs text-[var(--user-muted)]">Carry Forward Left</div>
            <div class="mt-2 text-2xl font-semibold" data-count-to="{{ $stats['carry_forward_left'] ?? 0 }}">0</div>
        </div>
        <div class="user-card p-4">
            <div class="text-xs text-[var(--user-muted)]">Carry Forward Right</div>
            <div class="mt-2 text-2xl font-semibold" data-count-to="{{ $stats['carry_forward_right'] ?? 0 }}">0</div>
        </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 font-semibold">Income Trend (7 Days)</div>
            <div class="overflow-x-auto">
                <canvas id="incomeChart" style="min-width:340px;height:240px;"></canvas>
            </div>
        </div>
        <div class="user-card p-4">
            <div class="mb-2 font-semibold">Team Growth (7 Days)</div>
            <div class="overflow-x-auto">
                <canvas id="teamChart" style="min-width:340px;height:240px;"></canvas>
            </div>
        </div>
        <div class="user-card p-4 md:col-span-2">
            <div class="mb-2 font-semibold">Bonus Distribution</div>
            <div class="overflow-x-auto">
                <canvas id="bonusChart" style="min-width:340px;height:240px;"></canvas>
            </div>
        </div>
    </div>

    <div class="mt-6 grid grid-cols-2 gap-3 md:grid-cols-4">
        <a href="{{ route('user.profile') }}" class="user-card p-4 text-center">
            Update Profile
        </a>
        <a href="{{ route('user.withdrawals') }}" class="user-card p-4 text-center">
            Request Withdrawal
        </a>
        <a href="{{ route('user.shop') }}" class="user-card p-4 text-center">
            Shop Products
        </a>
        <a href="{{ route('user.team') }}" class="user-card p-4 text-center">
            My Team
        </a>
    </div>

    <div class="mt-6 user-card p-4">
        <div class="mb-2 text-sm text-[var(--user-muted)]">Sponsor & Referral</div>
        <div class="text-sm font-semibold">{{ auth()->user()->member_code }} | Upline: {{ $sponsor?->name ?? 'N/A' }}</div>

        <div class="mt-4 grid grid-cols-1 gap-4 md:grid-cols-3">
            <div class="rounded-xl border border-[var(--user-border)] p-3">
                <div class="text-xs text-[var(--user-muted)]">Left Join Link</div>
                <div class="break-all text-xs font-mono">{{ $links['left'] }}</div>
                <div class="mt-2 flex gap-2">
                    <button class="rounded bg-slate-900 px-3 py-1 text-xs text-white copy-btn" data-link="{{ $links['left'] }}">Copy</button>
                </div>
                <img class="mt-3" src="https://api.qrserver.com/v1/create-qr-code/?size=120x120&data={{ urlencode($links['left']) }}" alt="Left QR">
            </div>
            <div class="rounded-xl border border-[var(--user-border)] p-3">
                <div class="text-xs text-[var(--user-muted)]">Right Join Link</div>
                <div class="break-all text-xs font-mono">{{ $links['right'] }}</div>
                <div class="mt-2 flex gap-2">
                    <button class="rounded bg-slate-900 px-3 py-1 text-xs text-white copy-btn" data-link="{{ $links['right'] }}">Copy</button>
                </div>
                <img class="mt-3" src="https://api.qrserver.com/v1/create-qr-code/?size=120x120&data={{ urlencode($links['right']) }}" alt="Right QR">
            </div>
            <div class="rounded-xl border border-[var(--user-border)] p-3">
                <div class="text-xs text-[var(--user-muted)]">Auto Link (Weak: {{ ucfirst($autoLeg) }})</div>
                <div class="break-all text-xs font-mono">{{ $links['auto'] }}</div>
                <div class="mt-2 flex gap-2">
                    <button class="rounded bg-slate-900 px-3 py-1 text-xs text-white copy-btn" data-link="{{ $links['auto'] }}">Copy</button>
                </div>
                <img class="mt-3" src="https://api.qrserver.com/v1/create-qr-code/?size=120x120&data={{ urlencode($links['auto']) }}" alt="Auto QR">
            </div>
        </div>
    </div>

    <script>
        new Chart(document.getElementById('incomeChart'), {
            type: 'line',
            data: {
                labels: {!! json_encode($labels ?? []) !!},
                datasets: [{
                    label: 'Income',
                    data: {!! json_encode($incomeSeries ?? []) !!},
                    borderColor: '#2563eb',
                    backgroundColor: 'rgba(37,99,235,0.15)',
                    fill: true,
                    tension: 0.3
                }]
            },
            options: { responsive: true, maintainAspectRatio: false }
        });

        new Chart(document.getElementById('teamChart'), {
            type: 'bar',
            data: {
                labels: {!! json_encode($labels ?? []) !!},
                datasets: [{
                    label: 'Joinings',
                    data: {!! json_encode($joiningSeries ?? []) !!},
                    backgroundColor: '#0ea5e9'
                }]
            },
            options: { responsive: true, maintainAspectRatio: false }
        });

        new Chart(document.getElementById('bonusChart'), {
            type: 'pie',
            data: {
                labels: {!! json_encode($bonusLabels ?? []) !!},
                datasets: [{
                    data: {!! json_encode($bonusSeries ?? []) !!},
                    backgroundColor: ['#2563eb', '#0ea5e9', '#22c55e', '#f59e0b', '#ef4444', '#a855f7']
                }]
            },
            options: { responsive: true, maintainAspectRatio: false }
        });

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