<script setup lang="ts">
import GpsMapPanel from '@/components/GpsMapPanel.vue'
import { useMonitoringData } from '@/composables/useMonitoringData'

const { gps, errorMessage, headerStatus } = useMonitoringData({
  refreshIntervalMs: 500,
})
</script>

<template>
  <div class="page-shell">
    <header class="page-header">
      <div>
        <p class="eyebrow">Map</p>
        <h1>地图定位页面</h1>
      </div>
      <p class="description">
        这里整合了 `GeoStream` 的 GPS 展示逻辑。只要原来的 GPS 模块继续写
        `gps_latest.json`，这个页面就能直接显示实时定位。
      </p>
    </header>

    <section class="banner" :class="{ error: !!errorMessage }">
      {{ headerStatus }}
    </section>

    <GpsMapPanel :gps="gps" />
  </div>
</template>

<style scoped>
.page-shell {
  display: grid;
  gap: 22px;
}

.page-header {
  display: grid;
  gap: 10px;
}

.eyebrow {
  margin: 0;
  color: #f5a524;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 12px;
  font-weight: 700;
}

h1 {
  margin: 0;
  font-size: clamp(28px, 4vw, 48px);
}

.description,
.banner {
  margin: 0;
  color: #d5dbee;
  line-height: 1.75;
}

.banner {
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(11, 19, 35, 0.84);
  border: 1px solid rgba(133, 147, 169, 0.2);
}

.banner.error {
  color: #ffd0d0;
  border-color: rgba(255, 107, 107, 0.28);
}
</style>
