import Link from "next/link";
import { asc, desc, eq } from "drizzle-orm";
import { db } from "@/db";
import { pages, pageVersions } from "@/db/schema";
import { savePage, restoreVersion } from "@/app/admin/actions";
import { fmtDate } from "@/lib/format";
export default async function P({ searchParams }: { searchParams: Promise<{ edit?: string }> }) {
  const { edit } = await searchParams;
  const all = await db.select().from(pages).orderBy(asc(pages.title));
  const cur = all.find((p) => p.slug === edit);
  const versions = cur ? await db.select().from(pageVersions).where(eq(pageVersions.slug, cur.slug)).orderBy(desc(pageVersions.id)).limit(15) : [];
  return <div className="grid xl:grid-cols-[260px_1fr] gap-5"><div className="card p-3 h-fit"><h3 className="font-bold p-2">Pages</h3>{all.map((p) => <Link key={p.slug} href={`/admin/pages?edit=${p.slug}`} className={`block px-3 py-2 rounded-lg text-sm ${edit === p.slug ? "bg-mint text-brand font-semibold" : "hover:bg-cloud"}`}>{p.title}{p.draft && <span className="text-[10px] text-amber-600"> · draft</span>}</Link>)}<Link href="/admin/pages?edit=__new" className="block px-3 py-2 text-sm text-brand font-semibold">+ New page</Link></div>
    {edit ? <div className="space-y-5"><form action={savePage} className="card p-6 space-y-3"><input type="hidden" name="slug" value={cur?.slug ?? ""} /><div className="flex justify-between items-center"><h1 className="text-xl font-extrabold">{cur ? `Edit: ${cur.title}` : "New page"}</h1>{cur && <Link href={`/page/${cur.slug}`} target="_blank" className="text-sm text-brand font-semibold">Preview live ↗</Link>}</div><input name="title" defaultValue={cur?.title} placeholder="Title" required className="input font-semibold" /><textarea name="body" rows={18} defaultValue={cur?.draft ?? cur?.body} className="input font-mono !text-sm" /><p className="text-xs text-slate-500">Separate paragraphs with a blank line. For FAQ items, put a question ending in “?” on the first line and the answer below it.</p>{cur?.draft && <p className="text-xs text-amber-600">You are editing an unpublished draft.</p>}<div className="flex gap-2"><button name="mode" value="draft" className="btn btn-outline">Save Draft</button><button name="mode" value="publish" className="btn btn-green">Publish</button></div></form>
      {versions.length > 0 && <div className="card p-6"><h3 className="font-bold mb-3">Change history</h3>{versions.map((v) => <form key={v.id} action={restoreVersion} className="flex justify-between items-center border-b py-2 text-sm"><input type="hidden" name="id" value={v.id} /><span>{fmtDate(v.createdAt)} – {v.title} <span className="text-slate-400">({v.body.length} chars)</span></span><button className="text-royal font-semibold text-xs">Restore</button></form>)}</div>}</div> : <p className="text-slate-500 text-sm p-6">Select a page to edit.</p>}</div>;
}