<template>
  <v-container fluid class="d-flex flex-column h-100 pa-0">
    <!-- 固定工具栏 -->
    <v-toolbar density="compact" class="flex-shrink-0">
      <v-toolbar-title>用户管理</v-toolbar-title>
      <v-spacer />
      <v-btn icon="mdi-refresh" :loading="loading" @click="fetchData" />
      <v-btn color="primary" prepend-icon="mdi-plus" @click="openCreate">
        新建
      </v-btn>
    </v-toolbar>

    <!-- 筛选区域 -->
    <v-sheet class="flex-shrink-0 pa-4">
      <v-row dense>
        <v-col cols="12" md="3">
          <v-text-field
            v-model="filters.search"
            label="搜索"
            prepend-inner-icon="mdi-magnify"
            clearable
            hide-details
          />
        </v-col>
        <v-col cols="12" md="3">
          <v-select
            v-model="filters.status"
            :items="statusOptions"
            label="状态"
            clearable
            hide-details
          />
        </v-col>
      </v-row>
    </v-sheet>

    <v-divider />

    <!-- 可滚动内容区 -->
    <div class="flex-grow-1 overflow-y-auto" style="min-height: 0">
      <v-skeleton-loader v-if="loading" type="table-heading, table-row@10" />

      <v-empty-state
        v-else-if="!users.length"
        icon="mdi-account-off"
        title="暂无用户"
        text="点击新建按钮添加第一个用户"
      >
        <template #actions>
          <v-btn color="primary" @click="openCreate">新建用户</v-btn>
        </template>
      </v-empty-state>

      <v-data-table
        v-else
        :headers="headers"
        :items="users"
        fixed-header
        hover
      >
        <template #item.name="{ value }">
          <v-tooltip :text="value" location="top">
            <template #activator="{ props }">
              <span
                v-bind="props"
                class="text-truncate d-inline-block"
                style="max-width: 150px"
              >
                {{ value }}
              </span>
            </template>
          </v-tooltip>
        </template>

        <template #item.status="{ value }">
          <v-chip
            :color="value === 'active' ? 'success' : 'grey'"
            size="small"
          >
            {{ value === 'active' ? '活跃' : '禁用' }}
          </v-chip>
        </template>

        <template #item.actions="{ item }">
          <v-btn
            icon="mdi-pencil"
            size="small"
            variant="text"
            @click="edit(item)"
          />
          <v-btn
            icon="mdi-delete"
            size="small"
            variant="text"
            color="error"
            @click="remove(item)"
          />
        </template>
      </v-data-table>
    </div>
  </v-container>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import type { User } from '@/types/user'
import { userApi } from '@/api/modules/user'

// State
const loading = ref(false)
const users = ref<User[]>([])
const filters = reactive({
  search: '',
  status: null as string | null,
})

// Table config
const headers = [
  { title: '姓名', key: 'name', width: 200 },
  { title: '邮箱', key: 'email' },
  { title: '状态', key: 'status', width: 120 },
  { title: '创建时间', key: 'createdAt', width: 180 },
  { title: '操作', key: 'actions', width: 120, sortable: false },
]

const statusOptions = [
  { title: '全部', value: null },
  { title: '活跃', value: 'active' },
  { title: '禁用', value: 'disabled' },
]

// Methods
async function fetchData() {
  loading.value = true
  try {
    users.value = await userApi.getList(filters)
  } finally {
    loading.value = false
  }
}

function openCreate() {
  // TODO: Open create dialog
}

function edit(item: User) {
  // TODO: Open edit dialog
}

function remove(item: User) {
  // TODO: Confirm and delete
}

onMounted(fetchData)
</script>
