<template>
  <div class="loading-error-state">
    <!-- Loading State -->
    <div v-if="isLoading" :class="[
      'flex justify-center items-center',
      fullHeight ? 'min-h-64' : 'py-12'
    ]">
      <div class="flex flex-col items-center space-y-4">
        <div :class="[
          'rounded-full border-b-2 animate-spin',
          compact ? 'h-8 w-8' : 'h-12 w-12',
          spinnerColor || 'border-blue-600'
        ]"></div>
        <p :class="[
          compact ? 'text-sm' : 'text-base',
          'text-gray-600'
        ]">
          {{ loadingMessage || 'Loading...' }}
        </p>
      </div>
    </div>

    <!-- Error State -->
    <div v-else-if="hasError" :class="[
      'flex justify-center items-center',
      fullHeight ? 'min-h-64' : 'py-12'
    ]">
      <div class="text-center">
        <!-- Error Icon -->
        <div v-if="!compact" class="w-16 h-16 mx-auto mb-4 bg-red-500/10 rounded-full flex items-center justify-center">
          <AlertCircle class="w-8 h-8 text-red-500" />
        </div>

        <!-- Error Content -->
        <h2 :class="[
          'font-bold text-red-600 mb-4',
          compact ? 'text-lg' : 'text-2xl'
        ]">
          {{ errorTitle || 'Error' }}
        </h2>
        <p :class="[
          'text-gray-600 mb-4',
          compact ? 'text-sm' : 'text-base'
        ]">
          {{ errorMessage || 'Something went wrong' }}
        </p>

        <!-- Retry Button -->
        <Button
          v-if="showRetry"
          @click="$emit('retry')"
          variant="outline"
          :size="compact ? 'sm' : 'default'"
        >
          {{ retryLabel || 'Try Again' }}
        </Button>
      </div>
    </div>

    <!-- Success/Content State -->
    <div v-else>
      <slot />
    </div>
  </div>
</template>

<script setup lang="ts">
import { Button } from '@/components/ui/button'
import { AlertCircle } from 'lucide-vue-next'

interface Props {
  /**
   * Whether currently loading
   */
  isLoading?: boolean
  /**
   * Loading message to display
   */
  loadingMessage?: string
  /**
   * Whether there's an error
   */
  hasError?: boolean
  /**
   * Error message to display
   */
  errorMessage?: string
  /**
   * Error title/heading
   */
  errorTitle?: string
  /**
   * Whether to show retry button
   */
  showRetry?: boolean
  /**
   * Retry button label
   */
  retryLabel?: string
  /**
   * Compact variant (smaller sizes)
   */
  compact?: boolean
  /**
   * Use full height (min-h-64)
   */
  fullHeight?: boolean
  /**
   * Custom spinner color class
   */
  spinnerColor?: string
}

interface Emits {
  (e: 'retry'): void
}

withDefaults(defineProps<Props>(), {
  isLoading: false,
  hasError: false,
  showRetry: true,
  compact: false,
  fullHeight: true
})

defineEmits<Emits>()
</script>

<style scoped>
.loading-error-state {
  @apply w-full;
}
</style>