<script setup lang="ts">
const emit = defineEmits<{
  close: []
}>()

const { t } = useI18n()
const progressionStore = useProgressionStore()

const sections = computed(() => [
  {
    key: 'projets',
    name: t('progress.sections.projects'),
    visited: progressionStore.visitedSections.includes('projets'),
  },
  {
    key: 'competences',
    name: t('progress.sections.skills'),
    visited: progressionStore.visitedSections.includes('competences'),
  },
  {
    key: 'temoignages',
    name: t('progress.sections.testimonials'),
    visited: progressionStore.visitedSections.includes('temoignages'),
  },
  {
    key: 'parcours',
    name: t('progress.sections.journey'),
    visited: progressionStore.visitedSections.includes('parcours'),
  },
])
</script>

<template>
  <div class="progress-detail">
    <!-- Handle -->
    <div class="w-12 h-1 bg-sky-dark-100 rounded-full mx-auto mb-4 md:hidden" />

    <h2 class="text-xl font-ui font-bold text-sky-text mb-4">
      {{ t('progress.title') }}
    </h2>

    <!-- Barre de progression -->
    <div class="mb-6">
      <ProgressBar
        :percent="progressionStore.completionPercent"
        :show-tooltip="false"
        compact
      />
    </div>

    <!-- Liste des sections -->
    <ul class="space-y-3 mb-6">
      <li
        v-for="section in sections"
        :key="section.key"
        class="flex items-center gap-3"
      >
        <span
          class="shrink-0 w-6 h-6 rounded-full flex items-center justify-center text-sm"
          :class="
            section.visited
              ? 'bg-green-500/20 text-green-400'
              : 'bg-sky-dark-100 text-sky-text-muted'
          "
        >
          {{ section.visited ? '✓' : '○' }}
        </span>
        <span :class="section.visited ? 'text-sky-text' : 'text-sky-text-muted'">
          {{ section.name }}
        </span>
      </li>
    </ul>

    <!-- Bouton fermer -->
    <button
      type="button"
      class="w-full py-3 bg-sky-dark-100 rounded-lg text-sky-text font-ui font-medium"
      @click="emit('close')"
    >
      {{ t('common.close') }}
    </button>
  </div>
</template>
