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

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

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

// Status colors
const statusColors = {
  pending: 'bg-yellow-100 text-yellow-700',
  paid: 'bg-blue-100 text-blue-700',
  shipped: 'bg-purple-100 text-purple-700',
  delivered: 'bg-green-100 text-green-700',
  cancelled: 'bg-red-100 text-red-700'
};

const statusLabels = {
  pending: 'รอชำระเงิน',
  paid: 'ชำระแล้ว',
  shipped: 'จัดส่งแล้ว',
  delivered: 'รับสินค้าแล้ว',
  cancelled: 'ยกเลิก'
};
---

<Layout title="ประวัติคำสั่งซื้อ">
  <Header />
  
  <div class="container mx-auto px-4 py-8">
    <h1 class="text-2xl font-bold mb-8">คำสั่งซื้อของฉัน</h1>
    
    {orders && orders.length > 0 ? (
      <div class="space-y-4">
        {orders.map(order => (
          <div class="bg-white rounded-xl shadow-sm overflow-hidden">
            <div class="p-6">
              <div class="flex flex-wrap items-center justify-between gap-4 mb-4">
                <div>
                  <p class="text-sm text-gray-500">หมายเลขคำสั่งซื้อ</p>
                  <p class="font-bold text-lg">{order.ref_no}</p>
                </div>
                <div class="text-right">
                  <p class="text-sm text-gray-500">วันที่สั่งซื้อ</p>
                  <p class="font-medium">{new Date(order.created_at).toLocaleDateString('th-TH')}</p>
                </div>
              </div>
              
              <div class="flex flex-wrap items-center justify-between gap-4 pt-4 border-t">
                <div class="flex items-center gap-4">
                  <span class={`px-3 py-1 rounded-full text-sm font-medium ${statusColors[order.status] || 'bg-gray-100 text-gray-700'}`}>
                    {statusLabels[order.status] || order.status}
                  </span>
                  <span class="text-gray-500">{order.items?.length || 0} รายการ</span>
                </div>
                
                <div class="flex items-center gap-4">
                  <span class="text-xl font-bold text-blue-600">
                    ฿{order.total.toLocaleString()}
                  </span>
                  <a 
                    href={`/account/orders/${order.id}`} 
                    class="px-4 py-2 border border-blue-600 text-blue-600 rounded-lg hover:bg-blue-50 transition-colors"
                  >
                    ดูรายละเอียด
                  </a>
                </div>
              </div>
            </div>
          </div>
        ))}
      </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="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>
        <p class="text-gray-500 text-lg mb-4">ยังไม่มีคำสั่งซื้อ</p>
        <a href="/products" class="text-blue-600 hover:underline">เริ่มช้อปเลย</a>
      </div>
    )}
  </div>
  
  <Footer />
</Layout>
