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

const toast = useToast();
const activeTab = ref("members");
const loading = reactive({
  members: false,
  invites: false,
  requests: false,
});

const memberKeyword = ref("");
const memberRole = ref("");
const memberStatus = ref("");
const members = ref([]);
const memberPager = ref({ page: 1, limit: 10, total: 0 });

const inviteStatus = ref("");
const invites = ref([]);
const invitePager = ref({ page: 1, limit: 10, total: 0 });
const inviteDialog = ref(false);
const inviteForm = reactive({
  max_uses: 1,
  expires_at: "",
  remark: "",
});

const requestKeyword = ref("");
const requestStatus = ref("pending");
const requests = ref([]);
const requestPager = ref({ page: 1, limit: 10, total: 0 });
const reviewDialog = ref(false);
const reviewAction = ref("approve");
const reviewReason = ref("");
const reviewTarget = ref(null);

const tabs = [
  { key: "members", label: "成员列表" },
  { key: "requests", label: "加入申请" },
  { key: "invites", label: "邀请记录" },
];

const fetchMembers = async () => {
  loading.members = true;
  try {
    const res = await creatorApi.listMembers({
      page: memberPager.value.page,
      limit: memberPager.value.limit,
      keyword: memberKeyword.value,
      role: memberRole.value,
      status: memberStatus.value,
    });
    members.value = res.items || [];
    memberPager.value.total = res.total || 0;
  } catch (e) {
    console.error(e);
  } finally {
    loading.members = false;
  }
};

const fetchInvites = async () => {
  loading.invites = true;
  try {
    const res = await creatorApi.listMemberInvites({
      page: invitePager.value.page,
      limit: invitePager.value.limit,
      status: inviteStatus.value,
    });
    invites.value = res.items || [];
    invitePager.value.total = res.total || 0;
  } catch (e) {
    console.error(e);
  } finally {
    loading.invites = false;
  }
};

const fetchJoinRequests = async () => {
  loading.requests = true;
  try {
    const res = await creatorApi.listMemberJoinRequests({
      page: requestPager.value.page,
      limit: requestPager.value.limit,
      status: requestStatus.value,
      keyword: requestKeyword.value,
    });
    requests.value = res.items || [];
    requestPager.value.total = res.total || 0;
  } catch (e) {
    console.error(e);
  } finally {
    loading.requests = false;
  }
};

onMounted(() => {
  fetchMembers();
  fetchInvites();
  fetchJoinRequests();
});

const memberStatusStyle = (status) => {
  switch (status) {
    case "verified":
      return { bg: "bg-emerald-50", text: "text-emerald-600" };
    case "banned":
      return { bg: "bg-rose-50", text: "text-rose-600" };
    default:
      return { bg: "bg-slate-100", text: "text-slate-500" };
  }
};

const inviteStatusStyle = (status) => {
  switch (status) {
    case "active":
      return { bg: "bg-emerald-50", text: "text-emerald-600" };
    case "disabled":
      return { bg: "bg-slate-100", text: "text-slate-500" };
    case "expired":
      return { bg: "bg-amber-50", text: "text-amber-700" };
    default:
      return { bg: "bg-slate-100", text: "text-slate-500" };
  }
};

const requestStatusStyle = (status) => {
  switch (status) {
    case "pending":
      return { bg: "bg-amber-50", text: "text-amber-700" };
    case "approved":
      return { bg: "bg-emerald-50", text: "text-emerald-600" };
    case "rejected":
      return { bg: "bg-rose-50", text: "text-rose-600" };
    default:
      return { bg: "bg-slate-100", text: "text-slate-500" };
  }
};

const openInviteDialog = () => {
  inviteForm.max_uses = 1;
  inviteForm.expires_at = "";
  inviteForm.remark = "";
  inviteDialog.value = true;
};

const createInvite = async () => {
  try {
    const payload = {
      max_uses: Number(inviteForm.max_uses) || 1,
      remark: inviteForm.remark,
    };
    if (inviteForm.expires_at) {
      payload.expires_at = new Date(inviteForm.expires_at).toISOString();
    }
    await creatorApi.createMemberInvite(payload);
    inviteDialog.value = false;
    toast.add({ severity: "success", summary: "已创建邀请", life: 2000 });
    fetchInvites();
  } catch (e) {
    toast.add({
      severity: "error",
      summary: "创建失败",
      detail: e.message,
      life: 3000,
    });
  }
};

const disableInvite = async (invite) => {
  if (!invite || !invite.id) return;
  if (!window.confirm("确认撤销该邀请？")) return;
  try {
    await creatorApi.disableMemberInvite(invite.id);
    toast.add({ severity: "success", summary: "已撤销", life: 2000 });
    fetchInvites();
  } catch (e) {
    toast.add({
      severity: "error",
      summary: "撤销失败",
      detail: e.message,
      life: 3000,
    });
  }
};

const removeMember = async (member) => {
  if (!member || !member.id) return;
  if (!window.confirm("确认移除该成员？")) return;
  try {
    await creatorApi.removeMember(member.id);
    toast.add({ severity: "success", summary: "成员已移除", life: 2000 });
    fetchMembers();
  } catch (e) {
    toast.add({
      severity: "error",
      summary: "移除失败",
      detail: e.message,
      life: 3000,
    });
  }
};

const openReviewDialog = (item, action) => {
  reviewTarget.value = item;
  reviewAction.value = action;
  reviewReason.value = "";
  reviewDialog.value = true;
};

const submitReview = async () => {
  if (!reviewTarget.value) return;
  try {
    await creatorApi.reviewMemberJoinRequest(reviewTarget.value.id, {
      action: reviewAction.value,
      reason: reviewReason.value,
    });
    reviewDialog.value = false;
    toast.add({ severity: "success", summary: "已处理申请", life: 2000 });
    fetchJoinRequests();
    fetchMembers();
  } catch (e) {
    toast.add({
      severity: "error",
      summary: "处理失败",
      detail: e.message,
      life: 3000,
    });
  }
};

const tabClass = (key) =>
  key === activeTab.value
    ? "bg-slate-900 text-white"
    : "bg-white text-slate-600 border border-slate-200 hover:bg-slate-50";

const pendingRequests = computed(() =>
  requests.value.filter((item) => item.status === "pending"),
);
</script>

<template>
  <div>
    <Toast />
    <div class="flex items-center justify-between mb-6">
      <h1 class="text-2xl font-bold text-slate-900">成员管理</h1>
      <div class="flex gap-2">
        <button
          v-for="tab in tabs"
          :key="tab.key"
          class="px-4 py-2 rounded-lg text-sm font-semibold transition-colors"
          :class="tabClass(tab.key)"
          @click="activeTab = tab.key"
        >
          {{ tab.label }}
        </button>
      </div>
    </div>

    <div v-if="activeTab === 'members'" class="space-y-6">
      <div
        class="bg-white rounded-xl shadow-sm border border-slate-100 p-4 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="memberRole"
            class="h-9 px-3 rounded border border-slate-200 text-sm focus:border-primary-500 outline-none bg-white"
          >
            <option value="">全部</option>
            <option value="member">成员</option>
            <option value="tenant_admin">管理员</option>
          </select>
        </div>
        <div class="flex items-center gap-2">
          <span class="text-sm font-bold text-slate-500">状态:</span>
          <select
            v-model="memberStatus"
            class="h-9 px-3 rounded border border-slate-200 text-sm focus:border-primary-500 outline-none bg-white"
          >
            <option value="">全部</option>
            <option value="verified">已审核</option>
            <option value="banned">已封禁</option>
            <option value="active">正常</option>
          </select>
        </div>
        <div class="ml-auto relative w-72">
          <i
            class="pi pi-search absolute left-3 top-1/2 -translate-y-1/2 text-slate-400"
          ></i>
          <input
            type="text"
            v-model="memberKeyword"
            @keyup.enter="fetchMembers"
            placeholder="搜索昵称/手机号..."
            class="w-full h-9 pl-9 pr-4 rounded border border-slate-200 text-sm focus:border-primary-500 outline-none"
          />
        </div>
        <button
          class="px-4 py-2 rounded-lg bg-slate-900 text-white text-sm font-semibold"
          @click="fetchMembers"
        >
          筛选
        </button>
      </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">角色</th>
              <th class="px-6 py-4">状态</th>
              <th class="px-6 py-4">加入时间</th>
              <th class="px-6 py-4 text-right">操作</th>
            </tr>
          </thead>
          <tbody class="divide-y divide-slate-100">
            <tr v-if="loading.members">
              <td colspan="5" class="px-6 py-6 text-center text-slate-500">
                加载中...
              </td>
            </tr>
            <tr v-else-if="members.length === 0">
              <td colspan="5" class="px-6 py-8 text-center text-slate-400">
                暂无成员数据
              </td>
            </tr>
            <tr
              v-for="member in members"
              :key="member.id"
              class="hover:bg-slate-50"
            >
              <td class="px-6 py-4">
                <div class="flex items-center gap-3">
                  <img
                    :src="
                      member.user?.avatar ||
                      `https://api.dicebear.com/7.x/avataaars/svg?seed=${member.user?.id}`
                    "
                    class="w-10 h-10 rounded-full object-cover"
                  />
                  <div>
                    <div class="font-semibold text-slate-900">
                      {{
                        member.user?.nickname || member.user?.username || "-"
                      }}
                    </div>
                    <div class="text-xs text-slate-400">
                      {{ member.user?.phone || "--" }}
                    </div>
                  </div>
                </div>
              </td>
              <td class="px-6 py-4 text-slate-700">
                {{ member.role_description?.join(" / ") || "成员" }}
              </td>
              <td class="px-6 py-4">
                <span
                  class="px-2 py-1 rounded-full text-xs font-semibold"
                  :class="`${memberStatusStyle(member.status).bg} ${memberStatusStyle(member.status).text}`"
                >
                  {{ member.status_description || member.status }}
                </span>
              </td>
              <td class="px-6 py-4 text-slate-500">
                {{ member.created_at || "--" }}
              </td>
              <td class="px-6 py-4 text-right">
                <button
                  class="text-rose-600 text-sm font-semibold hover:text-rose-700"
                  @click="removeMember(member)"
                >
                  移除
                </button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <div v-else-if="activeTab === 'requests'" class="space-y-6">
      <div
        class="bg-white rounded-xl shadow-sm border border-slate-100 p-4 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="requestStatus"
            class="h-9 px-3 rounded border border-slate-200 text-sm focus:border-primary-500 outline-none bg-white"
          >
            <option value="pending">待审核</option>
            <option value="approved">已通过</option>
            <option value="rejected">已拒绝</option>
            <option value="">全部</option>
          </select>
        </div>
        <div class="ml-auto relative w-72">
          <i
            class="pi pi-search absolute left-3 top-1/2 -translate-y-1/2 text-slate-400"
          ></i>
          <input
            type="text"
            v-model="requestKeyword"
            @keyup.enter="fetchJoinRequests"
            placeholder="搜索昵称/手机号..."
            class="w-full h-9 pl-9 pr-4 rounded border border-slate-200 text-sm focus:border-primary-500 outline-none"
          />
        </div>
        <button
          class="px-4 py-2 rounded-lg bg-slate-900 text-white text-sm font-semibold"
          @click="fetchJoinRequests"
        >
          筛选
        </button>
      </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">申请理由</th>
              <th class="px-6 py-4">状态</th>
              <th class="px-6 py-4">申请时间</th>
              <th class="px-6 py-4 text-right">操作</th>
            </tr>
          </thead>
          <tbody class="divide-y divide-slate-100">
            <tr v-if="loading.requests">
              <td colspan="5" class="px-6 py-6 text-center text-slate-500">
                加载中...
              </td>
            </tr>
            <tr v-else-if="requests.length === 0">
              <td colspan="5" class="px-6 py-8 text-center text-slate-400">
                暂无申请记录
              </td>
            </tr>
            <tr v-for="req in requests" :key="req.id" class="hover:bg-slate-50">
              <td class="px-6 py-4">
                <div class="flex items-center gap-3">
                  <img
                    :src="
                      req.user?.avatar ||
                      `https://api.dicebear.com/7.x/avataaars/svg?seed=${req.user?.id}`
                    "
                    class="w-10 h-10 rounded-full object-cover"
                  />
                  <div>
                    <div class="font-semibold text-slate-900">
                      {{ req.user?.nickname || req.user?.username || "-" }}
                    </div>
                    <div class="text-xs text-slate-400">
                      {{ req.user?.phone || "--" }}
                    </div>
                  </div>
                </div>
              </td>
              <td class="px-6 py-4 text-slate-600">
                {{ req.reason || "-" }}
              </td>
              <td class="px-6 py-4">
                <span
                  class="px-2 py-1 rounded-full text-xs font-semibold"
                  :class="`${requestStatusStyle(req.status).bg} ${requestStatusStyle(req.status).text}`"
                >
                  {{ req.status_description || req.status }}
                </span>
              </td>
              <td class="px-6 py-4 text-slate-500">
                {{ req.created_at || "--" }}
              </td>
              <td class="px-6 py-4 text-right">
                <div
                  v-if="req.status === 'pending'"
                  class="flex justify-end gap-2"
                >
                  <button
                    class="px-3 py-1 text-sm rounded-lg bg-emerald-500 text-white"
                    @click="openReviewDialog(req, 'approve')"
                  >
                    通过
                  </button>
                  <button
                    class="px-3 py-1 text-sm rounded-lg bg-rose-500 text-white"
                    @click="openReviewDialog(req, 'reject')"
                  >
                    拒绝
                  </button>
                </div>
                <span v-else class="text-slate-400 text-sm">已处理</span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <div v-if="pendingRequests.length === 0" class="text-sm text-slate-500">
        当前暂无待审核申请。
      </div>
    </div>

    <div v-else class="space-y-6">
      <div class="flex items-center justify-between">
        <div
          class="bg-white rounded-xl shadow-sm border border-slate-100 p-4 flex gap-4 items-center"
        >
          <div class="flex items-center gap-2">
            <span class="text-sm font-bold text-slate-500">状态:</span>
            <select
              v-model="inviteStatus"
              class="h-9 px-3 rounded border border-slate-200 text-sm focus:border-primary-500 outline-none bg-white"
            >
              <option value="">全部</option>
              <option value="active">可用</option>
              <option value="disabled">已撤销</option>
              <option value="expired">已过期</option>
            </select>
          </div>
          <button
            class="px-4 py-2 rounded-lg bg-slate-900 text-white text-sm font-semibold"
            @click="fetchInvites"
          >
            筛选
          </button>
        </div>
        <button
          class="px-4 py-2 rounded-lg bg-primary-600 text-white text-sm font-semibold shadow-sm"
          @click="openInviteDialog"
        >
          <i class="pi pi-plus mr-1"></i> 新建邀请
        </button>
      </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">状态</th>
              <th class="px-6 py-4">使用情况</th>
              <th class="px-6 py-4">过期时间</th>
              <th class="px-6 py-4">备注</th>
              <th class="px-6 py-4 text-right">操作</th>
            </tr>
          </thead>
          <tbody class="divide-y divide-slate-100">
            <tr v-if="loading.invites">
              <td colspan="6" class="px-6 py-6 text-center text-slate-500">
                加载中...
              </td>
            </tr>
            <tr v-else-if="invites.length === 0">
              <td colspan="6" class="px-6 py-8 text-center text-slate-400">
                暂无邀请记录
              </td>
            </tr>
            <tr
              v-for="invite in invites"
              :key="invite.id"
              class="hover:bg-slate-50"
            >
              <td class="px-6 py-4 font-mono text-slate-700">
                {{ invite.code }}
              </td>
              <td class="px-6 py-4">
                <span
                  class="px-2 py-1 rounded-full text-xs font-semibold"
                  :class="`${inviteStatusStyle(invite.status).bg} ${inviteStatusStyle(invite.status).text}`"
                >
                  {{ invite.status_description || invite.status }}
                </span>
              </td>
              <td class="px-6 py-4 text-slate-600">
                {{ invite.used_count }} / {{ invite.max_uses }}
              </td>
              <td class="px-6 py-4 text-slate-500">
                {{ invite.expires_at || "长期有效" }}
              </td>
              <td class="px-6 py-4 text-slate-500">
                {{ invite.remark || "-" }}
              </td>
              <td class="px-6 py-4 text-right">
                <button
                  v-if="invite.status === 'active'"
                  class="text-rose-600 text-sm font-semibold hover:text-rose-700"
                  @click="disableInvite(invite)"
                >
                  撤销
                </button>
                <span v-else class="text-slate-400 text-sm">--</span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <Dialog
      v-model:visible="inviteDialog"
      modal
      header="新建邀请"
      class="w-[420px]"
    >
      <div class="space-y-4">
        <div>
          <label class="block text-sm text-slate-600 mb-2">最大使用次数</label>
          <input
            type="number"
            min="1"
            v-model="inviteForm.max_uses"
            class="w-full h-9 px-3 rounded border border-slate-200 text-sm focus:border-primary-500 outline-none"
          />
        </div>
        <div>
          <label class="block text-sm text-slate-600 mb-2">过期时间</label>
          <input
            type="datetime-local"
            v-model="inviteForm.expires_at"
            class="w-full h-9 px-3 rounded border border-slate-200 text-sm focus:border-primary-500 outline-none"
          />
        </div>
        <div>
          <label class="block text-sm text-slate-600 mb-2">备注</label>
          <input
            type="text"
            v-model="inviteForm.remark"
            placeholder="可选"
            class="w-full h-9 px-3 rounded border border-slate-200 text-sm focus:border-primary-500 outline-none"
          />
        </div>
      </div>
      <template #footer>
        <button
          class="px-4 py-2 rounded-lg border border-slate-200 text-sm text-slate-600 mr-2"
          @click="inviteDialog = false"
        >
          取消
        </button>
        <button
          class="px-4 py-2 rounded-lg bg-slate-900 text-white text-sm font-semibold"
          @click="createInvite"
        >
          创建
        </button>
      </template>
    </Dialog>

    <Dialog
      v-model:visible="reviewDialog"
      modal
      header="审核申请"
      class="w-[420px]"
    >
      <div class="space-y-4">
        <div class="text-sm text-slate-600">
          当前操作：
          <span class="font-semibold text-slate-900">{{
            reviewAction === "approve" ? "通过" : "拒绝"
          }}</span>
        </div>
        <div>
          <label class="block text-sm text-slate-600 mb-2">备注说明</label>
          <textarea
            v-model="reviewReason"
            rows="3"
            placeholder="可选"
            class="w-full px-3 py-2 rounded border border-slate-200 text-sm focus:border-primary-500 outline-none"
          ></textarea>
        </div>
      </div>
      <template #footer>
        <button
          class="px-4 py-2 rounded-lg border border-slate-200 text-sm text-slate-600 mr-2"
          @click="reviewDialog = false"
        >
          取消
        </button>
        <button
          class="px-4 py-2 rounded-lg bg-slate-900 text-white text-sm font-semibold"
          @click="submitReview"
        >
          确认
        </button>
      </template>
    </Dialog>
  </div>
</template>
