---
import Layout from '../../../layouts/Layout.astro';
import Header from '../../../components/layout/Header';
import AdminSidebar from '../../../components/admin/AdminSidebar';
import ProductCard from '../../../components/product/ProductCard.astro';

const token = Astro.cookies.get('session')?.value;
if (!token) return Astro.redirect('/login');

// Fetch products
const res = await fetch(new URL('/api/vendors/products', Astro.url).toString(), {
  headers: { 'Authorization': `Bearer ${token}` }
});
const { products } = await res.json();
---

<Layout title="จัดการสินค้า">
  <div class="min-h-screen bg-gray-100">
    <Header />
    <div class="flex">
      <AdminSidebar client:load role="vendor" />
      <main class="flex-1 p-8">
        <div class="flex justify-between items-center mb-8">
          <h1 class="text-2xl font-bold">สินค้าของฉัน</h1>
          <a href="/vendor/products/new" class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors flex items-center gap-2">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
            </svg>
            เพิ่มสินค้าใหม่
          </a>
        </div>
        
        {products && products.length > 0 ? (
          <div class="bg-white rounded-xl shadow-sm overflow-hidden">
            <table class="w-full">
              <thead class="bg-gray-50">
                <tr>
                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">สินค้า</th>
                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ราคา</th>
                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">สต็อก</th>
                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">สถานะ</th>
                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">จัดการ</th>
                </tr>
              </thead>
              <tbody class="divide-y divide-gray-200">
                {products.map(product => (
                  <tr class="hover:bg-gray-50">
                    <td class="px-6 py-4">
                      <div class="flex items-center gap-3">
                        <div class="w-12 h-12 bg-gray-100 rounded-lg overflow-hidden flex-shrink-0">
                          <img src={product.images?.[0] || '/placeholder.jpg'} alt="" class="w-full h-full object-cover" />
                        </div>
                        <div>
                          <p class="font-medium text-gray-900">{product.name}</p>
                          <p class="text-sm text-gray-500">{product.category?.name || 'ไม่มีหมวดหมู่'}</p>
                        </div>
                      </div>
                    </td>
                    <td class="px-6 py-4">
                      <span class="font-medium text-gray-900">฿{product.price.toLocaleString()}</span>
                      {product.compare_at_price && (
                        <span class="text-sm text-gray-400 line-through ml-2">฿{product.compare_at_price.toLocaleString()}</span>
                      )}
                    </td>
                    <td class="px-6 py-4">
                      <span class={`${
                        product.inventory === 0 ? 'text-red-600' :
                        product.inventory <= 5 ? 'text-orange-600' :
                        'text-gray-900'
                      }`}>
                        {product.inventory}
                      </span>
                    </td>
                    <td class="px-6 py-4">
                      <span class={`px-2 py-1 rounded-full text-xs font-medium ${
                        product.status === 'active' ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-700'
                      }`}>
                        {product.status === 'active' ? 'เผยแพร่' : 'ฉบับร่าง'}
                      </span>
                    </td>
                    <td class="px-6 py-4">
                      <div class="flex items-center gap-3">
                        <a href={`/vendor/products/${product.id}/edit`} class="text-blue-600 hover:text-blue-800 font-medium">แก้ไข</a>
                        <a href={`/products/${product.slug}`} target="_blank" class="text-gray-500 hover:text-gray-700">
                          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
                          </svg>
                        </a>
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        ) : (
          <div class="text-center py-20 bg-white rounded-xl">
            <div class="w-20 h-20 mx-auto mb-4 bg-gray-100 rounded-full flex items-center justify-center">
              <svg class="w-10 h-10 text-gray-400" 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>
            </div>
            <p class="text-gray-500 text-lg mb-4">ยังไม่มีสินค้า</p>
            <a href="/vendor/products/new" class="inline-block bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors">
              เพิ่มสินค้าใหม่
            </a>
          </div>
        )}
      </main>
    </div>
  </div>
</Layout>
