<script setup lang="ts">
interface UserRow {
  id: number
  username: string
  email: string | null
  nickname: string | null
  avatar: string | null
  role: string
  status: string
  createdAt: string | null
}

// Filter state
const statusFilter = ref<'' | 'active' | 'disabled'>('')
const roleFilter = ref<'' | 'admin' | 'user'>('')
const searchQuery = ref('')
const currentPage = ref(1)
const pageSize = ref(10)
const sortBy = ref<'createdAt' | 'username'>('createdAt')
const sortOrder = ref<'asc' | 'desc'>('desc')

// Fetch users
const { data, refresh, pending } = await useHttpFetch('/api/users', {
  query: computed(() => ({
    page: currentPage.value,
    pageSize: pageSize.value,
    search: searchQuery.value || undefined,
    status: statusFilter.value || undefined,
    role: roleFilter.value || undefined,
    sortBy: sortBy.value,
    sortOrder: sortOrder.value,
  })),
  watch: [currentPage, pageSize, searchQuery, statusFilter, roleFilter, sortBy, sortOrder],
})

const userList = computed<UserRow[]>(() => (data.value as any)?.list ?? [])
const totalUsers = computed(() => (data.value as any)?.total ?? 0)
const totalPages = computed(() => (data.value as any)?.totalPages ?? 1)

// Selection
const selectedIds = ref<Set<number>>(new Set())
const isAllSelected = computed(() => userList.value.length > 0 && userList.value.every(u => selectedIds.value.has(u.id)))

function toggleSelectAll() {
  if (isAllSelected.value) {
    selectedIds.value = new Set()
  } else {
    selectedIds.value = new Set(userList.value.map(u => u.id))
  }
}

function toggleSelect(id: number) {
  const newSet = new Set(selectedIds.value)
  if (newSet.has(id)) {
    newSet.delete(id)
  } else {
    newSet.add(id)
  }
  selectedIds.value = newSet
}

// Sorting
function toggleSort(column: 'createdAt' | 'username') {
  if (sortBy.value === column) {
    sortOrder.value = sortOrder.value === 'asc' ? 'desc' : 'asc'
  } else {
    sortBy.value = column
    sortOrder.value = 'asc'
  }
  currentPage.value = 1
}

// Create modal
const showCreateModal = ref(false)
const createForm = ref({
  username: '',
  password: '',
  email: '',
  role: 'user' as 'user' | 'admin',
})
const createLoading = ref(false)
const createError = ref('')

// Detail drawer
const showDrawer = ref(false)
const editingUser = ref<UserRow | null>(null)
const drawerForm = ref({
  nickname: '',
  email: '',
  role: 'user' as 'user' | 'admin',
  status: 'active' as 'active' | 'disabled',
})
const drawerLoading = ref(false)
const drawerError = ref('')

// Confirm dialog
const showConfirmDialog = ref(false)
const confirmLoading = ref(false)

// Toast helper
function showToast(message: string, type: 'success' | 'error' = 'success') {
  if (import.meta.client) {
    const event = new CustomEvent('toast', { detail: { message, type } })
    window.dispatchEvent(event)
  }
}

// Actions
async function handleBatchEnable() {
  if (selectedIds.value.size === 0) return
  confirmLoading.value = true
  try {
    await $fetch('/api/users/batch', {
      method: 'POST',
      body: { action: 'enable', ids: Array.from(selectedIds.value) },
    })
    selectedIds.value = new Set()
    await refresh()
    showToast('已启用成功')
  } catch (err: any) {
    showToast(err?.data?.statusMessage || '启用失败', 'error')
  } finally {
    confirmLoading.value = false
  }
}

async function handleBatchDisable() {
  if (selectedIds.value.size === 0) return
  confirmLoading.value = true
  try {
    await $fetch('/api/users/batch', {
      method: 'POST',
      body: { action: 'disable', ids: Array.from(selectedIds.value) },
    })
    selectedIds.value = new Set()
    await refresh()
    showToast('已禁用成功')
  } catch (err: any) {
    showToast(err?.data?.statusMessage || '禁用失败', 'error')
  } finally {
    confirmLoading.value = false
  }
}

async function handleBatchDelete() {
  showConfirmDialog.value = true
}

async function confirmBatchDelete() {
  confirmLoading.value = true
  try {
    await $fetch('/api/users/batch', {
      method: 'POST',
      body: { action: 'delete', ids: Array.from(selectedIds.value) },
    })
    selectedIds.value = new Set()
    showConfirmDialog.value = false
    await refresh()
    showToast('已删除成功')
  } catch (err: any) {
    showToast(err?.data?.statusMessage || '删除失败', 'error')
  } finally {
    confirmLoading.value = false
  }
}

function openDrawer(user: UserRow) {
  editingUser.value = user
  drawerForm.value = {
    nickname: user.nickname || '',
    email: user.email || '',
    role: user.role as 'user' | 'admin',
    status: user.status as 'active' | 'disabled',
  }
  drawerError.value = ''
  showDrawer.value = true
}

function closeDrawer() {
  showDrawer.value = false
  editingUser.value = null
}

async function handleDrawerSave() {
  if (!editingUser.value) return
  drawerLoading.value = true
  drawerError.value = ''
  try {
    await $fetch(`/api/users/${editingUser.value.id}`, {
      method: 'PUT',
      body: {
        nickname: drawerForm.value.nickname,
        email: drawerForm.value.email || undefined,
        role: drawerForm.value.role,
        status: drawerForm.value.status,
      },
    })
    closeDrawer()
    await refresh()
    showToast('保存成功')
  } catch (err: any) {
    drawerError.value = err?.data?.statusMessage || '保存失败'
  } finally {
    drawerLoading.value = false
  }
}

async function handleDelete(id: number) {
  try {
    await $fetch(`/api/users/${id}`, { method: 'DELETE' })
    selectedIds.value = new Set([...selectedIds.value].filter(i => i !== id))
    await refresh()
    showToast('删除成功')
  } catch (err: any) {
    showToast(err?.data?.statusMessage || '删除失败', 'error')
  }
}

function openCreate() {
  createError.value = ''
  createForm.value = { username: '', password: '', email: '', role: 'user' }
  showCreateModal.value = true
}

function closeModal() {
  showCreateModal.value = false
}

async function handleCreate() {
  createError.value = ''
  if (!createForm.value.username || !createForm.value.password) {
    createError.value = '用户名和密码不能为空'
    return
  }
  createLoading.value = true
  try {
    await $fetch('/api/users', {
      method: 'POST',
      body: createForm.value,
    })
    closeModal()
    currentPage.value = 1
    await refresh()
    showToast('创建成功')
  } catch (err: any) {
    createError.value = err?.data?.statusMessage || '创建失败'
  } finally {
    createLoading.value = false
  }
}

function goToPage(page: number) {
  if (page < 1 || page > totalPages.value) return
  currentPage.value = page
}

function formatDate(date: string | null) {
  if (!date) return '-'
  return new Intl.DateTimeFormat('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
  }).format(new Date(date))
}

function roleBadge(role: string) {
  const map: Record<string, { label: string; class: string }> = {
    admin: { label: '管理员', class: 'role-admin' },
    user: { label: '用户', class: 'role-user' },
  }
  return map[role] ?? { label: role, class: 'role-user' }
}

function statusBadge(status: string) {
  const map: Record<string, { label: string; class: string }> = {
    active: { label: '正常', class: 'status-active' },
    disabled: { label: '禁用', class: 'status-disabled' },
  }
  return map[status] ?? { label: status, class: 'status-disabled' }
}
</script>

<template>
  <div class="users-page">
    <!-- Header with stats -->
    <header class="page-header">
      <div class="header-left">
        <h1 class="page-title">用户管理</h1>
        <div class="stats-grid">
          <div class="stat-card">
            <div class="stat-value">{{ totalUsers }}</div>
            <div class="stat-label">用户总数</div>
          </div>
        </div>
      </div>
    </header>

    <!-- Filter bar -->
    <div class="filter-bar">
      <div class="filter-left">
        <div class="status-tabs">
          <button
            class="status-tab"
            :class="{ active: statusFilter === '' }"
            @click="statusFilter = ''; currentPage = 1"
          >
            全部
          </button>
          <button
            class="status-tab"
            :class="{ active: statusFilter === 'active' }"
            @click="statusFilter = 'active'; currentPage = 1"
          >
            正常
          </button>
          <button
            class="status-tab"
            :class="{ active: statusFilter === 'disabled' }"
            @click="statusFilter = 'disabled'; currentPage = 1"
          >
            禁用
          </button>
        </div>

        <select
          v-model="roleFilter"
          class="role-select"
          @change="currentPage = 1"
        >
          <option value="">全部角色</option>
          <option value="admin">管理员</option>
          <option value="user">普通用户</option>
        </select>

        <div class="search-box">
          <svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
            <circle cx="11" cy="11" r="8" />
            <path d="M21 21l-4.35-4.35" stroke-linecap="round" />
          </svg>
          <input
            v-model="searchQuery"
            type="text"
            placeholder="搜索用户名、邮箱"
            class="search-input"
            @keyup.enter="currentPage = 1"
          />
        </div>
      </div>

      <button class="btn-primary" @click="openCreate">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <line x1="12" y1="5" x2="12" y2="19" stroke-linecap="round" />
          <line x1="5" y1="12" x2="19" y2="12" stroke-linecap="round" />
        </svg>
        新增用户
      </button>
    </div>

    <!-- Table -->
    <div class="table-card">
      <table class="data-table">
        <thead>
          <tr>
            <th class="th-checkbox">
              <input
                type="checkbox"
                :checked="isAllSelected"
                class="checkbox"
                @change="toggleSelectAll"
              />
            </th>
            <th class="th-sortable" @click="toggleSort('username')">
              <span>用户</span>
              <svg v-if="sortBy === 'username'" class="sort-icon" :class="{ desc: sortOrder === 'desc' }" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M12 5v14M5 12l7-7 7 7" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </th>
            <th class="text-left">邮箱</th>
            <th class="text-left">角色</th>
            <th class="text-left">状态</th>
            <th class="th-sortable" @click="toggleSort('createdAt')">
              <span>注册时间</span>
              <svg v-if="sortBy === 'createdAt'" class="sort-icon" :class="{ desc: sortOrder === 'desc' }" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M12 5v14M5 12l7-7 7 7" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </th>
            <th class="text-right">操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-if="pending">
            <td colspan="7" class="text-center">加载中...</td>
          </tr>
          <tr v-else-if="userList.length === 0">
            <td colspan="7" class="text-center">暂无用户</td>
          </tr>
          <tr v-for="u in userList" :key="u.id" class="table-row" :class="{ selected: selectedIds.has(u.id) }">
            <td class="td-checkbox">
              <input
                type="checkbox"
                :checked="selectedIds.has(u.id)"
                class="checkbox"
                @change="toggleSelect(u.id)"
              />
            </td>
            <td class="user-cell">
              <div class="user-info">
                <div class="user-avatar">
                  <img v-if="u.avatar" :src="u.avatar" :alt="u.username" />
                  <span v-else class="avatar-placeholder">
                    {{ u.username.charAt(0).toUpperCase() }}
                  </span>
                </div>
                <div class="user-details">
                  <span class="user-name">{{ u.nickname || u.username }}</span>
                  <span class="user-username">@{{ u.username }}</span>
                </div>
              </div>
            </td>
            <td class="email-cell">{{ u.email || '-' }}</td>
            <td class="role-cell">
              <span :class="['role-badge', roleBadge(u.role).class]">
                {{ roleBadge(u.role).label }}
              </span>
            </td>
            <td class="status-cell">
              <span :class="['status-badge', statusBadge(u.status).class]">
                {{ statusBadge(u.status).label }}
              </span>
            </td>
            <td class="date-cell">{{ formatDate(u.createdAt) }}</td>
            <td class="actions-cell">
              <button class="action-btn" @click="openDrawer(u)">编辑</button>
            </td>
          </tr>
        </tbody>
      </table>

      <!-- Pagination -->
      <div class="pagination">
        <div class="page-info">
          共 {{ totalUsers }} 条，第 {{ currentPage }}/{{ totalPages }} 页
        </div>
        <div class="page-buttons">
          <button
            class="page-btn"
            :disabled="currentPage === 1"
            @click="goToPage(currentPage - 1)"
          >
            上一页
          </button>
          <button
            class="page-btn"
            :disabled="currentPage === totalPages"
            @click="goToPage(currentPage + 1)"
          >
            下一页
          </button>
        </div>
      </div>
    </div>

    <!-- Batch action bar -->
    <Transition name="slide-up">
      <div v-if="selectedIds.size > 0" class="batch-bar">
        <div class="batch-info">已选中 {{ selectedIds.size }} 项</div>
        <div class="batch-actions">
          <button class="batch-btn batch-btn-enable" @click="handleBatchEnable">启用</button>
          <button class="batch-btn batch-btn-disable" @click="handleBatchDisable">禁用</button>
          <button class="batch-btn batch-btn-delete" @click="handleBatchDelete">删除</button>
        </div>
      </div>
    </Transition>

    <!-- Detail drawer -->
    <Teleport to="body">
      <Transition name="slide-right">
        <div v-if="showDrawer" class="drawer-overlay" @click.self="closeDrawer">
          <div class="drawer-panel">
            <div class="drawer-header">
              <h3 class="drawer-title">编辑用户</h3>
              <div v-if="editingUser" class="drawer-subtitle">@{{ editingUser.username }}</div>
              <button class="drawer-close" @click="closeDrawer">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <line x1="18" y1="6" x2="6" y2="18" stroke-linecap="round" />
                  <line x1="6" y1="6" x2="18" y2="18" stroke-linecap="round" />
                </svg>
              </button>
            </div>
            <form class="drawer-body" @submit.prevent="handleDrawerSave">
              <div v-if="drawerError" class="form-error">{{ drawerError }}</div>

              <div class="form-group">
                <label class="form-label">用户名</label>
                <input
                  type="text"
                  class="form-input"
                  :value="editingUser?.username"
                  readonly
                />
              </div>

              <div class="form-group">
                <label class="form-label">昵称</label>
                <input
                  v-model="drawerForm.nickname"
                  type="text"
                  class="form-input"
                  placeholder="输入昵称"
                />
              </div>

              <div class="form-group">
                <label class="form-label">邮箱</label>
                <input
                  v-model="drawerForm.email"
                  type="email"
                  class="form-input"
                  placeholder="example@domain.com"
                />
              </div>

              <div class="form-group">
                <label class="form-label">角色</label>
                <select v-model="drawerForm.role" class="form-select">
                  <option value="user">普通用户</option>
                  <option value="admin">管理员</option>
                </select>
              </div>

              <div class="form-group">
                <label class="form-label">状态</label>
                <select v-model="drawerForm.status" class="form-select">
                  <option value="active">正常</option>
                  <option value="disabled">禁用</option>
                </select>
              </div>

              <div class="drawer-footer">
                <button type="button" class="btn-secondary" @click="closeDrawer">取消</button>
                <button type="submit" class="btn-primary" :disabled="drawerLoading">
                  {{ drawerLoading ? '保存中...' : '保存' }}
                </button>
              </div>
            </form>
          </div>
        </div>
      </Transition>
    </Teleport>

    <!-- Create modal -->
    <Teleport to="body">
      <div v-if="showCreateModal" class="modal-overlay" @click.self="closeModal">
        <div class="modal-card">
          <div class="modal-header">
            <h3 class="modal-title">新增用户</h3>
            <button class="modal-close" @click="closeModal">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <line x1="18" y1="6" x2="6" y2="18" stroke-linecap="round" />
                <line x1="6" y1="6" x2="18" y2="18" stroke-linecap="round" />
              </svg>
            </button>
          </div>
          <form class="modal-body" @submit.prevent="handleCreate">
            <div v-if="createError" class="form-error">{{ createError }}</div>
            <div class="form-group">
              <label class="form-label">用户名</label>
              <input
                v-model="createForm.username"
                type="text"
                class="form-input"
                placeholder="3-20个字符，字母数字下划线"
              />
            </div>
            <div class="form-group">
              <label class="form-label">密码</label>
              <input
                v-model="createForm.password"
                type="password"
                class="form-input"
                placeholder="至少6位"
              />
            </div>
            <div class="form-group">
              <label class="form-label">邮箱（选填）</label>
              <input
                v-model="createForm.email"
                type="email"
                class="form-input"
                placeholder="example@domain.com"
              />
            </div>
            <div class="form-group">
              <label class="form-label">角色</label>
              <select v-model="createForm.role" class="form-select">
                <option value="user">普通用户</option>
                <option value="admin">管理员</option>
              </select>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn-secondary" @click="closeModal">取消</button>
              <button type="submit" class="btn-primary" :disabled="createLoading">
                {{ createLoading ? '创建中...' : '创建' }}
              </button>
            </div>
          </form>
        </div>
      </div>
    </Teleport>

    <!-- Confirm dialog -->
    <Teleport to="body">
      <div v-if="showConfirmDialog" class="modal-overlay" @click.self="showConfirmDialog = false">
        <div class="confirm-dialog">
          <div class="confirm-header">
            <h3 class="confirm-title">确认删除</h3>
          </div>
          <div class="confirm-body">
            <p>确定删除选中的 {{ selectedIds.size }} 个用户？此操作不可撤销。</p>
          </div>
          <div class="confirm-footer">
            <button class="btn-secondary" @click="showConfirmDialog = false">取消</button>
            <button class="btn-error" :disabled="confirmLoading" @click="confirmBatchDelete">
              {{ confirmLoading ? '删除中...' : '确认删除' }}
            </button>
          </div>
        </div>
      </div>
    </Teleport>
  </div>
</template>

<style scoped>
.users-page {
  padding: 40px;
}

.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 32px;
}

.header-left {
  flex: 1;
}

.page-title {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 400;
  color: var(--color-ink);
  letter-spacing: -0.3px;
  margin: 0 0 20px 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 600px;
}

.stat-card {
  background: var(--color-surface-card);
  border-radius: 12px;
  padding: 16px 20px;
}

.stat-value {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400;
  color: var(--color-ink);
  line-height: 1;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 13px;
  color: var(--color-muted);
  font-weight: 500;
}

/* Filter bar */
.filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.filter-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.status-tabs {
  display: flex;
  gap: 4px;
  background: var(--color-surface-soft);
  padding: 4px;
  border-radius: 8px;
}

.status-tab {
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-muted);
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.status-tab:hover {
  color: var(--color-ink);
}

.status-tab.active {
  background: var(--color-surface-card);
  color: var(--color-ink);
}

.role-select {
  padding: 8px 12px;
  background: var(--color-surface-card);
  border: 1px solid var(--color-hairline);
  border-radius: 8px;
  font-size: 13px;
  color: var(--color-ink);
  cursor: pointer;
}

.role-select:focus {
  outline: none;
  border-color: var(--color-primary);
}

.search-box {
  position: relative;
  display: flex;
  align-items: center;
}

.search-icon {
  position: absolute;
  left: 12px;
  width: 16px;
  height: 16px;
  color: var(--color-muted);
  pointer-events: none;
}

.search-input {
  padding: 8px 12px 8px 36px;
  background: var(--color-surface-card);
  border: 1px solid var(--color-hairline);
  border-radius: 8px;
  font-size: 13px;
  color: var(--color-ink);
  width: 200px;
  transition: all 0.15s ease;
}

.search-input::placeholder {
  color: var(--color-muted);
}

.search-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(204, 120, 92, 0.15);
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  background: var(--color-primary);
  color: var(--color-on-primary);
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease;
}

.btn-primary:hover {
  background: var(--color-primary-active);
}

.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-primary svg {
  width: 14px;
  height: 14px;
}

/* Table */
.table-card {
  background: var(--color-surface-card);
  border-radius: 12px;
  overflow: hidden;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th {
  padding: 12px 16px;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--color-surface-soft);
  border-bottom: 1px solid var(--color-hairline);
  text-align: left;
}

.data-table th.th-checkbox {
  width: 48px;
  padding: 12px 0 12px 16px;
}

.data-table th.th-sortable {
  cursor: pointer;
  user-select: none;
}

.data-table th.th-sortable:hover {
  color: var(--color-ink);
}

.data-table th.th-sortable span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.sort-icon {
  width: 14px;
  height: 14px;
  transition: transform 0.15s ease;
}

.sort-icon.desc {
  transform: rotate(180deg);
}

.data-table td {
  padding: 14px 16px;
  font-size: 14px;
  color: var(--color-body-strong);
  border-bottom: 1px solid var(--color-hairline);
}

.data-table td.td-checkbox {
  width: 48px;
  padding: 14px 0 14px 16px;
}

.table-row:last-child td {
  border-bottom: none;
}

.table-row:hover td {
  background: var(--color-surface-soft);
}

.table-row.selected td {
  background: rgba(204, 120, 92, 0.05);
}

.checkbox {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--color-primary);
}

.user-cell {
  min-width: 200px;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--color-surface-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-placeholder {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-muted);
}

.user-details {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.user-name {
  font-weight: 500;
  color: var(--color-ink);
  font-size: 14px;
}

.user-username {
  font-size: 12px;
  color: var(--color-muted);
}

.email-cell {
  color: var(--color-muted);
  font-size: 13px;
}

.date-cell {
  font-size: 13px;
  color: var(--color-muted);
}

.role-badge,
.status-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 500;
}

.role-admin {
  background: rgba(204, 120, 92, 0.15);
  color: var(--color-primary);
}

.role-user {
  background: rgba(93, 184, 166, 0.15);
  color: var(--color-accent-teal);
}

.status-active {
  background: rgba(93, 184, 166, 0.15);
  color: var(--color-accent-teal);
}

.status-disabled {
  background: var(--color-hairline);
  color: var(--color-muted);
}

.actions-cell {
  text-align: right;
}

.action-btn {
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-muted);
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.action-btn:hover {
  background: var(--color-hairline);
  color: var(--color-ink);
}

/* Pagination */
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-top: 1px solid var(--color-hairline);
}

.page-info {
  font-size: 13px;
  color: var(--color-muted);
}

.page-buttons {
  display: flex;
  gap: 8px;
}

.page-btn {
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-ink);
  background: var(--color-surface-soft);
  border: 1px solid var(--color-hairline);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.page-btn:hover:not(:disabled) {
  background: var(--color-hairline);
}

.page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Batch bar */
.batch-bar {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 12px 20px;
  background: var(--color-surface-dark);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  z-index: 100;
}

.batch-info {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-on-dark);
}

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

.batch-btn {
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.batch-btn-enable {
  background: var(--color-accent-teal);
  color: white;
}

.batch-btn-enable:hover {
  background: #4ca894;
}

.batch-btn-disable {
  background: var(--color-muted-soft);
  color: white;
}

.batch-btn-disable:hover {
  background: var(--color-muted);
}

.batch-btn-delete {
  background: var(--color-error);
  color: white;
}

.batch-btn-delete:hover {
  background: #b33d3d;
}

/* Drawer */
.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 200;
}

.drawer-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 480px;
  max-width: 100%;
  background: var(--color-canvas);
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
}

.drawer-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--color-hairline);
}

.drawer-title {
  font-size: 18px;
  font-weight: 500;
  color: var(--color-ink);
  margin: 0;
}

.drawer-subtitle {
  font-size: 13px;
  color: var(--color-muted);
}

.drawer-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  color: var(--color-muted);
  transition: all 0.15s ease;
}

.drawer-close:hover {
  background: var(--color-surface-soft);
  color: var(--color-ink);
}

.drawer-close svg {
  width: 18px;
  height: 18px;
}

.drawer-body {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
}

.drawer-footer {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  padding-top: 16px;
  border-top: 1px solid var(--color-hairline);
  margin-top: auto;
}

/* Modal */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 300;
}

.modal-card {
  background: var(--color-canvas);
  border-radius: 12px;
  width: 100%;
  max-width: 440px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--color-hairline);
}

.modal-title {
  font-size: 18px;
  font-weight: 500;
  color: var(--color-ink);
  margin: 0;
}

.modal-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  color: var(--color-muted);
  transition: all 0.15s ease;
}

.modal-close:hover {
  background: var(--color-surface-soft);
  color: var(--color-ink);
}

.modal-close svg {
  width: 18px;
  height: 18px;
}

.modal-body {
  padding: 24px;
}

.form-error {
  padding: 10px 14px;
  background: rgba(198, 69, 69, 0.1);
  border: 1px solid rgba(198, 69, 69, 0.2);
  border-radius: 6px;
  color: var(--color-error);
  font-size: 13px;
  margin-bottom: 16px;
}

.form-group {
  margin-bottom: 16px;
}

.form-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-body-strong);
  margin-bottom: 6px;
}

.form-input,
.form-select {
  width: 100%;
  padding: 10px 14px;
  background: var(--color-canvas);
  border: 1px solid var(--color-hairline);
  border-radius: 8px;
  font-size: 14px;
  color: var(--color-ink);
  transition: all 0.15s ease;
  box-sizing: border-box;
}

.form-input:focus,
.form-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(204, 120, 92, 0.15);
}

.form-input::placeholder {
  color: var(--color-muted);
}

.form-input[readonly] {
  background: var(--color-surface-soft);
  color: var(--color-muted);
  cursor: not-allowed;
}

.modal-footer {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  padding-top: 8px;
}

.btn-secondary {
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-body-strong);
  background: var(--color-surface-soft);
  border: 1px solid var(--color-hairline);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-secondary:hover {
  background: var(--color-hairline);
}

.btn-error {
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 500;
  color: white;
  background: var(--color-error);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-error:hover {
  background: #b33d3d;
}

.btn-error:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Confirm dialog */
.confirm-dialog {
  background: var(--color-canvas);
  border-radius: 12px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.confirm-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--color-hairline);
}

.confirm-title {
  font-size: 18px;
  font-weight: 500;
  color: var(--color-ink);
  margin: 0;
}

.confirm-body {
  padding: 24px;
}

.confirm-body p {
  margin: 0;
  font-size: 14px;
  color: var(--color-body-strong);
  line-height: 1.5;
}

.confirm-footer {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  padding: 16px 24px;
  border-top: 1px solid var(--color-hairline);
}

/* Transitions */
.slide-up-enter-active,
.slide-up-leave-active {
  transition: all 0.2s ease;
}

.slide-up-enter-from,
.slide-up-leave-to {
  opacity: 0;
  transform: translateX(-50%) translateY(20px);
}

.slide-right-enter-active,
.slide-right-leave-active {
  transition: all 0.3s ease;
}

.slide-right-enter-from .drawer-panel,
.slide-right-leave-to .drawer-panel {
  transform: translateX(100%);
}

.slide-right-enter-from,
.slide-right-leave-to {
  opacity: 0;
}

@media (max-width: 1024px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .users-page {
    padding: 24px;
  }

  .page-header {
    flex-direction: column;
    gap: 16px;
  }

  .filter-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .filter-left {
    flex-direction: column;
    align-items: stretch;
  }

  .search-input {
    width: 100%;
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }

  .drawer-panel {
    width: 100%;
  }

  .batch-bar {
    left: 16px;
    right: 16px;
    transform: none;
    flex-direction: column;
    gap: 12px;
  }
}
</style>