"use client";

import { useEffect, useRef } from "react";
import { BlogCategoryOption, BlogGridProps } from "./types";
import { usePathname, useRouter, useSearchParams } from "next/navigation";

import { Pagination } from "@shared/components/pagination";
import { Select } from "@shared/components/select";
import { Text } from "@shared/components/text";
import { BlogCard } from "@shared/contentful/blocks/cards/blog-card";

export function BlogGrid({
  paginatedArticles,
  totalArticles,
  currentPage,
  totalPages,
  selectedCategory,
  categoryOptions,
}: BlogGridProps) {
  const router = useRouter();
  const pathname = usePathname();
  const searchParams = useSearchParams();
  const isInitialMount = useRef(true);

  useEffect(() => {
    if (isInitialMount.current) {
      isInitialMount.current = false;
      return;
    }
    window.scrollTo({ top: 0, behavior: "smooth" });
  }, [currentPage]);

  function updateQueryParams(key: string, value: string) {
    const params = new URLSearchParams(searchParams.toString());
    if (value) {
      params.set(key, value);
    } else {
      params.delete(key);
    }
    // Delete page when category changes
    if (key === "category") {
      params.delete("page");
    }
    router.push(`${pathname}?${params.toString()}`, { scroll: false });
  }

  function handleCategoryChange(value: unknown) {
    if (!value || Array.isArray(value)) return;
    const cat = value as BlogCategoryOption;
    updateQueryParams("category", cat.value === "all" ? "" : cat.value);
  }

  function handlePageChange(_page: number) {
    // Scroll is handled by the useEffect on currentPage change
  }

  function getPageHref(page: number): string {
    const params = new URLSearchParams(searchParams.toString());
    if (page === 1) {
      params.delete("page");
    } else {
      params.set("page", page.toString());
    }
    const qs = params.toString();
    return qs ? `${pathname}?${qs}` : pathname;
  }

  return (
    <section
      aria-label="Blog articles"
      data-section-type={"blogs-grid"}
      data-section-index={"0"}
    >
      {/* Controls bar */}
      <div className="mx-auto flex max-w-[1200px] flex-wrap items-center justify-between gap-3 px-6 pb-6">
        <Text className="w-full text-center text-heading5 font-black lowercase text-text-secondary md:w-auto md:text-left">
          recent articles
        </Text>

        <div className="flex w-full flex-col-reverse gap-3 md:w-auto md:flex-row md:items-center md:gap-6">
          {/* Showing count */}
          <Text className="whitespace-nowrap text-center text-label3 font-bold text-text-info md:text-right md:text-label2">
            <Text as="span" className="hidden md:block">
              showing
            </Text>
            <strong className="block text-nowrap font-bold text-text-info">
              <Text as="span" className="md:hidden">
                showing{" "}
              </Text>
              {paginatedArticles.length} of {totalArticles} articles
            </strong>
          </Text>

          {/* Filter dropdown */}
          <Select
            options={categoryOptions}
            value={selectedCategory}
            onChange={handleCategoryChange}
            className="w-full md:w-[280px]"
          />
        </div>
      </div>

      {/* Articles grid */}
      {paginatedArticles.length > 0 ? (
        <div className="mx-auto grid max-w-[1200px] grid-cols-1 gap-6 px-5 pb-16 sm:grid-cols-2 lg:grid-cols-3">
          {paginatedArticles.map((article, index) => {
            const href = article.slug.startsWith("/")
              ? article.slug
              : `/${article.slug}`;
            const coverImage = article?.cover?.url
              ? {
                  src: article?.cover?.url,
                  alt:
                    article?.cover?.title ||
                    article?.title ||
                    "Blog article image",
                  width: article?.cover?.width || 600,
                  height: article?.cover?.height || 338,
                }
              : undefined;

            return (
              <BlogCard
                key={article.slug}
                href={href}
                title={article.title}
                description={article.shortDescription}
                date={article.blogCreationDate}
                category={article.category}
                image={coverImage}
                index={index}
              />
            );
          })}
        </div>
      ) : (
        <Text className="px-6 py-12 text-center text-text-info">
          No articles found.
        </Text>
      )}

      {/* Pagination */}
      {totalPages > 1 && (
        <Pagination
          currentPage={currentPage}
          totalPages={totalPages}
          getPageHref={getPageHref}
          onPageChange={handlePageChange}
          ariaLabel="Blog article pagination"
        />
      )}
    </section>
  );
}