<script setup lang="ts">
import { ref, onMounted, watch, nextTick, onUnmounted } from 'vue'
import { useRoute } from 'vue-router'
import { X } from 'lucide-vue-next'
import { athletes } from '@/data/awards/awardsConfig'

const route = useRoute()
const lightboxImg = ref<string | null>(null)
const lightboxCaption = ref<string>('')
const isLightboxOpening = ref(false)
const lightboxContentRef = ref<HTMLDivElement | null>(null)

const scrollToHash = () => {
  if (route.hash) {
    const id = route.hash.replace('#', '')
    setTimeout(() => {
      const element = document.getElementById(id)
      if (element) {
        const elementPosition = element.getBoundingClientRect().top + window.scrollY
        const offsetPosition = elementPosition - 90

        window.scrollTo({
          top: offsetPosition,
          behavior: 'smooth'
        })
      }
    }, 300)
  }
}

onMounted(() => {
  scrollToHash()
})

watch(() => route.hash, () => {
  scrollToHash()
})

const getImageCaption = (imgPath: string): string => {
  for (const athlete of athletes) {
    if (athlete.docs.includes(imgPath)) {
      return 'Документ'
    }

    for (const period of athlete.periods) {
      if (period.photos.includes(imgPath)) {
        return period.years
      }
    }
  }
  return ''
}

const openLightbox = async (img: string) => {
  lightboxImg.value = img
  lightboxCaption.value = getImageCaption(img)

  await nextTick()

  setTimeout(() => {
    isLightboxOpening.value = true
  }, 10)
}

const closeLightbox = () => {
  isLightboxOpening.value = false

  setTimeout(() => {
    lightboxImg.value = null
    lightboxCaption.value = ''
  }, 300)
}

const onOverlayClick = (e: MouseEvent) => {
  if (lightboxContentRef.value && !lightboxContentRef.value.contains(e.target as Node)) {
    closeLightbox()
  }
}

const handleKeyDown = (e: KeyboardEvent) => {
  if (e.key === 'Escape' && lightboxImg.value) {
    closeLightbox()
  }
}

onMounted(() => {
  window.addEventListener('keydown', handleKeyDown)
})

onUnmounted(() => {
  window.removeEventListener('keydown', handleKeyDown)
})
</script>

<template>
  <div class="py-5 bg-slate-950 min-h-screen text-white">
    <div class="container py-3 sm:py-4 md:py-5">
      <h1 class="text-3xl sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-black uppercase italic tracking-tighter mb-4 sm:mb-5">
        Наши <span class="text-orange-600">Награды</span>
      </h1>

      <div class="row g-4 sm:g-5 mt-3 sm:mt-5 space-y-20 sm:space-y-40">
        <template v-for="(athlete, index) in athletes" :key="athlete.id">
          <div class="col-12 mt-0" :id="athlete.id">
            <section class="athlete-awards">
              <div class="row g-4 lg:g-5" :class="{ 'flex-lg-row-reverse': index % 2 !== 0 }">
                <div class="col-12 col-lg-5 col-xl-4">
                  <div class="space-y-6 sm:space-y-8">
                    <div class="group relative rounded-2xl sm:rounded-3xl overflow-hidden border-2 border-slate-800 shadow-2xl">
                      <img
                        :src="athlete.mainImage"
                        :alt="athlete.name"
                        class="w-full aspect-[4/5] object-cover transition-transform duration-700 group-hover:scale-105"
                      />
                      <div class="absolute inset-0 bg-gradient-to-t from-slate-950 via-transparent to-transparent"></div>
                      <div class="absolute bottom-6 sm:bottom-10 left-4 sm:left-10">
                        <h2 class="text-2xl sm:text-3xl md:text-4xl font-black uppercase italic tracking-tighter text-white mb-1">{{ athlete.name }}</h2>
                        <div class="text-orange-500 font-bold uppercase tracking-widest text-xs sm:text-sm mb-0">{{ athlete.title }}</div>
                      </div>
                    </div>

                    <div class="space-y-4 sm:space-y-6">
                      <h3 class="text-lg sm:text-xl font-bold uppercase tracking-widest border-l-4 border-orange-600 pl-4 text-slate-300">
                        Документы
                      </h3>
                      <div class="row g-2 sm:g-3">
                        <div v-for="(img, idx) in athlete.docs" :key="idx"
                          @click="openLightbox(img)"
                          class="col-12">
                          <div class="w-full h-40 sm:h-48 md:h-64 lg:h-80 xl:h-96 rounded-lg sm:rounded-xl overflow-hidden bg-slate-900 border border-slate-800 cursor-pointer group">
                            <img :src="img" class="w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all duration-300" />
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="col-12 col-lg-7 col-xl-8">
                  <div class="space-y-8 sm:space-y-12 h-100">
                    <div v-for="period in athlete.periods" :key="period.years" class="space-y-4 sm:space-y-6">
                      <h4 class="text-xl sm:text-2xl font-black uppercase italic tracking-tighter text-orange-600 flex items-center gap-4">
                        {{ period.years }}
                        <div class="h-px flex-grow bg-slate-800"></div>
                      </h4>
                      <div class="row g-2">
                        <div v-for="(img, idx) in period.photos" :key="idx"
                          @click="openLightbox(img)"
                          class="col-4 col-md-2">
                          <div class="aspect-square rounded-lg overflow-hidden bg-slate-900 border border-slate-800 cursor-pointer group">
                            <img :src="img" class="w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all duration-300 group-hover:scale-110" />
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </section>
          </div>

          <div v-if="index < athletes.length - 1" class="col-12 py-4 sm:py-5">
            <div class="h-px w-100 bg-gradient-to-r from-transparent via-slate-800 to-transparent"></div>
          </div>
        </template>
      </div>
    </div>

    <Transition
      enter-active-class="transition duration-300 ease-out"
      enter-from-class="opacity-0"
      enter-to-class="opacity-100"
      leave-active-class="transition duration-300 ease-in"
      leave-from-class="opacity-100"
      leave-to-class="opacity-0"
    >
      <div
        v-if="lightboxImg"
        class="fixed inset-0 z-[100] flex items-center justify-center p-2 sm:p-4 md:p-12"
        :class="{
          'bg-slate-950/95 backdrop-blur-sm': true
        }"
        @click="onOverlayClick"
      >
        <div
          ref="lightboxContentRef"
          class="relative max-w-7xl w-full flex flex-col items-center"
          :class="{
            'scale-100 opacity-100': isLightboxOpening,
            'scale-95 opacity-0': !isLightboxOpening
          }"
          :style="{
            transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)'
          }"
        >
          <button
            @click="closeLightbox"
            class="absolute -top-8 sm:-top-12 right-0 text-white hover:text-orange-500 transition-colors border-0 bg-transparent z-10"
            :class="{
              'scale-100 opacity-100': isLightboxOpening,
              'scale-50 opacity-0': !isLightboxOpening
            }"
            :style="{
              transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.1s'
            }"
          >
            <X :size="28" class="sm:w-[40px] sm:h-[40px]" />
          </button>

          <img
            :src="lightboxImg"
            class="max-w-full max-h-[85vh] object-contain shadow-2xl border border-slate-800 rounded-lg"
            :class="{
              'scale-100 opacity-100': isLightboxOpening,
              'scale-95 opacity-0': !isLightboxOpening
            }"
            :style="{
              transition: 'all 0.4s cubic-bezier(0.4, 0, 0.2, 1)'
            }"
          />

          <div
            v-if="lightboxCaption"
            class="absolute -bottom-8 sm:-bottom-12 left-1/2 -translate-x-1/2 px-4 sm:px-6 py-1 sm:py-2 bg-slate-900/90 backdrop-blur-sm border border-slate-800 rounded-full text-white text-xs sm:text-sm font-medium"
            :class="{
              'translate-y-0 opacity-100': isLightboxOpening,
              'translate-y-4 opacity-0': !isLightboxOpening
            }"
            :style="{
              transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.15s'
            }"
          >
            {{ lightboxCaption }}
          </div>
        </div>
      </div>
    </Transition>
  </div>
</template>
