<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
import { useI18n } from 'vue-i18n'
import type { TableColumn } from '@nuxt/ui'
import { h } from 'vue'

interface Product {
  id: number
  image: string
  name: string
  code: string
  inStock: boolean
  priceFrom: number
  priceTo: number
  count: number
  description: string
  howToUse: string
  productDetails: string
}

const route = useRoute()
const router = useRouter()
const authStore = useAuthStore()
const { t } = useI18n()

// Mock product data (same as ProductsView)
const products = ref<Product[]>([
  { id: 1, image: 'https://picsum.photos/seed/product1/400/400', name: 'Laptop Pro 15', code: 'LP-001', inStock: true, priceFrom: 999, priceTo: 1299, count: 15, description: 'High-performance laptop for professionals', howToUse: 'Open the lid and press the power button', productDetails: '15-inch display, 16GB RAM, 512GB SSD' },
  { id: 2, image: 'https://picsum.photos/seed/product2/400/400', name: 'Wireless Mouse', code: 'WM-002', inStock: true, priceFrom: 29, priceTo: 49, count: 150, description: 'Ergonomic wireless mouse with precision tracking', howToUse: 'Connect via Bluetooth or USB receiver', productDetails: '3000 DPI, 2.4GHz wireless, 12-month battery' },
  { id: 3, image: 'https://picsum.photos/seed/product3/400/400', name: 'Mechanical Keyboard', code: 'MK-003', inStock: true, priceFrom: 89, priceTo: 159, count: 45, description: 'Premium mechanical keyboard with RGB lighting', howToUse: 'Connect via USB-C cable', productDetails: 'Cherry MX switches, RGB backlight, anti-ghosting' },
  { id: 4, image: 'https://picsum.photos/seed/product4/400/400', name: 'USB-C Hub', code: 'UH-004', inStock: false, priceFrom: 39, priceTo: 59, count: 0, description: 'Multi-port USB-C hub for connectivity', howToUse: 'Connect to laptop USB-C port', productDetails: 'HDMI 4K, 3x USB-A, SD card reader, PD 100W' },
  { id: 5, image: 'https://picsum.photos/seed/product5/400/400', name: 'Monitor 27 inch', code: 'MN-005', inStock: true, priceFrom: 299, priceTo: 449, count: 23, description: '27-inch 4K IPS monitor with HDR support', howToUse: 'Connect via HDMI or DisplayPort', productDetails: '3840x2160, 60Hz, HDR400, built-in speakers' },
  { id: 6, image: 'https://picsum.photos/seed/product6/400/400', name: 'Webcam HD', code: 'WC-006', inStock: true, priceFrom: 59, priceTo: 89, count: 67, description: 'Full HD webcam for video conferencing', howToUse: 'Mount on monitor or use tripod stand', productDetails: '1080p 30fps, autofocus, noise-canceling mic' },
  { id: 7, image: 'https://picsum.photos/seed/product7/400/400', name: 'Headphones Wireless', code: 'HW-007', inStock: true, priceFrom: 149, priceTo: 249, count: 89, description: 'Premium wireless headphones with ANC', howToUse: 'Pair via Bluetooth or use included cable', productDetails: '30-hour battery, ANC, 40mm drivers' },
  { id: 8, image: 'https://picsum.photos/seed/product8/400/400', name: 'External SSD 1TB', code: 'ES-008', inStock: true, priceFrom: 109, priceTo: 149, count: 120, description: 'Portable external SSD with fast speeds', howToUse: 'Connect via USB-C cable', productDetails: '1TB, 1050MB/s read, compact design' },
  { id: 9, image: 'https://picsum.photos/seed/product9/400/400', name: 'Desk Lamp LED', code: 'DL-009', inStock: false, priceFrom: 35, priceTo: 55, count: 0, description: 'Adjustable LED desk lamp with multiple brightness levels', howToUse: 'Plug in and touch controls', productDetails: '5 brightness levels, color temperature control, USB port' },
  { id: 10, image: 'https://picsum.photos/seed/product10/400/400', name: 'Cable Organizer', code: 'CO-010', inStock: true, priceFrom: 15, priceTo: 25, count: 200, description: 'Desk cable management solution', howToUse: 'Stick to desk or use clamps', productDetails: '10 slots, adhesive backing,白色' },
])

// Get product from route params
const productId = computed(() => Number(route.params.id))
const product = computed(() => products.value.find(p => p.id === productId.value))

// Active tab for the four buttons
const activeTab = ref<'description' | 'howToUse' | 'productDetails' | 'documents'>('description')

// Mock variants (same structure as products but with variants)
const variants = computed(() => {
  if (!product.value) return []
  // Create mock variants based on the product
  return [
    { ...product.value, id: product.value.id * 10 + 1, name: `${product.value.name} - Standard`, priceFrom: product.value.priceFrom, priceTo: product.value.priceFrom + 50, count: product.value.count },
    { ...product.value, id: product.value.id * 10 + 2, name: `${product.value.name} - Premium`, priceFrom: product.value.priceFrom + 100, priceTo: product.value.priceTo, count: Math.floor(product.value.count / 2) },
    { ...product.value, id: product.value.id * 10 + 3, name: `${product.value.name} - Bundle`, priceFrom: product.value.priceTo + 50, priceTo: product.value.priceTo + 150, count: Math.floor(product.value.count / 3) },
  ]
})

// Pagination for variants table
const page = ref(1)
const pageSize = 5

const totalItems = computed(() => variants.value.length)

const paginatedVariants = computed(() => {
  const start = (page.value - 1) * pageSize
  const end = start + pageSize
  return variants.value.slice(start, end)
})

// Table columns for variants
const columns = computed<TableColumn<any>[]>(() => [
  {
    accessorKey: 'image',
    header: () => h('div', { class: 'text-center' }, t('products.image')),
    cell: ({ row }) => h('img', {
      src: row.getValue('image'),
      alt: 'Product',
      class: 'w-12 h-12 object-cover rounded'
    })
  },
  {
    accessorKey: 'name',
    header: t('products.product_name'),
  },
  {
    accessorKey: 'code',
    header: t('products.product_code'),
  },
  {
    accessorKey: 'inStock',
    header: t('products.in_stock'),
    cell: ({ row }) => {
      const inStock = row.getValue('inStock')
      return h('span', {
        class: inStock ? 'text-green-600 font-medium' : 'text-red-600 font-medium'
      }, inStock ? t('products.yes') : t('products.no'))
    }
  },
  {
    accessorKey: 'price',
    header: t('products.price'),
    cell: ({ row }) => {
      const priceFromVal = row.original.priceFrom
      const priceToVal = row.original.priceTo
      return `$${priceFromVal} - $${priceToVal}`
    }
  },
  {
    accessorKey: 'count',
    header: t('products.count'),
  },
  {
    id: 'actions',
    header: '',
    cell: ({ row }) => h('div', { class: 'flex gap-2' }, [
      h('button', {
        class: 'px-3 py-1.5 text-sm font-medium bg-primary text-white rounded-lg hover:bg-blue-600 transition-colors',
        onClick: () => addToCart(row.original)
      }, t('products.add_to_cart')),
      h('button', {
        class: 'px-3 py-1.5 text-sm font-medium bg-gray-200 dark:dark:hover:bg-(--gray-dark) text-black dark:text-white rounded-lg hover:bg-(--gray) dark:hover:bg-gray-600 transition-colors',
        onClick: () => incrementCount(row.original)
      }, '+')
    ])
  }
])

// Actions
function addToCart(product: Product) {
  console.log('Add to cart:', product)
}

function incrementCount(product: Product) {
  product.count++
}

function goBack() {
  router.push({ name: 'products' })
}
</script>

<template>
  <div class="container">
    <div class="p-6 bg-(--main-light) dark:bg-(--black) min-h-screen font-sans">
      <!-- Back Button -->
      <button 
        @click="goBack"
        class="mb-4 px-4 py-2 text-sm font-medium text-black dark:text-white bg-gray-200 dark:dark:hover:bg-(--gray-dark) rounded-lg hover:bg-(--gray) dark:hover:bg-gray-600 transition-colors"
      >
        ← {{ t('products.back_to_list') }}
      </button>

      <div v-if="!authStore.isAuthenticated" class="mb-4 p-3 bg-yellow-100 text-yellow-700 rounded">
        {{ t('products.login_to_view') }}
      </div>

      <div v-if="authStore.isAuthenticated && product">
        <!-- Product Header: Image and Title -->
        <div class="flex flex-col md:flex-row gap-8 mb-6">
          <!-- Product Image -->
          <div class="w-full md:w-1/3">
            <img 
              :src="product.image" 
              :alt="product.name" 
              class="w-full h-auto rounded-lg shadow-lg object-cover"
            />
          </div>
          
          <!-- Product Info -->
          <div class="w-full md:w-2/3 flex flex-col justify-center">
            <h1 class="text-3xl font-bold mb-4 text-black dark:text-white">{{ product.name }}</h1>
            
            <!-- Description -->
            <p class="text-gray-600 dark:text-gray-300 mb-4">{{ product.description }}</p>
            
            <!-- Product Code -->
            <div class="mb-4">
              <span class="text-sm font-medium text-gray-500 dark:text-gray-400">{{ t('products.product_code') }}: </span>
              <span class="text-lg font-semibold text-black dark:text-white">{{ product.code }}</span>
            </div>
            
            <!-- Price -->
            <div class="mb-4">
              <span class="text-sm font-medium text-gray-500 dark:text-gray-400">{{ t('products.price') }}: </span>
              <span class="text-2xl font-bold text-primary">${{ product.priceFrom }} - ${{ product.priceTo }}</span>
            </div>
            
            <!-- Stock Status -->
            <div class="mb-4">
              <span class="text-sm font-medium text-gray-500 dark:text-gray-400">{{ t('products.in_stock') }}: </span>
              <span :class="product.inStock ? 'text-green-600 font-medium' : 'text-red-600 font-medium'">
                {{ product.inStock ? t('products.yes') : t('products.no') }}
              </span>
              <span v-if="product.inStock" class="ml-2 text-gray-500">({{ product.count }} {{ t('products.available') }})</span>
            </div>
          </div>
        </div>

        <!-- First Divider -->
        <hr class="border-gray-300 dark:border-gray-600 my-6" />

        <!-- Four Buttons -->
        <div class="flex flex-wrap gap-2 mb-6">
          <button 
            @click="activeTab = 'description'"
            :class="[
              'px-4 py-2 text-sm font-medium rounded-lg transition-colors',
              activeTab === 'description' 
                ? 'bg-primary text-white' 
                : 'bg-gray-200 dark:dark:hover:bg-(--gray-dark) text-black dark:text-white hover:bg-(--gray) dark:hover:bg-gray-600'
            ]"
          >
            {{ t('products.description') }}
          </button>
          <button 
            @click="activeTab = 'howToUse'"
            :class="[
              'px-4 py-2 text-sm font-medium rounded-lg transition-colors',
              activeTab === 'howToUse' 
                ? 'bg-primary text-white' 
                : 'bg-gray-200 dark:dark:hover:bg-(--gray-dark) text-black dark:text-white hover:bg-(--gray) dark:hover:bg-gray-600'
            ]"
          >
            {{ t('products.how_to_use') }}
          </button>
          <button 
            @click="activeTab = 'productDetails'"
            :class="[
              'px-4 py-2 text-sm font-medium rounded-lg transition-colors',
              activeTab === 'productDetails' 
                ? 'bg-primary text-white' 
                : 'bg-gray-200 dark:dark:hover:bg-(--gray-dark) text-black dark:text-white hover:bg-(--gray) dark:hover:bg-gray-600'
            ]"
          >
            {{ t('products.product_details') }}
          </button>
          <button 
            @click="activeTab = 'documents'"
            :class="[
              'px-4 py-2 text-sm font-medium rounded-lg transition-colors',
              activeTab === 'documents' 
                ? 'bg-primary text-white' 
                : 'bg-gray-200 dark:dark:hover:bg-(--gray-dark) text-black dark:text-white hover:bg-(--gray) dark:hover:bg-gray-600'
            ]"
          >
            {{ t('products.documents') }}
          </button>
        </div>

        <!-- Tab Content -->
        <div class="mb-6 p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
          <div v-if="activeTab === 'description'" class="text-black dark:text-white">
            <h3 class="text-lg font-semibold mb-2">{{ t('products.description') }}</h3>
            <p>{{ product.description }}</p>
          </div>
          <div v-else-if="activeTab === 'howToUse'" class="text-black dark:text-white">
            <h3 class="text-lg font-semibold mb-2">{{ t('products.how_to_use') }}</h3>
            <p>{{ product.howToUse }}</p>
          </div>
          <div v-else-if="activeTab === 'productDetails'" class="text-black dark:text-white">
            <h3 class="text-lg font-semibold mb-2">{{ t('products.product_details') }}</h3>
            <p>{{ product.productDetails }}</p>
          </div>
          <div v-else-if="activeTab === 'documents'" class="text-black dark:text-white">
            <h3 class="text-lg font-semibold mb-2">{{ t('products.documents') }}</h3>
            <ul class="list-disc list-inside">
              <li><a href="#" class="text-primary hover:underline">User Manual.pdf</a></li>
              <li><a href="#" class="text-primary hover:underline">Technical Specifications.pdf</a></li>
              <li><a href="#" class="text-primary hover:underline">Warranty Information.pdf</a></li>
            </ul>
          </div>
        </div>

        <!-- Second Divider -->
        <hr class="border-gray-300 dark:border-gray-600 my-6" />

        <!-- Product Variants Section -->
        <div>
          <h2 class="text-2xl font-bold mb-4 text-black dark:text-white">{{ t('products.product_variants') }}</h2>
          
          <!-- Variants Table -->
          <div class="border border-(--border-light) dark:border-(--border-dark) rounded overflow-hidden">
            <UTable 
              :data="paginatedVariants" 
              :columns="columns" 
              class="dark:text-white! text-dark" 
            />
          </div>

          <!-- Pagination -->
          <div class="pt-4 flex justify-center items-center dark:text-white! text-dark">
            <UPagination 
              v-model:page="page" 
              :page-count="pageSize" 
              :total="totalItems" 
            />
          </div>
        </div>
      </div>

      <div v-else-if="authStore.isAuthenticated && !product" class="text-center py-10">
        <p class="text-gray-500 dark:text-gray-400">{{ t('products.product_not_found') }}</p>
      </div>
    </div>
  </div>
</template>
