<script setup lang="ts">
import { computed, ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { anatomyInformation } from '@/data/anatomy/anatomyInformation'
import { tabs } from '@/data/training/trainingMain'

const route = useRoute()
const slug = computed(() => route.params.slug as string)

const detail = computed(() => {
  return anatomyInformation[slug.value] || {
    title: 'Раздел в разработке',
    content: '<p>Информация временно отсутствует. Раздел находится в стадии наполнения.</p>'
  }
})

const title = computed(() => detail.value.title)
const randomArticles = ref<Array<{ title: string; desc: string; slug: string }>>([])

const getRandomArticles = (count: number = 3) => {
  const allArticles: Array<{ title: string; desc: string; slug: string; categoryId: string }> = []

  tabs.value.forEach(tab => {
    tab.items.forEach(item => {
      allArticles.push({
        ...item,
        categoryId: tab.id
      })
    })
  })

  const shuffled = [...allArticles].sort(() => 0.5 - Math.random())
  return shuffled.slice(0, count)
}

onMounted(() => {
  randomArticles.value = getRandomArticles(3)
})
</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="/anatomy"
              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="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 class="prose prose-invert prose-sm sm:prose-base lg:prose-lg max-w-none text-slate-300" v-html="detail.content"></div>
          </div>
        </div>

        <div class="col-12 col-lg-4">
          <div class="sticky-sidebar">
            <div class="row g-3 sm:g-4">
              <div 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">
                    Статьи
                  </h3>
                  <div class="space-y-3 sm:space-y-4">
                    <router-link v-for="article in randomArticles" :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>
