@extends('member.layouts.app')

@section('title', 'Member Dashboard')

@section('content')
    @php
        $user = auth()->user();
        $memberName = $user?->name ?? 'Kasun Perera';
        $memberInitials = collect(explode(' ', trim($memberName)))->map(fn($w) => strtoupper(substr($w, 0, 1)))->take(2)->implode('');
        $hasMembership = $user?->hasActiveMembership() ?? false;
        $membershipStatusText = $hasMembership ? 'Active' : 'Inactive';
        $membershipPackage = $user?->membership_package ?? 'Membership - Annual';
        $membershipPurchased = $user?->membership_purchased_at?->format('d M Y') ?? 'N/A';
        $membershipExpires = $user?->membership_expires_at?->format('d M Y') ?? 'N/A';
        $membershipNumber = $user?->membership_register_number ?? 'PENDING';
        $membershipBarcodeUrl = $hasMembership
            ? route('member.membership.barcode')
            : asset('images/barcode.png');
        $cardInitial = strtoupper(substr($memberName, 0, 1));

        $stats = $stats ?? [];
        $offers = $offers ?? [];
    @endphp

    <div class="space-y-6 pt-12 sm:space-y-8 sm:pt-0">

    <button class="fixed left-4 top-4 z-40 rounded-full bg-white p-2 shadow-sm hover:bg-gray-50 sm:hidden" aria-label="Notifications">
        <i data-lucide="bell" class="h-5 w-5 text-gray-600"></i>
        <span class="absolute right-1.5 top-1.5 h-2 w-2 rounded-full bg-red-500"></span>
    </button>

    <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
        <div>
            <h1 class="text-2xl font-bold text-gray-900">Welcome back, {{ strtok($memberName, ' ') }}! 👋</h1>
            <p class="text-gray-600">{{ $hasMembership ? "Here's what's happening with your membership today." : 'Unlock exclusive savings with a membership plan.' }}</p>
        </div>
        <div class="hidden w-full items-center justify-end sm:flex sm:w-auto">
            <button class="p-2 rounded-full bg-white shadow-sm hover:bg-gray-50 relative">
                <i data-lucide="bell" class="w-5 h-5 text-gray-600"></i>
                <span class="absolute top-1.5 right-1.5 w-2 h-2 bg-red-500 rounded-full"></span>
            </button>
        </div>
    </div>

    @if (!$hasMembership)
        <div class="bg-gradient-to-r from-[#0d4a4a] to-[#1a6b6b] rounded-2xl p-6 text-white relative overflow-hidden shadow-lg">
            <div class="relative z-10 flex flex-col items-start justify-between gap-6 md:flex-row md:items-center">
                <div>
                    <div class="flex items-center gap-2 mb-2"><i data-lucide="crown" class="w-5 h-5 text-[#F5A623]"></i><span class="font-bold text-[#F5A623] tracking-wide text-sm">MEMBERSHIP ACCESS</span></div>
                    <h2 class="text-2xl font-bold mb-2">Activate Your SaveSmart Membership</h2>
                    <p class="text-gray-200 max-w-xl">Get unlimited access to 500+ exclusive offers and your digital membership card.</p>
                </div>
                <a href="{{ route('member.card') }}" class="inline-flex w-full justify-center rounded-xl bg-[#F5A623] px-6 py-3 font-bold text-[#0d4a4a] md:w-auto">View Plans</a>
            </div>
        </div>
    @endif

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
        @foreach ($stats as $stat)
            <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100">
                <p class="text-sm font-medium text-gray-500">{{ $stat['label'] }}</p>
                <p class="mt-2 text-2xl font-bold {{ $hasMembership ? 'text-[#0d4a4a]' : 'text-gray-400' }}">{{ $stat['value'] }}</p>
                <div class="mt-2 text-xs">
                    @if ($stat['trend'] === 'up')
                        <span class="text-green-600 font-medium inline-flex items-center"><i data-lucide="trending-up" class="w-3 h-3 mr-1"></i>{{ $stat['sub'] }}</span>
                    @elseif ($stat['trend'] === 'warning')
                        <span class="text-amber-600 font-medium">{{ $stat['sub'] }}</span>
                    @else
                        <span class="text-gray-500">{{ $stat['sub'] }}</span>
                    @endif
                </div>
            </div>
        @endforeach
    </div>

    <section class="py-10 sm:py-12 lg:py-16 bg-teal-deep text-white overflow-hidden rounded-2xl">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-10">
            <div class="grid grid-cols-1 xl:grid-cols-2 gap-8 lg:gap-10 xl:gap-14 items-start">
                <div class="space-y-4 lg:space-y-5">
                    <h3 class="text-lg font-bold text-black">Card Details</h3>
                    <div class="relative flex justify-center xl:justify-start perspective-1000">
                        <div class="absolute inset-0 bg-amber-gold/20 blur-[100px] rounded-full"></div>
                        <div class="relative w-full max-w-xl aspect-[1.586/1] preserve-3d {{ !$hasMembership ? 'blur-sm grayscale opacity-70' : '' }}">
                            <div class="w-full h-full bg-gradient-to-br from-teal-900 to-black rounded-2xl p-4 sm:p-5 lg:p-6 flex flex-col gap-1.5 sm:gap-2 border border-amber-gold/30 shadow-2xl relative overflow-hidden">
                                <div class="absolute inset-0 opacity-20 bg-[radial-gradient(circle_at_1px_1px,rgba(255,255,255,0.22)_1px,transparent_0)] [background-size:14px_14px]"></div>
                                <div class="absolute top-0 -left-[100%] w-[50%] h-full bg-gradient-to-r from-transparent via-white/10 to-transparent skew-x-12 animate-shine"></div>
                                <div class="relative flex justify-between items-start z-10">
                                    <div>
                                        <h3 class="text-white font-heading font-bold text-2xl tracking-wide">SaveSmart<span class="text-amber-gold">.lk</span></h3>
                                        <p class="text-teal-100/60 text-xs uppercase tracking-widest mt-0.5">Premium Member</p>
                                    </div>
                                    <span class="bg-[#F5A623] text-[#0d4a4a] text-[10px] font-bold px-2 py-0.5 rounded">PREMIUM</span>
                                </div>
                                <img src="{{ $membershipBarcodeUrl }}" alt="Barcode" class="relative z-10 w-56 sm:w-72 h-14 sm:h-16 object-fill [image-rendering:crisp-edges]">
                                <div class="relative z-10">
                                    <p class="text-white/90 font-mono text-base sm:text-lg md:text-xl tracking-widest mb-1 shadow-black drop-shadow-md">{{ $membershipNumber }}</p>
                                    <div class="flex justify-between items-end gap-2">
                                        <div class="flex items-center gap-2 min-w-0">
                                            <div class="w-10 h-10 rounded-full bg-white/20 border border-white/30 flex items-center justify-center text-xs font-bold shrink-0">
                                                {{ $cardInitial }}
                                            </div>
                                            <div class="min-w-0">
                                                <p class="text-teal-100/60 text-[10px] uppercase tracking-wider mb-0.5">Card Holder</p>
                                                <p class="text-white font-medium tracking-wide truncate">{{ strtoupper($memberName) }}</p>
                                            </div>
                                        </div>
                                        <div class="text-right shrink-0">
                                            <p class="text-teal-100/60 text-[10px] uppercase tracking-wider mb-0.5">Status</p>
                                            <p class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-bold border {{ $hasMembership ? 'bg-green-500/20 text-green-300 border-green-400/40' : 'bg-gray-500/20 text-gray-200 border-gray-300/40' }}">{{ strtoupper($membershipStatusText) }}</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="relative z-10 mt-2 grid grid-cols-1 gap-2 border-t border-white/10 pt-3 text-[10px] sm:grid-cols-3 sm:gap-3">
                                    <div>
                                        <p class="text-teal-100/60 uppercase tracking-wider mb-1">Package</p>
                                        <p class="text-white font-semibold">{{ $membershipPackage }}</p>
                                    </div>
                                    <div>
                                        <p class="text-teal-100/60 uppercase tracking-wider mb-1">Purchased</p>
                                        <p class="text-white font-semibold">{{ $membershipPurchased }}</p>
                                    </div>
                                    <div class="sm:text-right">
                                        <p class="text-teal-100/60 uppercase tracking-wider mb-1">Expires</p>
                                        <p class="text-white font-semibold">{{ $membershipExpires }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="space-y-4 lg:space-y-5">
                    <div class="mb-1 flex flex-col items-start justify-between gap-2 sm:flex-row sm:items-center sm:gap-3">
                        <h3 class="text-lg font-bold text-black">Exclusive Offers</h3>
                        <a href="{{ route('member.offers') }}" class="text-sm text-amber-300 font-medium hover:underline whitespace-nowrap">View All</a>
                    </div>
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        @foreach ($offers as $offer)
                            @php
                                $partnerName = $offer->partner?->company_name ?: $offer->partner?->name ?: 'Partner';
                                $badgeClasses = match (strtolower($offer->category ?? '')) {
                                    'dining' => 'bg-orange-100 text-orange-700',
                                    'shopping' => 'bg-blue-100 text-blue-700',
                                    'travel' => 'bg-green-100 text-green-700',
                                    default => 'bg-gray-100 text-gray-700',
                                };
                            @endphp

                            <div class="relative bg-white p-4 rounded-xl border border-gray-100 shadow-sm overflow-hidden">
                                <div class="{{ !$hasMembership ? 'blur-[2px] opacity-60 pointer-events-none select-none' : '' }}">
                                    <div class="flex justify-between items-start mb-3">
                                        <div class="w-10 h-10 bg-gray-100 rounded-lg flex items-center justify-center text-gray-400 text-xs font-bold">LOGO</div>
                                        <span class="text-[10px] font-bold px-2 py-1 rounded-full {{ $badgeClasses }}">{{ $offer->category }}</span>
                                    </div>
                                    <h3 class="font-bold text-gray-900">{{ $partnerName }}</h3>
                                    <p class="text-[#F5A623] font-medium text-sm mb-4">{{ $offer->discount_label }}</p>
                                    <a href="{{ route('member.offers.show', $offer) }}" class="w-full inline-flex justify-center py-2 text-sm font-medium text-[#0d4a4a] bg-[#0d4a4a]/5 rounded-lg">View Offer</a>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </section>
    </div>
@endsection