<template>
  <main class="min-h-screen">
    <!-- 返回按钮 -->
    <div class="fixed top-28 left-4 md:left-8 z-30">
      <NuxtLink
        to="/work"
        class="inline-flex items-center gap-2 px-4 py-2.5 rounded-full bg-white/90 backdrop-blur-sm shadow-lg hover:shadow-xl transition-all duration-300 text-sm font-semibold text-black hover:-translate-x-1"
      >
        <Icon name="ph:arrow-left" class="w-5 h-5" />
        {{ t('work.backToList') }}
      </NuxtLink>
    </div>

    <!-- Hero 大图 -->
    <section class="relative h-[60vh] md:h-[70vh] overflow-hidden">
      <img
        :src="project.image"
        :alt="project.title"
        class="w-full h-full object-cover"
      />
      <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent"></div>
      <div class="absolute bottom-0 left-0 right-0 p-8 md:p-16">
        <div class="max-w-[1200px] mx-auto">
          <div class="flex flex-wrap gap-2 mb-4">
            <span
              v-for="tag in project.tags"
              :key="tag"
              class="px-3 py-1 text-xs md:text-sm bg-white/20 backdrop-blur-sm text-white rounded-full"
            >
              {{ tag }}
            </span>
          </div>
          <h1 class="text-4xl md:text-6xl lg:text-7xl font-bold text-white mb-4 tracking-tight">
            {{ project.title }}
          </h1>
          <p class="text-lg md:text-xl text-white/80 max-w-2xl">
            {{ project.description }}
          </p>
        </div>
      </div>
    </section>

    <!-- 项目信息 -->
    <section class="max-w-[1200px] mx-auto px-6 md:px-10 py-16 md:py-24">
      <div class="grid grid-cols-1 lg:grid-cols-3 gap-12 lg:gap-16">
        <!-- 左侧：项目详情 -->
        <div class="lg:col-span-2 space-y-12">
          <div>
            <h2 class="text-2xl md:text-3xl font-bold text-black mb-6">{{ t('work.detail.overview') }}</h2>
            <p class="text-gray-700 text-base md:text-lg leading-relaxed">
              {{ t(`work.detail.items.${slug}.overview`) }}
            </p>
          </div>

          <div>
            <h2 class="text-2xl md:text-3xl font-bold text-black mb-6">{{ t('work.detail.challenge') }}</h2>
            <p class="text-gray-700 text-base md:text-lg leading-relaxed">
              {{ t(`work.detail.items.${slug}.challenge`) }}
            </p>
          </div>

          <div>
            <h2 class="text-2xl md:text-3xl font-bold text-black mb-6">{{ t('work.detail.solution') }}</h2>
            <p class="text-gray-700 text-base md:text-lg leading-relaxed">
              {{ t(`work.detail.items.${slug}.solution`) }}
            </p>
          </div>

          <!-- 项目截图 -->
          <div class="space-y-6">
            <h2 class="text-2xl md:text-3xl font-bold text-black">{{ t('work.detail.gallery') }}</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div
                v-for="(img, index) in project.gallery"
                :key="index"
                class="rounded-2xl overflow-hidden shadow-lg hover:shadow-2xl transition-shadow duration-300"
              >
                <img :src="img" :alt="`${project.title} screenshot ${index + 1}`" class="w-full h-auto" />
              </div>
            </div>
          </div>
        </div>

        <!-- 右侧：项目信息卡片 -->
        <div class="space-y-8">
          <div class="bg-gray-50 rounded-2xl p-6 md:p-8 sticky top-32">
            <h3 class="text-lg font-bold text-black mb-6">{{ t('work.detail.projectInfo') }}</h3>

            <div class="space-y-5">
              <div>
                <p class="text-sm text-gray-500 mb-1">{{ t('work.detail.client') }}</p>
                <p class="text-base font-semibold text-black">{{ t(`work.detail.items.${slug}.client`) }}</p>
              </div>
              <div>
                <p class="text-sm text-gray-500 mb-1">{{ t('work.detail.year') }}</p>
                <p class="text-base font-semibold text-black">{{ project.year }}</p>
              </div>
              <div>
                <p class="text-sm text-gray-500 mb-1">{{ t('work.detail.duration') }}</p>
                <p class="text-base font-semibold text-black">{{ t(`work.detail.items.${slug}.duration`) }}</p>
              </div>
              <div>
                <p class="text-sm text-gray-500 mb-1">{{ t('work.detail.services') }}</p>
                <div class="flex flex-wrap gap-2 mt-2">
                  <span
                    v-for="tag in project.tags"
                    :key="tag"
                    class="px-3 py-1 text-xs bg-black text-white rounded-full"
                  >
                    {{ tag }}
                  </span>
                </div>
              </div>
            </div>

            <!-- 访问项目按钮 -->
            <a
              v-if="project.url"
              :href="project.url"
              target="_blank"
              rel="noopener noreferrer"
              class="mt-8 w-full inline-flex items-center justify-center gap-2 px-6 py-3.5 rounded-full bg-black text-white font-semibold hover:bg-gray-800 transition-colors duration-300"
            >
              {{ t('work.detail.visitProject') }}
              <Icon name="ph:arrow-up-right" class="w-5 h-5" />
            </a>
          </div>
        </div>
      </div>
    </section>

    <!-- 相关项目 -->
    <section class="bg-gray-50 py-16 md:py-24">
      <div class="max-w-[1200px] mx-auto px-6 md:px-10">
        <h2 class="text-2xl md:text-3xl font-bold text-black mb-10 text-center">{{ t('work.detail.relatedProjects') }}</h2>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
          <NuxtLink
            v-for="related in relatedProjects"
            :key="related.id"
            :to="`/work/${related.id}`"
            class="group block rounded-2xl overflow-hidden bg-white shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-1"
          >
            <div class="relative aspect-[4/3] overflow-hidden">
              <img :src="related.image" :alt="related.title" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105" />
            </div>
            <div class="p-5">
              <h3 class="text-lg font-bold text-black group-hover:text-gray-600 transition-colors">{{ related.title }}</h3>
              <p class="text-sm text-gray-500 mt-1">{{ related.tags[0] }}</p>
            </div>
          </NuxtLink>
        </div>
      </div>
    </section>
  </main>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { useSeoMeta, createError } from '#imports'

const { t } = useI18n()
const route = useRoute()
const slug = route.params.slug as string

interface WorkItem {
  id: string
  title: string
  description: string
  image: string
  tags: string[]
  category: string
  year: string
  url?: string
  gallery: string[]
}

const workData: Record<string, WorkItem> = {
  'forma-digital': {
    id: 'forma-digital',
    title: 'Forma Digital',
    description: 'A modern e-commerce platform with seamless user experience and dynamic product showcases.',
    image: 'https://picsum.photos/id/201/1200/800',
    tags: ['Web Design', 'E-commerce', 'React'],
    category: 'webDesign',
    year: '2026',
    url: '#',
    gallery: [
      'https://picsum.photos/id/201/800/600',
      'https://picsum.photos/id/202/800/600',
      'https://picsum.photos/id/203/800/600',
      'https://picsum.photos/id/204/800/600',
    ]
  },
  'one-step': {
    id: 'one-step',
    title: 'One Step',
    description: 'Brand identity and marketing campaign for a fitness app focused on sustainable habits.',
    image: 'https://picsum.photos/id/180/1200/800',
    tags: ['Branding', 'Marketing', 'UI/UX'],
    category: 'branding',
    year: '2024',
    gallery: [
      'https://picsum.photos/id/180/800/600',
      'https://picsum.photos/id/181/800/600',
      'https://picsum.photos/id/182/800/600',
      'https://picsum.photos/id/183/800/600',
    ]
  },
  'nero-vision': {
    id: 'nero-vision',
    title: 'Nero Vision',
    description: 'Full-stack web application for creative professionals to manage their portfolios.',
    image: 'https://picsum.photos/id/119/1200/800',
    tags: ['Development', 'Vue.js', 'Node.js'],
    category: 'development',
    year: '2025',
    gallery: [
      'https://picsum.photos/id/119/800/600',
      'https://picsum.photos/id/120/800/600',
      'https://picsum.photos/id/121/800/600',
      'https://picsum.photos/id/122/800/600',
    ]
  },
  'bold-moves': {
    id: 'bold-moves',
    title: 'Bold Moves',
    description: 'Interactive website showcasing innovative architectural designs with 3D visualizations.',
    image: 'https://picsum.photos/id/164/1200/800',
    tags: ['Web Design', '3D', 'Three.js'],
    category: 'webDesign',
    year: '2024',
    gallery: [
      'https://picsum.photos/id/164/800/600',
      'https://picsum.photos/id/165/800/600',
      'https://picsum.photos/id/166/800/600',
      'https://picsum.photos/id/167/800/600',
    ]
  },
  'echo-labs': {
    id: 'echo-labs',
    title: 'Echo Labs',
    description: 'Corporate branding and visual identity for a tech startup in the AI space.',
    image: 'https://picsum.photos/id/101/1200/800',
    tags: ['Branding', 'Visual Identity', 'Corporate'],
    category: 'branding',
    year: '2025',
    gallery: [
      'https://picsum.photos/id/101/800/600',
      'https://picsum.photos/id/102/800/600',
      'https://picsum.photos/id/103/800/600',
      'https://picsum.photos/id/104/800/600',
    ]
  },
  'flux-api': {
    id: 'flux-api',
    title: 'Flux API',
    description: 'Scalable REST API with comprehensive documentation and developer tools.',
    image: 'https://picsum.photos/id/326/1200/800',
    tags: ['Development', 'API', 'Python'],
    category: 'development',
    year: '2025',
    gallery: [
      'https://picsum.photos/id/326/800/600',
      'https://picsum.photos/id/327/800/600',
      'https://picsum.photos/id/328/800/600',
      'https://picsum.photos/id/329/800/600',
    ]
  }
}

const project = workData[slug]

if (!project) {
  throw createError({ statusCode: 404, statusMessage: 'Project not found' })
}

const relatedProjects = computed(() => {
  return Object.values(workData)
    .filter(p => p.id !== slug)
    .slice(0, 3)
})

useSeoMeta({
  title: () => `${project.title} - ${t('work.title')}`,
  description: () => project.description,
})
</script>
