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

interface TierOption {
  value: ManagedTier
  label: string
  description: string
  monthly: number
  requiresTier?: number
}

interface Props {
  modelValue: ManagedTier
  pilotAvailable: boolean
  cycleSuffix?: string
  monthlyMultiplier?: number
}

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

const emit = defineEmits<{
  'update:modelValue': [value: ManagedTier]
  'request-upgrade': []
}>()

const tiers: TierOption[] = [
  {
    value: 'self',
    label: 'Self-Managed',
    description: 'OS-level break/fix tickets only. You run everything above the kernel.',
    monthly: 0,
  },
  {
    value: 'basic',
    label: 'Managed Basic',
    description: 'Security patching, panel re-installs, host monitoring. Business hours.',
    monthly: 29,
  },
  {
    value: 'pro',
    label: 'Managed Pro',
    description: 'Weekly patching, web/db config help, SSL, Docker, log triage. <2hr 9–9 ET.',
    monthly: 79,
  },
  {
    value: 'pilot',
    label: 'Pilot',
    description: 'We actively run patching, monitoring, and deploys. Co-admin (you keep root). 24/7.',
    monthly: 99,
    requiresTier: 8,
  },
]

function pick(tier: ManagedTier, locked: boolean): void {
  if (locked) return
  emit('update:modelValue', tier)
}

function isLocked(t: TierOption): boolean {
  return t.value === 'pilot' && !props.pilotAvailable
}

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="managed-selector">
    <div class="d-flex align-center justify-space-between mb-2">
      <div class="text-subtitle-2 font-weight-bold">Managed Support</div>
      <a href="/sla" target="_blank" class="text-caption text-medium-emphasis text-decoration-none">
        See SLA →
      </a>
    </div>

    <div class="d-flex flex-column ga-2">
      <button
        v-for="t in tiers"
        :key="t.value"
        type="button"
        class="managed-selector__option"
        :class="{
          'managed-selector__option--active': modelValue === t.value,
          'managed-selector__option--locked': isLocked(t),
        }"
        :disabled="isLocked(t)"
        @click="pick(t.value, isLocked(t))"
      >
        <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="d-flex align-center ga-2 flex-wrap mb-1">
            <span class="font-weight-bold">{{ t.label }}</span>
            <VChip v-if="isLocked(t)" size="x-small" color="warning" variant="tonal" density="compact">
              Requires VPS-{{ t.requiresTier }}+
            </VChip>
          </div>
          <div class="text-caption text-medium-emphasis">{{ t.description }}</div>
          <div v-if="isLocked(t)" class="mt-2">
            <a
              href="#"
              class="text-caption text-primary text-decoration-none"
              @click.prevent="emit('request-upgrade')"
            >
              Upgrade plan to enable →
            </a>
          </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>
.managed-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:not(.managed-selector__option--locked) {
    border-color: rgba(var(--v-theme-primary), 0.45);
    background: rgba(var(--v-theme-primary), 0.06);
  }
}

.managed-selector__option--active {
  border-color: rgb(var(--v-theme-primary));
  background: rgba(var(--v-theme-primary), 0.10);
}

.managed-selector__option--locked {
  opacity: 0.55;
  cursor: not-allowed;
}
</style>
