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

const toast = useToast();
const coupons = ref([]);
const totalRecords = ref(0);
const rows = ref(10);
const first = ref(0);
const filterStatus = ref("all");
const filterType = ref("all");
const searchKeyword = ref("");

const editorVisible = ref(false);
const grantVisible = ref(false);
const editingId = ref(null);
const grantCouponId = ref(null);
const grantUsers = ref("");

const form = ref({
  title: "",
  description: "",
  type: "fix_amount",
  value: 0,
  min_order_amount: 0,
  max_discount: 0,
  total_quantity: 0,
  start_at: "",
  end_at: "",
});

const editorTitle = computed(() =>
  editingId.value ? "编辑优惠券" : "新建优惠券",
);

const resetForm = () => {
  form.value = {
    title: "",
    description: "",
    type: "fix_amount",
    value: 0,
    min_order_amount: 0,
    max_discount: 0,
    total_quantity: 0,
    start_at: "",
    end_at: "",
  };
};

const toLocalInput = (value) => {
  if (!value) return "";
  const date = new Date(value);
  if (Number.isNaN(date.getTime())) return "";
  const pad = (n) => String(n).padStart(2, "0");
  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}T${pad(date.getHours())}:${pad(date.getMinutes())}`;
};

const toRFC3339 = (value) => {
  if (!value) return "";
  const date = new Date(value);
  if (Number.isNaN(date.getTime())) return "";
  return date.toISOString();
};

const fetchCoupons = async () => {
  const params = {
    page: first.value / rows.value + 1,
    limit: rows.value,
  };
  if (filterStatus.value !== "all") params.status = filterStatus.value;
  if (filterType.value !== "all") params.type = filterType.value;
  if (searchKeyword.value) params.keyword = searchKeyword.value;

  try {
    const res = await creatorApi.listCoupons(params);
    if (res && res.items) {
      coupons.value = res.items;
      totalRecords.value = res.total || 0;
    } else {
      coupons.value = [];
      totalRecords.value = 0;
    }
  } catch (e) {
    console.error(e);
  }
};

const onPage = (event) => {
  first.value = event.first;
  rows.value = event.rows;
  fetchCoupons();
};

const openCreate = () => {
  editingId.value = null;
  resetForm();
  editorVisible.value = true;
};

const openEdit = (coupon) => {
  editingId.value = coupon.id;
  form.value = {
    title: coupon.title || "",
    description: coupon.description || "",
    type: coupon.type || "fix_amount",
    value: coupon.value || 0,
    min_order_amount: coupon.min_order_amount || 0,
    max_discount: coupon.max_discount || 0,
    total_quantity: coupon.total_quantity || 0,
    start_at: toLocalInput(coupon.start_at),
    end_at: toLocalInput(coupon.end_at),
  };
  editorVisible.value = true;
};

const openGrant = (coupon) => {
  grantCouponId.value = coupon.id;
  grantUsers.value = "";
  grantVisible.value = true;
};

const submitForm = async () => {
  const payload = {
    title: form.value.title,
    description: form.value.description,
    type: form.value.type,
    value: Number(form.value.value) || 0,
    min_order_amount: Number(form.value.min_order_amount) || 0,
    max_discount: Number(form.value.max_discount) || 0,
    total_quantity: Number(form.value.total_quantity) || 0,
    start_at: toRFC3339(form.value.start_at),
    end_at: toRFC3339(form.value.end_at),
  };

  try {
    if (editingId.value) {
      await creatorApi.updateCoupon(editingId.value, payload);
      toast.add({
        severity: "success",
        summary: "更新成功",
        detail: "优惠券已更新",
        life: 2000,
      });
    } else {
      await creatorApi.createCoupon(payload);
      toast.add({
        severity: "success",
        summary: "创建成功",
        detail: "优惠券已创建",
        life: 2000,
      });
    }
    editorVisible.value = false;
    fetchCoupons();
  } catch (e) {
    console.error(e);
    toast.add({
      severity: "error",
      summary: "操作失败",
      detail: e.message || "请稍后重试",
      life: 3000,
    });
  }
};

const submitGrant = async () => {
  const ids = grantUsers.value
    .split(/[,\s，]+/)
    .map((val) => parseInt(val, 10))
    .filter((val) => Number.isFinite(val) && val > 0);

  if (!grantCouponId.value || ids.length === 0) {
    toast.add({
      severity: "warn",
      summary: "请输入用户ID",
      detail: "至少输入一个有效 ID",
      life: 2000,
    });
    return;
  }

  try {
    await creatorApi.grantCoupon(grantCouponId.value, { user_ids: ids });
    toast.add({
      severity: "success",
      summary: "发放成功",
      detail: `已发放 ${ids.length} 张`,
      life: 2000,
    });
    grantVisible.value = false;
    fetchCoupons();
  } catch (e) {
    console.error(e);
    toast.add({
      severity: "error",
      summary: "发放失败",
      detail: e.message || "请稍后重试",
      life: 3000,
    });
  }
};

const formatMoney = (value) => {
  return (Number(value) / 100).toFixed(2);
};

const typeLabel = (value) => {
  if (value === "discount") return "折扣";
  if (value === "fix_amount") return "满减";
  return value || "-";
};

const formatRange = (start, end) => {
  const startText = start ? start.replace("T", " ").replace("Z", "") : "-";
  const endText = end ? end.replace("T", " ").replace("Z", "") : "-";
  return `${startText} ~ ${endText}`;
};

const statusStyle = (coupon) => {
  const now = new Date();
  if (coupon.end_at) {
    const end = new Date(coupon.end_at);
    if (!Number.isNaN(end.getTime()) && end < now) {
      return { label: "已过期", bg: "bg-slate-100", text: "text-slate-500" };
    }
  }
  return { label: "生效中", bg: "bg-emerald-50", text: "text-emerald-600" };
};

onMounted(fetchCoupons);
watch([filterStatus, filterType], () => {
  first.value = 0;
  fetchCoupons();
});
</script>

<template>
  <div>
    <div class="flex items-center justify-between mb-8">
      <h1 class="text-2xl font-bold text-slate-900">优惠券管理</h1>
      <button
        class="px-4 py-2 bg-slate-900 text-white rounded-lg text-sm font-bold hover:bg-slate-800 transition-colors"
        @click="openCreate"
      >
        <i class="pi pi-plus mr-1"></i> 新建优惠券
      </button>
    </div>

    <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="active">生效中</option>
          <option value="expired">已过期</option>
        </select>
      </div>
      <div class="flex items-center gap-2">
        <span class="text-sm font-bold text-slate-500">类型:</span>
        <select
          v-model="filterType"
          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="fix_amount">满减</option>
          <option value="discount">折扣</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="fetchCoupons"
          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>

    <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">标题</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 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 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="coupon in coupons"
            :key="coupon.id"
            class="hover:bg-slate-50 transition-colors"
          >
            <td class="px-6 py-4">
              <div class="font-bold text-slate-900">{{ coupon.title }}</div>
              <div class="text-xs text-slate-500 mt-1 line-clamp-1">
                {{ coupon.description || "-" }}
              </div>
            </td>
            <td class="px-6 py-4 whitespace-nowrap">
              {{ typeLabel(coupon.type) }}
            </td>
            <td class="px-6 py-4 whitespace-nowrap">
              <span v-if="coupon.type === 'fix_amount'"
                >¥ {{ formatMoney(coupon.value) }}</span
              >
              <span v-else>{{ coupon.value }}%</span>
              <span
                v-if="coupon.type === 'discount' && coupon.max_discount > 0"
                class="text-xs text-slate-500 ml-1"
              >
                封顶 ¥ {{ formatMoney(coupon.max_discount) }}
              </span>
            </td>
            <td class="px-6 py-4 whitespace-nowrap">
              ¥ {{ formatMoney(coupon.min_order_amount) }}
            </td>
            <td class="px-6 py-4 whitespace-nowrap">
              <span class="font-bold">{{ coupon.used_quantity }}</span>
              <span class="text-slate-400">
                /
                {{
                  coupon.total_quantity === 0 ? "不限" : coupon.total_quantity
                }}</span
              >
            </td>
            <td class="px-6 py-4 text-slate-500 whitespace-nowrap">
              {{ formatRange(coupon.start_at, coupon.end_at) }}
            </td>
            <td class="px-6 py-4">
              <span
                class="inline-block px-2.5 py-1 rounded text-xs font-bold whitespace-nowrap"
                :class="statusStyle(coupon).bg + ' ' + statusStyle(coupon).text"
              >
                {{ statusStyle(coupon).label }}
              </span>
            </td>
            <td class="px-6 py-4 text-right whitespace-nowrap">
              <button
                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"
                @click="openEdit(coupon)"
              >
                编辑
              </button>
              <button
                class="text-slate-700 hover:text-slate-900 font-medium cursor-pointer hover:bg-slate-100 px-2 py-1 rounded transition-colors"
                @click="openGrant(coupon)"
              >
                发放
              </button>
            </td>
          </tr>
        </tbody>
      </table>

      <div v-if="coupons.length === 0" class="text-center py-12 text-slate-400">
        暂无优惠券
      </div>
    </div>

    <div class="mt-6 flex justify-end" v-if="totalRecords > rows">
      <Paginator
        :rows="rows"
        :first="first"
        :totalRecords="totalRecords"
        @page="onPage"
        template="PrevPageLink PageLinks NextPageLink RowsPerPageDropdown"
        :rowsPerPageOptions="[10, 20, 50]"
      />
    </div>

    <Dialog
      v-model:visible="editorVisible"
      modal
      :header="editorTitle"
      :style="{ width: '36rem' }"
    >
      <div class="space-y-4">
        <div>
          <label class="text-sm font-medium text-slate-600">标题</label>
          <input
            v-model="form.title"
            type="text"
            class="w-full mt-1 h-10 px-3 rounded border border-slate-200 text-sm focus:border-primary-500 outline-none"
          />
        </div>
        <div>
          <label class="text-sm font-medium text-slate-600">描述</label>
          <textarea
            v-model="form.description"
            rows="2"
            class="w-full mt-1 p-3 rounded border border-slate-200 text-sm focus:border-primary-500 outline-none"
          ></textarea>
        </div>
        <div class="grid grid-cols-2 gap-4">
          <div>
            <label class="text-sm font-medium text-slate-600">类型</label>
            <select
              v-model="form.type"
              class="w-full mt-1 h-10 px-3 rounded border border-slate-200 text-sm focus:border-primary-500 outline-none bg-white"
            >
              <option value="fix_amount">满减</option>
              <option value="discount">折扣</option>
            </select>
          </div>
          <div>
            <label class="text-sm font-medium text-slate-600">面值</label>
            <input
              v-model.number="form.value"
              type="number"
              min="0"
              class="w-full mt-1 h-10 px-3 rounded border border-slate-200 text-sm focus:border-primary-500 outline-none"
            />
            <p class="text-xs text-slate-400 mt-1">
              满减输入分；折扣输入 1-100
            </p>
          </div>
        </div>
        <div class="grid grid-cols-2 gap-4">
          <div>
            <label class="text-sm font-medium text-slate-600"
              >使用门槛(分)</label
            >
            <input
              v-model.number="form.min_order_amount"
              type="number"
              min="0"
              class="w-full mt-1 h-10 px-3 rounded border border-slate-200 text-sm focus:border-primary-500 outline-none"
            />
          </div>
          <div v-if="form.type === 'discount'">
            <label class="text-sm font-medium text-slate-600"
              >最高抵扣(分)</label
            >
            <input
              v-model.number="form.max_discount"
              type="number"
              min="0"
              class="w-full mt-1 h-10 px-3 rounded border border-slate-200 text-sm focus:border-primary-500 outline-none"
            />
          </div>
        </div>
        <div class="grid grid-cols-2 gap-4">
          <div>
            <label class="text-sm font-medium text-slate-600">发行数量</label>
            <input
              v-model.number="form.total_quantity"
              type="number"
              min="0"
              class="w-full mt-1 h-10 px-3 rounded border border-slate-200 text-sm focus:border-primary-500 outline-none"
            />
            <p class="text-xs text-slate-400 mt-1">0 表示不限量</p>
          </div>
          <div>
            <label class="text-sm font-medium text-slate-600">生效时间</label>
            <input
              v-model="form.start_at"
              type="datetime-local"
              class="w-full mt-1 h-10 px-3 rounded border border-slate-200 text-sm focus:border-primary-500 outline-none"
            />
          </div>
        </div>
        <div>
          <label class="text-sm font-medium text-slate-600">过期时间</label>
          <input
            v-model="form.end_at"
            type="datetime-local"
            class="w-full mt-1 h-10 px-3 rounded border border-slate-200 text-sm focus:border-primary-500 outline-none"
          />
        </div>
      </div>
      <template #footer>
        <button
          @click="editorVisible = false"
          class="px-4 py-2 text-slate-500 hover:text-slate-700 text-sm"
        >
          取消
        </button>
        <button
          @click="submitForm"
          class="px-4 py-2 bg-slate-900 text-white rounded text-sm hover:bg-slate-800"
        >
          保存
        </button>
      </template>
    </Dialog>

    <Dialog
      v-model:visible="grantVisible"
      modal
      header="发放优惠券"
      :style="{ width: '28rem' }"
    >
      <div class="space-y-3">
        <p class="text-sm text-slate-600">
          请输入用户 ID，使用逗号或空格分隔。
        </p>
        <textarea
          v-model="grantUsers"
          rows="3"
          class="w-full p-3 rounded border border-slate-200 text-sm focus:border-primary-500 outline-none"
          placeholder="例如：1001,1002,1003"
        ></textarea>
      </div>
      <template #footer>
        <button
          @click="grantVisible = false"
          class="px-4 py-2 text-slate-500 hover:text-slate-700 text-sm"
        >
          取消
        </button>
        <button
          @click="submitGrant"
          class="px-4 py-2 bg-primary-600 text-white rounded text-sm hover:bg-primary-700"
        >
          确认发放
        </button>
      </template>
    </Dialog>

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