"use client";

import { Suspense, useEffect, useState } from "react";
import Image from "next/image";
import Link from "next/link";
import { useSearchParams } from "next/navigation";
import { Pencil } from "lucide-react";
import { BlogBodyRenderer } from "@/components/BlogBodyRenderer";
import { AdminGuard } from "@/components/admin/AdminGuard";
import { AdminShell } from "@/components/admin/AdminShell";
import { adminRequest, type AdminBlog } from "@/lib/admin-api";

export default function BlogDetailsPage() {
  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 blog details...
        </div>
      }
    >
      <BlogDetailsContent />
    </Suspense>
  );
}

function BlogDetailsContent() {
  const searchParams = useSearchParams();
  const id = searchParams.get("id");
  const [blog, setBlog] = useState<AdminBlog | null>(null);
  const [errorMessage, setErrorMessage] = useState("");

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

    adminRequest<{ blog: AdminBlog }>(`/api/admin/blogs/${id}`)
      .then((data) => setBlog(data.blog))
      .catch((error) => {
        setErrorMessage(error instanceof Error ? error.message : "Could not load blog");
      });
  }, [id]);

  return (
    <AdminGuard>
      <AdminShell title="Blog details" lead="Review the saved content and SEO values.">
        {errorMessage ? (
          <p className="rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm font-semibold text-destructive">
            {errorMessage}
          </p>
        ) : null}

        {!blog && !errorMessage ? (
          <p className="text-sm font-semibold text-muted-foreground">Loading blog...</p>
        ) : null}

        {blog ? (
          <article className="rounded-lg border border-border bg-white p-6 shadow-sm">
            <div className="space-y-6">
              <div className="flex flex-col gap-5 lg:flex-row lg:items-start lg:justify-between">
                <div className="min-w-0 flex-1">
                  <p className="text-xs font-black uppercase tracking-[0.16em] text-primary">
                    {blog.category}
                  </p>
                  <h2 className="mt-2 text-3xl font-black tracking-tight text-foreground">
                    {blog.title}
                  </h2>
                  <p className="mt-2 text-sm font-semibold text-muted-foreground">/{blog.slug}</p>
                </div>
                <div className="w-full shrink-0 lg:w-80">
                  <div className="relative aspect-[3/2] overflow-hidden rounded-md border border-border bg-slate-100">
                    <Image src={blog.image} alt={blog.imageAlt} fill className="object-cover" />
                  </div>
                  <Link
                    href={`/admin/blogs/edit?id=${blog.id}`}
                    className="mt-3 inline-flex h-10 w-full items-center justify-center gap-2 rounded-md bg-primary px-4 text-sm font-black text-primary-foreground"
                  >
                    <Pencil className="h-4 w-4" />
                    Edit
                  </Link>
                </div>
              </div>

              <div className="grid gap-4 md:grid-cols-2">
                <Info label="Date" value={blog.date} />
                <Info label="Read time" value={blog.readTime} />
                <Info label="Meta description" value={blog.metaDescription ?? blog.excerpt} />
                <Info label="OG description" value={blog.ogDescription ?? blog.excerpt} />
              </div>

              <div>
                <h3 className="text-sm font-black uppercase tracking-[0.14em] text-muted-foreground">
                  Short description
                </h3>
                <p className="mt-2 text-sm leading-7 text-foreground">{blog.excerpt}</p>
              </div>

              <div className="space-y-5">
                {blog.sections.map((section) => (
                  <section key={section.heading}>
                    <h3 className="text-xl font-black tracking-tight text-foreground">
                      {section.heading}
                    </h3>
                    <div className="mt-2">
                      <BlogBodyRenderer blocks={section.body} size="sm" />
                    </div>
                  </section>
                ))}
              </div>
            </div>
          </article>
        ) : null}
      </AdminShell>
    </AdminGuard>
  );
}

function Info({ label, value }: { label: string; value: string }) {
  return (
    <div className="rounded-md bg-slate-50 p-3">
      <p className="text-xs font-black uppercase tracking-[0.14em] text-muted-foreground">
        {label}
      </p>
      <p className="mt-1 break-words text-sm font-semibold text-foreground">{value}</p>
    </div>
  );
}