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

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

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

<Layout title="แดชบอร์ดผู้ดูแล">
  <div class="min-h-screen bg-gray-100">
    <Header />
    <div class="flex">
      <AdminSidebar client:load role="admin" />
      <main class="flex-1 p-8">
        <h1 class="text-2xl font-bold mb-8">แดชบอร์ดผู้ดูแล</h1>
        
        <!-- Stats Cards -->
        <div class="grid md:grid-cols-4 gap-6 mb-8">
          <div class="bg-white rounded-xl p-6 shadow-sm">
            <div class="flex items-center justify-between">
              <div>
                <p class="text-gray-500 text-sm">ผู้ใช้งานทั้งหมด</p>
                <p class="text-3xl font-bold mt-1">{stats?.totalUsers || 0}</p>
              </div>
              <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
                <svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
                </svg>
              </div>
            </div>
          </div>
          
          <div class="bg-white rounded-xl p-6 shadow-sm">
            <div class="flex items-center justify-between">
              <div>
                <p class="text-gray-500 text-sm">ร้านค้าทั้งหมด</p>
                <p class="text-3xl font-bold mt-1">{stats?.totalVendors || 0}</p>
              </div>
              <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center">
                <svg class="w-6 h-6 text-purple-600" 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>
            </div>
          </div>
          
          <div class="bg-white rounded-xl p-6 shadow-sm">
            <div class="flex items-center justify-between">
              <div>
                <p class="text-gray-500 text-sm">สินค้าทั้งหมด</p>
                <p class="text-3xl font-bold mt-1">{stats?.totalProducts || 0}</p>
              </div>
              <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
                <svg class="w-6 h-6 text-green-600" 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>
            </div>
          </div>
          
          <div class="bg-white rounded-xl p-6 shadow-sm">
            <div class="flex items-center justify-between">
              <div>
                <p class="text-gray-500 text-sm">คำสั่งซื้อทั้งหมด</p>
                <p class="text-3xl font-bold mt-1">{stats?.totalOrders || 0}</p>
              </div>
              <div class="w-12 h-12 bg-orange-100 rounded-lg flex items-center justify-center">
                <svg class="w-6 h-6 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
                </svg>
              </div>
            </div>
          </div>
        </div>
        
        <!-- Quick Links -->
        <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-4">
          <a href="/admin/users" class="bg-white rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow">
            <h3 class="font-bold mb-2">จัดการผู้ใช้งาน</h3>
            <p class="text-gray-500 text-sm">ดูและแก้ไขข้อมูลผู้ใช้งานทั้งหมด</p>
          </a>
          <a href="/admin/vendors" class="bg-white rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow">
            <h3 class="font-bold mb-2">จัดการร้านค้า</h3>
            <p class="text-gray-500 text-sm">อนุมัติและจัดการร้านค้า</p>
          </a>
          <a href="/admin/orders" class="bg-white rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow">
            <h3 class="font-bold mb-2">จัดการคำสั่งซื้อ</h3>
            <p class="text-gray-500 text-sm">ติดตามคำสั่งซื้อทั้งหมด</p>
          </a>
          <a href="/admin/categories" class="bg-white rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow">
            <h3 class="font-bold mb-2">จัดการหมวดหมู่</h3>
            <p class="text-gray-500 text-sm">เพิ่มและแก้ไขหมวดหมู่สินค้า</p>
          </a>
        </div>
      </main>
    </div>
  </div>
</Layout>
