{% extends "base.html" %}

{% block title %}充值记录 - AI 视界{% endblock %}

{% block content %}
<div class="flex-1 overflow-y-auto p-8 relative">
    <div class="max-w-5xl mx-auto space-y-8">
        <!-- 头部 -->
        <div class="flex items-center justify-between">
            <div class="space-y-1">
                <h1 class="text-3xl font-black text-slate-900 tracking-tight">充值记录</h1>
                <p class="text-slate-500 font-bold text-sm flex items-center gap-2">
                    <i data-lucide="history" class="w-4 h-4"></i>
                    查看您的所有积分充值历史
                </p>
            </div>
            <a href="{{ url_for('auth.buy_page') }}"
                class="btn-primary px-6 py-3 rounded-2xl flex items-center gap-2 shadow-xl shadow-indigo-200">
                <i data-lucide="plus-circle" class="w-5 h-5"></i>
                立即充值
            </a>
        </div>

        <!-- 记录列表 -->
        <div
            class="bg-white/70 backdrop-blur-xl rounded-[2.5rem] border border-slate-200/50 shadow-2xl overflow-hidden">
            <div class="overflow-x-auto">
                <table class="w-full text-left border-collapse">
                    <thead>
                        <tr class="border-b border-slate-100 bg-slate-50/50">
                            <th class="px-8 py-5 text-[10px] font-black text-slate-400 uppercase tracking-widest">订单号
                            </th>
                            <th class="px-8 py-5 text-[10px] font-black text-slate-400 uppercase tracking-widest">积分
                            </th>
                            <th class="px-8 py-5 text-[10px] font-black text-slate-400 uppercase tracking-widest">金额
                            </th>
                            <th class="px-8 py-5 text-[10px] font-black text-slate-400 uppercase tracking-widest">状态
                            </th>
                            <th class="px-8 py-5 text-[10px] font-black text-slate-400 uppercase tracking-widest">支付时间
                            </th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100">
                        {% if orders %}
                        {% for order in orders %}
                        <tr class="hover:bg-slate-50/50 transition-colors group">
                            <td class="px-8 py-5">
                                <div class="flex flex-col">
                                    <span class="text-sm font-bold text-slate-700">{{ order.out_trade_no }}</span>
                                    <span class="text-[10px] text-slate-400 font-mono">Ali: {{ order.trade_no or '-'
                                        }}</span>
                                </div>
                            </td>
                            <td class="px-8 py-5">
                                <div class="flex items-center gap-2">
                                    <div
                                        class="w-8 h-8 bg-amber-50 text-amber-500 rounded-lg flex items-center justify-center">
                                        <i data-lucide="zap" class="w-4 h-4"></i>
                                    </div>
                                    <span class="text-sm font-black text-slate-900">+{{ order.points }}</span>
                                </div>
                            </td>
                            <td class="px-8 py-5">
                                <span class="text-sm font-bold text-slate-600">¥{{ order.amount }}</span>
                            </td>
                            <td class="px-8 py-5">
                                {% if order.status == 'PAID' %}
                                <span
                                    class="px-3 py-1 bg-emerald-50 text-emerald-600 text-[10px] font-black rounded-lg border border-emerald-100">已完成</span>
                                {% elif order.status == 'PENDING' %}
                                <span
                                    class="px-3 py-1 bg-amber-50 text-amber-600 text-[10px] font-black rounded-lg border border-amber-100">待支付</span>
                                {% else %}
                                <span
                                    class="px-3 py-1 bg-slate-50 text-slate-400 text-[10px] font-black rounded-lg border border-slate-100">已取消</span>
                                {% endif %}
                            </td>
                            <td class="px-8 py-5">
                                <span class="text-xs font-bold text-slate-400">
                                    {% if order.paid_at_bj %}
                                    {{ order.paid_at_bj.strftime('%Y-%m-%d %H:%M') }}
                                    {% else %}
                                    -
                                    {% endif %}
                                </span>
                            </td>
                        </tr>
                        {% endfor %}
                        {% else %}
                        <tr>
                            <td colspan="5" class="px-8 py-20 text-center">
                                <div class="flex flex-col items-center gap-4 opacity-20">
                                    <i data-lucide="inbox" class="w-16 h-16"></i>
                                    <p class="font-black text-xl">暂无充值记录</p>
                                </div>
                            </td>
                        </tr>
                        {% endif %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
{% endblock %}