import { EventCard } from "@/components/events/event-card";
import { EventsPageBackground } from "@/components/events/EventsPageBackground";
import { getEventCategories, getEvents } from "@/lib/api/events";
import { FilterSelect } from "@/components/ui/filter-select";

const SORT_OPTIONS = [
  { value: "upcoming", label: "Upcoming" },
  { value: "popular", label: "Most Popular" },
  { value: "latest", label: "Newest" },
  { value: "oldest", label: "Oldest" },
];

type SearchParams = Promise<{
  search?: string;
  category?: string;
  city?: string;
  date?: string;
  sort?: "latest" | "oldest" | "upcoming" | "popular";
}>;

export default async function EventsPage({ searchParams }: { searchParams: SearchParams }) {
  const params = await searchParams;

  const [eventsRes, categoriesRes] = await Promise.all([
    getEvents(params),
    getEventCategories(),
  ]);

  const events = eventsRes.data;
  const categories = categoriesRes.data;

  return (
    <div className="relative">
      <EventsPageBackground />

      <div className="relative mx-auto max-w-6xl px-6 py-10">
        <h1 className="text-2xl font-semibold">Explore Events</h1>

      <form className="mt-6 flex flex-wrap gap-3" method="get">
        <input
          type="search"
          name="search"
          defaultValue={params.search}
          placeholder="Search events..."
          className="min-w-[200px] flex-1 rounded-lg border border-kolabora-neutral-dark/20 px-3 py-2 text-sm focus:border-kolabora-primary focus:outline-none"
        />
        <FilterSelect
          name="category"
          ariaLabel="Filter by event category"
          defaultValue={params.category ?? ""}
          options={[
            { value: "", label: "All Categories" },
            ...categories.map((category) => ({ value: category.slug, label: category.name })),
          ]}
        />
        <FilterSelect
          name="sort"
          ariaLabel="Sort events"
          defaultValue={params.sort ?? "upcoming"}
          options={SORT_OPTIONS}
        />
        <button
          type="submit"
          className="rounded-lg bg-kolabora-primary px-4 py-2 text-sm font-medium text-kolabora-neutral-white hover:opacity-90"
        >
          Search
        </button>
      </form>

        {events.length === 0 ? (
          <p className="mt-10 text-kolabora-neutral-dark/70">No events found.</p>
        ) : (
          <div className="mt-8 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
            {events.map((event) => (
              <EventCard key={event.id} event={event} />
            ))}
          </div>
        )}
      </div>
    </div>
  );
}