<script lang='ts' setup>
import type { ChartingLibraryWidgetOptions } from "#/charting_library";
import type { TradableData } from "@/api/types";
import type { TradingViewInst } from "@/tradingview";
import { client, safeClient } from "@/api";
import { TradingViewChart } from "@/tradingview";
import OrderBook from "./order-book.vue";

const props = defineProps<{
  data: TradableData | null;
}>();

const { t } = useI18n();

const tradingviewOptions: Partial<ChartingLibraryWidgetOptions> = {
  disabled_features: [
    "create_volume_indicator_by_default",
  ],
};

const tradingViewInst = useTemplateRef<TradingViewInst>("tradingViewInst");
const symbol = computed(() => props.data?.asset?.tradingPairsAsBase?.[0]?.symbol || "");
const { data } = await safeClient(client.api.trading_pairs.orderbook.get({ query: { symbol: symbol.value, depth: 30 } }));
const { data: tickerData } = await safeClient(client.api.market_data.pairs.ticker.get({ query: { symbol: symbol.value } }));

// 格式化价格显示
function formatPrice(value: string | undefined) {
  if (!value)
    return "--";
  return Number(value).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 6 });
}

// 格式化百分比
function formatPercent(value: string | undefined) {
  if (value === undefined || value === null)
    return "--";
  const sign = Number(value) > 0 ? "+" : "";
  return `${sign}${Number(value).toFixed(2)}%`;
}

// 格式化交易量
function formatVolume(value: string | undefined) {
  if (!value)
    return "--";
  if (Number(value) >= 1e9)
    return `${(Number(value) / 1e9).toFixed(2)}B`;
  if (Number(value) >= 1e6)
    return `${(Number(value) / 1e6).toFixed(2)}M`;
  if (Number(value) >= 1e3)
    return `${(Number(value) / 1e3).toFixed(2)}K`;
  return Number(value).toFixed(2);
}

// 判断涨跌颜色类
const priceChangeClass = computed(() => {
  const change = Number(tickerData.value?.change) || 0;
  if (change > 0)
    return "text-[var(--ion-color-success)]";
  if (change < 0)
    return "text-[var(--ion-color-danger)]";
  return "text-text-500";
});
</script>

<template>
  <!-- 24小时价格信息 -->
  <div>
    <div class="flex items-baseline justify-between mb-3">
      <!-- 当前价格 -->
      <div class="flex items-baseline gap-2">
        <div class="text-2xl font-semibold" :class="priceChangeClass">
          {{ formatPrice(tickerData?.close) }}
        </div>
        <div class="text-sm" :class="priceChangeClass">
          {{ formatPercent(tickerData?.changePercent) }}
        </div>
      </div>
    </div>

    <!-- 24h 数据 -->
    <div class="grid grid-cols-3 gap-3 text-sm">
      <div>
        <div class="text-text-500 text-xs mb-1">
          {{ t("tradeTokenized.market.high24h") }}
        </div>
        <div class="font-medium">
          {{ formatPrice(tickerData?.high) }}
        </div>
      </div>
      <div>
        <div class="text-text-500 text-xs mb-1">
          {{ t("tradeTokenized.market.low24h") }}
        </div>
        <div class="font-medium">
          {{ formatPrice(tickerData?.low) }}
        </div>
      </div>
      <div>
        <div class="text-text-500 text-xs mb-1">
          {{ t("tradeTokenized.market.volume24h") }}
        </div>
        <div class="font-medium">
          {{ formatVolume(tickerData?.baseVolume) }}
        </div>
      </div>
    </div>
  </div>

  <TradingViewChart v-if="symbol" ref="tradingViewInst" class="my-5" height="300px" :symbol="symbol" :options="tradingviewOptions" />

  <ui-tabs size="small" class="my-3">
    <ui-tab-pane name="order_book" :title="t('tradeTokenized.market.orderBookTab')">
      <OrderBook :symbol="symbol" />
    </ui-tab-pane>
  </ui-tabs>
</template>

<style lang='css' scoped></style>
