// Catalog: header, hero, filtros, grid, product card

const { useState, useMemo, useEffect, useRef } = React;

// — header —
const Header = ({ pedidos, onOpenDrawer, favorites, onOpenFavorites, q, setQ, onOpenShare }) => {
  return (
    <header className="site-header">
      <div className="site-header__inner">
        <a href="#top" className="brand">
          <span className="brand__mark">SIX</span>
          <span className="brand__line">REVESTIMENTOS DE ALTO PADRÃO</span>
        </a>
        <div className="site-header__search">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
          <input
            type="text"
            placeholder="Buscar revestimento ou código…"
            value={q}
            onChange={e => setQ(e.target.value)}
          />
          {q && <button className="site-header__clear" onClick={()=>setQ('')} aria-label="Limpar">×</button>}
        </div>
        <nav className="site-header__nav">
          <button className="icon-btn" onClick={onOpenFavorites} aria-label="Favoritos">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M12 21s-7-4.5-9.5-9C.5 8 3 4 7 4c2 0 3.5 1 5 3 1.5-2 3-3 5-3 4 0 6.5 4 4.5 8C19 16.5 12 21 12 21z"/></svg>
            {favorites.size > 0 && <span className="icon-btn__badge">{favorites.size}</span>}
          </button>
          <button className="icon-btn" onClick={onOpenShare} aria-label="Compartilhar lista">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><path d="m8.6 10.5 6.8-4M8.6 13.5l6.8 4"/></svg>
          </button>
          <button className="pill-btn pill-btn--ghost" onClick={onOpenDrawer}>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M3 7h18M5 7l1 13h12l1-13M9 11v6M15 11v6"/></svg>
            Meus orçamentos
            {pedidos.length > 0 && <span className="pill-btn__count">{pedidos.length}</span>}
          </button>
        </nav>
      </div>
      <div className="site-header__sub">
        <span><strong>Six Materiais</strong> · Porto Alegre — RS</span>
        <span className="dot">·</span>
        <span>Av. Serraria 1490, Loja 3 · Guarujá</span>
        <span className="dot">·</span>
        <a href="https://wa.me/5551993848020" target="_blank" rel="noopener noreferrer">WhatsApp (51) 99384-8020</a>
        <span className="dot">·</span>
        <span>Seg–Sex 9h–18h</span>
      </div>
    </header>
  );
};

// — hero —
const Hero = () => (
  <section className="hero" id="top">
    <div className="hero__inner">
      <div className="hero__copy">
        <div className="hero__eyebrow">CATÁLOGO 2026</div>
        <h1 className="hero__title">
          Pedras, plaquetas <span className="serif-it">&amp;</span> revestimentos<br/>
          <span className="serif-it">de alto padrão</span> — orçados em minutos.
        </h1>
        <p className="hero__sub">
          Escolha, informe a metragem e o ambiente, e gere um orçamento direto no nosso WhatsApp. Cada produto recebe atendimento dedicado — para que nenhum detalhe da sua obra se perca.
        </p>
        <div className="hero__meta">
          <div><span className="hero__meta-n">26+</span> revestimentos</div>
          <div><span className="hero__meta-n">8</span> categorias</div>
          <div><span className="hero__meta-n">6x</span> sem juros</div>
          <div><span className="hero__meta-n">RS</span> entrega no estado</div>
        </div>
      </div>
      <div className="hero__art">
        <img src="assets/pdf/p10-01.jpg" alt="Aplicação Pedra Ferro Filetes em fachada"/>
        <div className="hero__art-cap">Pedra Ferro Filetes · fachada residencial</div>
      </div>
    </div>
  </section>
);

// — filtros (sidebar) —
const FiltersPanel = ({ filters, setFilters, products }) => {
  const allCores = useMemo(() => {
    const s = new Set();
    products.forEach(p => p.cores.forEach(c => s.add(c)));
    return [...s];
  }, [products]);
  const allAcab = useMemo(() => [...new Set(products.map(p => p.acabamento))], [products]);
  const allTam = useMemo(() => {
    const s = new Set();
    products.forEach(p => p.tamanhoGrupo.forEach(t => s.add(t)));
    return [...s];
  }, [products]);
  const allAmb = useMemo(() => {
    const s = new Set();
    products.forEach(p => p.ambiente.forEach(a => s.add(a)));
    return [...s];
  }, [products]);

  const toggle = (key, val) => {
    setFilters(f => {
      const cur = new Set(f[key]);
      cur.has(val) ? cur.delete(val) : cur.add(val);
      return { ...f, [key]: cur };
    });
  };

  const clearAll = () => setFilters({
    categoria: new Set(),
    cor: new Set(),
    acabamento: new Set(),
    tamanho: new Set(),
    ambiente: new Set(),
    faixa: new Set(),
    favOnly: false,
  });
  const total = filters.categoria.size + filters.cor.size + filters.acabamento.size + filters.tamanho.size + filters.ambiente.size + filters.faixa.size + (filters.favOnly ? 1 : 0);

  return (
    <aside className="filters">
      <div className="filters__head">
        <span>Filtros</span>
        {total > 0 && <button onClick={clearAll}>Limpar ({total})</button>}
      </div>

      <FilterGroup label="Categoria">
        {window.CATEGORIES.filter(c=>c.id!=='all').map(c => (
          <Chip key={c.id} active={filters.categoria.has(c.id)} onClick={()=>toggle('categoria', c.id)}>
            {c.label} <span className="chip__n">{c.count}</span>
          </Chip>
        ))}
      </FilterGroup>

      <FilterGroup label="Faixa de preço">
        {["R$", "R$$", "R$$$"].map(f => (
          <Chip key={f} active={filters.faixa.has(f)} onClick={()=>toggle('faixa', f)}>{f}</Chip>
        ))}
      </FilterGroup>

      <FilterGroup label="Cor">
        {allCores.map(c => (
          <Chip key={c} active={filters.cor.has(c)} onClick={()=>toggle('cor', c)}>
            <span className="chip__swatch" style={{background: corSwatch(c)}}/> {c}
          </Chip>
        ))}
      </FilterGroup>

      <FilterGroup label="Acabamento">
        {allAcab.map(a => (
          <Chip key={a} active={filters.acabamento.has(a)} onClick={()=>toggle('acabamento', a)}>{a}</Chip>
        ))}
      </FilterGroup>

      <FilterGroup label="Tamanho da peça">
        {allTam.map(t => (
          <Chip key={t} active={filters.tamanho.has(t)} onClick={()=>toggle('tamanho', t)}>{t}</Chip>
        ))}
      </FilterGroup>

      <FilterGroup label="Aplicação / Ambiente">
        {allAmb.map(a => (
          <Chip key={a} active={filters.ambiente.has(a)} onClick={()=>toggle('ambiente', a)}>{a}</Chip>
        ))}
      </FilterGroup>

      <FilterGroup label="Favoritos">
        <Chip active={filters.favOnly} onClick={()=>setFilters(f=>({...f, favOnly: !f.favOnly}))}>
          Mostrar só favoritos
        </Chip>
      </FilterGroup>
    </aside>
  );
};

const FilterGroup = ({ label, children }) => (
  <div className="filter-group">
    <div className="filter-group__label">{label}</div>
    <div className="filter-group__chips">{children}</div>
  </div>
);

const Chip = ({ active, onClick, children }) => (
  <button className={"chip" + (active ? " chip--on" : "")} onClick={onClick}>{children}</button>
);

const corSwatch = (c) => ({
  "Preto": "#1a1612",
  "Cinza": "#6e6c6a",
  "Branco/Off": "#ece4d4",
  "Amarelo": "#d4a850",
  "Marrom": "#8a5e38",
  "Terracota": "#a85838",
  "Neutro": "#b8a890",
}[c] || "#888");

// — product card —
const ProductCard = ({ product, onOpen, onToggleFav, isFav, layout, showPrice }) => {
  const p = product;
  return (
    <article className={"pc pc--" + layout} onClick={() => onOpen(p)}>
      <div className="pc__media">
        {p.image
          ? <img src={p.image} alt={p.nome} loading="lazy" className="pc__img"/>
          : <Texture product={p} seed={p.id.length} density={layout === 'dense' ? 1.3 : 1} />}
        <button
          className={"pc__fav" + (isFav ? " pc__fav--on" : "")}
          onClick={(e) => { e.stopPropagation(); onToggleFav(p.id); }}
          aria-label="Favoritar"
        >
          <svg width="16" height="16" viewBox="0 0 24 24" fill={isFav ? "currentColor" : "none"} stroke="currentColor" strokeWidth="1.6">
            <path d="M12 21s-7-4.5-9.5-9C.5 8 3 4 7 4c2 0 3.5 1 5 3 1.5-2 3-3 5-3 4 0 6.5 4 4.5 8C19 16.5 12 21 12 21z"/>
          </svg>
        </button>
        <div className="pc__cat">{p.categoria}</div>
      </div>
      <div className="pc__body">
        <h3 className="pc__name">{p.nome}</h3>
        <div className="pc__meta">
          <span>{p.formato.join(' · ')}</span>
        </div>
        <div className="pc__foot">
          {showPrice ? (
            <span className="pc__price">{p.faixaPreco} <span className="pc__price-sub">/m²</span></span>
          ) : <span className="pc__price">Sob consulta</span>}
          <span className="pc__cta">
            Orçar
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
          </span>
        </div>
      </div>
    </article>
  );
};

const Catalog = ({ q, setQ, filters, setFilters, products, onOpenProduct, favorites, onToggleFav, layout, showPrice }) => {
  // apply filters
  const filtered = useMemo(() => {
    return products.filter(p => {
      if (filters.favOnly && !favorites.has(p.id)) return false;
      if (q) {
        const t = q.toLowerCase();
        if (!p.nome.toLowerCase().includes(t) && !p.id.toLowerCase().includes(t) && !p.categoria.toLowerCase().includes(t)) return false;
      }
      if (filters.categoria.size && !filters.categoria.has(p.categoria)) return false;
      if (filters.faixa.size && !filters.faixa.has(p.faixaPreco)) return false;
      if (filters.cor.size && !p.cores.some(c => filters.cor.has(c))) return false;
      if (filters.acabamento.size && !filters.acabamento.has(p.acabamento)) return false;
      if (filters.tamanho.size && !p.tamanhoGrupo.some(t => filters.tamanho.has(t))) return false;
      if (filters.ambiente.size && !p.ambiente.some(a => filters.ambiente.has(a))) return false;
      return true;
    });
  }, [products, q, filters, favorites]);

  // group by categoria when no category filter
  const grouped = useMemo(() => {
    if (filters.categoria.size > 0 || q) return [{ cat: null, items: filtered }];
    const byCat = {};
    for (const p of filtered) {
      (byCat[p.categoria] ||= []).push(p);
    }
    return Object.entries(byCat).map(([cat, items]) => ({ cat, items }));
  }, [filtered, filters.categoria, q]);

  return (
    <div className="catalog">
      <FiltersPanel filters={filters} setFilters={setFilters} products={products} />
      <main className="catalog__main">
        <div className="catalog__toolbar">
          <div className="catalog__count">{filtered.length} {filtered.length === 1 ? 'revestimento' : 'revestimentos'}</div>
          <div className="catalog__layout-toggle">
            <button className={"layout-btn" + (layout === 'editorial' ? ' layout-btn--on' : '')} aria-label="Editorial">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><rect x="3" y="3" width="18" height="18" rx="1"/><line x1="3" y1="12" x2="21" y2="12"/></svg>
            </button>
            <button className={"layout-btn" + (layout === 'dense' ? ' layout-btn--on' : '')} aria-label="Denso">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>
            </button>
            <span className="layout-toggle-note">controlado via Tweaks</span>
          </div>
        </div>

        {grouped.map(({ cat, items }) => (
          <section key={cat || 'all'} className="cat-section">
            {cat && (
              <header className="cat-section__head">
                <h2 className="cat-section__title">{cat}</h2>
                <span className="cat-section__count">{items.length}</span>
              </header>
            )}
            <div className={"grid grid--" + layout}>
              {items.map(p => (
                <ProductCard
                  key={p.id}
                  product={p}
                  onOpen={onOpenProduct}
                  onToggleFav={onToggleFav}
                  isFav={favorites.has(p.id)}
                  layout={layout}
                  showPrice={showPrice}
                />
              ))}
            </div>
          </section>
        ))}

        {filtered.length === 0 && (
          <div className="empty">
            <div className="empty__icon">⌕</div>
            <div className="empty__title">Nenhum revestimento encontrado</div>
            <div className="empty__hint">Tente limpar alguns filtros ou ajustar a busca.</div>
          </div>
        )}
      </main>
    </div>
  );
};

Object.assign(window, { Header, Hero, Catalog });