import { Navbar } from "@/components/layout/Navbar";
import { Footer } from "@/components/layout/Footer";
import { EventCard } from "@/components/events/EventCard";
import { apiFetch } from "@/lib/api";
import { Calendar, CalendarX } from "lucide-react";

export const revalidate = 60;

type Event = {
  id: string;
  title: string;
  description?: string;
  startDate: string;
  endDate: string;
  registrationDeadline?: string | null;
  goLiveAt?: string;
  price: number;
  picture?: string;
  isSoldOut?: boolean;
  cashupStatus?: string;
};

export default async function EventsPage() {
    const events = await apiFetch<Event[]>("/api/events", { nextOptions: { next: { revalidate: 60 } } });
    const now = Date.now();
    const upcoming = (events || []).filter(e => {
        if (e.cashupStatus === "closed") return false;
        const t = new Date(e.startDate).getTime();
        return !isNaN(t) && t > now;
    });
    const sorted = [...upcoming].sort((a, b) => new Date(a.startDate).getTime() - new Date(b.startDate).getTime());

  return (
    <div className="min-h-screen flex flex-col">
      <Navbar />
      <main className="flex-1 py-10 px-4 max-w-7xl mx-auto w-full">
        <div className="flex items-center gap-3 mb-8">
          <div className="w-11 h-11 rounded-xl bg-brand-50 flex items-center justify-center shrink-0">
            <Calendar className="w-6 h-6 text-brand-600" />
          </div>
          <div>
            <h1 className="text-2xl sm:text-3xl font-bold text-gray-900">All Events</h1>
            <p className="text-sm text-gray-500">{sorted.length} upcoming event{sorted.length === 1 ? "" : "s"}</p>
          </div>
        </div>
        {sorted.length === 0 ? (
          <div className="text-center py-16 border rounded-xl bg-gray-50">
            <CalendarX className="w-8 h-8 text-gray-300 mx-auto mb-2" />
            <p className="text-gray-500 text-sm">No events available right now — check back soon.</p>
          </div>
        ) : (
          <div className="grid gap-6 md:grid-cols-3 sm:grid-cols-2">
            {sorted.map((event) => (
              <EventCard key={event.id} event={event} />)
            )}
          </div>
        )}
      </main>
      <Footer />
    </div>
  );
}