<template>
  <div class="min-h-screen bg-gradient-to-b from-gray-50 to-gray-100">
    <!-- Navigation -->
    <nav class="bg-white shadow-lg sticky top-0 z-50">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between h-20">
          <div class="flex items-center">
            <router-link to="/" class="flex items-center">
              <img src="https://ksdisp.com/images/logo.jpeg" alt="NAD Health Logo" class="h-12 w-auto object-contain" />
            </router-link>
          </div>
        </div>
      </div>
    </nav>

    <!-- Product Detail -->
    <main class="max-w-7xl mx-auto py-16 px-4 sm:px-6 lg:px-8">
      <div v-if="product" class="bg-white rounded-xl shadow-lg overflow-hidden">
        <div class="p-8">
          <!-- Product Header -->
          <div class="mb-8">
            <h1 class="text-4xl font-bold text-gray-900 mb-4">{{ product.name }}</h1>
            <p class="text-xl text-gray-600">{{ product.description }}</p>
          </div>

          <!-- Product Image -->
          <div class="mb-8">
            <img 
              :src="product.image" 
              :alt="product.name"
              class="w-full max-w-md mx-auto rounded-lg shadow-md"
            />
          </div>

          <!-- Product Details Grid -->
          <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
            <!-- Benefits Section -->
            <div v-if="product.benefits" class="bg-blue-50 p-6 rounded-xl">
              <h2 class="text-2xl font-semibold text-blue-800 mb-4">主要功效</h2>
              <ul class="space-y-3">
                <li 
                  v-for="benefit in product.benefits" 
                  :key="benefit"
                  class="flex items-start"
                >
                  <svg class="h-6 w-6 text-blue-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                  </svg>
                  <span class="text-gray-700">{{ benefit }}</span>
                </li>
              </ul>
            </div>

            <!-- Suitable For Section -->
            <div v-if="product.suitableFor" class="bg-green-50 p-6 rounded-xl">
              <h2 class="text-2xl font-semibold text-green-800 mb-4">適用對象</h2>
              <p class="text-gray-700">{{ product.suitableFor }}</p>
            </div>

            <!-- Features Section -->
            <div v-if="product.features" class="bg-indigo-50 p-6 rounded-xl">
              <h2 class="text-2xl font-semibold text-indigo-800 mb-4">產品特點</h2>
              <ul class="space-y-3">
                <li 
                  v-for="feature in product.features" 
                  :key="feature"
                  class="flex items-start"
                >
                  <svg class="h-6 w-6 text-indigo-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4"/>
                  </svg>
                  <span class="text-gray-700">{{ feature }}</span>
                </li>
              </ul>
            </div>

            <!-- Ingredients Section -->
            <div v-if="product.ingredients" class="bg-purple-50 p-6 rounded-xl">
              <h2 class="text-2xl font-semibold text-purple-800 mb-4">主要成分</h2>
              <ul class="space-y-3">
                <li 
                  v-for="ingredient in product.ingredients" 
                  :key="ingredient"
                  class="flex items-start"
                >
                  <svg class="h-6 w-6 text-purple-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/>
                  </svg>
                  <span class="text-gray-700">{{ ingredient }}</span>
                </li>
              </ul>
            </div>

            <!-- Specifications Section -->
            <div v-if="product.specifications" class="bg-pink-50 p-6 rounded-xl">
              <h2 class="text-2xl font-semibold text-pink-800 mb-4">產品規格</h2>
              <div class="space-y-3">
                <p v-if="product.specifications.netWeight" class="flex items-center text-gray-700">
                  <span class="font-semibold mr-2">淨重：</span>
                  {{ product.specifications.netWeight }}
                </p>
                <p v-if="product.specifications.shelfLife" class="flex items-center text-gray-700">
                  <span class="font-semibold mr-2">保質期：</span>
                  {{ product.specifications.shelfLife }}
                </p>
                <p v-if="product.specifications.storage" class="flex items-center text-gray-700">
                  <span class="font-semibold mr-2">儲存方式：</span>
                  {{ product.specifications.storage }}
                </p>
                <p v-if="product.specifications.origin" class="flex items-center text-gray-700">
                  <span class="font-semibold mr-2">產地：</span>
                  {{ product.specifications.origin }}
                </p>
                <div v-if="product.specifications.certification" class="flex items-center text-gray-700">
                  <span class="font-semibold mr-2">認證：</span>
                  <div class="flex gap-2">
                    <span 
                      v-for="cert in product.specifications.certification" 
                      :key="cert"
                      class="px-2 py-1 bg-white rounded text-sm font-medium"
                    >
                      {{ cert }}
                    </span>
                  </div>
                </div>
              </div>
            </div>

            <!-- Dosage Section -->
            <div v-if="product.dosage" class="bg-yellow-50 p-6 rounded-xl">
              <h2 class="text-2xl font-semibold text-yellow-800 mb-4">使用方法</h2>
              <p class="text-gray-700 mb-4">{{ product.dosage }}</p>
              <div v-if="product.notes" class="bg-yellow-100 p-4 rounded-lg">
                <h3 class="font-semibold text-yellow-800 mb-2">注意事項</h3>
                <p class="text-gray-700">{{ product.notes }}</p>
              </div>
            </div>
          </div>

          <!-- Back Button and Buy Button -->
          <div class="mt-8 flex justify-between items-center">
            <router-link 
              to="/" 
              class="inline-flex items-center text-blue-600 hover:text-blue-800 transition-colors"
            >
              <svg class="h-5 w-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
              </svg>
              返回產品列表
            </router-link>

            <a 
              v-if="product.buyLink"
              :href="product.buyLink"
              target="_blank"
              rel="noopener noreferrer"
              class="inline-flex items-center px-6 py-3 bg-green-600 text-white font-semibold rounded-lg hover:bg-green-700 transition-colors"
            >
              <span>立即購買</span>
              <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
              </svg>
            </a>
          </div>
        </div>
      </div>

      <!-- Error Message -->
      <div v-else class="text-center py-20">
        <h2 class="text-3xl font-bold text-red-600 mb-4">找不到該產品</h2>
        <p class="text-gray-600">您查詢的產品不存在，請返回產品列表。</p>
        <router-link to="/" class="mt-6 inline-block bg-blue-500 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition">
          返回首頁
        </router-link>
      </div>
    </main>

    <!-- Footer -->
    <footer class="bg-gray-800 text-white mt-20">
      <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
          <div>
            <h3 class="text-xl font-semibold mb-4">NAD Health</h3>
            <p class="text-gray-400">專業保健品品牌</p>
          </div>
          <div>
            <h3 class="text-xl font-semibold mb-4">聯絡資訊</h3>
            <p class="text-gray-400">電話：(02) 1234-5678</p>
            <p class="text-gray-400">電子郵件：contact@nadhealth.com</p>
          </div>
          <div>
            <h3 class="text-xl font-semibold mb-4">營業時間</h3>
            <p class="text-gray-400">週一至週五：9:00 - 18:00</p>
            <p class="text-gray-400">週六：10:00 - 16:00</p>
          </div>
        </div>
        <div class="border-t border-gray-700 mt-8 pt-8 text-center">
          <p class="text-gray-400">&copy; 2025 NAD Health. All rights reserved.</p>
        </div>
      </div>
    </footer>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { products } from '../data/products'

// 定義產品資料
const route = useRoute()
const product = ref(null)

// 加載產品
onMounted(() => {
  const productId = route.params.id
  product.value = products.find(p => p.id === productId)

  if (!product.value) {
    console.error(`未找到 ID 為 ${productId} 的產品`)
  }
})
</script>
