import { db } from "@/lib/db";

export default async function AdminUsersPage() {
  const users = await db.user.findMany({
    include: { team: true },
    orderBy: { createdAt: "desc" },
  });

  return (
    <div>
      <h1 className="text-2xl font-bold mb-6">کاربران</h1>
      <div className="bg-white rounded-2xl shadow overflow-hidden">
        <table className="w-full text-sm">
          <thead className="bg-gray-100 text-gray-600">
            <tr>
              <th className="text-right px-5 py-4">نام</th>
              <th className="text-right px-5 py-4">ایمیل</th>
              <th className="text-right px-5 py-4">نقش</th>
              <th className="text-right px-5 py-4">تیم</th>
              <th className="text-right px-5 py-4">تاریخ ثبت</th>
            </tr>
          </thead>
          <tbody>
            {users.map((u) => (
              <tr key={u.id} className="border-t hover:bg-gray-50 transition">
                <td className="px-5 py-3 font-medium">{u.name ?? "-"}</td>
                <td className="px-5 py-3 text-gray-600">{u.email}</td>
                <td className="px-5 py-3">
                  <span className={`text-xs px-2 py-1 rounded-full font-medium ${
                    u.role === "ADMIN" ? "bg-yellow-100 text-yellow-700" : "bg-gray-100 text-gray-600"
                  }`}>
                    {u.role === "ADMIN" ? "ادمین" : "کاربر"}
                  </span>
                </td>
                <td className="px-5 py-3 text-gray-600">{u.team?.name ?? "-"}</td>
                <td className="px-5 py-3 text-gray-400">{new Date(u.createdAt).toLocaleDateString("fa-IR")}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}