<script setup>
import Dialog from "primevue/dialog";
import RadioButton from "primevue/radiobutton";
import Toast from "primevue/toast";
import { useToast } from "primevue/usetoast";
import { computed, ref, onMounted, watch } from "vue";
import { creatorApi } from "../../api/creator";

const toast = useToast();
const filterStatus = ref("all");
const searchKeyword = ref("");
const detailDialog = ref(false);
const refundDialog = ref(false);
const selectedOrder = ref(null);
const refundAction = ref("accept");
const refundReason = ref("");
const orders = ref([]);
const loading = ref(false);

const fetchOrders = async () => {
  loading.value = true;
  try {
    const params = {
      status: filterStatus.value === "all" ? "" : filterStatus.value,
      keyword: searchKeyword.value,
    };
    const res = await creatorApi.listOrders(params);
    orders.value = (res || []).map((o) => ({
      id: o.id,
      title: o.title || "未知内容",
      type: "数字内容",
      cover: o.cover,
      buyerName: o.buyer_name,
      buyerAvatar: o.buyer_avatar,
      amount: o.amount,
      date: o.create_time,
      status: o.status,
    }));
  } catch (e) {
    console.error(e);
  } finally {
    loading.value = false;
  }
};

onMounted(fetchOrders);
watch(filterStatus, fetchOrders);

const filteredOrders = computed(() => orders.value);

const statusStyle = (status) => {
  switch (status) {
    case "paid":
    case "completed":
      return { bg: "bg-green-50", text: "text-green-600", label: "已完成" };
    case "refunding":
      return {
        bg: "bg-orange-50",
        text: "text-orange-600",
        label: "退款申请中",
      };
    case "refunded":
      return { bg: "bg-slate-100", text: "text-slate-500", label: "已退款" };
    default:
      return { bg: "bg-slate-100", text: "text-slate-500", label: "未知" };
  }
};

const viewDetail = (order) => {
  selectedOrder.value = order;
  detailDialog.value = true;
};

const handleRefund = (order) => {
  selectedOrder.value = order;
  refundAction.value = "accept";
  refundReason.value = "";
  refundDialog.value = true;
};

const confirmRefund = async () => {
  try {
    await creatorApi.refundOrder(selectedOrder.value.id, {
      action: refundAction.value,
      reason: refundReason.value,
    });
    refundDialog.value = false;
    toast.add({ severity: "success", summary: "处理成功", life: 3000 });
    fetchOrders();
  } catch (e) {
    toast.add({
      severity: "error",
      summary: "处理失败",
      detail: e.message,
      life: 3000,
    });
  }
};
</script>

<template>
  <div>
    <div class="flex items-center justify-between mb-8">
      <h1 class="text-2xl font-bold text-slate-900">订单管理</h1>
      <div class="flex gap-4">
        <button
          class="px-4 py-2 border border-slate-200 rounded-lg text-sm font-bold text-slate-600 hover:bg-slate-50 cursor-pointer"
        >
          <i class="pi pi-download mr-1"></i> 导出报表
        </button>
      </div>
    </div>

    <!-- Filters -->
    <div
      class="bg-white rounded-xl shadow-sm border border-slate-100 p-4 mb-6 flex flex-wrap gap-4 items-center"
    >
      <div class="flex items-center gap-2">
        <span class="text-sm font-bold text-slate-500">状态:</span>
        <select
          v-model="filterStatus"
          class="h-9 px-3 rounded border border-slate-200 text-sm focus:border-primary-500 outline-none bg-white cursor-pointer"
        >
          <option value="all">全部</option>
          <option value="completed">已完成</option>
          <option value="refunding">退款申请中</option>
          <option value="refunded">已退款</option>
        </select>
      </div>
      <div class="ml-auto 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"
          v-model="searchKeyword"
          @keyup.enter="fetchOrders"
          placeholder="搜索订单号或买家..."
          class="w-full h-9 pl-9 pr-4 rounded border border-slate-200 text-sm focus:border-primary-500 outline-none transition-all"
        />
      </div>
    </div>

    <!-- Order Table -->
    <div
      class="bg-white rounded-xl shadow-sm border border-slate-100 overflow-hidden"
    >
      <table class="w-full text-left text-sm">
        <thead
          class="bg-slate-50 text-slate-500 font-bold border-b border-slate-200"
        >
          <tr>
            <th class="px-6 py-4 whitespace-nowrap">订单号</th>
            <th class="px-6 py-4 w-[30%]">内容信息</th>
            <th class="px-6 py-4 whitespace-nowrap">买家</th>
            <th class="px-6 py-4 text-right whitespace-nowrap">实付金额</th>
            <th class="px-6 py-4 whitespace-nowrap">下单时间</th>
            <th class="px-6 py-4 whitespace-nowrap">状态</th>
            <th class="px-6 py-4 text-right whitespace-nowrap">操作</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-slate-100">
          <tr
            v-for="order in filteredOrders"
            :key="order.id"
            class="hover:bg-slate-50 transition-colors"
          >
            <td class="px-6 py-4 font-mono text-slate-600 align-middle">
              {{ order.id }}
            </td>
            <td class="px-6 py-4 align-middle">
              <div class="flex items-center gap-3">
                <img
                  :src="order.cover"
                  class="w-16 h-10 object-cover rounded bg-slate-100 flex-shrink-0"
                />
                <span
                  class="font-bold text-slate-900 truncate max-w-[240px]"
                  :title="order.title"
                  >{{ order.title }}</span
                >
              </div>
            </td>
            <td class="px-6 py-4 align-middle">
              <div class="flex items-center gap-2">
                <img
                  :src="order.buyerAvatar"
                  class="w-8 h-8 rounded-full flex-shrink-0"
                />
                <span class="text-slate-700 truncate max-w-[100px]">{{
                  order.buyerName
                }}</span>
              </div>
            </td>
            <td
              class="px-6 py-4 text-right font-bold text-slate-900 align-middle"
            >
              ¥ {{ order.amount }}
            </td>
            <td class="px-6 py-4 text-slate-500 whitespace-nowrap align-middle">
              {{ order.date }}
            </td>
            <td class="px-6 py-4 align-middle">
              <span
                class="inline-block px-2.5 py-1 rounded text-xs font-bold whitespace-nowrap"
                :class="
                  statusStyle(order.status).bg +
                  ' ' +
                  statusStyle(order.status).text
                "
              >
                {{ statusStyle(order.status).label }}
              </span>
            </td>
            <td class="px-6 py-4 text-right align-middle whitespace-nowrap">
              <button
                @click="viewDetail(order)"
                class="text-primary-600 hover:text-primary-700 font-medium mr-4 cursor-pointer hover:bg-primary-50 px-2 py-1 rounded transition-colors"
              >
                详情
              </button>
              <button
                v-if="order.status === 'refunding'"
                @click="handleRefund(order)"
                class="text-red-600 hover:text-red-700 font-medium cursor-pointer hover:bg-red-50 px-2 py-1 rounded transition-colors"
              >
                处理退款
              </button>
            </td>
          </tr>
        </tbody>
      </table>

      <!-- Empty State -->
      <div
        v-if="filteredOrders.length === 0"
        class="text-center py-12 text-slate-400"
      >
        暂无相关订单
      </div>
    </div>

    <!-- Detail Dialog -->
    <Dialog
      v-model:visible="detailDialog"
      modal
      header="订单详情"
      :style="{ width: '30rem' }"
    >
      <div v-if="selectedOrder" class="space-y-6">
        <div
          class="flex justify-between items-center pb-4 border-b border-slate-100"
        >
          <span class="text-sm text-slate-500">订单号</span>
          <span class="font-mono font-bold">{{ selectedOrder.id }}</span>
        </div>
        <div class="flex gap-4">
          <img
            :src="selectedOrder.cover"
            class="w-20 h-14 object-cover rounded"
          />
          <div>
            <h3 class="font-bold text-slate-900">{{ selectedOrder.title }}</h3>
            <p class="text-sm text-slate-500 mt-1">
              类型: {{ selectedOrder.type }}
            </p>
          </div>
        </div>
        <div class="bg-slate-50 p-4 rounded-lg space-y-2 text-sm">
          <div class="flex justify-between">
            <span class="text-slate-500">买家</span>
            <span class="font-medium"
              >{{ selectedOrder.buyerName }} (ID:
              {{ selectedOrder.buyerId }})</span
            >
          </div>
          <div class="flex justify-between">
            <span class="text-slate-500">支付方式</span>
            <span>微信支付</span>
          </div>
          <div class="flex justify-between pt-2 border-t border-slate-200">
            <span class="font-bold text-slate-900">实付</span>
            <span class="font-bold text-red-600 text-lg"
              >¥ {{ selectedOrder.amount }}</span
            >
          </div>
        </div>

        <div
          v-if="selectedOrder.status === 'refunding'"
          class="bg-red-50 p-4 rounded-lg border border-red-100"
        >
          <h4 class="text-red-700 font-bold text-sm mb-2">退款申请信息</h4>
          <p class="text-sm text-red-600">申请原因：内容无法播放/质量问题</p>
          <p class="text-sm text-red-600 mt-1">
            申请说明：视频一直加载不出来。
          </p>
        </div>
      </div>
      <template #footer>
        <button
          @click="detailDialog = false"
          class="px-4 py-2 border border-slate-200 rounded text-sm hover:bg-slate-50"
        >
          关闭
        </button>
        <button
          class="px-4 py-2 border border-primary-200 text-primary-600 rounded text-sm hover:bg-primary-50 ml-2"
        >
          联系买家
        </button>
      </template>
    </Dialog>

    <!-- Refund Dialog -->
    <Dialog
      v-model:visible="refundDialog"
      modal
      header="处理退款申请"
      :style="{ width: '25rem' }"
    >
      <div class="text-sm text-slate-600 mb-6">
        您正在处理订单
        <span class="font-mono font-bold">{{ selectedOrder?.id }}</span>
        的退款申请。 <br />同意后，金额将原路退回给买家。
      </div>
      <div class="space-y-3">
        <label
          class="flex items-center gap-3 p-3 border rounded-lg cursor-pointer hover:bg-slate-50"
          :class="
            refundAction === 'accept'
              ? 'border-green-500 bg-green-50'
              : 'border-slate-200'
          "
        >
          <RadioButton v-model="refundAction" value="accept" />
          <span>同意退款</span>
        </label>
        <label
          class="flex items-center gap-3 p-3 border rounded-lg cursor-pointer hover:bg-slate-50"
          :class="
            refundAction === 'reject'
              ? 'border-red-500 bg-red-50'
              : 'border-slate-200'
          "
        >
          <RadioButton v-model="refundAction" value="reject" />
          <span>拒绝退款</span>
        </label>
      </div>
      <div v-if="refundAction === 'reject'" class="mt-4">
        <textarea
          v-model="refundReason"
          class="w-full p-2 border border-slate-200 rounded text-sm focus:border-red-500 outline-none"
          rows="2"
          placeholder="请输入拒绝理由..."
        ></textarea>
      </div>
      <template #footer>
        <button
          @click="refundDialog = false"
          class="px-4 py-2 text-slate-500 hover:text-slate-700 text-sm"
        >
          取消
        </button>
        <button
          @click="confirmRefund"
          class="px-4 py-2 bg-slate-900 text-white rounded text-sm hover:bg-slate-800"
        >
          确认处理
        </button>
      </template>
    </Dialog>

    <Toast />
  </div>
</template>
