import { BlogCategoryOption, BlogGridBaseProps } from "./types";

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 BlogGridBase({
  title = "recent articles",
  description,
  paginatedArticles,
  totalArticles,
  currentPage,
  totalPages,
  selectedCategory,
  categoryOptions,
  onCategoryChange,
  onPageChange,
  getPageHref,
  asList = false,
  imageComponent,
}: BlogGridBaseProps) {
  function handleCategoryChange(value: unknown) {
    if (!value || Array.isArray(value)) return;
    const cat = value as BlogCategoryOption;
    onCategoryChange?.(cat);
  }

  function handlePageChange(page: number) {
    onPageChange?.(page);
  }

  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">
        {description && (
          <Text as="p" className="body1 mb-4 w-full text-center md:mb-6">
            {description}
          </Text>
        )}
        <Text className="w-full text-center text-heading5 font-black lowercase text-text-secondary md:w-auto md:text-left">
          {title}
        </Text>
        {categoryOptions.length > 0 && (
          <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 / list */}
      {paginatedArticles.length > 0 ? (
        <div
          className={
            asList
              ? "mx-auto flex max-w-[1200px] flex-col gap-1 px-5 pb-16"
              : "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}
                imageComponent={imageComponent}
                asGrid={!asList}
                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>
  );
}