<template>
  <div class="map-page">
    <!-- 地图初始化加载/错误状态 -->
    <div v-if="loading" class="map-status">⏳ 地图加载中...</div>
    <div v-else-if="error" class="map-status map-error">❌ {{ error }}</div>

    <!-- 定位进行中提示 -->
    <div v-if="locating" class="map-status map-locating">
      {{ locatingSource === 'amap' ? '📡 基站/IP 定位中...' : '🛰️ GPS 定位中...' }}
    </div>

    <!-- 地图容器 -->
    <div
      ref="containerRef"
      class="map-container"
      :class="{ 'map-hidden': loading || error }"
    />

    <!-- 底部操作栏 -->
    <div class="map-controls">
      <span class="map-title">
        🗺️ 高德地图
        <span v-if="locatingSourceLabel" class="locate-badge">{{ locatingSourceLabel }}</span>
      </span>
      <div class="map-actions">
        <button @click="resetView" :disabled="!mapInstance || locating">📍 回到默认位置</button>
        <button
          @click="locate"
          :disabled="!mapInstance || locating"
          class="btn-locate"
        >
          <span v-if="locating" class="spinner" />
          {{ locating ? '定位中...' : '🎯 我的位置' }}
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, nextTick } from 'vue'
import { useAmap, loadAMap } from '@/composables/useAmap'

const { containerRef, mapInstance, loading, error, initMap } = useAmap({
  center: [116.397428, 39.90923], // 北京天安门
  zoom: 12,
  pitch: 30,
})

void containerRef

// ─────────────────────────────────────────
// 定位状态
// ─────────────────────────────────────────
const locating = ref(false)
const locatingSource = ref<'gps' | 'amap' | ''>('')
const locatingSourceLabel = ref('')

// ─────────────────────────────────────────
// 地图初始化
// ─────────────────────────────────────────
async function bootstrapMap() {
  const map = await initMap()
  if (map) {
    nextTick(() => map.resize())
  }
}
onMounted(() => bootstrapMap())

// ─────────────────────────────────────────
// 📍 回到默认视图
// ─────────────────────────────────────────
function resetView(): void {
  locatingSourceLabel.value = ''
  const map = mapInstance.value
  if (!map) return
  map.setCenter([116.397428, 39.90923])
  map.setZoom(12)
}

// ─────────────────────────────────────────
// 🎯 我的位置 — 双通道定位
// ─────────────────────────────────────────
async function locate(): Promise<void> {
  if (locating.value || !mapInstance.value) return

  locating.value = true

  // ── 通道 1：浏览器原生 GPS（高精度，需 HTTPS / localhost）──
  const gpsResult = await tryBrowserGPS()
  if (gpsResult) {
    applyLocation(gpsResult.lng, gpsResult.lat, 16, '🛰️ GPS')
    locating.value = false
    return
  }

  // ── 通道 2：高德 IP / 基站定位（低精度，但无需用户授权）──
  const amapResult = await tryAmapGeolocation()
  if (amapResult) {
    applyLocation(amapResult.lng, amapResult.lat, 14, '📡 IP定位')
    locating.value = false
    return
  }

  // ── 通道 3：完全失败 ──
  locating.value = false
  alert('无法获取您的位置，请检查浏览器定位权限或网络连接')
}

// ─────────────────────────────────────────
// 通道 1：浏览器原生 Geolocation API
// ─────────────────────────────────────────
function tryBrowserGPS(): Promise<{ lng: number; lat: number } | null> {
  return new Promise((resolve) => {
    if (!navigator.geolocation) {
      console.log('[定位] 浏览器不支持 Geolocation API，降级到高德定位')
      resolve(null)
      return
    }

    locatingSource.value = 'gps'
    console.log('[定位] 🛰️ 尝试浏览器 GPS 定位...')

    navigator.geolocation.getCurrentPosition(
      (pos) => {
        const { longitude: lng, latitude: lat, accuracy } = pos.coords
        console.log(`[定位] ✅ GPS 成功 — 经度:${lng} 纬度:${lat} 精度:${accuracy}米`)
        resolve({ lng, lat })
      },
      (err) => {
        // GeolocationPositionError.code:
        //   1 = PERMISSION_DENIED（用户拒绝）
        //   2 = POSITION_UNAVAILABLE（信号不可用）
        //   3 = TIMEOUT（超时）
        const reason = ['', '用户拒绝授权', '信号不可用', '定位超时'][err.code] || err.message
        console.log(`[定位] ❌ GPS 失败 (${reason})，降级到高德定位`)
        resolve(null)
      },
      {
        timeout: 8000,             // 8 秒超时
        enableHighAccuracy: true,  // 强制启用 GPS 芯片
        maximumAge: 60000,         // 允许 60 秒内的缓存（避免每次冷启动 GPS）
      }
    )
  })
}

// ─────────────────────────────────────────
// 通道 2：高德 IP / 基站定位
// ─────────────────────────────────────────
async function tryAmapGeolocation(): Promise<{ lng: number; lat: number } | null> {
  try {
    const AMap = await loadAMap()
    locatingSource.value = 'amap'
    console.log('[定位] 📡 尝试高德 IP 定位...')

    return new Promise((resolve) => {
      const geolocation = new AMap.Geolocation({
        enableHighAccuracy: true,  // 混合定位（优先 GPS → Wi-Fi → 基站 → IP）
        timeout: 6000,
        panToLocation: false,      // 我们自己控制地图移动
      })

      geolocation.getCurrentPosition((status, result) => {
        if (status === 'complete' && result.position) {
          const { lng, lat } = result.position
          console.log(
            `[定位] ✅ 高德定位成功 — 经度:${lng} 纬度:${lat}`
            + ` 地址:${result.formattedAddress} 精度:${result.accuracy}米`
          )
          resolve({ lng, lat })
        } else {
          console.log(`[定位] ❌ 高德定位失败: ${result.message}`)
          resolve(null)
        }
      })
    })
  } catch (err: any) {
    console.log(`[定位] ❌ 高德定位插件加载失败: ${err.message}`)
    return null
  }
}

// ─────────────────────────────────────────
// 将定位结果应用到地图
// ─────────────────────────────────────────
function applyLocation(lng: number, lat: number, zoom: number, label: string): void {
  const map = mapInstance.value
  if (!map) return
  map.setZoomAndCenter(zoom, [lng, lat])
  locatingSourceLabel.value = label

  // 3 秒后自动隐藏标签
  setTimeout(() => {
    if (locatingSourceLabel.value === label) {
      locatingSourceLabel.value = ''
    }
  }, 3000)
}
</script>

<style scoped>
/* ============================================================
   地图页面布局：header(48px) | map(剩余) | controls(52px)
   ============================================================ */

.map-page {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

/* ---- 状态提示（加载/错误/定位中）---- */
.map-status {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  padding: 14px 24px;
  text-align: center;
  font-size: 14px;
  color: #666;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  pointer-events: none;
}

.map-error {
  color: #e74c3c;
  background: #fef2f2;
  border: 1px solid #fecaca;
}

.map-locating {
  color: #2d6cdf;
  background: rgba(232, 240, 255, 0.95);
  border: 1px solid #93c5fd;
}

/* ---- 地图容器 ---- */
.map-container {
  flex: 1;
  width: 100%;
  min-height: 0;
}

.map-hidden {
  visibility: hidden;
}

/* ---- 底部操作栏 ---- */
.map-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 52px;
  padding: 0 20px;
  background: #fff;
  border-top: 1px solid #e8e8e8;
  box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.04);
  flex-shrink: 0;
  z-index: 5;
}

.map-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  color: #333;
}

/* 定位来源标签 */
.locate-badge {
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 10px;
  background: #e8f5e9;
  color: #2e7d32;
}

.map-actions {
  display: flex;
  gap: 10px;
}

.map-actions button {
  padding: 7px 18px;
  border: 1px solid #42b883;
  border-radius: 6px;
  background: #fff;
  color: #42b883;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 6px;
}

.map-actions button:hover:not(:disabled) {
  background: #42b883;
  color: #fff;
}

.map-actions button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* 定位按钮 loading 动画 */
.spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid transparent;
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}
</style>
