<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import { ElMessage } from "element-plus";
import {
  adminApi,
  type AdminAccessOverviewCard,
  type AdminManagerItem,
  type AdminManagerPayload,
  type AdminPermissionItem,
  type AdminRoleItem,
  type AdminRolePayload,
} from "../../api/admin";
import OrderStatusTag from "../../components/OrderStatusTag.vue";

const loading = ref(false);
const cards = ref<AdminAccessOverviewCard[]>([]);
const admins = ref<AdminManagerItem[]>([]);
const roles = ref<AdminRoleItem[]>([]);
const permissions = ref<AdminPermissionItem[]>([]);

const adminDialogVisible = ref(false);
const roleDialogVisible = ref(false);
const adminSubmitting = ref(false);
const roleSubmitting = ref(false);

const adminForm = reactive<AdminManagerPayload>({
  name: "",
  mobile: "",
  email: "",
  password: "",
  status: "enabled",
  role_ids: [],
});

const roleForm = reactive<AdminRolePayload>({
  name: "",
  code: "",
  status: "enabled",
  permission_ids: [],
});

async function fetchAll() {
  loading.value = true;
  try {
    const [overviewRes, adminsRes, rolesRes, permissionsRes] = await Promise.all([
      adminApi.getAccessOverview(),
      adminApi.getAdmins(),
      adminApi.getRoles(),
      adminApi.getPermissions(),
    ]);

    cards.value = overviewRes.data.cards;
    admins.value = adminsRes.data.list;
    roles.value = rolesRes.data.list;
    permissions.value = permissionsRes.data.list;
  } catch (error) {
    console.error(error);
    ElMessage.error("权限中心数据加载失败");
  } finally {
    loading.value = false;
  }
}

function openAdminDialog(row?: AdminManagerItem) {
  if (row) {
    adminForm.id = row.id;
    adminForm.name = row.name;
    adminForm.mobile = row.mobile;
    adminForm.email = row.email;
    adminForm.password = "";
    adminForm.status = row.status;
    adminForm.role_ids = [...row.role_ids];
  } else {
    adminForm.id = undefined;
    adminForm.name = "";
    adminForm.mobile = "";
    adminForm.email = "";
    adminForm.password = "";
    adminForm.status = "enabled";
    adminForm.role_ids = roles.value.length ? [roles.value[0].id] : [];
  }
  adminDialogVisible.value = true;
}

async function submitAdmin() {
  adminSubmitting.value = true;
  try {
    await adminApi.saveAdmin({ ...adminForm, role_ids: [...adminForm.role_ids] });
    ElMessage.success(adminForm.id ? "管理员更新成功" : "管理员创建成功");
    adminDialogVisible.value = false;
    await fetchAll();
  } catch (error) {
    console.error(error);
    ElMessage.error("管理员保存失败");
  } finally {
    adminSubmitting.value = false;
  }
}

function openRoleDialog(row?: AdminRoleItem) {
  if (row) {
    roleForm.id = row.id;
    roleForm.name = row.name;
    roleForm.code = row.code;
    roleForm.status = row.status;
    roleForm.permission_ids = [...row.permission_ids];
  } else {
    roleForm.id = undefined;
    roleForm.name = "";
    roleForm.code = "";
    roleForm.status = "enabled";
    roleForm.permission_ids = permissions.value.map((item) => item.id);
  }
  roleDialogVisible.value = true;
}

async function submitRole() {
  roleSubmitting.value = true;
  try {
    await adminApi.saveRole({ ...roleForm, permission_ids: [...roleForm.permission_ids] });
    ElMessage.success(roleForm.id ? "角色更新成功" : "角色创建成功");
    roleDialogVisible.value = false;
    await fetchAll();
  } catch (error) {
    console.error(error);
    ElMessage.error("角色保存失败");
  } finally {
    roleSubmitting.value = false;
  }
}

onMounted(fetchAll);
</script>

<template>
  <div v-loading="loading">
    <div class="metric-grid" style="margin-bottom: 18px">
      <div v-for="item in cards" :key="item.title" class="metric-card">
        <div class="metric-card__label">{{ item.title }}</div>
        <div class="metric-card__value">{{ item.value }}</div>
        <div class="metric-card__desc">{{ item.desc }}</div>
      </div>
    </div>

    <el-card class="panel-card" shadow="never">
      <el-tabs>
        <el-tab-pane label="管理员账号">
          <div class="filters-row" style="margin-bottom: 16px">
            <el-button type="primary" @click="openAdminDialog()">新增管理员</el-button>
          </div>
          <el-table :data="admins" stripe>
            <el-table-column prop="name" label="姓名" min-width="140" />
            <el-table-column prop="mobile" label="手机号" min-width="140" />
            <el-table-column prop="email" label="邮箱" min-width="200" />
            <el-table-column label="状态" min-width="100">
              <template #default="{ row }">
                <OrderStatusTag :status="row.status_text" />
              </template>
            </el-table-column>
            <el-table-column label="角色" min-width="220">
              <template #default="{ row }">
                {{ row.role_names.join(" / ") || "未分配角色" }}
              </template>
            </el-table-column>
            <el-table-column prop="last_login_at" label="最近登录" min-width="170" />
            <el-table-column label="操作" fixed="right" width="100">
              <template #default="{ row }">
                <el-button link type="primary" @click="openAdminDialog(row)">编辑</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <el-tab-pane label="角色配置">
          <div class="filters-row" style="margin-bottom: 16px">
            <el-button type="primary" @click="openRoleDialog()">新增角色</el-button>
          </div>
          <el-table :data="roles" stripe>
            <el-table-column prop="name" label="角色名称" min-width="140" />
            <el-table-column prop="code" label="角色编码" min-width="160" />
            <el-table-column label="状态" min-width="100">
              <template #default="{ row }">
                <OrderStatusTag :status="row.status_text" />
              </template>
            </el-table-column>
            <el-table-column prop="admin_count" label="管理员数" min-width="100" />
            <el-table-column label="权限摘要" min-width="280">
              <template #default="{ row }">
                {{ row.permission_names.join(" / ") || "未分配权限" }}
              </template>
            </el-table-column>
            <el-table-column label="操作" fixed="right" width="100">
              <template #default="{ row }">
                <el-button link type="primary" @click="openRoleDialog(row)">编辑</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <el-tab-pane label="权限点">
          <el-table :data="permissions" stripe>
            <el-table-column prop="name" label="权限名称" min-width="180" />
            <el-table-column prop="code" label="权限编码" min-width="220" />
            <el-table-column prop="module_text" label="所属模块" min-width="140" />
            <el-table-column prop="action" label="动作" min-width="120" />
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-card>

    <el-dialog v-model="adminDialogVisible" :title="adminForm.id ? '编辑管理员' : '新增管理员'" width="560px">
      <el-form label-position="top">
        <el-form-item label="姓名">
          <el-input v-model="adminForm.name" placeholder="请输入管理员姓名" />
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="adminForm.mobile" placeholder="请输入管理员手机号" />
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="adminForm.email" placeholder="请输入管理员邮箱" />
        </el-form-item>
        <el-form-item :label="adminForm.id ? '登录密码（留空则不修改）' : '登录密码'">
          <el-input v-model="adminForm.password" type="password" show-password placeholder="请输入管理员登录密码" />
        </el-form-item>
        <el-form-item label="账号状态">
          <el-radio-group v-model="adminForm.status">
            <el-radio value="enabled">启用</el-radio>
            <el-radio value="disabled">停用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="角色分配">
          <el-select v-model="adminForm.role_ids" multiple style="width: 100%">
            <el-option v-for="item in roles" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="adminDialogVisible = false">取消</el-button>
        <el-button type="primary" :loading="adminSubmitting" @click="submitAdmin">保存</el-button>
      </template>
    </el-dialog>

    <el-dialog v-model="roleDialogVisible" :title="roleForm.id ? '编辑角色' : '新增角色'" width="640px">
      <el-form label-position="top">
        <el-form-item label="角色名称">
          <el-input v-model="roleForm.name" placeholder="请输入角色名称" />
        </el-form-item>
        <el-form-item label="角色编码">
          <el-input v-model="roleForm.code" placeholder="请输入角色编码，如 operations_manager" />
        </el-form-item>
        <el-form-item label="角色状态">
          <el-radio-group v-model="roleForm.status">
            <el-radio value="enabled">启用</el-radio>
            <el-radio value="disabled">停用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="权限分配">
          <el-select v-model="roleForm.permission_ids" multiple style="width: 100%">
            <el-option
              v-for="item in permissions"
              :key="item.id"
              :label="`${item.module_text} / ${item.name}`"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="roleDialogVisible = false">取消</el-button>
        <el-button type="primary" :loading="roleSubmitting" @click="submitRole">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>
