<template>
   <div>
      <h1 class="text-2xl font-bold text-slate-900 mb-8">频道设置</h1>

      <div class="space-y-8">
         <!-- 0. Tips -->
         <div class="bg-blue-50 p-6 rounded-xl border border-blue-100 text-sm text-blue-700 flex items-start gap-4">
            <i class="pi pi-info-circle text-xl mt-0.5"></i>
            <div>
               <h4 class="font-bold mb-1">频道设置须知</h4>
               <ul class="list-disc list-inside space-y-1 opacity-90">
                  <li>建议封面图尺寸 1280x320px，重点内容居中。</li>
                  <li>频道名称修改后需人工审核，审核期间原名称仍可见。</li>
               </ul>
            </div>
         </div>

         <!-- 1. Basic Info & Visuals -->
         <div class="bg-white rounded-xl shadow-sm border border-slate-100 p-8">
            <h2 class="text-lg font-bold text-slate-900 mb-6 pb-4 border-b border-slate-100">基本信息</h2>

            <div class="space-y-8">
               <!-- Avatar & Name -->
               <div class="flex items-start gap-6">
                  <div class="relative group cursor-pointer flex-shrink-0" @click="triggerUpload('avatar')">
                     <div
                        class="w-24 h-24 rounded-full border-4 border-slate-50 shadow-sm overflow-hidden bg-slate-100">
                        <img :src="form.avatar" class="w-full h-full object-cover">
                        <div
                           class="absolute inset-0 bg-black/40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
                           <i class="pi pi-camera text-white text-2xl"></i>
                        </div>
                     </div>
                  </div>
                  <div class="flex-1 space-y-4">
                     <div>
                        <label class="block text-sm font-bold text-slate-700 mb-2">频道名称</label>
                        <input v-model="form.name" type="text"
                           class="w-full h-11 px-4 border border-slate-200 rounded-lg focus:border-primary-500 outline-none transition-colors"
                           placeholder="给您的频道起个名字">
                     </div>
                     <div>
                        <label class="block text-sm font-bold text-slate-700 mb-2">一句话简介</label>
                        <input v-model="form.bio" type="text"
                           class="w-full h-11 px-4 border border-slate-200 rounded-lg focus:border-primary-500 outline-none transition-colors"
                           placeholder="介绍一下您的频道特色...">
                     </div>
                  </div>
               </div>

               <!-- Cover Image (Moved Here) -->
               <div>
                  <label class="block text-sm font-bold text-slate-700 mb-3">频道头图 (Cover)</label>
                  <div
                     class="aspect-[4/1] rounded-xl bg-slate-50 border-2 border-dashed border-slate-300 relative overflow-hidden group cursor-pointer hover:border-primary-400 transition-all"
                     @click="triggerUpload('cover')">
                     <img v-if="form.cover" :src="form.cover" class="w-full h-full object-cover">
                     <div
                        class="absolute inset-0 flex flex-col items-center justify-center text-slate-400 bg-white/50 opacity-100 group-hover:bg-white/80 transition-all"
                        v-else>
                        <i class="pi pi-image text-3xl mb-2"></i>
                        <span class="text-sm font-medium">点击上传 (建议尺寸 1280x320)</span>
                     </div>
                     <!-- Hover Overlay -->
                     <div v-if="form.cover"
                        class="absolute inset-0 bg-black/40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
                        <span class="text-white font-bold"><i class="pi pi-refresh mr-2"></i>更换封面</span>
                     </div>
                  </div>
               </div>

               <!-- Intro Detail -->
               <div>
                  <label class="block text-sm font-bold text-slate-700 mb-2">详细介绍</label>
                  <textarea v-model="form.description" rows="4"
                     class="w-full p-4 border border-slate-200 rounded-lg focus:border-primary-500 outline-none transition-colors resize-none"
                     placeholder="详细描述您的履历、师承或频道内容规划..."></textarea>
               </div>

               <!-- Save Button -->
               <div class="pt-6 border-t border-slate-100 flex justify-end">
                  <button @click="saveSettings"
                     class="px-8 py-3 bg-primary-600 text-white rounded-lg font-bold hover:bg-primary-700 shadow-lg shadow-primary-200 cursor-pointer active:scale-95 flex items-center gap-2">
                     <i class="pi pi-check"></i> 保存修改
                  </button>
               </div>
            </div>
         </div>

         <!-- 2. Payout Settings -->
         <div class="bg-white rounded-xl shadow-sm border border-slate-100 p-8">
            <div class="flex items-center justify-between mb-6 pb-4 border-b border-slate-100">
               <h2 class="text-lg font-bold text-slate-900">收款账户</h2>
               <button @click="showAddAccount = true"
                  class="text-sm font-bold text-primary-600 hover:text-primary-700 cursor-pointer flex items-center gap-1 px-3 py-1.5 rounded hover:bg-primary-50 transition-colors">
                  <i class="pi pi-plus"></i> 添加账户
               </button>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
               <!-- Mock Account Card -->
               <div
                  class="p-4 border border-slate-200 rounded-xl flex items-center gap-4 bg-white relative group hover:border-primary-200 transition-colors">
                  <div class="w-10 h-10 rounded-full bg-red-50 text-red-600 flex items-center justify-center"><i
                        class="pi pi-briefcase"></i></div>
                  <div>
                     <div class="font-bold text-slate-900">招商银行</div>
                     <div class="text-sm text-slate-500">储蓄卡 (8888)</div>
                  </div>
                  <button
                     class="absolute top-4 right-4 text-slate-300 hover:text-red-500 cursor-pointer opacity-0 group-hover:opacity-100 transition-opacity p-2"><i
                        class="pi pi-trash"></i></button>
               </div>
            </div>
         </div>
      </div>

      <input type="file" ref="fileInput" class="hidden" @change="handleFileChange">

      <!-- Add Account Dialog -->
      <Dialog v-model:visible="showAddAccount" modal header="添加收款账户" :style="{ width: '25rem' }">
         <div class="space-y-4">
            <div>
               <label class="block text-sm font-bold text-slate-700 mb-2">账户类型</label>
               <div class="flex gap-4">
                  <label
                     class="flex items-center gap-2 cursor-pointer p-2 border border-transparent rounded hover:bg-slate-50">
                     <RadioButton v-model="newAccount.type" value="bank" />
                     <span>银行卡</span>
                  </label>
                  <label
                     class="flex items-center gap-2 cursor-pointer p-2 border border-transparent rounded hover:bg-slate-50">
                     <RadioButton v-model="newAccount.type" value="alipay" />
                     <span>支付宝</span>
                  </label>
               </div>
            </div>

            <div v-if="newAccount.type === 'bank'">
               <label class="block text-sm font-bold text-slate-700 mb-2">银行名称</label>
               <input type="text"
                  class="w-full h-10 px-3 border border-slate-200 rounded-lg outline-none focus:border-primary-500"
                  placeholder="如：招商银行">
            </div>

            <div>
               <label class="block text-sm font-bold text-slate-700 mb-2">{{ newAccount.type === 'bank' ? '银行卡号' :
                  '支付宝账号' }}</label>
               <input type="text"
                  class="w-full h-10 px-3 border border-slate-200 rounded-lg outline-none focus:border-primary-500"
                  placeholder="请输入账号">
            </div>

            <div>
               <label class="block text-sm font-bold text-slate-700 mb-2">真实姓名</label>
               <input type="text"
                  class="w-full h-10 px-3 border border-slate-200 rounded-lg outline-none focus:border-primary-500"
                  placeholder="需与实名认证一致">
            </div>
         </div>
         <template #footer>
            <button @click="showAddAccount = false"
               class="px-4 py-2 text-slate-500 hover:text-slate-700 text-sm font-bold cursor-pointer">取消</button>
            <button @click="handleAddAccount"
               class="px-6 py-2 bg-primary-600 text-white rounded-lg text-sm font-bold hover:bg-primary-700 cursor-pointer shadow-sm">保存</button>
         </template>
      </Dialog>

      <Toast />
   </div>
</template>

<script setup>
import Dialog from 'primevue/dialog';
import RadioButton from 'primevue/radiobutton';
import Toast from 'primevue/toast';
import { useToast } from 'primevue/usetoast';
import { reactive, ref } from 'vue';

const toast = useToast();
const fileInput = ref(null);
const currentUploadType = ref('');
const showAddAccount = ref(false);

const newAccount = reactive({
   type: 'bank',
   name: '',
   account: '',
   realname: ''
});

const form = reactive({
   name: '梅派传人小林',
   bio: '专注京剧程派艺术传承与推广',
   description: '',
   avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=Master1',
   cover: 'https://images.unsplash.com/photo-1514306191717-452ec28c7f31?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&q=80'
});

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

const handleFileChange = (event) => {
   const file = event.target.files[0];
   if (file) {
      const reader = new FileReader();
      reader.onload = (e) => {
         if (currentUploadType.value === 'avatar') {
            form.avatar = e.target.result;
         } else {
            form.cover = e.target.result;
         }
      };
      reader.readAsDataURL(file);
   }
};

const handleAddAccount = () => {
   showAddAccount.value = false;
   toast.add({ severity: 'success', summary: '添加成功', detail: '收款账户已添加', life: 3000 });
};

const saveSettings = () => {
   if (!form.name) {
      toast.add({ severity: 'error', summary: '错误', detail: '频道名称不能为空', life: 3000 });
      return;
   }
   toast.add({ severity: 'success', summary: '保存成功', detail: '部分信息正在审核中', life: 3000 });
};
</script>