<script setup lang="ts">
import { onMounted, ref } from 'vue'

import AdminPaginationBar from '@/components/admin/AdminPaginationBar.vue'
import AdminStatusTag from '@/components/admin/AdminStatusTag.vue'
import { isFeedbackDismissed, showConfirm, showError, showPrompt, showSuccess } from '@/lib/feedback'
import {
  createAdminUser,
  fetchAdminUsers,
  resetAdminUserPassword,
  updateAdminUserRole,
  updateAdminUserStatus,
} from '@/services/admin'
import type { AdminPagination, AdminRole, AdminUserListItem } from '@/types/admin'
import { getAdminUserId, hasAdminRole } from '@/utils/admin-auth'
import { adminUserRoleOptions, adminUserStatusOptions } from '@/utils/admin-options'
import { formatAdminDateTime } from '@/utils/admin-time'

const loading = ref(true)
const creating = ref(false)
const actionLoadingId = ref<number | null>(null)
const errorMessage = ref('')
const username = ref('')
const role = ref('')
const status = ref('')
const createUsername = ref('')
const createPassword = ref('')
const createRole = ref<AdminRole>('operator')
const items = ref<AdminUserListItem[]>([])
const pagination = ref<AdminPagination>({
  page: 1,
  pageSize: 20,
  total: 0,
})

function isCurrentUser(userId: number) {
  return getAdminUserId() === userId
}

function formatRoleLabel(role: AdminRole) {
  if (role === 'admin') {
    return '管理员'
  }

  if (role === 'support') {
    return '客服'
  }

  return '普通运营'
}

async function loadUsers(page = pagination.value.page) {
  if (!hasAdminRole('admin')) {
    loading.value = false
    return
  }

  loading.value = true
  errorMessage.value = ''

  try {
    const response = await fetchAdminUsers({
      page,
      pageSize: pagination.value.pageSize,
      username: username.value.trim(),
      role: role.value.trim(),
      status: status.value.trim(),
    })
    items.value = response.data.items
    pagination.value = response.data.pagination
  } catch (error) {
    errorMessage.value = error instanceof Error ? error.message : '读取后台用户失败'
  } finally {
    loading.value = false
  }
}

async function submitCreate() {
  if (!createUsername.value.trim() || !createPassword.value.trim()) {
    showError('请填写账号和密码')
    return
  }

  creating.value = true

  try {
    await createAdminUser({
      username: createUsername.value.trim(),
      password: createPassword.value.trim(),
      role: createRole.value,
      status: 'active',
    })
    showSuccess('后台用户已创建')
    createUsername.value = ''
    createPassword.value = ''
    createRole.value = 'operator'
    await loadUsers(1)
  } catch (error) {
    showError(error instanceof Error ? error.message : '创建后台用户失败')
  } finally {
    creating.value = false
  }
}

async function updateRole(item: AdminUserListItem, nextRole: AdminRole) {
  if (item.role === nextRole) {
    return
  }

  try {
    await showConfirm(`确认将 ${item.username} 调整为${formatRoleLabel(nextRole)}吗？`, '确认操作', {
      type: 'warning',
      confirmButtonText: '继续执行',
      cancelButtonText: '取消',
    })
  } catch {
    return
  }

  actionLoadingId.value = item.userId

  try {
    await updateAdminUserRole(item.userId, { role: nextRole })
    showSuccess('用户角色已更新')
    await loadUsers()
  } catch (error) {
    showError(error instanceof Error ? error.message : '更新用户角色失败')
  } finally {
    actionLoadingId.value = null
  }
}

async function toggleStatus(item: AdminUserListItem) {
  const nextStatus = item.status === 'active' ? 'disabled' : 'active'

  try {
    await showConfirm(`确认将 ${item.username}${nextStatus === 'active' ? '启用' : '停用'}吗？`, '确认操作', {
      type: nextStatus === 'active' ? 'info' : 'warning',
      confirmButtonText: '继续执行',
      cancelButtonText: '取消',
    })
  } catch {
    return
  }

  actionLoadingId.value = item.userId

  try {
    await updateAdminUserStatus(item.userId, { status: nextStatus })
    showSuccess('用户状态已更新')
    await loadUsers()
  } catch (error) {
    showError(error instanceof Error ? error.message : '更新用户状态失败')
  } finally {
    actionLoadingId.value = null
  }
}

async function promptResetPassword(item: AdminUserListItem) {
  try {
    const result = await showPrompt(`请输入 ${item.username} 的新密码`, '重置密码', {
      inputType: 'password',
      inputPlaceholder: '至少 8 位',
      confirmButtonText: '提交',
      cancelButtonText: '取消',
      inputValidator: (value) => value.trim().length >= 8 || '密码至少 8 位',
    })

    actionLoadingId.value = item.userId
    await resetAdminUserPassword(item.userId, { password: result.value.trim() })
    showSuccess('用户密码已重置')
    await loadUsers()
  } catch (error) {
    if (isFeedbackDismissed(error)) {
      return
    }
    showError(error instanceof Error ? error.message : '重置密码失败')
  } finally {
    actionLoadingId.value = null
  }
}

onMounted(loadUsers)
</script>

<template>
  <section class="admin-panel">
    <header class="panel-header">
      <div>
        <h1>后台用户</h1>
        <p>管理员可维护后台账号、角色和启停状态，避免继续使用单一口令。</p>
      </div>
    </header>

    <div v-if="!hasAdminRole('admin')" class="empty-block">仅管理员可以访问用户管理。</div>

    <template v-else>
      <section class="form-card">
        <div class="form-row">
          <input v-model="username" class="text-input" placeholder="账号筛选" />
          <select v-model="role" class="text-input select-input">
            <option v-for="option in adminUserRoleOptions" :key="option.value" :value="option.value">
              {{ option.label }}
            </option>
          </select>
          <select v-model="status" class="text-input select-input">
            <option v-for="option in adminUserStatusOptions" :key="option.value" :value="option.value">
              {{ option.label }}
            </option>
          </select>
          <el-button round @click="() => loadUsers()">查询列表</el-button>
        </div>

        <div class="form-row form-row-top">
          <input v-model="createUsername" class="text-input" placeholder="新账号" />
          <input v-model="createPassword" class="text-input" type="password" placeholder="新密码，至少 8 位" />
          <select v-model="createRole" class="text-input select-input">
            <option value="operator">普通运营</option>
            <option value="support">客服</option>
            <option value="admin">管理员</option>
          </select>
          <el-button :loading="creating" round type="primary" @click="submitCreate">新增用户</el-button>
        </div>
      </section>

      <p v-if="errorMessage" class="error-copy">{{ errorMessage }}</p>
      <div v-if="loading" class="empty-block">用户列表加载中</div>

      <div v-else class="table-card">
        <table class="data-table">
          <thead>
            <tr>
              <th>ID</th>
              <th>账号</th>
              <th>角色</th>
              <th>状态</th>
              <th>创建时间</th>
              <th>更新时间</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="item in items" :key="item.userId">
              <td>{{ item.userId }}</td>
              <td>{{ item.username }}</td>
              <td>{{ formatRoleLabel(item.role) }}</td>
              <td><AdminStatusTag :status="item.status" /></td>
              <td>{{ formatAdminDateTime(item.createdAt) }}</td>
              <td>{{ formatAdminDateTime(item.updatedAt) }}</td>
              <td>
                <div class="action-stack">
                  <el-button
                    :loading="actionLoadingId === item.userId"
                    link
                    :disabled="isCurrentUser(item.userId)"
                    @click="updateRole(item, 'admin')"
                  >
                    设为管理员
                  </el-button>
                  <el-button
                    :loading="actionLoadingId === item.userId"
                    link
                    :disabled="isCurrentUser(item.userId)"
                    @click="updateRole(item, 'operator')"
                  >
                    设为运营
                  </el-button>
                  <el-button
                    :loading="actionLoadingId === item.userId"
                    link
                    :disabled="isCurrentUser(item.userId)"
                    @click="updateRole(item, 'support')"
                  >
                    设为客服
                  </el-button>
                  <el-button
                    :loading="actionLoadingId === item.userId"
                    link
                    :disabled="isCurrentUser(item.userId)"
                    @click="toggleStatus(item)"
                  >
                    {{ item.status === 'active' ? '停用' : '启用' }}
                  </el-button>
                  <el-button
                    :loading="actionLoadingId === item.userId"
                    link
                    type="primary"
                    @click="promptResetPassword(item)"
                  >
                    重置密码
                  </el-button>
                  <span v-if="isCurrentUser(item.userId)" class="self-copy">当前登录账号</span>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
        <AdminPaginationBar
          :page="pagination.page"
          :page-size="pagination.pageSize"
          :total="pagination.total"
          :loading="loading"
          @change="loadUsers"
        />
      </div>
    </template>
  </section>
</template>

<style scoped>
.admin-panel {
  display: grid;
  gap: 16px;
}

.panel-header h1 {
  margin: 0;
  color: #1d3555;
}

.panel-header p {
  margin: 8px 0 0;
  color: #64748b;
}

.form-card,
.table-card,
.empty-block,
.error-copy {
  padding: 18px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(86, 108, 138, 0.1);
}

.error-copy {
  color: #b42318;
}

.form-row {
  display: flex;
  gap: 12px;
  align-items: center;
}

.form-row-top {
  margin-top: 12px;
}

.text-input {
  width: 100%;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid rgba(86, 108, 138, 0.18);
  background: rgba(255, 255, 255, 0.94);
}

.select-input {
  appearance: none;
}

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

.data-table th,
.data-table td {
  padding: 12px 10px;
  text-align: left;
  border-bottom: 1px solid rgba(86, 108, 138, 0.08);
  color: #334155;
  vertical-align: top;
}

.data-table th {
  color: #64748b;
  font-size: 13px;
}

.action-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.self-copy {
  color: #64748b;
  font-size: 12px;
  line-height: 30px;
}
</style>
