<template>
  <div class="bg-white rounded-xl shadow-sm border border-slate-100 min-h-[600px] p-8">
    <h1 class="text-2xl font-bold text-slate-900 mb-8">账号安全</h1>

    <!-- Security Level (Optional visual) -->
    <div class="mb-10 p-6 bg-slate-50 rounded-xl border border-slate-100 flex items-center justify-between">
       <div>
          <div class="text-lg font-bold text-slate-900 mb-1">安全等级：中</div>
          <p class="text-sm text-slate-500">建议绑定邮箱并完成实名认证，提升账号安全性。</p>
       </div>
       <div class="w-32 h-2 bg-slate-200 rounded-full overflow-hidden">
          <div class="h-full bg-orange-500 w-1/2"></div>
       </div>
    </div>

    <!-- Security Items -->
    <div class="space-y-6">
       <!-- Phone -->
       <div class="flex items-center justify-between py-4 border-b border-slate-50">
          <div class="flex items-center gap-4">
             <i class="pi pi-mobile text-xl text-slate-400"></i>
             <div>
                <div class="font-bold text-slate-900">手机绑定</div>
                <div class="text-sm text-slate-500">已绑定：138****8888</div>
             </div>
          </div>
          <button @click="openVerify('phone')" class="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg hover:bg-slate-50 text-sm font-medium transition-colors">更换</button>
       </div>

       <!-- Real-name Auth -->
       <div class="flex items-center justify-between py-4 border-b border-slate-50">
          <div class="flex items-center gap-4">
             <i class="pi pi-id-card text-xl text-slate-400"></i>
             <div>
                <div class="font-bold text-slate-900">实名认证</div>
                <div class="text-sm text-slate-500">未认证，发布内容前需完成认证</div>
             </div>
          </div>
          <button @click="$router.push('/creator/apply')" class="px-4 py-2 text-primary-600 font-medium hover:text-primary-700 text-sm transition-colors">去认证</button>
       </div>
    </div>

    <!-- Verification Dialog -->
    <Dialog v-model:visible="verifyDialog" modal header="安全验证" :style="{ width: '25rem' }">
       <div class="text-sm text-slate-600 mb-6">为了您的账号安全，请先进行身份验证。</div>
       
       <div class="space-y-4">
          <div>
             <label class="block text-xs font-bold text-slate-500 mb-1">手机号</label>
             <div class="text-lg font-bold text-slate-900">138****8888</div>
          </div>
          
          <div>
             <label class="block text-xs font-bold text-slate-500 mb-2">验证码</label>
             <div class="flex gap-2">
                <input type="text" class="flex-1 h-10 px-3 rounded border border-slate-200 focus:border-primary-500 focus:outline-none" placeholder="6位数字">
                <button class="px-3 h-10 border border-slate-200 rounded text-sm text-slate-600 hover:bg-slate-50">获取验证码</button>
             </div>
          </div>
       </div>

       <div class="flex justify-end gap-2 mt-8">
          <button @click="verifyDialog = false" class="px-4 py-2 text-slate-500 hover:text-slate-700 text-sm">取消</button>
          <button @click="handleVerifySuccess" class="px-4 py-2 bg-primary-600 text-white rounded hover:bg-primary-700 text-sm">下一步</button>
       </div>
    </Dialog>

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

<script setup>
import { ref } from 'vue';
import Dialog from 'primevue/dialog';
import ConfirmDialog from 'primevue/confirmdialog';
import Toast from 'primevue/toast';
import { useConfirm } from 'primevue/useconfirm';
import { useToast } from 'primevue/usetoast';

const confirm = useConfirm();
const toast = useToast();
const verifyDialog = ref(false);
const currentAction = ref('');

const openVerify = (action) => {
    currentAction.value = action;
    verifyDialog.value = true;
};

const handleVerifySuccess = () => {
    verifyDialog.value = false;
    toast.add({ severity: 'success', summary: '验证通过', detail: '即将跳转至操作页面...', life: 2000 });
    // In real app, redirect to specific edit page
};

const confirmDelete = () => {
    confirm.require({
        message: '注销后，您的所有数据、资产、购买记录将永久丢失且无法找回。请输入“注销”以确认。',
        header: '高风险操作确认',
        icon: 'pi pi-info-circle',
        rejectLabel: '取消',
        acceptLabel: '确认注销',
        rejectClass: 'p-button-secondary p-button-outlined',
        acceptClass: 'p-button-danger',
        accept: () => {
            toast.add({ severity: 'error', summary: '已提交注销申请', detail: '账号将在 7 天后正式注销', life: 3000 });
        }
    });
};
</script>