<template>
  <div class="page">
    <h2 class="page-title">{{ t("comments.title") }}</h2>
    <div class="toolbar">
      <div class="toolbar-left">
        <select v-model="statusFilter" class="toolbar-select">
          <option value="">{{ t("comments.statusFilter.all") }}</option>
          <option value="approved">{{ t("comments.statusFilter.approved") }}</option>
          <option value="pending">{{ t("comments.statusFilter.pending") }}</option>
          <option value="rejected">{{ t("comments.statusFilter.rejected") }}</option>
        </select>
      </div>
      <div class="toolbar-right">
        <button class="toolbar-button" @click="goPage(1)">
          {{ t("comments.refresh") }}
        </button>
      </div>
    </div>
    <div v-if="loading" class="page-hint">{{ t("common.loading") }}</div>
    <div v-else-if="error" class="page-error">{{ error }}</div>
    <div v-else>
      <div class="comment-table">
        <div class="table-header">
          <div class="table-cell table-cell-author">{{ t("comments.table.author") }}</div>
          <div class="table-cell table-cell-content">
            {{ t("comments.table.content") }}
          </div>
          <div class="table-cell table-cell-path">{{ t("comments.table.path") }}</div>
          <div class="table-cell table-cell-status">{{ t("comments.table.status") }}</div>
          <div class="table-cell table-cell-actions">
            {{ t("comments.table.actions") }}
          </div>
        </div>
        <div v-for="item in filteredComments" :key="item.id" class="table-row">
          <div class="table-cell table-cell-author">
            <div class="cell-author-wrapper">
              <img
                v-if="item.avatar"
                :src="item.avatar"
                class="cell-avatar"
                :alt="item.name"
              />
              <div class="cell-author-main">
                <div class="cell-author-name">
                  {{ item.name }}
                  <span v-if="item.isAdmin" class="cell-admin-tag">
                    <svg
                      viewBox="0 0 22 22"
                      :aria-label="t('comments.table.admin')"
                      role="img"
                      class="cwd-admin-icon"
                      style="
                        width: 15px;
                        height: 15px;
                        fill: currentColor;
                        color: #db850d;
                        vertical-align: -0.15em;
                      "
                    >
                      <g>
                        <path
                          d="M20.396 11c-.018-.646-.215-1.275-.57-1.816-.354-.54-.852-.972-1.438-1.246.223-.607.27-1.264.14-1.897-.131-.634-.437-1.218-.882-1.687-.47-.445-1.053-.75-1.687-.882-.633-.13-1.29-.083-1.897.14-.273-.587-.704-1.086-1.245-1.44S11.647 1.62 11 1.604c-.646.017-1.273.213-1.813.568s-.969.854-1.24 1.44c-.608-.223-1.267-.272-1.902-.14-.635.13-1.22.436-1.69.882-.445.47-.749 1.055-.878 1.688-.13.633-.08 1.29.144 1.896-.587.274-1.087.705-1.443 1.245-.356.54-.555 1.17-.574 1.817.02.647.218 1.276.574 1.817.356.54.856.972 1.443 1.245-.224.606-.274 1.263-.144 1.896.13.634.433 1.218.877 1.688.47.443 1.054.747 1.687.878.633.132 1.29.084 1.897-.136.274.586.705 1.084 1.246 1.439.54.354 1.17.551 1.816.569.647-.016 1.276-.213 1.817-.567s.972-.854 1.245-1.44c.604.239 1.266.296 1.903.164.636-.132 1.22-.447 1.68-.907.46-.46.776-1.044.908-1.681s.075-1.299-.165-1.903c.586-.274 1.084-.705 1.439-1.246.354-.54.551-1.17.569-1.816zM9.662 14.85l-3.429-3.428 1.293-1.302 2.072 2.072 4.4-4.794 1.347 1.246z"
                        ></path>
                      </g>
                    </svg>
                  </span>
                </div>
                <div class="cell-author-email">
                  <span
                    class="cell-email-text"
                    @click="handleBlockEmail(item)"
                    :title="t('comments.actions.blockEmail')"
                  >
                    {{ item.email }}
                  </span>
                </div>
                <span class="cell-time">{{ formatDate(item.created) }}</span>
                <div v-if="item.ipAddress" class="cell-author-ip">
                  <span
                    class="cell-ip-text"
                    @click="handleBlockIp(item)"
                    :title="t('comments.actions.blockIp')"
                    >{{ item.ipAddress }}</span
                  >
                </div>
              </div>
            </div>
          </div>
          <div class="table-cell table-cell-content">
            <div class="cell-content-text" v-html="item.contentHtml"></div>
          </div>
          <div class="table-cell table-cell-path">
            <a
              :href="item.postSlug"
              target="_blank"
              class="cell-path"
              :title="item.postSlug"
            >
              {{ item.postUrl || item.postSlug }}
            </a>
          </div>
          <div class="table-cell table-cell-status">
            <div class="cell-status-wrapper">
              <span class="cell-status" :class="`cell-status-${item.status}`">
                {{ formatStatus(item.status) }}
              </span>
              <span
                v-if="item.priority && item.priority > 1"
                :title="String(item.priority)"
                class="cell-status cell-pin-flag"
              >
                {{ t("comments.actions.pin") }}
              </span>
              <span class="cell-status cell-likes-number" v-if="item.likes !== 0">
                <PhThumbsUp :size="13" />

                {{
                  typeof item.likes === "number" &&
                  Number.isFinite(item.likes) &&
                  item.likes >= 0
                    ? item.likes
                    : 0
                }}</span
              >
            </div>
          </div>
          <div class="table-cell table-cell-actions">
            <div class="table-actions">
              <select
                class="status-select"
                :value="item.status"
                @change="handleStatusChange(item, $event)"
              >
                <option value="approved">{{ t("comments.actions.approve") }}</option>
                <option value="pending">{{ t("comments.actions.pending") }}</option>
                <option value="rejected">{{ t("comments.actions.reject") }}</option>
              </select>
              <button class="table-action" @click="openEdit(item)">
                {{ t("comments.actions.edit") }}
              </button>
              <button
                class="table-action table-action-danger"
                @click="removeComment(item)"
              >
                {{ t("comments.actions.delete") }}
              </button>
            </div>
          </div>
        </div>
        <div v-if="filteredComments.length === 0" class="table-empty">
          {{ t("comments.empty") }}
        </div>
      </div>
      <div v-if="pagination.total > 1" class="pagination">
        <button
          class="pagination-button"
          :disabled="pagination.page <= 1"
          @click="goPage(pagination.page - 1)"
        >
          {{ t("comments.pagination.prev") }}
        </button>
        <button
          class="pagination-button"
          :class="{ 'pagination-button-active': pagination.page === 1 }"
          :disabled="pagination.page === 1"
          @click="goPage(1)"
        >
          1
        </button>
        <span
          v-if="visiblePages.length && visiblePages[0] > 2"
          class="pagination-ellipsis"
        >
          ...
        </span>
        <template v-for="page in visiblePages">
          <button
            v-if="page !== 1 && page !== pagination.total"
            :key="page"
            class="pagination-button"
            :class="{ 'pagination-button-active': page === pagination.page }"
            :disabled="page === pagination.page"
            @click="goPage(page)"
          >
            {{ page }}
          </button>
        </template>
        <span
          v-if="
            visiblePages.length &&
            visiblePages[visiblePages.length - 1] < pagination.total - 1
          "
          class="pagination-ellipsis"
        >
          ...
        </span>
        <button
          v-if="pagination.total > 1"
          class="pagination-button"
          :class="{ 'pagination-button-active': pagination.page === pagination.total }"
          :disabled="pagination.page === pagination.total"
          @click="goPage(pagination.total)"
        >
          {{ pagination.total }}
        </button>
        <button
          class="pagination-button"
          :disabled="pagination.page >= pagination.total"
          @click="goPage(pagination.page + 1)"
        >
          {{ t("comments.pagination.next") }}
        </button>
        <div class="pagination-jump">
          <span>{{ t("comments.pagination.jumpTo") }}</span>
          <input
            v-model="jumpPageInput"
            class="pagination-input"
            type="number"
            min="1"
            :max="pagination.total"
            @keyup.enter="handleJumpPage"
          />
          <span>{{ t("comments.pagination.page") }}</span>
          <button class="pagination-button" @click="handleJumpPage">
            {{ t("comments.pagination.confirm") }}
          </button>
        </div>
      </div>
    </div>
    <ModalEdit
      :visible="editVisible"
      :form="editForm"
      :saving="editSaving"
      @close="closeEdit"
      @submit="submitEdit"
    />
  </div>
</template>

<script setup lang="ts">
import "../../styles/markdown.css";
import { onMounted, ref, computed, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useI18n } from "vue-i18n";
import ModalEdit from "./components/ModalEdit.vue";
import {
  CommentItem,
  fetchComments,
  deleteComment,
  updateCommentStatus,
  updateComment,
  blockIp,
  blockEmail,
} from "../../api/admin";
import { useSite } from "../../composables/useSite";

const { t } = useI18n();
const route = useRoute();
const router = useRouter();

// ... existing refs ...
const comments = ref<CommentItem[]>([]);
const pagination = ref<{ page: number; total: number }>({ page: 1, total: 1 });
const loading = ref(false);
const error = ref("");
const statusFilter = ref("");
const { currentSiteId } = useSite();
const jumpPageInput = ref("");
const editVisible = ref(false);
const editSaving = ref(false);
const editForm = ref<{
  id: number;
  name: string;
  email: string;
  url: string;
  postSlug: string;
  postUrl: string;
  contentText: string;
  status: string;
  priority: number;
} | null>(null);

const searchKeyword = ref(""); // Missing ref in original code snippet but used in template?
// Wait, I saw searchKeyword in original code snippet. I must ensure I don't lose it.
// I will just use the replace string for the specific parts if possible, but I am replacing whole template.
// I need to be careful with script content.

const filteredComments = computed(() => {
  if (!statusFilter.value) {
    return comments.value;
  }
  return comments.value.filter((item) => item.status === statusFilter.value);
});

// ... visiblePages computed ...
const visiblePages = computed(() => {
  const total = pagination.value.total;
  const current = pagination.value.page;
  const maxVisible = 5;
  if (total <= maxVisible) {
    return Array.from({ length: total }, (_, index) => index + 1);
  }
  let start = current - Math.floor(maxVisible / 2);
  let end = current + Math.floor(maxVisible / 2);
  if (start < 1) {
    start = 1;
    end = maxVisible;
  } else if (end > total) {
    end = total;
    start = total - maxVisible + 1;
  }
  const pages: number[] = [];
  for (let i = start; i <= end; i += 1) {
    pages.push(i);
  }
  return pages;
});

function formatDate(value: number) {
  const d = new Date(value);
  if (Number.isNaN(d.getTime())) {
    return String(value);
  }
  return d.toLocaleString();
}

function formatStatus(status: string) {
  if (status === "approved") {
    return t("comments.statusFilter.approved");
  }
  if (status === "pending") {
    return t("comments.statusFilter.pending");
  }
  if (status === "rejected") {
    return t("comments.statusFilter.rejected");
  }
  return status;
}

// ... other functions ...
async function loadComments(page?: number) {
  const targetPage = typeof page === "number" ? page : 1;
  loading.value = true;
  error.value = "";
  try {
    const res = await fetchComments(targetPage, currentSiteId.value);
    comments.value = res.data;
    pagination.value = { page: res.pagination.page, total: res.pagination.total };
  } catch (e: any) {
    error.value = e.message || "加载失败";
  } finally {
    loading.value = false;
  }
}

function updateRoutePage(page: number) {
  const query: Record<string, any> = { ...route.query };
  if (page <= 1) {
    delete query.p;
  } else {
    query.p = String(page);
  }
  delete query.domain;
  router.push({ query });
}

async function goPage(page: number) {
  if (page < 1 || page > pagination.value.total) {
    return;
  }
  updateRoutePage(page);
  await loadComments(page);
}

function handleJumpPage() {
  const value = Number(jumpPageInput.value);
  if (!Number.isFinite(value)) {
    return;
  }
  const page = Math.floor(value);
  if (page < 1 || page > pagination.value.total) {
    return;
  }
  jumpPageInput.value = "";
  updateRoutePage(page);
  loadComments(page);
}

async function changeStatus(item: CommentItem, status: string) {
  try {
    await updateCommentStatus(item.id, status);
    item.status = status;
  } catch (e: any) {
    error.value = e.message || "更新状态失败";
  }
}

function handleStatusChange(item: CommentItem, event: Event) {
  const target = event.target as HTMLSelectElement;
  const status = target.value;
  if (!status || status === item.status) {
    return;
  }
  changeStatus(item, status);
}

async function removeComment(item: CommentItem) {
  if (!window.confirm(t("comments.confirmDelete", { id: item.id }))) {
    return;
  }
  try {
    await deleteComment(item.id);
    comments.value = comments.value.filter((c) => c.id !== item.id);
  } catch (e: any) {
    error.value = e.message || "删除失败";
  }
}

async function handleBlockIp(item: CommentItem) {
  if (!item.ipAddress) {
    return;
  }
  if (!window.confirm(t("comments.confirmBlockIp", { ip: item.ipAddress }))) {
    return;
  }
  try {
    const res = await blockIp(item.ipAddress);
    window.alert(res.message || t("comments.successBlockIp"));
  } catch (e: any) {
    error.value = e.message || "屏蔽 IP 失败";
  }
}

async function handleBlockEmail(item: CommentItem) {
  if (!item.email) {
    return;
  }
  if (!window.confirm(t("comments.confirmBlockEmail", { email: item.email }))) {
    return;
  }
  try {
    const res = await blockEmail(item.email);
    window.alert(res.message || t("comments.successBlockEmail"));
  } catch (e: any) {
    error.value = e.message || "屏蔽邮箱失败";
  }
}

function openEdit(item: CommentItem) {
  editForm.value = {
    id: item.id,
    name: item.name,
    email: item.email,
    url: item.url || "",
    postSlug: item.postSlug || "",
    postUrl: item.postUrl || "",
    contentText: item.contentText,
    status: item.status,
    priority:
      typeof item.priority === "number" && Number.isFinite(item.priority)
        ? item.priority
        : 1,
  };
  editVisible.value = true;
}

function closeEdit() {
  if (editSaving.value) {
    return;
  }
  editVisible.value = false;
  editForm.value = null;
}

async function submitEdit() {
  if (!editForm.value || editSaving.value) {
    return;
  }
  const current = editForm.value;
  const trimmedName = current.name.trim();
  const trimmedEmail = current.email.trim();
  const trimmedContent = current.contentText.trim();
  const trimmedUrl = current.url.trim();
  const trimmedPostSlug = current.postSlug.trim();
  const trimmedPostUrl = current.postUrl.trim();
  const priorityValue =
    typeof current.priority === "number" && Number.isFinite(current.priority)
      ? current.priority
      : 1;
  const commentIndex = comments.value.findIndex((c) => c.id === current.id);
  const existingComment = commentIndex !== -1 ? comments.value[commentIndex] : null;
  const newPostSlug = trimmedPostSlug || existingComment?.postSlug || "";
  if (!trimmedName || !trimmedEmail || !trimmedContent) {
    error.value = "昵称、邮箱和内容不能为空";
    return;
  }
  editSaving.value = true;
  error.value = "";
  try {
    await updateComment({
      id: current.id,
      name: trimmedName,
      email: trimmedEmail,
      url: trimmedUrl || null,
      postUrl: trimmedPostUrl || null,
      postSlug: newPostSlug,
      contentText: trimmedContent,
      status: current.status,
      priority: priorityValue,
    });
    if (commentIndex !== -1) {
      comments.value[commentIndex] = {
        ...comments.value[commentIndex],
        name: trimmedName,
        email: trimmedEmail,
        url: trimmedUrl || null,
        postSlug: newPostSlug,
        postUrl: trimmedPostUrl || null,
        contentText: trimmedContent,
        status: current.status,
        priority: priorityValue,
      };
    }
    closeEdit();
    editVisible.value = false;
  } catch (e: any) {
    error.value = e.message || "更新评论失败";
  } finally {
    editSaving.value = false;
  }
}

onMounted(() => {
  const p = route.query.p;
  let initialPage = 1;
  if (typeof p === "string") {
    const value = Number(p);
    if (Number.isFinite(value) && value >= 1) {
      initialPage = Math.floor(value);
    }
  } else if (Array.isArray(p) && typeof p[0] === "string") {
    const value = Number(p[0]);
    if (Number.isFinite(value) && value >= 1) {
      initialPage = Math.floor(value);
    }
  }

  loadComments(initialPage);
});

watch(currentSiteId, () => {
  updateRoutePage(1);
  loadComments(1);
});
</script>

<style scoped lang="less">
@import "../../styles/components/comments.less";
</style>
