<script setup>
import { computed, onMounted, ref } from "vue";
import { useAuthStore, ROLE_ADMIN, ROLE_AGENT,ROLE_OEM } from "../../stores/auth.js";
import {
  listAdminUsersApi,
  createAdminUserApi,
  updateAdminUserApi,
  deleteAdminUserApi,
} from "../../api/adminUsers.js";

const auth = useAuthStore();

const ROLE_OPTIONS = [
  { label: "普通用户", value: 0 },
  { label: "管理员", value: 1 },
  { label: "代理", value: 2 },
  { label: "OEM", value: 3 },
];

const ROLE_LABELS = {
  0: "普通用户",
  [ROLE_ADMIN]: "管理员",
  [ROLE_AGENT]: "代理",
  [ROLE_OEM]: "OEM",
};

const users = ref([]);
const total = ref(0);
const page = ref(1);
const pageSize = ref(20);
const loading = ref(false);
const saving = ref(false);
const feedback = ref({ severity: "", message: "" });

const dialogVisible = ref(false);
const dialogMode = ref("create");
const editingId = ref(null);

const emptyForm = () => ({
  username: "",
  password: "",
  phone: "",
  role_id: 0,
  vip_end_time: "",
  clear_vip_end_time: false,
});

const form = ref(emptyForm());

const dialogTitle = computed(() =>
  dialogMode.value === "create" ? "新建用户" : "编辑用户",
);

function formatDateTime(value) {
  if (!value) return "—";
  const d = new Date(value);
  if (Number.isNaN(d.getTime())) return "—";
  return d.toLocaleString("zh-CN", { hour12: false });
}

function toDatetimeLocalValue(iso) {
  if (!iso) return "";
  const d = new Date(iso);
  if (Number.isNaN(d.getTime())) return "";
  const pad = (n) => String(n).padStart(2, "0");
  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
}

function roleLabel(roleId) {
  return ROLE_LABELS[roleId] ?? `角色 ${roleId}`;
}

function roleSeverity(roleId) {
  if (roleId === ROLE_ADMIN) return "info";
  if (roleId === ROLE_AGENT) return "warn";
  return "secondary";
}

function showMessage(severity, message) {
  feedback.value = { severity, message };
}

async function loadUsers() {
  loading.value = true;
  feedback.value = { severity: "", message: "" };
  const res = await listAdminUsersApi(auth.token, {
    page: page.value,
    pageSize: pageSize.value,
  });
  loading.value = false;

  if (!res.ok) {
    showMessage("error", res.message || "加载用户列表失败");
    return;
  }

  const data = res.data;
  users.value = Array.isArray(data?.items) ? data.items : [];
  total.value = typeof data?.total === "number" ? data.total : 0;
  if (typeof data?.page === "number") page.value = data.page;
  if (typeof data?.page_size === "number") pageSize.value = data.page_size;
}

async function onPage(event) {
  page.value = event.page + 1;
  pageSize.value = event.rows;
  await loadUsers();
}

function openCreateDialog() {
  dialogMode.value = "create";
  editingId.value = null;
  form.value = emptyForm();
  dialogVisible.value = true;
}

function openEditDialog(row) {
  dialogMode.value = "edit";
  editingId.value = row.id;
  form.value = {
    username: row.username,
    password: "",
    phone: row.phone || "",
    role_id: row.role_id,
    vip_end_time: toDatetimeLocalValue(row.vip_end_time),
    clear_vip_end_time: false,
  };
  dialogVisible.value = true;
}

function buildPayload() {
  const payload = {
    username: form.value.username.trim(),
    phone: form.value.phone.trim() || null,
    role_id: form.value.role_id,
  };

  if (form.value.password.trim()) {
    payload.password = form.value.password;
  }

  if (form.value.clear_vip_end_time) {
    payload.clear_vip_end_time = true;
  } else if (form.value.vip_end_time) {
    payload.vip_end_time = new Date(form.value.vip_end_time).toISOString();
  }

  return payload;
}

async function saveUser() {
  if (!form.value.username.trim()) {
    showMessage("warn", "用户名不能为空");
    return;
  }
  if (dialogMode.value === "create" && form.value.password.length < 6) {
    showMessage("warn", "密码至少 6 位");
    return;
  }

  saving.value = true;
  feedback.value = { severity: "", message: "" };

  const payload = buildPayload();
  let res;

  if (dialogMode.value === "create") {
    if (!payload.password) {
      saving.value = false;
      showMessage("warn", "请设置初始密码");
      return;
    }
    res = await createAdminUserApi(auth.token, payload);
  } else {
    res = await updateAdminUserApi(auth.token, editingId.value, payload);
  }

  saving.value = false;

  if (!res.ok) {
    showMessage("error", res.message || "保存失败");
    return;
  }

  dialogVisible.value = false;
  showMessage("success", res.message || "保存成功");
  await loadUsers();
}

async function removeUser(row) {
  if (row.id === auth.currentUser?.id) {
    showMessage("warn", "不能删除当前登录账号");
    return;
  }

  const ok = window.confirm(`确定删除用户「${row.username}」？此操作不可恢复。`);
  if (!ok) return;

  const res = await deleteAdminUserApi(auth.token, row.id);
  if (!res.ok) {
    showMessage("error", res.message || "删除失败");
    return;
  }

  showMessage("success", res.message || "已删除");
  if (users.value.length === 1 && page.value > 1) {
    page.value -= 1;
  }
  await loadUsers();
}

onMounted(() => {
  loadUsers();
});
</script>

<template>
  <div class="admin-page admin-users">
    <div class="admin-users__header">
      <div>
        <h1 class="admin-page__title gradient-text">用户管理</h1>
        <p class="text-sm text-text-muted">创建、编辑与删除系统用户，分配角色与 VIP 到期时间</p>
      </div>
      <Button label="新建用户" @click="openCreateDialog" />
    </div>

    <Message
      v-if="feedback.message"
      :severity="feedback.severity"
      :closable="true"
      class="admin-users__message"
      @close="feedback.message = ''"
    >
      {{ feedback.message }}
    </Message>

    <DataTable
      :value="users"
      :loading="loading"
      lazy
      paginator
      :rows="pageSize"
      :total-records="total"
      :first="(page - 1) * pageSize"
      :rows-per-page-options="[10, 20, 50]"
      paginator-template="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown"
      current-page-report-template="共 {totalRecords} 条"
      striped-rows
      size="small"
      class="admin-users__table"
      data-key="id"
      @page="onPage"
    >
      <Column field="id" header="ID" style="width: 4rem" />
      <Column field="username" header="用户名" />
      <Column field="phone" header="手机号">
        <template #body="{ data }">
          {{ data.phone || "—" }}
        </template>
      </Column>
      <Column field="role_id" header="角色" style="width: 7rem">
        <template #body="{ data }">
          <Tag :value="roleLabel(data.role_id)" :severity="roleSeverity(data.role_id)" />
        </template>
      </Column>
      <Column field="vip_end_time" header="VIP 到期">
        <template #body="{ data }">
          {{ formatDateTime(data.vip_end_time) }}
        </template>
      </Column>
      <Column field="created_at" header="注册时间">
        <template #body="{ data }">
          {{ formatDateTime(data.created_at) }}
        </template>
      </Column>
      <Column header="操作" style="width: 9rem">
        <template #body="{ data }">
          <div class="admin-users__actions">
            <Button
              label="编辑"
              size="small"
              severity="secondary"
              text
              @click="openEditDialog(data)"
            />
            <Button
              label="删除"
              size="small"
              severity="danger"
              text
              :disabled="data.id === auth.currentUser?.id"
              @click="removeUser(data)"
            />
          </div>
        </template>
      </Column>
      <template #empty>
        <p class="py-6 text-center text-sm text-text-muted">暂无用户</p>
      </template>
    </DataTable>

    <Dialog
      v-model:visible="dialogVisible"
      :header="dialogTitle"
      modal
      class="admin-users-dialog"
      :style="{ width: '28rem' }"
    >
      <div class="flex flex-col gap-4">
        <div class="flex flex-col gap-2">
          <label class="text-xs text-text-muted uppercase">用户名</label>
          <InputText v-model="form.username" class="w-full" autocomplete="off" />
        </div>

        <div class="flex flex-col gap-2">
          <label class="text-xs text-text-muted uppercase">
            {{ dialogMode === "create" ? "密码" : "新密码（留空不修改）" }}
          </label>
          <Password
            v-model="form.password"
            :feedback="false"
            toggle-mask
            fluid
            input-class="w-full"
            :placeholder="dialogMode === 'create' ? '至少 6 位' : '留空则不修改'"
          />
        </div>

        <div class="flex flex-col gap-2">
          <label class="text-xs text-text-muted uppercase">手机号（可选）</label>
          <InputText v-model="form.phone" class="w-full" autocomplete="off" />
        </div>

        <div class="flex flex-col gap-2">
          <label class="text-xs text-text-muted uppercase">角色</label>
          <Select
            v-model="form.role_id"
            :options="ROLE_OPTIONS"
            option-label="label"
            option-value="value"
            class="w-full"
          />
        </div>

        <div class="flex flex-col gap-2">
          <label class="text-xs text-text-muted uppercase">VIP 到期时间</label>
          <InputText
            v-model="form.vip_end_time"
            type="datetime-local"
            class="w-full"
            :disabled="form.clear_vip_end_time"
          />
          <label v-if="dialogMode === 'edit'" class="flex items-center gap-2 text-sm text-text-muted">
            <Checkbox v-model="form.clear_vip_end_time" :binary="true" input-id="clear-vip" />
            <span>清除 VIP 到期时间</span>
          </label>
        </div>
      </div>

      <template #footer>
        <Button label="取消" severity="secondary" text @click="dialogVisible = false" />
        <Button label="保存" :loading="saving" @click="saveUser" />
      </template>
    </Dialog>
  </div>
</template>
