import { db } from "@/lib/db";
import Link from "next/link";
import PositionBadge from "@/components/PositionBadge";
import CardTierSelect from "./CardTierSelect";
import { CARD_TIER_LABELS, getCardTierBadgeClass } from "@/lib/cardTier";

export default async function AdminPlayersPage() {
  const players = await db.player.findMany({
    include: { country: true },
    orderBy: { name: "asc" },
  });

  return (
    <div>
      <div className="flex justify-between items-center mb-6">
        <h1 className="text-2xl font-bold">بازیکنان</h1>
        <Link href="/admin/players/new" className="bg-green-700 text-white px-5 py-2 rounded-xl hover:bg-green-800 transition font-medium">
          + بازیکن جدید
        </Link>
      </div>
      <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>
              <th className="text-right px-5 py-4">کارت</th>
              <th className="text-right px-5 py-4">ویرایش کارت</th>
              <th className="px-5 py-4"></th>
            </tr>
          </thead>
          <tbody>
            {players.map((p) => (
              <tr key={p.id} className="border-t hover:bg-gray-50 transition">
                <td className="px-5 py-3 font-medium">{p.name}</td>
                <td className="px-5 py-3"><PositionBadge position={p.position} /></td>
                <td className="px-5 py-3 text-gray-600">{p.country.name}</td>
                <td className="px-5 py-3 text-green-700 font-bold">{p.price}M</td>
                <td className="px-5 py-3 text-blue-700 font-bold">{p.totalPoints}</td>
                <td className="px-5 py-3">
                  <span className={`rounded-full px-2 py-1 text-xs font-bold ${getCardTierBadgeClass(p.cardTier)}`}>
                    {CARD_TIER_LABELS[p.cardTier]}
                  </span>
                </td>
                <td className="px-5 py-3">
                  <CardTierSelect playerId={p.id} initial={p.cardTier} />
                </td>
                <td className="px-5 py-3">
                  <Link href={`/admin/players/${p.id}/edit`} className="text-blue-600 hover:underline text-xs">
                    ویرایش
                  </Link>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}
