import Link from "next/link";
import { CompetitionCard } from "@/components/shared/competition-card";
import { Button } from "@/components/ui/button";
import { apiGet } from "@/lib/api/server";

interface Competition {
  id: string;
  title: string;
  slug: string;
  description?: string | null;
  type: string;
  status: string;
  location?: string | null;
  startDate?: string | null;
  endDate?: string | null;
  capacity: number;
  price: number;
  image?: string | null;
  sport: { id: string; name: string };
  judge?: {
    id: string;
    phone?: string;
    profile: { fullName?: string | null; avatar?: string | null } | null;
  } | null;
  _count?: { registrations: number };
}

interface Sport {
  id: string;
  name: string;
}

interface Props {
  searchParams: Promise<{ sportId?: string; q?: string }>;
}

export default async function CompetitionsPage({ searchParams }: Props) {
  const { sportId, q } = await searchParams;

  const [competitions, sports] = await Promise.all([
    apiGet<Competition[]>("/api/competitions").catch(() => []),
    apiGet<Sport[]>("/api/sports").catch(() => []),
  ]);

  let visible = competitions.filter(
    (c) => c.status !== "CANCELLED"
  );

  if (sportId) {
    visible = visible.filter((c) => c.sport.id === sportId);
  }

  if (q) {
    const query = q.toLowerCase();
    visible = visible.filter(
      (c) =>
        c.title.toLowerCase().includes(query) ||
        c.sport.name.toLowerCase().includes(query)
    );
  }

  return (
    <div className="container mx-auto px-4 py-8">
      <div className="mb-8">
        <h1 className="text-2xl font-bold text-gray-900 mb-2">مسابقات</h1>
        <p className="text-gray-500">مسابقات رشته‌های ورزشی مختلف را مشاهده و ثبت‌نام کنید</p>
      </div>

      <div className="flex flex-wrap gap-2 mb-6">
        <Link href="/competitions">
          <Button variant="default" size="sm">همه</Button>
        </Link>
        {sports.map((s) => (
          <Link key={s.id} href={`/competitions?sportId=${s.id}`}>
            <Button variant={sportId === s.id ? "default" : "outline"} size="sm">{s.name}</Button>
          </Link>
        ))}
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {visible.map((competition) => (
          <CompetitionCard key={competition.id} competition={competition} />
        ))}
      </div>

      {visible.length === 0 && (
        <div className="text-center py-12 text-gray-500">
          هیچ مسابقه‌ای یافت نشد
        </div>
      )}
    </div>
  );
}