@extends('layouts.member')
@section('title', 'Your Dashboard — JAM Members Club')

@section('content')
@php
    $user = auth()->user();
    $currentTier = $user->currentTier?->tier;
    $nextTier = $currentTier ? \App\Models\Tier::where('display_order', $currentTier->display_order + 1)->first() : null;
    $recentTransactions = $user->pointsTransactions()->take(5)->get();
@endphp

<div class="mb-8">
    <p class="text-white/40 text-sm">Welcome back,</p>
    <h1 class="text-3xl font-semibold mt-1" style="font-family: 'Playfair Display', serif;">
        Your Curated Experience.
    </h1>
</div>

<div class="grid grid-cols-3 gap-6 mb-8">
    {{-- Points card --}}
    <div class="col-span-2 bg-[#111111] border border-[#1e1e1e] rounded-2xl p-6 relative overflow-hidden">
        <div class="absolute top-0 right-0 w-48 h-48 bg-[#D4B84A]/5 rounded-full -translate-y-12 translate-x-12 pointer-events-none"></div>
        <div class="flex items-start justify-between mb-6">
            <div>
                <p class="text-[#D4B84A] text-xs tracking-[0.3em] uppercase font-medium">Heritage Rewards</p>
                <p class="text-white/30 text-xs mt-0.5">{{ $user->membership_number }}</p>
            </div>
            <span class="px-3 py-1 rounded-full text-xs font-semibold border
                {{ $currentTier?->slug === 'limitless' ? 'border-[#D4B84A] text-[#D4B84A] bg-[#D4B84A]/10' : ($currentTier?->slug === 'indulged' ? 'border-blue-400/50 text-blue-300 bg-blue-400/10' : 'border-white/20 text-white/60 bg-white/5') }}">
                {{ $currentTier?->name ?? 'Invited' }}
            </span>
        </div>
        <p class="text-5xl font-semibold text-white mb-1">{{ number_format($user->points_balance) }}</p>
        <p class="text-white/30 text-sm uppercase tracking-widest">Points</p>
        @if($nextTier)
        <div class="mt-5">
            <div class="flex justify-between text-xs text-white/30 mb-2">
                <span>Progress to {{ $nextTier->name }}</span>
                <span>{{ number_format($user->points_balance) }} / {{ number_format($nextTier->points_threshold_3months) }}</span>
            </div>
            <div class="h-1 bg-white/10 rounded-full overflow-hidden">
                <div class="h-full bg-[#D4B84A] rounded-full transition-all"
                     style="width: {{ min(100, ($user->points_balance / $nextTier->points_threshold_3months) * 100) }}%"></div>
            </div>
        </div>
        @else
        <p class="text-[#D4B84A] text-xs mt-4 tracking-wide">✦ Limitless Member — Highest Tier</p>
        @endif
        <p class="text-white/20 text-xs mt-4">Points expire: {{ $user->points_expiry_date?->format('F Y') }}</p>
    </div>

    {{-- Quick info --}}
    <div class="space-y-4">
        <div class="bg-[#111111] border border-[#1e1e1e] rounded-2xl p-5">
            <p class="text-white/40 text-xs tracking-widest uppercase mb-2">Member Since</p>
            <p class="text-white font-medium">{{ $user->enrolled_at?->format('F Y') ?? 'N/A' }}</p>
        </div>
        <div class="bg-[#111111] border border-[#1e1e1e] rounded-2xl p-5">
            <p class="text-white/40 text-xs tracking-widest uppercase mb-2">Current Tier</p>
            <p class="text-white font-medium">{{ $currentTier?->name ?? 'Invited' }}</p>
            <p class="text-white/30 text-xs mt-1">Min. ${{ number_format($currentTier?->min_spend_per_visit ?? 100, 0) }} per visit</p>
        </div>
        <div class="bg-[#111111] border border-[#1e1e1e] rounded-2xl p-5">
            <p class="text-white/40 text-xs tracking-widest uppercase mb-2">Total Visits</p>
            <p class="text-white font-medium">{{ $user->visits()->count() }}</p>
        </div>
    </div>
</div>

{{-- Recent ledger --}}
<div class="bg-[#111111] border border-[#1e1e1e] rounded-2xl">
    <div class="flex items-center justify-between px-6 py-4 border-b border-[#1e1e1e]">
        <h3 class="text-sm font-medium">Recent Ledger</h3>
        <a href="{{ route('member.points') }}" class="text-[#D4B84A] text-xs hover:text-[#E8D080] transition-colors">View all →</a>
    </div>
    <div class="divide-y divide-[#1e1e1e]">
        @forelse($recentTransactions as $tx)
        <div class="flex items-center justify-between px-6 py-4">
            <div>
                <p class="text-white text-sm">{{ $tx->description }}</p>
                <p class="text-white/30 text-xs mt-0.5">{{ $tx->created_at->format('d M Y') }}</p>
            </div>
            <span class="font-semibold text-sm {{ $tx->isCredit() ? 'text-[#D4B84A]' : 'text-red-400' }}">
                {{ $tx->isCredit() ? '+' : '-' }}{{ number_format($tx->amount) }}
            </span>
        </div>
        @empty
        <div class="px-6 py-8 text-center text-white/30 text-sm">No transactions yet. Your points will appear here after your first visit.</div>
        @endforelse
    </div>
</div>
@endsection