<script setup lang="ts">
import { onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { storeToRefs } from 'pinia'
import { useI18n } from 'vue-i18n'
import { useDepositStore } from '@/stores/deposit'
import { rechargeStatusTranslate } from '@/utils/rechargeI18n'
import { useToast } from '@/composables/useToast'

const { t } = useI18n()
const router = useRouter()
const store = useDepositStore()
const { records, recordLoading, recordHasMore } = storeToRefs(store)
const toast = useToast()

function goBack() {
  router.back()
}

function statusText(status: number) {
  return rechargeStatusTranslate(t, status)
}

onMounted(() =>
  store.loadRecords(true).catch((e: Error) => toast.error(e?.message ?? t('common.loadFailed'))),
)

function truncate(str: string, head = 8, tail = 6) {
  if (!str || str.length <= head + tail + 3) {
    return str
  }
  return `${str.slice(0, head)}...${str.slice(-tail)}`
}
</script>

<template>
  <main class="page-main">
    <div class="page-container content">
      <div class="page-header">
        <button type="button" class="back-link" @click="goBack">{{ t('deposit.backWithArrow') }}</button>
        <h1 class="page-title">{{ t('deposit.histLink') }}</h1>
      </div>

      <div v-if="recordLoading && !records.length" class="loading-state">
        <div class="spinner" />
      </div>

      <template v-else>
        <div v-if="!records.length" class="empty dark-card">
          <p>{{ t('deposit.histEmpty') }}</p>
        </div>

        <div v-else class="list dark-card">
          <div v-for="r in records" :key="r.orderNo || r.id" class="record-row">
            <div class="rec-left">
              <p class="rec-coin">{{ r.coinName }} · {{ r.networkName }}</p>
              <p class="rec-order">{{ t('deposit.histOrderNo') }} {{ truncate(r.orderNo, 6, 4) }}</p>
              <p class="rec-time">{{ r.createTime }}</p>
              <p v-if="r.txHash" class="rec-hash" :title="r.txHash">{{ t('deposit.histTx') }} {{ truncate(r.txHash) }}</p>
              <p class="rec-status" :class="'st-' + r.status">{{ statusText(r.status) }}</p>
            </div>
            <div class="rec-right">
              <p class="rec-amount">+{{ r.amount }}</p>
            </div>
          </div>
        </div>

        <div class="load-more-wrap">
          <button
            v-if="recordHasMore"
            class="load-more-btn"
            type="button"
            :disabled="recordLoading"
            @click="store.loadRecords().catch((e: Error) => toast.error(e?.message ?? t('common.loadFailed')))"
          >{{ recordLoading ? t('common.loading') : t('deposit.histLoadMore') }}</button>
          <p v-else-if="records.length" class="no-more">{{ t('deposit.histLoadedAll') }}</p>
        </div>
      </template>
    </div>
  </main>
</template>

<style scoped>
.content { padding-top: var(--space-8); padding-bottom: var(--space-16); max-width: 700px; }
.page-header { margin-bottom: var(--space-8); }
.back-link {
  font-family: inherit;
  font-size: var(--text-small);
  color: var(--color-text-secondary);
  display: inline-block;
  margin-bottom: var(--space-3);
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}
.back-link:hover { color: var(--color-primary); }
.page-title { font-size: var(--text-h1); font-weight: var(--fw-bold); color: var(--color-text-primary); }
.loading-state { display: flex; justify-content: center; padding: var(--space-16); }
.spinner { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--color-border); border-top-color: var(--color-primary); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.empty { padding: var(--space-12); text-align: center; color: var(--color-text-muted); }
.list { overflow: hidden; }
.record-row { display: flex; justify-content: space-between; align-items: flex-start; padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--color-border); }
.record-row:last-child { border-bottom: none; }
.rec-coin { font-size: var(--text-small); font-weight: var(--fw-semibold); color: var(--color-text-primary); margin-bottom: 2px; }
.rec-order { font-size: var(--text-caption); color: var(--color-text-muted); margin-bottom: 2px; font-family: var(--font-family-num); }
.rec-time { font-size: var(--text-caption); color: var(--color-text-muted); }
.rec-hash { font-size: var(--text-caption); color: var(--color-text-muted); font-family: var(--font-family-num); margin-top: 2px; }
.rec-status { font-size: var(--text-caption); margin-top: var(--space-2); }
.rec-status.st-0 { color: var(--color-primary); }
.rec-status.st-1 { color: var(--color-primary); }
.rec-status.st-2 { color: var(--color-up); }
.rec-status.st-3, .rec-status.st-4 { color: var(--color-text-muted); }
.rec-right { text-align: right; }
.rec-amount { font-size: var(--text-body); font-weight: var(--fw-semibold); color: var(--color-up); font-family: var(--font-family-num); }
.load-more-wrap { text-align: center; margin-top: var(--space-5); }
.load-more-btn { background: transparent; border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-text-secondary); padding: var(--space-3) var(--space-8); cursor: pointer; }
.load-more-btn:hover:not(:disabled) { border-color: var(--color-primary); color: var(--color-primary); }
.load-more-btn:disabled { opacity: .5; cursor: not-allowed; }
.no-more { font-size: var(--text-caption); color: var(--color-text-muted); }
</style>
