<template>
  <div class="map-mgr-page">
    <el-tabs v-model="activeTab" type="border-card" class="map-mgr-tabs admin-tabs">
      <el-tab-pane label="服务器地图" name="maps">
        <div class="mm-section">
          <div class="map-mgr-header">
            <span class="subtitle">
              统一维护后台所有地图资源（固定文件夹 / JSON），可新增 / 使用 / 重命名 / 编辑 / 删除。
            </span>
            <div class="actions">
              <el-button :loading="loading" @click="refresh">刷新</el-button>
              <el-button type="primary" @click="onCreate">新增地图</el-button>
            </div>
          </div>

          <el-alert
            v-if="directory"
            class="dir-tip"
            type="info"
            :closable="false"
            show-icon
          >
            <template #title>
              地图文件夹：<code>{{ directory }}</code>
              <span v-if="currentName"> · 当前使用：<strong>{{ currentName }}</strong></span>
              <span v-else> · 当前未设置默认使用地图</span>
            </template>
          </el-alert>

          <el-table
            v-loading="loading"
            :data="maps"
            class="map-table"
            border
            :row-class-name="rowClassName"
            empty-text="固定文件夹内还没有地图，点击右上角「新增地图」创建。"
          >
            <el-table-column label="地图名称" min-width="220">
              <template #default="{ row }">
                <span class="map-name">{{ row.name }}</span>
                <el-tag v-if="row.isCurrent" size="small" type="success" effect="dark" class="current-tag">
                  使用中
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="修改时间" prop="modified" width="190" />
            <el-table-column label="操作" width="360" align="right">
              <template #default="{ row }">
                <el-button
                  size="small"
                  type="primary"
                  :disabled="row.isCurrent"
                  :loading="busyName === row.name"
                  @click="onUse(row)"
                >
                  {{ row.isCurrent ? '使用中' : '使用' }}
                </el-button>
                <el-button size="small" @click="onRename(row)">重命名</el-button>
                <el-button size="small" @click="onEdit(row)">编辑</el-button>
                <el-button size="small" type="danger" plain @click="onDelete(row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>

      <el-tab-pane label="多地图连接管理" name="connections">
        <MapConnectionPanel />
      </el-tab-pane>

      <el-tab-pane label="地图合并" name="merge">
        <MapMergePanel @merged="onMerged" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { mapsApi, type MapListItem } from '@/api/mapEdit'
import MapConnectionPanel from '@/components/map-manage/MapConnectionPanel.vue'
import MapMergePanel from '@/components/map-manage/MapMergePanel.vue'

const router = useRouter()

const activeTab = ref<'maps' | 'connections' | 'merge'>('maps')

function onMerged() {
  activeTab.value = 'maps'
  refresh()
}

const loading = ref(false)
const maps = ref<MapListItem[]>([])
const directory = ref('')
const currentName = ref('')
const busyName = ref('')

function rowClassName({ row }: { row: MapListItem }) {
  return row.isCurrent ? 'current-row' : ''
}

async function refresh() {
  loading.value = true
  try {
    const r = await mapsApi.list()
    maps.value = r.maps
    directory.value = r.directory
    const cur = r.maps.find((m) => m.isCurrent)
    currentName.value = cur?.name ?? ''
  } catch (err) {
    ElMessage.error(`加载地图列表失败：${(err as Error).message}`)
  } finally {
    loading.value = false
  }
}

function onCreate() {
  // 新建地图：跳转地图编辑界面（空场景），保存时按时间默认命名。
  router.push({ path: '/admin/map-editor', query: { new: '1' } })
}

function onEdit(row: MapListItem) {
  // 编辑地图：跳转编辑界面并加载该地图，保存时默认替换原地图。
  router.push({ path: '/admin/map-editor', query: { map: row.name } })
}

async function onUse(row: MapListItem) {
  if (row.isCurrent) return
  busyName.value = row.name
  try {
    // 先做一次场景任务校验，给出更友好的明细提示；后端 use 仍会再次校验（防并发竞态）。
    const status = await mapsApi.sceneTaskStatus()
    if (status.hasTask) {
      const detail = status.busyCars
        .slice(0, 5)
        .map((c) => `${c.name}(#${c.id})：${c.reasons.join('、')}`)
        .join('\n')
      await ElMessageBox.alert(
        `场景内仍有 ${status.busyCount} 台车辆存在任务，无法切换当前地图。\n\n${detail}`,
        '禁止切换地图',
        { type: 'warning', confirmButtonText: '我知道了' }
      )
      return
    }

    await ElMessageBox.confirm(
      `确认将「${row.name}」设为当前项目默认使用的地图？切换会重新加载场景。`,
      '切换使用地图',
      { type: 'warning', confirmButtonText: '确认切换', cancelButtonText: '取消' }
    )

    const r = await mapsApi.use(row.name)
    ElMessage.success(`已切换到「${r.name}」：${r.sites} 站点 / ${r.tracks} 路径`)
    await refresh()
  } catch (err) {
    // 取消确认框不提示；其余（含后端 409 任务校验）提示错误文案。
    if (err === 'cancel' || err === 'close') return
    ElMessage.error(`切换失败：${(err as Error).message}`)
  } finally {
    busyName.value = ''
  }
}

const MAP_NAME_PATTERN = /^[^\\/:*?"<>|]+$/

async function onRename(row: MapListItem) {
  try {
    const r = await ElMessageBox.prompt('请输入新的地图名称', '重命名地图', {
      inputValue: row.name,
      inputPattern: MAP_NAME_PATTERN,
      inputErrorMessage: '名称不能包含 \\ / : * ? " < > | 等字符',
      confirmButtonText: '确定',
      cancelButtonText: '取消'
    })
    const to = (r.value ?? '').trim()
    if (!to || to === row.name) return

    busyName.value = row.name
    await mapsApi.rename(row.name, to)
    ElMessage.success(`已重命名为「${to}」`)
    await refresh()
  } catch (err) {
    if (err === 'cancel' || err === 'close') return
    ElMessage.error(`重命名失败：${(err as Error).message}`)
  } finally {
    busyName.value = ''
  }
}

async function onDelete(row: MapListItem) {
  try {
    await ElMessageBox.confirm(
      `确认删除地图「${row.name}」？该操作会从固定文件夹中移除对应 JSON 文件，不可恢复。`,
      '删除地图',
      { type: 'warning', confirmButtonText: '删除', cancelButtonText: '取消', confirmButtonClass: 'el-button--danger' }
    )
    await mapsApi.delete(row.name)
    ElMessage.success(`已删除「${row.name}」`)
    await refresh()
  } catch (err) {
    if (err === 'cancel' || err === 'close') return
    ElMessage.error(`删除失败：${(err as Error).message}`)
  }
}

onMounted(refresh)
</script>

<style scoped>
.map-mgr-page {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

/* Tab 容器撑满主区；玻璃表面 / 选项卡样式由全局 .admin-tabs 提供（与场景管理一致），
 * 在星云紫等深色主题下给到不透明深紫底 + 白字，挡住 AppShell 的高亮光球，保证可读。 */
.map-mgr-tabs {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
/* 单个 Tab 内容区：纵向铺满，表格自适应高度 */
.mm-section {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
}

.map-mgr-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-shrink: 0;
}
.subtitle {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--mg-text-muted);
}
.dir-tip {
  flex-shrink: 0;
}
.dir-tip code {
  font-family: var(--mg-font-mono, monospace);
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--mg-veil-2);
  color: var(--mg-text-light);
}
.map-table {
  flex: 1;
  min-height: 0;
}
.map-name {
  font-weight: 500;
  color: var(--mg-text-light);
}
.current-tag {
  margin-left: 8px;
}
/* 「使用中」行高亮：用主题感知的成功色微透叠加，替换原固定浅绿 --el-color-success-light-9
   （在星云紫深底主题下「浅绿底 + 白字」几乎不可读）。深/浅两套主题下均保持清晰对比。 */
.map-table :deep(.current-row) > td.el-table__cell {
  background: rgba(var(--mg-status-success-rgb), 0.16) !important;
}
.map-table :deep(.current-row):hover > td.el-table__cell {
  background: rgba(var(--mg-status-success-rgb), 0.24) !important;
}
</style>
