{{--
    文件功能：用户个人积分流水日志页面
    用户可筛选查看自己的经验、金币、魅力变动历史，按日期倒序排列

    @extends layouts.app
--}}
@extends('layouts.app')

@section('title', '我的积分记录 - 飘落流星')
@section('nav-icon', '📊')
@section('nav-title', '我的积分记录')

@section('content')
    <main class="p-4 sm:p-6 lg:p-8">
        <div class="max-w-4xl mx-auto">

            {{-- 筛选栏 --}}
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 mb-6 flex flex-wrap gap-3 items-center">
                <span class="text-gray-600 text-sm font-medium">筛选：</span>

                {{-- 货币类型 --}}
                <div class="flex gap-2">
                    @foreach(['' => '全部', 'exp' => '⚡ 经验', 'gold' => '💰 金币', 'charm' => '🌸 魅力'] as $val => $label)
                        <a href="{{ route('currency.my-logs', array_merge(request()->query(), ['currency' => $val, 'days' => $days])) }}"
                           class="px-3 py-1 rounded-full text-xs font-medium transition
                               {{ ($currency ?? '') === $val ? 'bg-indigo-600 text-white' : 'bg-gray-100 text-gray-600 hover:bg-indigo-100' }}">
                            {{ $label }}
                        </a>
                    @endforeach
                </div>

                {{-- 日期范围 --}}
                <div class="flex gap-2 ml-auto">
                    @foreach([7 => '7 天', 14 => '14 天', 30 => '30 天'] as $d => $label)
                        <a href="{{ route('currency.my-logs', array_merge(request()->query(), ['days' => $d])) }}"
                           class="px-3 py-1 rounded-full text-xs font-medium transition
                               {{ $days === $d ? 'bg-indigo-600 text-white' : 'bg-gray-100 text-gray-600 hover:bg-indigo-100' }}">
                            {{ $label }}
                        </a>
                    @endforeach
                </div>
            </div>

            {{-- 流水列表 --}}
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
                @if($logs->isEmpty())
                    <div class="p-12 text-center text-gray-400">
                        <div class="text-4xl mb-3">📭</div>
                        <p>暂无积分记录，快去钓鱼或挂机吧！</p>
                    </div>
                @else
                    <table class="w-full text-sm">
                        <thead class="bg-gray-50 border-b border-gray-200 text-gray-600">
                            <tr>
                                <th class="px-4 py-3 text-left">时间</th>
                                <th class="px-4 py-3 text-left">类型</th>
                                <th class="px-4 py-3 text-left">来源</th>
                                <th class="px-4 py-3 text-right">变动</th>
                                <th class="px-4 py-3 text-right">变动后余额</th>
                                <th class="px-4 py-3 text-left">备注</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-100">
                            @foreach($logs as $log)
                                @php
                                    $currencyIcons = ['exp' => '⚡', 'gold' => '💰', 'charm' => '🌸'];
                                    $icon = $currencyIcons[$log->currency] ?? '📌';
                                    $isPositive = $log->amount >= 0;
                                @endphp
                                <tr class="hover:bg-gray-50 transition">
                                    <td class="px-4 py-3 text-gray-500 whitespace-nowrap">
                                        {{ \Carbon\Carbon::parse($log->created_at)->format('m-d H:i') }}
                                    </td>
                                    <td class="px-4 py-3">
                                        {{ $icon }} {{ \App\Services\UserCurrencyService::currencyLabel($log->currency) }}
                                    </td>
                                    <td class="px-4 py-3 text-gray-600">
                                        @php
                                            $sourceLabel = '';
                                            try { $sourceLabel = \App\Enums\CurrencySource::from($log->source)->label(); } catch (\Throwable) { $sourceLabel = $log->source; }
                                        @endphp
                                        {{ $sourceLabel }}
                                    </td>
                                    <td class="px-4 py-3 text-right font-semibold {{ $isPositive ? 'text-green-600' : 'text-red-500' }}">
                                        {{ $isPositive ? '+' : '' }}{{ number_format($log->amount) }}
                                    </td>
                                    <td class="px-4 py-3 text-right text-gray-500">
                                        {{ number_format($log->balance_after) }}
                                    </td>
                                    <td class="px-4 py-3 text-gray-400 text-xs max-w-[160px] truncate">
                                        {{ $log->remark ?: '—' }}
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                @endif
            </div>

            <p class="text-center text-xs text-gray-400 mt-4">最多显示最近 200 条记录</p>
        </div>
    </main>
@endsection
