"use client";

import Navbar from "@/components/layout/navbar";
import { useEvents } from "@/context/event-context";
import Link from "next/link";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardFooter,
  CardHeader,
  CardTitle,
  CardDescription,
} from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Loader2Icon, CalendarIcon, MapPinIcon } from "lucide-react";
import { EventResponse } from "@/client";

export default function DashboardPage() {
  const {
    userEvents,
    isLoadingUserEvents,
    userEvents: eventsData,
  } = useEvents();

  return (
    <>
      <Navbar />
      <div className="container mx-auto px-4 py-12">
        <div className="max-w-7xl mx-auto">
          <h1 className="text-3xl font-bold mb-8">Dashboard</h1>

          <div className="flex items-center justify-between mb-8">
            <div>
              <h2 className="text-xl font-semibold">Your Events</h2>
              <p className="text-gray-500 dark:text-gray-400">
                Manage your scheduled events.
              </p>
            </div>
            <Button asChild>
              <Link href="/dashboard/events/new">+ Add New Event</Link>
            </Button>
          </div>

          {isLoadingUserEvents && (
            <div className="flex items-center gap-2">
              <Loader2Icon className="h-6 w-6 animate-spin text-blue-500" />
              <span>Loading your events...</span>
            </div>
          )}

          {!isLoadingUserEvents &&
            userEvents?.items &&
            userEvents.items.length > 0 && (
              <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
                {userEvents.items.map((event: EventResponse) => (
                  <Card
                    key={event.id}
                    className="hover:shadow-lg transition-shadow"
                  >
                    <CardHeader>
                      <CardTitle>{event.title}</CardTitle>
                      {event.is_public ? (
                        <Badge variant="default">Public</Badge>
                      ) : (
                        <Badge variant="secondary">Private</Badge>
                      )}
                    </CardHeader>
                    <CardContent>
                      <CardDescription className="line-clamp-2">
                        {event.description || "No description provided."}
                      </CardDescription>
                      {event.location_address && (
                        <div className="flex items-center gap-2 mt-2 text-sm text-gray-500 dark:text-gray-400">
                          <MapPinIcon className="h-4 w-4" />
                          {event.location_address}
                        </div>
                      )}
                      {event.event_start_time && (
                        <div className="flex items-center gap-2 mt-1 text-sm text-gray-500 dark:text-gray-400">
                          <CalendarIcon className="h-4 w-4" />
                          {new Date(event.event_start_time).toLocaleString()}
                        </div>
                      )}
                    </CardContent>
                    <CardFooter>
                      <Button size="sm" asChild>
                        <Link href={`/dashboard/events/${event.slug}`}>
                          View Event
                        </Link>
                      </Button>
                    </CardFooter>
                  </Card>
                ))}
              </div>
            )}

          {!isLoadingUserEvents &&
            (!userEvents?.items || userEvents.items.length === 0) && (
              <div className="bg-gray-100 dark:bg-slate-700 rounded p-8 text-center">
                <p className="text-gray-500 dark:text-gray-400">
                  You haven't created any events yet.
                </p>
                <Button asChild className="mt-4">
                  <Link href="/dashboard/events/new">
                    Create Your First Event
                  </Link>
                </Button>
              </div>
            )}
        </div>
      </div>
    </>
  );
}