import { db } from "@/lib/db";
import { notFound } from "next/navigation";
import Link from "next/link";
import DeleteMatchButton from "./DeleteMatchButton";

const statusStyle: Record<string, string> = {
  SCHEDULED: "bg-gray-100 text-gray-600",
  LIVE: "bg-red-100 text-red-600",
  FINISHED: "bg-green-100 text-green-700",
};
const statusLabel: Record<string, string> = { SCHEDULED: "برنامه", LIVE: "🔴 زنده", FINISHED: "پایان" };

export default async function RoundDetailPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  const round = await db.round.findUnique({
    where: { id },
    include: {
      matches: {
        include: {
          homeTeam: true, awayTeam: true,
          _count: { select: { events: true, lineups: true } },
        },
        orderBy: { matchDate: "asc" },
      },
    },
  });

  if (!round) notFound();

  return (
    <div>
      <div className="flex items-center justify-between mb-6">
        <div className="flex items-center gap-3">
          <Link href="/admin/rounds" className="text-gray-400 hover:text-gray-600">← دورها</Link>
          <h1 className="text-2xl font-bold">{round.name}</h1>
          {round.isActive && <span className="bg-green-100 text-green-700 text-xs px-2 py-1 rounded-full">فعال</span>}
        </div>
        <Link href="/admin/matches/new"
          className="bg-green-700 text-white px-4 py-2 rounded-xl text-sm font-bold hover:bg-green-800 transition">
          + افزودن بازی
        </Link>
      </div>

      <div className="flex flex-col gap-3">
        {round.matches.map((m) => (
          <div key={m.id} className="bg-white rounded-2xl shadow p-5">
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-4 flex-1 justify-end">
                <span className="font-bold">{m.homeTeam.name}</span>
                <span className="text-2xl">{m.homeTeam.flagUrl}</span>
              </div>
              <div className="mx-6 text-center min-w-[120px]">
                {m.status !== "SCHEDULED" ? (
                  <div className="text-2xl font-bold">{m.homeScore} - {m.awayScore}</div>
                ) : (
                  <div className="text-sm text-gray-500">{new Date(m.matchDate).toLocaleDateString("fa-IR")}</div>
                )}
                <span className={`text-xs px-2 py-0.5 rounded-full mt-1 inline-block ${statusStyle[m.status]}`}>
                  {statusLabel[m.status]}
                </span>
              </div>
              <div className="flex items-center gap-4 flex-1 justify-start">
                <span className="text-2xl">{m.awayTeam.flagUrl}</span>
                <span className="font-bold">{m.awayTeam.name}</span>
              </div>
              <div className="flex gap-2 mr-4 items-center">
                <div className="text-xs text-gray-400 text-center mr-2">
                  <div>{m._count.events} رویداد</div>
                  <div>{m._count.lineups > 0 ? "✓ ترکیب" : "بدون ترکیب"}</div>
                </div>
                <Link href={`/admin/rounds/${id}/match/${m.id}`}
                  className="bg-green-700 text-white px-3 py-1.5 rounded-lg text-sm font-medium hover:bg-green-800 transition">
                  جزئیات
                </Link>
                <Link href={`/admin/matches/${m.id}/edit`}
                  className="bg-blue-600 text-white px-3 py-1.5 rounded-lg text-sm font-medium hover:bg-blue-700 transition">
                  ویرایش
                </Link>
                <DeleteMatchButton matchId={m.id} hasEvents={m._count.events > 0} />
              </div>
            </div>
          </div>
        ))}
        {round.matches.length === 0 && (
          <div className="text-center py-12 text-gray-400">
            <p className="mb-4">هنوز بازی‌ای برای این دور ثبت نشده</p>
            <Link href="/admin/matches/new"
              className="inline-block bg-green-700 text-white px-6 py-3 rounded-xl font-bold hover:bg-green-800 transition">
              افزودن اولین بازی
            </Link>
          </div>
        )}
      </div>
    </div>
  );
}