<template>
  <view class="page-container">
    <view class="nav-bar" :style="{ paddingTop: statusBarHeight + 'px' }">
      <view class="nav-content">
        <view class="nav-side left" @tap="goBack">
          <text class="back-icon"></text>
        </view>
        <text class="nav-title">发起评分</text>
        <view class="nav-side right" @tap="handlePreview">
          <text class="preview-text">预览</text>
        </view>
      </view>
    </view>

    <view :style="{ height: statusBarHeight + 44 + 'px' }"></view>

    <view class="content-wrap">
      <view class="topic-editor card-block">
        <textarea
          v-model="formData.title"
          class="topic-input"
          maxlength="40"
          placeholder="输入一个有趣的话题..."
          placeholder-class="topic-placeholder"
          auto-height
        />
        <!-- <textarea
          v-model="formData.description"
          class="desc-input"
          maxlength="120"
          placeholder="简单介绍一下这个评分话题..."
          placeholder-class="desc-placeholder"
          auto-height
        /> -->
      </view>

      <!-- <view class="cover-card" :class="{ 'has-cover': formData.coverUrl }" @tap="chooseCover">
        <image
          v-if="formData.coverUrl"
          :src="FILE_BASE_URL + formData.coverUrl"
          class="cover-image"
          mode="aspectFill"
        />
        <view v-else class="cover-placeholder">
          <view class="cover-icon"></view>
          <text class="cover-text">上传封面图</text>
        </view>
      </view> -->

      <view class="category-group">
        <view
          v-for="category in categories"
          :key="category.id"
          class="category-chip"
          :class="{ active: formData.categoryId === category.id }"
          @tap="formData.categoryId = category.id"
        >
          {{ category.title }}
        </view>
      </view>

      <view class="section-header">
        <text class="section-title">评分对象</text>
        <text class="section-count">{{ participants.length }}/20</text>
      </view>

      <view class="participant-list">
        <view
          v-for="(item, index) in participants"
          :key="item.id"
          class="participant-card"
        >
          <view class="participant-main">
            <view class="participant-avatar-wrap" @tap="chooseParticipantAvatar(index)">
              <image
                v-if="item.avatar"
                :src="FILE_BASE_URL + item.avatar"
                class="participant-avatar"
                mode="aspectFill"
              />
              <view v-else class="participant-avatar empty">
                <view class="camera-small"></view>
              </view>
            </view>
            <view class="participant-info">
              <input
                v-model="item.name"
                class="participant-name"
                maxlength="12"
                placeholder="输入评价对象"
                placeholder-class="participant-placeholder"
              />
              <!-- <input
                v-model="item.desc"
                class="participant-desc"
                maxlength="24"
                placeholder="一句话简介"
                placeholder-class="participant-placeholder"
              /> -->
            </view>
          </view>
          <view class="participant-actions">
            <!-- <text class="drag-icon">≡</text> -->
            <text class="delete-icon" @tap="removeParticipant(item.id)">🗑</text>
          </view>
        </view>

        <view class="add-participant" @tap="addParticipant">
          <text class="add-plus">+</text>
          <text class="add-text">添加评分对象</text>
        </view>
      </view>

      <!-- <view class="settings-card card-block">
        <view class="setting-row">
          <view class="setting-info">
            <text class="setting-title">允许用户锐评</text>
            <text class="setting-desc">开启后用户可以对评分对象发表评论</text>
          </view>
          <switch
            :checked="formData.allowComment"
            color="#4d44f1"
            @change="formData.allowComment = $event.detail.value"
          />
        </view>

        <view class="setting-row">
          <view class="setting-info">
            <text class="setting-title">允许开启PK</text>
            <text class="setting-desc">启用后系统会自动生成对象间的对比PK</text>
          </view>
          <switch
            :checked="formData.allowPk"
            color="#4d44f1"
            @change="formData.allowPk = $event.detail.value"
          />
        </view>

        <view class="setting-row last">
          <view class="setting-info">
            <text class="setting-title">匿名评分</text>
            <text class="setting-desc">用户可以隐藏个人身份进行打分</text>
          </view>
          <switch
            :checked="formData.anonymous"
            color="#4d44f1"
            @change="formData.anonymous = $event.detail.value"
          />
        </view>
      </view> -->
    </view>

    <view class="footer-bar">
      <button class="submit-btn" @tap="handleSubmit">发布夯拉评分</button>
    </view>
  </view>
</template>

<script setup>
import { reactive, ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { getStatusBarHeight } from "@/utils/system";
import { releaseTopic, fetchTopicCategories } from "@/api/topic";
import { smartNavigateBack } from "@/utils/page";
import {
  uploadImage,
  chooseAndUploadImage,
} from "@/utils/common.js";
import { FILE_BASE_URL } from "@/utils/constants";

const statusBarHeight = ref(getStatusBarHeight() || 0);

const categories = ref([]);

const loadCategories = async () => {
  try {
    const res = await fetchTopicCategories();
    // 假设返回结构为 { data: { list: [{ id: 1, title: '历史' }, ...] } } 
    // 或者直接是一个数组 [{ id: 1, title: '历史' }, ...]
    // 根据实际返回结构调整
    const list = res?.data?.list || res?.list || res || [];
    categories.value = list;
    
    // 如果存在分类且未选择，则默认选中第一个
    if (categories.value.length > 0 && !formData.categoryId) {
      formData.categoryId = categories.value[0].id;
    }
  } catch (error) {
    console.error("获取分类失败:", error);
  }
};

onLoad(() => {
  loadCategories();
});

const formData = reactive({
  title: "",
  description: "",
  coverUrl: "",
  categoryId: "",
  allowComment: true,
  allowPk: true,
  anonymous: false,
});

const tagInput = ref("");

const participants = ref([
  {
    id: 1,
    name: "",
    desc: "一句话简介",
    avatar: "",
  },
]);

const goBack = () => {
  smartNavigateBack();
};

const handlePreview = () => {
  uni.showToast({
    title: "预览功能待接入",
    icon: "none",
  });
};

const chooseCover = async () => {
  try {
    const urls = await chooseAndUploadImage({ count: 1 });
    if (urls && urls.length > 0) {
      formData.coverUrl = urls[0];
    }
  } catch (e) {
    console.error("选择封面失败", e);
  }
};

const chooseParticipantAvatar = async (index) => {
  try {
    const urls = await chooseAndUploadImage({ count: 1 });
    if (urls && urls.length > 0) {
      participants.value[index].avatar = urls[0];
    }
  } catch (e) {
    console.error("选择评分对象头像失败", e);
  }
};

const handleAddTag = () => {
  const value = tagInput.value.trim();
  if (!value) return;
  if (formData.tags.includes(value)) {
    uni.showToast({
      title: "标签已存在",
      icon: "none",
    });
    return;
  }
  formData.tags.push(value);
  tagInput.value = "";
};

const removeTag = (index) => {
  formData.tags.splice(index, 1);
};

const addParticipant = () => {
  if (participants.value.length >= 20) {
    uni.showToast({
      title: "最多添加20个对象",
      icon: "none",
    });
    return;
  }
  participants.value.push({
    id: Date.now(),
    name: "",
    desc: "",
    avatar: "",
  });
};

const removeParticipant = (id) => {
  if (participants.value.length <= 1) {
    uni.showToast({
      title: "至少保留1个对象",
      icon: "none",
    });
    return;
  }
  participants.value = participants.value.filter((item) => item.id !== id);
};

const handleSubmit = async () => {
  if (!formData.title.trim()) {
    uni.showToast({ title: '请输入话题', icon: 'none' });
    return;
  }
  // if (!formData.coverUrl) {
  //   uni.showToast({ title: '请上传封面图', icon: 'none' });
  //   return;
  // }
  if (!formData.categoryId) {
    uni.showToast({ title: '请选择话题分类', icon: 'none' });
    return;
  }
  
  // 检查是否有空的对象名称
  const hasEmptyName = participants.value.some(p => !p.name.trim());
  if (hasEmptyName) {
    uni.showToast({ title: '请完善评分对象名称', icon: 'none' });
    return;
  }

  uni.showLoading({ title: '发布中...' });
  try {
    const payload = {
      ...formData,
      participants: participants.value,
    };
    await releaseTopic(payload);

    // 记录发布事件
    uni.$trackRecord({
      eventName: 'release_topic',
      eventType: 'release',
      elementContent: `话题_${payload.title}`,
      customParams: {
        title: payload.title,
        categoryId: payload.categoryId,
      }
    });
    
    uni.hideLoading();
    uni.showToast({
      title: "发布成功",
      icon: "success",
    });
    
    smartNavigateBack({ delay: 1500 });
  } catch (error) {
    uni.hideLoading();
    uni.showToast({
      title: "发布失败，请重试",
      icon: "none",
    });
    console.error("发布失败:", error);
  }
};
</script>

<style lang="scss" scoped>
.page-container {
  min-height: 100vh;
  background: #f8f9fc; /* 整体背景调亮 */
  padding-bottom: 180rpx;
  box-sizing: border-box;
}

.nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(244, 245, 251, 0.96);
  backdrop-filter: blur(18rpx);
}

.nav-content {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24rpx;
}

.nav-side {
  width: 120rpx;
  display: flex;
  align-items: center;
}

.nav-side.right {
  justify-content: flex-end;
}

.back-icon {
  width: 36rpx;
  height: 36rpx;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23222' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'%3E%3C/polyline%3E%3C/svg%3E");
  background-size: cover;
}

.nav-title {
  font-size: 34rpx;
  font-weight: 700;
  color: #171717;
}

.preview-text {
  font-size: 28rpx;
  color: #5f63ff;
}

.content-wrap {
  padding: 24rpx;
}

/* 统一的卡片风格 */
.card-block {
  background: #ffffff;
  border-radius: 36rpx; /* 增大圆角，与设计图更统一 */
  box-shadow: 0 4rpx 20rpx rgba(72, 82, 130, 0.03); /* 柔和的阴影 */
  margin-bottom: 32rpx; /* 增加块级间距 */
  border: 2rpx solid #eef0f7; /* 统一的极淡边框 */
}

.topic-editor {
  padding: 32rpx; /* 增加内边距 */
  margin-bottom: 24rpx;
}

.topic-input,
.desc-input {
  width: 100%;
  min-height: 52rpx;
  color: #232323;
}

.topic-input {
  font-size: 44rpx; /* 稍微减小标题字号，显得更精致 */
  font-weight: 800; /* 加粗 */
  margin-bottom: 16rpx; /* 增加行距 */
}

.desc-input {
  font-size: 28rpx;
  color: #666;
  line-height: 1.5;
}

.topic-placeholder {
  font-size: 44rpx;
  font-weight: 800;
  color: #c1c2d3;
}

.desc-placeholder {
  font-size: 28rpx;
  color: #b8b9c9;
}

.cover-card {
  height: 340rpx;
  border-radius: 36rpx;
  background: #e9ecf5;
  overflow: hidden;
  margin-bottom: 28rpx;
  border: 2rpx dashed #d1d5db;
}

.cover-card.has-cover {
  border: none; /* 有图片时去掉虚线框 */
}

.cover-image {
  width: 100%;
  height: 100%;
}

.cover-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #77728b;
}

.cover-icon {
  width: 80rpx; /* 图标稍微放大 */
  height: 80rpx;
  margin-bottom: 24rpx;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2377728b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'%3E%3C/circle%3E%3Cpolyline points='21 15 16 10 5 21'%3E%3C/polyline%3E%3C/svg%3E"); /* 替换为更像图片的占位图标 */
  background-size: cover;
}

.cover-text {
  font-size: 30rpx;
}

.category-group {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
  margin-bottom: 24rpx;
}

.category-chip {
  min-width: 88rpx;
  padding: 14rpx 32rpx; /* 增加内边距 */
  border-radius: 999rpx;
  background: #e9ecf5; /* 背景调浅一些，更接近设计图 */
  color: #5c6176; /* 字体颜色调浅 */
  font-size: 28rpx; /* 字体调大 */
  font-weight: 500;
  text-align: center;
  transition: all 0.2s ease;
}

.category-chip.active {
  background: linear-gradient(135deg, #6c4af2, #883cf3); /* 更接近设计图的紫色渐变 */
  color: #fff;
  font-weight: 700;
  box-shadow: 0 8rpx 20rpx rgba(108, 74, 242, 0.3); /* 调整阴影颜色 */
}

.tag-box {
  padding: 24rpx 32rpx; /* 增加内边距 */
  margin-bottom: 32rpx;
}

.selected-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12rpx;
}

.tag-chip {
  padding: 8rpx 20rpx;
  background-color: #f0f4ff; /* 浅蓝色背景 */
  border-radius: 8rpx;
  color: #4e46e5;
  font-size: 26rpx;
  display: flex;
  align-items: center;
}

.tag-chip text {
  margin-right: 8rpx;
}

.tag-chip::after {
  content: "×";
  font-size: 28rpx;
  color: #8c89e8;
  margin-left: 4rpx;
}

.tag-input {
  flex: 1;
  min-width: 180rpx;
  height: 52rpx;
  font-size: 26rpx;
  color: #555;
}

.tag-input-placeholder {
  color: #b9b7c7;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24rpx; /* 增加底部间距 */
  padding: 0 8rpx; /* 标题与内容对齐 */
}

.section-title {
  font-size: 34rpx; /* 调整大小 */
  font-weight: 800; /* 加粗 */
  color: #171717;
}

.section-count {
  min-width: 78rpx;
  height: 46rpx;
  line-height: 46rpx;
  text-align: center;
  border-radius: 14rpx;
  background: #e6e9f7;
  color: #5c6176;
  font-size: 26rpx;
}

.participant-list {
  margin-bottom: 32rpx;
}

.participant-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  border-radius: 36rpx; /* 更圆润的边角 */
  padding: 32rpx 28rpx; /* 增加内边距 */
  margin-bottom: 24rpx;
  border: 2rpx solid #eef0f7; /* 增加细微的描边，更接近设计图质感 */
  box-shadow: 0 4rpx 20rpx rgba(72, 82, 130, 0.03); /* 阴影调弱 */
}

.participant-main {
  display: flex;
  align-items: center;
  flex: 1;
}

.participant-avatar-wrap {
  margin-right: 20rpx;
}

.participant-avatar {
  width: 92rpx;
  height: 92rpx;
  border-radius: 50%;
  background: #e8ebf7;
}

.participant-avatar.empty {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2rpx dashed #b5bad0; /* 加深虚线颜色 */
  background: #f8f9fc; /* 空状态背景色 */
}

.camera-small {
  width: 38rpx;
  height: 38rpx;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a90a6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z'%3E%3C/path%3E%3Ccircle cx='12' cy='13' r='4'%3E%3C/circle%3E%3C/svg%3E");
  background-size: cover;
}

.participant-info {
  flex: 1;
}

.participant-name,
.participant-desc {
  width: 100%;
}

.participant-name {
  height: 42rpx;
  font-size: 30rpx;
  font-weight: 700;
  color: #202020;
  margin-bottom: 10rpx;
}

.participant-desc {
  height: 38rpx;
  font-size: 24rpx;
  color: #676c7f;
}

.participant-placeholder {
  color: #b6b9c7;
}

.participant-actions {
  width: 56rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16rpx;
  margin-left: 16rpx;
}

.drag-icon {
  font-size: 34rpx;
  color: #b2b4c5;
  line-height: 1;
}

.delete-icon {
  font-size: 32rpx; /* 图标放大 */
  color: #ff6b6b; /* 明确的删除红色 */
  line-height: 1;
  padding: 8rpx; /* 增加点击区域 */
}

.add-participant {
  height: 120rpx; /* 增加高度 */
  border: 2rpx dashed #c0c4d6; /* 边框颜色更明显 */
  border-radius: 36rpx; /* 圆角一致 */
  display: flex;
  align-items: center;
  justify-content: center;
  color: #888d9e; /* 字体颜色微调 */
  gap: 16rpx; /* 间距变大 */
  background: #f8f9fc; /* 添加底色 */
}

.add-plus {
  font-size: 38rpx;
  line-height: 1;
}

.add-text {
  font-size: 28rpx;
}

.settings-card {
  padding: 16rpx 32rpx; /* 增加内边距 */
}

.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32rpx 0; /* 增加行间距 */
  border-bottom: 2rpx solid #f0f1f7;
}

.setting-row.last {
  border-bottom: none;
}

.setting-info {
  flex: 1;
  padding-right: 20rpx;
}

.setting-title {
  display: block;
  font-size: 30rpx; /* 字体稍微调小 */
  font-weight: 700; /* 加粗 */
  color: #181818;
  margin-bottom: 12rpx; /* 增加与描述的间距 */
}

.setting-desc {
  display: block;
  font-size: 24rpx; /* 描述字体稍微调大 */
  color: #8c92a4; /* 颜色调浅 */
  line-height: 1.5;
}

.footer-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 24rpx 24rpx calc(24rpx + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(244, 245, 251, 0) 0%, rgba(244, 245, 251, 0.98) 34%);
}

.submit-btn {
  height: 100rpx;
  line-height: 100rpx;
  border-radius: 999rpx;
  background: linear-gradient(135deg, #5c43f5, #7a2cf3); /* 更接近设计图的深紫色 */
  color: #fff;
  font-size: 34rpx;
  font-weight: 700;
  box-shadow: 0 16rpx 32rpx rgba(100, 60, 240, 0.3); /* 加强底部按钮阴影 */
}

.submit-btn::after {
  border: none;
}
</style>
