"use client";

import { IconSearch, IconX } from "@tabler/icons-react";
import Fuse from "fuse.js";
import { useSearchParams } from "next/navigation";
import { useTranslations } from "next-intl";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import {
  Pagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from "@/components/ui/pagination";
import BlogCard from "./blog-card";

interface Post {
  category: string;
  categorySlug: string;
  date: string;
  description: string;
  image?: string;
  slug: string;
  tags: string[];
  title: string;
}

interface BlogSearchProps {
  categories: string[];
  locale: string;
  posts: Post[];
}

function useMediaQuery(query: string): boolean {
  const [matches, setMatches] = useState(false);

  useEffect(() => {
    const mql = window.matchMedia(query);
    setMatches(mql.matches);
    const handler = (e: MediaQueryListEvent) => setMatches(e.matches);
    mql.addEventListener("change", handler);
    return () => mql.removeEventListener("change", handler);
  }, [query]);

  return matches;
}

export function BlogSearch({ posts, locale, categories }: BlogSearchProps) {
  const t = useTranslations("blog");
  const searchParams = useSearchParams();
  const [query, setQuery] = useState("");
  const [activeCategory, setActiveCategory] = useState<string | null>(null);
  const [currentPage, setCurrentPage] = useState(1);
  const gridRef = useRef<HTMLDivElement>(null);

  const isDesktop = useMediaQuery("(min-width: 1024px)");
  const postsPerPage = isDesktop ? 9 : 6;

  useEffect(() => {
    const categoryParam = searchParams.get("category");
    if (categoryParam && categories.includes(categoryParam)) {
      setActiveCategory(categoryParam);
    }
  }, [searchParams, categories]);

  // Reset to page 1 when search or category changes
  useEffect(() => {
    setCurrentPage(1);
  }, []);

  const goToPage = useCallback((page: number) => {
    setCurrentPage(page);
    gridRef.current?.scrollIntoView({ behavior: "smooth", block: "start" });
  }, []);

  const fuse = useMemo(
    () =>
      new Fuse(posts, {
        keys: [
          { name: "title", weight: 0.4 },
          { name: "description", weight: 0.3 },
          { name: "tags", weight: 0.2 },
          { name: "category", weight: 0.1 },
        ],
        threshold: 0.4,
        includeScore: true,
      }),
    [posts]
  );

  const filteredPosts = useMemo(() => {
    let result = posts;

    if (query.trim()) {
      result = fuse.search(query).map((r) => r.item);
    }

    if (activeCategory) {
      result = result.filter((p) => p.category === activeCategory);
    }

    return result;
  }, [posts, query, activeCategory, fuse]);

  const totalPages = Math.ceil(filteredPosts.length / postsPerPage);
  const paginatedPosts = filteredPosts.slice(
    (currentPage - 1) * postsPerPage,
    currentPage * postsPerPage
  );

  const getPageNumbers = (
    current: number,
    total: number
  ): (number | "ellipsis")[] => {
    if (total <= 5) {
      return Array.from({ length: total }, (_, i) => i + 1);
    }
    const pages: (number | "ellipsis")[] = [1];
    if (current > 3) {
      pages.push("ellipsis");
    }
    const start = Math.max(2, current - 1);
    const end = Math.min(total - 1, current + 1);
    for (let i = start; i <= end; i++) {
      pages.push(i);
    }
    if (current < total - 2) {
      pages.push("ellipsis");
    }
    pages.push(total);
    return pages;
  };

  return (
    <>
      {/* Search + Filters */}
      <div className="mb-10 flex flex-col items-center space-y-4">
        {/* Search bar */}
        <div className="relative w-full max-w-md">
          <IconSearch
            className="absolute top-1/2 left-3.5 -translate-y-1/2 text-neutral-500"
            size={18}
            stroke={1.5}
          />
          <input
            className="w-full rounded-xl border border-white/10 bg-white/5 py-2.5 pr-10 pl-10 text-sm text-white placeholder:text-neutral-500 focus:border-[#fd105e]/50 focus:outline-none focus:ring-1 focus:ring-[#fd105e]/50"
            onChange={(e) => setQuery(e.target.value)}
            placeholder={t("searchPlaceholder")}
            type="search"
            value={query}
          />
          {query && (
            <button
              className="absolute top-1/2 right-3 -translate-y-1/2 text-neutral-500 hover:text-white"
              onClick={() => setQuery("")}
              type="button"
            >
              <IconX size={16} stroke={2} />
            </button>
          )}
        </div>

        {/* Category pills */}
        <div className="flex flex-wrap justify-center gap-2">
          <button
            className={`rounded-full px-4 py-1.5 font-semibold text-xs transition-colors duration-200 ${
              activeCategory
                ? "bg-white/5 text-neutral-400 hover:bg-white/10 hover:text-white"
                : "bg-[#fd105e] text-white"
            }`}
            onClick={() => setActiveCategory(null)}
            type="button"
          >
            {t("allCategories")}
          </button>
          {categories.map((cat) => (
            <button
              className={`rounded-full px-4 py-1.5 font-semibold text-xs transition-colors duration-200 ${
                activeCategory === cat
                  ? "bg-[#fd105e] text-white"
                  : "bg-white/5 text-neutral-400 hover:bg-white/10 hover:text-white"
              }`}
              key={cat}
              onClick={() =>
                setActiveCategory(activeCategory === cat ? null : cat)
              }
              type="button"
            >
              {cat}
            </button>
          ))}
        </div>
      </div>

      {/* Results */}
      <div ref={gridRef}>
        {paginatedPosts.length > 0 ? (
          <div className="grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
            {paginatedPosts.map((post, index) => (
              <BlogCard
                category={post.category}
                categorySlug={post.categorySlug}
                date={post.date}
                description={post.description}
                image={post.image}
                key={post.slug}
                locale={locale}
                priority={currentPage === 1 && index === 0}
                slug={post.slug}
                title={post.title}
              />
            ))}
          </div>
        ) : (
          <div className="flex flex-col items-center justify-center rounded-2xl border border-white/10 bg-white/5 py-20">
            <p className="text-lg text-neutral-400">{t("noPosts")}</p>
          </div>
        )}
      </div>

      {/* Pagination */}
      {totalPages > 1 && (
        <div className="mt-12 flex flex-col items-center gap-3 border-white/10 border-t pt-8">
          <Pagination>
            <PaginationContent>
              <PaginationItem className="mr-4">
                <PaginationPrevious
                  className={
                    currentPage === 1
                      ? "pointer-events-none opacity-50"
                      : "cursor-pointer"
                  }
                  href="#"
                  onClick={(e) => {
                    e.preventDefault();
                    if (currentPage > 1) {
                      goToPage(currentPage - 1);
                    }
                  }}
                />
              </PaginationItem>

              {getPageNumbers(currentPage, totalPages).map((page, idx, arr) =>
                page === "ellipsis" ? (
                  <PaginationItem key={`ellipsis-after-${arr[idx - 1]}`}>
                    <PaginationEllipsis />
                  </PaginationItem>
                ) : (
                  <PaginationItem key={page}>
                    <PaginationLink
                      className="cursor-pointer"
                      href="#"
                      isActive={page === currentPage}
                      onClick={(e) => {
                        e.preventDefault();
                        goToPage(page);
                      }}
                    >
                      {page}
                    </PaginationLink>
                  </PaginationItem>
                )
              )}

              <PaginationItem className="ml-4">
                <PaginationNext
                  className={
                    currentPage === totalPages
                      ? "pointer-events-none opacity-50"
                      : "cursor-pointer"
                  }
                  href="#"
                  onClick={(e) => {
                    e.preventDefault();
                    if (currentPage < totalPages) {
                      goToPage(currentPage + 1);
                    }
                  }}
                />
              </PaginationItem>
            </PaginationContent>
          </Pagination>

          <p className="text-neutral-500 text-sm">
            Page {currentPage} / {totalPages}
          </p>
        </div>
      )}
    </>
  );
}