<template>
    <view class="crypto-page">
        <!-- 状态栏占位 -->
        <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>

        <!-- 顶部导航 -->
        <view class="navbar">
            <text class="navbar__title">加密行情</text>
            <AiAssistantEntry size="compact" />
        </view>

        <!-- 排序 Tab + 搜索 -->
        <view class="market-tabs">
            <view v-for="(tab, i) in marketTabs" :key="i" class="market-tab" :class="{ active: currentTab === i }"
                @tap="switchTab(i)">
                <text>{{ tab.label }}</text>
            </view>
            <view class="market-tabs__search">
                <u-icon name="search" size="24" color="#999" />
                <input class="market-tabs__input" v-model="searchKey" placeholder="搜索" placeholder-style="color:#ccc"
                    confirm-type="search" />
                <u-icon v-if="searchKey" name="close-circle-fill" size="28" color="#ccc" @click="searchKey = ''" />
            </view>
        </view>

        <!-- 列表头 -->
        <view class="list-header">
            <text class="list-header__col">名称</text>
            <text class="list-header__col">最新价</text>
            <text class="list-header__col">24h涨跌</text>
        </view>

        <!-- 币种列表 -->
        <scroll-view scroll-y class="coin-list" :style="{ height: coinListHeight }">
            <view v-for="coin in displayCoins" :key="coin.symbol" class="coin-row" @tap="goCoinDetail(coin)">
                <!-- 左：Logo + 名称 -->
                <view class="coin-row__left">
                    <view class="coin-row__logo" :style="{ background: coin.color + '18' }">
                        <text class="coin-row__logo-text" :style="{ color: coin.color }">{{ coin.icon }}</text>
                    </view>
                    <view class="coin-row__name">
                        <text class="coin-row__symbol">{{ coin.symbol }}</text>
                        <text class="coin-row__subtitle">{{ coin.name }}</text>
                    </view>
                </view>
                <!-- 中：价格 + 市值 -->
                <view class="coin-row__price">
                    <text class="coin-row__price-val">${{ coin.price }}</text>
                    <text class="coin-row__mcap">市值{{ coin.mcap }}</text>
                </view>
                <!-- 右：涨跌 Badge -->
                <view class="coin-row__badge" :class="coin.change >= 0 ? 'up' : 'down'">
                    <text class="coin-row__badge-arrow">{{ coin.change >= 0 ? '▲' : '▼' }}</text>
                    <text class="coin-row__badge-text">{{ Math.abs(coin.change).toFixed(2) }}%</text>
                </view>
            </view>
        </scroll-view>

    </view>
</template>

<script lang="ts" setup>
import { ref, computed, onUnmounted } from 'vue'
import { onLoad, onShow, onHide } from '@dcloudio/uni-app'
import AiAssistantEntry from '@/components/ai-assistant-entry/ai-assistant-entry.vue'
import { getBinanceTickers, loadCoinConfig, type CoinTicker } from '@/api/crypto'

const statusBarHeight = ref(0)
const windowHeight = ref(667)
const coinListHeight = computed(() => {
    const fixedHeight = statusBarHeight.value + uni.upx2px(232)
    return `${windowHeight.value - fixedHeight}px`
})

const allCoins = ref<CoinTicker[]>([])
const searchKey = ref('')

const marketTabs = ref([
    { label: '热门', key: 'hot' },
    { label: '涨幅榜', key: 'gainers' },
    { label: '跌幅榜', key: 'losers' },
    { label: '成交额', key: 'volume' }
])

const currentTab = ref(0)

const displayCoins = computed(() => {
    let list = [...allCoins.value]
    const kw = searchKey.value.trim().toLowerCase()
    if (kw) {
        list = list.filter(c => c.symbol.toLowerCase().includes(kw) || c.name.toLowerCase().includes(kw))
    }
    if (currentTab.value === 1) return list.sort((a, b) => b.change - a.change)
    if (currentTab.value === 2) return list.sort((a, b) => a.change - b.change)
    if (currentTab.value === 3) return list.sort((a, b) => b.priceRaw - a.priceRaw)
    return list
})

const fetchTickers = async () => {
    console.log('[CryptoList] fetchTickers start')
    try {
        allCoins.value = await getBinanceTickers()
        console.log('[CryptoList] fetchTickers ok count=>', allCoins.value.length)
    } catch (e) {
        console.error('[CryptoList] fetchTickers error=>', e)
        uni.showToast({ title: '行情加载失败', icon: 'none' })
    }
}

const switchTab = (i: number) => { currentTab.value = i }


const goCoinDetail = (coin: any) => {
    uni.navigateTo({ url: `/pages/crypto/crypto_detail?symbol=${coin.symbol}` })
}

let refreshTimer: ReturnType<typeof setInterval> | null = null

const startAutoRefresh = () => {
    stopAutoRefresh()
    refreshTimer = setInterval(fetchTickers, 30000)
}

const stopAutoRefresh = () => {
    if (refreshTimer) {
        clearInterval(refreshTimer)
        refreshTimer = null
    }
}

onLoad(() => {
    uni.getSystemInfo({
        success: (res) => {
            windowHeight.value = res.windowHeight || 667
            // #ifdef APP-PLUS || MP
            statusBarHeight.value = res.statusBarHeight || 44
            // #endif
            // #ifdef H5
            statusBarHeight.value = 0
            // #endif
        }
    })
    loadCoinConfig().then(fetchTickers)
})

onShow(() => {
    startAutoRefresh()
})
onHide(() => { stopAutoRefresh() })
onUnmounted(() => { stopAutoRefresh() })
</script>

<style lang="scss" scoped>
// Design tokens from Figma
$bg: #ffffff;
$text-primary: #000000;
$text-secondary: #999999;
$border: rgba(0, 0, 0, 0.06);
$up: #ff2c58;
$down: #00c482;
$accent: #333333;

.crypto-page {
    background: $bg;
    min-height: 100vh;
    color: $text-primary;
}

.status-bar {
    background: $bg;
}

/* 导航栏 */
.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16rpx;
    padding: 0 32rpx;
    height: 88rpx;
    background: $bg;

    &__title {
        font-size: 36rpx;
        font-weight: 700;
        color: $text-primary;
    }

}

/* 排序Tab */
.market-tabs {
    display: flex;
    padding: 0 32rpx;
    gap: 8rpx;
    height: 72rpx;
    align-items: center;

    &__search {
        margin-left: auto;
        display: flex;
        align-items: center;
        gap: 8rpx;
        background: #f5f5f5;
        border-radius: 28rpx;
        padding: 0 16rpx;
        height: 52rpx;
        flex: 1;
        max-width: 200px;
    }

    &__input {
        font-size: 24rpx;
        width: 0;
        flex: 1;
        height: 52rpx;
        line-height: 52rpx;
        color: $text-primary;
    }
}

.market-tab {
    padding: 10rpx 18rpx;
    font-size: 24rpx;
    white-space: nowrap;
    flex-shrink: 0;
    color: $text-secondary;
    border-radius: 32rpx;
    transition: all 0.2s;

    &.active {
        color: #fff;
        background: $accent;
        font-weight: 600;
    }
}

/* 列表头 — Figma: 402x41, bg=#F5F5F5, text=#666 */
.list-header {
    display: flex;
    align-items: center;
    padding: 0 32rpx;
    height: 72rpx;
    background: #f5f5f5;

    &__col {
        font-size: 22rpx;
        color: #666666;

        &:first-child {
            flex: 1;
            text-align: left;
            padding-left: 60rpx;
        }

        &:nth-child(2) {
            width: 160rpx;
            text-align: right;
            margin-right: 24rpx;
        }

        &:last-child {
            width: 168rpx;
            text-align: center;
        }
    }
}

/* 币种列表 */
.coin-list {
    background: $bg;
}

/* 行情行 — 匹配 Figma: 370x65 → 740x130rpx */
.coin-row {
    display: flex;
    align-items: center;
    padding: 0 32rpx;
    height: 130rpx;
    border-bottom: 1rpx solid $border;

    &__left {
        flex: 1;
        display: flex;
        align-items: center;
        gap: 20rpx;
        min-width: 0;
    }

    &__logo {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    &__logo-text {
        font-size: 28rpx;
        font-weight: 700;
    }

    &__name {
        display: flex;
        flex-direction: column;
        gap: 4rpx;
        min-width: 0;
    }

    &__symbol {
        font-size: 30rpx;
        font-weight: 600;
        color: $text-primary;
    }

    &__subtitle {
        font-size: 24rpx;
        color: $text-secondary;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    &__price {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 4rpx;
        margin-right: 24rpx;
    }

    &__price-val {
        font-size: 30rpx;
        font-weight: 600;
        color: $text-primary;
    }

    &__mcap {
        font-size: 24rpx;
        color: $text-secondary;
    }

    /* 涨跌Badge — Figma: 84x32 radius=12 */
    &__badge {
        width: 168rpx;
        height: 64rpx;
        border-radius: 24rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6rpx;
        flex-shrink: 0;

        &.up {
            background: $up;
        }

        &.down {
            background: $down;
        }
    }

    &__badge-arrow {
        font-size: 18rpx;
        color: #ffffff;
    }

    &__badge-text {
        font-size: 28rpx;
        font-weight: 600;
        color: #ffffff;
    }
}
</style>
