<script setup lang="ts">
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { futuresPairToRouteParam, normalizeFuturesPairSymbol } from '@/utils/futuresSymbol'
import type { MarketItem } from '@/types'

const props = defineProps<{ item: MarketItem }>()
const { t } = useI18n()

const router = useRouter()

function goDetail() {
  if (props.item.type === 'spot') {
    const sym = props.item.symbol.replace('/', '-')
    router.push({ name: 'spot', params: { symbol: sym } })
  } else {
    router.push({ name: 'futures', params: { symbol: futuresPairToRouteParam(props.item.symbol) } })
  }
}

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

function formatVolume(n: number) {
  if (n >= 1_000_000) return (n / 1_000_000).toFixed(2) + 'M'
  if (n >= 1_000)     return (n / 1_000).toFixed(2) + 'K'
  return String(n)
}
</script>

<template>
  <tr class="market-row" @click="goDetail">
    <!-- 名称 -->
    <td class="td-name">
      <div class="coin-info">
        <div class="coin-icon">
          <img
            v-if="item.icon"
            :src="item.icon"
            :alt="item.name"
            referrerpolicy="no-referrer"
          />
          <span v-else class="coin-icon-fallback">{{ item.name[0] }}</span>
        </div>
          <div>
            <span class="coin-symbol">{{ item.type === 'futures' ? normalizeFuturesPairSymbol(item.symbol) : item.symbol }}</span>
            <span v-if="item.type === 'futures'" class="coin-tag">{{ t('market.perpetual') }}</span>
            <span v-else-if="item.type === 'spot'" class="coin-tag coin-tag--spot">{{ t('nav.spot') }}</span>
          </div>
      </div>
    </td>

    <!-- 价格 -->
    <td class="td-num">{{ formatNum(item.price) }}</td>

    <!-- 24h 涨跌 -->
    <td class="td-num" :class="item.change24h >= 0 ? 'text-up' : 'text-down'">
      {{ item.change24h >= 0 ? '+' : '' }}{{ item.change24h.toFixed(2) }}%
    </td>

    <!-- 24h 最高 -->
    <td class="td-num">{{ formatNum(item.high24h) }}</td>

    <!-- 24h 最低 -->
    <td class="td-num">{{ formatNum(item.low24h) }}</td>

    <!-- 24h 成交量 -->
    <td class="td-num">{{ formatVolume(item.volume24h) }}</td>
  </tr>
</template>

<style scoped>
.market-row {
  cursor: pointer;
  border-bottom: 1px solid var(--color-border);
  transition: background var(--transition);
}
.market-row:hover { background: var(--color-bg-card-hover); }

.market-row td {
  padding: 18px var(--space-4);
  font-size: var(--text-small);
  color: var(--color-text-primary);
  vertical-align: middle;
}

.td-name { min-width: 160px; }
.td-num  { text-align: right; font-family: var(--font-family-num); font-variant-numeric: tabular-nums; }
.td-num.text-up   { color: var(--color-up); }
.td-num.text-down { color: var(--color-down); }

/* 币种信息 */
.coin-info { display: flex; align-items: center; gap: var(--space-3); }

.coin-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-bg-card);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.coin-icon img { width: 100%; height: 100%; object-fit: cover; }
.coin-icon-fallback {
  font-size: var(--text-caption);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
}

.coin-symbol { font-weight: var(--fw-medium); }
.coin-tag {
  margin-left: var(--space-2);
  font-size: var(--text-caption);
  color: var(--color-text-muted);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 1px 4px;
}
.coin-tag--spot {
  color: #4cb8ff;
  border-color: rgba(76, 184, 255, 0.3);
  background: rgba(76, 184, 255, 0.08);
}
</style>
