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

interface Plan {
  id: number
  slug: string
  name: string
  price: string
  setup_fee?: string | number
  features: Record<string, string | number> | null
}

interface Props {
  plan: Plan
}

const props = defineProps<Props>()

const generation = computed<string>(() => {
  const g = props.plan.features?.generation
  if (typeof g === 'string') return g
  return ''
})

const isBuildToOrder = computed<boolean>(() => generation.value === '14th-gen')

const leadTime = computed<string | null>(() => {
  const lt = props.plan.features?.lead_time_days
  return typeof lt === 'string' ? lt : null
})

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

const setupFee = computed<number>(() => {
  return parseFloat(String(props.plan.setup_fee ?? 0)) || 0
})

const cpu = computed<string>(() => {
  const c = props.plan.features?.cpu
  return typeof c === 'string' ? c : '—'
})

const ram = computed<string>(() => {
  const r = props.plan.features?.ram
  return typeof r === 'string' ? r : '—'
})

const bays = computed<string>(() => {
  const b = props.plan.features?.bays ?? props.plan.features?.storage_bays
  return typeof b === 'string' ? b : '—'
})

const formFactor = computed<string>(() => {
  const f = props.plan.features?.form_factor
  return typeof f === 'string' ? f : ''
})
</script>

<template>
  <div class="chassis-card" :class="{ 'chassis-card--build-to-order': isBuildToOrder }">
    <div class="chassis-card__badge-row">
      <VChip
        v-if="isBuildToOrder"
        size="x-small"
        color="info"
        variant="tonal"
        density="compact"
        prepend-icon="tabler-tools"
      >
        Build to order · {{ leadTime }}d
      </VChip>
      <VChip
        v-else
        size="x-small"
        color="success"
        variant="tonal"
        density="compact"
        prepend-icon="tabler-circle-check"
      >
        In stock · 1-2d ship
      </VChip>
      <VChip
        v-if="formFactor"
        size="x-small"
        color="default"
        variant="tonal"
        density="compact"
      >
        {{ formFactor }}
      </VChip>
    </div>

    <div class="chassis-card__head">
      <div class="chassis-card__name">{{ plan.name }}</div>
      <div class="chassis-card__price-row">
        <span class="chassis-card__currency">$</span>
        <span class="chassis-card__price">{{ formattedPrice }}</span>
        <span class="chassis-card__period">/mo</span>
      </div>
      <div v-if="setupFee > 0" class="chassis-card__setup-fee">
        +${{ setupFee.toFixed(0) }} setup
        <span class="text-medium-emphasis">(waived on 6+ months)</span>
      </div>
    </div>

    <div class="chassis-card__specs">
      <div class="chassis-card__spec">
        <VIcon icon="tabler-cpu" size="18" />
        <span>{{ cpu }}</span>
      </div>
      <div class="chassis-card__spec">
        <VIcon icon="tabler-device-sd-card" size="18" />
        <span>{{ ram }}</span>
      </div>
      <div class="chassis-card__spec">
        <VIcon icon="tabler-database" size="18" />
        <span>{{ bays }}</span>
      </div>
    </div>

    <div class="chassis-card__actions">
      <Link v-if="isBuildToOrder" :href="`/dedicated-servers/${plan.slug}`" class="text-decoration-none">
        <VBtn block color="primary" size="default" rounded="lg">
          Configure & price
          <VIcon icon="tabler-arrow-right" end size="small" />
        </VBtn>
      </Link>
      <a v-else :href="`/dedicated-servers/${plan.slug}`" class="text-decoration-none">
        <VBtn block color="primary" size="default" rounded="lg">
          View details
          <VIcon icon="tabler-arrow-right" end size="small" />
        </VBtn>
      </a>
    </div>
  </div>
</template>

<script lang="ts">
import { Link } from '@inertiajs/vue3'

export default {
  components: { Link },
}
</script>

<style lang="scss" scoped>
.chassis-card {
  display: flex;
  flex-direction: column;
  padding: 22px 20px 20px;
  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;
  height: 100%;

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

.chassis-card--build-to-order {
  border-color: rgba(var(--v-theme-info), 0.25);

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

.chassis-card__badge-row {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.chassis-card__head {
  margin-bottom: 16px;
}

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

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

.chassis-card__currency {
  font-size: 18px;
  font-weight: 600;
}

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

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

.chassis-card__setup-fee {
  margin-top: 4px;
  font-size: 12px;
  color: rgba(var(--v-theme-on-surface), 0.7);
}

.chassis-card__specs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 18px;
  padding: 12px 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);
}

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

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

.chassis-card__actions {
  margin-top: auto;
}
</style>
