<template>
  <div class="project-detail">
    <div class="back-button">
      <NuxtLink :to="navigationItems.find((item: any) => item.finder === 'projects')?.path" class="back-link">
        <span>←</span> {{ TEXTS.COMMON.BACK_TO_PROJECTS }}
      </NuxtLink>
    </div>
    <div v-if="isLoading" class="loading">
      <div class="loading-spinner"></div>
      <p>{{ TEXTS.COMMON.LOADING }}</p>
    </div>
    <div v-else-if="currentProject" class="project-content">
      <div class="project-header">
        <h1>{{ currentProject.title }}</h1>
        <div class="project-technologies">
          <span v-for="tech in currentProject.technologies" :key="tech" class="tech-tag">
            {{ tech }}
          </span>
        </div>
      </div>
      <div class="project-image">
        <NuxtImg v-if="projectImage" :src="projectImage" :alt="currentProject.title" loading="lazy" @error="handleImageError" :placeholder="true" placeholder-class="image-placeholder" />
      </div>
      <div class="project-description">
        <h2>{{ TEXTS.PROJECTS.DESCRIPTION.TITLE }}</h2>
        <p>{{ currentProject.longDescription || currentProject.description }}</p>
      </div>
      <div class="project-features">
        <h2>{{ TEXTS.PROJECTS.DESCRIPTION.FEATURES }}</h2>
        <ul>
          <li v-for="feature in currentProject.features" :key="feature">
            {{ feature }}
          </li>
        </ul>
      </div>
      <div class="project-resources">
        <h2>{{ TEXTS.PROJECTS.DESCRIPTION.RESOURCES }}</h2>
        <div class="resources-grid">
          <a v-if="currentProject.github" :href="currentProject.github" target="_blank" rel="noopener noreferrer" class="resource-link">
            <NuxtImg v-if="projectResources.github?.icon" :src="projectResources.github?.icon" :alt="TEXTS.PROJECTS.RESOURCES.GITHUB" class="resource-icon" @error="handleIconError" :placeholder="true" placeholder-class="icon-placeholder" />
            <span>{{ TEXTS.PROJECTS.RESOURCES.GITHUB }}</span>
          </a>
          <a v-if="currentProject.demo" :href="currentProject.demo" target="_blank" rel="noopener noreferrer" class="resource-link" >
            <NuxtImg v-if="projectResources.demo?.icon" :src="projectResources.demo?.icon" :alt="TEXTS.PROJECTS.RESOURCES.DEMO" class="resource-icon" @error="handleIconError" :placeholder="true" placeholder-class="icon-placeholder" />
            <span>{{ TEXTS.PROJECTS.RESOURCES.DEMO }}</span>
          </a>
          <NuxtLink :to="`/projects/${currentProject.id}/docs`" class="resource-link">
            <NuxtImg v-if="projectResources.documentation?.icon" :src="projectResources.documentation?.icon" :alt="TEXTS.PROJECTS.RESOURCES.DOCUMENTATION" class="resource-icon" @error="handleIconError" :placeholder="true" placeholder-class="icon-placeholder" />
            <span>{{ TEXTS.PROJECTS.RESOURCES.DOCUMENTATION }}</span>
          </NuxtLink>
          <a v-if="currentProject.youtube" :href="currentProject.youtube" target="_blank" rel="noopener noreferrer" class="resource-link" >
            <NuxtImg v-if="projectResources.youtube?.icon" :src="projectResources.youtube?.icon" :alt="TEXTS.PROJECTS.RESOURCES.YOUTUBE" class="resource-icon" @error="handleIconError" :placeholder="true" placeholder-class="icon-placeholder" />
            <span>{{ TEXTS.PROJECTS.RESOURCES.YOUTUBE }}</span>
          </a>
        </div>
      </div>
    </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 { useProjectDetail } from '~/composables/useProjectDetail';
import { TEXTS } from '~/config/content';
import { navigationItems } from '~/config/navigation';

const {
  currentProject,
  projectImage,
  projectResources,
  isLoading,
  handleImageError,
  handleIconError
} = useProjectDetail();
</script>

<style scoped>
@import '~/assets/css/pages/project-detail.css';
</style>
