<template>
   <div>
      <div class="flex items-center justify-between mb-8">
         <h1 class="text-2xl font-bold text-slate-900">内容管理</h1>
         <router-link to="/creator/contents/new"
            class="px-6 py-2.5 bg-primary-600 text-white rounded-lg font-bold hover:bg-primary-700 transition-colors shadow-sm shadow-primary-200 cursor-pointer active:scale-95 flex items-center gap-2">
            <i class="pi pi-plus"></i> 发布新内容
         </router-link>
      </div>

      <!-- Filters -->
      <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 min-w-[100px]">
               <option value="all">全部</option>
               <option v-for="opt in statusOptions" :key="opt.key" :value="opt.key">{{ opt.value }}</option>
            </select>
         </div>
         <div class="flex items-center gap-2">
            <span class="text-sm font-bold text-slate-500">曲种:</span>
            <select v-model="filterGenre"
               class="h-9 px-3 rounded border border-slate-200 text-sm focus:border-primary-500 outline-none bg-white cursor-pointer min-w-[100px]">
               <option value="all">全部</option>
               <option v-for="opt in genreOptions" :key="opt.key" :value="opt.key">{{ opt.value }}</option>
            </select>
         </div>
         <div class="ml-auto relative">
            <i class="pi pi-search absolute left-3 top-1/2 -translate-y-1/2 text-slate-400"></i>
            <input type="text" placeholder="搜索标题..." v-model="searchKeyword" @keyup.enter="handleSearch"
               @blur="handleSearch"
               class="h-9 pl-9 pr-4 rounded border border-slate-200 text-sm focus:border-primary-500 outline-none w-48 transition-all focus:w-64">
         </div>
      </div>

      <!-- Content List -->
      <div class="space-y-4">
         <div v-for="item in contents" :key="item.id"
            class="bg-white rounded-xl shadow-sm border border-slate-100 p-5 flex gap-6 hover:shadow-md transition-shadow group relative">

            <!-- Cover -->
            <div class="w-40 h-[90px] bg-slate-100 rounded-lg flex-shrink-0 overflow-hidden relative">
               <img :src="item.cover || 'https://via.placeholder.com/300x168?text=No+Cover'"
                  class="w-full h-full object-cover">
               <div
                  class="absolute inset-0 bg-black/50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
                  <router-link :to="`/creator/contents/${item.id}`"
                     class="text-white text-xs font-bold border border-white px-3 py-1 rounded hover:bg-white hover:text-black transition-colors">编辑</router-link>
               </div>
            </div>

            <!-- Info -->
            <div class="flex-1 min-w-0 flex flex-col justify-between">
               <div>
                  <div class="flex items-center justify-between mb-2">
                     <div class="flex items-center gap-2">
                        <span class="text-xs px-1.5 py-0.5 border rounded text-slate-500" v-if="item.genre">{{
                           item.genre }}</span>
                        <span class="text-xs px-1.5 py-0.5 border rounded text-slate-500" v-if="item.key">{{ item.key
                           }}</span>
                        <h3 class="font-bold text-slate-900 text-lg truncate hover:text-primary-600 cursor-pointer transition-colors"
                           @click="$router.push(`/creator/contents/${item.id}`)">
                           {{ item.title }}</h3>
                     </div>
                     <!-- Status Badge -->
                     <div class="flex items-center gap-2">
                        <span v-if="item.status === 'blocked'"
                           class="text-red-500 text-xs flex items-center gap-1 cursor-help" title="已被封禁">
                           <i class="pi pi-info-circle"></i> 封禁
                        </span>
                        <span class="px-2.5 py-1 rounded text-xs font-bold"
                           :class="statusStyle(item.status).bg + ' ' + statusStyle(item.status).text">
                           {{ statusStyle(item.status).label }}
                        </span>
                     </div>
                  </div>

                  <div class="flex items-center gap-6 text-sm text-slate-500">
                     <span v-if="item.price > 0" class="text-red-600 font-bold">¥ {{ item.price }}</span>
                     <span v-else class="text-green-600 font-bold">免费</span>
                     <span><i class="pi pi-eye mr-1"></i> {{ item.views }}</span>
                     <span><i class="pi pi-thumbs-up mr-1"></i> {{ item.likes }}</span>
                     <!-- Date field missing in DTO, using hardcoded or omitting -->
                  </div>
               </div>

               <!-- Actions -->
               <div class="flex items-center gap-4 pt-3 border-t border-slate-50 mt-2">
                  <button class="text-sm text-slate-500 hover:text-primary-600 font-medium cursor-pointer"
                     @click="$router.push(`/creator/contents/${item.id}`)"><i class="pi pi-file-edit mr-1"></i>
                     编辑</button>
                  <button v-if="item.status === 'published'"
                     class="text-sm text-slate-500 hover:text-orange-600 font-medium cursor-pointer"><i
                        class="pi pi-arrow-down mr-1"></i> 下架</button>
                  <button v-if="item.status === 'unpublished'"
                     class="text-sm text-slate-500 hover:text-green-600 font-medium cursor-pointer"><i
                        class="pi pi-arrow-up mr-1"></i> 上架</button>
                  <button class="text-sm text-slate-500 hover:text-red-600 font-medium ml-auto cursor-pointer"
                     @click="handleDelete(item.id)"><i class="pi pi-trash mr-1"></i> 删除</button>
               </div>
            </div>
         </div>
      </div>
   </div>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue';
import { useRouter } from 'vue-router';
import { commonApi } from '../../api/common';
import { creatorApi } from '../../api/creator';

const router = useRouter();
const contents = ref([]);
const filterStatus = ref('all');
const filterGenre = ref('all');
const searchKeyword = ref('');
const statusOptions = ref([]);
const genreOptions = ref([]);

const fetchOptions = async () => {
   try {
      const res = await commonApi.getOptions();
      if (res) {
         statusOptions.value = res.content_status || [];
         genreOptions.value = res.content_genre || [];
      }
   } catch (e) {
      console.error(e);
   }
};

const fetchContents = async () => {
   try {
      const params = {};
      if (filterStatus.value !== 'all') params.status = filterStatus.value;
      if (filterGenre.value !== 'all') params.genre = filterGenre.value;
      if (searchKeyword.value) params.keyword = searchKeyword.value;

      const res = await creatorApi.listContents(params);
      contents.value = res || [];
   } catch (e) {
      console.error(e);
   }
};

onMounted(() => {
   fetchOptions();
   fetchContents();
});

watch([filterStatus, filterGenre], () => {
   fetchContents();
});

const handleSearch = () => {
   fetchContents();
};

const statusStyle = (status) => {
   // Map backend status to UI style. Labels should ideally come from backend option value/label map if needed,
   // but for style/color mapping we can keep it here or use a helper.
   // Using labels from options if available would be best for text.

   const option = statusOptions.value.find(o => o.key === status);
   const label = option ? option.value : status;

   switch (status) {
      case 'published': return { bg: 'bg-green-50', text: 'text-green-600', label };
      case 'reviewing': return { bg: 'bg-orange-50', text: 'text-orange-600', label };
      case 'blocked': return { bg: 'bg-red-50', text: 'text-red-600', label };
      case 'draft': return { bg: 'bg-slate-100', text: 'text-slate-500', label };
      case 'unpublished': return { bg: 'bg-slate-100', text: 'text-slate-500', label };
      default: return { bg: 'bg-slate-100', text: 'text-slate-500', label };
   }
};

const handleDelete = async (id) => {
   if (!confirm('确定要删除吗？')) return;
   try {
      await creatorApi.deleteContent(id);
      fetchContents();
   } catch (e) {
      console.error(e);
   }
};
</script>