<template>
  <div
    class="flex h-full flex-col rounded-xl border border-neutral-200 bg-neutral-50 p-4 dark:border-neutral-800 dark:bg-neutral-900 relative"
    :class="{
      'border-neutral-300 bg-neutral-50 ring-4 ring-neutral-500/20': active
    }"
  >
    <div class="absolute top-4 right-5">
      <UBadge
        v-if="active && subscription?.status"
        :label="subscription.status"
        :color="getStatusColor(subscription.status)"
        variant="subtle"
        class="capitalize"
      />
    </div>
    <p class="mt-1 text-sm text-neutral-500">
      {{ description }}
    </p>
    <div class="mt-auto mb-2 flex items-baseline pt-4">
      <span class="text-3xl font-bold">
        {{ formatPrice(unitAmount) }}
      </span>
      <span class="ml-1 text-neutral-500">/{{ interval }} </span>
    </div>
    <div
      v-if="active && subscription"
      class="mb-2 text-sm text-neutral-500"
    >
      {{ getSubscriptionMessage() }}
      {{ useDateFormat(subscription.cancelAt || subscription.currentPeriodEnd, 'MMM DD, YYYY').value }}
    </div>
    <UButton
      block
      :variant="active ? 'solid' : 'outline'"
      :label="getButtonLabel()"
      :loading="loading"
      :disabled="loading || disabled"
      size="lg"
      target="_blank"
      @click="handleClick"
    />
    <ul class="mt-4 space-y-1">
      <li
        v-for="feature in features"
        :key="feature.name"
        class="flex items-center gap-3 text-[var(--ui-text-muted)]"
      >
        <UIcon
          name="i-lucide-check-circle"
          class="text-primary-500 h-4 w-4"
        />
        <span class="text-sm">{{ feature.name }}</span>
      </li>
    </ul>
  </div>
</template>

<script lang="ts" setup>
import { useDateFormat } from '@vueuse/core'

interface Feature {
  name: string
}

interface Subscription {
  status?: string
  currentPeriodEnd?: Date
  currentPeriodStart?: Date
  cancelAt?: Date
}

interface SubscriptionPlanCardProps {
  description?: string
  unitAmount?: number
  interval?: string
  loading?: boolean
  disabled?: boolean
  priceId: string
  features?: Feature[]
  active?: boolean
  hasActiveSubscription?: boolean
  canSwitch?: boolean
  subscription?: Subscription
}

const props = defineProps<SubscriptionPlanCardProps>()

const emit = defineEmits<{
  subscribe: [id: string]
  manage: [id: string]
}>()

const { t } = useI18n()

const formatPrice = (price?: number): string => {
  if (!price) return '€0'
  return new Intl.NumberFormat('nl-BE', {
    style: 'currency',
    currency: 'EUR',
    minimumFractionDigits: 0
  }).format(price / 100)
}

const getButtonLabel = (): string => {
  if (props.active) {
    return t('pricing.managePlan')
  }
  if (props.canSwitch) {
    return t('pricing.switchPlan')
  }
  if (props.hasActiveSubscription) {
    return t('pricing.managePlan')
  }
  return t('pricing.subscribe')
}

const getStatusColor = (status?: string) => {
  switch (status) {
    case 'active':
      return 'success'
    case 'trialing':
      return 'primary'
    case 'canceled':
    case 'incomplete_expired':
    case 'unpaid':
      return 'error'
    case 'past_due':
    case 'incomplete':
      return 'warning'
    default:
      return 'neutral'
  }
}

const getSubscriptionMessage = () => {
  if (props.subscription?.cancelAt) {
    return t('settings.billing.subscription.cancelsOn')
  }
  if (props.subscription?.status === 'trialing') {
    return t('settings.billing.subscription.trialEndsOn')
  }
  return t('settings.billing.subscription.renewsOn')
}

const handleClick = () => {
  if (props.active) {
    emit('manage', props.priceId)
  } else if (props.canSwitch) {
    emit('subscribe', props.priceId)
  } else if (props.hasActiveSubscription) {
    emit('manage', props.priceId)
  } else {
    emit('subscribe', props.priceId)
  }
}
</script>
