<template>
  <view class="page">
    <view class="nav">
      <view :style="{ height: statusBarHeight + 'px' }" />
      <view class="nav-inner">
        <view class="nav-btn" @click="goBack">
          <text class="nav-ico">‹</text>
        </view>
        <text class="nav-title">景点地图</text>
        <view class="nav-btn">
          <text class="nav-go">◎</text>
        </view>
      </view>
    </view>

    <view :style="{ paddingTop: contentTopPx + 'px' }" class="scroll">
      <view class="map-wrap">
        <image
          class="map-img"
          :src="mapImage"
          mode="widthFix"
        />
        <view class="map-dim" />

        <view v-if="selectedLocation" class="card">
          <image
            class="card-img"
            :src="selectedLocation.thumbnail"
            mode="aspectFill"
          />
          <view class="card-body">
            <text class="card-title">{{ selectedLocation.name }}</text>
            <text class="card-desc">{{ selectedLocation.description }}</text>
            <view class="card-row">
              <text class="card-meta">🖼 {{ selectedLocation.photos }} 张</text>
              <view class="card-btn" @click="goHome">查看</view>
            </view>
          </view>
        </view>
      </view>

      <view class="tip-wrap">
        <view class="tip">
          <text class="tip-txt">点击下方列表选择地点，可在此查看简介</text>
        </view>
      </view>

      <view class="list">
        <view class="list-hd">
          <text class="list-title">热门拍摄地点</text>
          <text class="list-sub">共 {{ photoLocations.length }} 个</text>
        </view>
        <view
          v-for="loc in photoLocations"
          :key="loc.id"
          :class="[
            'list-item',
            selectedLocation?.id === loc.id ? 'list-item-on' : '',
          ]"
          @click="selectedLocation = loc"
        >
          <image class="li-img" :src="loc.thumbnail" mode="aspectFill" />
          <view class="li-body">
            <view class="li-top">
              <text class="li-name">{{ loc.name }}</text>
              <text class="li-num">🖼 {{ loc.photos }}</text>
            </view>
            <text class="li-desc">{{ loc.description }}</text>
            <view class="li-coord-row">
              <text class="li-coord"
                >{{ loc.lat.toFixed(2) }}°N, {{ loc.lng.toFixed(2) }}°E</text
              >
            </view>
          </view>
        </view>
      </view>
    </view>

    <ImageTabBar current="home" />
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import ImageTabBar from "@/components/ImageTabBar.vue";
import { apiEnabled } from "@/config/api";
import { get, isMpSessionExpiredError } from "@/utils/api/http";
import { resolveMediaUrl } from "@/utils/mediaUrl";
import { staticAsset } from "@/utils/staticAsset";

interface PhotoLocation {
  id: number;
  name: string;
  lat: number;
  lng: number;
  photos: number;
  thumbnail: string;
  description: string;
}

const defaultLocations: PhotoLocation[] = [
  {
    id: 1,
    name: "亚丁景区",
    lat: 29.05,
    lng: 100.35,
    photos: 156,
    thumbnail: staticAsset("photo-xiannairi-xuefeng.png"),
    description: "三大神山所在地，壮美雪峰与湖泊",
  },
  {
    id: 2,
    name: "牛奶海",
    lat: 29.04,
    lng: 100.37,
    photos: 89,
    thumbnail: staticAsset("photo-niunaihai.png"),
    description: "碧蓝色高山湖泊，犹如一颗宝石",
  },
  {
    id: 3,
    name: "桑堆草原",
    lat: 29.12,
    lng: 100.25,
    photos: 67,
    thumbnail: staticAsset("photo-sangdui-caoyuan.png"),
    description: "广袤草甸，牦牛成群",
  },
  {
    id: 4,
    name: "白塔公园",
    lat: 29.08,
    lng: 100.3,
    photos: 45,
    thumbnail: staticAsset("chapter1-banner.png"),
    description: "藏族文化聚集地，经幡飘扬",
  },
  {
    id: 5,
    name: "红草地",
    lat: 29.1,
    lng: 100.28,
    photos: 52,
    thumbnail: staticAsset("user-center-header.png"),
    description: "秋季红草如火，金色森林",
  },
];

const statusBarHeight = ref(20);
const mapImage = staticAsset("daocheng-yading-map.png");
const contentTopPx = ref(64);
const selectedLocation = ref<PhotoLocation | null>(null);
const photoLocations = ref<PhotoLocation[]>([...defaultLocations]);

onLoad(() => {
  const info = uni.getSystemInfoSync();
  statusBarHeight.value = info.statusBarHeight || 20;
  contentTopPx.value =
    statusBarHeight.value + uni.upx2px(88) + uni.upx2px(32);
  void loadSpots();
});

async function loadSpots() {
  if (!apiEnabled()) {
    photoLocations.value = [...defaultLocations];
    return;
  }
  try {
    const res = await get<{
      list: Array<{
        id: number;
        name: string;
        lat: number;
        lng: number;
        photos: number;
        thumbnail: string;
        description: string;
      }>;
    }>("/api/v1/map/spots");
    photoLocations.value = res.data.list.map((s) => ({
      id: s.id,
      name: s.name,
      lat: s.lat,
      lng: s.lng,
      photos: s.photos,
      thumbnail: resolveMediaUrl(s.thumbnail),
      description: s.description,
    }));
  } catch (e) {
    if (isMpSessionExpiredError(e)) {
      return;
    }
    photoLocations.value = [...defaultLocations];
  }
}

function goBack() {
  uni.navigateBack({ delta: 1 });
}

function goHome() {
  uni.switchTab({ url: "/pages/home/home" });
}
</script>

<style scoped>
.page {
  min-height: 100vh;
  padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
  background: #f9fafb;
}

.nav {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 50;
  background: #fff;
  border-bottom: 1rpx solid #e5e7eb;
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 88rpx;
}

.nav-btn {
  display: flex;
  width: 72rpx;
  height: 72rpx;
  align-items: center;
  justify-content: center;
}

.nav-ico {
  font-size: 48rpx;
  color: #111827;
}

.nav-title {
  font-size: 30rpx;
  color: #111827;
}

.nav-go {
  font-size: 32rpx;
  color: #4a90e2;
}

.scroll {
  padding-bottom: 48rpx;
}

.map-wrap {
  position: relative;
  background: #fff;
}

.map-img {
  display: block;
  width: 100%;
}

.map-dim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.05);
  pointer-events: none;
}

.card {
  position: absolute;
  right: 32rpx;
  bottom: 32rpx;
  left: 32rpx;
  display: flex;
  padding: 32rpx;
  overflow: hidden;
  border-radius: 24rpx;
  background: #fff;
  box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.18);
  gap: 32rpx;
}

.card-img {
  width: 192rpx;
  height: 192rpx;
  flex-shrink: 0;
  border-radius: 20rpx;
  background: #f3f4f6;
}

.card-body {
  flex: 1;
  min-width: 0;
}

.card-title {
  display: block;
  margin-bottom: 8rpx;
  font-size: 30rpx;
  color: #111827;
}

.card-desc {
  display: -webkit-box;
  overflow: hidden;
  margin-bottom: 16rpx;
  font-size: 22rpx;
  color: #4b5563;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-meta {
  font-size: 22rpx;
  color: #6b7280;
}

.card-btn {
  padding: 8rpx 32rpx;
  font-size: 22rpx;
  color: #fff;
  background: #4a90e2;
  border-radius: 999rpx;
}

.tip-wrap {
  padding: 32rpx;
  text-align: center;
}

.tip {
  display: inline-flex;
  align-items: center;
  padding: 16rpx 32rpx;
  background: #fff;
  border-radius: 999rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
}

.tip-txt {
  font-size: 26rpx;
  color: #4b5563;
}

.list {
  max-width: 750rpx;
  padding: 0 32rpx 48rpx;
  margin: 0 auto;
}

.list-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32rpx;
}

.list-title {
  font-size: 30rpx;
  color: #111827;
}

.list-sub {
  font-size: 22rpx;
  color: #6b7280;
}

.list-item {
  display: flex;
  padding: 32rpx;
  margin-bottom: 24rpx;
  border-radius: 24rpx;
  background: #fff;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
  gap: 32rpx;
}

.list-item-on {
  box-shadow: 0 0 0 4rpx #4a90e2;
}

.li-img {
  width: 160rpx;
  height: 160rpx;
  flex-shrink: 0;
  border-radius: 20rpx;
  background: #f3f4f6;
}

.li-body {
  flex: 1;
  min-width: 0;
}

.li-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 12rpx;
  gap: 16rpx;
}

.li-name {
  font-size: 28rpx;
  color: #111827;
}

.li-num {
  flex-shrink: 0;
  font-size: 22rpx;
  color: #6b7280;
}

.li-desc {
  display: -webkit-box;
  overflow: hidden;
  margin-bottom: 12rpx;
  font-size: 22rpx;
  color: #4b5563;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.li-coord-row {
  display: flex;
  align-items: center;
}

.li-coord {
  font-size: 22rpx;
  color: #6b7280;
}
</style>
