<script setup lang="ts">
import { computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import { formatMoney } from '../utils/localeDisplay';

export interface BetScore {
  ht: string | null;
  ft: string | null;
}

export interface BetHistoryItem {
  betNo: string;
  betType: string;
  stake: unknown;
  totalOdds?: unknown;
  potentialReturn: unknown;
  actualReturn: unknown;
  status: string;
  placedAt: string;
  leagueName?: string;
  matchTitle: string;
  pickLabel: string;
  isParlay?: boolean;
  legCount?: number;
  matchScore?: BetScore | null;
  legs?: Array<{
    marketLabel: string;
    selectionName: string;
    matchTitle: string;
    odds: unknown;
    resultStatus?: string | null;
    score?: BetScore | null;
  }>;
}

const props = defineProps<{ bet: BetHistoryItem }>();
const { t, locale } = useI18n();
const router = useRouter();

const statusKey = computed(() => {
  const s = props.bet.status.toUpperCase();
  if (s === 'WON' || s === 'WIN') return 'won';
  if (s === 'LOST' || s === 'LOSE') return 'lost';
  if (s === 'PUSH' || s === 'VOID' || s === 'CANCELLED') return 'push';
  return 'pending';
});

const statusLabel = computed(() => t(`history.status_${statusKey.value}`));

const placedDate = computed(() =>
  new Date(props.bet.placedAt).toLocaleDateString(locale.value, {
    month: 'short', day: 'numeric',
  }),
);

const title = computed(() => {
  if (props.bet.isParlay) {
    const n = props.bet.legCount ?? props.bet.legs?.length ?? 0;
    return t('history.parlay_title', { n });
  }
  return props.bet.matchTitle;
});

const subtitle = computed(() => {
  if (props.bet.isParlay) return props.bet.leagueName || t('history.parlay_league');
  return props.bet.pickLabel || props.bet.leagueName || '';
});

const stakeAmount = computed(() => formatMoney(props.bet.stake, locale.value));

const returnAmount = computed(() => {
  if (statusKey.value === 'won') return formatMoney(props.bet.actualReturn, locale.value);
  if (statusKey.value === 'pending') return formatMoney(props.bet.potentialReturn, locale.value);
  if (statusKey.value === 'lost') return formatMoney(-parseFloat(String(props.bet.stake ?? 0)), locale.value);
  return formatMoney(props.bet.actualReturn ?? props.bet.potentialReturn, locale.value);
});

const returnHighlight = computed(() => statusKey.value === 'won');
const returnPending = computed(() => statusKey.value === 'pending');
const returnLost = computed(() => statusKey.value === 'lost');

function goDetail() {
  router.push(`/bets/${props.bet.betNo}`);
}
</script>

<template>
  <article class="bet-card" @click="goDetail">
    <span
      class="watermark"
      :class="statusKey"
    >{{ statusLabel }}</span>
    <div class="card-left">
      <span class="title">{{ title }}</span>
      <span class="subtitle">{{ subtitle }} · {{ placedDate }}</span>
    </div>
    <div class="card-right">
      <span class="stake-amt">
        {{ t('history.stake') }} {{ stakeAmount }}
      </span>
      <span class="return-amt" :class="{ highlight: returnHighlight, pending: returnPending, lost: returnLost }">
        {{ returnAmount }}
      </span>
    </div>
    <span class="chevron">›</span>
  </article>
</template>

<style scoped>
.bet-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.15s;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}

.bet-card:active {
  background: rgba(255, 255, 255, 0.02);
}

.watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-35deg);
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 0.06em;
  white-space: nowrap;
  pointer-events: none;
  text-transform: uppercase;
  opacity: 0.18;
  max-width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.watermark.won     { color: #3db865; }
.watermark.lost    { color: #e05050; }
.watermark.push    { color: #888; }
.watermark.pending { color: #e8c84a; }

.card-left {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.title {
  font-size: 14px;
  font-weight: 800;
  color: #e8e8e8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.subtitle {
  font-size: 11px;
  color: #666;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-right {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.stake-amt {
  font-size: 11px;
  color: #666;
  font-weight: 600;
}

.return-amt {
  font-size: 15px;
  font-weight: 900;
  color: #888;
}

.return-amt.highlight { color: #3db865; }
.return-amt.pending   { color: #e8c84a; }
.return-amt.lost      { color: #e05050; }

.chevron {
  flex-shrink: 0;
  font-size: 18px;
  color: #333;
  margin-left: 2px;
  line-height: 1;
}
</style>
