<script lang="ts" setup>
import { computed } from 'vue'

interface PlanFeatures {
  cpu?: string | number
  ram?: string | number
  storage?: string | number
  bandwidth?: string | number
  [key: string]: string | number | undefined
}

interface Plan {
  id: number
  name: string
  slug: string
  price: string
  features: PlanFeatures | null
}

interface Props {
  plan: Plan
  popular?: boolean
  orderUrl: string
  variant?: 'standard' | 'storage'
}

const props = withDefaults(defineProps<Props>(), {
  popular: false,
  variant: 'standard',
})

const emit = defineEmits<{
  estimate: [planId: number]
}>()

const formattedPrice = computed<string>(() => {
  const price = parseFloat(props.plan.price) || 0
  return price % 1 === 0 ? `${price}` : price.toFixed(2)
})

const cpu = computed<string>(() => String(props.plan.features?.cpu ?? '—'))
const ram = computed<string>(() => String(props.plan.features?.ram ?? '—'))
const storage = computed<string>(() => String(props.plan.features?.storage ?? '—'))
const bandwidth = computed<string>(() => String(props.plan.features?.bandwidth ?? 'Unmetered'))
</script>

<template>
  <div
    class="plan-card"
    :class="{ 'plan-card--popular': popular, 'plan-card--storage': variant === 'storage' }"
  >
    <div v-if="popular" class="plan-card__badge">Most popular</div>

    <div class="plan-card__head">
      <div class="plan-card__name">{{ plan.name }}</div>
      <div class="plan-card__price-row">
        <span class="plan-card__currency">$</span>
        <span class="plan-card__price">{{ formattedPrice }}</span>
        <span class="plan-card__period">/mo</span>
      </div>
    </div>

    <div class="plan-card__specs">
      <div class="plan-card__spec">
        <VIcon icon="tabler-cpu" size="18" />
        <span>{{ cpu }}</span>
      </div>
      <div class="plan-card__spec">
        <VIcon icon="tabler-device-sd-card" size="18" />
        <span>{{ ram }} RAM</span>
      </div>
      <div class="plan-card__spec">
        <VIcon icon="tabler-database" size="18" />
        <span>{{ storage }}</span>
      </div>
      <div class="plan-card__spec">
        <VIcon icon="tabler-arrows-right-left" size="18" />
        <span>{{ bandwidth }}</span>
      </div>
      <div class="plan-card__spec plan-card__spec--meta">
        <VIcon icon="tabler-microchip" size="18" />
        <span>Intel Xeon · ECC memory</span>
      </div>
    </div>

    <div class="plan-card__actions">
      <a :href="orderUrl" class="text-decoration-none">
        <VBtn block color="primary" size="default" rounded="lg">
          Order Now
          <VIcon icon="tabler-arrow-right" end size="small" />
        </VBtn>
      </a>
      <button
        type="button"
        class="plan-card__estimate"
        @click="emit('estimate', plan.id)"
      >
        Estimate this plan →
      </button>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 24px 22px 22px;
  border-radius: 16px;
  background: rgba(var(--v-theme-surface), 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(var(--v-theme-on-surface), 0.08);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;

  &:hover {
    transform: translateY(-3px);
    border-color: rgba(var(--v-theme-primary), 0.4);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
  }
}

.plan-card--popular {
  border-color: rgba(var(--v-theme-primary), 0.5);
  background: linear-gradient(180deg, rgba(var(--v-theme-primary), 0.10), rgba(var(--v-theme-surface), 0.6));
  box-shadow: 0 8px 28px rgba(var(--v-theme-primary), 0.18);
}

.plan-card--storage {
  border-color: rgba(var(--v-theme-success), 0.25);

  &:hover {
    border-color: rgba(var(--v-theme-success), 0.5);
  }
}

.plan-card__badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 14px;
  border-radius: 999px;
  background: rgb(var(--v-theme-primary));
  color: rgb(var(--v-theme-on-primary));
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(var(--v-theme-primary), 0.4);
}

.plan-card__head {
  margin-bottom: 18px;
}

.plan-card__name {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: rgba(var(--v-theme-on-surface), 0.95);
  margin-bottom: 6px;
}

.plan-card__price-row {
  display: flex;
  align-items: baseline;
  gap: 2px;
  color: rgb(var(--v-theme-primary));
}

.plan-card__currency {
  font-size: 20px;
  font-weight: 600;
}

.plan-card__price {
  font-size: 38px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.plan-card__period {
  font-size: 14px;
  font-weight: 500;
  color: rgba(var(--v-theme-on-surface), 0.6);
  margin-left: 4px;
}

.plan-card__specs {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 22px;
  padding: 14px 0;
  border-top: 1px solid rgba(var(--v-theme-on-surface), 0.06);
  border-bottom: 1px solid rgba(var(--v-theme-on-surface), 0.06);
}

.plan-card__spec {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: rgba(var(--v-theme-on-surface), 0.85);

  .v-icon {
    color: rgba(var(--v-theme-on-surface), 0.55);
    flex-shrink: 0;
  }
}

.plan-card__spec--meta {
  font-size: 12px;
  color: rgba(var(--v-theme-on-surface), 0.55);
  letter-spacing: 0.01em;
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px dashed rgba(var(--v-theme-on-surface), 0.06);
}

.plan-card__actions {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.plan-card__estimate {
  background: transparent;
  border: none;
  color: rgb(var(--v-theme-primary));
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  transition: background 0.15s ease;

  &:hover {
    background: rgba(var(--v-theme-primary), 0.06);
  }
}
</style>
