'use client';

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@/components/ui/card';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table';
import { events } from '@/lib/data';
import { EventPostForm } from '@/components/event-post-form';
import { Badge } from '@/components/ui/badge';
import { isAfter } from 'date-fns';

export default function AdminEventsPage() {
  const isEventExpired = (dateString: string) => {
    try {
      const eventDate = new Date(dateString.replace(/(\d+)(st|nd|rd|th)/, '$1'));
      return !isAfter(eventDate, new Date());
    } catch (e) {
      return false;
    }
  };
  
  return (
    <Card>
      <CardHeader className="flex flex-row justify-between items-center">
        <div>
          <CardTitle>Upcoming Events</CardTitle>
          <CardDescription>Manage your group rides and events.</CardDescription>
        </div>
        <EventPostForm />
      </CardHeader>
      <CardContent>
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>Destination</TableHead>
              <TableHead>Date</TableHead>
              <TableHead className="hidden md:table-cell">Status</TableHead>
              <TableHead className="hidden md:table-cell">Distance</TableHead>
              <TableHead className="hidden md:table-cell">Duration</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {events.map((event) => (
              <TableRow key={event.id}>
                <TableCell className="font-medium">{event.destination}</TableCell>
                <TableCell>{event.date}</TableCell>
                <TableCell className="hidden md:table-cell">
                  {isEventExpired(event.date) && (
                    <Badge variant="destructive">Expired</Badge>
                  )}
                </TableCell>
                <TableCell className="hidden md:table-cell">{event.distance}</TableCell>
                <TableCell className="hidden md:table-cell">{event.duration}</TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </CardContent>
    </Card>
  );
}