import Link from "next/link";
import Image from "next/image";
import { getPublicBlogCategories, getPublicBlogs, resolvePublicMediaUrl } from "@/lib/public-blog";
import { getPublicPageSeo } from "@/lib/public-page-seo";
import { DEFAULT_OG_IMAGE, resolveOgImageUrl } from "@/lib/site-og-image";
import BlogSearchTracker from "@/components/blog/blog-search-tracker";
import type { Metadata } from "next";

const SITE_URL = (process.env.NEXT_PUBLIC_SITE_URL || "https://nizamify.com").replace(/\/$/, "");

function plainText(value: string) {
  return value.replace(/<[^>]+>/g, " ").replace(/\s+/g, " ").trim();
}

export async function generateMetadata({
  searchParams,
}: {
  searchParams?: { category?: string };
}): Promise<Metadata> {
  const category = searchParams?.category?.trim();
  if (!category) {
    const seo = await getPublicPageSeo("blogs");
    const title = seo?.metaTitle?.trim() || seo?.title?.trim() || "Blogs";
    const description =
      seo?.metaDescription?.trim() ||
      "Read the latest published blog posts, product updates, and guides from Nizamify.";
    const canonical = "/blogs";
    const keywords = Array.isArray(seo?.metaKeywords) && seo.metaKeywords.length > 0
      ? seo.metaKeywords
      : ["Nizamify blog", "real estate insights", "product updates", "guides"];
    const image = resolveOgImageUrl(seo?.image);

    return {
      title,
      description,
      keywords,
      alternates: { canonical },
      robots: { index: true, follow: true },
      openGraph: {
        title,
        description,
        url: `${SITE_URL}${canonical}`,
        type: "website",
        images: [{ url: image }],
      },
      twitter: {
        card: "summary_large_image",
        title,
        description,
        images: [image],
      },
    };
  }

  const title = category ? `${category} Blogs` : "Blogs";
  const description = category
    ? `Read latest ${category} blog posts and updates from Nizamify.`
    : "Read the latest published blog posts, product updates, and guides from Nizamify.";
  const canonical = "/blogs";

  return {
    title,
    description,
    keywords: ["Nizamify blog", "real estate insights", "product updates", "guides"],
    alternates: {
      canonical,
    },
    robots: {
      index: true,
      follow: true,
    },
    openGraph: {
      title,
      description,
      url: `${SITE_URL}${canonical}`,
      type: "website",
      images: [{ url: DEFAULT_OG_IMAGE }],
    },
    twitter: {
      card: "summary_large_image",
      title,
      description,
      images: [DEFAULT_OG_IMAGE],
    },
  };
}

export default async function BlogsPage({
  searchParams,
}: {
  searchParams?: { category?: string; search?: string; sort?: "popular" | "latest" };
}) {
  const selectedCategory = searchParams?.category || "";
  const selectedSearch = (searchParams?.search || "").trim();
  const selectedSort = searchParams?.sort === "latest" ? "latest" : "popular";
  const makeBlogsHref = (params: { category?: string; search?: string; sort?: string }) => {
    const query = new URLSearchParams();
    if (params.category) query.set("category", params.category);
    if (params.search) query.set("search", params.search);
    if (params.sort) query.set("sort", params.sort);
    const suffix = query.toString();
    return `/blogs${suffix ? `?${suffix}` : ""}`;
  };
  const [categories, blogs] = await Promise.all([
    getPublicBlogCategories(),
    getPublicBlogs({
      category: selectedCategory || undefined,
      search: selectedSearch || undefined,
      sort: selectedSort,
    }),
  ]);
  const listSchema = {
    "@context": "https://schema.org",
    "@type": "Blog",
    name: "Nizamify Blog",
    url: `${SITE_URL}/blogs`,
    publisher: {
      "@type": "Organization",
      name: "Nizamify",
      logo: { "@type": "ImageObject", url: `${SITE_URL}/favicon.svg` },
    },
    blogPost: blogs.map((blog) => ({
      "@type": "BlogPosting",
      headline: blog.title,
      url: `${SITE_URL}/blogs/${blog.slug}`,
      datePublished: blog.publishedAt || blog.createdAt,
      articleSection: blog.category?.name || "General",
      description: blog.excerpt || plainText(blog.content).slice(0, 180),
    })),
  };

  return (
    <div className="container py-12">
      {selectedSearch ? <BlogSearchTracker query={selectedSearch} resultCount={blogs.length} /> : null}
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(listSchema) }}
      />
      <h1 className="mb-2 text-3xl font-bold text-slate-900">Nizamify Blog</h1>
      <p className="mb-6 text-slate-600">Guides, tips, and insights on smart home &amp; business automation in Pakistan.</p>

      <form action="/blogs" method="get" className="mb-6 grid gap-3 rounded-xl border bg-white p-4 md:grid-cols-4">
        {selectedCategory ? <input type="hidden" name="category" value={selectedCategory} /> : null}
        <input
          type="search"
          name="search"
          defaultValue={selectedSearch}
          placeholder="Search blogs..."
          className="rounded-md border px-3 py-2 text-sm md:col-span-3"
        />
        <div className="flex gap-2">
          <select
            name="sort"
            defaultValue={selectedSort}
            className="w-full rounded-md border px-3 py-2 text-sm"
          >
            <option value="popular">Most popular</option>
            <option value="latest">Latest</option>
          </select>
          <button type="submit" className="rounded-md bg-primary px-4 py-2 text-sm font-medium text-white">
            Search
          </button>
        </div>
      </form>

      <div className="mb-8 flex flex-wrap gap-2">
        <Link
          href={makeBlogsHref({ search: selectedSearch || undefined, sort: selectedSort })}
          className={`rounded-full border px-4 py-1.5 text-sm ${selectedCategory ? "bg-white" : "bg-primary text-white"}`}
        >
          All
        </Link>
        {categories.map((cat) => {
          const active = selectedCategory === cat.slug;
          return (
            <Link
              key={cat._id}
              href={makeBlogsHref({ category: cat.slug, search: selectedSearch || undefined, sort: selectedSort })}
              className={`rounded-full border px-4 py-1.5 text-sm ${active ? "bg-primary text-white" : "bg-white"}`}
            >
              {cat.name}
            </Link>
          );
        })}
      </div>

      {blogs.length === 0 ? (
        <div className="rounded-lg border bg-white p-8 text-center text-slate-500">
          Is category me abhi koi blog publish nahi hua.
        </div>
      ) : (
        <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
          {blogs.map((blog) => {
            const coverSrc = resolvePublicMediaUrl(blog.coverImage);
            return (
              <article
                key={blog._id}
                className="flex flex-col overflow-hidden rounded-xl border border-slate-100 bg-white shadow-sm transition-shadow hover:shadow-md"
              >
                <Link
                  href={`/blogs/${blog.slug}`}
                  className="relative block aspect-[1200/630] shrink-0 bg-slate-100 outline-none ring-offset-2 focus-visible:ring-2 focus-visible:ring-primary"
                >
                  {coverSrc ? (
                    <Image
                      src={coverSrc}
                      alt={blog.title}
                      fill
                      className="object-cover"
                      sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
                    />
                  ) : (
                    <div className="flex size-full items-center justify-center bg-gradient-to-br from-slate-100 to-slate-200 px-4 text-center text-xs font-medium text-slate-400">
                      No cover image
                    </div>
                  )}
                </Link>
                <div className="flex flex-1 flex-col p-5">
                  <p className="mb-2 text-xs uppercase tracking-wide text-primary">
                    {blog.category?.name || "General"}
                  </p>
                  <h2 className="mb-2 text-xl font-semibold text-slate-900">{blog.title}</h2>
                  <p className="line-clamp-4 flex-1 text-sm text-slate-600">
                    {blog.excerpt || plainText(blog.content)}
                  </p>
                  <Link
                    href={`/blogs/${blog.slug}`}
                    className="mt-4 inline-block text-sm font-medium text-primary hover:underline"
                  >
                    Read article
                  </Link>
                </div>
              </article>
            );
          })}
        </div>
      )}
    </div>
  );
}