"use client";

import { useMemo, useRef, useState } from "react";
import { useRouter } from "next/navigation";
import Image from "next/image";
import Link from "next/link";
import { useCatalog } from "@/lib/use-catalog";
import { formatPrice } from "@/lib/format";

export function SearchBar({ variant = "header" }: { variant?: "header" | "mobile" }) {
  const { catalog } = useCatalog();
  const [query, setQuery] = useState("");
  const [open, setOpen] = useState(false);
  const router = useRouter();
  const inputRef = useRef<HTMLInputElement>(null);

  const results = useMemo(() => {
    const q = query.trim().toLowerCase();
    if (!q) return [];
    return catalog
      .filter(
        (p) =>
          p.name.toLowerCase().includes(q) ||
          p.brand.toLowerCase().includes(q) ||
          p.category.toLowerCase().includes(q)
      )
      .slice(0, 6);
  }, [catalog, query]);

  function goToResults() {
    if (!query.trim()) return;
    router.push(`/search?q=${encodeURIComponent(query.trim())}`);
    setOpen(false);
    inputRef.current?.blur();
  }

  return (
    <div className="relative w-full">
      <form
        role="search"
        onSubmit={(e) => {
          e.preventDefault();
          goToResults();
        }}
        className="relative"
      >
        <label htmlFor={`site-search-${variant}`} className="sr-only">
          Search products
        </label>
        <input
          ref={inputRef}
          id={`site-search-${variant}`}
          type="search"
          value={query}
          onChange={(e) => {
            setQuery(e.target.value);
            setOpen(true);
          }}
          onFocus={() => setOpen(true)}
          onBlur={() => setTimeout(() => setOpen(false), 120)}
          onKeyDown={(e) => {
            if (e.key === "Escape") {
              setOpen(false);
              inputRef.current?.blur();
            }
          }}
          placeholder="Search phones, laptops, accessories..."
          className="w-full rounded-lg border border-black/10 bg-white py-2.5 pl-10 pr-4 text-sm text-brand-ink placeholder:text-black/40 focus:border-brand-orange focus:outline-none focus:ring-1 focus:ring-brand-orange"
        />
        <svg
          className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-black/35"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
          strokeWidth={2}
          aria-hidden="true"
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            d="M21 21l-4.35-4.35M11 19a8 8 0 100-16 8 8 0 000 16z"
          />
        </svg>
      </form>

      {open && query.trim() && (
        <div className="absolute left-0 right-0 top-full z-50 mt-2 max-h-[70vh] overflow-auto rounded-xl border border-black/10 bg-white shadow-card">
          {results.length === 0 ? (
            <div className="px-4 py-6 text-center text-sm text-black/50">
              No products match &ldquo;{query}&rdquo;.
            </div>
          ) : (
            <>
              <ul>
                {results.map((p) => (
                  <li key={p.id}>
                    <Link
                      href={`/product/${p.slug}`}
                      className="flex items-center gap-3 px-4 py-2.5 hover:bg-black/[0.03]"
                      onMouseDown={(e) => e.preventDefault()}
                    >
                      <div className="relative h-11 w-11 shrink-0 overflow-hidden rounded-lg bg-brand-cream">
                        <Image
                          src={p.images[0] ?? "/images/products/placeholder.webp"}
                          alt=""
                          fill
                          sizes="44px"
                          className="object-cover"
                        />
                      </div>
                      <div className="min-w-0 flex-1">
                        <p className="truncate text-sm font-medium text-brand-ink">
                          {p.name}
                        </p>
                        <p className="text-xs text-black/45">{p.brand}</p>
                      </div>
                      <span className="shrink-0 text-sm font-semibold text-brand-ink">
                        {formatPrice(p.price)}
                      </span>
                    </Link>
                  </li>
                ))}
              </ul>
              <button
                type="button"
                onMouseDown={(e) => e.preventDefault()}
                onClick={goToResults}
                className="block w-full border-t border-black/5 px-4 py-3 text-center text-sm font-medium text-brand-orange-dark hover:bg-brand-orange-light"
              >
                See all results for &ldquo;{query}&rdquo;
              </button>
            </>
          )}
        </div>
      )}
    </div>
  );
}