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

export default async function AdminRoundsPage() {
  const rounds = await db.round.findMany({
    orderBy: { number: "asc" },
    include: { _count: { select: { matches: true } } },
  });

  return (
    <div className="grid grid-cols-2 gap-8">
      <div>
        <h1 className="text-2xl font-bold mb-6">دورهای بازی</h1>
        <div className="flex flex-col gap-3">
          {rounds.map((r) => (
            <div key={r.id} className={`bg-white rounded-2xl shadow p-5 border-2 ${r.isActive ? "border-green-500" : "border-transparent"}`}>
              <div className="flex items-center justify-between">
                <div>
                  <div className="font-bold flex items-center gap-2">
                    دور {r.number} - {r.name}
                    {r.isActive && <span className="text-xs bg-green-100 text-green-700 px-2 py-0.5 rounded-full">فعال</span>}
                  </div>
                  <div className="text-sm text-gray-500 mt-1">
                    {r._count.matches} بازی · deadline: {new Date(r.deadline).toLocaleDateString("fa-IR")}
                  </div>
                </div>
                <div className="flex items-center gap-2">
                  <ActivateRoundButton roundId={r.id} isActive={r.isActive} />
                  <Link href={`/admin/rounds/${r.id}`}
                    className="bg-green-700 text-white px-3 py-1.5 rounded-lg text-sm hover:bg-green-800 transition">
                    بازی‌ها
                  </Link>
                </div>
              </div>
            </div>
          ))}
          {rounds.length === 0 && <p className="text-gray-400 text-sm">هنوز دوری ثبت نشده</p>}
        </div>
      </div>

      <div>
        <h2 className="text-xl font-bold mb-6">افزودن دور جدید</h2>
        <RoundForm />
      </div>
    </div>
  );
}