---
import Layout from '../../layouts/Layout.astro';
import Header from '../../components/layout/Header';
import Footer from '../../components/layout/Footer';
import ProductCard from '../../components/product/ProductCard.astro';
import CartDrawer from '../../components/cart/CartDrawer';
import CartBadge from '../../components/cart/CartBadge';

const { slug } = Astro.params;

// Fetch vendor
const vendorRes = await fetch(
  `${import.meta.env.PUBLIC_SUPABASE_URL}/rest/v1/vendor_profiles?select=*,user:users(name,email)&store_slug=eq.${slug}&status=eq.active`,
  { headers: { 'apikey': import.meta.env.PUBLIC_SUPABASE_ANON_KEY } }
);
const { data: vendors } = await vendorRes.json();
const vendor = vendors?.[0];

if (!vendor) {
  return Astro.redirect('/404');
}

// Fetch vendor products
const productsRes = await fetch(
  `${import.meta.env.PUBLIC_SUPABASE_URL}/rest/v1/products?select=*,category:categories(name,slug)&vendor_id=eq.${vendor.id}&status=eq.active&order=created_at.desc`,
  { headers: { 'apikey': import.meta.env.PUBLIC_SUPABASE_ANON_KEY } }
);
const products = await productsRes.json();
---

<Layout title={`ร้าน ${vendor.store_name}`}>
  <Header />
  
  <!-- Store Banner -->
  <div class="bg-gradient-to-r from-blue-600 to-purple-600 text-white py-16">
    <div class="container mx-auto px-4">
      <div class="flex flex-col md:flex-row items-center gap-6">
        <div class="w-24 h-24 bg-white rounded-full flex items-center justify-center shadow-lg">
          {vendor.logo ? (
            <img src={vendor.logo} alt="" class="w-20 h-20 rounded-full object-cover" />
          ) : (
            <span class="text-4xl font-bold text-blue-600">{vendor.store_name?.charAt(0)}</span>
          )}
        </div>
        <div class="text-center md:text-left">
          <h1 class="text-3xl font-bold mb-2">{vendor.store_name}</h1>
          {vendor.description && (
            <p class="text-blue-100 mb-4 max-w-2xl">{vendor.description}</p>
          )}
          <div class="flex items-center justify-center md:justify-start gap-6 text-sm">
            <span class="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="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
              </svg>
              {products.length} สินค้า
            </span>
            <span class="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="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
              </svg>
              เข้าร่วม {new Date(vendor.created_at).toLocaleDateString('th-TH', { month: 'short', year: 'numeric' })}
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <div class="container mx-auto px-4 py-8">
    <!-- Products -->
    <div class="flex justify-between items-center mb-8">
      <h2 class="text-2xl font-bold">สินค้าจากร้านนี้</h2>
      <span class="text-gray-500">{products.length} รายการ</span>
    </div>
    
    {products.length > 0 ? (
      <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
        {products.map((product, index) => (
          <ProductCard product={product} index={index} />
        ))}
      </div>
    ) : (
      <div class="text-center py-20 bg-white rounded-xl">
        <p class="text-gray-500">ร้านนี้ยังไม่มีสินค้า</p>
      </div>
    )}
    
    <!-- Contact Store -->
    <div class="mt-12 bg-gray-50 rounded-xl p-8 text-center">
      <h3 class="font-bold text-lg mb-4">ติดต่อร้านค้า</h3>
      {vendor.user?.email ? (
        <a 
          href={`mailto:${vendor.user.email}`} 
          class="inline-flex items-center gap-2 bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition-colors"
        >
          <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="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
          </svg>
          ส่งอีเมล
        </a>
      ) : (
        <p class="text-gray-500">ไม่มีข้อมูลติดต่อ</p>
      )}
    </div>
  </div>
  
  <Footer />
  <CartDrawer client:load />
  <CartBadge client:load />
</Layout>
