import {
  deletePage,
  getPageById,
  listPageTranslations,
  updatePage,
  upsertPageTranslation,
} 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 { PageBlockEditor } from "@/components/pages/page-block-editor"
import { requirePermissionForRoute } from "@/lib/route-guards"

export const dynamic = "force-dynamic"

type SearchParamsInput = Record<string, string | string[] | undefined>
const SUPPORTED_LOCALES = ["de", "en", "es", "fr"] as const
type SupportedLocale = (typeof SUPPORTED_LOCALES)[number]

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}`)
}

function normalizeLocale(input: string | null): SupportedLocale {
  if (input && SUPPORTED_LOCALES.includes(input as SupportedLocale)) {
    return input as SupportedLocale
  }

  return "en"
}

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, translations] = await Promise.all([
    searchParams,
    getPageById(pageId),
    listPageTranslations(pageId),
  ])

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

  const page = pageRecord
  const notice = readFirstValue(resolvedSearchParams.notice)
  const error = readFirstValue(resolvedSearchParams.error)
  const selectedLocale = normalizeLocale(readFirstValue(resolvedSearchParams.locale))
  const selectedTranslation = translations.find((entry) => entry.locale === selectedLocale)

  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")
  }

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

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

    const locale = normalizeLocale(readInputString(formData, "locale"))

    try {
      await upsertPageTranslation({
        pageId,
        locale,
        title: readInputString(formData, "title"),
        summary: readNullableString(formData, "summary"),
        content: readInputString(formData, "content"),
        seoTitle: readNullableString(formData, "seoTitle"),
        seoDescription: readNullableString(formData, "seoDescription"),
      })
    } catch {
      redirect(`/pages/${pageId}?error=Failed+to+save+translation.&locale=${locale}`)
    }

    redirect(`/pages/${pageId}?notice=Translation+saved.&locale=${locale}`)
  }

  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>

          <PageBlockEditor name="content" initialContent={page.content} />

          <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-neutral-200 p-6">
        <div className="space-y-1">
          <h3 className="text-xl font-medium">Translations</h3>
          <p className="text-sm text-neutral-600">
            Add locale-specific page content. Missing locales fall back to base page fields.
          </p>
        </div>

        <div className="mt-4 flex flex-wrap gap-2">
          {SUPPORTED_LOCALES.map((locale) => {
            const isActive = locale === selectedLocale
            const hasTranslation = translations.some((entry) => entry.locale === locale)

            return (
              <Link
                key={locale}
                href={`/pages/${pageId}?locale=${locale}`}
                className={`inline-flex items-center gap-2 rounded border px-3 py-1.5 text-xs ${
                  isActive
                    ? "border-neutral-800 bg-neutral-900 text-white"
                    : "border-neutral-300 text-neutral-700"
                }`}
              >
                <span>{locale.toUpperCase()}</span>
                <span className={isActive ? "text-neutral-200" : "text-neutral-500"}>
                  {hasTranslation ? "saved" : "missing"}
                </span>
              </Link>
            )
          })}
        </div>

        {translations.length > 0 ? (
          <div className="mt-4 rounded border border-neutral-200">
            <table className="min-w-full text-left text-sm">
              <thead className="text-xs uppercase tracking-wide text-neutral-500">
                <tr>
                  <th className="px-3 py-2">Locale</th>
                  <th className="px-3 py-2">Title</th>
                  <th className="px-3 py-2">Updated</th>
                </tr>
              </thead>
              <tbody>
                {translations.map((translation) => (
                  <tr key={translation.id} className="border-t border-neutral-200">
                    <td className="px-3 py-2">{translation.locale.toUpperCase()}</td>
                    <td className="px-3 py-2">{translation.title}</td>
                    <td className="px-3 py-2 text-neutral-600">
                      {translation.updatedAt.toLocaleDateString("en-US")}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        ) : null}

        <form action={upsertPageTranslationAction} className="mt-6 space-y-3">
          <label className="space-y-1">
            <span className="text-xs text-neutral-600">Locale</span>
            <select
              name="locale"
              defaultValue={selectedLocale}
              className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
            >
              {SUPPORTED_LOCALES.map((locale) => (
                <option key={locale} value={locale}>
                  {locale.toUpperCase()}
                </option>
              ))}
            </select>
          </label>

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

          <PageBlockEditor
            name="content"
            initialContent={selectedTranslation?.content ?? page.content}
            label="Translation Blocks"
          />

          <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={selectedTranslation?.seoTitle ?? 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={selectedTranslation?.seoDescription ?? page.seoDescription ?? ""}
                className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
              />
            </label>
          </div>

          <Button type="submit">Save translation</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>
  )
}