<script lang="ts" setup>
import type { EstimatorCycle } from '@/stores/estimator'

interface Props {
  modelValue: EstimatorCycle
}

defineProps<Props>()

const emit = defineEmits<{
  'update:modelValue': [value: EstimatorCycle]
}>()

const cycles: Array<{ value: EstimatorCycle; label: string; badge?: string }> = [
  { value: 'monthly', label: 'Monthly' },
  { value: 'quarterly', label: 'Quarterly', badge: '5% off' },
  { value: 'annual', label: 'Annual', badge: '15% off' },
]

function pick(value: EstimatorCycle): void {
  emit('update:modelValue', value)
}
</script>

<template>
  <div class="cycle-toggle d-inline-flex pa-1 rounded-pill" role="radiogroup" aria-label="Billing cycle">
    <button
      v-for="c in cycles"
      :key="c.value"
      type="button"
      role="radio"
      :aria-checked="modelValue === c.value"
      class="cycle-toggle__option"
      :class="{ 'cycle-toggle__option--active': modelValue === c.value }"
      @click="pick(c.value)"
    >
      <span>{{ c.label }}</span>
      <span v-if="c.badge" class="cycle-toggle__badge">{{ c.badge }}</span>
    </button>
  </div>
</template>

<style lang="scss" scoped>
.cycle-toggle {
  background: rgba(var(--v-theme-surface), 0.6);
  border: 1px solid rgba(var(--v-theme-on-surface), 0.08);
  gap: 4px;
  backdrop-filter: blur(8px);
}

.cycle-toggle__option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(var(--v-theme-on-surface), 0.7);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;

  &:hover:not(.cycle-toggle__option--active) {
    color: rgba(var(--v-theme-on-surface), 0.95);
    background: rgba(var(--v-theme-on-surface), 0.04);
  }
}

.cycle-toggle__option--active {
  background: rgb(var(--v-theme-primary));
  color: rgb(var(--v-theme-on-primary));
  box-shadow: 0 4px 12px rgba(var(--v-theme-primary), 0.25);
}

.cycle-toggle__badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  letter-spacing: 0.02em;
}

.cycle-toggle__option:not(.cycle-toggle__option--active) .cycle-toggle__badge {
  background: rgba(var(--v-theme-success), 0.18);
  color: rgb(var(--v-theme-success));
}
</style>
