/* ============================================================
   Considered · Results view + Brand grid (window.GGResults)
   Reused by category pages, quiz results, search.
   ============================================================ */
const { useState: useSR, useMemo: useMemoR } = React;
const RC = window.GGComp;
const RU = window.GGUtil;
const RD = window.GG;
const RIc = window.GGIcons;

/* ---- Brand grid ---- */
const BrandGrid = ({ brands, variant = 'classic', dense }) => (
  <div className={`gg-grid${dense ? ' dense' : ''}`}>
    {brands.map((b, i) => (
      <div key={b.slug} style={{ animationDelay: (i % 12) * 22 + 'ms' }} className="gg-enter">
        <RC.BrandCard brand={b} variant={variant} />
      </div>
    ))}
  </div>
);

const SORTS = [
  { id: 'relevance', label: 'Relevance' },
  { id: 'heritage', label: 'Heritage first' },
  { id: 'founded', label: 'Oldest first' },
  { id: 'country', label: 'Country A–Z' },
  { id: 'price', label: 'Price low–high' },
];

/* ---- Sort dropdown ---- */
const SortMenu = ({ value, onChange }) => {
  const [open, setOpen] = useSR(false);
  const cur = SORTS.find(s => s.id === value) || SORTS[0];
  return (
    <div style={{ position: 'relative' }}>
      <button className="gg-fchip" onClick={() => setOpen(o => !o)} style={{ boxShadow: '2px 2px 0 var(--plum-800)' }}>
        <RIc.Sliders size={15} strokeWidth={2} /> {cur.label} <RIc.ChevronDown size={14} strokeWidth={2.2} />
      </button>
      {open && (
        <>
          <div onClick={() => setOpen(false)} style={{ position: 'fixed', inset: 0, zIndex: 20 }} />
          <div className="gg-card" style={{ position: 'absolute', top: 'calc(100% + 8px)', right: 0, zIndex: 21, padding: 6, minWidth: 180, boxShadow: '4px 4px 0 var(--plum-800)' }}>
            {SORTS.map(s => (
              <button key={s.id} onClick={() => { onChange(s.id); setOpen(false); }}
                style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10, width: '100%', textAlign: 'left', background: s.id === value ? 'var(--milk-200)' : 'transparent', border: 'none', borderRadius: 10, padding: '10px 12px', fontSize: 14, fontWeight: 600, color: 'var(--plum-800)', cursor: 'pointer' }}>
                {s.label}{s.id === value && <RIc.Check size={15} strokeWidth={2.6} />}
              </button>
            ))}
          </div>
        </>
      )}
    </div>
  );
};

/* ---- Filter sheet (collapsible) ---- */
const FilterControls = ({ base, filters, setFilters }) => {
  const countries = useMemoR(() => [...new Set(base.map(b => b.country))].sort(), [base]);
  const tags = useMemoR(() => {
    const counts = {};
    base.forEach(b => b.tags.forEach(t => { counts[t] = (counts[t] || 0) + 1; }));
    return Object.keys(counts).sort((a, b) => counts[b] - counts[a]).slice(0, 10);
  }, [base]);
  const toggle = (key, val) => setFilters(f => ({ ...f, [key]: f[key] === val ? null : val }));
  const toggleTag = (t) => setFilters(f => ({ ...f, tags: f.tags.includes(t) ? f.tags.filter(x => x !== t) : [...f.tags, t] }));
  return (
    <div className="gg-stack" style={{ gap: 18 }}>
      <div>
        <div className="gg-meta" style={{ fontWeight: 700, color: 'var(--plum-800)', marginBottom: 9, textTransform: 'uppercase', letterSpacing: '0.08em', fontSize: 11 }}>Budget</div>
        <div className="gg-wrap">
          {[1, 2, 3, 4].map(b => (
            <button key={b} className={`gg-fchip${filters.budget === b ? ' sel' : ''}`} onClick={() => toggle('budget', b)}>{RD.PRICE[b].label}</button>
          ))}
        </div>
      </div>
      <div>
        <div className="gg-meta" style={{ fontWeight: 700, color: 'var(--plum-800)', marginBottom: 9, textTransform: 'uppercase', letterSpacing: '0.08em', fontSize: 11 }}>Country</div>
        <div className="gg-wrap">
          {countries.map(c => (
            <button key={c} className={`gg-fchip${filters.country === c ? ' sel' : ''}`} onClick={() => toggle('country', c)}>{c}</button>
          ))}
        </div>
      </div>
      <div>
        <div className="gg-meta" style={{ fontWeight: 700, color: 'var(--plum-800)', marginBottom: 9, textTransform: 'uppercase', letterSpacing: '0.08em', fontSize: 11 }}>Tags</div>
        <div className="gg-wrap">
          {tags.map(t => (
            <button key={t} className={`gg-fchip${filters.tags.includes(t) ? ' sel' : ''}`} onClick={() => toggleTag(t)}>{t}</button>
          ))}
        </div>
      </div>
    </div>
  );
};

const EMPTY_FILTERS = { budget: null, country: null, tags: [] };

/* ---- Active filter chips ---- */
const ActiveChips = ({ filters, setFilters, sort, setSort }) => {
  const chips = [];
  if (filters.budget) chips.push({ key: 'budget', label: RD.PRICE[filters.budget].label, clear: () => setFilters(f => ({ ...f, budget: null })) });
  if (filters.country) chips.push({ key: 'country', label: filters.country, clear: () => setFilters(f => ({ ...f, country: null })) });
  filters.tags.forEach(t => chips.push({ key: 'tag-' + t, label: t, clear: () => setFilters(f => ({ ...f, tags: f.tags.filter(x => x !== t) })) }));
  if (!chips.length) return null;
  return (
    <div className="gg-wrap" style={{ alignItems: 'center', marginBottom: 18 }}>
      <span className="gg-meta" style={{ fontWeight: 700, color: 'var(--plum-800)' }}>Filters:</span>
      {chips.map(c => (
        <button key={c.key} className="gg-chip gg-chip-btn gg-chip-removable b-coral" onClick={c.clear}>
          {c.label}<RIc.X size={13} strokeWidth={2.6} />
        </button>
      ))}
      <button className="gg-btn gg-btn-ghost gg-btn-sm" style={{ padding: '4px 8px' }} onClick={() => { setFilters(EMPTY_FILTERS); }}>Clear all</button>
    </div>
  );
};

/* ============================================================
   ResultsView — header + filter bar + grid + empty state
   ============================================================ */
const ResultsView = ({ brands: base, cardStyle = 'classic', defaultSort = 'relevance', countLabelNoun = 'brands', showFilters = true, children }) => {
  const [filters, setFilters] = useSR(EMPTY_FILTERS);
  const [sort, setSort] = useSR(defaultSort);
  const [open, setOpen] = useSR(false);

  const filtered = useMemoR(() => {
    let list = base.filter(b => {
      if (filters.budget && b.priceBand !== filters.budget) return false;
      if (filters.country && b.country !== filters.country) return false;
      if (filters.tags.length && !filters.tags.every(t => b.tags.includes(t))) return false;
      return true;
    });
    return RU.sortBrands(list, sort);
  }, [base, filters, sort]);

  const activeCount = (filters.budget ? 1 : 0) + (filters.country ? 1 : 0) + filters.tags.length;

  return (
    <div>
      <div className="gg-spread" style={{ marginBottom: 16, flexWrap: 'wrap', gap: 12 }}>
        <span className="gg-meta" style={{ fontWeight: 700, color: 'var(--plum-800)', fontSize: 15 }}>
          {filtered.length} {filtered.length === 1 ? countLabelNoun.replace(/s$/, '') : countLabelNoun}
        </span>
        <div className="gg-row" style={{ gap: 10 }}>
          {showFilters && (
            <button className={`gg-fchip${activeCount ? ' sel' : ''}`} onClick={() => setOpen(o => !o)} style={{ boxShadow: '2px 2px 0 var(--plum-800)' }}>
              <RIc.Tag size={15} strokeWidth={2} /> Filter{activeCount ? ` · ${activeCount}` : ''}
            </button>
          )}
          <SortMenu value={sort} onChange={setSort} />
        </div>
      </div>

      {showFilters && open && (
        <div className="gg-card gg-enter" style={{ padding: 20, marginBottom: 18 }}>
          <FilterControls base={base} filters={filters} setFilters={setFilters} />
        </div>
      )}

      <ActiveChips filters={filters} setFilters={setFilters} />

      {filtered.length === 0 ? (
        <div className="gg-card" style={{ padding: '48px 28px', textAlign: 'center' }}>
          <RC.Mascot size={96} style={{ margin: '0 auto 12px', display: 'block' }} />
          <h3 className="gg-display gg-h3">No brands match all your filters.</h3>
          <p className="gg-meta" style={{ fontSize: 15, marginTop: 8 }}>Try removing one — heritage and country are the fussiest.</p>
          <div style={{ marginTop: 18 }}>
            <RC.Btn variant="secondary" onClick={() => setFilters(EMPTY_FILTERS)}>Clear filters</RC.Btn>
          </div>
        </div>
      ) : (
        <BrandGrid brands={filtered} variant={cardStyle} />
      )}

      {children}
    </div>
  );
};

window.GGResults = { BrandGrid, ResultsView, SortMenu, EMPTY_FILTERS };