<script lang="ts" setup>
import { Link } from '@inertiajs/vue3'
import AccountLayout from '@/Layouts/AccountLayout.vue'
import { formatPrice } from '@/utils/resolvers'
import type { Plan } from '@/types'

interface Props {
  plan: Plan
}

defineOptions({ layout: AccountLayout })

defineProps<Props>()
</script>

<template>
  <div>
    <div class="mb-4">
      <Link href="/plans" class="text-primary text-body-2 text-decoration-none">&larr; Back to Plans</Link>
    </div>

    <VCard style="max-width: 600px;">
      <VCardText>
        <div class="text-h4 font-weight-bold">{{ plan.name }}</div>
        <div v-if="plan.description" class="text-medium-emphasis mt-2">{{ plan.description }}</div>

        <div class="mt-6">
          <span class="text-h3 font-weight-bold">
            {{ formatPrice(plan.price, plan.billing_cycle) }}
          </span>
        </div>

        <div v-if="plan.features" class="mt-8">
          <div class="text-h6 mb-3">Features</div>
          <VList density="compact" class="pa-0">
            <VListItem
              v-for="(value, feature) in plan.features"
              :key="feature as string"
              class="px-0"
            >
              <template #prepend>
                <VIcon icon="tabler-check" color="success" size="18" class="me-2" />
              </template>
              <VListItemTitle class="text-body-2">
                <span class="font-weight-medium">{{ feature }}:</span> {{ value }}
              </VListItemTitle>
            </VListItem>
          </VList>
        </div>

        <div class="mt-8">
          <span v-if="plan.stock_quantity !== null && plan.stock_quantity <= 0" class="text-body-2 font-weight-medium text-error">
            This plan is currently out of stock.
          </span>
          <Link
            v-else
            :href="`/checkout/${plan.id}`"
            class="text-decoration-none"
          >
            <VBtn size="large">
              Order Now
            </VBtn>
          </Link>
        </div>
      </VCardText>
    </VCard>
  </div>
</template>
