import { redirect } from "next/navigation";
import { asc, eq } from "drizzle-orm";
import { db } from "@db/client";
import { events } from "@db/schema";
import { getDashboardUser } from "@/lib/view-as";
import { getAudienceEvents } from "@db/queries/campaign-audience";
import { Layers } from "lucide-react";
import { PageHeader, Card } from "@/components/ui";
import NewSegmentForm from "./new-segment-form";

export const metadata = { title: "New segment · Dashboard" };

export default async function NewSegmentPage() {
  const { user } = await getDashboardUser();
  if (!user) redirect("/login");

  const [myEvents, audienceEvents] = await Promise.all([
    db
    .select({ id: events.id, title: events.title })
    .from(events)
    .where(eq(events.organizerId, user.id))
    .orderBy(asc(events.startsAt)),
    getAudienceEvents(user.id),
  ]);

  return (
    <div className="space-y-6">
      <PageHeader
        icon={Layers}
        title="New segment"
        description="Combine rules to build a reusable customer filter."
      />
      <Card className="max-w-xl">
        <NewSegmentForm events={myEvents} audienceEvents={audienceEvents} />
      </Card>
    </div>
  );
}