@extends('layouts.app')
@section('title', 'Home – ' . \App\Models\Setting::get('app_name','ZURITYM'))

@section('content')

{{-- Wallet Bar --}}
<div class="section" style="padding-top:12px;">
    <div class="wallet-bar">
        <div style="flex:1;">
            <div class="label">Your Balance</div>
            <div class="points">{{ number_format($user->points) }} pts</div>
            <div class="cedis">≈ GH₵{{ number_format($cedisValue, 2) }}</div>
        </div>
        <div style="text-align:right;">
            <div class="label">Level</div>
            <div style="font-size:20px;font-weight:800;">{{ $user->level }}</div>
            <a href="{{ route('wallet.index') }}" class="btn btn-sm" style="background:rgba(255,255,255,.25);color:#fff;margin-top:6px;">
                <i class="fa fa-arrow-right"></i> Redeem
            </a>
        </div>
    </div>
</div>

{{-- Daily Bonuses --}}
<div class="section">
    <div class="section-title">Daily Bonuses</div>
    <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;">
        {{-- Daily Login --}}
        <div class="card card-body text-center" style="padding:16px;">
            <div style="font-size:32px;margin-bottom:6px;">🎁</div>
            <div style="font-size:12px;font-weight:600;color:var(--text-muted);">Daily Login</div>
            <div style="font-size:18px;font-weight:800;color:var(--primary);">+{{ \App\Models\Setting::get('daily_login_points',10) }} pts</div>
            @if($canDaily)
                <button class="btn btn-primary btn-sm w-100" style="margin-top:8px;" onclick="claimDaily()">Claim</button>
            @else
                <button class="btn btn-sm w-100" style="margin-top:8px;background:#f1f5f9;color:#94a3b8;" disabled>Claimed ✓</button>
            @endif
        </div>
        {{-- Spin --}}
        <div class="card card-body text-center" style="padding:16px;">
            <div style="font-size:32px;margin-bottom:6px;">🎡</div>
            <div style="font-size:12px;font-weight:600;color:var(--text-muted);">Spin & Earn</div>
            <div style="font-size:18px;font-weight:800;color:var(--secondary);">Up to 1000 pts</div>
            @if($canSpin)
                <a href="{{ route('spin.index') }}" class="btn btn-sm w-100" style="margin-top:8px;background:var(--secondary);color:#fff;">Spin Now</a>
            @else
                <button class="btn btn-sm w-100" style="margin-top:8px;background:#f1f5f9;color:#94a3b8;" disabled>Used Today</button>
            @endif
        </div>
    </div>
</div>

{{-- Quick Actions --}}
<div class="section">
    <div class="section-title">Quick Actions</div>
    <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:8px;">
        @php
        $actions = [
            ['icon'=>'👁','label'=>'View & Earn',  'route'=>route('promotions.browse'),           'color'=>'#1A73E8'],
            ['icon'=>'🎮','label'=>'Games',         'route'=>route('games.index'),                 'color'=>'#8B5CF6'],
            ['icon'=>'📣','label'=>'Promote',       'route'=>route('promotions.create'),           'color'=>'#EF4444'],
            ['icon'=>'🛒','label'=>'Buy Points',    'route'=>route('buy-points.index'),            'color'=>'#F59E0B'],
            ['icon'=>'▶','label'=>'Videos',         'route'=>route('tasks.index').'?type=video',   'color'=>'#22C55E'],
            ['icon'=>'🎫','label'=>'Offers',        'route'=>route('tasks.index').'?type=offer',   'color'=>'#0088CC'],
            ['icon'=>'🎡','label'=>'Spin',          'route'=>route('spin.index'),                  'color'=>'#F59E0B'],
            ['icon'=>'👥','label'=>'Invite',        'route'=>route('profile.index').'#referral',   'color'=>'#16A34A'],
        ];
        @endphp
        @foreach($actions as $a)
        <a href="{{ $a['route'] }}" style="text-decoration:none;">
            <div class="card card-body text-center" style="padding:12px 6px;">
                <div style="font-size:22px;margin-bottom:4px;">{{ $a['icon'] }}</div>
                <div style="font-size:10px;font-weight:600;color:var(--text-muted);">{{ $a['label'] }}</div>
            </div>
        </a>
        @endforeach
    </div>
</div>

{{-- Featured Tasks --}}
<div class="section">
    <div class="section-title">
        Tasks
        <a href="{{ route('tasks.index') }}">See All</a>
    </div>
    @foreach($tasks as $task)
    <div class="task-card">
        <div class="task-icon">
            {{ match($task->type) { 'video'=>'▶', 'visit'=>'🌐', 'daily'=>'📅', 'game'=>'🎮', 'quiz'=>'🧩', default=>'⭐' } }}
        </div>
        <div style="flex:1;">
            <div style="font-weight:600;font-size:14px;">{{ $task->title }}</div>
            <div style="font-size:12px;color:var(--text-muted);margin-top:2px;">{{ $task->description }}</div>
        </div>
        <div style="text-align:right;">
            <div class="task-points">+{{ $task->points }}</div>
            <div style="font-size:10px;color:var(--text-muted);">points</div>
        </div>
    </div>
    @endforeach
</div>

{{-- Leaderboard Preview --}}
<div class="section">
    <div class="section-title">
        🏆 Top Earners
        <a href="{{ route('leaderboard') }}">Full List</a>
    </div>
    <div class="card">
        @foreach($leaderboard->take(5) as $i => $u)
        <div class="lb-item {{ $i < 4 ? 'border-bottom:1px solid var(--border);' : '' }}">
            <div class="lb-rank {{ match($i){ 0=>'top1',1=>'top2',2=>'top3',default=>'' } }}">
                {{ match($i){ 0=>'🥇',1=>'🥈',2=>'🥉',default=>($i+1) } }}
            </div>
            <img src="{{ $u->avatar_url }}" class="lb-avatar" alt="">
            <div class="lb-name">
                {{ $u->name }}
                @if($u->id === auth()->id()) <span style="font-size:10px;color:var(--primary);">(You)</span> @endif
            </div>
            <div class="lb-points">{{ number_format($u->total_earned_points) }} pts</div>
        </div>
        @endforeach
    </div>
</div>

{{-- Recent Transactions --}}
@if($recentTx->isNotEmpty())
<div class="section">
    <div class="section-title">
        Recent Activity
        <a href="{{ route('wallet.index') }}">All</a>
    </div>
    <div class="card">
        @foreach($recentTx as $tx)
        <div style="display:flex;align-items:center;gap:12px;padding:12px 16px;{{ !$loop->last?'border-bottom:1px solid var(--border);':'' }}">
            <div style="width:36px;height:36px;border-radius:50%;background:{{ $tx->points>0?'#DCFCE7':'#FEE2E2' }};display:flex;align-items:center;justify-content:center;font-size:16px;">
                {{ $tx->points>0 ? '⬆' : '⬇' }}
            </div>
            <div style="flex:1;">
                <div style="font-size:13px;font-weight:600;">{{ $tx->description }}</div>
                <div style="font-size:11px;color:var(--text-muted);">{{ $tx->created_at->diffForHumans() }}</div>
            </div>
            <div style="font-weight:700;color:{{ $tx->points>0?'var(--success)':'var(--danger)' }}">
                {{ $tx->points>0?'+':'' }}{{ number_format($tx->points) }} pts
            </div>
        </div>
        @endforeach
    </div>
</div>
@endif

<div style="height:16px;"></div>

@endsection

@push('scripts')
<script>
async function claimDaily() {
    const btn = event.target;
    btn.disabled = true;
    btn.innerHTML = '<div class="spinner" style="width:16px;height:16px;border-width:2px;"></div>';
    try {
        const r = await post('{{ route('daily.login') }}');
        if (r.success) {
            toast(`Daily bonus claimed! +${r.points} points 🎉`, 'success');
            setTimeout(() => location.reload(), 1500);
        } else {
            toast(r.error || 'Already claimed', 'error');
            btn.disabled = false; btn.textContent = 'Claim';
        }
    } catch { btn.disabled = false; btn.textContent = 'Claim'; }
}
</script>
@endpush