<script setup>
import { ref, computed, onMounted, watch } from "vue";
import { useRoute } from "vue-router";
import { userApi } from "../../api/user";
import { tenantPath } from "../../utils/tenant";

const route = useRoute();
const tenantRoute = (path) => tenantPath(path, route);
const currentTab = ref("all");
const tabs = [
  { label: "全部订单", value: "all" },
  { label: "待支付", value: "created" }, // Backend uses 'created' for unpaid? Check consts.
  // Backend OrderStatusCreated = "created". OrderStatusPaid = "paid".
  // So 'unpaid' in UI should map to 'created' in backend?
  // Let's check `consts.gen.go`.
  { label: "已完成", value: "paid" },
  { label: "退款/售后", value: "refunded" }, // or 'refunding'
];

const orders = ref([]);

const fetchOrders = async () => {
  try {
    let status = currentTab.value;
    // Map UI tab to Backend Status if needed
    // Assuming backend accepts 'all', 'created', 'paid', 'refunded'.
    const res = await userApi.getOrders(status);
    orders.value = res || [];
  } catch (e) {
    console.error(e);
  }
};

onMounted(() => {
  fetchOrders();
});

watch(currentTab, () => {
  fetchOrders();
});

// Use orders directly (filtered by backend)
const filteredOrders = computed(() => orders.value);

const statusColor = (status) => {
  const map = {
    created: "text-orange-600",
    paid: "text-blue-600",
    completed: "text-green-600",
    refunding: "text-purple-600",
    refunded: "text-slate-500",
    cancelled: "text-slate-400",
  };
  return map[status] || "text-slate-500";
};
</script>

<template>
  <div
    class="bg-white rounded-xl shadow-sm border border-slate-100 min-h-[600px]"
  >
    <!-- Header & Tabs -->
    <div class="px-6 pt-6 border-b border-slate-100">
      <h1 class="text-2xl font-bold text-slate-900 mb-6">我的订单</h1>
      <div class="flex items-center gap-8">
        <button
          v-for="tab in tabs"
          :key="tab.value"
          @click="currentTab = tab.value"
          class="pb-4 text-sm font-medium transition-colors border-b-2 cursor-pointer focus:outline-none"
          :class="
            currentTab === tab.value
              ? 'text-primary-600 border-primary-600'
              : 'text-slate-500 border-transparent hover:text-slate-700'
          "
        >
          {{ tab.label }}
        </button>
      </div>
    </div>

    <!-- Order List -->
    <div class="p-6 space-y-6">
      <!-- Search/Filter (Optional) -->
      <div class="flex justify-end mb-4">
        <div class="relative w-64">
          <i
            class="pi pi-search absolute left-3 top-1/2 -translate-y-1/2 text-slate-400"
          ></i>
          <input
            type="text"
            placeholder="搜索订单号或商品..."
            class="w-full pl-10 pr-4 py-2 border border-slate-200 rounded-lg text-sm focus:outline-none focus:border-primary-500 transition-colors"
          />
        </div>
      </div>

      <!-- List Items -->
      <div v-if="filteredOrders.length > 0" class="space-y-6">
        <div
          v-for="order in filteredOrders"
          :key="order.id"
          class="border border-slate-200 rounded-lg overflow-hidden hover:border-slate-300 hover:shadow-sm transition-all group"
        >
          <!-- Order Header -->
          <div
            class="bg-slate-50 px-4 py-3 flex items-center justify-between text-sm text-slate-500"
          >
            <div class="flex items-center gap-4">
              <span class="font-medium text-slate-900">{{
                order.create_time
              }}</span>
              <span class="select-all">订单号: {{ order.id }}</span>
              <span
                class="hover:text-primary-600 cursor-pointer transition-colors"
                v-if="order.tenant_id !== '0'"
                >{{ order.tenant_name }}
                <i class="pi pi-angle-right text-xs"></i
              ></span>
              <span v-else class="text-slate-500">平台自营</span>
            </div>
            <div class="font-bold" :class="statusColor(order.status)">
              {{ order.status_description }}
            </div>
          </div>

          <!-- Order Body -->
          <div class="p-4 flex flex-col sm:flex-row gap-6">
            <!-- Product Info (Clickable Area) -->
            <div
              class="flex-1 flex gap-4 cursor-pointer"
              @click="$router.push(tenantRoute(`/me/orders/${order.id}`))"
            >
              <div
                class="w-24 h-16 bg-slate-100 rounded flex-shrink-0 relative overflow-hidden group-hover:opacity-90 transition-opacity flex items-center justify-center"
              >
                <template
                  v-if="order.type === 'recharge' || !order.items?.length"
                >
                  <i class="pi pi-wallet text-3xl text-primary-500"></i>
                </template>
                <template v-else-if="order.items && order.items.length > 0">
                  <img
                    :src="order.items[0].cover"
                    class="w-full h-full object-cover"
                  />
                  <!-- Assuming genre is on item, not order.type -->
                </template>
                <template v-else>
                  <i class="pi pi-box text-2xl text-slate-400"></i>
                </template>
              </div>
              <div>
                <h3
                  class="font-bold text-slate-900 line-clamp-1 mb-1 group-hover:text-primary-600 transition-colors"
                >
                  {{
                    order.type === "recharge" || !order.items?.length
                      ? "账户充值"
                      : order.items?.[0]?.title || "未知商品"
                  }}
                </h3>
                <div class="text-xs text-slate-500 mb-2">
                  {{
                    order.type === "recharge" || !order.items?.length
                      ? "在线充值"
                      : order.items?.[0]?.genre || "数字内容"
                  }}
                </div>
                <div
                  v-if="
                    order.is_virtual ||
                    order.type === 'recharge' ||
                    !order.items?.length
                  "
                  class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-50 text-blue-600"
                >
                  {{
                    order.type === "recharge" || !order.items?.length
                      ? "即时到账"
                      : "虚拟发货"
                  }}
                </div>
              </div>
            </div>

            <!-- Price & Actions -->
            <div
              class="flex items-center justify-between sm:w-1/3 sm:border-l sm:border-slate-100 sm:pl-6"
            >
              <div class="text-right sm:text-left">
                <div class="font-bold text-slate-900 text-lg">
                  ¥ {{ order.amount }}
                </div>
                <div class="text-xs text-slate-400">在线支付</div>
              </div>
              <div class="flex flex-col gap-2">
                <button
                  v-if="order.status === 'created'"
                  class="px-4 py-1.5 bg-primary-600 text-white text-sm font-medium rounded-lg hover:bg-primary-700 transition-colors shadow-sm active:scale-95 cursor-pointer"
                >
                  去支付
                </button>
                <router-link
                  :to="tenantRoute(`/me/orders/${order.id}`)"
                  v-if="order.status === 'paid' || order.status === 'completed'"
                  class="px-4 py-1.5 border border-slate-300 text-slate-700 text-sm font-medium rounded-lg hover:bg-slate-50 hover:border-slate-400 transition-colors inline-block text-center cursor-pointer active:scale-95"
                  >查看详情</router-link
                >
                <button
                  v-if="
                    order.status === 'completed' && order.type !== 'recharge'
                  "
                  class="px-4 py-1.5 text-primary-600 text-sm hover:underline cursor-pointer"
                >
                  申请售后
                </button>
                <button
                  v-if="order.status === 'created'"
                  class="text-xs text-slate-400 hover:text-slate-600 cursor-pointer"
                >
                  取消订单
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Empty State -->
      <div v-else class="text-center py-20">
        <div
          class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-slate-50 mb-4"
        >
          <i class="pi pi-shopping-bag text-2xl text-slate-300"></i>
        </div>
        <p class="text-slate-500 text-lg">暂无相关订单</p>
      </div>
    </div>
  </div>
</template>
