import React from 'react';
import { Calendar } from 'lucide-react';
import { api, Event } from '@/lib/api';
import EventCard from '../components/EventCard';

const FALLBACK_EVENTS: Event[] = [
  {
    id: '1',
    title: 'Burrowing Owl Survey Walk',
    date: new Date(Date.now() + 3 * 24 * 60 * 60 * 1000).toISOString(),
    location: 'Rotary Park, Cape Coral',
    description: 'Join CCFW volunteers for our monthly owl survey. Learn to identify burrows and record sighting data. All skill levels welcome.',
    rsvpCount: 14,
    capacity: 25,
  },
  {
    id: '2',
    title: 'Habitat Restoration Day',
    date: new Date(Date.now() + 10 * 24 * 60 * 60 * 1000).toISOString(),
    location: 'Four Mile Cove, Cape Coral',
    description: 'Help us plant native vegetation to restore burrowing owl habitat. Gloves and tools provided. Bring water and sunscreen.',
    rsvpCount: 8,
    capacity: 20,
  },
  {
    id: '3',
    title: 'Community Wildlife Photography Workshop',
    date: new Date(Date.now() + 17 * 24 * 60 * 60 * 1000).toISOString(),
    location: 'CCFW Conservation Center',
    description: 'Professional wildlife photographer workshop covering camera settings, ethics of wildlife photography, and best spots in Cape Coral.',
    rsvpCount: 22,
    capacity: 30,
  },
];

async function getEvents(): Promise<Event[]> {
  try { return await api.getEvents(); }
  catch { return FALLBACK_EVENTS; }
}

export default async function EventsPage() {
  const events = await getEvents();

  return (
    <div className="max-w-5xl mx-auto px-6 py-16 space-y-14">
      <header className="space-y-4">
        <div className="flex items-center gap-2 text-teal text-sm font-bold uppercase tracking-widest">
          <Calendar size={16} /> Upcoming
        </div>
        <h1 className="text-4xl font-black text-white">CCFW Events</h1>
        <p className="text-stone-400 text-lg max-w-2xl leading-relaxed">
          Get involved! CCFW hosts regular surveys, restoration days, and educational events for the Cape Coral community.
        </p>
      </header>

      <div className="space-y-5">
        {events.length === 0 ? (
          <div className="flex flex-col items-center py-24 gap-4 text-stone-500">
            <Calendar size={48} className="text-stone-600" />
            <p className="text-lg font-semibold">No upcoming events</p>
            <p className="text-sm">Check back soon or follow us on social media.</p>
          </div>
        ) : (
          events.map((e) => <EventCard key={e.id} event={e} />)
        )}
      </div>
    </div>
  );
}