"use client";

import { Suspense, useEffect, useRef, useState } from "react";
import Link from "next/link";
import { useRouter, useSearchParams } from "next/navigation";
import { AdminGuard } from "@/components/admin/AdminGuard";
import { AdminShell } from "@/components/admin/AdminShell";
import { BlogBodyEditor } from "@/components/admin/BlogBodyEditor";
import { BlogImageUploader } from "@/components/admin/BlogImageUploader";
import { adminRequest, type AdminBlog } from "@/lib/admin-api";

export default function EditBlogPage() {
  return (
    <Suspense
      fallback={
        <div className="min-h-screen bg-slate-50 px-4 py-10 font-['Space_Grotesk'] text-sm font-semibold text-muted-foreground">
          Loading editor...
        </div>
      }
    >
      <EditBlogContent />
    </Suspense>
  );
}

function EditBlogContent() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const formRef = useRef<HTMLFormElement>(null);
  const id = searchParams.get("id");
  const [blog, setBlog] = useState<AdminBlog | null>(null);
  const [title, setTitle] = useState("");
  const [slug, setSlug] = useState("");
  const [imageUrl, setImageUrl] = useState("");
  const [imageAlt, setImageAlt] = useState("");
  const [editorText, setEditorText] = useState("");
  const [status, setStatus] = useState<"loading" | "idle" | "saving" | "error">("loading");
  const [errorMessage, setErrorMessage] = useState("");

  useEffect(() => {
    if (!id) {
      setStatus("error");
      setErrorMessage("Missing blog id");
      return;
    }

    adminRequest<{ blog: AdminBlog }>(`/api/admin/blogs/${id}`)
      .then((data) => {
        setBlog(data.blog);
        setTitle(data.blog.title);
        setSlug(data.blog.slug);
        setImageUrl(data.blog.image);
        setImageAlt(data.blog.imageAlt);
        setEditorText(data.blog.sections[0]?.body.join("\n\n") ?? "");
        setStatus("idle");
      })
      .catch((error) => {
        setStatus("error");
        setErrorMessage(error instanceof Error ? error.message : "Could not load blog");
      });
  }, [id]);

  async function submit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();

    if (!id) {
      return;
    }

    setStatus("saving");
    setErrorMessage("");

    const formData = new FormData(e.currentTarget);
    const body = String(formData.get("body") ?? "")
      .split(/\n+/)
      .map((paragraph) => paragraph.trim())
      .filter(Boolean);
    const shortDescription = String(formData.get("excerpt") ?? "");
    const image = String(formData.get("image") ?? "");

    try {
      await adminRequest(`/api/admin/blogs/${id}`, {
        method: "PUT",
        body: JSON.stringify({
          slug: String(formData.get("slug") ?? ""),
          title: String(formData.get("title") ?? ""),
          excerpt: shortDescription,
          metaDescription: shortDescription,
          ogDescription: shortDescription,
          category: String(formData.get("category") ?? ""),
          date: String(formData.get("date") ?? ""),
          readTime: String(formData.get("readTime") ?? ""),
          image,
          metaImage: image,
          ogImage: image,
          imageAlt: String(formData.get("imageAlt") ?? ""),
          sections: [
            {
              heading: String(formData.get("sectionHeading") ?? ""),
              body,
            },
          ],
        }),
      });

      router.push("/admin/blogs");
    } catch (error) {
      setStatus("error");
      setErrorMessage(error instanceof Error ? error.message : "Could not update blog");
    }
  }

  function setField(name: string, value: string) {
    const field = formRef.current?.elements.namedItem(name);

    if (field instanceof HTMLInputElement || field instanceof HTMLTextAreaElement) {
      field.value = value;
    }
  }

  const input =
    "h-11 w-full rounded-md border border-border bg-white px-3 text-sm font-semibold outline-none transition focus:border-primary focus:ring-2 focus:ring-primary/15";
  const textarea =
    "min-h-28 w-full rounded-md border border-border bg-white px-3 py-3 text-sm font-semibold outline-none transition focus:border-primary focus:ring-2 focus:ring-primary/15";
  const label = "mb-1.5 block text-xs font-black uppercase tracking-[0.14em] text-muted-foreground";
  const firstSection = blog?.sections[0];

  return (
    <AdminGuard>
      <AdminShell title="Edit blog" lead="Update content, SEO description, and image values.">
        {status === "loading" ? (
          <p className="text-sm font-semibold text-muted-foreground">Loading blog...</p>
        ) : null}

        {blog ? (
          <form
            ref={formRef}
            onSubmit={submit}
            className="rounded-lg border border-border bg-white p-5 shadow-sm"
          >
            <div className="grid gap-5 lg:grid-cols-2">
              <Field
                label="Title"
                name="title"
                defaultValue={blog.title}
                onChange={(event) => setTitle(event.currentTarget.value)}
                className={input}
              />
              <Field
                label="Slug"
                name="slug"
                defaultValue={blog.slug}
                onChange={(event) => setSlug(event.currentTarget.value)}
                className={input}
              />
              <Field
                label="Category"
                name="category"
                defaultValue={blog.category}
                className={input}
              />
              <Field label="Date" name="date" defaultValue={blog.date} className={input} />
              <Field
                label="Read time"
                name="readTime"
                defaultValue={blog.readTime}
                className={input}
              />
              <input type="hidden" name="image" value={imageUrl} readOnly />
              <div className="lg:col-span-2">
                <BlogImageUploader
                  slug={slug}
                  title={title}
                  currentImageUrl={imageUrl}
                  currentImageAlt={imageAlt}
                  onUploaded={(imageUrl) => {
                    setImageUrl(imageUrl);
                    setImageAlt(`${title || slug} image`);
                  }}
                />
              </div>
              <div className="lg:col-span-2">
                <Field
                  label="Image alt text"
                  name="imageAlt"
                  value={imageAlt}
                  onChange={(event) => setImageAlt(event.currentTarget.value)}
                  className={input}
                />
              </div>
              <div className="lg:col-span-2">
                <label className={label}>Short description</label>
                <textarea
                  required
                  name="excerpt"
                  defaultValue={blog.excerpt}
                  className={textarea}
                />
                <p className="mt-2 text-xs font-semibold text-muted-foreground">
                  Used as meta description and OG description.
                </p>
              </div>
              <div className="lg:col-span-2">
                <Field
                  label="Section heading"
                  name="sectionHeading"
                  defaultValue={firstSection?.heading ?? ""}
                  className={input}
                />
              </div>
              <div className="lg:col-span-2">
                <label className={label}>Section body</label>
                <BlogBodyEditor value={editorText} onChange={setEditorText} />
              </div>
            </div>

            {status === "error" ? (
              <p className="mt-5 rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm font-semibold text-destructive">
                {errorMessage}
              </p>
            ) : null}

            <div className="sticky bottom-0 z-20 -mx-5 mt-6 flex items-center justify-end gap-3 border-t border-border bg-white/95 px-5 py-4 backdrop-blur">
              <Link
                href="/admin/blogs"
                className="inline-flex h-11 items-center justify-center rounded-md border border-border px-5 text-sm font-black text-muted-foreground transition hover:bg-slate-100 hover:text-foreground"
              >
                Cancel
              </Link>
              <button
                disabled={status === "saving"}
                className="h-11 rounded-md bg-primary px-5 text-sm font-black text-primary-foreground transition hover:opacity-95 disabled:opacity-70"
              >
                {status === "saving" ? "Saving..." : "Save changes"}
              </button>
            </div>
          </form>
        ) : null}
      </AdminShell>
    </AdminGuard>
  );
}

function Field({
  label,
  ...props
}: React.InputHTMLAttributes<HTMLInputElement> & {
  label: string;
}) {
  return (
    <div>
      <label className="mb-1.5 block text-xs font-black uppercase tracking-[0.14em] text-muted-foreground">
        {label}
      </label>
      <input required {...props} />
    </div>
  );
}