<template>
  <div class="setup-page" v-loading="loading">
    <header class="setup-head">
      <div>
        <h1>初始配置</h1>
        <p>向导选型已保存。请先完成车辆与地图，调度才能落地。</p>
      </div>
      <div class="setup-progress">
        <span class="pg-num">{{ doneCount }}/{{ steps.length }}</span>
        <span class="pg-label">必做步骤</span>
      </div>
    </header>

    <el-alert
      v-if="status?.error"
      type="error"
      :closable="false"
      show-icon
      :title="`无法读取现场数据：${status.error}`"
    />

    <div v-if="profileLine" class="setup-profile">{{ profileLine }}</div>

    <article class="setup-card" :class="{ done: status?.carsReady }">
      <div class="card-head">
        <div class="card-index">1</div>
        <div class="card-titles">
          <h2>车辆配置</h2>
          <el-tag size="small" type="danger" effect="plain">必做</el-tag>
        </div>
        <el-tag :type="status?.carsReady ? 'success' : 'warning'" size="small">
          {{ status?.carsReady ? '已完成' : '未完成' }}
        </el-tag>
      </div>
      <p class="card-lead">
        必须至少添加 <b>1 辆车</b>，并补齐通讯参数：<b>IP</b>（字段 address）和 <b>端口</b>（字段 Port，默认 5000）。
      </p>
      <ul class="card-facts">
        <li>当前车辆：{{ status?.carCount ?? '—' }} 辆</li>
        <li>已填 IP + 端口：{{ status?.carsWithParams ?? '—' }} 辆</li>
      </ul>
      <div class="card-actions">
        <el-button type="primary" @click="go('/admin/cars?setup=1')">去添加车辆</el-button>
      </div>
    </article>

    <article class="setup-card" :class="{ done: status?.mapsReady }">
      <div class="card-head">
        <div class="card-index">2</div>
        <div class="card-titles">
          <h2>地图配置</h2>
          <el-tag size="small" type="danger" effect="plain">必做</el-tag>
        </div>
        <el-tag :type="status?.mapsReady ? 'success' : 'warning'" size="small">
          {{ status?.mapsReady ? '已完成' : '未完成' }}
        </el-tag>
      </div>
      <p class="card-lead">按顺序配置站点、路径和功能参数。至少要有 1 个站点和 1 条路径。</p>
      <ul class="card-facts">
        <li>站点：{{ status?.siteCount ?? '—' }}</li>
        <li>路径：{{ status?.trackCount ?? '—' }}</li>
      </ul>
      <div class="map-grid">
        <button type="button" class="map-link" @click="go('/admin/maps?setup=1')">
          <span class="map-link-name">地图管理</span>
          <span class="map-link-desc">新增或选用地图文件</span>
        </button>
        <button type="button" class="map-link" @click="go('/admin/tracks?setup=1&tab=site')">
          <span class="map-link-name">站点</span>
          <span class="map-link-desc">在场景里添加站点</span>
        </button>
        <button type="button" class="map-link" @click="go('/admin/tracks?setup=1&tab=track')">
          <span class="map-link-name">路径</span>
          <span class="map-link-desc">连接站点形成路径</span>
        </button>
        <button type="button" class="map-link" @click="go('/admin/simple-fields?setup=1')">
          <span class="map-link-name">功能参数</span>
          <span class="map-link-desc">维护站点 / 车辆字段</span>
        </button>
      </div>
    </article>

    <footer class="setup-foot">
      <el-button @click="refresh" :loading="loading">刷新进度</el-button>
      <el-button type="primary" @click="go('/admin/dashboard')">
        {{ status?.incomplete === false ? '进入总览' : '稍后去总览' }}
      </el-button>
    </footer>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { loadSetupStatus } from '@/api/setup'
import type { SetupStatus } from '@/types/setup'

const router = useRouter()
const loading = ref(false)
const status = ref<SetupStatus | null>(null)
const steps = [{ id: 'cars' }, { id: 'maps' }]

const doneCount = computed(() => {
  if (!status.value) return 0
  return Number(status.value.carsReady) + Number(status.value.mapsReady)
})

const NAV_LABEL: Record<string, string> = {
  magnetic: '磁导航',
  qrcode: '二维码导航',
  laser: '激光导航'
}

const profileLine = computed(() => {
  const s = status.value
  if (!s) return ''
  const nav = s.navigationKinds.map((k) => NAV_LABEL[k] ?? k).join('、') || '未选'
  const scene = s.scenarios.length ? s.scenarios.join('、') : '暂不选'
  const mods = s.modules.length ? s.modules.join('、') : '暂不选'
  return `本次选型：导航 ${nav} · 场景 ${scene} · 模块 ${mods}`
})

async function refresh() {
  loading.value = true
  try {
    status.value = await loadSetupStatus()
  } finally {
    loading.value = false
  }
}

function go(path: string) {
  router.push(path)
}

onMounted(() => { void refresh() })
</script>

<style scoped>
.setup-page {
  max-width: 920px;
  margin: 0 auto;
  padding: 8px 4px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.setup-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
}
.setup-head h1 { margin: 0; font-size: 22px; color: var(--mg-text, #28213a); }
.setup-head p { margin: 6px 0 0; font-size: 13px; color: var(--mg-text-muted, #756d85); }
.setup-progress {
  display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2;
}
.pg-num { font-size: 28px; font-weight: 700; color: #7543e8; font-variant-numeric: tabular-nums; }
.pg-label { font-size: 12px; color: #756d85; }
.setup-profile {
  font-size: 12.5px; color: #756d85;
  padding: 8px 12px; border-radius: 10px;
  background: #f6f3fb; border: 1px solid rgba(40, 33, 58, 0.08);
}
.setup-card {
  background: #fff;
  border: 1px solid rgba(40, 33, 58, 0.08);
  border-radius: 14px;
  padding: 18px 20px 16px;
}
.setup-card.done { border-color: rgba(82, 196, 26, 0.35); }
.card-head { display: flex; align-items: center; gap: 12px; }
.card-index {
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #7543e8; color: #fff; font-weight: 700; font-size: 13px;
}
.card-titles { flex: 1; display: flex; align-items: center; gap: 8px; }
.card-titles h2 { margin: 0; font-size: 16px; }
.card-lead { margin: 12px 0 8px; font-size: 13.5px; line-height: 1.65; color: #4a4458; }
.card-facts {
  margin: 0 0 14px; padding: 0 0 0 18px;
  font-size: 13px; color: #756d85; line-height: 1.7;
}
.card-actions { display: flex; gap: 8px; }
.map-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.map-link {
  appearance: none; cursor: pointer; text-align: left;
  border: 1px solid rgba(40, 33, 58, 0.1);
  background: #f6f3fb;
  border-radius: 12px;
  padding: 12px 14px;
  color: #28213a;
  transition: border-color .15s, transform .15s;
}
.map-link:hover { border-color: #7543e8; transform: translateY(-1px); }
.map-link-name { display: block; font-weight: 600; font-size: 14px; }
.map-link-desc { display: block; margin-top: 4px; font-size: 12px; color: #756d85; }
.setup-foot {
  display: flex; justify-content: flex-end; gap: 10px; padding-top: 4px;
}
@media (max-width: 640px) {
  .map-grid { grid-template-columns: 1fr; }
  .setup-head { flex-direction: column; align-items: flex-start; }
}
</style>
