import { prisma } from "@/lib/db";
import { SettingsForm, type SettingsGroup } from "./_form";

export const dynamic = "force-dynamic";

const GROUPS: Array<{ category: string; title: string; description: string }> = [
  {
    category: "site",
    title: "Thông tin site",
    description:
      "Tên, URL, locale dùng cho metadata, sitemap và footer. URL phải khớp domain công khai.",
  },
  {
    category: "seo",
    title: "Cấu hình SEO",
    description:
      "Ngưỡng SEO score yêu cầu trước khi cho publish, các default meta cho các trang chưa có meta riêng.",
  },
  {
    category: "ai",
    title: "AI Provider",
    description:
      "Endpoint OpenAI-compatible để sinh nội dung, tóm tắt, dịch. API key được mã hóa trong DB.",
  },
];

export default async function SettingsAdminPage() {
  const all = await prisma.setting.findMany({
    orderBy: [{ category: "asc" }, { key: "asc" }],
  });

  const groups: SettingsGroup[] = GROUPS.map((g) => ({
    ...g,
    items: all
      .filter((s) => s.category === g.category)
      .map((s) => ({ key: s.key, value: s.value, isSecret: s.isSecret })),
  })).filter((g) => g.items.length > 0);

  // Orphan settings outside known groups
  const known = new Set(GROUPS.map((g) => g.category));
  const orphans = all.filter((s) => !known.has(s.category));

  return (
    <div>
      <div className="mb-6">
        <h1 className="font-display text-2xl lg:text-3xl font-bold mb-1">Cài đặt</h1>
        <p className="text-sm text-ink-muted">
          Cấu hình toàn site. Các giá trị này được đọc runtime — không cần redeploy khi đổi.
        </p>
      </div>

      {groups.map((g) => (
        <SettingsForm key={g.category} group={g} />
      ))}

      {orphans.length > 0 && (
        <details className="mt-8 rounded-xl border border-stroke-subtle bg-bg-elevated/40 p-5">
          <summary className="font-display font-semibold cursor-pointer text-sm">
            Khác ({orphans.length})
          </summary>
          <ul className="mt-3 space-y-1 text-xs font-mono">
            {orphans.map((o) => (
              <li key={o.key}>
                <span className="text-ink-muted">{o.key}</span>
                {" = "}
                <span>{o.isSecret ? "•••" : o.value.slice(0, 80)}</span>
              </li>
            ))}
          </ul>
        </details>
      )}
    </div>
  );
}