<script setup lang="ts">
import { computed, onMounted } from 'vue'
import { useUsage, type UsageThreshold } from './composables/useUsage'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Progress } from '@/components/ui/progress'
import { Badge } from '@/components/ui/badge'
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
import { Skeleton } from '@/components/ui/skeleton'
import { AlertTriangle, AlertCircle, CheckCircle2 } from 'lucide-vue-next'

const props = defineProps<{
  organizationId: string
}>()

const {
  thresholds,
  isLoading,
  error,
  hasWarnings,
  hasExceeded,
  fetchThresholds,
  checkUsage,
  getUsagePercentage,
} = useUsage()

onMounted(() => {
  fetchThresholds(props.organizationId)
})

function getStatusIcon(threshold: UsageThreshold) {
  const result = checkUsage(threshold)
  switch (result.status) {
    case 'exceeded':
      return AlertCircle
    case 'warning':
      return AlertTriangle
    default:
      return CheckCircle2
  }
}

function getStatusColor(threshold: UsageThreshold): string {
  const result = checkUsage(threshold)
  switch (result.status) {
    case 'exceeded':
      return 'text-destructive'
    case 'warning':
      return 'text-yellow-500'
    default:
      return 'text-green-500'
  }
}

function getProgressColor(threshold: UsageThreshold): string {
  const result = checkUsage(threshold)
  switch (result.status) {
    case 'exceeded':
      return 'bg-destructive'
    case 'warning':
      return 'bg-yellow-500'
    default:
      return ''
  }
}

function formatNumber(num: number): string {
  return new Intl.NumberFormat().format(num)
}
</script>

<template>
  <div class="space-y-6">
    <!-- Alert for exceeded limits -->
    <Alert v-if="hasExceeded" variant="destructive">
      <AlertCircle class="h-4 w-4" />
      <AlertTitle>Usage Limit Exceeded</AlertTitle>
      <AlertDescription>
        One or more usage limits have been exceeded. Some features may be restricted until you upgrade your plan.
      </AlertDescription>
    </Alert>

    <!-- Alert for warnings -->
    <Alert v-else-if="hasWarnings" class="border-yellow-500 bg-yellow-50 dark:bg-yellow-950">
      <AlertTriangle class="h-4 w-4 text-yellow-500" />
      <AlertTitle class="text-yellow-700 dark:text-yellow-400">Approaching Usage Limits</AlertTitle>
      <AlertDescription class="text-yellow-600 dark:text-yellow-300">
        You're approaching one or more usage limits. Consider upgrading your plan to avoid interruptions.
      </AlertDescription>
    </Alert>

    <Card>
      <CardHeader>
        <CardTitle>Usage Overview</CardTitle>
        <CardDescription>
          Track your current usage across different resources
        </CardDescription>
      </CardHeader>
      <CardContent>
        <Alert v-if="error" variant="destructive" class="mb-4">
          <AlertDescription>\{{ error }}</AlertDescription>
        </Alert>

        <div v-if="isLoading" class="space-y-6">
          <div v-for="i in 3" :key="i" class="space-y-2">
            <Skeleton class="h-4 w-[200px]" />
            <Skeleton class="h-2 w-full" />
          </div>
        </div>

        <div v-else-if="thresholds.length > 0" class="space-y-6">
          <div
            v-for="threshold in thresholds"
            :key="threshold.subscription_item_id"
            class="space-y-2"
          >
            <div class="flex items-center justify-between">
              <div class="flex items-center gap-2">
                <component
                  :is="getStatusIcon(threshold)"
                  class="h-4 w-4"
                  :class="getStatusColor(threshold)"
                />
                <span class="font-medium">\{{ threshold.label }}</span>
              </div>
              <div class="flex items-center gap-2">
                <span class="text-sm text-muted-foreground">
                  \{{ formatNumber(threshold.current) }}
                  <span v-if="threshold.hard_limit">
                    / \{{ formatNumber(threshold.hard_limit) }}
                  </span>
                </span>
                <Badge
                  v-if="checkUsage(threshold).status === 'exceeded'"
                  variant="destructive"
                >
                  Exceeded
                </Badge>
                <Badge
                  v-else-if="checkUsage(threshold).status === 'warning'"
                  class="bg-yellow-500 hover:bg-yellow-600"
                >
                  Warning
                </Badge>
              </div>
            </div>
            <Progress
              :model-value="getUsagePercentage(threshold)"
              :class="getProgressColor(threshold)"
            />
            <p
              v-if="threshold.warning_threshold && threshold.current >= threshold.warning_threshold"
              class="text-xs text-muted-foreground"
            >
              Warning threshold: \{{ formatNumber(threshold.warning_threshold) }}
            </p>
          </div>
        </div>

        <div v-else class="text-center py-8">
          <CheckCircle2 class="h-12 w-12 text-green-500 mx-auto mb-4" />
          <p class="text-muted-foreground">No usage limits configured</p>
          <p class="text-sm text-muted-foreground mt-1">
            Your plan has unlimited usage for all resources
          </p>
        </div>
      </CardContent>
    </Card>
  </div>
</template>
