import { listTemplates } from "@autoscholar/core";
import Link from "next/link";
import { CodeBlock } from "@/components/CodeBlock";
import { MarkdownView } from "@/components/MarkdownView";
import { modeLabel } from "@/lib/format";
import { db } from "@/lib/server/db";

export const dynamic = "force-dynamic";

export default async function TemplatesPage({ searchParams }: { searchParams: Promise<{ t?: string }> }) {
  const { t } = await searchParams;
  const templates = await listTemplates(db());
  const cur = templates.find((x) => x.slug === t) ?? templates[0];
  return (
    <div className="space-y-6">
      <header>
        <p className="eyebrow">Starters</p>
        <h1 className="serif mt-1 text-2xl font-semibold">Research instruction templates</h1>
        <p className="muted mt-1 text-sm">
          Discipline presets synced from research/templates. Preview, then prefill the launch form and edit
          before freezing.
        </p>
      </header>
      {templates.length === 0 ? (
        <div className="surface p-8 text-center muted">
          No templates synced yet (the scheduler syncs research/templates at start).
        </div>
      ) : (
        <div className="grid gap-6 lg:grid-cols-12">
          <ul className="space-y-1 lg:col-span-3">
            {templates.map((x) => (
              <li key={x.slug}>
                <Link
                  href={`/admin/templates?t=${x.slug}`}
                  className={`block rounded-md px-2 py-1.5 text-sm no-underline hover:bg-[var(--bg-muted)] ${cur?.slug === x.slug ? "bg-[var(--bg-muted)]" : ""}`}
                >
                  {x.name}
                  <span className="subtle block text-xs">
                    {modeLabel(x.mode)} · v{x.version}
                  </span>
                </Link>
              </li>
            ))}
          </ul>
          {cur && (
            <div className="space-y-3 lg:col-span-9">
              <div className="flex items-center justify-between">
                <h2 className="serif text-lg font-semibold">{cur.name}</h2>
                <Link href={`/admin/new?template=${cur.slug}`} className="btn btn-primary btn-sm">
                  Use this template
                </Link>
              </div>
              <p className="muted text-sm">{cur.description}</p>
              <details open className="surface p-4">
                <summary className="cursor-pointer text-sm">Preview</summary>
                <div className="mt-3">
                  <MarkdownView markdown={cur.content} />
                </div>
              </details>
              <details className="surface p-4">
                <summary className="cursor-pointer text-sm">Raw</summary>
                <CodeBlock code={cur.content} lang="md" />
              </details>
            </div>
          )}
        </div>
      )}
    </div>
  );
}