<template>
  <div class="forum-home">
    <h1>论坛管理</h1>

    <div class="controls">
      <input
          v-model="searchTitle"
          placeholder="搜索帖子标题"
          @keyup.enter="searchPosts"
          class="search-input"
      />
      <button @click="searchPosts" class="btn">搜索</button>
      <button @click="refreshPosts" class="btn btn-refresh">刷新</button>
    </div>

    <div v-if="loading" class="loading">加载中...</div>
    <div v-else>
      <ul class="posts-list">
        <li
            v-for="post in posts"
            :key="post.id"
            @click="goPostDetail(post.id)"
            class="post-card"
        >
          <h3 class="post-title">{{ post.title }}</h3>
          <p class="post-info">
            作者ID: {{ post.userId }} |
            用户名: {{ post.username }} |
            发布时间: {{ formatDateTime(post.createdAt) }}
          </p>

          <button
              class="btn btn-delete"
              @click.stop="deletePost(post.id)"
          >
            删除
          </button>

          <button
              class="btn btn-report"
              @click.stop="openReportList(post)"
          >
            查看举报
          </button>
        </li>
      </ul>

      <div v-if="posts.length === 0" class="no-data">无数据</div>
    </div>

    <!-- 举报弹窗 -->
    <div v-if="showReportModal" class="modal-overlay" @click.self="closeReportList">
      <div class="modal-content">
        <h3>举报列表 - 帖子：《{{ currentPost?.title }}》</h3>

        <div v-if="reportLoading" class="loading">加载举报中...</div>
        <ul v-else-if="reports.length" class="report-list">
          <li v-for="report in reports" :key="report.id" class="report-item">
            <p><strong>举报人ID：</strong> {{ report.reporterId }}</p>
            <p><strong>举报内容：</strong> {{ report.reason }}</p>
            <p><strong>举报时间：</strong> {{ formatDateTime(report.createdAt) }}</p>
          </li>
        </ul>

        <div v-else class="no-data">暂无举报</div>

        <button class="btn btn-cancel" @click="closeReportList">关闭</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'
import { useRouter } from 'vue-router'
import dayjs from 'dayjs'

const formatDateTime = (isoString) => {
  if (!isoString) return ''
  return dayjs(isoString).format('YYYY年MM月DD日 HH:mm:ss')
}

const searchTitle = ref('')
const posts = ref([])
const loading = ref(false)

const showReportModal = ref(false)
const currentPost = ref(null)
const reports = ref([])
const reportLoading = ref(false)

const router = useRouter()
const userId = localStorage.getItem('userId')

const fetchPosts = async (title = '') => {
  loading.value = true
  try {
    const res = await axios.get('http://localhost:8080/forum/posts', {
      params: { title }
    })
    posts.value = res.data
  } catch (err) {
    console.error(err)
    posts.value = []
  } finally {
    loading.value = false
  }
}

const searchPosts = () => {
  fetchPosts(searchTitle.value)
}

const refreshPosts = () => {
  fetchPosts(searchTitle.value)
}

const goPostDetail = (postId) => {
  router.push(`/post/${postId}`)
}

const deletePost = async (postId) => {
  if (!confirm('确定要删除该帖子吗？')) {
    return
  }
  try {
    await axios.delete(`http://localhost:8080/forum/post/${postId}`)
    alert('删除成功')
    fetchPosts(searchTitle.value)
  } catch (error) {
    console.error(error)
    alert('删除失败')
  }
}

// 打开举报列表弹窗
const openReportList = async (post) => {
  currentPost.value = post
  showReportModal.value = true
  reportLoading.value = true
  reports.value = []
  try {
    const res = await axios.get(`http://localhost:8080/forum/post/reports/${post.id}`)
    reports.value = res.data || []
  } catch (error) {
    console.error('获取举报列表失败:', error)
    reports.value = []
  } finally {
    reportLoading.value = false
  }
}

// 关闭举报列表弹窗
const closeReportList = () => {
  showReportModal.value = false
  currentPost.value = null
  reports.value = []
}

onMounted(() => {
  fetchPosts()
})
</script>

<style scoped>
.forum-home {
  max-width: 720px;
  margin: 0 auto;
  padding: 20px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #333;
}

.controls {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.search-input {
  flex: 1;
  padding: 8px 12px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  transition: border-color 0.3s;
}
.search-input:focus {
  outline: none;
  border-color: #409eff;
  box-shadow: 0 0 5px rgba(64, 158, 255, 0.5);
}

.btn {
  padding: 8px 16px;
  border: none;
  background-color: #409eff;
  color: white;
  font-weight: 600;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}
.btn:hover {
  background-color: #66b1ff;
}
.btn-refresh {
  background-color: #67c23a;
}
.btn-refresh:hover {
  background-color: #85ce61;
}

.loading,
.no-data {
  font-size: 18px;
  text-align: center;
  color: #888;
  margin-top: 40px;
}

.posts-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.post-card {
  background-color: #fff;
  border: 1px solid #ebeef5;
  border-radius: 8px;
  padding: 16px 20px;
  box-shadow: 0 2px 6px rgb(0 0 0 / 0.05);
  cursor: pointer;
  transition: box-shadow 0.3s, border-color 0.3s;
  position: relative;
}
.post-card:hover {
  box-shadow: 0 8px 20px rgb(0 0 0 / 0.12);
  border-color: #409eff;
}

.post-title {
  margin: 0 0 8px;
  color: #409eff;
  font-weight: 700;
  font-size: 20px;
}

.post-info {
  margin: 0;
  font-size: 14px;
  color: #666;
}

.btn-delete {
  position: absolute;
  top: 16px;
  right: 20px;
  background-color: #f56c6c;
  color: white;
  border: none;
  padding: 4px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
  transition: background-color 0.3s;
  z-index: 10;
}
.btn-delete:hover {
  background-color: #f78989;
}

/* 新增举报按钮样式 */
.btn-report {
  position: absolute;
  top: 16px;
  right: 80px;
  background-color: #e6a23c;
  color: white;
  border: none;
  padding: 4px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
  transition: background-color 0.3s;
  z-index: 10;
}
.btn-report:hover {
  background-color: #ebb563;
}

/* 弹窗样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.modal-content {
  background: white;
  padding: 20px;
  border-radius: 8px;
  width: 500px;
  max-width: 95%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.report-list {
  list-style: none;
  padding: 0;
  margin: 16px 0 0 0;
  max-height: 400px;
  overflow-y: auto;
  border-top: 1px solid #ebeef5;
}

.report-item {
  border-bottom: 1px solid #ebeef5;
  padding: 12px 0;
  font-size: 14px;
  color: #444;
}

.report-item p {
  margin: 4px 0;
}

.btn-cancel {
  background-color: #909399;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
  margin-top: 15px;
}
.btn-cancel:hover {
  background-color: #a6a9ad;
}
</style>
查看举报就一个按钮，点击跳出表单