import { FormStatus } from "@/components/dashboard/form-status";
import { prisma } from "@/lib/db/prisma";
import { updateSettings } from "../actions";

export default async function SettingsPage({ searchParams }: { searchParams: Promise<{ status?: string }> }) {
  const { status } = await searchParams; const settings = await prisma.setting.findUnique({ where: { id: "site" } });
  return <div className="mx-auto max-w-4xl"><p className="text-xs font-bold uppercase tracking-[.2em] text-emerald-600">Konfigurasi website</p><h1 className="mt-2 text-3xl font-black">Pengaturan</h1><p className="mt-2 text-slate-500">Atur identitas umum dan preferensi bawaan WEBKU.</p><div className="mt-8"><FormStatus status={status} /><form action={updateSettings} className="rounded-2xl border border-slate-200 bg-white p-6 dark:border-slate-800 dark:bg-slate-900"><div className="grid gap-6"><SettingField name="websiteName" label="Nama website" defaultValue={settings?.websiteName ?? "WEBKU"} required /><SettingField name="tagline" label="Tagline" defaultValue={settings?.tagline ?? "Portal Pembelajaran Rekayasa Perangkat Lunak"} required /><label><span className="text-sm font-semibold">Teks footer</span><textarea name="footerText" rows={4} defaultValue={settings?.footerText ?? ""} className="mt-2 w-full rounded-xl border border-slate-200 bg-transparent px-4 py-3 outline-none focus:border-emerald-500 dark:border-slate-700" /></label><label><span className="text-sm font-semibold">Tema bawaan</span><select name="defaultTheme" defaultValue={settings?.defaultTheme ?? "system"} className="mt-2 h-11 w-full rounded-xl border border-slate-200 bg-white px-4 outline-none focus:border-emerald-500 dark:border-slate-700 dark:bg-slate-950"><option value="system">Ikuti sistem</option><option value="light">Terang</option><option value="dark">Gelap</option></select></label></div><button className="mt-7 rounded-xl bg-emerald-500 px-6 py-3 font-bold text-white hover:bg-emerald-600">Simpan pengaturan</button></form></div></div>;
}
function SettingField({ label, ...props }: React.InputHTMLAttributes<HTMLInputElement> & { label: string }) { return <label><span className="text-sm font-semibold">{label}</span><input {...props} className="mt-2 h-11 w-full rounded-xl border border-slate-200 bg-transparent px-4 outline-none focus:border-emerald-500 dark:border-slate-700" /></label>; }