<script setup lang="ts">
import { useI18n } from 'vue-i18n';
import DesktopDetailModalShell from './DesktopDetailModalShell.vue';
import { formatMoney, formatMoneyCompact } from '../../utils/localeDisplay';
import type { CashbackRecord } from '../../utils/cashback';

const props = defineProps<{
  visible: boolean;
  record: CashbackRecord | null;
}>();

const emit = defineEmits<{
  'update:visible': [value: boolean];
}>();

const { t, locale } = useI18n();

function formatPeriod(start: string, end: string) {
  const opts: Intl.DateTimeFormatOptions = { month: '2-digit', day: '2-digit' };
  const s = new Date(start).toLocaleDateString(locale.value, opts);
  const e = new Date(end).toLocaleDateString(locale.value, opts);
  return `${s} – ${e}`;
}

function formatRate(rate: string) {
  const n = parseFloat(rate);
  if (!Number.isFinite(n)) return rate;
  return `${(n * 100).toFixed(2)}%`;
}

function formatTime(value: string | null) {
  if (!value) return '—';
  return new Date(value).toLocaleString(locale.value, {
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    hour12: false,
  });
}
</script>

<template>
  <DesktopDetailModalShell
    :visible="visible"
    :title="t('cashback.title')"
    @update:visible="emit('update:visible', $event)"
  >
    <template v-if="record">
      <div class="hero">
        <div class="amount-hero">{{ formatMoney(record.amount, locale) }}</div>
        <div class="batch-no">{{ record.batchNo }}</div>
      </div>

      <div class="detail-rows">
        <div class="detail-row">
          <span class="row-label">{{ t('cashback.period') }}</span>
          <span class="row-val">{{ formatPeriod(record.periodStart, record.periodEnd) }}</span>
        </div>
        <div class="detail-row">
          <span class="row-label">{{ t('cashback.effective_stake') }}</span>
          <span class="row-val">{{ formatMoneyCompact(record.effectiveStake, locale) }}</span>
        </div>
        <div class="detail-row">
          <span class="row-label">{{ t('cashback.rate') }}</span>
          <span class="row-val">{{ formatRate(record.rate) }}</span>
        </div>
        <div class="detail-row">
          <span class="row-label">{{ t('wallet.time') }}</span>
          <span class="row-val muted">{{ formatTime(record.confirmedAt ?? record.createdAt) }}</span>
        </div>
      </div>
    </template>

    <div v-else class="state">{{ t('common.not_found') }}</div>
  </DesktopDetailModalShell>
</template>

<style scoped>
.state {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 20px;
  color: var(--text-muted);
  font-size: 13px;
}

.hero {
  padding: 20px 20px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: #162d36;
}

.amount-hero {
  font-size: 30px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  font-family: 'SF Mono', 'Consolas', monospace;
  color: var(--primary-light);
  line-height: 1.1;
}

.batch-no {
  margin-top: 6px;
  font-family: 'SF Mono', 'Consolas', monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
}

.detail-rows {
  padding: 4px 0 12px;
  background: #1a323c;
}

.detail-row {
  display: flex;
  gap: 16px;
  padding: 11px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.detail-row:last-child {
  border-bottom: none;
}

.row-label {
  width: 108px;
  flex-shrink: 0;
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
}

.row-val {
  flex: 1;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.row-val.muted {
  color: var(--text-muted);
  font-weight: 600;
}
</style>
