import type { Metadata } from "next";
import { headers } from "next/headers";
import Link from "next/link";
import { ExternalLink } from "lucide-react";
import { auth } from "@/lib/auth/server";
import { db, apiKeys, users, eq } from "@epicure/db";
import { ApiKeysManager } from "@/components/settings/api-keys-manager";
import { DeveloperLockedNotice } from "@/components/settings/developer-locked-notice";
import { DeveloperAccessToggle } from "@/components/settings/developer-access-toggle";
import { DisableDeveloperAccessButton } from "@/components/settings/disable-developer-access-button";
import { canSelfServeDeveloperAccess } from "@/lib/permissions";
import { getMessages } from "@/lib/i18n/server";

export const metadata: Metadata = {};

export default async function ApiKeysPage() {
  const session = await auth.api.getSession({ headers: await headers() });
  if (!session) return null;
  const m = getMessages((session.user as { locale?: string }).locale);

  const dbUser = (await db.select({ isDeveloper: users.isDeveloper, tier: users.tier }).from(users).where(eq(users.id, session.user.id)).limit(1))[0];

  const keys = dbUser?.isDeveloper
    ? await db
        .select({
          id: apiKeys.id,
          name: apiKeys.name,
          scope: apiKeys.scope,
          lastUsedAt: apiKeys.lastUsedAt,
          createdAt: apiKeys.createdAt,
        })
        .from(apiKeys)
        .where(eq(apiKeys.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">{m.settings.apiKeysPage.title}</h2>
          <p className="text-sm text-muted-foreground mt-1">
            {m.settings.apiKeysPage.description}
          </p>
          <Link
            href="/docs"
            target="_blank"
            className="inline-flex items-center gap-1 text-sm text-primary hover:underline mt-2"
          >
            <ExternalLink className="h-3.5 w-3.5" />
            {m.settings.apiKeysPage.docsLink}
          </Link>
        </div>
        {!dbUser?.isDeveloper && dbUser && canSelfServeDeveloperAccess(dbUser) && (
          <DeveloperAccessToggle message={m.settings.developerSelfServeNotice} />
        )}
        {!dbUser?.isDeveloper && (!dbUser || !canSelfServeDeveloperAccess(dbUser)) && (
          <DeveloperLockedNotice message={m.settings.developerLockedNotice} />
        )}
        {dbUser?.isDeveloper && (
          <>
            <ApiKeysManager
              initialKeys={keys.map((k) => ({
                id: k.id,
                name: k.name,
                scope: k.scope,
                lastUsedAt: k.lastUsedAt ? k.lastUsedAt.toISOString() : null,
                createdAt: k.createdAt.toISOString(),
              }))}
            />
            <DisableDeveloperAccessButton />
          </>
        )}
      </section>
    </div>
  );
}
