{% extends "base.html" %}

{% block title %}充值与邀请 - AI 视界{% endblock %}

{% block content %}
<div class="w-full h-full overflow-y-auto p-4 lg:p-10 custom-scrollbar bg-slate-50/20">
    <div class="max-w-6xl w-full mx-auto flex flex-col space-y-12 pb-20">

        <!-- Top Header -->
        <div class="flex items-center justify-between shrink-0">
            <div class="flex items-center gap-5">
                <div
                    class="w-14 h-14 bg-gradient-to-br from-indigo-500 to-indigo-700 text-white rounded-2xl flex items-center justify-center shadow-2xl shadow-indigo-100">
                    <i data-lucide="crown" class="w-8 h-8"></i>
                </div>
                <div>
                    <h1 class="text-3xl font-black text-slate-900 tracking-tight">充值中心</h1>
                    <p class="text-slate-400 text-xs font-black uppercase tracking-widest opacity-60">Recharge & Invite
                    </p>
                </div>
            </div>
            <div class="flex gap-2">
                {% if is_admin %}
                <a href="/admin/orders"
                    class="p-3 bg-white/50 text-indigo-600 border border-indigo-100 rounded-2xl hover:bg-white transition-colors flex items-center gap-2 font-bold text-xs">
                    <i data-lucide="shield-check" class="w-4 h-4"></i>
                    管理后台
                </a>
                {% endif %}
                <button onclick="window.history.back()"
                    class="p-3 text-slate-300 hover:text-slate-600 transition-colors">
                    <i data-lucide="x" class="w-7 h-7"></i>
                </button>
            </div>
        </div>

        <!-- 1. Recharge Packages Section -->
        <div class="space-y-6">
            <div class="flex items-center justify-between px-2">
                <h3 class="text-sm font-black text-slate-900 tracking-widest uppercase italic">选择充值套餐</h3>
                <div class="flex items-center gap-2">
                    <div class="w-2 h-2 bg-emerald-500 rounded-full animate-pulse"></div>
                    <span class="text-[9px] font-black text-slate-400">即时到账</span>
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                <!-- Package 50 -->
                <div onclick="submitRecharge('50')"
                    class="bg-white p-6 rounded-[2.5rem] border border-slate-100 shadow-xl shadow-slate-200/30 hover:border-indigo-400 cursor-pointer transition-all group relative overflow-hidden">
                    <div class="flex justify-between items-start mb-4 relative z-10">
                        <div
                            class="w-10 h-10 bg-slate-50 rounded-xl flex items-center justify-center text-slate-400 group-hover:text-indigo-600 transition-colors">
                            <i data-lucide="zap" class="w-5 h-5"></i>
                        </div>
                        <span class="text-lg font-black text-slate-900">¥5.00</span>
                    </div>
                    <div class="relative z-10">
                        <h5 class="text-xl font-black text-slate-800">50 <small
                                class="text-[10px] opacity-40">Pts</small></h5>
                        <p class="text-[9px] font-bold text-slate-400 mt-1">个人尝鲜包</p>
                    </div>
                </div>

                <!-- Package 200 (Hot) -->
                <div onclick="submitRecharge('200')"
                    class="bg-white p-6 rounded-[2.5rem] border-2 border-indigo-500 shadow-xl shadow-indigo-100/40 hover:scale-105 cursor-pointer transition-all relative ring-4 ring-indigo-50/50">
                    <div
                        class="absolute -top-3 -right-3 px-3 py-1 bg-indigo-600 text-white rounded-full text-[9px] font-black shadow-lg z-20">
                        HOT</div>
                    <div class="flex justify-between items-start mb-4">
                        <div class="w-10 h-10 bg-indigo-50 rounded-xl flex items-center justify-center text-indigo-600">
                            <i data-lucide="zap" class="w-5 h-5"></i>
                        </div>
                        <span class="text-lg font-black text-slate-900">¥20.00</span>
                    </div>
                    <h5 class="text-xl font-black text-slate-800">200 <small class="text-[10px] opacity-40">Pts</small>
                    </h5>
                    <p class="text-[9px] font-bold text-indigo-500 mt-1 uppercase">全站最受欢迎</p>
                </div>

                <!-- Package 1000 -->
                <div onclick="submitRecharge('1000')"
                    class="bg-white p-6 rounded-[2.5rem] border border-slate-100 shadow-xl shadow-slate-200/30 hover:border-indigo-400 cursor-pointer transition-all group">
                    <div class="flex justify-between items-start mb-4">
                        <div
                            class="w-10 h-10 bg-slate-50 rounded-xl flex items-center justify-center text-slate-400 group-hover:text-indigo-600 transition-colors">
                            <i data-lucide="zap" class="w-5 h-5"></i>
                        </div>
                        <span class="text-lg font-black text-slate-900">¥100.00</span>
                    </div>
                    <h5 class="text-xl font-black text-slate-800">1000 <small class="text-[10px] opacity-40">Pts</small>
                    </h5>
                    <p class="text-[9px] font-bold text-slate-400 mt-1">工作室/创作包</p>
                </div>

                <!-- Package 5000 -->
                <div onclick="submitRecharge('5000')"
                    class="bg-slate-900 p-6 rounded-[2.5rem] border border-slate-800 shadow-2xl hover:bg-slate-800 cursor-pointer transition-all group text-white">
                    <div class="flex justify-between items-start mb-4">
                        <div class="w-10 h-10 bg-white/10 rounded-xl flex items-center justify-center text-indigo-400">
                            <i data-lucide="crown" class="w-5 h-5"></i>
                        </div>
                        <span class="text-lg font-black">¥500.00</span>
                    </div>
                    <h5 class="text-xl font-black">5000 <small class="text-[10px] opacity-40">Pts</small></h5>
                    <p class="text-[9px] font-bold text-indigo-300 mt-1">旗舰版海量包</p>
                </div>
            </div>

            <form id="rechargeForm" action="/payment/create" method="POST" class="hidden">
                <input type="hidden" name="package_id" id="packageIdInput">
            </form>
        </div>

        <!-- 2. Invitation Section -->
        <div id="invite-section"
            class="bg-white rounded-[3rem] shadow-xl shadow-slate-200/50 border border-slate-100 overflow-hidden relative">
            <div class="absolute top-0 right-0 p-6 opacity-5">
                <i data-lucide="gift" class="w-64 h-64"></i>
            </div>

            <div class="p-10 relative z-10 flex flex-col md:flex-row items-center gap-12">
                <div class="flex-1 space-y-6">
                    <div>
                        <h4 class="text-xl font-black text-slate-900 tracking-tight flex items-center gap-3">
                            <span class="text-indigo-600">邀请好友</span> 赚取佣金
                        </h4>
                        <p class="text-sm font-bold text-slate-400 mt-2 leading-relaxed">
                            每成功邀请一位好友注册，您将获得其前 3 次充值金额的 <span class="text-indigo-600 text-base">10%</span>
                            等值积分奖励。实时到账，无上限。
                        </p>
                    </div>

                    <div
                        class="bg-slate-50 border border-slate-100 p-6 rounded-[2rem] flex flex-col sm:flex-row items-center gap-6">
                        <div class="flex-1 w-full space-y-1">
                            <p class="text-[9px] font-black text-slate-400 uppercase tracking-widest">我的专属邀请码</p>
                            <div class="flex items-center gap-4">
                                <span id="myInviteCode"
                                    class="text-3xl font-black text-indigo-900 tracking-widest cursor-pointer"
                                    onclick="copyInviteLink()" title="点击复制链接">...</span>
                                <button onclick="copyInviteLink()"
                                    class="p-2 bg-white border border-slate-200 rounded-xl hover:text-indigo-600 hover:border-indigo-200 transition-all">
                                    <i data-lucide="link" class="w-4 h-4"></i>
                                </button>
                            </div>
                        </div>
                        <div class="h-10 w-px bg-slate-200 hidden sm:block"></div>
                        <div class="flex gap-8">
                            <div class="text-center">
                                <p class="text-[9px] font-black text-slate-400">已邀请</p>
                                <p id="myInvitedCount" class="text-xl font-black text-slate-800">0</p>
                            </div>
                            <div class="text-center">
                                <p class="text-[9px] font-black text-slate-400">累计获取</p>
                                <p id="myTotalRewards" class="text-xl font-black text-amber-500">0</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Illustration or Right Side -->
                <div class="hidden md:flex items-center justify-center">
                    <div
                        class="w-20 h-20 bg-indigo-50 rounded-full flex items-center justify-center text-indigo-500 animate-bounce">
                        <i data-lucide="gift" class="w-8 h-8"></i>
                    </div>
                </div>
            </div>
        </div>

        <!-- 3. Recharge History (Order List) -->
        <div class="space-y-6 pt-6">
            <h3 class="text-sm font-black text-slate-900 tracking-widest uppercase italic px-2">最近充值记录</h3>

            <div class="bg-white rounded-[2.5rem] shadow-sm border border-slate-100 overflow-hidden">
                <table class="w-full text-left">
                    <thead>
                        <tr class="bg-slate-50/50 text-[10px] font-black text-slate-400 uppercase tracking-widest">
                            <th class="px-8 py-5">订单信息</th>
                            <th class="px-8 py-5">积分/金额</th>
                            <th class="px-8 py-5">状态</th>
                            <th class="px-8 py-5">时间</th>
                            <th class="px-8 py-5">操作</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-50 text-sm font-bold text-slate-600">
                        {% if personal_orders %}
                        {% for order in personal_orders %}
                        <tr class="hover:bg-slate-50/30 transition-colors">
                            <td class="px-8 py-5">
                                <div class="flex flex-col">
                                    <span class="text-xs text-slate-900">{{ 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">
                                    <span class="text-indigo-600">+{{ order.points }} Pts</span>
                                    <span class="text-[10px] text-slate-400">(¥{{ order.amount }})</span>
                                </div>
                            </td>
                            <td class="px-8 py-5">
                                {% if order.status == 'PAID' %}
                                <span
                                    class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg bg-emerald-50 text-emerald-600 text-[10px] font-black">
                                    <span class="w-1.5 h-1.5 bg-emerald-500 rounded-full"></span> 已完成
                                </span>
                                {% elif order.status == 'PENDING' %}
                                <span
                                    class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg bg-amber-50 text-amber-600 text-[10px] font-black">
                                    <span class="w-1.5 h-1.5 bg-amber-500 rounded-full animate-pulse"></span> 待支付
                                </span>
                                {% else %}
                                <span class="text-slate-400 text-[10px]">已取消</span>
                                {% endif %}
                            </td>
                            <td class="px-8 py-5 text-slate-400 text-xs">
                                {{ order.paid_at_bj.strftime('%Y-%m-%d %H:%M') if order.paid_at_bj else
                                order.created_at_bj.strftime('%Y-%m-%d %H:%M') }}
                            </td>
                            <td class="px-8 py-5">
                                <a href="/admin/orders/{{ order.id }}"
                                    class="w-7 h-7 bg-slate-50 text-slate-400 hover:bg-indigo-50 hover:text-indigo-600 rounded-lg flex items-center justify-center transition-all">
                                    <i data-lucide="eye" class="w-3.5 h-3.5"></i>
                                </a>
                            </td>
                        </tr>
                        {% endfor %}
                        {% else %}
                        <tr>
                            <td colspan="5" class="px-8 py-16 text-center text-slate-300 italic">
                                暂无充值记录
                            </td>
                        </tr>
                        {% endif %}
                    </tbody>
                </table>
            </div>

            {% if personal_orders|length >= 10 %}
            <div class="text-center pt-2">
                <a href="/recharge_history" class="text-xs font-bold text-indigo-500 hover:text-indigo-600">查看更多记录
                    -></a>
            </div>
            {% endif %}
        </div>

    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    // --- Recharge Logic ---
    function submitRecharge(pkgId) {
        document.getElementById('packageIdInput').value = pkgId;
        document.getElementById('rechargeForm').submit();
    }

    // --- Invite Logic ---
    async function loadInviteStats() {
        try {
            const r = await fetch('/api/auth/invite_stats');
            const d = await r.json();
            if (d.invite_code) {
                document.getElementById('myInviteCode').innerText = d.invite_code;
                document.getElementById('myInvitedCount').innerText = d.invited_count;
                document.getElementById('myTotalRewards').innerText = d.total_rewards;
            }
        } catch (e) { console.error('加载邀请统计失败', e); }
    }

    function copyInviteLink() {
        const code = document.getElementById('myInviteCode').innerText;
        if (code === '...') return;

        const link = `${window.location.origin}/login?invite_code=${code}`;
        navigator.clipboard.writeText(link).then(() => {
            showToast('专属邀请链接已复制', 'success');
        });
    }

    // Init
    document.addEventListener('DOMContentLoaded', () => {
        loadInviteStats();
    });
</script>
{% endblock %}