<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import { useWordpress } from '@/composables/useWordpress'
import { useTrainingDetail } from '@/data/training/trainingDetail'
import { tabs, type TabItem } from '@/data/training/trainingMain'
import { Plus } from 'lucide-vue-next'

const route = useRoute()
const slug = computed(() => route.params.slug as string)
const { pageContent, loading, fetchPage } = useWordpress()
const { getDetailBySlug } = useTrainingDetail()

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

const activeTabId = ref(getActiveTabFromSession())
const currentTab = computed(() => tabs.value.find(t => t.id === activeTabId.value))
const relatedArticles = computed<TabItem[]>(() => {
  if (!currentTab.value) return []
  return currentTab.value.items.filter(item => item.slug !== slug.value)
})

const detail = computed(() => getDetailBySlug(slug.value))
const title = computed(() => detail.value.title)
const staticDescription = computed(() => detail.value.content)

onMounted(() => {
  fetchPage(slug.value)

  const queryTab = route.query.tab as string
  if (queryTab && tabs.value.find(t => t.id === queryTab)) {
    activeTabId.value = queryTab
  }
})
</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">
      <nav aria-label="breadcrumb" class="mb-4 sm:mb-5">
        <ol class="breadcrumb p-0 m-0 bg-transparent">
          <li class="breadcrumb-item">
            <router-link to="/training"
              class="text-orange-500 text-decoration-none uppercase font-bold text-xs tracking-widest">
              Тренинг
            </router-link>
          </li>
          <li class="breadcrumb-item active text-slate-500 uppercase font-bold text-xs tracking-widest"
            aria-current="page">
            {{ title }}
          </li>
        </ol>
      </nav>

      <div class="row g-4 sm:g-5">
        <div class="col-12 col-lg-8">
          <h1 class="text-3xl sm:text-4xl md:text-5xl font-black uppercase italic tracking-tighter mb-4 sm:mb-5">
            {{ title.split(' ')[0] }} <span class="text-orange-600">{{ title.split(' ').slice(1).join(' ') }}</span>
          </h1>
          <div class="bg-slate-900 p-4 sm:p-5 rounded-2xl sm:rounded-3xl border border-slate-800">
            <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="prose prose-invert prose-sm sm:prose-base lg:prose-lg max-w-none text-slate-300"></div>
            <div v-else class="prose prose-invert prose-sm sm:prose-base lg:prose-lg max-w-none text-slate-300">
              <div v-if="detail.image" class="mb-4 sm:mb-6">
                <img :src="detail.image" :alt="detail.title" class="w-full h-auto rounded-xl sm:rounded-2xl object-cover max-h-100">
              </div>
              <div v-if="detail.content" class="training-content text-base sm:text-lg lg:text-xl leading-relaxed" v-html="detail.content"></div>
            </div>
          </div>
        </div>

        <div class="col-12 col-lg-4">
          <div class="sticky-sidebar">
            <div class="row g-3 sm:g-4">
              <div v-if="relatedArticles.length > 0" class="col-12">
                <div class="bg-slate-900 p-6 sm: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">
                    {{ currentTab?.label }} <span class="text-orange-500"></span>
                  </h3>
                  <div class="space-y-3 sm:space-y-4">
                    <router-link v-for="article in relatedArticles" :key="article.slug"
                      :to="'/training/' + article.slug" class="block group no-underline">
                      <div
                        class="border-l-4 border-orange-600 pl-3 sm:pl-4 py-1 sm:py-2 bg-slate-800/30 rounded-r-xl transition-all hover:bg-slate-800">
                        <h4 class="font-bold text-white mb-1 group-hover:text-orange-500 transition-colors text-sm sm:text-base">
                          {{ article.title }}
                        </h4>
                        <p class="text-slate-400 text-xs mb-0 line-clamp-2">{{ article.desc }}</p>
                      </div>
                    </router-link>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.breadcrumb-item+.breadcrumb-item::before {
  content: "/";
  color: #475569;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
</style>
