"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 { VenueCard } from "@/components/venues/VenueCard";
import type { VenueCardData } from "@/lib/types";
interface ExploreFiltersProps {
  venues: VenueCardData[];
  initialCity?: string;
  cities: { slug: string; nameZh: string }[];
  venueTypes: string[];
}

export function ExploreFilters({
  venues,
  initialCity = "",
  cities,
  venueTypes,
}: ExploreFiltersProps) {
  const [query, setQuery] = useState("");
  const [city, setCity] = useState(initialCity || "all");
  const [type, setType] = useState("all");

  const filtered = useMemo(() => {
    return venues.filter((v) => {
      const matchesQuery =
        !query ||
        v.nameZh.includes(query) ||
        v.nameEn?.toLowerCase().includes(query.toLowerCase()) ||
        v.description.includes(query) ||
        v.city.nameZh.includes(query);
      const matchesCity = city === "all" || v.city.slug === city;
      const matchesType = type === "all" || v.type === type;
      return matchesQuery && matchesCity && matchesType;
    });
  }, [venues, query, city, type]);

  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={city} onValueChange={(v) => setCity(v ?? "all")}>
          <SelectTrigger className="w-full sm:w-40">
            <SelectValue placeholder="所有城市" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="all">所有城市</SelectItem>
            {cities.map((c) => (
              <SelectItem key={c.slug} value={c.slug}>
                {c.nameZh}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
        <Select value={type} onValueChange={(v) => setType(v ?? "all")}>
          <SelectTrigger className="w-full sm:w-44">
            <SelectValue placeholder="所有類型" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="all">所有類型</SelectItem>
            {venueTypes.map((t) => (
              <SelectItem key={t} value={t}>
                {t}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
      </div>

      <p className="mt-4 text-sm text-muted-foreground">
        共 {filtered.length} 個場地
      </p>

      {filtered.length === 0 ? (
        <div className="mt-12 rounded-xl border border-border bg-card p-12 text-center">
          <p className="text-lg text-muted-foreground">
            找不到符合條件的場地，試試調整篩選條件
          </p>
        </div>
      ) : (
        <div className="mt-8 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
          {filtered.map((venue, i) => (
            <VenueCard key={venue.slug} venue={venue} index={i} />
          ))}
        </div>
      )}
    </div>
  );
}