"use client";

import { useMemo, useState } from "react";
import { Search } from "lucide-react";
import { Input } from "@/components/ui/input";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { GuideCard } from "@/components/guides/GuideCard";
import type { ArticleCardData } from "@/lib/types";
interface GuideFiltersProps {
  articles: ArticleCardData[];
  categories: string[];
}

export function GuideFilters({ articles, categories }: GuideFiltersProps) {
  const [query, setQuery] = useState("");
  const [category, setCategory] = useState("all");

  const filtered = useMemo(() => {
    return articles.filter((a) => {
      const matchesQuery =
        !query ||
        a.title.includes(query) ||
        a.excerpt.includes(query) ||
        a.category.includes(query);
      const matchesCategory =
        category === "all" || a.category === category;
      return matchesQuery && matchesCategory;
    });
  }, [articles, query, category]);

  return (
    <div>
      <div className="flex flex-col gap-4 sm:flex-row">
        <div className="relative flex-1">
          <Search className="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
          <Input
            placeholder="搜尋指南標題、關鍵字..."
            value={query}
            onChange={(e) => setQuery(e.target.value)}
            className="pl-10"
          />
        </div>
        <Select value={category} onValueChange={(v) => setCategory(v ?? "all")}>
          <SelectTrigger className="w-full sm:w-44">
            <SelectValue placeholder="所有分類" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="all">所有分類</SelectItem>
            {categories.map((c) => (
              <SelectItem key={c} value={c}>
                {c}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
      </div>

      <p className="mt-4 text-sm text-muted-foreground">
        共 {filtered.length} 篇指南
      </p>

      <div className="mt-8 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
        {filtered.map((article, i) => (
          <GuideCard key={article.slug} article={article} index={i} />
        ))}
      </div>
    </div>
  );
}