<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus, Edit, Delete, Refresh, Search } from '@element-plus/icons-vue'
import type {
  Position,
  CreatePositionRequest,
  UpdatePositionRequest,
  PositionFilter,
  Country,
  Category,
  CategoryTree,
} from '@/types'
import { positionsApi } from '@/api/positions'
import { countriesApi } from '@/api/countries'
import { categoriesApi } from '@/api/categories'

const loading = ref(false)
const list = ref<Position[]>([])
const total = ref(0)

const countries = ref<Country[]>([])
const categoriesTree = ref<CategoryTree[]>([])

const filter = reactive<Required<PositionFilter>>({
  countryId: '',
  categoryId: '',
  page: 1,
  pageSize: 10,
})

async function loadLookups() {
  const [c, ct] = await Promise.all([
    countriesApi.getCountriesList({ page: 1, pageSize: 500 }),
    categoriesApi.getCategoryTree(),
  ])
  countries.value = c.items
  categoriesTree.value = ct
}

async function fetchList() {
  loading.value = true
  try {
    const res = await positionsApi.getPositionsList(filter)
    const data = await positionsApi.getPositionsList(filter) as any
    const arr = Array.isArray(data) ? data : (data.items ?? [])
    list.value = arr
    total.value = Array.isArray(data) ? data.length : (data.total ?? 0)
  } finally {
    loading.value = false
  }
}

function handleSearch() {
  filter.page = 1
  fetchList()
}

function handleReset() {
  filter.countryId = ''
  filter.categoryId = ''
  filter.page = 1
  fetchList()
}

// ---------- Cascader ----------
interface CascaderNode {
  value: string
  label: string
  children?: CascaderNode[]
}

const cascaderOptions = ref<CascaderNode[]>([])

function buildCascader(nodes: CategoryTree[]): CascaderNode[] {
  return nodes.map((n) => ({
    value: n.id,
    label: n.categoryName,
    children: n.children?.length ? buildCascader(n.children) : undefined,
  }))
}

// ---------- Dialog ----------
const dialogRef = ref()
const dialogVisible = ref(false)
const dialogMode = ref<'create' | 'edit'>('create')
const dialogLoading = ref(false)

const dialogForm = reactive<CreatePositionRequest & { id?: string }>({
  indexVal: 0,
  countryId: '',
  categoryId: '',
})

const dialogRules = {
  indexVal: [{ required: true, message: '排序值是必填项', trigger: 'blur' }],
}

function rebuildCascader() {
  cascaderOptions.value = buildCascader(categoriesTree.value)
}

function openAddDialog() {
  dialogMode.value = 'create'
  Object.assign(dialogForm, { id: undefined, indexVal: 0, countryId: '', categoryId: '' })
  rebuildCascader()
  dialogVisible.value = true
}

function openEditDialog(p: Position) {
  dialogMode.value = 'edit'
  Object.assign(dialogForm, {
    id: p.id,
    indexVal: p.indexVal,
    countryId: p.countryId || '',
    categoryId: p.categoryId || '',
  })
  rebuildCascader()
  dialogVisible.value = true
}

async function handleSubmit() {
  if (!dialogRef.value) return
  await dialogRef.value.validate(async (valid: boolean) => {
    if (!valid) return
    dialogLoading.value = true
    try {
      const payload: CreatePositionRequest = {
        indexVal: Number(dialogForm.indexVal),
        countryId: dialogForm.countryId || undefined,
        categoryId: dialogForm.categoryId || undefined,
      }
      if (dialogMode.value === 'create') {
        await positionsApi.createPosition(payload)
        ElMessage.success('位置创建成功')
      } else {
        await positionsApi.updatePosition(dialogForm.id!, payload as UpdatePositionRequest)
        ElMessage.success('位置更新成功')
      }
      dialogVisible.value = false
      fetchList()
    } finally {
      dialogLoading.value = false
    }
  })
}

async function handleDelete(p: Position) {
  try {
    await ElMessageBox.confirm(`确定删除位置 #${p.indexVal} 吗？`, '确认', {
      type: 'warning',
      confirmButtonText: '删除',
      cancelButtonText: '取消',
    })
  } catch {
    return
  }
  await positionsApi.deletePosition(p.id)
  ElMessage.success('删除成功')
  fetchList()
}

function getCategoryName(p: Position): string {
  if (!p.category) return p.categoryId || '-'
  return p.category.parent ? `${p.category.parent.categoryName} / ${p.category.categoryName}` : p.category.categoryName
}

onMounted(async () => {
  await loadLookups()
  await fetchList()
})
</script>

<template>
  <div class="page-container">
    <div class="page-card">
      <div class="filter-bar">
        <el-select
          v-model="filter.countryId"
          placeholder="请选择国家"
          clearable
          @change="handleSearch"
        >
          <el-option
            v-for="c in countries"
            :key="c.id"
            :label="c.countryName"
            :value="c.id"
          />
        </el-select>

        <el-cascader
          v-model="filter.categoryId"
          :options="cascaderOptions"
          :props="{ checkStrictly: true, value: 'value', label: 'label', children: 'children', emitPath: false }"
          placeholder="请选择分类"
          clearable
          @change="handleSearch"
        />

        <el-button type="primary" @click="handleSearch">
          <el-icon><Search /></el-icon>
          <span>搜索</span>
        </el-button>
        <el-button @click="handleReset">
          <el-icon><Refresh /></el-icon>
          <span>重置</span>
        </el-button>

        <div class="filter-spacer" />

        <el-button type="primary" @click="openAddDialog">
          <el-icon><Plus /></el-icon>
          <span>新增位置</span>
        </el-button>
      </div>

      <el-table v-loading="loading" :data="list" border stripe>
        <el-table-column label="排序值" prop="indexVal" width="100" sortable />
        <el-table-column label="国家" min-width="160">
          <template #default="{ row }: { row: Position }">
            {{ row.country?.countryName || '-' }}
          </template>
        </el-table-column>
        <el-table-column label="分类" min-width="200">
          <template #default="{ row }: { row: Position }">
            {{ getCategoryName(row) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" fixed="right">
          <template #default="{ row }: { row: Position }">
            <div class="table-actions">
              <el-button size="small" type="primary" plain @click="openEditDialog(row)">
                <el-icon><Edit /></el-icon>
                <span>编辑</span>
              </el-button>
              <el-button size="small" type="danger" plain @click="handleDelete(row)">
                <el-icon><Delete /></el-icon>
                <span>删除</span>
              </el-button>
            </div>
          </template>
        </el-table-column>
        <template #empty>
          <el-empty description="暂无位置" />
        </template>
      </el-table>

      <el-pagination
        class="pagination"
        v-model:current-page="filter.page"
        v-model:page-size="filter.pageSize"
        :total="total"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        @current-change="(p: number) => { filter.page = p; fetchList() }"
        @size-change="(s: number) => { filter.pageSize = s; filter.page = 1; fetchList() }"
      />
    </div>

    <el-dialog
      v-model="dialogVisible"
      :title="dialogMode === 'create' ? '新增位置' : '编辑位置'"
      width="520px"
      destroy-on-close
    >
      <el-form ref="dialogRef" :model="dialogForm" :rules="dialogRules" label-width="100px">
        <el-form-item label="排序值" prop="indexVal">
          <el-input-number v-model="dialogForm.indexVal" :min="0" :max="9999" />
        </el-form-item>
        <el-form-item label="国家">
          <el-select v-model="dialogForm.countryId" placeholder="可选" clearable style="width: 100%">
            <el-option
              v-for="c in countries"
              :key="c.id"
              :label="c.countryName"
              :value="c.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="分类">
          <el-cascader
            v-model="dialogForm.categoryId"
            :options="cascaderOptions"
            :props="{
              checkStrictly: true,
              value: 'value',
              label: 'label',
              children: 'children',
              emitPath: false,
            }"
            placeholder="可选"
            clearable
            style="width: 100%"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" :loading="dialogLoading" @click="handleSubmit">
          {{ dialogMode === 'create' ? '创建' : '保存' }}
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>
.filter-spacer {
  flex: 1;
}

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