import Link from "next/link";
import { Star } from "lucide-react";
import { apiGet } from "@/lib/api/server";

export default async function CoachesPage() {
  const coaches = await apiGet<{
    id: string;
    phone: string;
    profile?: { fullName?: string } | null;
    coachSports?: Array<{ id: string; sport: { name: string }; coachLevel?: string | null }>;
    _count?: { courseCoaches: number };
  }[]>("/api/coaches").catch(() => []);

  return (
    <div>
      <div className="container mx-auto px-4 py-12">
        <div className="mb-10">
          <h1 className="text-3xl font-bold text-gray-900 mb-2">مربیان برتر</h1>
          <p className="text-gray-500">اساتید و مربیان مجرب سامانه مربیگری ورزشی</p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {coaches.map((coach, index) => {
            const p = coach.profile;
            const gradients = [
              "from-blue-500 to-cyan-400",
              "from-violet-500 to-purple-400",
              "from-emerald-500 to-teal-400",
              "from-orange-500 to-amber-400",
              "from-rose-500 to-pink-400",
              "from-indigo-500 to-blue-400",
            ];
            const g = gradients[index % gradients.length];
            return (
              <Link key={coach.id} href={`/coaches/${coach.id}`} className="group block rounded-2xl border border-gray-100 bg-white p-6 hover:border-[#2563EB]/30 hover:shadow-xl transition-all duration-200">
                <div className="flex items-center gap-4 mb-4">
                  <div className={`w-16 h-16 rounded-2xl bg-gradient-to-br ${g} flex items-center justify-center text-white font-bold text-xl shadow-lg`}>
                    {p?.fullName?.charAt(0) || "?"}
                  </div>
                  <div>
                    <h3 className="font-semibold text-gray-900 text-lg">
                      {p ? p.fullName || coach.phone : coach.phone}
                    </h3>
                    <div className="flex items-center gap-1 text-sm text-amber-500 mt-0.5">
                      <Star className="h-4 w-4 fill-current" />
                      <span>مربی برتر</span>
                    </div>
                  </div>
                </div>

                {coach.coachSports && coach.coachSports.length > 0 && (
                  <div className="space-y-1.5 mb-4">
                    {coach.coachSports.map((cs) => (
                      <div key={cs.id} className="flex items-center gap-2 text-sm">
                        <span className="w-2 h-2 rounded-full bg-[#2563EB] shrink-0" />
                        <span className="text-gray-700 font-medium">{cs.sport.name}</span>
                        {cs.coachLevel && (
                          <span className="text-gray-400 text-xs bg-gray-50 px-2 py-0.5 rounded-full">
                            {cs.coachLevel}
                          </span>
                        )}
                      </div>
                    ))}
                  </div>
                )}

                <div className="flex items-center gap-4 text-sm text-gray-500 pt-4 border-t border-gray-50">
                  <div className="flex items-center gap-1.5">
                    <span className="font-semibold text-[#2563EB]">{coach._count?.courseCoaches || 0}</span>
                    <span>دوره</span>
                  </div>
                </div>
              </Link>
            );
          })}
        </div>

        {coaches.length === 0 && (
          <div className="text-center py-20">
            <div className="w-16 h-16 mx-auto mb-4 rounded-2xl bg-gray-100 flex items-center justify-center">
              <Star className="h-8 w-8 text-gray-400" />
            </div>
            <p className="text-gray-500">هنوز مربی ثبت نشده است</p>
          </div>
        )}
      </div>
    </div>
  );
}