"use client";

import Image from "next/image";
import Link from "next/link";
import { ArrowRight, Search, SlidersHorizontal, X } from "lucide-react";
import { useMemo, useState } from "react";
import type { HeritageSite } from "@/app/content";

const statusFilters = ["Tất cả", "Đang mở tour", "Đang bổ sung tư liệu"] as const;
const levelFilters = ["Tất cả", "Cấp quốc gia", "Cấp tỉnh"] as const;
const typeFilters = ["Tất cả", "Đình", "Chùa", "Đền", "Văn miếu", "Di tích khác"] as const;

type StatusFilter = (typeof statusFilters)[number];
type LevelFilter = (typeof levelFilters)[number];
type TypeFilter = (typeof typeFilters)[number];

export function CulturalSpaceExplorer({ sites }: { sites: HeritageSite[] }) {
  const [query, setQuery] = useState("");
  const [status, setStatus] = useState<StatusFilter>("Tất cả");
  const [level, setLevel] = useState<LevelFilter>("Tất cả");
  const [type, setType] = useState<TypeFilter>("Tất cả");

  const filteredSites = useMemo(() => {
    const normalizedQuery = query.trim().toLocaleLowerCase("vi-VN");

    return sites.filter((site) => {
      const matchesQuery =
        normalizedQuery.length === 0 ||
        site.name.toLocaleLowerCase("vi-VN").includes(normalizedQuery) ||
        site.type.toLocaleLowerCase("vi-VN").includes(normalizedQuery) ||
        site.shortDescription.toLocaleLowerCase("vi-VN").includes(normalizedQuery);

      const matchesStatus = status === "Tất cả" || site.status === status;
      const matchesLevel = level === "Tất cả" || site.level === level;
      const matchesType = type === "Tất cả" || site.type === type;

      return matchesQuery && matchesStatus && matchesLevel && matchesType;
    });
  }, [query, sites, status, level, type]);

  const count = (key: "status" | "level" | "type", value: string) => {
    if (value === "Tất cả") return sites.length;
    return sites.filter((s) => s[key] === value).length;
  };

  const hasActiveFilters =
    query.trim().length > 0 || status !== "Tất cả" || level !== "Tất cả" || type !== "Tất cả";

  const resetAll = () => {
    setQuery("");
    setStatus("Tất cả");
    setLevel("Tất cả");
    setType("Tất cả");
  };

  return (
    <section className="mx-auto max-w-7xl px-4 py-14 sm:px-6 lg:py-20">
      <div className="public-panel rounded-[20px] p-5 sm:p-7">
        {/* Hàng tìm kiếm + tóm tắt kết quả */}
        <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
          <label className="relative block w-full lg:max-w-2xl">
            <span className="sr-only">Tìm kiếm di tích</span>
            <Search
              className="pointer-events-none absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 text-[var(--primary)]"
              strokeWidth={1.7}
            />
            <input
              value={query}
              onChange={(event) => setQuery(event.target.value)}
              placeholder="Tìm theo tên di tích, loại hình hoặc từ khóa…"
              className="h-14 w-full rounded-full border border-[var(--surface-border)] bg-white/85 pl-12 pr-12 text-sm font-semibold text-[var(--ink-on-light)] shadow-[0_2px_10px_rgb(20_30_18_/_0.05)] outline-none transition placeholder:font-medium placeholder:text-[var(--ink-on-light-muted)] focus:border-[var(--primary)] focus:ring-4 focus:ring-[rgb(200_164_106_/_0.16)]"
            />
            {query ? (
              <button
                type="button"
                onClick={() => setQuery("")}
                aria-label="Xóa tìm kiếm"
                className="absolute right-3 top-1/2 grid h-8 w-8 -translate-y-1/2 place-items-center rounded-full text-[var(--ink-on-light-muted)] transition hover:bg-[rgb(20_30_18_/_0.06)] hover:text-[var(--ink-on-light)]"
              >
                <X className="h-4 w-4" strokeWidth={2} />
              </button>
            ) : null}
          </label>

          <p className="shrink-0 text-sm font-semibold text-[var(--muted-foreground)]">
            Hiển thị{" "}
            <span className="font-display-vn text-base font-extrabold text-[var(--primary)] [font-variant-numeric:tabular-nums]">
              {filteredSites.length}
            </span>{" "}
            trên {sites.length} di tích
          </p>
        </div>

        {/* Các nhóm lọc */}
        <div className="mt-6 grid gap-5 border-t border-[var(--surface-border)] pt-6">
          <FilterRow label="Trạng thái" options={statusFilters} value={status} onChange={setStatus} count={(o) => count("status", o)} />
          <FilterRow label="Cấp xếp hạng" options={levelFilters} value={level} onChange={setLevel} count={(o) => count("level", o)} />
          <FilterRow label="Loại hình" options={typeFilters} value={type} onChange={setType} count={(o) => count("type", o)} />
        </div>

        {/* Tóm tắt bộ lọc đang áp dụng */}
        {hasActiveFilters ? (
          <div className="mt-6 flex flex-wrap items-center gap-2 border-t border-[var(--surface-border)] pt-5">
            <span className="text-xs font-bold uppercase tracking-[0.12em] text-[var(--ink-on-light-muted)]">
              Đang lọc
            </span>
            {query.trim() ? <ActiveChip label={`“${query.trim()}”`} onClear={() => setQuery("")} /> : null}
            {status !== "Tất cả" ? <ActiveChip label={status} onClear={() => setStatus("Tất cả")} /> : null}
            {level !== "Tất cả" ? <ActiveChip label={level} onClear={() => setLevel("Tất cả")} /> : null}
            {type !== "Tất cả" ? <ActiveChip label={type} onClear={() => setType("Tất cả")} /> : null}
            <button
              type="button"
              onClick={resetAll}
              className="ml-1 text-sm font-bold text-[var(--primary)] underline-offset-4 transition hover:underline"
            >
              Xóa tất cả
            </button>
          </div>
        ) : null}
      </div>

      {filteredSites.length > 0 ? (
        <div className="mt-8 grid gap-4 md:grid-cols-2 xl:grid-cols-4">
          {filteredSites.map((site) => (
            <article id={site.id} key={site.id} className="public-card public-stagger-item group rounded-[16px]">
              <div className="relative aspect-[16/11] overflow-hidden">
                <Image
                  src={site.image}
                  alt={site.name}
                  fill
                  sizes="(max-width: 768px) 100vw, 25vw"
                  className="object-cover transition-transform duration-700 group-hover:scale-[1.04]"
                />
              </div>
              <div className="flex min-h-[19rem] flex-col p-5">
                <span
                  className={`inline-flex w-fit items-center gap-1.5 rounded-md border px-2.5 py-1 text-[0.7rem] font-bold uppercase tracking-[0.08em] ${
                    site.isAvailable
                      ? "border-[rgb(141_146_118_/_0.4)] bg-[rgb(141_146_118_/_0.16)] text-[var(--tour-gold-light)]"
                      : "border-[rgb(200_164_106_/_0.28)] bg-[rgb(200_164_106_/_0.1)] text-[var(--primary)]"
                  }`}
                >
                  <span className={`h-1.5 w-1.5 rounded-full ${site.isAvailable ? "bg-[var(--tour-jade)]" : "bg-[var(--primary)]"}`} />
                  {site.status}
                </span>
                <p className="mt-4 text-sm font-bold text-[var(--primary)]">{site.type}</p>
                <h2 className="mt-2 text-xl font-extrabold leading-tight text-[var(--tour-ink)]">{site.name}</h2>
                <p className="mt-3 text-sm leading-6 text-[var(--muted-foreground)]">{site.shortDescription}</p>
                <Link
                  href={site.isAvailable ? site.vrUrl ?? site.detailUrl : site.detailUrl}
                  className="mt-auto inline-flex items-center gap-2 pt-5 text-sm font-extrabold text-[var(--tour-ink)] transition hover:text-[var(--primary)]"
                >
                  {site.isAvailable ? "Khám phá VR360" : "Xem thông tin"}
                  <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-0.5" strokeWidth={1.8} />
                </Link>
              </div>
            </article>
          ))}
        </div>
      ) : (
        <div className="public-panel mt-8 rounded-[16px] p-10 text-center">
          <SlidersHorizontal className="mx-auto h-8 w-8 text-[var(--primary)]" strokeWidth={1.7} />
          <p className="mx-auto mt-4 max-w-[44ch] text-lg font-bold text-[var(--tour-ink)]">
            Không tìm thấy di tích phù hợp với bộ lọc hiện tại.
          </p>
          <button
            type="button"
            onClick={resetAll}
            className="public-cta-secondary mt-6"
          >
            Đặt lại bộ lọc
          </button>
        </div>
      )}
    </section>
  );
}

function FilterRow<T extends readonly string[]>({
  label,
  options,
  value,
  onChange,
  count,
}: {
  label: string;
  options: T;
  value: T[number];
  onChange: (value: T[number]) => void;
  count: (option: T[number]) => number;
}) {
  return (
    <div className="grid gap-2.5 sm:grid-cols-[116px_1fr] sm:items-start sm:gap-5">
      <span className="text-xs font-bold uppercase tracking-[0.12em] text-[var(--ink-on-light-muted)] sm:pt-2.5">
        {label}
      </span>
      <div className="flex flex-wrap gap-2">
        {options.map((option) => {
          const active = value === option;
          return (
            <button
              key={option}
              type="button"
              onClick={() => onChange(option)}
              aria-pressed={active}
              className={`inline-flex h-10 items-center gap-2 rounded-full border px-4 text-sm font-bold transition active:scale-[0.97] focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-[rgb(200_164_106_/_0.2)] ${
                active
                  ? "border-[var(--primary)] bg-[var(--primary)] text-[var(--primary-foreground)] shadow-[0_8px_22px_rgb(142_95_11_/_0.26)]"
                  : "border-[var(--surface-border)] bg-white/72 text-[var(--ink-on-light-muted)] hover:border-[rgb(142_95_11_/_0.45)] hover:text-[var(--ink-on-light)]"
              }`}
            >
              {option}
              <span
                className={`font-display-vn text-[0.72rem] [font-variant-numeric:tabular-nums] ${
                  active ? "text-[var(--primary-foreground)]/75" : "text-[var(--ink-on-light-muted)]/70"
                }`}
              >
                {count(option)}
              </span>
            </button>
          );
        })}
      </div>
    </div>
  );
}

function ActiveChip({ label, onClear }: { label: string; onClear: () => void }) {
  return (
    <span className="inline-flex items-center gap-1.5 rounded-full border border-[rgb(142_95_11_/_0.3)] bg-[rgb(200_164_106_/_0.12)] py-1 pl-3 pr-1.5 text-xs font-bold text-[var(--ink-on-light)]">
      {label}
      <button
        type="button"
        onClick={onClear}
        aria-label={`Bỏ lọc ${label}`}
        className="grid h-5 w-5 place-items-center rounded-full text-[var(--primary)] transition hover:bg-[rgb(142_95_11_/_0.18)]"
      >
        <X className="h-3 w-3" strokeWidth={2.4} />
      </button>
    </span>
  );
}
