"use client";

import { useState, useMemo } from "react";
import { useTranslations } from "next-intl";
import { LayoutGrid, List, Search } from "lucide-react";
import { cn } from "@/lib/utils";
import { PostCard } from "./PostCard";
import { CategoryFilter } from "./CategoryFilter";
import type { FlatPost, PostCategory } from "@/lib/types";

interface WritingListClientProps {
  posts: FlatPost[];
}

export function WritingListClient({ posts }: WritingListClientProps) {
  const [view, setView] = useState<"grid" | "list">("grid");
  const [category, setCategory] = useState<PostCategory | "all">("all");
  const [search, setSearch] = useState("");
  const t = useTranslations("writing");
  const tCommon = useTranslations("common");
  const tCat = useTranslations("writing.categories");

  const filtered = useMemo(() => {
    return posts.filter((p) => {
      const matchesCat = category === "all" || p.category === category;
      const matchesSearch =
        !search ||
        p.title.toLowerCase().includes(search.toLowerCase()) ||
        (p.excerpt ?? "").toLowerCase().includes(search.toLowerCase());
      return matchesCat && matchesSearch;
    });
  }, [posts, category, search]);

  return (
    <div>
      {/* Controls */}
      <div className="mb-8 flex flex-col gap-4">
        {/* Search */}
        <div className="relative">
          <Search size={16} className="absolute start-3 top-1/2 -translate-y-1/2 text-text-secondary" />
          <input
            type="search"
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            placeholder={tCommon("search_placeholder")}
            className="w-full rounded-lg border border-border bg-surface ps-10 pe-4 py-2.5 text-sm text-text-primary placeholder:text-text-secondary focus:border-accent/50 focus:outline-none transition-colors"
          />
        </div>

        {/* Category filter + view toggle */}
        <div className="flex items-start justify-between gap-4">
          <CategoryFilter active={category} onChange={setCategory} />
          <div className="flex shrink-0 items-center gap-1 rounded-lg border border-border bg-surface p-1">
            <button
              onClick={() => setView("grid")}
              className={cn("rounded p-1.5 transition-colors", view === "grid" ? "bg-accent text-background" : "text-text-secondary hover:text-text-primary")}
              aria-label={t("grid_view")}
            >
              <LayoutGrid size={15} />
            </button>
            <button
              onClick={() => setView("list")}
              className={cn("rounded p-1.5 transition-colors", view === "list" ? "bg-accent text-background" : "text-text-secondary hover:text-text-primary")}
              aria-label={t("list_view")}
            >
              <List size={15} />
            </button>
          </div>
        </div>
      </div>

      {/* Results count */}
      <p className="mb-6 font-mono text-xs text-text-secondary">
        {filtered.length} نوشته
      </p>

      {/* Posts */}
      {filtered.length === 0 ? (
        <div className="py-16 text-center text-text-secondary">{tCommon("no_results")}</div>
      ) : view === "grid" ? (
        <div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
          {filtered.map((post) => (
            <PostCard key={post.id} post={post} view="grid" categoryLabel={tCat(post.category)} />
          ))}
        </div>
      ) : (
        <div>
          {filtered.map((post) => (
            <PostCard key={post.id} post={post} view="list" categoryLabel={tCat(post.category)} />
          ))}
        </div>
      )}
    </div>
  );
}
