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

const route = useRoute();
const orderId = route.params.id;
const order = ref({});
const loading = ref(true);

onMounted(async () => {
  try {
    const res = await userApi.getOrder(orderId);
    order.value = res || {};
  } catch (e) {
    console.error(e);
  } finally {
    loading.value = false;
  }
});

const progressWidth = computed(() => {
  if (order.value.status === "completed" || order.value.status === "paid")
    return "100%";
  if (order.value.status === "paid") return "66%"; // 'paid' can be 100% for virtual/recharge
  return "33%";
});

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

<template>
  <div
    class="bg-white rounded-xl shadow-sm border border-slate-100 min-h-[600px] p-8"
  >
    <!-- Header -->
    <div class="flex items-center gap-4 mb-8">
      <button
        @click="$router.back()"
        class="w-10 h-10 flex items-center justify-center rounded-full hover:bg-slate-100 text-slate-500 transition-colors cursor-pointer active:scale-90"
      >
        <i class="pi pi-arrow-left text-lg"></i>
      </button>
      <div>
        <h1 class="text-2xl font-bold text-slate-900">订单详情</h1>
        <p class="text-sm text-slate-500">订单号: {{ order.id }}</p>
      </div>
      <div class="ml-auto">
        <span
          class="px-3 py-1 rounded-full text-sm font-bold border"
          :class="statusBadgeClass(order.status)"
        >
          {{ order.status_description }}
        </span>
      </div>
    </div>

    <!-- Status Progress (Fixed Alignment) -->
    <div class="mb-10 p-8 bg-slate-50 rounded-xl border border-slate-100">
      <div class="relative mx-12">
        <!-- Added margin for text overflow safety -->
        <!-- Background Line -->
        <div class="absolute top-4 left-0 w-full h-1 bg-slate-200 -z-0"></div>
        <!-- Active Line -->
        <div
          class="absolute top-4 left-0 h-1 bg-green-500 -z-0 transition-all duration-500"
          :style="{ width: progressWidth }"
        ></div>

        <div class="flex justify-between relative z-10">
          <!-- Step 1 -->
          <div class="flex flex-col items-center gap-2 w-24 -ml-12">
            <!-- Fixed width and negative margin to center on point -->
            <div
              class="w-9 h-9 rounded-full bg-green-500 text-white flex items-center justify-center font-bold text-sm border-4 border-slate-50"
            >
              <i class="pi pi-check"></i>
            </div>
            <div class="text-center">
              <div class="text-sm font-bold text-slate-900">提交订单</div>
              <div class="text-xs text-slate-500 mt-1">
                {{ order.create_time }}
              </div>
            </div>
          </div>
          <!-- Step 2 -->
          <div class="flex flex-col items-center gap-2 w-24">
            <div
              class="w-9 h-9 rounded-full flex items-center justify-center font-bold text-sm border-4 border-slate-50 transition-colors"
              :class="
                order.pay_time
                  ? 'bg-green-500 text-white'
                  : 'bg-slate-200 text-slate-500'
              "
            >
              <i class="pi pi-wallet"></i>
            </div>
            <div class="text-center">
              <div
                class="text-sm font-bold"
                :class="order.pay_time ? 'text-slate-900' : 'text-slate-500'"
              >
                付款成功
              </div>
              <div class="text-xs text-slate-500 mt-1" v-if="order.pay_time">
                {{ order.pay_time }}
              </div>
            </div>
          </div>
          <!-- Step 3 -->
          <div class="flex flex-col items-center gap-2 w-24">
            <div
              class="w-9 h-9 rounded-full flex items-center justify-center font-bold text-sm border-4 border-slate-50 transition-colors"
              :class="
                order.status === 'completed'
                  ? 'bg-green-500 text-white'
                  : 'bg-slate-200 text-slate-500'
              "
            >
              <i class="pi pi-box"></i>
            </div>
            <div class="text-center">
              <div
                class="text-sm font-bold"
                :class="
                  order.status === 'completed'
                    ? 'text-slate-900'
                    : 'text-slate-500'
                "
              >
                {{ order.is_virtual ? "自动发货" : "商家发货" }}
              </div>
            </div>
          </div>
          <!-- Step 4 -->
          <div class="flex flex-col items-center gap-2 w-24 -mr-12">
            <div
              class="w-9 h-9 rounded-full flex items-center justify-center font-bold text-sm border-4 border-slate-50 transition-colors"
              :class="
                order.status === 'completed'
                  ? 'bg-green-500 text-white'
                  : 'bg-slate-200 text-slate-500'
              "
            >
              <i class="pi pi-thumbs-up"></i>
            </div>
            <div class="text-center">
              <div
                class="text-sm font-bold"
                :class="
                  order.status === 'completed'
                    ? 'text-slate-900'
                    : 'text-slate-500'
                "
              >
                交易完成
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Info Stack (Single Column Layout) -->
    <div class="space-y-8">
      <!-- 1. Product Info -->
      <div
        class="border border-slate-200 rounded-lg overflow-hidden"
        v-if="order.id"
      >
        <div
          class="bg-slate-50 px-6 py-3 border-b border-slate-200 font-bold text-slate-900 text-lg"
        >
          {{ order.type === "recharge" ? "服务信息" : "商品信息" }}
        </div>

        <!-- Recharge View -->
        <div
          v-if="order.type === 'recharge'"
          class="p-6 flex items-center gap-6"
        >
          <div
            class="w-20 h-20 rounded-full bg-slate-50 flex items-center justify-center text-primary-500"
          >
            <i class="pi pi-wallet text-3xl"></i>
          </div>
          <div>
            <h3 class="font-bold text-slate-900 text-xl mb-2">账户余额充值</h3>
            <div class="text-slate-500">充值金额将会即时到账</div>
          </div>
          <div class="ml-auto text-right">
            <div class="font-bold text-slate-900 text-xl">
              ¥ {{ order.amount }}
            </div>
          </div>
        </div>

        <!-- Content Items View -->
        <div v-else class="divide-y divide-slate-100">
          <div
            v-for="(item, idx) in order.items"
            :key="idx"
            class="p-6 flex flex-col sm:flex-row gap-6"
          >
            <img
              :src="item.cover"
              class="w-32 h-20 object-cover rounded bg-slate-100 flex-shrink-0"
            />
            <div class="flex-1 min-w-0">
              <h3 class="font-bold text-slate-900 text-xl mb-2">
                {{ item.title }}
              </h3>
              <div class="text-base text-slate-500 mb-3">
                {{ item.sku || "默认规格" }}
              </div>
              <div
                v-if="order.is_virtual"
                class="inline-flex items-center px-2.5 py-1 rounded text-sm font-medium bg-blue-50 text-blue-600"
              >
                虚拟商品
              </div>
            </div>
            <div class="text-right sm:text-right text-left">
              <div class="font-bold text-slate-900 text-xl">
                ¥ {{ item.price }}
              </div>
              <!-- Quantity is on order level usually for single-SKU, or item level? Assuming item price is unit price * quantity or just price paid -->
            </div>
          </div>
        </div>

        <!-- Price Calculation -->
        <div class="border-t border-slate-100 p-6 bg-slate-50/50">
          <div class="flex flex-col gap-2 ml-auto max-w-sm">
            <div class="flex justify-between text-base text-slate-600">
              <span>商品总额</span>
              <span>¥ {{ order.amount }}</span>
            </div>
            <div class="flex justify-between text-base text-slate-600">
              <span>运费</span>
              <span>¥ 0.00</span>
            </div>
            <div
              class="border-t border-slate-200 my-2 pt-4 flex justify-between items-center"
            >
              <span class="font-bold text-slate-900 text-lg">实付金额</span>
              <span class="text-3xl font-bold text-red-600"
                >¥ {{ order.amount }}</span
              >
            </div>
          </div>
        </div>
      </div>

      <!-- 2. Order Meta Info (Full Width) -->
      <div class="bg-white border border-slate-200 rounded-xl p-8 text-base">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-12">
          <!-- Left Column: Basic Info -->
          <div class="space-y-6">
            <div>
              <h3
                class="font-bold text-slate-900 text-lg mb-4 border-l-4 border-primary-500 pl-3"
              >
                订单信息
              </h3>
              <div class="space-y-3 text-slate-600">
                <p>
                  订单编号:
                  <span class="text-slate-900 select-all">{{ order.id }}</span>
                  <button
                    class="text-primary-600 ml-2 hover:underline font-medium cursor-pointer"
                  >
                    复制
                  </button>
                </p>
                <p>创建时间: {{ order.create_time }}</p>
                <p v-if="order.pay_time">付款时间: {{ order.pay_time }}</p>
              </div>
            </div>

            <div v-if="!order.is_virtual && order.type !== 'recharge'">
              <h3
                class="font-bold text-slate-900 text-lg mb-4 border-l-4 border-primary-500 pl-3"
              >
                收货信息
              </h3>
              <div class="space-y-2 text-slate-600">
                <p class="font-bold text-slate-900 text-lg">张三 138****8888</p>
                <p>北京市 朝阳区 建国路88号</p>
              </div>
            </div>
          </div>

          <!-- Right Column: Merchant & Actions -->
          <div
            class="space-y-6"
            v-if="order.tenant_id !== '0' && order.type !== 'recharge'"
          >
            <div>
              <h3
                class="font-bold text-slate-900 text-lg mb-4 border-l-4 border-primary-500 pl-3"
              >
                商家信息
              </h3>
              <div class="flex items-center gap-4 p-4 bg-slate-50 rounded-lg">
                <img
                  :src="
                    order.tenant_avatar ||
                    'https://api.dicebear.com/7.x/initials/svg?seed=' +
                      order.tenant_name
                  "
                  class="w-12 h-12 rounded-full"
                />
                <div>
                  <div class="font-bold text-slate-900">
                    {{ order.tenant_name }}
                  </div>
                  <button
                    class="text-primary-600 text-sm mt-1 hover:underline cursor-pointer"
                  >
                    联系商家
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
