<template>
   <div class="flex flex-col h-full bg-white rounded-xl overflow-hidden">
      <!-- Header -->
      <div
         class="px-8 py-4 border-b border-slate-100 flex items-center justify-between bg-white z-10 shadow-sm sticky top-0">
         <div class="flex items-center gap-4 w-1/3">
            <button @click="$router.back()"
               class="text-slate-400 hover:text-slate-600 transition-colors cursor-pointer"><i
                  class="pi pi-arrow-left text-xl"></i></button>
         </div>

         <div class="flex-1 flex justify-center">
            <div class="text-lg font-bold text-slate-900">
               {{ isEditMode ? '编辑内容' : '发布新内容' }}
            </div>
         </div>

         <div class="flex gap-3 w-1/3 justify-end">
            <button
               class="px-6 py-2 border border-slate-300 text-slate-700 rounded-lg hover:bg-slate-50 font-bold transition-colors cursor-pointer">存草稿</button>
            <button @click="submit"
               class="px-8 py-2 bg-primary-600 text-white rounded-lg font-bold hover:bg-primary-700 shadow-lg shadow-primary-200 transition-all active:scale-95 cursor-pointer">发布</button>
         </div>
      </div>

      <!-- Main Content Form -->
      <div class="flex-1 overflow-y-auto bg-slate-50/50 p-8 md:p-12 relative">
         <ProgressBar v-if="isUploading" mode="determinate" :value="uploadProgress" class="absolute top-0 left-0 w-full h-1 z-20" />
         
         <div class="max-w-screen-xl mx-auto bg-white p-10 rounded-2xl border border-slate-200 shadow-sm space-y-10">

            <!-- Row 1: Genre, Key & Title -->
            <div class="grid grid-cols-1 md:grid-cols-12 gap-8">
               <div class="md:col-span-2">
                  <label class="block text-sm font-bold text-slate-700 mb-2">曲种 <span
                        class="text-red-500">*</span></label>
                  <Select v-model="form.genre" :options="genres" placeholder="选择曲种" class="w-full h-12" />
               </div>
               <div class="md:col-span-2">
                  <label class="block text-sm font-bold text-slate-700 mb-2">主定调</label>
                  <Select v-model="form.key" :options="keys" placeholder="选择定调" class="w-full h-12" />
               </div>
               <div class="md:col-span-8">
                  <label class="block text-sm font-bold text-slate-700 mb-2">标题 <span
                        class="text-red-500">*</span></label>
                  <input v-model="form.title" type="text" placeholder="请输入内容标题"
                     class="w-full h-12 px-4 border border-slate-200 rounded-lg focus:border-primary-500 outline-none transition-colors">
               </div>
            </div>

            <!-- Row 3: Price -->
            <div>
               <label class="block text-sm font-bold text-slate-700 mb-3">价格策略</label>
               <div class="p-6 bg-slate-50 rounded-xl border border-slate-200">
                  <div class="flex gap-4 mb-6">
                     <button @click="form.priceType = 'free'"
                        class="flex-1 py-3 font-bold rounded-lg border-2 transition-all cursor-pointer"
                        :class="form.priceType === 'free' ? 'border-primary-600 bg-white text-primary-600' : 'border-transparent bg-white text-slate-500 hover:bg-slate-100'">免费</button>
                     <button @click="form.priceType = 'paid'"
                        class="flex-1 py-3 font-bold rounded-lg border-2 transition-all cursor-pointer"
                        :class="form.priceType === 'paid' ? 'border-primary-600 bg-white text-primary-600' : 'border-transparent bg-white text-slate-500 hover:bg-slate-100'">付费</button>
                     <button @click="form.priceType = 'member'"
                        class="flex-1 py-3 font-bold rounded-lg border-2 transition-all cursor-pointer"
                        :class="form.priceType === 'member' ? 'border-amber-500 bg-white text-amber-600' : 'border-transparent bg-white text-slate-500 hover:bg-slate-100'">会员专享</button>
                  </div>

                  <div v-if="form.priceType === 'paid'"
                     class="flex flex-wrap items-center gap-8 animate-in fade-in slide-in-from-top-2">
                     <div class="relative w-48">
                        <span class="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 font-bold">¥</span>
                        <input v-model="form.price" type="number"
                           class="w-full h-12 pl-8 pr-4 border border-slate-200 rounded-lg focus:border-primary-500 font-bold text-lg outline-none"
                           placeholder="0.00">
                     </div>
                     <div class="flex items-center gap-3">
                        <input type="checkbox" v-model="form.enableTrial" id="trial"
                           class="w-5 h-5 rounded border-slate-300 text-primary-600 focus:ring-primary-500 cursor-pointer">
                        <label for="trial" class="text-sm font-bold text-slate-700 cursor-pointer">开启试看</label>
                     </div>
                     <div v-if="form.enableTrial" class="flex items-center gap-2">
                        <input v-model="form.trialTime" type="number"
                           class="w-20 h-10 px-2 border border-slate-200 rounded-lg text-center outline-none">
                        <span class="text-sm text-slate-500">秒</span>
                     </div>
                  </div>
               </div>
            </div>

            <!-- Row 4: Abstract -->
            <div>
               <label class="block text-sm font-bold text-slate-700 mb-2">摘要</label>
               <textarea v-model="form.abstract" rows="4"
                  class="w-full p-4 rounded-xl border border-slate-200 focus:border-primary-500 outline-none resize-none transition-colors"
                  placeholder="请输入内容简介..."></textarea>
            </div>

            <!-- Row 5: Covers (Max 3) -->
            <div>
               <label class="block text-sm font-bold text-slate-700 mb-3">封面 (最多3张, 拖拽排序)</label>
               <div class="flex flex-wrap gap-4">
                  <draggable v-model="form.covers" item-key="id" class="flex flex-wrap gap-4" group="covers">
                     <template #item="{ element: img, index }">
                        <div class="relative group w-48 aspect-video rounded-lg overflow-hidden bg-slate-100 border border-slate-200 cursor-move">
                           <Image :src="img.url" preview imageClass="w-full h-full object-cover" />
                           <button @click="removeMediaItem('cover', index, img)"
                              class="absolute top-1 right-1 w-6 h-6 bg-black/50 hover:bg-red-500 text-white rounded-full flex items-center justify-center transition-colors cursor-pointer z-10"><i
                                 class="pi pi-times text-xs"></i></button>
                        </div>
                     </template>
                  </draggable>
                  <div v-if="form.covers.length < 3" @click="triggerUpload('cover')"
                     class="w-48 aspect-video rounded-lg border-2 border-dashed border-slate-300 flex flex-col items-center justify-center text-slate-400 hover:border-primary-500 hover:bg-primary-50 hover:text-primary-600 cursor-pointer transition-all">
                     <i class="pi pi-plus text-2xl mb-1"></i>
                     <span class="text-xs font-bold">上传封面</span>
                  </div>
               </div>
            </div>

            <!-- Row 6: Video -->
            <div>
               <label class="block text-sm font-bold text-slate-700 mb-3">视频列表 (拖拽排序)</label>
               <div class="space-y-3">
                  <draggable v-model="form.videos" item-key="id" class="space-y-3" group="videos">
                     <template #item="{ element: file, index }">
                        <div class="flex items-center gap-4 p-3 border border-slate-200 rounded-lg bg-slate-50 cursor-move hover:border-primary-300 transition-colors">
                           <div class="w-10 h-10 bg-blue-100 text-blue-600 rounded flex items-center justify-center"><i
                                 class="pi pi-video"></i></div>
                           <div class="flex-1 min-w-0">
                              <div class="font-bold text-sm text-slate-900 truncate">{{ file.name }}</div>
                              <div class="text-xs text-slate-500">{{ file.size }}</div>
                           </div>
                           <button @click="removeMediaItem('videos', index, file)"
                              class="text-slate-400 hover:text-red-500 px-2 cursor-pointer"><i
                                 class="pi pi-trash"></i></button>
                        </div>
                     </template>
                  </draggable>
                  <div @click="triggerUpload('video')"
                     class="h-14 border-2 border-dashed border-slate-300 rounded-lg flex items-center justify-center text-slate-500 hover:border-blue-500 hover:bg-blue-50 hover:text-blue-600 cursor-pointer transition-all font-bold gap-2">
                     <i class="pi pi-video"></i> 添加视频
                  </div>
               </div>
            </div>

            <!-- Row 7: Audio -->
            <div>
               <label class="block text-sm font-bold text-slate-700 mb-3">音频列表 (拖拽排序)</label>
               <div class="space-y-3">
                  <draggable v-model="form.audios" item-key="id" class="space-y-3" group="audios">
                     <template #item="{ element: file, index }">
                        <div class="flex items-center gap-4 p-3 border border-slate-200 rounded-lg bg-slate-50 cursor-move hover:border-purple-300 transition-colors">
                           <div class="w-10 h-10 bg-purple-100 text-purple-600 rounded flex items-center justify-center"><i
                                 class="pi pi-microphone"></i></div>
                           <div class="flex-1 min-w-0">
                              <div class="font-bold text-sm text-slate-900 truncate">{{ file.name }}</div>
                              <div class="text-xs text-slate-500">{{ file.size }}</div>
                           </div>
                           <button @click="removeMediaItem('audios', index, file)"
                              class="text-slate-400 hover:text-red-500 px-2 cursor-pointer"><i
                                 class="pi pi-trash"></i></button>
                        </div>
                     </template>
                  </draggable>
                  <div @click="triggerUpload('audio')"
                     class="h-14 border-2 border-dashed border-slate-300 rounded-lg flex items-center justify-center text-slate-500 hover:border-purple-500 hover:bg-purple-50 hover:text-purple-600 cursor-pointer transition-all font-bold gap-2">
                     <i class="pi pi-microphone"></i> 添加音频
                  </div>
               </div>
            </div>

            <!-- Row 8: Images -->
            <div>
               <label class="block text-sm font-bold text-slate-700 mb-3">图片列表 (拖拽排序)</label>
               <div class="flex flex-wrap gap-4">
                  <draggable v-model="form.images" item-key="id" class="flex flex-wrap gap-4" group="images">
                     <template #item="{ element: file, index }">
                        <div class="relative group w-32 aspect-square rounded-lg overflow-hidden border border-slate-200 cursor-move">
                           <Image :src="file.url" preview imageClass="w-full h-full object-cover" />
                           <div
                              class="absolute bottom-0 left-0 w-full bg-black/60 text-white text-xs p-1 truncate text-center pointer-events-none">
                              {{ file.name }}</div>
                           <button @click="removeMediaItem('images', index, file)"
                              class="absolute top-1 right-1 w-6 h-6 bg-red-500 text-white rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer z-10"><i
                                 class="pi pi-times text-xs"></i></button>
                        </div>
                     </template>
                  </draggable>
                  <div @click="triggerUpload('image')"
                     class="w-32 aspect-square border-2 border-dashed border-slate-300 rounded-lg flex flex-col items-center justify-center text-slate-500 hover:border-orange-500 hover:bg-orange-50 hover:text-orange-600 cursor-pointer transition-all">
                     <i class="pi pi-image text-2xl mb-1"></i>
                     <span class="text-xs font-bold">添加图片</span>
                  </div>
               </div>
            </div>

         </div>
      </div>

      <input type="file" ref="fileInput" class="hidden" @change="handleFileChange" multiple>
      <Toast />
   </div>
</template>

<script setup>
import Select from 'primevue/select';
import ProgressBar from 'primevue/progressbar';
import Image from 'primevue/image';
import Toast from 'primevue/toast';
import draggable from 'vuedraggable';
import { sha256 } from 'js-sha256';
import { useToast } from 'primevue/usetoast';
import { computed, reactive, ref, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { commonApi } from '../../api/common';
import { creatorApi } from '../../api/creator';

const router = useRouter();
const route = useRoute();
const toast = useToast();
const fileInput = ref(null);
const currentUploadType = ref('');
const isUploading = ref(false);
const uploadProgress = ref(0);
const isSubmitting = ref(false);
const isEditMode = ref(false);
const contentId = ref('');

const form = reactive({
   genre: null,
   title: '',
   abstract: '',
   priceType: 'free',
   price: 9.9,
   enableTrial: true,
   trialTime: 60,
   key: null,
   covers: [], // { url, id, file }
   videos: [], // { name, size, url, id }
   audios: [], // { name, size, url, id }
   images: []  // { name, size, url, id }
});

onMounted(async () => {
    if (route.params.id) {
        isEditMode.value = true;
        contentId.value = route.params.id;
        await loadContent(contentId.value);
    }
});

const loadContent = async (id) => {
    try {
        const res = await creatorApi.getContent(id);
        if (!res) return;

        form.genre = res.genre;
        form.title = res.title;
        form.abstract = res.description;
        form.price = res.price;
        form.priceType = res.price > 0 ? 'paid' : 'free';
        form.enableTrial = res.enable_trial;
        form.trialTime = res.preview_seconds;
        form.key = res.key;
        
        // Parse Assets
        if (res.assets) {
            res.assets.forEach(asset => {
                const item = { id: asset.id, url: asset.url, name: asset.name || 'Unknown', size: asset.size || '' };
                if (asset.role === 'cover') {
                    form.covers.push(item);
                } else if (asset.type === 'video') {
                    form.videos.push(item);
                } else if (asset.type === 'audio') {
                    form.audios.push(item);
                } else if (asset.type === 'image') {
                    form.images.push(item);
                }
            });
        }
    } catch (e) {
        console.error(e);
        toast.add({ severity: 'error', summary: '加载失败', detail: '无法获取内容详情', life: 3000 });
    }
};

const genres = ['京剧', '昆曲', '越剧', '黄梅戏', '豫剧', '评剧'];
const keys = ['C大调', 'D大调', 'E大调', 'F大调', 'G大调', 'A大调', 'B大调', '降E大调'];

const triggerUpload = (type) => {
   currentUploadType.value = type;
   fileInput.value.click();
};

const calculateHash = async (file) => {
    const buffer = await file.arrayBuffer();
    return sha256(buffer);
};

const handleFileChange = async (event) => {
   const files = event.target.files;
   if (!files.length) return;

   isUploading.value = true;
   uploadProgress.value = 0;
   // toast.add({ severity: 'info', summary: '正在上传', detail: '文件上传中...', life: 3000 });

   try {
      for (let i = 0; i < files.length; i++) {
         const file = files[i];
         // Determine backend type: 'image', 'video', 'audio'
         let type = 'image';
         if (currentUploadType.value === 'video') type = 'video';
         if (currentUploadType.value === 'audio') type = 'audio';
         if (currentUploadType.value === 'cover') type = 'image';

         const hash = await calculateHash(file);
         let res;

         if (type === 'video' || type === 'audio') {
             // Multipart upload for large files
             res = await commonApi.uploadMultipart(file, hash, (progress) => {
                 uploadProgress.value = Math.round(progress);
             });
         } else {
             // Simple upload for images
             try {
                 res = await commonApi.checkHash(hash);
             } catch (e) {
                 // Not found or error, proceed to upload
             }

             if (!res) {
                 res = await commonApi.uploadWithProgress(file, type, (progress) => {
                     uploadProgress.value = Math.round(progress);
                 });
             } else {
                 uploadProgress.value = 100;
             }
         }
         
         // res: { id, url, ... }

         if (currentUploadType.value === 'cover') {
            if (form.covers.length < 3) form.covers.push({ url: res.url, id: res.id });
         } else if (currentUploadType.value === 'video') {
            form.videos.push({ name: file.name, size: (file.size/1024/1024).toFixed(2)+'MB', url: res.url, id: res.id });
         } else if (currentUploadType.value === 'audio') {
            form.audios.push({ name: file.name, size: (file.size/1024/1024).toFixed(2)+'MB', url: res.url, id: res.id });
         } else if (currentUploadType.value === 'image') {
            form.images.push({ name: file.name, size: (file.size/1024/1024).toFixed(2)+'MB', url: res.url, id: res.id });
         }
      }
      toast.add({ severity: 'success', summary: '上传成功', life: 2000 });
   } catch (e) {
      console.error(e);
      toast.add({ severity: 'error', summary: '上传失败', detail: e.message, life: 3000 });
   } finally {
      isUploading.value = false;
      uploadProgress.value = 0;
      event.target.value = '';
   }
};

const removeMediaItem = async (type, index, item) => {
   if (item.id) {
       try {
           await commonApi.deleteMedia(item.id);
       } catch (e) {
           console.error(e);
           toast.add({ severity: 'error', summary: '删除失败', detail: '无法删除文件', life: 3000 });
           return;
       }
   }
   if (type === 'cover') {
       form.covers.splice(index, 1);
   } else {
       form[type].splice(index, 1);
   }
};

const submit = async () => {
   if (!form.title || !form.genre) {
      toast.add({ severity: 'warn', summary: '信息不完整', detail: '请填写标题和曲种', life: 3000 });
      return;
   }

   isSubmitting.value = true;
   try {
      // 1. Construct Payload
      const payload = {
         title: form.title,
         description: form.abstract,
         genre: form.genre,
         key: form.key,
         status: 'published', // Direct publish for demo
         visibility: 'public',
         preview_seconds: form.enableTrial ? form.trialTime : 0,
         price: form.priceType === 'paid' ? parseFloat(form.price) : 0, // API expects float price, service handles conversion
         cover_ids: [],
         media_ids: []
      };
      
      payload.cover_ids = form.covers.map(m => m.id);
      payload.media_ids = [...form.videos, ...form.audios, ...form.images].map(m => m.id);

      if (isEditMode.value) {
          await creatorApi.updateContent(contentId.value, payload);
          toast.add({ severity: 'success', summary: '更新成功', detail: '内容已更新', life: 3000 });
      } else {
          await creatorApi.createContent(payload);
          toast.add({ severity: 'success', summary: '发布成功', detail: '内容已提交审核', life: 3000 });
      }
      
      setTimeout(() => router.push('/creator/contents'), 1500);
   } catch (e) {
      toast.add({ severity: 'error', summary: '提交失败', detail: e.message, life: 3000 });
   } finally {
      isSubmitting.value = false;
   }
};
</script>

<style scoped>
@reference "../../assets/main.css";

:deep(.p-select) {
   @apply border-slate-200 rounded-lg shadow-none;
}

:deep(.p-select:not(.p-disabled).p-focus) {
   @apply border-primary-500 ring-2 ring-primary-100 shadow-none;
}
</style>