import type { Metadata } from "next";
import { headers } from "next/headers";
import { auth } from "@/lib/auth/server";
import { db, webhooks, eq } from "@epicure/db";
import { WebhooksManager } from "@/components/settings/webhooks-manager";

export const metadata: Metadata = { title: "Webhooks" };

export default async function WebhooksPage() {
  const session = await auth.api.getSession({ headers: await headers() });
  if (!session) return null;

  const rows = await db
    .select({
      id: webhooks.id,
      url: webhooks.url,
      events: webhooks.events,
      active: webhooks.active,
      createdAt: webhooks.createdAt,
    })
    .from(webhooks)
    .where(eq(webhooks.userId, session.user.id));

  return (
    <div className="space-y-8">
      <section className="rounded-xl border p-6 space-y-4">
        <div>
          <h2 className="font-semibold text-lg">Webhooks</h2>
          <p className="text-sm text-muted-foreground mt-1">
            Receive HTTP callbacks when events happen in your Epicure account.
          </p>
        </div>
        <WebhooksManager
          initialWebhooks={rows.map((w) => ({
            id: w.id,
            url: w.url,
            events: w.events,
            active: w.active,
            createdAt: w.createdAt.toISOString(),
          }))}
        />
      </section>
    </div>
  );
}