<template>
  <AdminPageLayout>
    <!-- 页面头部 - 标题和操作按钮 -->
    <template #page-header>
      <div>
        <h1 class="text-2xl font-bold text-gray-900 dark:text-white">用户管理</h1>
        <p class="text-gray-600 dark:text-gray-400">管理系统中的用户账户</p>
      </div>
      <div class="flex space-x-3">
        <n-button type="primary" @click="showCreateModal = true">
          <template #icon>
            <i class="fas fa-plus"></i>
          </template>
          添加用户
        </n-button>
        <n-button @click="refreshData">
          <template #icon>
            <i class="fas fa-refresh"></i>
          </template>
          刷新
        </n-button>
      </div>
    </template>

    <!-- 通知区域 -->
    <template #notice-section>
      <n-alert title="用户管理功能，可以创建、编辑、删除用户，以及修改用户密码" type="info" />
    </template>

    <!-- 内容区header -->
    <template #content-header>
      <div class="flex items-center justify-between">
        <span class="text-lg font-semibold">用户列表</span>
        <span class="text-sm text-gray-500">共 {{ total }} 个用户</span>
      </div>
    </template>

    <!-- 内容区 - 用户列表 -->
    <template #content>

        <div v-if="loading" class="flex items-center justify-center py-8">
        <n-spin size="large" />
      </div>

      <div v-else-if="users.length === 0" class="text-center py-8">
        <svg class="w-16 h-16 text-gray-300 dark:text-gray-600 mb-4 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 48 48">
          <circle cx="24" cy="24" r="20" stroke-width="3" stroke-dasharray="6 6" />
          <path d="M16 24h16M24 16v16" stroke-width="3" stroke-linecap="round" />
        </svg>
        <div class="text-lg font-semibold text-gray-400 dark:text-gray-500 mb-2">暂无用户</div>
        <div class="text-sm text-gray-400 dark:text-gray-600 mb-4">你可以点击上方"添加用户"按钮创建新用户</div>
        <n-button @click="showCreateModal = true" type="primary">
          <template #icon>
            <i class="fas fa-plus"></i>
          </template>
          添加用户
        </n-button>
      </div>

      <div v-else class="h-full">
        <n-data-table
          :columns="columns"
          :data="users"
          :bordered="false"
          :single-line="false"
          :loading="loading"
          @update:page="handlePageChange"
        />
      </div>
    </template>

  
    <!-- 内容区footer - 分页组件 -->
    <template #content-footer>
      <div class="p-4">
        <div class="flex justify-center">
          <n-pagination
            v-model:page="currentPage"
            v-model:page-size="pageSize"
            :item-count="total"
            :page-sizes="[100, 200, 500, 1000]"
            show-size-picker
            @update:page="fetchData"
            @update:page-size="(size) => { pageSize = size; currentPage = 1; fetchData() }"
          />
        </div>
      </div>
    </template>
  </AdminPageLayout>

  <!-- 创建/编辑用户模态框 -->
    <n-modal v-model:show="showModal" preset="card" :title="showEditModal ? '编辑用户' : '创建用户'" style="width: 500px">
      <div v-if="showEditModal && editingUser?.username === 'admin'" class="mb-4 p-3 bg-yellow-50 border border-yellow-200 rounded-md">
        <p class="text-sm text-yellow-800">
          <i class="fas fa-exclamation-triangle mr-2"></i>
          管理员用户信息不可修改，只能通过修改密码功能来更新密码。
        </p>
      </div>
      <div v-if="showEditModal && editingUser?.username !== 'admin'" class="mb-4 p-3 bg-blue-50 border border-blue-200 rounded-md">
        <p class="text-sm text-blue-800">
          <i class="fas fa-info-circle mr-2"></i>
          编辑模式：用户名和邮箱不可修改，只能修改角色和激活状态。
        </p>
      </div>
      
      <n-form
        ref="formRef"
        :model="userForm"
        :rules="rules"
        label-placement="left"
        label-width="auto"
        require-mark-placement="right-hanging"
      >
        <n-form-item label="用户名" path="username">
          <n-input
            v-model:value="userForm.username"
            placeholder="请输入用户名"
            :disabled="showEditModal"
          />
        </n-form-item>

        <n-form-item label="邮箱" path="email">
          <n-input
            v-model:value="userForm.email"
            placeholder="请输入邮箱"
            :disabled="showEditModal"
          />
        </n-form-item>

        <n-form-item v-if="!showEditModal" label="密码" path="password">
          <n-input
            v-model:value="userForm.password"
            type="password"
            placeholder="请输入密码"
            show-password-on="click"
          />
        </n-form-item>

        <n-form-item label="角色" path="role">
          <n-select
            v-model:value="userForm.role"
            :options="roleOptions"
            placeholder="请选择角色"
          />
        </n-form-item>

        <n-form-item label="状态" path="is_active">
          <n-switch v-model:value="userForm.is_active" />
          <span class="ml-2 text-sm text-gray-500">{{ userForm.is_active ? '激活' : '禁用' }}</span>
        </n-form-item>
      </n-form>

      <template #footer>
        <div class="flex justify-end space-x-3">
          <n-button @click="closeModal">取消</n-button>
          <n-button type="primary" @click="handleSubmit" :loading="submitting">
            {{ showEditModal ? '更新' : '创建' }}
          </n-button>
        </div>
      </template>
    </n-modal>

      <!-- 修改密码模态框 -->
    <n-modal v-model:show="showChangePasswordModal" preset="card" title="修改密码" style="width: 400px">
      <n-form
        ref="passwordFormRef"
        :model="passwordForm"
        :rules="passwordRules"
        label-placement="left"
        label-width="auto"
        require-mark-placement="right-hanging"
      >
        <n-form-item label="新密码" path="new_password">
          <n-input
            v-model:value="passwordForm.new_password"
            type="password"
            placeholder="请输入新密码"
            show-password-on="click"
          />
        </n-form-item>

        <n-form-item label="确认密码" path="confirm_password">
          <n-input
            v-model:value="passwordForm.confirm_password"
            type="password"
            placeholder="请再次输入新密码"
            show-password-on="click"
          />
        </n-form-item>
      </n-form>

      <template #footer>
        <div class="flex justify-end space-x-3">
          <n-button @click="showChangePasswordModal = false">取消</n-button>
          <n-button type="primary" @click="handleChangePassword" :loading="changingPassword">
            修改密码
          </n-button>
        </div>
      </template>
    </n-modal>
</template>

<script setup lang="ts">
import AdminPageLayout from '~/components/AdminPageLayout.vue'

// 设置页面布局
definePageMeta({
  layout: 'admin'
})

interface User {
  id: number
  username: string
  email: string
  role: string
  is_active: boolean
  last_login?: string
  created_at: string
  updated_at: string
}

const notification = useNotification()
const dialog = useDialog()
const users = ref<User[]>([])
const loading = ref(false)
const total = ref(0)
const currentPage = ref(1)
const pageSize = ref(20)
const showCreateModal = ref(false)
const showEditModal = ref(false)
const showChangePasswordModal = ref(false)
const editingUser = ref<User | null>(null)
const changingPasswordUser = ref<User | null>(null)
const submitting = ref(false)
const changingPassword = ref(false)
const formRef = ref()
const passwordFormRef = ref()

// 用户表单
const userForm = ref({
  username: '',
  email: '',
  password: '',
  role: 'user',
  is_active: true
})

// 密码表单
const passwordForm = ref({
  new_password: '',
  confirm_password: ''
})

// 角色选项
const roleOptions = [
  { label: '用户', value: 'user' },
  { label: '管理员', value: 'admin' }
]

// 表单验证规则
const rules = {
  username: {
    required: true,
    message: '请输入用户名',
    trigger: 'blur'
  },
  email: {
    required: true,
    message: '请输入邮箱',
    trigger: 'blur',
    pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/
  },
  password: {
    required: true,
    message: '请输入密码',
    trigger: 'blur',
    min: 6
  },
  role: {
    required: true,
    message: '请选择角色',
    trigger: 'change'
  }
}

// 密码验证规则
const passwordRules = {
  new_password: {
    required: true,
    message: '请输入新密码',
    trigger: 'blur',
    min: 6
  },
  confirm_password: {
    required: true,
    message: '请确认密码',
    trigger: 'blur',
    validator: (rule: any, value: string) => {
      if (value !== passwordForm.value.new_password) {
        return new Error('两次输入的密码不一致')
      }
      return true
    }
  }
}

// 获取用户API
import { useUserApi } from '~/composables/useApi'
import { h } from 'vue'
const userApi = useUserApi()

// 表格列定义
const columns = [
  {
    title: 'ID',
    key: 'id',
    width: 80,
    render: (row: User) => {
      return h('span', { class: 'font-medium' }, row.id)
    }
  },
  {
    title: '用户名',
    key: 'username',
    render: (row: User) => {
      return h('span', { title: row.username }, row.username)
    }
  },
  {
    title: '邮箱',
    key: 'email',
    render: (row: User) => {
      return h('span', { title: row.email }, row.email)
    }
  },
  {
    title: '角色',
    key: 'role',
    width: 100,
    render: (row: User) => {
      const roleClass = row.role === 'admin' 
        ? 'px-2 py-1 text-xs font-medium rounded-full bg-purple-100 text-purple-800 dark:bg-purple-900/20 dark:text-purple-400'
        : 'px-2 py-1 text-xs font-medium rounded-full bg-blue-100 text-blue-800 dark:bg-blue-900/20 dark:text-blue-400'
      return h('span', { class: roleClass }, row.role)
    }
  },
  {
    title: '状态',
    key: 'is_active',
    width: 100,
    render: (row: User) => {
      const statusClass = row.is_active
        ? 'px-2 py-1 text-xs font-medium rounded-full bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-400'
        : 'px-2 py-1 text-xs font-medium rounded-full bg-red-100 text-red-800 dark:bg-red-900/20 dark:text-red-400'
      return h('span', { class: statusClass }, row.is_active ? '激活' : '禁用')
    }
  },
  {
    title: '最后登录',
    key: 'last_login',
    width: 180,
    render: (row: User) => {
      return h('span', { class: 'text-gray-500' }, row.last_login ? formatDate(row.last_login) : '从未登录')
    }
  },
  {
    title: '操作',
    key: 'actions',
    width: 200,
    render: (row: User) => {
      return h('div', { class: 'flex items-center gap-2' }, [
        h('button', {
          class: 'px-2 py-1 text-xs bg-blue-100 hover:bg-blue-200 text-blue-700 dark:bg-blue-900/20 dark:text-blue-400 rounded transition-colors',
          onClick: () => editUser(row),
          title: row.username === 'admin' ? '管理员用户信息不可修改' : '编辑用户'
        }, [
          h('i', { class: 'fas fa-edit mr-1' }),
          row.username === 'admin' ? '编辑(只读)' : '编辑'
        ]),
        h('button', {
          class: 'px-2 py-1 text-xs bg-yellow-100 hover:bg-yellow-200 text-yellow-700 dark:bg-yellow-900/20 dark:text-yellow-400 rounded transition-colors',
          onClick: () => showChangePasswordModalFunc(row)
        }, [
          h('i', { class: 'fas fa-key mr-1' }),
          '修改密码'
        ]),
        h('button', {
          class: 'px-2 py-1 text-xs bg-red-100 hover:bg-red-200 text-red-700 dark:bg-red-900/20 dark:text-red-400 rounded transition-colors',
          onClick: () => deleteUser(row.id),
          disabled: row.username === 'admin'
        }, [
          h('i', { class: 'fas fa-trash mr-1' }),
          '删除'
        ])
      ])
    }
  }
]

// 分页配置
const pagination = computed(() => ({
  page: currentPage.value,
  pageSize: pageSize.value,
  itemCount: total.value,
  showSizePicker: true,
  pageSizes: [10, 20, 50, 100],
  onChange: (page: number) => {
    currentPage.value = page
    fetchData()
  },
  onUpdatePageSize: (size: number) => {
    pageSize.value = size
    currentPage.value = 1
    fetchData()
  }
}))

// 获取数据
const fetchData = async () => {
  loading.value = true
  try {
    const response = await userApi.getUsers({
      page: currentPage.value,
      page_size: pageSize.value
    }) as any
    
    if (response && response.data) {
      users.value = response.data
      total.value = response.total || 0
    } else if (Array.isArray(response)) {
      users.value = response
      total.value = response.length
    } else {
      users.value = []
      total.value = 0
    }
  } catch (error) {
    console.error('获取用户失败:', error)
    users.value = []
    total.value = 0
  } finally {
    loading.value = false
  }
}

// 处理分页变化
const handlePageChange = (page: number) => {
  currentPage.value = page
  fetchData()
}

// 刷新数据
const refreshData = () => {
  fetchData()
}

// 编辑用户
const editUser = (user: User) => {
  editingUser.value = user
  userForm.value = {
    username: user.username,
    email: user.email,
    password: '',
    role: user.role,
    is_active: user.is_active
  }
  showEditModal.value = true
}

// 删除用户
const deleteUser = async (userId: number) => {
  const user = users.value.find(u => u.id === userId)
  if (user?.username === 'admin') {
    notification.error({
      content: '不能删除管理员用户',
      duration: 3000
    })
    return
  }

  dialog.warning({
    title: '警告',
    content: `确定要删除用户"${user?.username}"吗？`,
    positiveText: '确定',
    negativeText: '取消',
    draggable: true,
    onPositiveClick: async () => {
      try {
        await userApi.deleteUser(userId)
        notification.success({
          content: '删除成功',
          duration: 3000
        })
        fetchData()
      } catch (error) {
        console.error('删除失败:', error)
        notification.error({
          content: '删除失败',
          duration: 3000
        })
      }
    }
  })
}

// 显示修改密码模态框
const showChangePasswordModalFunc = (user: User) => {
  changingPasswordUser.value = user
  passwordForm.value = {
    new_password: '',
    confirm_password: ''
  }
  showChangePasswordModal.value = true
}

// 关闭模态框
const closeModal = () => {
  showCreateModal.value = false
  showEditModal.value = false
  editingUser.value = null
  userForm.value = {
    username: '',
    email: '',
    password: '',
    role: 'user',
    is_active: true
  }
}

// 提交表单
const handleSubmit = async () => {
  try {
    submitting.value = true
    await formRef.value?.validate()
    
    if (showEditModal.value) {
      await userApi.updateUser(editingUser.value!.id, userForm.value)
      notification.success({
        content: '更新成功',
        duration: 3000
      })
    } else {
      await userApi.createUser(userForm.value)
      notification.success({
        content: '创建成功',
        duration: 3000
      })
    }
    
    closeModal()
    fetchData()
  } catch (error) {
    console.error('提交失败:', error)
    notification.error({
      content: '操作失败',
      duration: 3000
    })
  } finally {
    submitting.value = false
  }
}

// 修改密码
const handleChangePassword = async () => {
  try {
    changingPassword.value = true
    await passwordFormRef.value?.validate()
    
    await userApi.changePassword(changingPasswordUser.value!.id, passwordForm.value.new_password)
    
    notification.success({
      content: '密码修改成功',
      duration: 3000
    })
    
    showChangePasswordModal.value = false
    changingPasswordUser.value = null
    passwordForm.value = {
      new_password: '',
      confirm_password: ''
    }
  } catch (error) {
    console.error('修改密码失败:', error)
    notification.error({
      content: '修改密码失败',
      duration: 3000
    })
  } finally {
    changingPassword.value = false
  }
}

// 格式化日期
const formatDate = (dateString: string) => {
  const date = new Date(dateString)
  return date.toLocaleString('zh-CN')
}

// 页面加载时获取数据
onMounted(() => {
  fetchData()
})



// 计算属性
const showModal = computed({
  get: () => showCreateModal.value || showEditModal.value,
  set: (value: boolean) => {
    if (!value) {
      showCreateModal.value = false
      showEditModal.value = false
    }
  }
})
</script>

<style scoped>
/* 自定义样式 */

.config-content {
  padding: 1rem;
  background-color: var(--color-white, #ffffff);
}

.dark .config-content {
  background-color: var(--color-dark-bg, #1f2937);
}
</style>