<template>
  <div class="page-container">
    <h2 class="page-title">系统管理</h2>

    <el-tabs v-model="activeTab" class="system-tabs">
      <el-tab-pane label="用户管理" name="users">
        <div class="table-card card-shadow">
          <div class="table-header">
            <el-input v-model="userKeyword" placeholder="搜索用户" clearable style="width: 220px" />
            <el-button type="primary" size="small" @click="handleSearch">
              <el-icon><Search /></el-icon>查询
            </el-button>
            <el-button v-if="userStore.isAdmin" type="success" size="small" @click="openAdd">
              <el-icon><Plus /></el-icon>新增用户
            </el-button>
          </div>
          <el-table :data="userList" v-loading="userLoading" stripe size="default">
            <el-table-column prop="username" label="用户名" min-width="120" />
            <el-table-column prop="real_name" label="真实姓名" min-width="120" />
            <el-table-column prop="email" label="邮箱" min-width="160" />
            <el-table-column prop="dept.name" label="部门" min-width="120">
              <template #default="{ row }">
                {{ row.dept?.name || '--' }}
              </template>
            </el-table-column>
            <el-table-column prop="roles" label="角色" min-width="180">
              <template #default="{ row }">
                <el-tag v-for="r in row.roles" :key="r.id" size="small" style="margin-right: 4px">
                  {{ r.name }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="is_active" label="状态" width="90">
              <template #default="{ row }">
                <el-tag :type="row.is_active ? 'success' : 'danger'" size="small">
                  {{ row.is_active ? '正常' : '禁用' }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="160" fixed="right">
              <template #default="{ row }">
                <el-button v-if="userStore.isAdmin" link type="primary" size="small" @click="openEdit(row)">编辑</el-button>
                <el-button v-if="userStore.isAdmin" link type="danger" size="small" :disabled="row.is_superuser" @click="handleDelete(row)">
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination-bar">
            <el-pagination
              v-model:current-page="page"
              v-model:page-size="pageSize"
              :total="total"
              layout="total, prev, pager, next"
              @change="fetchUsers"
            />
          </div>
        </div>
      </el-tab-pane>

      <el-tab-pane label="操作日志" name="logs">
        <div class="table-card card-shadow">
          <el-empty description="日志功能开发中" />
        </div>
      </el-tab-pane>
    </el-tabs>

    <!-- User Form Dialog -->
    <el-dialog v-model="dialogVisible" :title="isEdit ? '编辑用户' : '新增用户'" width="520px">
      <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="form.username" :disabled="isEdit" placeholder="请输入用户名" />
        </el-form-item>
        <el-form-item v-if="!isEdit" label="密码" prop="password">
          <el-input v-model="form.password" type="password" placeholder="请输入密码" show-password />
        </el-form-item>
        <el-form-item label="真实姓名" prop="real_name">
          <el-input v-model="form.real_name" placeholder="请输入真实姓名" />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="form.email" placeholder="请输入邮箱" />
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="form.phone" placeholder="请输入手机号" />
        </el-form-item>
        <el-form-item label="部门" prop="dept_id">
          <el-select v-model="form.dept_id" placeholder="选择部门" clearable style="width: 100%">
            <el-option v-for="d in depts" :key="d.id" :label="d.name" :value="d.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="角色" prop="role_ids">
          <el-select v-model="form.role_ids" multiple placeholder="选择角色" style="width: 100%">
            <el-option v-for="r in roles" :key="r.id" :label="r.name" :value="r.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="状态" prop="is_active">
          <el-radio-group v-model="form.is_active">
            <el-radio :label="true">正常</el-radio>
            <el-radio :label="false">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" :loading="submitting" @click="handleSubmit">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Search, Plus } from '@element-plus/icons-vue'
import { useUserStore } from '@/stores/user'
import { getUsers, createUser, updateUser, deleteUser } from '@/api/user'
import { getRoles, getDepts } from '@/api/user'
import type { UserItem, RoleItem, DeptItem } from '@/api/user'

const userStore = useUserStore()
const activeTab = ref('users')
const userList = ref<UserItem[]>([])
const userLoading = ref(false)
const userKeyword = ref('')
const page = ref(1)
const pageSize = ref(20)
const total = ref(0)

const dialogVisible = ref(false)
const isEdit = ref(false)
const submitting = ref(false)
const formRef = ref()
const roles = ref<RoleItem[]>([])
const depts = ref<DeptItem[]>([])

const form = ref({
  id: undefined as number | undefined,
  username: '',
  password: '',
  real_name: '',
  email: '',
  phone: '',
  dept_id: undefined as number | undefined,
  role_ids: [] as number[],
  is_active: true,
})

const rules = {
  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
  real_name: [{ required: true, message: '请输入真实姓名', trigger: 'blur' }],
}

async function fetchUsers() {
  userLoading.value = true
  try {
    const res: any = await getUsers({
      page: page.value,
      page_size: pageSize.value,
      keyword: userKeyword.value || undefined,
    })
    userList.value = res.data || []
    total.value = res.total || 0
  } catch (e: any) {
    ElMessage.error(e?.message || '加载失败')
  } finally {
    userLoading.value = false
  }
}

async function fetchMeta() {
  try {
    const [rRes, dRes] = await Promise.all([getRoles(), getDepts()])
    roles.value = (rRes as any)?.data || []
    depts.value = (dRes as any)?.data || []
  } catch (e) {
    // ignore
  }
}

function handleSearch() {
  page.value = 1
  fetchUsers()
}

function resetForm() {
  form.value = {
    id: undefined,
    username: '',
    password: '',
    real_name: '',
    email: '',
    phone: '',
    dept_id: undefined,
    role_ids: [],
    is_active: true,
  }
}

function openAdd() {
  resetForm()
  isEdit.value = false
  dialogVisible.value = true
}

function openEdit(row: UserItem) {
  resetForm()
  isEdit.value = true
  form.value.id = row.id
  form.value.username = row.username
  form.value.real_name = row.real_name || ''
  form.value.email = row.email || ''
  form.value.phone = row.phone || ''
  form.value.dept_id = row.dept_id
  form.value.role_ids = row.roles.map(r => r.id)
  form.value.is_active = row.is_active
  dialogVisible.value = true
}

async function handleSubmit() {
  const valid = await formRef.value?.validate().catch(() => false)
  if (!valid) return

  submitting.value = true
  try {
    if (isEdit.value && form.value.id) {
      await updateUser(form.value.id, {
        real_name: form.value.real_name,
        email: form.value.email,
        phone: form.value.phone,
        dept_id: form.value.dept_id,
        is_active: form.value.is_active,
        role_ids: form.value.role_ids,
      })
      ElMessage.success('更新成功')
    } else {
      await createUser({
        username: form.value.username,
        password: form.value.password,
        real_name: form.value.real_name,
        email: form.value.email,
        phone: form.value.phone,
        dept_id: form.value.dept_id,
        is_active: form.value.is_active,
        role_ids: form.value.role_ids,
      })
      ElMessage.success('创建成功')
    }
    dialogVisible.value = false
    fetchUsers()
  } catch (e: any) {
    ElMessage.error(e?.message || '操作失败')
  } finally {
    submitting.value = false
  }
}

async function handleDelete(row: UserItem) {
  try {
    await ElMessageBox.confirm(`确认删除用户 ${row.username}？`, '提示', { type: 'warning' })
    await deleteUser(row.id)
    ElMessage.success('删除成功')
    fetchUsers()
  } catch (e: any) {
    if (e !== 'cancel') ElMessage.error(e?.message || '删除失败')
  }
}

onMounted(() => {
  fetchUsers()
  fetchMeta()
})
</script>

<style scoped lang="scss">
.page-title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 16px;
  color: #303133;
}

.system-tabs {
  background: #fff;
  padding: 16px;
  border-radius: 8px;
}

.table-card {
  padding: 16px;

  .table-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
  }
}

.pagination-bar {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}
</style>
