@extends('layouts.app')
@section('title', 'Dashboard')

@section('content')
    {{-- Welcome Header --}}
    <div class="mb-6">
        <h2 class="text-2xl font-bold text-white tracking-wide">Welcome back, {{ $user->username }} 👋</h2>
        <p class="text-muted text-sm mt-1">Let's continue your earning journey</p>
    </div>

    {{-- Top Widgets (Flex/Grid) --}}
    <div class="grid grid-cols-1 md:grid-cols-12 gap-5 mb-8 h-44">
        {{-- Today's Progress Card --}}
        <div class="p-5 md:col-span-5 flex flex-col justify-between relative overflow-hidden group border border-subtle rounded-2xl bg-cover bg-center" style="background-image: url('{{ asset('images/bg-progress.png') }}')">
            <div class="flex justify-between items-start mb-6 z-10">
                <div class="text-white text-sm2 font-semibold drop-shadow-md">Today's Progress</div>
            </div>
            <div class="z-10 mt-auto w-full">
                <div class="mb-5 flex items-baseline">
                    <span class="text-3xl font-bold text-white drop-shadow-md">@money($stats['today_earnings'])</span>
                    <span class="text-md font-bold text-primary ml-1.5 drop-shadow-md">/ @money($dailyGoal)</span>
                </div>
                <div class="flex justify-between text-xs2 text-white/80 font-bold mb-2 uppercase tracking-wide drop-shadow-sm">
                    <span>Daily Goal</span>
                    <span class="text-primary">Daily</span>
                </div>
                <div class="w-full bg-[#1A212D]/80 backdrop-blur-sm rounded-full h-2 overflow-hidden border border-black/20 shadow-inner">
                    @php $progress = min(100, ($stats['today_earnings'] / max($dailyGoal, 0.01)) * 100); @endphp
                    <div class="h-full rounded-full relative" style="width: {{ max(5, $progress) }}%; background: #00f260; box-shadow: 0 0 10px rgba(0,242,96,0.6);">
                        <div class="absolute right-0 top-0 bottom-0 w-3 bg-white/40 blur-[1px]"></div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Day Streak Card --}}
        <div class="p-5 md:col-span-2 flex flex-col items-center justify-end border border-subtle rounded-2xl bg-cover bg-center relative" style="background-image: url('{{ asset('images/bg-streak.png') }}')">
            <div class="z-10 text-3xl font-bold text-white leading-none mb-1.5 drop-shadow-md">{{ (int) ($user->daily_bonus_streak ?? 0) }}</div>
            <div class="z-10 text-white/80 text-sm2 font-medium drop-shadow-md">Day Streak</div>
        </div>

        {{-- Level Card --}}
        <div class="p-5 md:col-span-5 flex flex-col justify-between relative overflow-hidden group border border-subtle rounded-2xl bg-cover bg-center" style="background-image: url('{{ asset('images/bg-level.png') }}')">
            <div class="z-10 w-full pr-24 flex flex-col h-full justify-between">
                <div class="flex items-center gap-3 mt-1">
                    <div class="w-10 h-10 rounded-[0.6rem] bg-teal-500/20 backdrop-blur-sm flex items-center justify-center border border-teal-500/40 shadow-lg">
                        <i class="ph-fill ph-hexagon text-teal-400 text-2xl drop-shadow-md"></i>
                    </div>
                    <div>
                        <div class="text-white font-bold text-lg leading-tight drop-shadow-md">Level 8</div>
                        <div class="text-white/80 text-xs font-medium drop-shadow-md">Pro Gamer</div>
                    </div>
                </div>
                
                <div class="mt-5 w-full">
                    <div class="flex items-center gap-1.5 text-xs2 mb-2 font-bold uppercase tracking-wide drop-shadow-sm">
                        <span class="text-primary">1,250</span>
                        <span class="text-white/80">/ 3,000 XP</span>
                    </div>
                    <div class="w-full bg-[#1A212D]/80 backdrop-blur-sm rounded-full h-2 overflow-hidden shadow-inner">
                        <div class="h-full rounded-full" style="width: 41%; background: #00f260; box-shadow: 0 0 10px rgba(0,242,96,0.6);"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Stat Cards (Grid of 4) --}}
    <div class="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
        <div class="p-4 flex items-center border border-subtle bg-surface rounded-2xl">
            <div class="w-12 h-12 rounded-[0.7rem] bg-[#16221c] flex items-center justify-center mr-4 flex-shrink-0">
                <i class="ph ph-wallet text-primary text-xl"></i>
            </div>
            <div class="flex flex-col justify-center">
                <div class="text-lg font-bold text-white leading-tight">@money($stats['balance'])</div>
                <div class="text-muted text-xs2 font-medium uppercase tracking-wide mt-0.5">Wallet Balance</div>
            </div>
        </div>
        <div class="p-4 flex items-center border border-subtle bg-surface rounded-2xl">
            <div class="w-12 h-12 rounded-[0.7rem] bg-[#16221c] flex items-center justify-center mr-4 flex-shrink-0">
                <i class="ph ph-chart-line-up text-primary text-xl"></i>
            </div>
            <div class="flex flex-col justify-center">
                <div class="text-lg font-bold text-white leading-tight">@money($stats['today_earnings'])</div>
                <div class="text-muted text-xs2 font-medium uppercase tracking-wide mt-0.5">Today's Earnings</div>
            </div>
        </div>
        <div class="p-4 flex items-center border border-subtle bg-surface rounded-2xl">
            <div class="w-12 h-12 rounded-[0.7rem] bg-[#16221c] flex items-center justify-center mr-4 flex-shrink-0">
                <i class="ph ph-download-simple text-primary text-xl"></i>
            </div>
            <div class="flex flex-col justify-center">
                <div class="text-lg font-bold text-white leading-tight">@money($stats['total_earnings'])</div>
                <div class="text-muted text-xs2 font-medium uppercase tracking-wide mt-0.5">Total Earned</div>
            </div>
        </div>
        <div class="p-4 flex items-center border border-subtle bg-surface rounded-2xl">
            <div class="w-12 h-12 rounded-[0.7rem] bg-[#131b2c] flex items-center justify-center mr-4 flex-shrink-0">
                <i class="ph ph-users text-blue-400 text-xl"></i>
            </div>
            <div class="flex flex-col justify-center">
                <div class="text-lg font-bold text-white leading-tight">{{ $stats['referral_count'] }}</div>
                <div class="text-muted text-xs2 font-medium uppercase tracking-wide mt-0.5">Total Referrals</div>
            </div>
        </div>
    </div>

    {{-- Recommended For You --}}
    <div class="mb-8">
        <div class="flex items-center justify-between mb-4">
            <h3 class="text-lg2 font-bold text-white">Recommended For You</h3>
            <a href="{{ route('offers.index') }}" class="text-xs font-bold text-primary hover:underline">View all</a>
        </div>
        @if($recommended->isEmpty())
            <div class="border border-subtle bg-surface rounded-xl p-6 text-center text-muted text-sm">No offers available yet.</div>
        @else
        <div class="grid grid-cols-2 md:grid-cols-5 gap-3">
            @foreach($recommended as $offer)
            <a href="{{ route('offers.launch', $offer->id) }}" target="_blank" class="p-3 flex flex-col border border-subtle bg-surface rounded-xl hover:border-primary/30 hover:bg-[#151a24] transition-all cursor-pointer">
                <div class="flex items-center gap-2.5 mb-4">
                    <div class="w-10 h-10 rounded-[0.6rem] bg-base flex items-center justify-center flex-shrink-0 border border-white/5 shadow-sm overflow-hidden">
                        @if($offer->thumbnail)
                            <img src="{{ $offer->thumbnail }}" alt="{{ $offer->name }}" loading="lazy" class="w-full h-full object-cover">
                        @else
                            <i class="ph-fill ph-squares-four text-xl text-primary"></i>
                        @endif
                    </div>
                    <div class="flex flex-col min-w-0">
                        <div class="font-bold text-white text-sm3 leading-tight truncate">{{ $offer->name }}</div>
                        <div class="text-2xs text-muted mt-0.5 truncate">{{ $offer->os === 'android' ? 'Android' : ($offer->os === 'ios' ? 'iOS' : 'Desktop') }}</div>
                    </div>
                </div>
                <div class="flex justify-center mt-auto">
                    <span class="bg-[#0b291a] text-primary text-xs font-bold px-3 py-1 rounded-full w-full text-center border border-primary/20 tracking-wide">@money($offer->payout)</span>
                </div>
            </a>
            @endforeach
        </div>
        @endif
    </div>

    {{-- Recent Activity & Top Offerwalls --}}
    <div class="grid grid-cols-1 md:grid-cols-12 gap-5">
        {{-- Recent Activity (Left Column) --}}
        <div class="md:col-span-7">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg2 font-bold text-white">Recent Activity</h3>
                <a href="{{ route('activity.index') }}" class="text-xs font-bold text-primary hover:underline">View all</a>
            </div>
            <div class="border border-subtle bg-surface rounded-2xl overflow-hidden">
                @if($recentActivity->isEmpty())
                    <div class="text-center py-12">
                        <p class="text-muted text-sm">No recent activity.</p>
                    </div>
                @else
                    <div class="divide-y divide-subtle">
                        @foreach($recentActivity as $act)
                        <div class="p-3.5 flex items-center hover:bg-white/[0.02] transition-colors">
                            <div class="w-10 h-10 rounded-lg bg-[#1a3861] flex items-center justify-center mr-4 flex-shrink-0">
                                <i class="ph-fill ph-receipt text-blue-400 text-lg"></i>
                            </div>
                            <div class="flex-1 min-w-0">
                                <div class="text-sm3 font-bold text-white mb-0.5">Offer Completion</div>
                                <div class="text-xs2 text-muted truncate">Reward credited</div>
                            </div>
                            <div class="w-20 text-center">
                                <span class="font-bold text-sm3 {{ $act->status === 'credited' ? 'text-primary' : 'text-red-500' }}">
                                    {{ $act->status === 'credited' ? '+' : '-' }}@money(abs($act->user_reward))
                                </span>
                            </div>
                            <div class="w-20 text-right">
                                <span class="text-xs2 text-muted">{{ str_replace(' ago', '', $act->created_at->diffForHumans()) }} ago</span>
                            </div>
                        </div>
                        @endforeach
                    </div>
                @endif
            </div>
        </div>

        {{-- Top Offerwalls (Right Column) --}}
        <div class="md:col-span-5">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg2 font-bold text-white">Top Offerwalls</h3>
                <a href="{{ route('earn.index') }}" class="text-xs font-bold text-primary hover:underline">View all</a>
            </div>
            <div class="border border-subtle bg-surface rounded-2xl overflow-hidden">
                @if($topOfferwalls->isEmpty())
                    <div class="text-center py-12 text-muted text-sm">No offerwalls available yet.</div>
                @else
                <div class="divide-y divide-subtle">
                    @foreach($topOfferwalls as $wall)
                    <a href="{{ route('earn.show', $wall->slug) }}" class="p-4 flex items-center justify-between hover:bg-white/[0.02] transition-colors cursor-pointer group">
                        <div class="flex items-center">
                            <div class="w-10 h-10 rounded-lg bg-base flex items-center justify-center mr-4 flex-shrink-0 font-extrabold text-sm shadow-inner overflow-hidden border border-white/5">
                                @if($wall->icon_url)
                                    <img src="{{ $wall->icon_url }}" alt="{{ $wall->name }}" class="w-full h-full object-cover">
                                @else
                                    <span class="text-primary uppercase">{{ \Illuminate\Support\Str::substr($wall->name, 0, 2) }}</span>
                                @endif
                            </div>
                            <div>
                                <div class="text-sm3 font-bold text-white mb-0.5 group-hover:text-primary transition-colors">{{ $wall->name }}</div>
                                <div class="text-xs2 text-muted">{{ $wall->short_description ?? ('Avg. ' . \App\Support\Money::format($wall->avg_payout)) }}</div>
                            </div>
                        </div>
                        @if($wall->rating)
                        <div class="flex items-center text-sm2 font-bold text-amber">
                            <i class="ph-fill ph-star mr-1"></i> {{ number_format($wall->rating, 1) }}
                        </div>
                        @endif
                    </a>
                    @endforeach
                </div>
                @endif
            </div>
        </div>
    </div>

@endsection