<template>
  <Badge 
    v-if="!statusObject?.color"
    :variant="getStatusVariant(statusString)" 
    :class="badgeClass"
  >
    {{ displayName }}
  </Badge>
  <div
    v-else
    :class="badgeClass"
    :style="customStyle"
    class="inline-flex items-center justify-center rounded-md border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
  >
    {{ displayName }}
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { Badge } from '@/components/ui/badge'

interface StatusObject {
  id: string
  name: string
  color?: string
  is_system?: boolean
}

interface Props {
  status: string | StatusObject
  compact?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  compact: false
})

// Determine if status is an object with color property
const statusObject = computed(() => {
  if (typeof props.status === 'object' && props.status !== null) {
    return props.status as StatusObject
  }
  return null
})

// Get the status string (either from object or direct string)
const statusString = computed(() => {
  if (statusObject.value) {
    return statusObject.value.id || statusObject.value.name
  }
  return props.status as string
})

// Get the display name
const displayName = computed(() => {
  if (statusObject.value) {
    return statusObject.value.name
  }
  return formatStatus(statusString.value)
})

const badgeClass = computed(() => {
  return props.compact ? 'w-[100px] text-xs' : 'w-[130px] text-xs'
})

// Calculate contrast color (black or white) based on background color
const getContrastColor = (hexColor: string): string => {
  // Remove # if present
  const hex = hexColor.replace('#', '')
  
  // Convert to RGB
  const r = parseInt(hex.substring(0, 2), 16)
  const g = parseInt(hex.substring(2, 4), 16)
  const b = parseInt(hex.substring(4, 6), 16)
  
  // Calculate relative luminance using WCAG formula
  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255
  
  // Return black for light backgrounds, white for dark backgrounds
  return luminance > 0.5 ? '#000000' : '#ffffff'
}

// Custom style for badges with custom colors
const customStyle = computed(() => {
  if (statusObject.value?.color) {
    const bgColor = statusObject.value.color
    const textColor = getContrastColor(bgColor)
    return {
      backgroundColor: bgColor,
      color: textColor,
      borderColor: bgColor
    }
  }
  return {}
})

const getStatusVariant = (status: string) => {
  switch (status) {
    case 'not_started':
      return 'secondary'
    case 'in_progress':
      return 'default'
    case 'submitted':
      return 'outline'
    case 'approved':
      return 'default'
    case 'retake':
      return 'destructive'
    default:
      return 'secondary'
  }
}

const formatStatus = (status: string) => {
  switch (status) {
    case 'not_started':
      return 'Not Started'
    case 'in_progress':
      return 'In Progress'
    case 'submitted':
      return 'Submitted'
    case 'approved':
      return 'Approved'
    case 'retake':
      return 'Retake'
    default:
      return status
  }
}
</script>
