<script lang="ts" setup>
import { computed } from 'vue'
import type { DedicatedConfigGroup, DedicatedConfigValue, DedicatedCycle } from '@/stores/dedicatedConfigurator'

interface Props {
  group: DedicatedConfigGroup
  selected: string
  cycle: DedicatedCycle
}

const props = defineProps<Props>()

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

const values = computed<DedicatedConfigValue[]>(() => props.group.options[0]?.values ?? [])

function priceFor(v: DedicatedConfigValue): number {
  const raw = props.cycle === 'monthly'
    ? v.monthly_price
    : props.cycle === 'quarterly'
      ? v.quarterly_price
      : props.cycle === 'semi_annual'
        ? v.semi_annual_price
        : v.annual_price
  return raw ? parseFloat(raw) : 0
}

function priceLabel(v: DedicatedConfigValue): string {
  const p = priceFor(v)
  if (p === 0) return v.is_default ? 'included' : 'no extra cost'
  const suffix = props.cycle === 'monthly' ? '/mo' : props.cycle === 'quarterly' ? '/qtr' : props.cycle === 'semi_annual' ? '/6mo' : '/yr'
  return `+$${p.toFixed(2)}${suffix}`
}
</script>

<template>
  <div class="option-group">
    <div class="option-group__head">
      <h4 class="option-group__title">{{ group.name.replace('Dedicated 14th Gen — ', '') }}</h4>
      <p v-if="group.description" class="option-group__desc">{{ group.description }}</p>
    </div>

    <div class="option-group__list">
      <button
        v-for="v in values"
        :key="v.id"
        type="button"
        class="option-group__option"
        :class="{ 'option-group__option--active': selected === v.value }"
        @click="emit('update:selected', v.value)"
      >
        <VIcon
          :icon="selected === v.value ? 'tabler-circle-check-filled' : 'tabler-circle'"
          :color="selected === v.value ? 'primary' : undefined"
          size="22"
          class="me-3 mt-1 flex-shrink-0"
        />
        <div class="flex-grow-1">
          <div class="font-weight-bold">{{ v.label }}</div>
        </div>
        <div
          class="ms-3 flex-shrink-0 font-weight-bold"
          :class="priceFor(v) === 0 ? 'text-medium-emphasis text-caption' : 'text-primary'"
        >
          {{ priceLabel(v) }}
        </div>
      </button>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.option-group__head {
  margin-bottom: 12px;
}

.option-group__title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}

.option-group__desc {
  font-size: 13px;
  color: rgba(var(--v-theme-on-surface), 0.6);
  margin-bottom: 0;
}

.option-group__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.option-group__option {
  display: flex;
  align-items: flex-start;
  text-align: left;
  width: 100%;
  padding: 12px 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);
  }
}

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