{{--
    文件功能：前台会员中心页面
    展示当前用户会员状态、会员等级权益、购买入口以及用户自己的会员购买记录
--}}
@extends('layouts.app')

@section('title', '会员中心 - 飘落流星')
@section('nav-icon', '👑')
@section('nav-title', '会员中心')

@section('content')
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 space-y-6">
        <section class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <div class="lg:col-span-2 bg-white rounded-3xl border border-amber-100 shadow-sm p-6">
                <div class="flex items-start justify-between gap-4">
                    <div>
                        <p class="text-sm font-bold text-amber-600">我的会员状态</p>
                        <h2 class="mt-2 text-2xl font-extrabold text-gray-900">
                            @if ($user->isVip())
                                {{ $user->vipName() ?: '尊贵会员' }}
                            @else
                                普通用户
                            @endif
                        </h2>
                        <p class="mt-3 text-sm text-gray-500">
                            @if ($user->isVip())
                                当前已开通会员权益，
                                @if ($user->hy_time)
                                    到期时间：{{ $user->hy_time->format('Y-m-d H:i') }}
                                @else
                                    当前为永久会员
                                @endif
                            @else
                                你当前还未开通会员，开通后可享受经验加成、金币加成和专属身份展示。
                            @endif
                        </p>
                    </div>
                    <div class="shrink-0 rounded-2xl bg-gradient-to-br from-amber-400 to-orange-500 text-white px-5 py-4 text-center min-w-[120px]">
                        <div class="text-sm opacity-90">当前徽章</div>
                        <div class="mt-2 text-3xl">{{ $user->vipIcon() ?: '⭐' }}</div>
                    </div>
                </div>

                <div class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div class="rounded-2xl bg-indigo-50 border border-indigo-100 p-4">
                        <div class="text-xs font-bold text-indigo-500 uppercase tracking-wider">经验倍率</div>
                        <div class="mt-2 text-2xl font-extrabold text-indigo-900">×{{ $user->vipLevel?->exp_multiplier ?? 1 }}</div>
                    </div>
                    <div class="rounded-2xl bg-amber-50 border border-amber-100 p-4">
                        <div class="text-xs font-bold text-amber-500 uppercase tracking-wider">金币倍率</div>
                        <div class="mt-2 text-2xl font-extrabold text-amber-900">×{{ $user->vipLevel?->jjb_multiplier ?? 1 }}</div>
                    </div>
                    <div class="rounded-2xl bg-emerald-50 border border-emerald-100 p-4">
                        <div class="text-xs font-bold text-emerald-500 uppercase tracking-wider">累计已支付</div>
                        <div class="mt-2 text-2xl font-extrabold text-emerald-900">¥{{ number_format($totalAmount, 2) }}</div>
                        <div class="mt-1 text-xs text-emerald-700">成功订单 {{ $paidOrders }} 笔</div>
                    </div>
                </div>
            </div>

            <div class="bg-slate-900 text-white rounded-3xl shadow-sm p-6">
                <p class="text-sm font-bold text-amber-300">会员权益总览</p>
                <ul class="mt-4 space-y-3 text-sm text-slate-200">
                    <li class="flex items-start gap-2"><span>⭐</span><span>挂机经验按会员倍率加成，升级更快。</span></li>
                    <li class="flex items-start gap-2"><span>💰</span><span>金币收益按会员倍率加成，参与玩法更轻松。</span></li>
                    <li class="flex items-start gap-2"><span>👑</span><span>昵称旁展示专属会员图标与会员名称。</span></li>
                    <li class="flex items-start gap-2"><span>✨</span><span>可使用会员专属进场欢迎语与离场提示语。</span></li>
                </ul>
                <div class="mt-6 rounded-2xl bg-white/10 border border-white/10 px-4 py-3 text-xs text-slate-200">
                    会员支付由平台支付中心统一处理，最终是否开通以异步回调结果为准。
                </div>
            </div>
        </section>

        <section class="bg-white rounded-3xl border border-gray-100 shadow-sm p-6">
            <div class="flex items-center justify-between gap-4 mb-5">
                <div>
                    <h3 class="text-xl font-extrabold text-gray-900">会员等级列表</h3>
                    <p class="mt-1 text-sm text-gray-500">不同档位提供不同倍率与时长，你可以按需要购买或续费。</p>
                </div>
                @if (! $vipPaymentEnabled)
                    <span class="inline-flex px-3 py-2 rounded-xl bg-gray-100 text-gray-500 text-sm font-bold">支付暂未开启</span>
                @endif
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-5">
                @foreach ($vipLevels as $vip)
                    @php
                        $isCurrentVipLevel = $user->isVip() && (int) $user->vip_level_id === (int) $vip->id;
                    @endphp
                    <div class="rounded-3xl border {{ $isCurrentVipLevel ? 'border-amber-300 bg-amber-50/60' : 'border-gray-100 bg-white' }} shadow-sm p-5 flex flex-col">
                        <div class="flex items-center justify-between gap-3">
                            <div class="flex items-center gap-3">
                                <div class="w-12 h-12 rounded-2xl bg-white border border-gray-100 flex items-center justify-center text-2xl shadow-sm">{{ $vip->icon }}</div>
                                <div>
                                    <h4 class="text-lg font-extrabold" style="color: {{ $vip->color ?: '#111827' }}">{{ $vip->name }}</h4>
                                    <p class="text-xs text-gray-500">当前已有 {{ $vip->users_count }} 位用户使用</p>
                                </div>
                            </div>
                            @if ($isCurrentVipLevel)
                                <span class="inline-flex px-2.5 py-1 rounded-full bg-amber-500 text-white text-xs font-bold">当前等级</span>
                            @endif
                        </div>

                        <div class="mt-5 grid grid-cols-2 gap-3 text-sm">
                            <div class="rounded-2xl bg-indigo-50 border border-indigo-100 p-3">
                                <div class="text-xs text-indigo-500 font-bold">经验倍率</div>
                                <div class="mt-1 text-xl font-extrabold text-indigo-900">×{{ $vip->exp_multiplier }}</div>
                            </div>
                            <div class="rounded-2xl bg-amber-50 border border-amber-100 p-3">
                                <div class="text-xs text-amber-500 font-bold">金币倍率</div>
                                <div class="mt-1 text-xl font-extrabold text-amber-900">×{{ $vip->jjb_multiplier }}</div>
                            </div>
                        </div>

                        <div class="mt-4 space-y-2 text-sm text-gray-600 flex-1">
                            <div class="flex items-center justify-between"><span>有效时长</span><span class="font-bold text-gray-900">{{ $vip->duration_days > 0 ? $vip->duration_days . ' 天' : '永久' }}</span></div>
                            <div class="flex items-center justify-between"><span>支付金额</span><span class="font-bold text-rose-600">{{ $vip->price > 0 ? '¥' . $vip->price : '联系管理员' }}</span></div>
                        </div>

                        <div class="mt-5">
                            @if ($vip->price > 0 && $vipPaymentEnabled)
                                <form action="{{ route('vip.payment.store') }}" method="POST"
                                    onsubmit="return confirm('确认支付 {{ $vip->price }} 元购买【{{ $vip->name }}】吗？');">
                                    @csrf
                                    <input type="hidden" name="vip_level_id" value="{{ $vip->id }}">
                                    <button type="submit" class="w-full py-3 rounded-2xl bg-indigo-600 hover:bg-indigo-700 text-white font-bold transition shadow-sm">
                                        {{ $isCurrentVipLevel ? '立即续费' : '立即购买' }}
                                    </button>
                                </form>
                            @elseif ($vip->price > 0)
                                <div class="w-full py-3 rounded-2xl bg-gray-100 text-gray-500 text-center font-bold">支付暂未开启</div>
                            @else
                                <div class="w-full py-3 rounded-2xl bg-emerald-100 text-emerald-700 text-center font-bold">请联系管理员开通</div>
                            @endif
                        </div>
                    </div>
                @endforeach
            </div>
        </section>

        <section class="bg-white rounded-3xl border border-gray-100 shadow-sm p-6">
            <div class="flex items-center justify-between gap-4 mb-5">
                <div>
                    <h3 class="text-xl font-extrabold text-gray-900">我的购买记录</h3>
                    <p class="mt-1 text-sm text-gray-500">这里只显示你自己的会员订单记录，方便查看支付和开通状态。</p>
                </div>
            </div>

            <div class="overflow-x-auto">
                <table class="w-full text-sm min-w-[860px]">
                    <thead>
                        <tr class="bg-slate-50 text-slate-600">
                            <th class="px-4 py-3 text-left font-bold rounded-tl-2xl">本地订单号</th>
                            <th class="px-4 py-3 text-left font-bold">会员等级</th>
                            <th class="px-4 py-3 text-center font-bold">金额</th>
                            <th class="px-4 py-3 text-center font-bold">状态</th>
                            <th class="px-4 py-3 text-center font-bold">支付时间</th>
                            <th class="px-4 py-3 text-center font-bold rounded-tr-2xl">开通时间</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($paymentLogs as $log)
                            @php
                                $statusMap = [
                                    'created' => ['text' => '待创建', 'class' => 'bg-slate-100 text-slate-700'],
                                    'pending' => ['text' => '待支付', 'class' => 'bg-amber-100 text-amber-700'],
                                    'paid' => ['text' => '已支付', 'class' => 'bg-emerald-100 text-emerald-700'],
                                    'closed' => ['text' => '已关闭', 'class' => 'bg-gray-100 text-gray-500'],
                                    'failed' => ['text' => '失败', 'class' => 'bg-rose-100 text-rose-700'],
                                ];
                                $status = $statusMap[$log->status] ?? ['text' => $log->status, 'class' => 'bg-slate-100 text-slate-700'];
                            @endphp
                            <tr class="border-t border-gray-100 hover:bg-slate-50/80">
                                <td class="px-4 py-3 font-mono text-xs text-gray-600">{{ $log->order_no }}</td>
                                <td class="px-4 py-3">
                                    <div class="flex items-center gap-2">
                                        <span style="color: {{ $log->vipLevel?->color ?: '#111827' }}">{{ $log->vipLevel?->icon ?: '👑' }}</span>
                                        <span class="font-bold text-gray-900">{{ $log->vip_name }}</span>
                                    </div>
                                </td>
                                <td class="px-4 py-3 text-center font-bold text-rose-600">¥{{ number_format((float) $log->amount, 2) }}</td>
                                <td class="px-4 py-3 text-center"><span class="inline-flex px-2.5 py-1 rounded-full text-xs font-bold {{ $status['class'] }}">{{ $status['text'] }}</span></td>
                                <td class="px-4 py-3 text-center text-gray-500">{{ $log->paid_at?->format('Y-m-d H:i') ?? '未支付' }}</td>
                                <td class="px-4 py-3 text-center text-gray-500">{{ $log->opened_vip_at?->format('Y-m-d H:i') ?? '未开通' }}</td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6" class="px-4 py-12 text-center text-gray-400">暂无会员购买记录，开通后会显示在这里。</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            @if ($paymentLogs->hasPages())
                <div class="mt-5">{{ $paymentLogs->links() }}</div>
            @endif
        </section>
    </div>
@endsection