<template>
  <span :class="['status-badge', `status-badge--${statusType}`]">
    <v-icon v-if="showIcon" :icon="icon" :size="iconSize" />
    <span class="status-badge__text">{{ label }}</span>
  </span>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import type { components } from '@/api'

type PackageStatus = components['schemas']['Package']['status']

const props = withDefaults(
  defineProps<{
    status: PackageStatus
    size?: 'sm' | 'md' | 'lg'
    showIcon?: boolean
  }>(),
  {
    size: 'md',
    showIcon: true,
  }
)

const statusConfig: Record<
  NonNullable<PackageStatus>,
  { label: string; icon: string; type: string }
> = {
  latest: { label: 'Latest', icon: 'mdi-check-circle', type: 'success' },
  built: { label: 'Built', icon: 'mdi-package-variant-closed', type: 'info' },
  failed: { label: 'Failed', icon: 'mdi-alert-circle', type: 'error' },
  skipped: { label: 'Skipped', icon: 'mdi-skip-next-circle', type: 'neutral' },
  delayed: { label: 'Delayed', icon: 'mdi-clock-alert', type: 'warning' },
  queued: { label: 'Queued', icon: 'mdi-playlist-plus', type: 'queued' },
  building: { label: 'Building', icon: 'mdi-hammer', type: 'building' },
  signing: { label: 'Signing', icon: 'mdi-key', type: 'signing' },
  unknown: { label: 'Unknown', icon: 'mdi-help-circle', type: 'unknown' },
}

const config = computed(() => {
  if (!props.status) return { label: 'Unknown', icon: 'mdi-help-circle', type: 'unknown' }
  return statusConfig[props.status] || statusConfig.unknown
})

const label = computed(() => config.value.label)
const icon = computed(() => config.value.icon)
const statusType = computed(() => config.value.type)

const iconSize = computed(() => {
  switch (props.size) {
    case 'sm':
      return 14
    case 'lg':
      return 20
    default:
      return 16
  }
})
</script>

<style scoped>
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  white-space: nowrap;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.status-badge:hover {
  transform: translateY(-1px);
}

.status-badge__text {
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

/* Success - Latest */
.status-badge--success {
  background: var(--color-status-success-bg);
  color: var(--color-status-success);
  border: 1px solid rgba(34, 197, 94, 0.3);
}

/* Info - Built */
.status-badge--info {
  background: var(--color-status-info-bg);
  color: var(--color-status-info);
  border: 1px solid rgba(59, 130, 246, 0.3);
}

/* Error - Failed */
.status-badge--error {
  background: var(--color-status-error-bg);
  color: var(--color-status-error);
  border: 1px solid rgba(239, 68, 68, 0.3);
}

/* Warning - Delayed */
.status-badge--warning {
  background: var(--color-status-warning-bg);
  color: var(--color-status-warning);
  border: 1px solid rgba(245, 158, 11, 0.3);
}

/* Neutral - Skipped */
.status-badge--neutral {
  background: var(--color-status-neutral-bg);
  color: var(--color-status-neutral);
  border: 1px solid rgba(107, 114, 128, 0.3);
}

/* Queued */
.status-badge--queued {
  background: rgba(249, 115, 22, 0.15);
  color: #f97316;
  border: 1px solid rgba(249, 115, 22, 0.3);
}

/* Building */
.status-badge--building {
  background: rgba(20, 184, 166, 0.15);
  color: #14b8a6;
  border: 1px solid rgba(20, 184, 166, 0.3);
  animation: pulse-building 2s ease-in-out infinite;
}

/* Signing */
.status-badge--signing {
  background: rgba(99, 102, 241, 0.15);
  color: #6366f1;
  border: 1px solid rgba(99, 102, 241, 0.3);
}

/* Unknown */
.status-badge--unknown {
  background: var(--color-status-neutral-bg);
  color: var(--color-text-muted);
  border: 1px solid rgba(156, 163, 175, 0.3);
}

@keyframes pulse-building {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}
</style>
