@extends('member.layouts.app')

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

@section('content')
    @php
        $memberName = auth()->user()?->name ?? 'Kasun Perera';
        $memberInitials = collect(explode(' ', trim($memberName)))->map(fn($w) => strtoupper(substr($w, 0, 1)))->take(2)->implode('');
        $hasMembership = request()->boolean('membership', true);

        $stats = [
            ['label' => 'Total Savings', 'value' => $hasMembership ? 'Rs. 12,450' : 'Rs. 0', 'sub' => $hasMembership ? '+Rs. 2,300 this month' : 'Start saving today', 'trend' => $hasMembership ? 'up' : 'neutral'],
            ['label' => 'Offers Redeemed', 'value' => $hasMembership ? '47' : '0', 'sub' => $hasMembership ? '+8 this month' : 'Unlock offers now', 'trend' => $hasMembership ? 'up' : 'neutral'],
            ['label' => 'Membership Status', 'value' => $hasMembership ? 'Active' : 'Inactive', 'sub' => $hasMembership ? 'Expires Dec 2026' : 'Upgrade to Premium', 'trend' => $hasMembership ? 'neutral' : 'warning'],
            ['label' => 'Partner Locations', 'value' => '500+', 'sub' => 'Across Sri Lanka', 'trend' => 'neutral'],
        ];

        $offers = [
            ['partner' => 'Hilton Colombo', 'offer' => 'Up to 20% off dining', 'category' => 'Dining', 'badge' => 'bg-orange-100 text-orange-700'],
            ['partner' => 'Odel', 'offer' => '15% off all purchases', 'category' => 'Shopping', 'badge' => 'bg-blue-100 text-blue-700'],
            ['partner' => 'Jetwing Hotels', 'offer' => '25% off room rates', 'category' => 'Travel', 'badge' => 'bg-green-100 text-green-700'],
            ['partner' => 'Laugfs', 'offer' => '10% off fuel', 'category' => 'Services', 'badge' => 'bg-gray-100 text-gray-700'],
        ];
    @endphp

    <div class="absolute right-4 top-4 sm:top-6 sm:right-6 z-10 flex items-center gap-2 bg-white px-3 py-1.5 rounded-full shadow-sm border border-gray-200">
        <span class="text-xs font-medium text-gray-500">Demo: Membership</span>
        <a href="{{ route('member.dashboard', ['membership' => $hasMembership ? 0 : 1]) }}" class="flex items-center gap-1 text-sm font-bold {{ $hasMembership ? 'text-green-600' : 'text-gray-400' }}">
            <i data-lucide="{{ $hasMembership ? 'toggle-right' : 'toggle-left' }}" class="w-5 h-5"></i>
            {{ $hasMembership ? 'Active' : 'Inactive' }}
        </a>
    </div>

    <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 Premium Membership.' }}</p>
        </div>
        <div class="flex items-center gap-4">
            <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 class="w-10 h-10 rounded-full bg-[#0d4a4a] flex items-center justify-center text-white font-bold">{{ $memberInitials }}</div>
        </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 md:flex-row items-center justify-between gap-6">
                <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">PREMIUM ACCESS</span></div>
                    <h2 class="text-2xl font-bold mb-2">Upgrade to SaveSmart Premium</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', ['membership' => 0]) }}" class="px-6 py-3 bg-[#F5A623] text-[#0d4a4a] font-bold rounded-xl">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>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
        <div class="lg:col-span-1">
            <h2 class="text-lg font-bold text-gray-900 mb-4">Your Digital Card</h2>
            <div class="relative">
                <div class="relative w-full aspect-[1.586/1] rounded-2xl overflow-hidden shadow-2xl text-white p-6 flex flex-col justify-between bg-gradient-to-br from-[#0d4a4a] to-[#1a6b6b] {{ !$hasMembership ? 'blur-sm grayscale opacity-70' : '' }}">
                    <div class="flex justify-between items-start z-10"><span class="font-bold text-xl tracking-tight">SaveSmart<span class="text-[#F5A623]">.lk</span></span><span class="bg-[#F5A623] text-[#0d4a4a] text-[10px] font-bold px-2 py-1 rounded">PREMIUM</span></div>
                    <div class="w-12 h-9 bg-gradient-to-br from-[#F5A623] to-[#b87a15] rounded-md my-4 opacity-90"></div>
                    <div class="z-10 mt-auto"><p class="font-mono text-lg sm:text-xl tracking-widest mb-4">SS-2024-8821-5234</p><p class="text-[10px] text-gray-300 uppercase">Member Name</p><p class="font-medium uppercase">{{ $memberName }}</p></div>
                </div>
                @if (!$hasMembership)
                    <div class="absolute inset-0 flex items-center justify-center z-20"><div class="bg-white/90 backdrop-blur-sm p-4 rounded-xl shadow-lg text-center"><i data-lucide="lock" class="w-8 h-8 text-[#0d4a4a] mx-auto mb-2"></i><p class="font-bold text-gray-900 text-sm">Card Locked</p></div></div>
                @endif
            </div>
        </div>

        <div class="lg:col-span-2">
            <div class="flex justify-between items-center mb-4"><h2 class="text-lg font-bold text-gray-900">Exclusive Offers</h2><a href="{{ route('member.offers', ['membership' => $hasMembership ? 1 : 0]) }}" class="text-sm text-[#0d4a4a] font-medium hover:underline">View All</a></div>
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                @foreach ($offers as $offer)
                    <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 {{ $offer['badge'] }}">{{ $offer['category'] }}</span></div>
                            <h3 class="font-bold text-gray-900">{{ $offer['partner'] }}</h3>
                            <p class="text-[#F5A623] font-medium text-sm mb-4">{{ $offer['offer'] }}</p>
                            <button class="w-full py-2 text-sm font-medium text-[#0d4a4a] bg-[#0d4a4a]/5 rounded-lg">View Offer</button>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
@endsection