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

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

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

  const [courses, sports] = await Promise.all([
    apiGet<Record<string, unknown>[]>("/api/courses?status=ACTIVE").catch(() => []),
    apiGet<{ id: string; name: string }[]>("/api/sports").catch(() => []),
  ]);

  let filtered = courses;
  if (sportId) {
    filtered = filtered.filter((c) => (c as any).sportId === sportId);
  }
  if (q) {
    const query = q.toLowerCase();
    filtered = filtered.filter(
      (c) =>
        (c.title as string)?.toLowerCase().includes(query) ||
        ((c as any).sport?.name as string)?.toLowerCase().includes(query)
    );
  }

  return (
    <div className="container mx-auto px-4 py-8">
      <h1 className="text-2xl font-bold text-gray-900 mb-6">دوره‌های آموزشی</h1>

      <div className="flex flex-wrap gap-2 mb-6">
        <Link href="/courses">
          <Button variant={!sportId ? "default" : "outline"} size="sm">همه</Button>
        </Link>
        {sports.map((s) => (
          <Link key={s.id} href={`/courses?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">
        {filtered.map((course) => (
          <CourseCard key={course.id as string} course={course as any} />
        ))}
      </div>

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