<script setup lang="ts">
/**
 * Visual stepper/timeline showing the decision workflow.
 *
 * Displays each step with its type icon, status badge, and dates.
 * The active step is highlighted, completed steps show a checkmark.
 */
import type { DecisionStep } from '~/stores/decisions'

const props = defineProps<{
  steps: DecisionStep[]
  currentStatus: string
}>()

const emit = defineEmits<{
  'create-vote-session': [step: DecisionStep]
}>()

const sortedSteps = computed(() => {
  return [...props.steps].sort((a, b) => a.step_order - b.step_order)
})

const stepTypeLabel = (stepType: string) => {
  switch (stepType) {
    case 'qualification': return 'Qualification'
    case 'review': return 'Revue'
    case 'vote': return 'Vote'
    case 'execution': return 'Execution'
    case 'reporting': return 'Compte rendu'
    default: return stepType
  }
}

const stepTypeIcon = (stepType: string) => {
  switch (stepType) {
    case 'qualification': return 'i-lucide-check-square'
    case 'review': return 'i-lucide-eye'
    case 'vote': return 'i-lucide-vote'
    case 'execution': return 'i-lucide-play'
    case 'reporting': return 'i-lucide-file-text'
    default: return 'i-lucide-circle'
  }
}

function formatDate(dateStr: string): string {
  return new Date(dateStr).toLocaleDateString('fr-FR', {
    day: 'numeric',
    month: 'long',
    year: 'numeric',
  })
}
</script>

<template>
  <div>
    <div v-if="sortedSteps.length === 0" class="text-center py-8">
      <UIcon name="i-lucide-list-checks" class="text-4xl text-gray-400 mb-3" />
      <p class="text-gray-500">Aucune etape definie pour cette decision</p>
    </div>

    <div v-else class="relative">
      <!-- Timeline line -->
      <div class="absolute left-4 top-0 bottom-0 w-0.5 bg-gray-200 dark:bg-gray-700" />

      <!-- Steps -->
      <div class="space-y-4">
        <div
          v-for="step in sortedSteps"
          :key="step.id"
          class="relative pl-12"
        >
          <!-- Timeline dot -->
          <div
            class="absolute left-2 w-5 h-5 rounded-full border-2 flex items-center justify-center"
            :class="{
              'bg-green-500 border-green-500': step.status === 'completed',
              'bg-primary border-primary': step.status === 'active' || step.status === 'in_progress',
              'bg-yellow-400 border-yellow-400': step.status === 'pending',
              'bg-white dark:bg-gray-900 border-gray-300 dark:border-gray-600': step.status === 'draft',
            }"
          >
            <UIcon
              v-if="step.status === 'completed'"
              name="i-lucide-check"
              class="text-white text-xs"
            />
          </div>

          <UCard>
            <div class="space-y-2">
              <div class="flex items-center justify-between">
                <div class="flex items-center gap-2">
                  <UIcon :name="stepTypeIcon(step.step_type)" class="text-gray-500" />
                  <span class="text-sm font-mono text-gray-400">Etape {{ step.step_order }}</span>
                  <UBadge variant="subtle" color="neutral" size="xs">
                    {{ stepTypeLabel(step.step_type) }}
                  </UBadge>
                </div>
                <StatusBadge :status="step.status" type="decision" />
              </div>

              <h3 v-if="step.title" class="font-medium text-gray-900 dark:text-white">
                {{ step.title }}
              </h3>

              <p v-if="step.description" class="text-sm text-gray-600 dark:text-gray-400">
                {{ step.description }}
              </p>

              <div class="text-xs text-gray-500">
                Cree le {{ formatDate(step.created_at) }}
              </div>

              <div v-if="step.outcome" class="flex items-center gap-2 mt-2">
                <UIcon name="i-lucide-flag" class="text-gray-400" />
                <span class="text-sm text-gray-600 dark:text-gray-400">
                  Resultat : {{ step.outcome }}
                </span>
              </div>

              <!-- Vote session actions -->
              <div class="flex items-center gap-2 mt-2">
                <UButton
                  v-if="step.vote_session_id"
                  size="xs"
                  variant="soft"
                  color="primary"
                  icon="i-lucide-vote"
                  label="Voir la session de vote"
                />
                <UButton
                  v-else-if="step.step_type === 'vote' && (step.status === 'active' || step.status === 'pending')"
                  size="xs"
                  variant="soft"
                  color="primary"
                  icon="i-lucide-plus"
                  label="Creer une session de vote"
                  @click.stop="emit('create-vote-session', step)"
                />
              </div>
            </div>
          </UCard>
        </div>
      </div>
    </div>
  </div>
</template>
