<template>
  <div class="project-docs">
    <div class="back-button">
      <NuxtLink :to="`${navigationItems.find((item: any) => item.finder === 'projects')?.path}/${route.params.id}`" class="back-link">
        <span>←</span> {{ TEXTS.COMMON.BACK_TO_PROJECTS }}
      </NuxtLink>
    </div>
    <div class="docs-header">
      <h1>Documentation - {{ project?.title || 'Projet non trouvé' }}</h1>
    </div>

    <div v-if="project" class="docs-container">
      <aside class="docs-sidebar">
        <nav class="docs-nav">
          <ul>
            <li v-for="(resource, index) in project.resources" :key="index">
              <a :href="`#${resource.title.toLowerCase().replace(/\s+/g, '-')}`" class="nav-link">
                {{ resource.title }}
              </a>
            </li>
          </ul>
        </nav>
      </aside>

      <main class="docs-content">
        <div v-for="(resource, index) in project.resources" :key="index" :id="resource.title.toLowerCase().replace(/\s+/g, '-')" class="docs-section">
          <h2>{{ resource.title }}</h2>
          <p>{{ resource.description }}</p>
          <div class="resource-actions">
            <a v-if="resource.link" :href="resource.link" target="_blank" rel="noopener" class="resource-link">
              <span class="link-icon">📄</span>
              Accéder à la ressource
            </a>
          </div>
        </div>
      </main>
    </div>
    <div v-else class="error">
      <h2>{{ TEXTS.COMMON.ERROR.NOT_FOUND }}</h2>
      <p>{{ TEXTS.COMMON.ERROR.PROJECT_NOT_FOUND }}</p>
      <NuxtLink :to="navigationItems.find((item: any) => item.finder === 'projects')?.path" class="back-link">
        {{ TEXTS.COMMON.BACK_TO_PROJECTS }}
      </NuxtLink>
    </div>
  </div>
</template>

<script setup lang="ts">
import { projects } from '~/config/projects'
import { TEXTS } from '~/config/content'
import { navigationItems } from '~/config/navigation'
const route = useRoute()
console.log(route.params.id)
const project = computed(() => {
  const projectId = Number(route.params.id)
  if (isNaN(projectId)) return null
  return projects.find(item => item.id === projectId)
})

onMounted(() => {
  const hash = window.location.hash
  if (hash) {
    const element = document.querySelector(hash)
    if (element) {
      element.scrollIntoView({ behavior: 'smooth' })
    }
  }
})
</script>

<style scoped>
@import '~/assets/css/pages/docs.css';
</style>