import { createFileRoute } from '@tanstack/react-router';

import { DefaultModelEditor } from '@/app/features/settings/governance/components/default-model-editor';
import { ModelAccessEditor } from '@/app/features/settings/governance/components/model-access-editor';
import { SystemPromptEditor } from '@/app/features/settings/governance/components/system-prompt-editor';
import { ensureGovernancePolicies } from '@/app/lib/loader-preload';

export const Route = createFileRoute(
  '/dashboard/$id/settings/governance/content-models',
)({
  // Warm every policy this page reads so editors paint their REAL content on
  // first render (no skeleton flash, no staggered reveal). `.catch` so a
  // transient/auth error never blocks the transition — the editors' own
  // loading + access checks still render correctly.
  loader: ({ context, params }) =>
    ensureGovernancePolicies(context, params.id, [
      'system_prompt',
      'default_models',
      'model_access',
    ]).catch((error: unknown) => {
      console.warn('Failed to preload content-models policies', error);
    }),
  component: ContentModelsRoute,
});

function ContentModelsRoute() {
  const { id: organizationId } = Route.useParams();

  // Editors are eager-imported (not lazy) so they share one coordinated reveal
  // under the page's skeletonization — a lazy chunk's inner Suspense fallback
  // would otherwise let one editor pop in alone.
  return (
    <div className="divide-border flex flex-col divide-y">
      <div className="pb-7">
        <SystemPromptEditor organizationId={organizationId} />
      </div>
      <div className="py-7">
        <DefaultModelEditor organizationId={organizationId} />
      </div>
      <div className="pt-7">
        <ModelAccessEditor organizationId={organizationId} />
      </div>
    </div>
  );
}
