<script setup>
import {ref, onMounted, watch} from 'vue'
import { useUserStore } from '@/stores/user'
import AOS from 'aos'
import 'aos/dist/aos.css'
import {changePasswordApi, userMyInfoApi, userStatsApi} from "@/api/request/user.js";
import {collectionListApi} from "@/api/request/collection.js";
import {message} from "ant-design-vue";

// Initialize userStore outside of userData to avoid conditional hook call
const userStore = useUserStore()

// Initialize userData with default values
const userData = ref({
  username: '张三',
  avatar: 'https://pic.rmb.bdstatic.com/bjh/80852bfe7c321988191838517ba64e309354.jpeg@h_1280',
  createdAt: '2023-01-15',
  lastLogin: '2023-06-20',
  email: 'user@example.com',
  phone: '138****1234',
  role: '超级管理员',
  projects: 5,
  favorites: 12
})

const getMyInfo = () => {
  userMyInfoApi().then((res) => {
    userData.value = res;
  })
}

getMyInfo();

onMounted(() => {
  AOS.init({
    duration: 800,
    offset: 120,
    easing: 'ease-out-cubic',
    once: false
  })
})

const userStats = ref([
  { label: '已购项目', value: 0, icon: 'shopping-bag' },
  { label: '收藏项目', value: 0, icon: 'heart' },
  { label: '账户类型', value: 0, icon: 'user' }
])

const getUserStats = () => {
  userStatsApi().then((res) => {
    userStats.value = res;
  })
}

getUserStats();
const recentProjects = [
  { id: 1, title: '电商平台开发', date: '2023-05-15', status: '进行中' },
  { id: 2, title: 'CRM系统定制', date: '2023-04-10', status: '已完成' },
  { id: 3, title: '数据分析平台', date: '2023-03-22', status: '已完成' }
]

const myCollectionProjects = ref([]);

const getMyCollectionProjects = () => {
  collectionListApi({
    page: 1,
    pageSize: 1000,
  }).then((res) => {
    myCollectionProjects.value = res.items;
  })
}


const activeTab = ref('profile')

watch(() => activeTab.value, (newValue) => {
  if (newValue === 'collection') {
    getMyCollectionProjects();
  }
})

const tabs = [
  { name: '个人资料', value: 'profile' },
  { name: '我的收藏', value: 'collection' },
  // { name: '我的项目', value: 'projects' },
  // { name: '我的订单', value: 'orders' },
  // { name: '我的消息', value: 'messages' },
  { name: '我的设置', value: 'settings' }
]


const formatPrice = (price) => {
  return '¥ ' + price.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
}

const getAosEffect = (index) => {
  const screenWidth = window.innerWidth;
  let itemsPerRow;
  if (screenWidth >= 1024) { // PC
    itemsPerRow = 3;
  } else if (screenWidth >= 768) { // 平板
    itemsPerRow = 2;
  } else { // 手机
    itemsPerRow = 1;
  }
  const rowIndex = Math.floor(index / itemsPerRow);
  const colIndex = index % itemsPerRow;
  const aosEffects = [
    ['fade-up', 'fade-down', 'fade-left'],
    ['fade-right', 'zoom-in', 'zoom-out'],
    ['flip-left', 'flip-right', 'slide-up']
  ];
  return aosEffects[rowIndex % aosEffects.length][colIndex % aosEffects[0].length];
}

const showChangePasswordModal = ref(false);
const changePasswordLoading = ref(false);
const oldPassword = ref('');
const newPassword = ref('');
const confirmPassword = ref('');
const passwordError = ref("")

const openChangePasswordModal = () => {
  oldPassword.value = ''
  newPassword.value = ''
  confirmPassword.value = ''
  showChangePasswordModal.value = true;
}
const closeChangePasswordModal = () => {
  showChangePasswordModal.value = false;
}

const handleChangePassword = () => {
  // 验证密码
  if (!oldPassword.value) {
    passwordError.value = "请输入旧密码"
    return
  }
  // 验证密码
  if (!newPassword.value) {
    passwordError.value = "请输入新密码"
    return
  }

  if (newPassword.value.length < 6) {
    passwordError.value = "密码长度不能少于6位"
    return
  }

  if (newPassword.value !== confirmPassword.value) {
    passwordError.value = "两次输入的密码不一致"
    return
  }

  changePasswordLoading.value = true

  changePasswordApi({
    old_password: oldPassword.value,
    new_password: newPassword.value,
    confirm_password: confirmPassword.value,
  }).then(() => {
    message.success(`密码修改成功`)
    closeChangePasswordModal()
  }).finally(() => {
    passwordError.value = "";
    changePasswordLoading.value = false
  })
}
</script>

<template>
  <div class="bg-gradient-to-b from-gray-50 to-white dark:from-gray-900 dark:to-gray-800 min-h-screen py-12">
    <div class="max-w-5xl mx-auto px-6">
      <!-- 个人信息卡片 -->
      <div
          class="bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden mb-10"
          data-aos="fade-up"
      >
        <div class="relative h-48 bg-gradient-to-r from-rose-400 to-rose-600">
          <!-- 装饰图案 -->
          <div class="absolute inset-0 opacity-20">
            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
              <defs>
                <pattern id="pattern" width="40" height="40" patternUnits="userSpaceOnUse">
                  <circle cx="20" cy="20" r="2" fill="white" />
                </pattern>
              </defs>
              <rect width="100%" height="100%" fill="url(#pattern)" />
            </svg>
          </div>

          <!-- 编辑按钮 -->
          <button class="absolute top-4 right-4 bg-white/20 backdrop-blur-md text-white rounded-full p-2 hover:bg-white/30 transition-colors">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
            </svg>
          </button>
        </div>

        <div class="relative px-8 pb-8">
          <!-- 头像 -->
          <div class="absolute -top-16 left-8">
            <div class="relative">
              <div class="absolute -inset-1 rounded-full bg-white dark:bg-gray-800"></div>
              <div class="relative w-32 h-32 rounded-full overflow-hidden border-4 border-white dark:border-gray-800 shadow-lg">
                <img
                    :src="userData.avatar"
                    :alt="userData.username"
                    class="w-full h-full object-cover"
                />
              </div>
            </div>
          </div>

          <!-- 用户信息 -->
          <div class="pt-20">
            <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-6">
              <div>
                <h1 class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white mb-1">{{ userData?.nick_name }}</h1>
                <p class="text-rose-600 dark:text-rose-400">{{ userData.roles?.name }}</p>
              </div>

              <div class="mt-4 md:mt-0">
                <button @click="message.success('正在开发')" class="px-6 py-2 bg-rose-600 hover:bg-rose-700 text-white rounded-full shadow-md hover:shadow-lg transition-all duration-300 cursor-pointer">
                  升级会员
                </button>
              </div>
            </div>

            <!-- 用户统计 -->
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
              <div
                  v-for="(stat, index) in userStats"
                  :key="index"
                  class="bg-gray-50 dark:bg-gray-700/50 rounded-2xl p-4 flex items-center"
              >
                <div class="w-12 h-12 rounded-xl bg-rose-100 dark:bg-rose-900/30 flex items-center justify-center text-rose-600 dark:text-rose-400 mr-4">
                  <svg v-if="stat.icon === 'shopping-bag'" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
                  </svg>
                  <svg v-else-if="stat.icon === 'heart'" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
                  </svg>
                  <svg v-else-if="stat.icon === 'user'" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                  </svg>
                </div>
                <div>
                  <p class="text-sm text-gray-500 dark:text-gray-400">{{ stat.label }}</p>
                  <p class="text-lg font-bold text-gray-900 dark:text-white">{{ stat.value }}</p>
                </div>
              </div>
            </div>

            <!-- 标签页导航 -->
            <div class="border-b border-gray-200 dark:border-gray-700">
              <nav class="flex space-x-8">
                <button
                    v-for="(item) in tabs"
                    :key="item.value"
                    @click="activeTab = item.value"
                    class="py-4 px-1 border-b-2 font-medium text-sm transition-colors duration-200 cursor-pointer"
                    :class="activeTab === item.value ? 'border-rose-500 text-rose-600 dark:text-rose-400' : 'border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300'"
                >
                  {{item.name}}
                </button>
              </nav>

              <!-- 标签页内容 -->
              <div class="mb-10" data-aos="fade-up">
                <!-- 个人资料 -->
                <div v-if="activeTab === 'profile'" class="space-y-6">
                  <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-6">
                    <h2 class="text-xl font-bold mb-4 text-gray-900 dark:text-white">基本信息</h2>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                      <div>
                        <p class="text-sm text-gray-500 dark:text-gray-400 mb-1">用户名</p>
                        <p class="text-gray-900 dark:text-white">{{ userData.nick_name }}</p>
                      </div>
                      <div>
                        <p class="text-sm text-gray-500 dark:text-gray-400 mb-1">邮箱</p>
                        <p class="text-gray-900 dark:text-white">{{ userData.email }}</p>
                      </div>
                      <div>
                        <p class="text-sm text-gray-500 dark:text-gray-400 mb-1">手机号</p>
                        <p class="text-gray-900 dark:text-white">{{ userData.account }}</p>
                      </div>
                      <div>
                        <p class="text-sm text-gray-500 dark:text-gray-400 mb-1">注册时间</p>
                        <p class="text-gray-900 dark:text-white">{{ userData.created_day_at }}</p>
                      </div>
                    </div>
                  </div>

                  <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-6">
                    <h2 class="text-xl font-bold mb-4 text-gray-900 dark:text-white">账户安全</h2>
                    <div class="space-y-4">
                      <div class="flex items-center justify-between">
                        <div>
                          <p class="font-medium text-gray-900 dark:text-white">登录密码</p>
                          <p class="text-sm text-gray-500 dark:text-gray-400">上次修改时间: 2023-03-15</p>
                        </div>
                        <button @click="openChangePasswordModal" class="text-rose-600 dark:text-rose-400 hover:text-rose-700 dark:hover:text-rose-300 font-medium cursor-pointer">
                          修改
                        </button>
                      </div>
                      <div class="flex items-center justify-between">
                        <div>
                          <p class="font-medium text-gray-900 dark:text-white">手机验证</p>
                          <p class="text-sm text-gray-500 dark:text-gray-400">已绑定: {{ userData.phone }}</p>
                        </div>
                        <button @click="message.warn('正在开发~')" class="text-rose-600 dark:text-rose-400 hover:text-rose-700 dark:hover:text-rose-300 font-medium cursor-pointer">
                          修改
                        </button>
                      </div>
                    </div>
                  </div>
                </div>

                <!-- 我的收藏 -->
                <div v-else-if="activeTab === 'collection'" class="space-y-6">
                  <!-- 项目卡片网格 -->
                  <div v-if="myCollectionProjects.length > 0" class="grid grid-cols-1 md:grid-cols-1 lg:grid-cols-2 gap-8 mt-10">
                    <div
                        v-for="(project, index) in myCollectionProjects"
                        :key="project.project.id"
                        class="group bg-white dark:bg-gray-800 rounded-3xl shadow-lg hover:shadow-xl transition-all duration-500 overflow-hidden transform hover:-translate-y-2 cursor-pointer"
                        :data-aos="getAosEffect(index)"
                        @click="$router.push(`/project/${project.project.id}`)"
                    >
                      <div class="relative h-56 overflow-hidden">
                        <img
                            :src="project.project.cover"
                            class="w-full h-full object-cover transform transition-transform duration-700 group-hover:scale-110"
                            :alt="project.project.title"
                        />
                        <div
                            class="absolute inset-0 bg-gradient-to-t from-black/60 via-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>

                        <div class="absolute top-4 right-4">
                          <span
                              class="px-3 py-1 bg-black/50 backdrop-blur-md text-white text-xs font-medium rounded-full"
                          >
                            {{ project.project.category.name }}
                          </span>
                        </div>
                      </div>

                      <div class="p-6">
                        <div class="flex flex-wrap gap-2 mb-3">
                          <span
                              v-for="label in project.project.labels"
                              :key="label.id"
                              class="px-2 py-1 bg-rose-50 dark:bg-rose-900/20 text-rose-600 dark:text-rose-300 text-xs font-medium rounded-lg"
                          >
                            {{ label.name }}
                          </span>
                        </div>

                        <h3 class="text-xl font-bold mb-2 text-gray-900 dark:text-white group-hover:text-rose-600 dark:group-hover:text-rose-400 transition-colors">
                          {{ project.project.title }}
                        </h3>

                        <p class="text-gray-600 dark:text-gray-300 text-sm mb-4 line-clamp-2">
                          {{ project.project.description }}
                        </p>

                        <div class="flex justify-between items-center">
                          <div>
                            <p class="text-lg font-bold text-rose-600 dark:text-rose-400">{{ formatPrice(project.project.price) }}</p>
                            <p class="text-xs text-gray-500 dark:text-gray-400">{{ project.project.created_at }}</p>
                          </div>

                          <button
                              class="w-10 h-10 rounded-full bg-rose-50 dark:bg-rose-900/20 text-rose-600 dark:text-rose-400 flex items-center justify-center hover:bg-rose-100 dark:hover:bg-rose-900/40 transition-colors">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
                                 stroke="currentColor">
                              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"/>
                            </svg>
                          </button>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <!-- 我的项目 -->
                <div v-else-if="activeTab === 'projects'" class="space-y-6">
                  <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-6">
                    <h2 class="text-xl font-bold mb-6 text-gray-900 dark:text-white">最近项目</h2>
                    <div class="space-y-4">
                      <div
                          v-for="project in recentProjects"
                          :key="project.id"
                          class="flex items-center justify-between p-4 border border-gray-100 dark:border-gray-700 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors"
                      >
                        <div>
                          <h3 class="font-medium text-gray-900 dark:text-white">{{ project.title }}</h3>
                          <p class="text-sm text-gray-500 dark:text-gray-400">{{ project.date }}</p>
                        </div>
                        <div class="flex items-center">
                  <span
                      class="px-3 py-1 rounded-full text-xs font-medium"
                      :class="project.status === '进行中' ? 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300' : 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300'"
                  >
                    {{ project.status }}
                  </span>
                          <button class="ml-4 text-gray-400 hover:text-gray-500 dark:text-gray-500 dark:hover:text-gray-400">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                            </svg>
                          </button>
                        </div>
                      </div>
                    </div>

                    <div class="mt-6 text-center">
                      <button class="text-rose-600 dark:text-rose-400 hover:text-rose-700 dark:hover:text-rose-300 font-medium flex items-center mx-auto">
                        查看全部项目
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
                        </svg>
                      </button>
                    </div>
                  </div>
                </div>

                <!-- 账户设置 -->
                <div v-else-if="activeTab === 'settings'" class="space-y-6">
                  <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-6">
                    <h2 class="text-xl font-bold mb-6 text-gray-900 dark:text-white">通知设置</h2>
                    <div class="space-y-4">
                      <div class="flex items-center justify-between">
                        <div>
                          <p class="font-medium text-gray-900 dark:text-white">系统通知</p>
                          <p class="text-sm text-gray-500 dark:text-gray-400">接收系统更新和安全提醒</p>
                        </div>
                        <label class="relative inline-flex items-center cursor-pointer">
                          <input type="checkbox" value="" class="sr-only peer" disabled :checked="userData.is_sys_notifications === 1">
                          <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-rose-300 dark:peer-focus:ring-rose-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-rose-600"></div>
                        </label>
                      </div>
                      <div class="flex items-center justify-between">
                        <div>
                          <p class="font-medium text-gray-900 dark:text-white">项目更新</p>
                          <p class="text-sm text-gray-500 dark:text-gray-400">接收收藏的项目进度和更新通知</p>
                        </div>
                        <label class="relative inline-flex items-center cursor-pointer">
                          <input type="checkbox" value="" class="sr-only peer" disabled :checked="userData.is_collection_notifications === 1">
                          <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-rose-300 dark:peer-focus:ring-rose-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-rose-600"></div>
                        </label>
                      </div>
                      <div class="flex items-center justify-between">
                        <div>
                          <p class="font-medium text-gray-900 dark:text-white">营销信息</p>
                          <p class="text-sm text-gray-500 dark:text-gray-400">接收优惠和促销信息</p>
                        </div>
                        <label class="relative inline-flex items-center cursor-pointer">
                          <input type="checkbox" value="" class="sr-only peer" disabled :checked="userData.is_marketing_notifications === 1">
                          <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-rose-300 dark:peer-focus:ring-rose-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-rose-600"></div>
                        </label>
                      </div>
                    </div>
                  </div>

                  <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-6">
                    <h2 class="text-xl font-bold mb-6 text-gray-900 dark:text-white">隐私设置</h2>
                    <div class="space-y-4">
                      <div class="flex items-center justify-between">
                        <div>
                          <p class="font-medium text-gray-900 dark:text-white">个人资料可见性</p>
                          <p class="text-sm text-gray-500 dark:text-gray-400">控制谁可以查看您的个人资料</p>
                        </div>
                        <select class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-rose-500 focus:border-rose-500 block p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white">
                          <option value="public">公开</option>
                          <option value="friends">仅好友</option>
                          <option value="private">私密</option>
                        </select>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>


      <!-- 修改密码模态框 -->
      <div v-if="showChangePasswordModal" class="fixed inset-0 z-50" aria-labelledby="modal-title" role="dialog" aria-modal="true">
        <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
          <!-- 背景遮罩 -->
          <div
              class="fixed inset-0 transition-opacity backdrop-blur-xl bg-gray-500/80 dark:bg-gray-900/80"
              aria-hidden="true"
              @click="closeChangePasswordModal"
          ></div>

          <!-- 使模态框居中 -->
          <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>

          <!-- 模态框内容 -->
          <div class="inline-block align-bottom bg-white dark:bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full relative z-50">
            <div class="bg-white dark:bg-gray-800 px-6 pt-5 pb-4 sm:p-6">
              <div class="flex justify-between items-center mb-5">
                <h3 class="text-lg font-medium leading-6 text-gray-900 dark:text-white" id="modal-title">
                  修改密码 - {{ changePasswordUsername }}
                </h3>
                <button
                    class="text-gray-400 hover:text-gray-500 dark:text-gray-500 dark:hover:text-gray-400 cursor-pointer"
                    @click="closeChangePasswordModal"
                >
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                  </svg>
                </button>
              </div>

              <form @submit.prevent="handleChangePassword" class="space-y-6">
                <div>
                  <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">旧密码</label>
                  <input
                      v-model="oldPassword"
                      type="password"
                      class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-xl focus:ring-rose-500 focus:border-rose-500 dark:bg-gray-700 dark:text-white"
                      placeholder="请输入旧密码"
                  />
                </div>
                <div>
                  <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">新密码</label>
                  <input
                      v-model="newPassword"
                      type="password"
                      class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-xl focus:ring-rose-500 focus:border-rose-500 dark:bg-gray-700 dark:text-white"
                      placeholder="请输入新密码"
                  />
                </div>
                <div>
                  <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">确认密码</label>
                  <input
                      v-model="confirmPassword"
                      type="password"
                      class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-xl focus:ring-rose-500 focus:border-rose-500 dark:bg-gray-700 dark:text-white"
                      placeholder="请再次输入新密码"
                  />
                </div>

                <div v-if="passwordError" class="text-sm text-red-600 dark:text-red-400">
                  {{ passwordError }}
                </div>

                <div class="flex justify-end space-x-3 pt-4">
                  <button
                      type="button"
                      class="px-5 py-2 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors cursor-pointer"
                      @click="closeChangePasswordModal"
                  >
                    取消
                  </button>
                  <button
                      type="submit"
                      class="px-5 py-2 bg-rose-600 hover:bg-rose-700 text-white rounded-xl shadow-md hover:shadow-lg transition-all duration-300 flex items-center cursor-pointer"
                      :disabled="changePasswordLoading"
                  >
                <span v-if="changePasswordLoading" class="mr-2">
                  <svg class="animate-spin h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                  </svg>
                </span>
                    确认重置
                  </button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
/* 添加轻奢风格的渐变背景和阴影效果 */
.bg-gradient-luxury {
  background: linear-gradient(135deg, #f6f8fb 0%, #f0f4f8 100%);
}

/* 暗色模式下的轻奢风格 */
@media (prefers-color-scheme: dark) {
  .bg-gradient-luxury {
    background: linear-gradient(135deg, #1a1d23 0%, #111827 100%);
  }
}
</style>
