import { db } from "@/lib/db";
import { notFound } from "next/navigation";
import CountryFlag from "@/components/CountryFlag";

export default async function CountryProfilePage({ params }: { params: Promise<{ code: string }> }) {
  const { code } = await params;
  
  const country = await db.country.findUnique({
    where: { code: code.toUpperCase() },
    include: {
      group: true,
      players: {
        where: { isActive: true },
        orderBy: [{ position: "asc" }, { totalPoints: "desc" }],
      },
      _count: {
        select: {
          homeMatches: true,
          awayMatches: true,
        },
      },
    },
  });

  if (!country) notFound();

  const totalMatches = country._count.homeMatches + country._count.awayMatches;

  return (
    <div className="max-w-5xl mx-auto py-8 px-4">
      {/* هدر */}
      <div className="bg-gradient-to-br from-green-700 to-green-900 rounded-3xl shadow-2xl p-8 mb-8 text-white">
        <div className="flex items-center gap-6">
          <div className="bg-white/10 backdrop-blur-sm rounded-2xl p-4">
            <CountryFlag
              flagImage={country.flagImage}
              flagEmoji={country.flagUrl}
              countryName={country.name}
              size="xl"
            />
          </div>
          <div className="flex-1">
            <h1 className="text-4xl font-bold mb-2">{country.name}</h1>
            <div className="flex items-center gap-4 text-white/80">
              <span>{country.code}</span>
              {country.confederation && <span>· {country.confederation}</span>}
              {country.group && <span>· گروه {country.group.name}</span>}
            </div>
          </div>
        </div>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
        {/* آمار */}
        <div className="bg-white rounded-2xl shadow p-6 text-center">
          <div className="text-3xl font-bold text-green-700">{country.players.length}</div>
          <div className="text-sm text-gray-500 mt-1">بازیکن</div>
        </div>
        <div className="bg-white rounded-2xl shadow p-6 text-center">
          <div className="text-3xl font-bold text-blue-700">{totalMatches}</div>
          <div className="text-sm text-gray-500 mt-1">بازی</div>
        </div>
        <div className="bg-white rounded-2xl shadow p-6 text-center">
          <div className="text-3xl font-bold text-purple-700">{country.defaultFormation}</div>
          <div className="text-sm text-gray-500 mt-1">ترکیب پیش‌فرض</div>
        </div>
      </div>

      {/* اطلاعات راه‌یابی */}
      {(country.qualificationMethod || country.qualificationDate || country.participationHistory || country.bestResult) && (
        <div className="bg-white rounded-2xl shadow p-6 mb-8">
          <h2 className="text-xl font-bold mb-4">اطلاعات راه‌یابی</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            {country.qualificationMethod && (
              <div>
                <div className="text-sm text-gray-500">شیوه راه‌یابی</div>
                <div className="font-medium mt-1">{country.qualificationMethod}</div>
              </div>
            )}
            {country.qualificationDate && (
              <div>
                <div className="text-sm text-gray-500">تاریخ راه‌یابی</div>
                <div className="font-medium mt-1">{country.qualificationDate}</div>
              </div>
            )}
            {country.participationHistory && (
              <div>
                <div className="text-sm text-gray-500">سابقه شرکت</div>
                <div className="font-medium mt-1">{country.participationHistory}</div>
              </div>
            )}
            {country.bestResult && (
              <div>
                <div className="text-sm text-gray-500">بهترین نتیجه</div>
                <div className="font-medium mt-1">{country.bestResult}</div>
              </div>
            )}
          </div>
        </div>
      )}

      {/* توضیحات */}
      {country.description && (
        <div className="bg-white rounded-2xl shadow p-6 mb-8">
          <h2 className="text-xl font-bold mb-4">درباره تیم</h2>
          <p className="text-gray-700 leading-relaxed whitespace-pre-line">{country.description}</p>
        </div>
      )}

      {/* لیست بازیکنان */}
      <div className="bg-white rounded-2xl shadow p-6">
        <h2 className="text-xl font-bold mb-4">بازیکنان</h2>
        <div className="grid grid-cols-1 gap-3">
          {["GK", "DEF", "MID", "FWD"].map((pos) => {
            const players = country.players.filter((p) => p.position === pos);
            if (players.length === 0) return null;
            
            return (
              <div key={pos}>
                <div className="text-sm font-bold text-gray-500 mb-2">{pos}</div>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
                  {players.map((p) => (
                    <div key={p.id} className="flex items-center justify-between bg-gray-50 rounded-lg px-4 py-3">
                      <span className="font-medium">{p.name}</span>
                      <div className="flex items-center gap-3 text-sm">
                        <span className="text-green-700 font-bold">{p.price}M</span>
                        <span className="text-blue-700 font-bold">{p.totalPoints} pts</span>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}