@extends('member.layouts.default')

@section('page_title', auth('member')->user()->name . config('default.page_title_delimiter') . 'Dashboard' . config('default.page_title_delimiter') . config('default.app_name'))

@section('content')
<div class="relative">
    <div class="max-w-7xl mx-auto px-4 md:px-8 py-8 md:py-12 space-y-8">
        
        {{-- Welcome Header --}}
        <div class="flex flex-col md:flex-row md:items-center justify-between gap-6 animate-fade-in-up">
            <div>
                <h1 class="text-3xl md:text-5xl font-extrabold text-secondary-900 dark:text-white tracking-tight mb-3">
                    <span x-data="{ greeting: '{{ $greeting }}' }" x-init="
                        const h = new Date().getHours();
                        greeting = h >= 5 && h < 12 ? 'Good Morning'
                            : h < 17 ? 'Good Afternoon'
                            : h < 21 ? 'Good Evening'
                            : 'Good Night';
                    " x-text="greeting">{{ $greeting }}</span>
                    @if(auth('member')->user()?->email), <span class="text-primary-600 dark:text-primary-400">{{ auth('member')->user()->name }}</span>@endif
                    <span class="inline-block origin-[70%_70%] animate-wave text-3xl md:text-5xl">👋</span>
                </h1>
                <p class="text-base md:text-lg text-secondary-500 dark:text-secondary-400 max-w-2xl">
                    Manage your loyalty programs, track your points, and explore new membership rewards.
                </p>
            </div>

            {{-- Explore Button --}}
            <a href="{{ route('member.clubs.explore') }}" 
               class="inline-flex items-center justify-center px-6 py-3 bg-primary-600 hover:bg-primary-700 text-white font-bold rounded-2xl shadow-lg shadow-primary-500/20 transition-all duration-200 hover:scale-105 active:scale-95">
                <x-ui.icon icon="sparkles" class="w-5 h-5 mr-2" />
                Explore Tiers 🚀
            </a>
        </div>

        @php
            $member = auth('member')->user();
            /** * Logic: Only count and sum points for active cards.
             * Pending cards should not contribute to the total balance yet.
             */
            $activeCards = $cards->where('is_active', true);
            $loyaltyCount = $activeCards->count();
            $totalPoints = $activeCards->sum(fn($card) => $card->getMemberBalance($member));
            
            $hasStampCards = isset($stampCards) && $stampCards->isNotEmpty();
            $stampProgramCount = $hasStampCards ? $stampCards->count() : 0;
            
            $hasVouchers = isset($vouchers) && $vouchers->isNotEmpty();
            $voucherCount = $hasVouchers ? $vouchers->count() : 0;
            
            $totalPrograms = $loyaltyCount + $stampProgramCount + $voucherCount;
            
            $visibleMetricsCount = collect([
                'points' => ($totalPoints > 0 || $loyaltyCount > 0),
                'programs' => ($totalPrograms > 0),
                'stamps' => $hasStampCards,
                'vouchers' => $hasVouchers,
            ])->filter()->count();
            
            $gridClass = match($visibleMetricsCount) {
                4 => 'grid grid-cols-2 lg:grid-cols-4 gap-3 md:gap-4',
                3 => 'grid grid-cols-1 md:grid-cols-3 gap-3 md:gap-4',
                2 => 'grid grid-cols-1 md:grid-cols-2 gap-3 md:gap-4',
                default => 'grid grid-cols-1 gap-3 md:gap-4',
            };
        @endphp

        {{-- Metrics Grid --}}
        @if($visibleMetricsCount > 0)
            <div class="animate-fade-in-up delay-100">
                <div class="{{ $gridClass }}">
                    @if($totalPoints > 0 || $loyaltyCount > 0)
                    <div class="bg-white dark:bg-secondary-900 rounded-2xl md:rounded-3xl p-5 border border-secondary-100 dark:border-secondary-800 shadow-sm transition-all">
                        <div class="flex items-start gap-3">
                            <div class="w-11 h-11 rounded-xl bg-amber-500/10 flex items-center justify-center">
                                <x-ui.icon icon="coins" class="w-5 h-5 text-amber-600" />
                            </div>
                            <div>
                                <p class="text-2xl md:text-3xl font-bold text-amber-600 tracking-tight">{{ number_format($totalPoints) }}</p>
                                <p class="text-xs text-secondary-500 font-medium uppercase tracking-wider">Total Points</p>
                            </div>
                        </div>
                    </div>
                    @endif

                    @if($totalPrograms > 0)
                    <div class="bg-white dark:bg-secondary-900 rounded-2xl md:rounded-3xl p-5 border border-secondary-100 dark:border-secondary-800 shadow-sm transition-all">
                        <div class="flex items-start gap-3">
                            <div class="w-11 h-11 rounded-xl bg-emerald-500/10 flex items-center justify-center">
                                <x-ui.icon icon="layers" class="w-5 h-5 text-emerald-600" />
                            </div>
                            <div>
                                <p class="text-2xl md:text-3xl font-bold text-emerald-600 tracking-tight">{{ $totalPrograms }}</p>
                                <p class="text-xs text-secondary-500 font-medium uppercase tracking-wider">Active Programs</p>
                            </div>
                        </div>
                    </div>
                    @endif
                </div>
            </div>
        @endif

        {{-- Main Content: Loyalty Cards Section --}}
        @if($cards->isEmpty())
            <div class="bg-white dark:bg-secondary-900 border-2 border-dashed border-secondary-200 dark:border-secondary-800 rounded-3xl p-12 text-center animate-fade-in-up">
                <div class="w-20 h-20 bg-primary-50 dark:bg-primary-900/20 rounded-full flex items-center justify-center mx-auto mb-6">
                    <x-ui.icon icon="credit-card" class="w-10 h-10 text-primary-600" />
                </div>
                <h3 class="text-xl font-bold text-secondary-900 dark:text-white mb-2">No Membership Cards</h3>
                <p class="text-secondary-500 dark:text-secondary-400 mb-8 max-w-sm mx-auto">
                    You haven't joined any clubs yet. Explore our clubs to start earning rewards.
                </p>
                <a href="{{ route('member.clubs.explore', ['locale' => app()->getLocale()]) }}" class="inline-flex items-center px-8 py-3 bg-primary-600 text-white rounded-xl font-bold shadow-lg transition-all">
                    Find a Club 🚀
                </a>
            </div>
        @else
            <div class="animate-fade-in-up delay-200">
                <div class="mb-6 flex justify-between items-center">
                    <h2 class="text-xl font-bold text-secondary-900 dark:text-white flex items-center gap-2">
                        <x-ui.icon icon="credit-card" class="w-5 h-5 text-primary-600" />
                        Your Loyalty Cards
                    </h2>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
                    @foreach($cards as $index => $card)
                        <div class="animate-slide-in-up relative group" style="animation-delay: {{ $index * 80 }}ms;">
                            {{-- Pending Overlay for inactive cards --}}
                            @if($card->is_active !=1)
                                <div class="absolute inset-0 z-10 bg-white/60 dark:bg-secondary-900/60 backdrop-blur-[2px] rounded-3xl flex items-center justify-center border-2 border-dashed border-amber-400/50">
                                    <div class="text-center">
                                        <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-amber-100 text-amber-700 mb-2">
                                            <x-ui.icon icon="clock" class="w-3 h-3 mr-1" />
                                            PENDING APPROVAL
                                        </span>
                                    </div>
                                </div>
                            @endif
							{{ $card->color}}
                            <x-member.premium-card 
                                :card="$card" 
                                :flippable="false" 
                                :links="$card->is_active" 
                                :show-qr="$card->is_active" 
                                :show-balance="$card->is_active" 
								:balance="$card->points"
								:bg-color="$card->color"
                            />
                        </div>
                    @endforeach
                </div>
            </div>
        @endif

        {{-- Tier Status Section --}}
        @if(auth('member')->check() && isset($memberTiers) && $memberTiers->isNotEmpty())
            <div class="animate-fade-in-up delay-225 mt-12">
                <div class="mb-4">
                    <h2 class="text-xl font-bold text-secondary-900 dark:text-white flex items-center gap-2">
                        <x-ui.icon icon="award" class="w-5 h-5 text-primary-600" />
                        Membership Progress
                    </h2>
                </div>
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
                    @foreach($memberTiers as $tierData)
                        <x-member.tier-status 
                            :memberTier="$tierData['memberTier']" 
                            :club="$tierData['club']"
                            :card="$tierData['card']"
                            :progress="$tierData['progress']" />
                    @endforeach
                </div>
            </div>
        @endif

        {{-- Quick Actions --}}
        <div class="animate-fade-in-up delay-350 pt-8">
            <h2 class="text-lg font-bold text-secondary-900 dark:text-white mb-4">Quick Actions</h2>
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
                @foreach($dashboardBlocks as $block)
                <a href="{{ $block['link'] }}" class="group flex items-center gap-4 p-4 bg-white dark:bg-secondary-900 rounded-2xl border border-secondary-100 dark:border-secondary-800 shadow-sm hover:shadow-md transition-all">
                    <div class="w-11 h-11 rounded-xl bg-primary-100 dark:bg-primary-900/30 flex items-center justify-center flex-shrink-0">
                        <x-ui.icon :icon="$block['icon']" class="w-5 h-5 text-primary-600" />
                    </div>
                    <div class="flex-1 min-w-0">
                        <h3 class="font-semibold text-secondary-900 dark:text-white text-sm leading-tight">{!! $block['title'] !!}</h3>
                        <p class="text-xs text-secondary-400 truncate">{!! $block['desc'] !!}</p>
                    </div>
                    <x-ui.icon icon="chevron-right" class="w-4 h-4 text-secondary-300 group-hover:translate-x-1 transition-transform" />
                </a>
                @endforeach
            </div>
        </div>

    </div>
</div>
@stop