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

interface TierOption {
  value: BackupTier
  label: string
  description: string
  monthly: number
}

interface Props {
  modelValue: BackupTier
  cycleSuffix?: string
  monthlyMultiplier?: number
}

const props = withDefaults(defineProps<Props>(), {
  cycleSuffix: '/mo',
  monthlyMultiplier: 1,
})

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

const tiers: TierOption[] = [
  { value: 'none',     label: 'No off-site backup',  description: 'Free ZFS snapshots stay on the host. No off-site copy.', monthly: 0 },
  { value: 'lite',     label: 'Lite',                description: 'Daily backups · 7-day retention · up to 200 GB',         monthly: 5 },
  { value: 'standard', label: 'Standard',            description: 'Daily backups · 30-day retention · up to 500 GB',        monthly: 12 },
  { value: 'extended', label: 'Extended',            description: 'Daily + weekly · 90-day retention · up to 1 TB',         monthly: 25 },
  { value: 'vault',    label: 'Vault',               description: 'Daily + weekly + monthly · 1-year retention · up to 2 TB', monthly: 59 },
]

function pick(value: BackupTier): void {
  emit('update:modelValue', value)
}

function priceLabel(t: TierOption): string {
  if (t.monthly === 0) return 'free'
  const total = t.monthly * props.monthlyMultiplier
  return `+$${total.toFixed(0)}${props.cycleSuffix}`
}
</script>

<template>
  <div class="backup-selector">
    <div class="d-flex align-center justify-space-between mb-2">
      <div class="text-subtitle-2 font-weight-bold">Off-site Backup</div>
      <span class="text-caption text-medium-emphasis">
        Encrypted · StorJ-backed · free restores
      </span>
    </div>

    <div class="d-flex flex-column ga-2">
      <button
        v-for="t in tiers"
        :key="t.value"
        type="button"
        class="backup-selector__option"
        :class="{ 'backup-selector__option--active': modelValue === t.value }"
        @click="pick(t.value)"
      >
        <VIcon
          :icon="modelValue === t.value ? 'tabler-circle-check-filled' : 'tabler-circle'"
          :color="modelValue === t.value ? 'primary' : undefined"
          size="22"
          class="me-3 mt-1 flex-shrink-0"
        />

        <div class="flex-grow-1">
          <div class="font-weight-bold mb-1">{{ t.label }}</div>
          <div class="text-caption text-medium-emphasis">{{ t.description }}</div>
        </div>

        <div class="ms-3 flex-shrink-0 font-weight-bold" :class="t.monthly === 0 ? 'text-medium-emphasis' : 'text-primary'">
          {{ priceLabel(t) }}
        </div>
      </button>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.backup-selector__option {
  display: flex;
  align-items: flex-start;
  text-align: left;
  width: 100%;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(var(--v-theme-on-surface), 0.08);
  background: rgba(var(--v-theme-on-surface), 0.03);
  cursor: pointer;
  transition: all 0.15s ease;

  &:hover {
    border-color: rgba(var(--v-theme-primary), 0.45);
    background: rgba(var(--v-theme-primary), 0.06);
  }
}

.backup-selector__option--active {
  border-color: rgb(var(--v-theme-primary));
  background: rgba(var(--v-theme-primary), 0.10);
}
</style>
