<template>
  <div class="wire">
    <div class="figure" :class="{ pulse: justFlashed }">
      <span class="dollar">$</span><span class="num">{{ formatted }}</span>
    </div>
    <div class="meta" :class="{ visible: done }">
      {{ amounts.length }} transfers &middot; approved on call
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onBeforeUnmount } from 'vue'

const props = withDefaults(defineProps<{
  amounts?: number[]
  intervalMs?: number
  initialDelayMs?: number
  flashMs?: number
}>(), {
  // 15 transfers summing to exactly $25,000,000.
  amounts: () => [
    800_000, 1_200_000, 1_600_000, 2_400_000, 1_800_000,
    3_200_000, 2_700_000, 2_100_000, 1_500_000, 1_300_000,
    900_000, 1_100_000, 1_400_000, 1_700_000, 1_300_000,
  ],
  intervalMs: 430,
  initialDelayMs: 600,
  flashMs: 220,
})

const idx = ref(0)
const total = ref(0)
const justFlashed = ref(false)
const done = computed(() => idx.value >= props.amounts.length)
const formatted = computed(() => total.value.toLocaleString('en-US'))

let timer: ReturnType<typeof setInterval> | null = null
let flashTimer: ReturnType<typeof setTimeout> | null = null
let startTimer: ReturnType<typeof setTimeout> | null = null

function step() {
  if (idx.value >= props.amounts.length) {
    if (timer) { clearInterval(timer); timer = null }
    return
  }
  total.value += props.amounts[idx.value]
  idx.value += 1
  justFlashed.value = true
  if (flashTimer) clearTimeout(flashTimer)
  flashTimer = setTimeout(() => { justFlashed.value = false }, props.flashMs)
}

onMounted(() => {
  startTimer = setTimeout(() => {
    timer = setInterval(step, props.intervalMs)
  }, props.initialDelayMs)
})

onBeforeUnmount(() => {
  if (timer) clearInterval(timer)
  if (flashTimer) clearTimeout(flashTimer)
  if (startTimer) clearTimeout(startTimer)
})
</script>

<style scoped>
.wire {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.figure {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.1rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  transition: transform 0.18s ease;
  transform-origin: center;
}
.figure.pulse { transform: scale(1.014); }
.figure.pulse .num {
  text-shadow:
    0 0 38px rgba(255, 255, 255, 0.35),
    0 0 8px rgba(255, 255, 255, 0.55);
}
.dollar {
  font-size: 2.5rem;
  opacity: 0.7;
}
.num {
  font-size: 4.5rem;
  letter-spacing: -0.02em;
  text-shadow: 0 0 28px rgba(255, 255, 255, 0.1);
  transition: text-shadow 0.45s ease;
  min-width: 11ch;
  text-align: right;
}
.meta {
  margin-top: 1rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0);
  transition: color 0.7s ease 0.25s;
}
.meta.visible { color: rgba(255, 255, 255, 0.55); }
</style>
