<script setup lang="ts">
import { ref, computed, onMounted, watch } from 'vue'
import { useRoute } from 'vue-router'
import { useWordpress } from '@/composables/useWordpress'
import { tabs, useTrainingMain } from '@/data/training/trainingMain'
import { faqs, useTrainingFaq } from '@/data/training/trainingFaq'
import { Instagram, Plus } from 'lucide-vue-next'

const route = useRoute()
const { pageContent, loading, fetchPage } = useWordpress()
const { getTabById } = useTrainingMain()
const { getFaqs } = useTrainingFaq()

const getSavedTab = (): string => {
  const queryTab = route.query.tab as string
  if (queryTab && tabs.value.find(t => t.id === queryTab)) {
    return queryTab
  }

  const savedTab = sessionStorage.getItem('trainingActiveTab')
  if (savedTab && tabs.value.find(t => t.id === savedTab)) {
    return savedTab
  }

  return 'supplements'
}

const activeTab = ref(getSavedTab())

watch(activeTab, (newTab) => {
  sessionStorage.setItem('trainingActiveTab', newTab)
  fetchPage(newTab)
})

onMounted(() => {
  fetchPage(activeTab.value)
})

const currentTab = computed(() => getTabById(activeTab.value))
</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 mb-4 sm:mb-5 overflow-auto pb-2 sm:pb-3">
        <div class="col-12 flex flex-wrap gap-2 sm:gap-3">
          <button
            v-for="tab in tabs"
            :key="tab.id"
            @click="activeTab = tab.id"
            class="px-4 sm:px-6 mb-3 md:px-8 py-2 sm:py-3 rounded-full font-bold uppercase tracking-widest text-xs sm:text-sm transition-all whitespace-nowrap border-0"
            :class="activeTab === tab.id ? 'bg-orange-600 text-white shadow-lg shadow-orange-950/50' : 'bg-slate-900 text-slate-400 hover:bg-slate-800'"
          >
            {{ tab.label }}
          </button>
        </div>
      </div>

      <div class="row g-4 sm:g-5 align-items-start">
        <div class="col-12 col-lg-8 animate-in fade-in slide-in-from-bottom-4 duration-500">
          <div class="bg-slate-900 p-5 sm:p-6 md:p-8 rounded-2xl sm:rounded-3xl border border-slate-800">
            <h2 class="text-2xl sm:text-3xl font-black uppercase italic tracking-tighter mb-3 sm:mb-4 text-orange-500">
              {{ currentTab?.label }}
            </h2>
            <div class="prose prose-invert prose-slate max-w-none">
              <!-- Content from WordPress -->
              <div v-if="loading" class="animate-pulse space-y-3 sm:space-y-4">
                <div class="h-3 sm:h-4 bg-slate-800 rounded w-75"></div>
                <div class="h-3 sm:h-4 bg-slate-800 rounded w-50"></div>
                <div class="h-3 sm:h-4 bg-slate-800 rounded w-80"></div>
              </div>
              <div v-else-if="pageContent" v-html="pageContent.content.rendered" class="text-slate-300 text-base sm:text-lg leading-relaxed mb-6 sm:mb-8"></div>
              <div v-else class="text-slate-300 text-base sm:text-lg leading-relaxed mb-6 sm:mb-8">
                {{ currentTab?.content }}
              </div>

              <div v-if="currentTab?.items" class="mt-6 sm:mt-8 space-y-4 sm:space-y-6">
                <router-link v-for="(item, idx) in currentTab.items" :key="idx"
                  :to="'/training/' + item.slug"
                  class="border-l-4 border-orange-600 pl-4 sm:pl-6 py-1 sm:py-2 bg-slate-800/50 rounded-r-xl block text-decoration-none group transition-all hover:bg-slate-800"
                >
                  <h4 class="font-bold text-white mb-1 sm:mb-2 uppercase tracking-tight group-hover:text-orange-500 transition-colors text-sm sm:text-base">{{ item.title }}</h4>
                  <p class="text-slate-400 text-xs sm:text-sm mb-0">{{ item.desc }}</p>
                </router-link>
              </div>
            </div>
          </div>
        </div>

        <div class="col-12 col-lg-4">
          <div class="row g-3 sm:g-4">
            <div class="col-12">
              <div class="bg-slate-900 p-5 sm:p-6 md:p-8 rounded-2xl sm:rounded-3xl border border-slate-800 text-white">
                <h3 class="text-lg sm:text-xl font-bold uppercase mb-3 sm:mb-4">Частые вопросы</h3>
                <div class="space-y-3 sm:space-y-4">
                  <details v-for="q in faqs" :key="q.q" class="group">
                    <summary class="list-none flex justify-between items-center cursor-pointer font-semibold text-sm sm:text-base text-slate-300 group-hover:text-orange-500 transition-colors">
                      {{ q.q }}
                      <Plus :size="14" class="sm:w-4 sm:h-4 group-open:rotate-45 transition-transform" />
                    </summary>
                    <p class="mt-3 sm:mt-4 text-slate-500 text-xs sm:text-sm leading-relaxed mb-0">{{ q.a }}</p>
                  </details>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
