import { onMounted, ref } from 'vue';
import { adminHeader } from './AdminHeader.js';

export default {
    setup() {
        const orders = ref([]);
        const stats = ref({ totalOrders: 0, paidOrders: 0, pendingOrders: 0, refundedOrders: 0, revenueUsdCents: 0 });
        const total = ref(0);
        const loading = ref(true);
        const error = ref('');
        const filters = ref({ status: '', provider: '', search: '' });

        const load = async () => {
            loading.value = true;
            error.value = '';
            const params = new URLSearchParams({ page: '1', pageSize: '100' });
            Object.entries(filters.value).forEach(([key, value]) => value && params.set(key, value));
            try {
                const [orderResponse, statsResponse] = await Promise.all([
                    fetch('/admin/api/orders?' + params.toString(), { credentials: 'same-origin' }),
                    fetch('/admin/api/orders/stats', { credentials: 'same-origin' }),
                ]);
                if (!orderResponse.ok || !statsResponse.ok) throw new Error('加载订单失败');
                const orderPayload = await orderResponse.json();
                const statsPayload = await statsResponse.json();
                orders.value = orderPayload.data.list || [];
                total.value = orderPayload.data.total || 0;
                stats.value = statsPayload.data;
            } catch (reason) {
                error.value = reason instanceof Error ? reason.message : '加载订单失败';
            } finally {
                loading.value = false;
            }
        };

        const money = order => order.currency === 'USD'
            ? '$' + (order.amount / 100).toFixed(2)
            : order.providerAmount + ' ' + order.currency;
        const dateTime = value => value ? new Date(value).toLocaleString('zh-CN', { hour12: false }) : '-';
        const statusText = status => ({ pending: '待支付', paid: '已支付', cancelled: '已关闭', refunded: '已退款' }[status] || status);
        const statusClass = status => ({
            paid: 'bg-green-100 text-green-800', pending: 'bg-amber-100 text-amber-800',
            cancelled: 'bg-gray-100 text-gray-700', refunded: 'bg-blue-100 text-blue-800',
        }[status] || 'bg-gray-100 text-gray-700');
        const providerText = provider => ({ stripe: 'Stripe', binance_pay: 'Binance Pay' }[provider] || provider || '-');

        onMounted(load);
        return { orders, stats, total, loading, error, filters, load, money, dateTime, statusText, statusClass, providerText };
    },
    template: `
        <div class="min-h-screen bg-gray-100">
            ${adminHeader('orders')}
            <main class="max-w-7xl mx-auto py-8 px-4 sm:px-6 lg:px-8">
                <div class="grid grid-cols-2 lg:grid-cols-5 gap-4 mb-6">
                    <div class="bg-white p-4 rounded-lg shadow-sm"><p class="text-xs text-gray-500">报告订单</p><b class="text-2xl">{{ stats.totalOrders }}</b></div>
                    <div class="bg-white p-4 rounded-lg shadow-sm"><p class="text-xs text-gray-500">已支付</p><b class="text-2xl text-green-700">{{ stats.paidOrders }}</b></div>
                    <div class="bg-white p-4 rounded-lg shadow-sm"><p class="text-xs text-gray-500">待支付</p><b class="text-2xl text-amber-700">{{ stats.pendingOrders }}</b></div>
                    <div class="bg-white p-4 rounded-lg shadow-sm"><p class="text-xs text-gray-500">已退款</p><b class="text-2xl text-blue-700">{{ stats.refundedOrders }}</b></div>
                    <div class="bg-white p-4 rounded-lg shadow-sm"><p class="text-xs text-gray-500">Stripe 收入</p><b class="text-2xl">\${{ (stats.revenueUsdCents / 100).toFixed(2) }}</b></div>
                </div>
                <div class="bg-white shadow rounded-lg">
                    <div class="p-5 border-b flex flex-col lg:flex-row gap-3 lg:items-center lg:justify-between">
                        <div><h2 class="text-lg font-medium">PC 八字报告订单</h2><p class="text-xs text-gray-500 mt-1">仅显示 PC 商业版八字报告订单，共 {{ total }} 笔</p></div>
                        <div class="flex flex-wrap gap-2">
                            <input v-model="filters.search" @keyup.enter="load" class="border rounded px-3 py-2 text-sm" placeholder="订单号 / 邮箱 / 报告号" />
                            <select v-model="filters.provider" @change="load" class="border rounded px-3 py-2 text-sm"><option value="">全部渠道</option><option value="stripe">Stripe</option><option value="binance_pay">Binance Pay</option></select>
                            <select v-model="filters.status" @change="load" class="border rounded px-3 py-2 text-sm"><option value="">全部状态</option><option value="pending">待支付</option><option value="paid">已支付</option><option value="cancelled">已关闭</option><option value="refunded">已退款</option></select>
                            <button @click="load" class="bg-red-700 text-white rounded px-4 py-2 text-sm">查询</button>
                        </div>
                    </div>
                    <div v-if="error" class="m-5 p-3 bg-red-50 text-red-700 text-sm">{{ error }}</div>
                    <div class="overflow-x-auto">
                        <table class="min-w-full divide-y divide-gray-200">
                            <thead class="bg-gray-50"><tr><th class="px-4 py-3 text-left text-xs text-gray-500">订单 / 报告</th><th class="px-4 py-3 text-left text-xs text-gray-500">客户</th><th class="px-4 py-3 text-left text-xs text-gray-500">渠道</th><th class="px-4 py-3 text-left text-xs text-gray-500">金额</th><th class="px-4 py-3 text-left text-xs text-gray-500">状态</th><th class="px-4 py-3 text-left text-xs text-gray-500">渠道交易号</th><th class="px-4 py-3 text-left text-xs text-gray-500">时间</th></tr></thead>
                            <tbody class="divide-y divide-gray-100">
                                <tr v-if="loading"><td colspan="7" class="p-10 text-center text-sm text-gray-500">正在加载订单...</td></tr>
                                <tr v-else-if="orders.length === 0"><td colspan="7" class="p-10 text-center text-sm text-gray-500">暂无符合条件的订单</td></tr>
                                <tr v-for="order in orders" :key="order.id" class="hover:bg-gray-50">
                                    <td class="px-4 py-4 text-xs"><b class="block text-gray-900">{{ order.orderNo }}</b><span class="block text-gray-500">{{ order.reportId || '-' }}</span><code v-if="order.accessCode" class="block mt-1 text-red-700">{{ order.accessCode }}</code></td>
                                    <td class="px-4 py-4 text-sm">{{ order.customerEmail || '-' }}</td>
                                    <td class="px-4 py-4 text-sm">{{ providerText(order.provider) }}</td>
                                    <td class="px-4 py-4 text-sm font-medium">{{ money(order) }}</td>
                                    <td class="px-4 py-4"><span :class="statusClass(order.status)" class="px-2 py-1 rounded-full text-xs font-medium">{{ statusText(order.status) }}</span></td>
                                    <td class="px-4 py-4 text-xs text-gray-500 max-w-xs truncate" :title="order.providerTransactionId">{{ order.providerTransactionId || order.providerOrderId || '-' }}</td>
                                    <td class="px-4 py-4 text-xs text-gray-500"><span class="block">创建 {{ dateTime(order.createdAt) }}</span><span class="block">支付 {{ dateTime(order.payTime) }}</span></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </main>
        </div>
    `,
};