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

const { searchParams } = Astro.url;
const page = parseInt(searchParams.get('page') || '1');

// Fetch all active vendors
const vendorsRes = await fetch(
  `${import.meta.env.PUBLIC_SUPABASE_URL}/rest/v1/vendor_profiles?select=*,user:users(name)&status=eq.active&order=created_at.desc`,
  { headers: { 'apikey': import.meta.env.PUBLIC_SUPABASE_ANON_KEY } }
);
const vendors = await vendorsRes.json();
---

<Layout title="ร้านค้าทั้งหมด">
  <Header />
  
  <div class="container mx-auto px-4 py-8">
    <div class="text-center mb-12">
      <h1 class="text-3xl font-bold mb-4">ร้านค้าทั้งหมด</h1>
      <p class="text-gray-600 max-w-2xl mx-auto">
        รวบรวมร้านค้าคุณภาพจากผู้ขายทั่วประเทศ ค้นหาร้านที่คุณสนใจและช้อปได้เลย
      </p>
    </div>
    
    {vendors && vendors.length > 0 ? (
      <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
        {vendors.map(vendor => (
          <a href={`/vendors/${vendor.store_slug}`} class="bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-lg transition-shadow group">
            <div class="aspect-[3/1] bg-gradient-to-r from-blue-500 to-purple-500 relative">
              <div class="absolute inset-0 flex items-center justify-center">
                <div class="w-20 h-20 bg-white rounded-full flex items-center justify-center shadow-lg">
                  {vendor.logo ? (
                    <img src={vendor.logo} alt="" class="w-16 h-16 rounded-full object-cover" />
                  ) : (
                    <span class="text-3xl font-bold text-blue-600">{vendor.store_name?.charAt(0)}</span>
                  )}
                </div>
              </div>
            </div>
            <div class="p-6 text-center">
              <h3 class="font-bold text-lg group-hover:text-blue-600 transition-colors">
                {vendor.store_name}
              </h3>
              {vendor.description && (
                <p class="text-gray-500 text-sm mt-2 line-clamp-2">{vendor.description}</p>
              )}
              <div class="flex items-center justify-center gap-4 mt-4 text-sm text-gray-500">
                <span class="flex items-center gap-1">
                  <svg class="w-4 h-4" 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>
                  {vendor.product_count || 0} สินค้า
                </span>
              </div>
            </div>
          </a>
        ))}
      </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="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
          </svg>
        </div>
        <p class="text-gray-500 text-lg mb-4">ยังไม่มีร้านค้า</p>
      </div>
    )}
  </div>
  
  <Footer />
  <CartDrawer client:load />
  <CartBadge client:load />
</Layout>

<style>
  .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
</style>
