"use client";

import { useMemo, useState } from "react";
import { categories, products } from "../lib/catalog";
import { ProductCard } from "./product-card";
import { normalizeSearch } from "../lib/catalog-presentation";
import { whatsappUrl } from "../lib/whatsapp";

export function CatalogExplorer({ initialCategory = "all", initialQuery = "" }: { initialCategory?: string; initialQuery?: string }) {
  const [query, setQuery] = useState(initialQuery);
  const [category, setCategory] = useState(initialCategory);

  const visibleProducts = useMemo(() => {
    const terms = normalizeSearch(query).split(/\s+/).filter(Boolean);
    return products.filter((product) => {
      const matchesCategory = category === "all" || product.category === category;
      const searchableText = normalizeSearch(
        [product.name, product.description, ...product.specs, ...product.applications].join(" "),
      );
      const matchesQuery = terms.length === 0 || terms.every((term) => searchableText.includes(term));
      return matchesCategory && matchesQuery;
    });
  }, [query, category]);

  return (
    <div className="catalog-explorer">
      <div className="catalog-toolbar">
        <label className="search-field">
          <span>Buscar por produto, aplicação ou especificação</span>
          <input
            type="search"
            value={query}
            onChange={(event) => setQuery(event.target.value)}
            placeholder="Ex.: cabo 2,5 mm², painel 24 W, CAT III"
          />
        </label>

        <label className="select-field">
          <span>Categoria</span>
          <select value={category} onChange={(event) => setCategory(event.target.value)}>
            <option value="all">Todas as categorias</option>
            {categories.map((item) => (
              <option key={item.slug} value={item.slug}>{item.name}</option>
            ))}
          </select>
        </label>
      </div>

      <div className="catalog-summary" aria-live="polite">
        <p><strong>{visibleProducts.length}</strong> itens demonstrativos encontrados</p>
        {(query || category !== "all") && (
          <button type="button" onClick={() => { setQuery(""); setCategory("all"); }}>
            Limpar filtros
          </button>
        )}
      </div>

      {visibleProducts.length ? (
        <section aria-label="Resultados da busca"><h2 className="catalog-results-title">Especificações para sua consulta</h2><div className="product-grid">
          {visibleProducts.map((product) => <ProductCard key={product.id} product={product} />)}
        </div></section>
      ) : (
        <div className="empty-state">
          <p className="eyebrow">Nenhum resultado</p>
          <h2>Não encontrou o item da sua lista?</h2>
          <p>Esta prévia não reúne toda a linha da Portal. Consulte a equipe pelo nome ou pela referência do material.</p>
          <a className="button button--dark" data-cta="busca_sem_resultado_whatsapp" href={whatsappUrl(`Olá, Portal! Não encontrei na prévia do catálogo e quero consultar: ${query.slice(0, 120) || "outros materiais desta linha"}.`)} target="_blank" rel="noopener noreferrer">Consultar este material no WhatsApp ↗</a>
          <button className="button button--primary" type="button" onClick={() => { setQuery(""); setCategory("all"); }}>
            Ver todo o catálogo
          </button>
        </div>
      )}
      <aside className="catalog-contact"><div><strong>Sua marca não apareceu? O produto é outro?</strong><p>Consulte SIL, WEG, Tramontina, Soprano, Wago, Ledvance e outras linhas com a equipe.</p></div><a className="button button--dark" data-cta="catalogo_consulta_whatsapp" href={whatsappUrl("Olá, Portal! Estou no catálogo e quero consultar um produto ou uma marca. Posso enviar a referência?")} target="_blank" rel="noopener noreferrer">Consultar produto ou marca ↗</a></aside>
    </div>
  );
}