<script setup lang="ts">
import { mapZones } from '~/data/mapZones'

const emit = defineEmits<{
  close: []
  navigate: [route: string]
}>()

const { locale, t } = useI18n()
const router = useRouter()
const route = useRoute()
const progressionStore = useProgressionStore()

function handleZoneSelect(zone: (typeof mapZones)[0]) {
  if (zone.id === 'contact' && !progressionStore.contactUnlocked) {
    return
  }

  const targetRoute = locale.value === 'fr' ? zone.route.fr : zone.route.en
  router.push(targetRoute)
  emit('navigate', targetRoute)
  emit('close')
}

function isVisited(zoneId: string): boolean {
  return zoneId !== 'contact' && progressionStore.visitedSections.includes(zoneId)
}

function isLocked(zoneId: string): boolean {
  return zoneId === 'contact' && !progressionStore.contactUnlocked
}

function isCurrent(zoneId: string): boolean {
  const path = route.path.toLowerCase()

  const routeMap: Record<string, string[]> = {
    projets: ['projets', 'projects'],
    competences: ['competences', 'skills'],
    temoignages: ['temoignages', 'testimonials'],
    parcours: ['parcours', 'journey'],
    contact: ['contact'],
  }

  return routeMap[zoneId]?.some((segment) => path.includes(segment)) ?? false
}
</script>

<template>
  <div class="chemin-libre h-full overflow-y-auto pb-safe">
    <!-- Header avec handle -->
    <div class="sticky top-0 bg-sky-dark-50 pt-4 pb-2 z-10">
      <div class="w-12 h-1 bg-sky-dark-100 rounded-full mx-auto mb-4" />
      <h2 class="text-xl font-ui font-bold text-sky-text text-center mb-4">
        {{ t('cheminLibre.title') }}
      </h2>
    </div>

    <!-- Liste des zones avec ligne de connexion -->
    <div class="relative px-4 pb-8">
      <!-- Ligne de connexion verticale -->
      <div class="absolute left-12 top-8 bottom-8 w-0.5 bg-sky-dark-100" />

      <!-- Zones -->
      <div class="space-y-4 relative z-10">
        <div
          v-for="zone in mapZones"
          :key="zone.id"
          class="relative"
        >
          <!-- Point sur la ligne -->
          <div
            class="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 rounded-full border-2 z-10"
            :class="[
              isVisited(zone.id) ? 'bg-green-400 border-green-400' : '',
              isLocked(zone.id) ? 'bg-gray-500 border-gray-500' : '',
              !isVisited(zone.id) && !isLocked(zone.id) ? 'bg-sky-dark border-sky-accent' : '',
            ]"
          />

          <!-- Card avec padding gauche pour la ligne -->
          <div class="pl-12">
            <ZoneCard
              :zone="zone"
              :is-visited="isVisited(zone.id)"
              :is-locked="isLocked(zone.id)"
              :is-current="isCurrent(zone.id)"
              @select="handleZoneSelect(zone)"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.pb-safe {
  padding-bottom: env(safe-area-inset-bottom, 1rem);
}
</style>
