import type { Metadata } from "next";
import { getAllSiteSettings } from "@/lib/site-settings";
import { AdminSettingsForm } from "@/components/admin/admin-settings-form";

export const metadata: Metadata = { title: "Site Settings – Admin" };

const SETTING_GROUPS = [
  {
    title: "AI Provider Keys",
    description: "Override the environment variable API keys at runtime. Values are encrypted at rest.",
    keys: ["OPENAI_API_KEY", "ANTHROPIC_API_KEY", "OPENROUTER_API_KEY"] as const,
  },
  {
    title: "AI Configuration",
    description: "Provider routing and model defaults.",
    keys: ["OPENROUTER_DEFAULT_MODEL", "OLLAMA_BASE_URL"] as const,
  },
  {
    title: "Push Notifications (VAPID)",
    description: "Keys for web push notifications. Generate with: npx web-push generate-vapid-keys",
    keys: ["NEXT_PUBLIC_VAPID_PUBLIC_KEY", "VAPID_PRIVATE_KEY"] as const,
  },
];

export default async function AdminSettingsPage() {
  const settings = await getAllSiteSettings();

  return (
    <div className="space-y-8">
      <div>
        <h1 className="text-2xl font-bold tracking-tight">Site Settings</h1>
        <p className="text-muted-foreground text-sm mt-1">
          Override .env values at runtime. DB values take precedence over environment variables.
          Clear a value to fall back to the environment variable.
        </p>
      </div>

      {SETTING_GROUPS.map((group) => (
        <AdminSettingsForm key={group.title} group={group} settings={settings} />
      ))}
    </div>
  );
}
