<template>
  <div class="users">
    <div class="card">
      <div class="card-header">
        <h3>所有用户</h3>
        <button class="btn-primary" @click="openAddModal">
          <i class="fa-solid fa-plus"></i> 新增用户
        </button>
      </div>
      <div class="table-container">
        <table>
          <thead>
            <tr>
              <th>ID</th>
              <th>姓名</th>
              <th>邮箱</th>
              <th>角色</th>
              <th>状态</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="user in paginatedUsers" :key="user.id">
              <td>#{{ user.id }}</td>
              <td>
                <span class="username-text">{{ user.name }}</span>
              </td>
              <td>{{ user.email }}</td>
              <td><span class="badge role">{{ user.role }}</span></td>
              <td><span class="badge status" :class="getStatusClass(user.status)">{{ getStatusText(user.status) }}</span></td>
              <td>
                <div class="actions">
                  <button class="action-btn edit" @click="openEditModal(user)" title="编辑">
                    <i class="fa-solid fa-pen-to-square"></i>
                  </button>
                  <button class="action-btn delete" @click="deleteUser(user.id)" title="删除">
                    <i class="fa-solid fa-trash"></i>
                  </button>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      
      <Pagination 
        :total="users.length" 
        v-model:page-size="pageSize" 
        v-model:current-page="currentPage" 
      />
    </div>

    <!-- User Modal -->
    <Modal
      v-model:visible="modalVisible"
      :title="isEdit ? '编辑用户' : '新增用户'"
      @confirm="handleSave"
    >
      <form class="modal-form">
        <div class="form-group">
          <label>姓名</label>
          <input type="text" v-model="form.name" placeholder="请输入姓名" />
        </div>
        <div class="form-group">
          <label>邮箱</label>
          <input type="email" v-model="form.email" placeholder="请输入邮箱" />
        </div>
        <div class="form-group">
          <label>角色</label>
          <select v-model="form.role">
            <option value="管理员">管理员</option>
            <option value="编辑">编辑</option>
            <option value="访客">访客</option>
          </select>
        </div>
        <div class="form-group">
          <label>状态</label>
          <select v-model="form.status">
            <option value="active">正常</option>
            <option value="inactive">停用</option>
            <option value="pending">待审核</option>
          </select>
        </div>
      </form>
    </Modal>

    <!-- Confirm Delete Modal -->
    <ConfirmModal
      v-model:visible="confirmVisible"
      title="确认删除"
      message="确定要删除该用户吗？此操作无法撤销。"
      @confirm="confirmDelete"
    />
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import Modal from '../components/Modal.vue'
import ConfirmModal from '../components/ConfirmModal.vue'
import Pagination from '../components/Pagination.vue'

const users = ref([
  { id: 1, name: 'John Doe', email: 'john@example.com', role: '管理员', status: 'active' },
  { id: 2, name: 'Jane Smith', email: 'jane@example.com', role: '编辑', status: 'active' },
  { id: 3, name: 'Bob Johnson', email: 'bob@example.com', role: '访客', status: 'inactive' },
  { id: 4, name: 'Alice Williams', email: 'alice@example.com', role: '编辑', status: 'active' },
  { id: 5, name: 'Charlie Brown', email: 'charlie@example.com', role: '访客', status: 'pending' },
  { id: 6, name: 'David Lee', email: 'david@example.com', role: '访客', status: 'active' },
  { id: 7, name: 'Eva Green', email: 'eva@example.com', role: '编辑', status: 'inactive' },
  { id: 8, name: 'Frank White', email: 'frank@example.com', role: '管理员', status: 'active' },
  { id: 9, name: 'Grace Black', email: 'grace@example.com', role: '访客', status: 'pending' },
  { id: 10, name: 'Henry Ford', email: 'henry@example.com', role: '编辑', status: 'active' },
  { id: 11, name: 'Ivy Wilson', email: 'ivy@example.com', role: '访客', status: 'inactive' },
  { id: 12, name: 'Jack Brown', email: 'jack@example.com', role: '管理员', status: 'active' },
])

const currentPage = ref(1)
const pageSize = ref(7)

const paginatedUsers = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return users.value.slice(start, end)
})

const modalVisible = ref(false)
const isEdit = ref(false)
const confirmVisible = ref(false)
const deleteId = ref(null)
const form = reactive({
  id: null,
  name: '',
  email: '',
  role: '访客',
  status: 'active'
})

const getStatusText = (status) => {
  const map = {
    active: '正常',
    inactive: '停用',
    pending: '待审核'
  }
  return map[status] || status
}

const getStatusClass = (status) => {
  const map = {
    active: 'bg-light-success',
    inactive: 'bg-light-danger',
    pending: 'bg-light-warning'
  }
  return map[status] || 'bg-light-dark'
}

const openAddModal = () => {
  isEdit.value = false
  Object.assign(form, { id: null, name: '', email: '', role: '访客', status: 'active' })
  modalVisible.value = true
}

const openEditModal = (user) => {
  isEdit.value = true
  Object.assign(form, user)
  modalVisible.value = true
}

const handleSave = () => {
  if (isEdit.value) {
    const index = users.value.findIndex(u => u.id === form.id)
    if (index !== -1) {
      users.value[index] = { ...form }
    }
  } else {
    const newId = Math.max(...users.value.map(u => u.id)) + 1
    users.value.push({ ...form, id: newId })
    const totalPages = Math.ceil(users.value.length / pageSize.value)
    currentPage.value = totalPages
  }
  modalVisible.value = false
}

const deleteUser = (id) => {
  deleteId.value = id
  confirmVisible.value = true
}

const confirmDelete = () => {
  users.value = users.value.filter(u => u.id !== deleteId.value)
  deleteId.value = null
  const totalPages = Math.ceil(users.value.length / pageSize.value)
  if (currentPage.value > totalPages && totalPages > 0) {
    currentPage.value = totalPages
  }
}
</script>

<style scoped>
.card-header {
  padding: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px dashed #eff2f5;
}

.card-header h3 {
  font-size: 18px;
  color: #181c32;
  font-weight: 600;
  margin: 0;
}

.table-container {
  overflow-x: auto;
}

.username-text {
  font-weight: 600;
  color: #181c32;
  font-size: 14px;
}

.badge.role {
  background-color: #f5f8fa;
  color: #5e6278;
  font-weight: 600;
}

.actions {
  display: flex;
  gap: 8px;
}

.action-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: #b5b5c3;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}

.action-btn:hover {
  background-color: #f5f8fa;
  color: var(--primary);
}

.action-btn.delete:hover {
  background-color: #ffe2e5;
  color: #f64e60;
}

/* Form Styles */
.modal-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group label {
  font-size: 14px;
  font-weight: 600;
  color: #3f4254;
}

.form-group input,
.form-group select {
  padding: 12px;
  border: 1px solid #e4e6ef;
  border-radius: 8px;
  font-size: 14px;
  color: #5e6278;
  outline: none;
  transition: border-color 0.2s;
  background-color: #fff;
}

.form-group input:focus,
.form-group select:focus {
  border-color: #07C160;
}
</style>
