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

export default async function AdminDashboard() {
  const [playerCount, userCount, teamCount, matchCount] = await Promise.all([
    db.player.count(),
    db.user.count(),
    db.team.count(),
    db.match.count(),
  ]);

  const topTeams = await db.team.findMany({
    orderBy: { totalPoints: "desc" },
    take: 5,
    include: { user: { select: { name: true } } },
  });

  const recentMatches = await db.match.findMany({
    orderBy: { matchDate: "desc" },
    take: 5,
    include: { homeTeam: true, awayTeam: true },
  });

  return (
    <div>
      <h1 className="text-3xl font-bold mb-8">داشبورد</h1>

      <div className="grid grid-cols-4 gap-5 mb-10">
        {[
          { label: "بازیکنان", value: playerCount, icon: "⚽", color: "bg-green-500" },
          { label: "کاربران", value: userCount, icon: "👥", color: "bg-blue-500" },
          { label: "تیم‌های فانتزی", value: teamCount, icon: "🏆", color: "bg-yellow-500" },
          { label: "بازی‌ها", value: matchCount, icon: "🏟️", color: "bg-purple-500" },
        ].map((s) => (
          <div key={s.label} className="bg-white rounded-2xl shadow p-6 flex items-center gap-4">
            <div className={`${s.color} text-white text-2xl w-14 h-14 rounded-xl flex items-center justify-center`}>
              {s.icon}
            </div>
            <div>
              <div className="text-3xl font-bold">{s.value}</div>
              <div className="text-gray-500 text-sm">{s.label}</div>
            </div>
          </div>
        ))}
      </div>

      <div className="grid grid-cols-2 gap-6">
        <div className="bg-white rounded-2xl shadow p-6">
          <h2 className="font-bold text-lg mb-4">برترین تیم‌ها</h2>
          <div className="flex flex-col gap-3">
            {topTeams.map((t, i) => (
              <div key={t.id} className="flex justify-between items-center">
                <div className="flex items-center gap-3">
                  <span className="text-gray-400 w-5">{i + 1}</span>
                  <div>
                    <div className="font-medium text-sm">{t.name}</div>
                    <div className="text-xs text-gray-400">{t.user.name}</div>
                  </div>
                </div>
                <span className="font-bold text-blue-700">{t.totalPoints} pts</span>
              </div>
            ))}
          </div>
        </div>

        <div className="bg-white rounded-2xl shadow p-6">
          <h2 className="font-bold text-lg mb-4">آخرین بازی‌ها</h2>
          <div className="flex flex-col gap-3">
            {recentMatches.map((m) => (
              <div key={m.id} className="flex justify-between items-center text-sm">
                <span>{m.homeTeam.name}</span>
                <span className="font-bold text-gray-600">
                  {m.status === "FINISHED" ? `${m.homeScore} - ${m.awayScore}` : "vs"}
                </span>
                <span>{m.awayTeam.name}</span>
              </div>
            ))}
            {recentMatches.length === 0 && <p className="text-gray-400 text-sm">بازی‌ای ثبت نشده</p>}
          </div>
        </div>
      </div>
    </div>
  );
}
