import type { Metadata } from "next";
import Link from "next/link";
import { PageContainer } from "@/components/layout/PageContainer";
import { Button } from "@/components/ui/button";
import { EmptyState } from "@/components/admin/EmptyState";
import { EventsList } from "@/components/dashboard/EventsList";
import { requireAuth } from "@/modules/auth";
import { eventService } from "@/modules/events";

export const metadata: Metadata = {
  title: "Events · Event Manager",
};

export default async function EventsPage() {
  const session = await requireAuth();
  const events = await eventService.listForUser(session.user.id);

  return (
    <PageContainer>
      <div className="mb-8 flex flex-wrap items-end justify-between gap-3">
        <div>
          <p className="text-xs font-semibold uppercase tracking-[0.18em] text-rose-500">
            Your events
          </p>
          <h1 className="mt-1 text-3xl font-semibold tracking-tight text-foreground sm:text-4xl">
            Every celebration in one place
          </h1>
          <p className="mt-2 max-w-2xl text-muted">
            Open any event to manage guests, budget, gifts and more.
          </p>
        </div>
        <div className="flex gap-2">
          <Link href="/dashboard">
            <Button size="sm" variant="secondary">
              Dashboard
            </Button>
          </Link>
          <Link href="/templates">
            <Button size="sm">+ New event</Button>
          </Link>
        </div>
      </div>

      {events.length === 0 ? (
        <EmptyState
          title="No events yet"
          description="Pick a template or create a custom event from the dashboard."
          action={
            <Link href="/dashboard">
              <Button size="sm">Go to dashboard</Button>
            </Link>
          }
        />
      ) : (
        <EventsList events={events} />
      )}
    </PageContainer>
  );
}