<script setup lang="ts">
import { onMounted, onUnmounted } from 'vue'
import { storeToRefs } from 'pinia'
import { useMarketStore } from '@/stores/market'
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { futuresPairToRouteParam, normalizeFuturesPairSymbol } from '@/utils/futuresSymbol'
import MarketTable from '@/components/market/MarketTable.vue'

const { t } = useI18n()
const store = useMarketStore()
const { hotList, topVolumeList } = storeToRefs(store)
const router = useRouter()

onMounted(() => store.fetchList())
onUnmounted(() => store.stopAllWs())

function goFuturesTrading(symbol: string) {
  router.push({ name: 'futures', params: { symbol: futuresPairToRouteParam(symbol) } })
}

function formatPrice(n: number) {
  return '$' + n.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
}

function formatChange(n: number) {
  return (n >= 0 ? '+' : '') + n.toFixed(2) + '%'
}
</script>

<template>
  <main class="page-main">
    <!-- Banner -->
    <section class="banner">
      <div class="page-container">
        <h1 class="banner-title">{{ t('market.title') }}</h1>
        <p class="banner-desc">{{ t('market.desc') }}</p>
      </div>
    </section>

    <!-- 快速看板 -->
    <section class="section-board">
      <div class="page-container board-grid">
        <!-- 热门 -->
        <div class="board-card dark-card">
          <h3 class="board-title">{{ t('market.hot') }}</h3>
          <div
            v-for="item in hotList"
            :key="`hot-${item.symbol}`"
            class="board-row"
            @click="goFuturesTrading(item.symbol)"
          >
            <div class="board-coin">
              <div class="board-icon">
                <img v-if="item.icon" :src="item.icon" :alt="item.name" />
                <span v-else>{{ item.name[0] }}</span>
              </div>
              <span class="board-symbol">{{ normalizeFuturesPairSymbol(item.symbol) }} <span class="tag-futures">{{ t('market.perpetual') }}</span></span>
            </div>
            <span class="board-price">{{ formatPrice(item.price) }}</span>
            <span class="board-change" :class="item.change24h >= 0 ? 'text-up' : 'text-down'">
              {{ formatChange(item.change24h) }}
            </span>
          </div>
        </div>

        <!-- 成交榜 -->
        <div class="board-card dark-card">
          <h3 class="board-title">{{ t('market.topVolume') }}</h3>
          <div
            v-for="item in topVolumeList"
            :key="`vol-${item.symbol}`"
            class="board-row"
            @click="goFuturesTrading(item.symbol)"
          >
            <div class="board-coin">
              <div class="board-icon">
                <img v-if="item.icon" :src="item.icon" :alt="item.name" />
                <span v-else>{{ item.name[0] }}</span>
              </div>
              <span class="board-symbol">{{ normalizeFuturesPairSymbol(item.symbol) }} <span class="tag-futures">{{ t('market.perpetual') }}</span></span>
            </div>
            <span class="board-price">{{ formatPrice(item.price) }}</span>
            <span class="board-change" :class="item.change24h >= 0 ? 'text-up' : 'text-down'">
              {{ formatChange(item.change24h) }}
            </span>
          </div>
        </div>
      </div>
    </section>

    <!-- 行情表格 -->
    <section class="section-table">
      <div class="page-container">
        <MarketTable />
      </div>
    </section>
  </main>
</template>

<style scoped>
/* Banner */
.banner {
  padding: var(--space-12) 0 var(--space-8);
}
.banner-title {
  font-size: var(--text-h1);
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-3);
}
.banner-desc {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  white-space: nowrap;
  max-width: none;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}

/* 快速看板 */
.section-board {
  padding-bottom: var(--space-8);
}
.board-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}

.board-card {
  padding: var(--space-5) var(--space-6);
}

.board-title {
  font-size: var(--text-body);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
}

.board-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  cursor: pointer;
  border-bottom: 1px solid var(--color-border);
  transition: opacity var(--transition);
}
.board-row:last-child { border-bottom: none; }
.board-row:hover { opacity: 0.8; }

.board-coin { display: flex; align-items: center; gap: var(--space-2); flex: 1; min-width: 0; }
.board-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-bg-card);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-caption);
  font-weight: var(--fw-bold);
  color: #000;
  flex-shrink: 0;
  overflow: hidden;
}
.board-icon img { width: 100%; height: 100%; object-fit: cover; }
.board-icon span {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-primary);
  color: #000;
  font-size: var(--text-caption);
  font-weight: var(--fw-bold);
}
.board-symbol {
  font-size: var(--text-small);
  color: var(--color-text-primary);
  white-space: nowrap;
}
.tag-futures {
  margin-left: 4px;
  font-size: 10px;
  color: var(--color-text-muted);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 3px;
  padding: 0 3px;
}

.board-price {
  font-size: var(--text-small);
  color: var(--color-text-primary);
  font-family: var(--font-family-num);
  margin-left: auto;
  margin-right: var(--space-4);
}
.board-change {
  font-size: var(--text-small);
  font-family: var(--font-family-num);
  min-width: 72px;
  text-align: right;
}

/* 行情表格 */
.section-table {
  padding-bottom: var(--space-16);
}

/* ── 移动端 ── */
@media (max-width: 768px) {
  .board-grid { grid-template-columns: 1fr; }
}
</style>
