---
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 users
const usersRes = await fetch(new URL('/api/admin/users', Astro.url).toString(), {
  headers: { 'Authorization': `Bearer ${token}` }
});
const { users } = await usersRes.json();

const roleColors = {
  admin: 'bg-purple-100 text-purple-700',
  vendor: 'bg-blue-100 text-blue-700',
  customer: 'bg-gray-100 text-gray-700'
};

const roleLabels = {
  admin: 'ผู้ดูแล',
  vendor: 'ร้านค้า',
  customer: 'ลูกค้า'
};
---

<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">
        <div class="flex justify-between items-center mb-8">
          <h1 class="text-2xl font-bold">ผู้ใช้งานทั้งหมด</h1>
          <button class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors">
            + เพิ่มผู้ดูแล
          </button>
        </div>
        
        <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>
              </tr>
            </thead>
            <tbody class="divide-y divide-gray-200">
              {users?.map(u => (
                <tr class="hover:bg-gray-50">
                  <td class="px-6 py-4">
                    <div class="flex items-center gap-3">
                      <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 font-bold">
                        {u.name?.charAt(0) || 'U'}
                      </div>
                      <span class="font-medium">{u.name || 'ไม่ระบุ'}</span>
                    </div>
                  </td>
                  <td class="px-6 py-4 text-gray-500">{u.email}</td>
                  <td class="px-6 py-4">
                    <span class={`px-2 py-1 rounded-full text-xs font-medium ${roleColors[u.role]}`}>
                      {roleLabels[u.role] || u.role}
                    </span>
                  </td>
                  <td class="px-6 py-4 text-gray-500">
                    {new Date(u.created_at).toLocaleDateString('th-TH')}
                  </td>
                  <td class="px-6 py-4">
                    <button class="text-blue-600 hover:text-blue-800 font-medium mr-3">แก้ไข</button>
                    {u.role !== 'admin' && (
                      <button class="text-red-600 hover:text-red-800 font-medium">ลบ</button>
                    )}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </main>
    </div>
  </div>
</Layout>