<script lang='ts' setup>
import type { RefresherCustomEvent } from "@ionic/vue";
import { client, safeClient } from "@/api";

const { t } = useI18n();
const { vibrate } = useHaptics();

const { data, execute } = safeClient(client.api.earnings.pending.get());

async function handleRefresh(event: RefresherCustomEvent) {
  vibrate();
  await execute().finally(() => {
    event.target.complete();
  });
}

function getStatusColor(status?: string) {
  return status === "pending" ? "warning" : "medium";
}

function getStatusText(status?: string) {
  return status === "pending" ? t("revenue.pending.statusPending") : t("revenue.pending.statusProcessing");
}
</script>

<template>
  <ion-page>
    <ion-header class="ion-no-border">
      <ion-toolbar class="ion-toolbar">
        <ui-back-button slot="start" />
        <ion-title>{{ t("asset.revenue.pendingRevenue") }}</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content :fullscreen="true" class="ion-padding">
      <ion-refresher slot="fixed" @ion-refresh="handleRefresh($event)">
        <ion-refresher-content />
      </ion-refresher>

      <div class="container">
        <!-- 待确认总金额卡片 -->
        <div class="bg-text-900 rounded-xl p-6 mb-4">
          <div class="text-sm text-text-400 mb-2">
            {{ t("revenue.pending.totalPending") }}
          </div>
          <div class="flex items-end gap-2">
            <div class="text-3xl font-bold">
              {{ formatAmountWithSplit(data?.total) }}
            </div>
            <div class="text-sm text-text-400 mb-1">
              USDT
            </div>
          </div>
          <div class="flex items-center gap-2 mt-3 text-xs text-text-400">
            <i-ic-baseline-info class="text-base" />
            <span>{{ t("revenue.pending.accountTip") }}</span>
          </div>
        </div>

        <!-- 待确认收益列表 -->
        <div class="mb-3">
          <div class="text-base font-medium mb-3">
            {{ t("revenue.pending.detailTitle") }}
          </div>
        </div>

        <ui-empty v-if="data?.data.length === 0" />
        <template v-else>
          <ion-list>
            <ion-item v-for="item, index in data?.data" :key="index" lines="full">
              <div class="w-full py-4">
                <div class="flex justify-between items-start mb-3">
                  <div class="flex flex-col gap-1.5">
                    <div class="flex items-center gap-2">
                      <div class="text-sm font-medium">
                        {{ item.type }}
                      </div>
                      <ion-badge
                        :color="getStatusColor(item.status)"
                        class="text-xs px-2 py-0.5"
                      >
                        {{ getStatusText(item.status) }}
                      </ion-badge>
                    </div>
                    <div class="text-base font-semibold">
                      {{ item.assetName }}
                    </div>
                    <div class="text-xs text-text-400">
                      {{ item.assetCode }}
                    </div>
                  </div>
                  <div class="text-right">
                    <div class="text-lg font-bold">
                      +{{ formatAmountWithSplit(item.amount) }}
                    </div>
                  </div>
                </div>
                <div class="flex items-center gap-1.5 text-xs text-text-400">
                  <i-ic-outline-access-time class="text-sm" />
                  <span>{{ t("revenue.pending.expectedDate") }}{{ useDateFormat(item.expectedAt, 'YY/MM/DD') }}</span>
                </div>
              </div>
            </ion-item>
          </ion-list>
        </template>

        <!-- 说明信息 -->
        <div class="mt-6 p-4 bg-text-950 rounded-xl">
          <div class="flex items-start gap-2">
            <!-- <i-ic-baseline-lightbulb-outline class="text-yellow-500 text-lg mt-0.5 flex-shrink-0" /> -->
            <div class="text-xs text-text-400 leading-relaxed">
              <div class="font-medium mb-2">
                {{ t("revenue.pending.noteTitle") }}
              </div>
              <div class="space-y-1">
                <div>{{ t("revenue.pending.dividendNote") }}</div>
                <div>{{ t("revenue.pending.appreciationNote") }}</div>
                <div>{{ t("revenue.pending.tradeNote") }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </ion-content>
  </ion-page>
</template>

<style lang='css' scoped>
.container {
  --title-font-size: 16px;
}

ion-list {
  background: transparent;
}
</style>
