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

    @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">
            @php
                $selectedSourceCount = count($selectedSources ?? []);
            @endphp

            {{-- 筛选栏 --}}
            <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(['' => '全部', 'income' => '收入', 'expense' => '支出'] as $val => $label)
                        <a href="{{ route('currency.my-logs', array_merge(request()->query(), ['direction' => $val, 'days' => $days])) }}"
                           class="px-3 py-1 rounded-full text-xs font-medium transition
                               {{ ($direction ?? '') === $val ? 'bg-green-600 text-white' : 'bg-gray-100 text-gray-600 hover:bg-green-100' }}">
                            {{ $label }}
                        </a>
                    @endforeach
                </div>

                {{-- 货币类型 --}}
                <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>

                {{-- 来源筛选 --}}
                <form method="GET" action="{{ route('currency.my-logs') }}" class="relative">
                    <input type="hidden" name="direction" value="{{ $direction ?? '' }}">
                    <input type="hidden" name="currency" value="{{ $currency ?? '' }}">
                    <input type="hidden" name="days" value="{{ $days }}">

                    <details class="relative">
                        <summary class="list-none cursor-pointer select-none px-3 py-1 rounded-full text-xs font-medium transition bg-gray-100 text-gray-600 hover:bg-indigo-100">
                            来源：{{ $selectedSourceCount > 0 ? '已选 '.$selectedSourceCount.' 项' : '全部' }} ▾
                        </summary>

                        <div class="absolute left-0 z-20 mt-2 flex w-72 max-h-80 flex-col rounded-lg border border-gray-200 bg-white shadow-lg">
                            <div class="grid max-h-60 gap-1 overflow-y-auto p-3">
                                @foreach($sourceOptions as $sourceOption)
                                    <label class="flex items-center gap-2 rounded-md px-2 py-1.5 text-xs text-gray-600 hover:bg-gray-50">
                                        <input type="checkbox" name="sources[]" value="{{ $sourceOption->value }}"
                                               class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
                                               @checked(in_array($sourceOption->value, $selectedSources ?? [], true))>
                                        <span class="truncate" title="{{ $sourceOption->label() }}">{{ $sourceOption->label() }}</span>
                                    </label>
                                @endforeach
                            </div>

                            <div class="sticky bottom-0 flex items-center justify-between border-t border-gray-100 bg-white px-3 py-3">
                                <a href="{{ route('currency.my-logs', request()->except('sources')) }}"
                                   class="text-xs text-gray-400 hover:text-gray-600">清空来源</a>
                                <button type="submit"
                                        class="rounded-md bg-indigo-600 px-3 py-1.5 text-xs font-semibold text-white hover:bg-indigo-700">
                                    应用
                                </button>
                            </div>
                        </div>
                    </details>
                </form>

                {{-- 日期范围 --}}
                <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"
                                        title="{{ $log->remark ?: '—' }}">
                                        {{ $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