import { notFound } from 'next/navigation';
import Link from 'next/link';
import { AdminShell } from '@/components/admin/AdminShell';
import { SectionEditor } from '@/components/admin/SectionEditor';
import type { JsonValue } from '@/components/admin/JsonForm';
import { isEditableKey, sectionLabel } from '@/lib/content/sections';
import { loadSection } from '@/lib/content/load';
import { getSection } from '@/lib/db/store';

// Always render on demand: the editor must reflect the current DB state, and
// generateStaticParams would otherwise bake build-time defaults into the page.
export const dynamic = 'force-dynamic';

export default function SectionEditorPage({ params }: { params: { key: string } }) {
  const { key } = params;
  if (!isEditableKey(key)) notFound();

  const data = loadSection(key);
  const label = sectionLabel(key);
  const isOverridden = getSection(key) !== null;

  return (
    <AdminShell>
      <div className="mx-auto max-w-3xl">
        <Link
          href="/admin"
          className="font-mono text-[0.7rem] uppercase tracking-wider text-slate-500 transition-colors hover:text-electric"
        >
          ← Dashboard
        </Link>
        <h1 className="mt-3 text-2xl font-bold text-white">
          {label.en}
          <span className="ms-2 font-fa text-lg font-normal text-slate-500">
            {label.fa}
          </span>
        </h1>
        <p className="mb-6 mt-1 text-sm text-slate-400">
          Edit both languages with the FA / EN tabs, then save. Changes go live immediately.
        </p>

        <SectionEditor
          sectionKey={key}
          title={label.en}
          initial={{ fa: data.fa as JsonValue, en: data.en as JsonValue }}
          isOverridden={isOverridden}
        />
      </div>
    </AdminShell>
  );
}