{% extends "base.html" %}

{% block title %}订单详情 - 管理后台{% endblock %}

{% block content %}
<div class="flex-1 overflow-y-auto p-8 relative">
    <div class="max-w-4xl mx-auto space-y-8">
        <!-- 头部导航 -->
        <div class="flex items-center justify-between">
            <div class="flex items-center gap-4">
                <a href="/admin/orders" onclick="history.back(); return false;"
                    class="w-10 h-10 bg-white border border-slate-200 rounded-xl flex items-center justify-center text-slate-500 hover:text-indigo-600 transition-colors">
                    <i data-lucide="arrow-left" class="w-5 h-5"></i>
                </a>
                <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="file-text" class="w-4 h-4"></i>
                        订单号: <span id="outTradeNo">...</span>
                    </p>
                </div>
            </div>
            <div id="statusBadgeContainer">
                <!-- Status badge will be injected here -->
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            <!-- 左侧：主要信息 -->
            <div class="md:col-span-2 space-y-8">
                <!-- 订单商品信息 -->
                <div
                    class="bg-white/70 backdrop-blur-xl rounded-[2.5rem] border border-slate-200/50 shadow-2xl p-8 space-y-6">
                    <div class="flex items-center justify-between">
                        <h2 class="text-lg font-black text-slate-900 flex items-center gap-2">
                            <i data-lucide="package" class="w-5 h-5 text-indigo-500"></i>
                            商品信息
                        </h2>
                    </div>

                    <div class="space-y-4">
                        <div
                            class="flex items-center justify-between p-6 bg-slate-50 rounded-3xl border border-slate-100">
                            <div class="flex items-center gap-4">
                                <div
                                    class="w-14 h-14 bg-amber-100 rounded-2xl flex items-center justify-center text-amber-600 shadow-sm">
                                    <i data-lucide="zap" class="w-7 h-7"></i>
                                </div>
                                <div>
                                    <h3 class="font-black text-slate-900">账户充值积分</h3>
                                    <p class="text-xs text-slate-400 font-bold">虚拟商品 · 即时到账</p>
                                </div>
                            </div>
                            <div class="text-right">
                                <div class="text-xl font-black text-slate-900">+<span id="orderPoints">0</span> Pts
                                </div>
                                <div class="text-sm font-bold text-slate-400">¥<span id="orderAmount">0.00</span></div>
                            </div>
                        </div>

                        <div class="pt-4 border-t border-slate-100 space-y-3">
                            <div class="flex justify-between text-sm font-bold">
                                <span class="text-slate-400">商品总额</span>
                                <span class="text-slate-600">¥<span id="orderAmount2">0.00</span></span>
                            </div>
                            <div class="flex justify-between text-sm font-bold">
                                <span class="text-slate-400">优惠金额</span>
                                <span class="text-emerald-500">-¥0.00</span>
                            </div>
                            <div class="flex justify-between items-center pt-2">
                                <span class="text-lg font-black text-slate-900">实付款</span>
                                <span class="text-2xl font-black text-indigo-600">¥<span
                                        id="orderTotal">0.00</span></span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 支付信息 -->
                <div
                    class="bg-white/70 backdrop-blur-xl rounded-[2.5rem] border border-slate-200/50 shadow-2xl p-8 space-y-6">
                    <h2 class="text-lg font-black text-slate-900 flex items-center gap-2">
                        <i data-lucide="credit-card" class="w-5 h-5 text-indigo-500"></i>
                        支付信息
                    </h2>

                    <div class="grid grid-cols-2 gap-8">
                        <div class="space-y-1">
                            <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest">支付渠道</label>
                            <div class="flex items-center gap-2 font-bold text-slate-700">
                                支付宝 (Alipay)
                            </div>
                        </div>
                        <div class="space-y-1">
                            <label
                                class="text-[10px] font-black text-slate-400 uppercase tracking-widest">支付宝流水号</label>
                            <p id="tradeNo" class="font-mono text-xs font-bold text-slate-700">--</p>
                        </div>
                        <div class="space-y-1">
                            <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest">创建时间</label>
                            <p id="createdAt" class="text-sm font-bold text-slate-700">--</p>
                        </div>
                        <div class="space-y-1">
                            <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest">支付时间</label>
                            <p id="paidAt" class="text-sm font-bold text-slate-700">--</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 右侧：买家信息 -->
            <div class="space-y-8">
                <div
                    class="bg-white/70 backdrop-blur-xl rounded-[2.5rem] border border-slate-200/50 shadow-2xl p-8 space-y-6">
                    <h2 class="text-lg font-black text-slate-900 flex items-center gap-2">
                        <i data-lucide="user" class="w-5 h-5 text-indigo-500"></i>
                        买家信息
                    </h2>

                    <div class="flex flex-col items-center text-center space-y-4 pb-4">
                        <div
                            class="w-20 h-20 bg-indigo-50 rounded-[2rem] flex items-center justify-center text-indigo-600 shadow-inner">
                            <i data-lucide="user" class="w-10 h-10"></i>
                        </div>
                        <div>
                            <h3 id="userPhone" class="text-xl font-black text-slate-900">--</h3>
                            <div class="flex items-center justify-center gap-2 mt-1">
                                <span id="userRole"
                                    class="px-2 py-0.5 bg-slate-100 text-slate-500 text-[10px] font-black rounded-md border border-slate-200 uppercase">--</span>
                                <span id="userBanned"
                                    class="hidden px-2 py-0.5 bg-rose-50 text-rose-500 text-[10px] font-black rounded-md border border-rose-100 uppercase">已封禁</span>
                            </div>
                        </div>
                    </div>

                    <div class="pt-6 border-t border-slate-100 space-y-4">
                        <div class="flex justify-between items-center">
                            <span class="text-xs font-bold text-slate-400">用户 ID</span>
                            <span id="userId" class="text-sm font-black text-slate-700">#0</span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-xs font-bold text-slate-400">注册时间</span>
                            <span id="userCreatedAt" class="text-sm font-black text-slate-700 text-right">--</span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-xs font-bold text-slate-400">当前余额</span>
                            <div class="flex items-center gap-1">
                                <i data-lucide="zap" class="w-3 h-3 text-amber-500"></i>
                                <span id="userCurrentPoints" class="text-sm font-black text-slate-900">0</span>
                            </div>
                        </div>
                    </div>

                    <a id="viewUserBtn" href="#"
                        class="hidden w-full py-3 bg-slate-50 hover:bg-slate-100 text-slate-500 hover:text-indigo-600 transition-all rounded-2xl text-center text-xs font-black border border-slate-100 mt-4">
                        查看用户详细档案
                    </a>
                </div>

                <!-- 订单备注 (示例) -->
                <div class="bg-indigo-600 rounded-[2.5rem] p-8 text-white space-y-4 shadow-2xl shadow-indigo-200">
                    <div class="flex items-center gap-2">
                        <i data-lucide="info" class="w-5 h-5 text-indigo-200"></i>
                        <h3 class="font-black">系统提示</h3>
                    </div>
                    <p class="text-xs text-indigo-100 font-medium leading-relaxed">
                        该订单由系统自动处理并完成积分发放。如有异常，请及时联系技术人员查看服务器日志。
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    const orderId = window.location.pathname.split('/').pop();

    async function loadOrderDetail() {
        try {
            const r = await fetch(`/api/admin/orders/${orderId}`);
            if (!r.ok) throw new Error('订单未找到');
            const data = await r.json();
            renderDetail(data);
        } catch (e) {
            showToast('加载详情失败: ' + e.message, 'error');
            setTimeout(() => history.back(), 2000);
        }
    }

    function renderDetail(data) {
        const { order, buyer, current_is_admin } = data;

        // 订单基本信息
        document.getElementById('outTradeNo').textContent = order.out_trade_no;
        document.getElementById('orderPoints').textContent = order.points;
        document.getElementById('orderAmount').textContent = order.amount.toFixed(2);
        document.getElementById('orderAmount2').textContent = order.amount.toFixed(2);
        document.getElementById('orderTotal').textContent = order.amount.toFixed(2);
        document.getElementById('tradeNo').textContent = order.trade_no || '--';
        document.getElementById('createdAt').textContent = order.created_at;
        document.getElementById('paidAt').textContent = order.paid_at || '--';

        // 状态徽章
        const badgeContainer = document.getElementById('statusBadgeContainer');
        if (order.status === 'PAID') {
            badgeContainer.innerHTML = '<span class="px-5 py-2 bg-emerald-50 text-emerald-600 text-sm font-black rounded-xl border border-emerald-100 shadow-sm shadow-emerald-50 flex items-center gap-2"><i data-lucide="check-circle" class="w-4 h-4"></i>已完成</span>';
        } else if (order.status === 'PENDING') {
            badgeContainer.innerHTML = '<span class="px-5 py-2 bg-amber-50 text-amber-600 text-sm font-black rounded-xl border border-amber-100 shadow-sm shadow-amber-50 flex items-center gap-2"><i data-lucide="clock" class="w-4 h-4"></i>待支付</span>';
        } else {
            badgeContainer.innerHTML = '<span class="px-5 py-2 bg-slate-50 text-slate-400 text-sm font-black rounded-xl border border-slate-100 shadow-sm shadow-slate-50 flex items-center gap-2"><i data-lucide="x-circle" class="w-4 h-4"></i>已取消</span>';
        }

        // 买家信息
        document.getElementById('userPhone').textContent = buyer.phone;
        document.getElementById('userRole').textContent = buyer.role;
        document.getElementById('userId').textContent = '#' + buyer.id;
        document.getElementById('userCreatedAt').textContent = buyer.created_at;
        document.getElementById('userCurrentPoints').textContent = buyer.current_points;

        if (buyer.is_banned) {
            document.getElementById('userBanned').classList.remove('hidden');
        }

        // 权限相关
        const viewBtn = document.getElementById('viewUserBtn');
        if (current_is_admin) {
            viewBtn.classList.remove('hidden');
            viewBtn.href = `/api/admin/users?q=${buyer.phone}`;
        }

        lucide.createIcons();
    }

    loadOrderDetail();
</script>
{% endblock %}