"use client";

import { Pagination } from "@/components/ui/pagination";
import BlogCard from "@/components/website/blogs/blog-card";
import { FadeIn } from "@/components/website/ui/fade-in";
import type { BlogItem, Paginator } from "@/lib/website-types";
import { stripHtml } from "@/lib/website-types";
import { Search } from "lucide-react";
import { useTranslations } from "next-intl";
import { useMemo, useState } from "react";

const FALLBACK_IMAGES = [
  "/images/blogs/blog1.jpg",
  "/images/blogs/blog2.jpg",
  "/images/blogs/blog3.jpg",
];

interface BlogsContentProps {
  items: BlogItem[];
  paginator: Paginator;
  currentPage: number;
}

export default function BlogsContent({
  items,
  paginator,
  currentPage,
}: BlogsContentProps) {
  const t = useTranslations("blogsPage");
  const tPagination = useTranslations("ourWorks.pagination");

  const [searchQuery, setSearchQuery] = useState("");

  const filteredItems = useMemo(
    () =>
      searchQuery.trim()
        ? items.filter((b) =>
            b.title.toLowerCase().includes(searchQuery.toLowerCase())
          )
        : items,
    [items, searchQuery]
  );

  return (
    <section className="w-full px-4 sm:px-6 md:px-8 lg:px-12 xl:px-[120px] pt-12 sm:pt-14 md:pt-16 pb-20 sm:pb-24 md:pb-28 lg:pb-32 bg-background">
      <div className="flex flex-col gap-6 sm:gap-8 md:gap-10 w-full max-w-[1200px] mx-auto">

        <div className="relative w-full">
          <input
            type="text"
            placeholder={t("searchPlaceholder")}
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
            className="w-full h-14 px-4 pe-12 bg-card border border-border rounded-[12px] text-[14px] text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary"
          />
          <Search className="absolute end-4 top-1/2 -translate-y-1/2 size-6 text-muted-foreground" />
        </div>

        {filteredItems.length === 0 ? (
          <p className="py-12 text-center text-muted-foreground">
            {searchQuery ? t("noResults") : t("noBlogs")}
          </p>
        ) : (
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 w-full">
            {filteredItems.map((blog, index) => (
              <FadeIn key={blog.id} delay={0.1 * (index % 3)}>
                <BlogCard
                  id={blog.id}
                  title={blog.title}
                  description={stripHtml(blog.description)}
                  image={blog.image || FALLBACK_IMAGES[index % 3]}
                  imageAlt={blog.title}
                />
              </FadeIn>
            ))}
          </div>
        )}

        {paginator.total_pages > 1 && (
          <Pagination
            currentPage={currentPage}
            totalPages={paginator.total_pages}
            totalItems={paginator.total_count}
            itemsPerPage={paginator.per_page}
            showItemsPerPage={false}
            className="border-t-0"
            labels={{
              previous: tPagination("previous"),
              next: tPagination("next"),
              showing: tPagination("showing"),
              of: tPagination("of"),
              itemsPerPage: tPagination("itemsPerPage"),
            }}
          />
        )}
      </div>
    </section>
  );
}