"use client";

import { useMemo, useState } from "react";
import Link from "next/link";
import { Search } from "lucide-react";
import type { LibraryProcedure } from "@/data/consentiq/library";

type Props = {
  procedures: LibraryProcedure[];
  regions: { name: string; count: number }[];
};

export function LibraryExplorer({ procedures, regions }: Props) {
  const [query, setQuery] = useState("");
  const [region, setRegion] = useState<string | null>(null);

  const filtered = useMemo(() => {
    const q = query.trim().toLowerCase();
    return procedures.filter((p) => {
      if (region && p.region !== region) return false;
      if (!q) return true;
      return (
        p.name.toLowerCase().includes(q) ||
        p.region.toLowerCase().includes(q) ||
        p.tag.toLowerCase().includes(q)
      );
    });
  }, [procedures, query, region]);

  return (
    <div>
      <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
        <div className="relative max-w-md flex-1">
          <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[var(--color-slate)]" />
          <input
            type="search"
            value={query}
            onChange={(e) => setQuery(e.target.value)}
            placeholder="Search 321 procedures…"
            className="h-11 w-full rounded-lg border border-[var(--color-line)] bg-white pl-10 pr-3 text-[14px] text-[var(--color-ink)] placeholder:text-[var(--color-slate)] focus:border-[var(--color-blue)] focus:outline-none"
          />
        </div>
        <div className="text-[13px] text-[var(--color-slate)]">
          {filtered.length} of {procedures.length} procedures
        </div>
      </div>

      <div className="mt-5 flex flex-wrap gap-2">
        <button
          type="button"
          onClick={() => setRegion(null)}
          className={`rounded-full border px-3 py-1.5 text-[12px] font-semibold transition-colors ${
            region === null
              ? "border-[var(--color-blue)] bg-[var(--color-blue)] text-white"
              : "border-[var(--color-line)] bg-white text-[var(--color-slate)] hover:border-[var(--color-blue)] hover:text-[var(--color-blue)]"
          }`}
        >
          All regions ({procedures.length})
        </button>
        {regions.map((r) => (
          <button
            key={r.name}
            type="button"
            onClick={() => setRegion(r.name)}
            className={`rounded-full border px-3 py-1.5 text-[12px] font-semibold transition-colors ${
              region === r.name
                ? "border-[var(--color-blue)] bg-[var(--color-blue)] text-white"
                : "border-[var(--color-line)] bg-white text-[var(--color-slate)] hover:border-[var(--color-blue)] hover:text-[var(--color-blue)]"
            }`}
          >
            {r.name} ({r.count})
          </button>
        ))}
      </div>

      <ul className="mt-8 grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
        {filtered.map((p) => (
          <li key={p.slug}>
            <Link
              href={`/products/consentiq/library/${p.slug}`}
              className="group flex h-full flex-col rounded-xl border border-[var(--color-line)] bg-white p-5 transition-all duration-200 hover:-translate-y-0.5 hover:border-[var(--color-blue)] hover:shadow-[0_12px_30px_rgba(30,64,255,0.10)]"
            >
              <div className="text-[11px] font-bold uppercase tracking-wider text-[var(--color-blue)]">
                {p.region}
              </div>
              <div className="mt-2 font-display text-[16px] font-extrabold leading-snug tracking-tight text-[var(--color-ink)] group-hover:text-[var(--color-blue)]">
                {p.name}
              </div>
              <div className="mt-auto pt-4 text-[12px] text-[var(--color-slate)]">
                {p.tag} · v{p.version}
              </div>
            </Link>
          </li>
        ))}
      </ul>
      {filtered.length === 0 ? (
        <p className="mt-10 text-center text-[14px] text-[var(--color-slate)]">
          No procedures match your filters.
        </p>
      ) : null}
    </div>
  );
}
