"use client";

import Link from "next/link";
import { useMemo, useState } from "react";
import type { Procedure } from "@/data/consentiq/procedures";

type Props = {
  procedures: Procedure[];
  regions: string[];
};

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

  const filtered = useMemo(() => {
    const q = query.trim().toLowerCase();
    return procedures.filter((p) => {
      if (region !== "all" && p.region !== region) return false;
      if (!q) return true;
      return (
        p.name.toLowerCase().includes(q) ||
        p.region.toLowerCase().includes(q) ||
        p.summary.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 w-full md:max-w-md">
          <input
            type="search"
            value={query}
            onChange={(e) => setQuery(e.target.value)}
            placeholder="Search procedures, region, or keyword..."
            className="w-full rounded-lg border border-[var(--color-line)] bg-white px-4 py-3 text-[15px] text-[var(--color-ink)] placeholder:text-[var(--color-slate)] focus:border-[var(--color-blue)] focus:outline-none focus:ring-2 focus:ring-[var(--color-blue)]/20"
          />
        </div>
        <div className="flex flex-wrap items-center gap-2">
          <button
            type="button"
            onClick={() => setRegion("all")}
            className={`rounded-full border px-3 py-1.5 text-[12px] font-semibold transition-colors ${
              region === "all"
                ? "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
          </button>
          {regions.map((r) => (
            <button
              key={r}
              type="button"
              onClick={() => setRegion(r)}
              className={`rounded-full border px-3 py-1.5 text-[12px] font-semibold transition-colors ${
                region === r
                  ? "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}
            </button>
          ))}
        </div>
      </div>

      <div className="mt-3 text-[12px] text-[var(--color-slate)]">
        {filtered.length} of {procedures.length} procedures
      </div>

      <div className="mt-6 grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
        {filtered.map((p) => (
          <article
            key={p.slug}
            className="group flex flex-col rounded-xl border border-[var(--color-line)] bg-white p-6 transition-colors hover:border-[var(--color-blue)]"
          >
            <div className="text-[11px] font-bold uppercase tracking-wider text-[var(--color-blue)]">
              {p.region}
            </div>
            <h3 className="mt-3 font-display text-[19px] font-bold tracking-tight text-[var(--color-ink)]">
              {p.name}
            </h3>
            <p className="mt-3 text-[14px] leading-relaxed text-[var(--color-slate)]">
              {p.summary}
            </p>
            <dl className="mt-5 grid grid-cols-2 gap-3 border-t border-[var(--color-line)] pt-4 text-[12px]">
              <div>
                <dt className="font-semibold uppercase tracking-wider text-[var(--color-slate)]">
                  Duration
                </dt>
                <dd className="mt-1 text-[var(--color-ink)]">~{p.approxDurationMin} min</dd>
              </div>
              <div>
                <dt className="font-semibold uppercase tracking-wider text-[var(--color-slate)]">
                  Anaesthesia
                </dt>
                <dd className="mt-1 text-[var(--color-ink)]">{p.anaesthesia.join(", ")}</dd>
              </div>
            </dl>
            <div className="mt-5">
              <Link
                href={`/products/consentiq/builder/${p.slug}`}
                className="inline-flex items-center gap-2 text-[14px] font-semibold text-[var(--color-blue)] hover:text-[var(--color-blue-deep)]"
              >
                Build consent
                <span aria-hidden>→</span>
              </Link>
            </div>
          </article>
        ))}
        {filtered.length === 0 && (
          <div className="col-span-full rounded-xl border border-dashed border-[var(--color-line)] bg-white p-10 text-center text-[14px] text-[var(--color-slate)]">
            No procedures match your search.
          </div>
        )}
      </div>
    </div>
  );
}
