import type { Metadata } from "next";
import { requireUser } from "@/lib/auth";
import { prisma } from "@/lib/db";
import { env } from "@/lib/env";
import { ApiKeys } from "@/components/settings/Forms";

export const metadata: Metadata = { title: "API-Schlüssel" };

export default async function ApiPage() {
  const user = await requireUser("/einstellungen/api");

  const keys = await prisma.apiKey.findMany({
    where: { userId: user.id, revokedAt: null },
    orderBy: { createdAt: "desc" },
    select: { id: true, name: true, prefix: true, lastUsedAt: true, createdAt: true },
  });

  const example = [
    'curl -H "Authorization: Bearer <dein-schlüssel>" \\',
    `  ${env.appUrl}/api/v1/bibliothek?status=WATCHING`,
  ].join("\n");

  return (
    <div className="space-y-6">
      <section className="fl-card p-5">
        <h2 className="text-lg font-semibold">API-Schlüssel</h2>
        <p className="mb-4 mt-1 text-sm text-[var(--fl-muted)]">
          Für Skripte und eigene Anwendungen. Ein Schlüssel hat dieselben Rechte wie dein Konto —
          gib ihn nicht weiter und zieh ihn zurück, sobald du ihn nicht mehr brauchst.
        </p>
        <ApiKeys keys={keys} />
      </section>

      <section className="fl-card p-5">
        <h2 className="mb-3 text-lg font-semibold">So wird er benutzt</h2>
        <pre className="overflow-x-auto rounded-xl bg-[var(--fl-surface-2)] p-3 text-xs leading-relaxed">
          {example}
        </pre>
        <p className="mt-3 text-sm text-[var(--fl-muted)]">
          Die vollständige Beschreibung steht in{" "}
          <a
            href="/api/v1/openapi.json"
            className="text-[var(--fl-accent)] underline-offset-4 hover:underline"
          >
            openapi.json
          </a>{" "}
          und in <code>docs/API.md</code> im Repository.
        </p>
      </section>
    </div>
  );
}