---
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');

// Check admin role
const meRes = await fetch(new URL('/api/auth/me', Astro.url).toString(), {
  headers: { 'Authorization': `Bearer ${token}` }
});
const { user } = await meRes.json();
if (user?.role !== 'admin') return Astro.redirect('/');

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

// Status config
const statusConfig = {
  pending: { label: 'รอชำระเงิน', color: 'bg-yellow-100 text-yellow-700' },
  paid: { label: 'ชำระแล้ว', color: 'bg-blue-100 text-blue-700' },
  shipped: { label: 'จัดส่งแล้ว', color: 'bg-purple-100 text-purple-700' },
  delivered: { label: 'รับสินค้าแล้ว', color: 'bg-green-100 text-green-700' },
  cancelled: { label: 'ยกเลิก', color: 'bg-red-100 text-red-700' }
};
---

<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>
        
        <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">หมายเลข</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">ร้านค้า</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">ลูกค้า</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">ยอดรวม</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">สถานะ</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">วันที่</th>
              </tr>
            </thead>
            <tbody class="divide-y divide-gray-200">
              {orders?.map(order => (
                <tr class="hover:bg-gray-50">
                  <td class="px-6 py-4 font-medium text-blue-600">{order.ref_no}</td>
                  <td class="px-6 py-4">
                    <p>{order.vendor?.store_name || '-'}</p>
                  </td>
                  <td class="px-6 py-4">
                    <p>{order.user?.name || order.shipping_name}</p>
                  </td>
                  <td class="px-6 py-4 font-medium">฿{order.total.toLocaleString()}</td>
                  <td class="px-6 py-4">
                    <span class={`px-2 py-1 rounded-full text-xs font-medium ${statusConfig[order.status]?.color || 'bg-gray-100 text-gray-700'}`}>
                      {statusConfig[order.status]?.label || order.status}
                    </span>
                  </td>
                  <td class="px-6 py-4 text-gray-500">
                    {new Date(order.created_at).toLocaleDateString('th-TH')}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </main>
    </div>
  </div>
</Layout>
