import { deletePage, getPageById, updatePage } from "@cms/db"
import { Button } from "@cms/ui/button"
import Link from "next/link"
import { redirect } from "next/navigation"

import { AdminShell } from "@/components/admin-shell"
import { requirePermissionForRoute } from "@/lib/route-guards"

export const dynamic = "force-dynamic"

type SearchParamsInput = Record<string, string | string[] | undefined>

type PageProps = {
  params: Promise<{ id: string }>
  searchParams: Promise<SearchParamsInput>
}

function readFirstValue(value: string | string[] | undefined): string | null {
  if (Array.isArray(value)) {
    return value[0] ?? null
  }

  return value ?? null
}

function readInputString(formData: FormData, field: string): string {
  const value = formData.get(field)
  return typeof value === "string" ? value.trim() : ""
}

function readNullableString(formData: FormData, field: string): string | null {
  const value = readInputString(formData, field)
  return value.length > 0 ? value : null
}

function redirectWithState(pageId: string, params: { notice?: string; error?: string }) {
  const query = new URLSearchParams()

  if (params.notice) {
    query.set("notice", params.notice)
  }

  if (params.error) {
    query.set("error", params.error)
  }

  const value = query.toString()
  redirect(value ? `/pages/${pageId}?${value}` : `/pages/${pageId}`)
}

export default async function PageEditorPage({ params, searchParams }: PageProps) {
  const role = await requirePermissionForRoute({
    nextPath: "/pages",
    permission: "pages:read",
    scope: "team",
  })
  const resolvedParams = await params
  const pageId = resolvedParams.id

  const [resolvedSearchParams, pageRecord] = await Promise.all([searchParams, getPageById(pageId)])

  if (!pageRecord) {
    redirect("/pages?error=Page+not+found")
  }

  const page = pageRecord
  const notice = readFirstValue(resolvedSearchParams.notice)
  const error = readFirstValue(resolvedSearchParams.error)

  async function updatePageAction(formData: FormData) {
    "use server"

    await requirePermissionForRoute({
      nextPath: "/pages",
      permission: "pages:write",
      scope: "team",
    })

    try {
      await updatePage({
        id: pageId,
        title: readInputString(formData, "title"),
        slug: readInputString(formData, "slug"),
        status: readInputString(formData, "status"),
        summary: readNullableString(formData, "summary"),
        content: readInputString(formData, "content"),
        seoTitle: readNullableString(formData, "seoTitle"),
        seoDescription: readNullableString(formData, "seoDescription"),
      })
    } catch {
      redirectWithState(pageId, {
        error: "Failed to update page. Validate values and try again.",
      })
    }

    redirectWithState(pageId, {
      notice: "Page updated.",
    })
  }

  async function deletePageAction() {
    "use server"

    await requirePermissionForRoute({
      nextPath: "/pages",
      permission: "pages:write",
      scope: "team",
    })

    try {
      await deletePage(pageId)
    } catch {
      redirectWithState(pageId, {
        error: "Failed to delete page. Remove linked navigation references first.",
      })
    }

    redirect("/pages?notice=Page+deleted")
  }

  return (
    <AdminShell
      role={role}
      activePath="/pages"
      badge="Admin App"
      title="Page Editor"
      description="Edit page metadata, content, and publication status."
    >
      {notice ? (
        <section className="rounded-xl border border-emerald-300 bg-emerald-50 px-4 py-3 text-sm text-emerald-800">
          {notice}
        </section>
      ) : null}

      {error ? (
        <section className="rounded-xl border border-red-300 bg-red-50 px-4 py-3 text-sm text-red-800">
          {error}
        </section>
      ) : null}

      <section className="rounded-xl border border-neutral-200 p-6">
        <div className="flex flex-wrap items-center justify-between gap-3">
          <div>
            <h2 className="text-xl font-medium">{page.title}</h2>
            <p className="mt-1 text-xs text-neutral-600">ID: {page.id}</p>
          </div>
          <Link href="/pages" className="text-sm text-neutral-700 underline underline-offset-2">
            Back to pages
          </Link>
        </div>

        <form action={updatePageAction} className="mt-6 space-y-3">
          <div className="grid gap-3 md:grid-cols-3">
            <label className="space-y-1 md:col-span-2">
              <span className="text-xs text-neutral-600">Title</span>
              <input
                name="title"
                defaultValue={page.title}
                required
                className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
              />
            </label>
            <label className="space-y-1">
              <span className="text-xs text-neutral-600">Status</span>
              <select
                name="status"
                defaultValue={page.status}
                className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
              >
                <option value="draft">draft</option>
                <option value="published">published</option>
              </select>
            </label>
          </div>

          <label className="space-y-1">
            <span className="text-xs text-neutral-600">Slug</span>
            <input
              name="slug"
              defaultValue={page.slug}
              required
              className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
            />
          </label>

          <label className="space-y-1">
            <span className="text-xs text-neutral-600">Summary</span>
            <input
              name="summary"
              defaultValue={page.summary ?? ""}
              className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
            />
          </label>

          <label className="space-y-1">
            <span className="text-xs text-neutral-600">Content</span>
            <textarea
              name="content"
              rows={10}
              defaultValue={page.content}
              required
              className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
            />
          </label>

          <div className="grid gap-3 md:grid-cols-2">
            <label className="space-y-1">
              <span className="text-xs text-neutral-600">SEO title</span>
              <input
                name="seoTitle"
                defaultValue={page.seoTitle ?? ""}
                className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
              />
            </label>
            <label className="space-y-1">
              <span className="text-xs text-neutral-600">SEO description</span>
              <input
                name="seoDescription"
                defaultValue={page.seoDescription ?? ""}
                className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
              />
            </label>
          </div>

          <Button type="submit">Save page</Button>
        </form>
      </section>

      <section className="rounded-xl border border-red-300 bg-red-50 p-6">
        <h3 className="text-lg font-medium text-red-800">Danger Zone</h3>
        <p className="mt-1 text-sm text-red-700">
          Deleting this page is permanent and may break linked navigation items.
        </p>
        <form action={deletePageAction} className="mt-4">
          <Button type="submit" variant="secondary" className="border border-red-300 text-red-800">
            Delete page
          </Button>
        </form>
      </section>
    </AdminShell>
  )
}