"use client";

import { useState, useCallback } from "react";
import { Link, useRouter } from "@/i18n/routing";
import { Icon } from "@iconify/react";
import { useTranslations } from "next-intl";
import { Badge, Card, Typography } from "poyraz-ui/atoms";
import {
  ArticleCard,
  Pagination,
  PaginationContent,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from "poyraz-ui/molecules";
import { StaggerContainer, StaggerItem } from "@/components/motion-wrapper";
import type { BlogPageData } from "@/data/blog";

type BlogContentProps = {
  data: BlogPageData;
  section?: "blog" | "agenda";
};

function buildHref(
  params: { page?: number; category?: string; search?: string },
  section: "blog" | "agenda",
) {
  const qs = new URLSearchParams();

  if (params.page && params.page > 1) qs.set("page", String(params.page));
  if (params.category && params.category !== "All") qs.set("category", params.category);
  if (params.search) qs.set("search", params.search);

  const query = qs.toString();
  const basePath = section === "agenda" ? "/agenda" : "/blog";
  return query ? `${basePath}?${query}` : basePath;
}

export function BlogContent({ data, section = "blog" }: BlogContentProps) {
  const router = useRouter();
  const t = useTranslations("Blog");
  const agendaT = useTranslations("Agenda");
  const isAgenda = section === "agenda";
  const [searchInput, setSearchInput] = useState(data.searchQuery);
  const pageNumbers = Array.from({ length: data.totalPages }, (_, i) => i + 1);
  const hasArticles = data.articles.length > 0;

  const submitSearch = useCallback(
    (value: string) => {
      const trimmed = value.trim();
      router.push(buildHref({ category: data.selectedCategory, search: trimmed }, section));
    },
    [router, data.selectedCategory, section],
  );

  const clearFilters = useCallback(() => {
    setSearchInput("");
    router.push(section === "agenda" ? "/agenda" : "/blog");
  }, [router, section]);

  return (
    <section className="flex h-full flex-col gap-4 overflow-y-auto">
      {/* Filtre Çubuğu */}
      <Card className="rounded-sm border-border p-4">
        <div className="flex flex-col gap-3">
          {/* Kategoriler */}
          {!isAgenda && (
            <div className="flex flex-wrap items-center gap-2">
              <Typography variant="small" className="mr-1 text-muted-foreground">
                {t("categories")}:
              </Typography>
              {data.categories.map((category) => (
                <Link
                  key={category}
                  href={buildHref({ category, search: data.searchQuery }, section)}
                >
                  <Badge
                    variant={category === data.selectedCategory ? "default" : "outline"}
                    className="cursor-pointer rounded-sm transition-colors"
                  >
                    {category}
                  </Badge>
                </Link>
              ))}
            </div>
          )}

          {/* Arama */}
          <div className="relative">
            <Icon
              icon="mdi:magnify"
              width={18}
              height={18}
              className="pointer-events-none absolute top-1/2 left-3 -translate-y-1/2 text-muted-foreground"
            />
            <input
              id={isAgenda ? "agenda-search" : "blog-search"}
              aria-label={isAgenda ? agendaT("searchPlaceholder") : t("searchPlaceholder")}
              type="text"
              value={searchInput}
              onChange={(e) => setSearchInput(e.target.value)}
              onKeyDown={(e) => {
                if (e.key === "Enter") submitSearch(searchInput);
              }}
              placeholder={isAgenda ? agendaT("searchPlaceholder") : t("searchPlaceholder")}
              className="w-full rounded-sm border border-border bg-background py-2 pr-10 pl-9 text-sm text-foreground placeholder:text-muted-foreground focus:border-red-600 focus:ring-1 focus:ring-red-600/30 focus:outline-none"
            />
            {searchInput && (
              <button
                type="button"
                onClick={() => {
                  setSearchInput("");
                  submitSearch("");
                }}
                className="absolute top-1/2 right-3 -translate-y-1/2 cursor-pointer text-muted-foreground transition-colors hover:text-foreground"
              >
                <Icon icon="mdi:close" width={16} height={16} />
              </button>
            )}
          </div>
        </div>
      </Card>

      {/* Aktif filtre göstergesi */}
      {(data.searchQuery || data.selectedCategory !== "All") && (
        <div className="flex items-center gap-2">
          <Typography variant="small" className="text-muted-foreground">
            {data.articles.length} {t("results")}
            {data.searchQuery ? ` · "${data.searchQuery}"` : ""}
            {data.selectedCategory !== "All" ? ` · ${data.selectedCategory}` : ""}
          </Typography>
          <button
            type="button"
            onClick={clearFilters}
            className="inline-flex cursor-pointer items-center gap-1 rounded-sm border border-border px-2 py-0.5 text-xs text-muted-foreground transition-colors hover:text-foreground"
          >
            <Icon icon="mdi:filter-remove-outline" width={14} height={14} />
            {t("clear")}
          </button>
        </div>
      )}

      {/* Yazı Kartları */}
      <div className="space-y-3">
        {hasArticles ? (
          <StaggerContainer className="grid gap-3 md:grid-cols-3">
            {data.articles.map((post) => (
              <StaggerItem key={post.id}>
                <ArticleCard
                  image={post.image}
                  category={post.category}
                  title={post.title}
                  excerpt={post.excerpt}
                  date={post.date}
                  readTime={post.readTime}
                  href={post.href}
                  className="rounded-sm border-border [&_h3]:line-clamp-2 [&_h3]:min-h-[2.5rem] [&_p]:line-clamp-3"
                  author={{ name: post.author, avatar: "/logo/logo.png" }}
                />
              </StaggerItem>
            ))}
          </StaggerContainer>
        ) : (
          <Card className="rounded-sm border-border p-8 text-center">
            <Icon
              icon="mdi:file-search-outline"
              width={40}
              height={40}
              className="mx-auto mb-3 text-muted-foreground/50"
            />
            <Typography variant="p" className="text-muted-foreground">
              {data.searchQuery
                ? isAgenda
                  ? agendaT("noSearch", { search: data.searchQuery })
                  : t("noSearch", { search: data.searchQuery })
                : data.selectedCategory === "All"
                  ? isAgenda
                    ? agendaT("empty")
                    : t("empty")
                  : t("emptyCategory", { category: data.selectedCategory })}
            </Typography>
            {(data.searchQuery || data.selectedCategory !== "All") && (
              <button
                type="button"
                onClick={clearFilters}
                className="mt-3 inline-flex cursor-pointer items-center gap-1.5 rounded-sm border border-border px-3 py-1.5 text-sm text-muted-foreground transition-colors hover:text-foreground"
              >
                <Icon icon="mdi:filter-remove-outline" width={16} height={16} />
                {t("clearFilters")}
              </button>
            )}
          </Card>
        )}

        {/* Sayfalama */}
        {data.totalPages > 1 && (
          <Pagination className="mx-0 mt-4 justify-start">
            <PaginationContent className="justify-start">
              <PaginationItem>
                <PaginationPrevious
                  href={buildHref(
                    {
                      page: Math.max(1, data.currentPage - 1),
                      category: data.selectedCategory,
                      search: data.searchQuery,
                    },
                    section,
                  )}
                  aria-disabled={data.currentPage <= 1}
                />
              </PaginationItem>

              {pageNumbers.map((page) => (
                <PaginationItem key={page}>
                  <PaginationLink
                    href={buildHref(
                      {
                        page,
                        category: data.selectedCategory,
                        search: data.searchQuery,
                      },
                      section,
                    )}
                    isActive={page === data.currentPage}
                  >
                    {page}
                  </PaginationLink>
                </PaginationItem>
              ))}

              <PaginationItem>
                <PaginationNext
                  href={buildHref(
                    {
                      page: Math.min(data.totalPages, data.currentPage + 1),
                      category: data.selectedCategory,
                      search: data.searchQuery,
                    },
                    section,
                  )}
                  aria-disabled={data.currentPage >= data.totalPages}
                />
              </PaginationItem>
            </PaginationContent>
          </Pagination>
        )}
      </div>
    </section>
  );
}