import { db } from "@/lib/db";
import Link from "next/link";

const stageLabel: Record<string, string> = {
  GROUP: "گروهی", ROUND_OF_16: "یک‌هشتم", QUARTER_FINAL: "یک‌چهارم",
  SEMI_FINAL: "نیمه‌نهایی", THIRD_PLACE: "رده‌بندی", FINAL: "فینال",
};

export default async function AdminMatchesPage() {
  const matches = await db.match.findMany({
    include: { homeTeam: true, awayTeam: true, round: true },
    orderBy: { matchDate: "asc" },
  });

  return (
    <div>
      <div className="flex justify-between items-center mb-6">
        <h1 className="text-2xl font-bold">بازی‌ها</h1>
        <Link href="/admin/matches/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>
            {matches.map((m) => (
              <tr key={m.id} className="border-t hover:bg-gray-50 transition">
                <td className="px-5 py-3 font-medium">{m.homeTeam.name}</td>
                <td className="px-5 py-3 font-bold text-center">
                  {m.status !== "SCHEDULED" ? `${m.homeScore ?? 0} - ${m.awayScore ?? 0}` : "-"}
                </td>
                <td className="px-5 py-3 font-medium">{m.awayTeam.name}</td>
                <td className="px-5 py-3 text-gray-500">{stageLabel[m.stage]}</td>
                <td className="px-5 py-3 text-gray-500">{m.round?.name ?? "-"}</td>
                <td className="px-5 py-3 text-gray-500">{new Date(m.matchDate).toLocaleDateString("fa-IR")}</td>
                <td className="px-5 py-3">
                  <span className={`text-xs px-2 py-1 rounded-full font-medium ${
                    m.status === "LIVE" ? "bg-red-100 text-red-600" :
                    m.status === "FINISHED" ? "bg-green-100 text-green-700" :
                    "bg-gray-100 text-gray-600"
                  }`}>
                    {m.status === "LIVE" ? "زنده" : m.status === "FINISHED" ? "پایان" : "برنامه"}
                  </span>
                </td>
                <td className="px-5 py-3">
                  <Link href={`/admin/matches/${m.id}/edit`} className="text-blue-600 hover:underline text-xs">ویرایش</Link>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}
