<template>
  <nav :class="wrapperClasses" role="navigation" :aria-label="ariaLabel">
    <div
      v-for="step in steps"
      :key="step.value"
      :class="getStepClasses(step)"
      :aria-current="isActive(step.value) ? 'step' : undefined"
      role="listitem"
    >
      <span :class="textClasses">
        {{ step.label }}
      </span>
    </div>
  </nav>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import type { StepperProps, StepperEmits } from '@/types/components'

const props = withDefaults(defineProps<StepperProps>(), {
  direction: 'horizontal',
  size: 'md'
})

defineEmits<StepperEmits>()

/**
 * Check if a step is currently active
 */
const isActive = (value: string | number): boolean => {
  return props.modelValue === value
}

/**
 * ARIA label for the navigation
 */
const ariaLabel = computed(() => 'Progress steps')

/**
 * Dynamic wrapper classes based on direction
 */
const wrapperClasses = computed(() => {
  const classes = [
    'titan-stepper',
    'flex',
    'role-list'
  ]

  // Direction-specific layout
  if (props.direction === 'vertical') {
    classes.push('flex-col', 'space-y-[75px]')
  } else {
    classes.push('flex-row', 'flex-wrap', 'gap-2')
  }

  // Add custom classes
  if (props.class) {
    classes.push(props.class)
  }

  return classes.join(' ')
})

/**
 * Text classes consistent across all steps
 */
const textClasses = computed(() => {
  return 'font-medium text-[16px] leading-[1.3]'
})

/**
 * Dynamic step classes based on state and size
 */
const getStepClasses = (step: { label: string; value: string | number }) => {
  const classes = [
    // Base styles
    'relative',
    'inline-flex',
    'items-center',
    'justify-center',
    'rounded-[16px]',
    'border-[1.6px]',
    'transition-all',
    'duration-200',
    'backdrop-blur-[13.444px]',
    'backdrop-filter',
    'font-medium',
    'text-[16px]',
    'leading-[1.3]',
    'text-white'
  ]

  // Size-specific padding
  if (props.size === 'sm') {
    classes.push('px-3', 'py-1')
  } else if (props.size === 'md') {
    classes.push('px-4', 'py-1.5')
  } else if (props.size === 'lg') {
    classes.push('px-5', 'py-2')
  }

  // State-specific styles
  const active = isActive(step.value)

  if (active) {
    // Active step - Titan purple (#3f1038) with white text
    classes.push(
      'bg-[#3f1038]',
      'border-[rgba(255,255,255,0.27)]',
      'shadow-sm'
    )
  } else {
    // Inactive step - Translucent white (34% opacity) with white text
    classes.push(
      'bg-[rgba(255,255,255,0.34)]',
      'border-[rgba(255,255,255,0.27)]'
    )
  }

  return classes.join(' ')
}
</script>

<style scoped>
/* Additional styling for backdrop blur support */
.backdrop-filter {
  -webkit-backdrop-filter: blur(13.444px);
}
</style>