/* page-tools.jsx — full Tool Directory page */
const { useState: useStateT, useMemo: useMemoT, useEffect: useEffectT } = React;
const { TOOLS_FULL } = window.RADAR;

const T_CATS = ['All', ...new Set(TOOLS_FULL.map((t) => t.cat))];
const T_PRICING = [
  { key: 'all', label: 'Any pricing' },
  { key: 'freemium', label: 'Free tier' },
  { key: 'paid', label: 'Paid only' },
];
const T_SORTS = [
  { key: 'rating', label: 'Top rated' },
  { key: 'users', label: 'Most used' },
  { key: 'name', label: 'A–Z' },
];

function parseUsers(s) {
  const n = parseFloat(s);
  return s.includes('B') ? n * 1e9 : s.includes('M') ? n * 1e6 : n * 1e3;
}

function ToolSheet({ tool, onClose, onPick }) {
  useEffectT(() => {
    const h = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', h);
    return () => window.removeEventListener('keydown', h);
  }, [onClose]);
  if (!tool) return null;
  return (
    <div className="overlay" role="dialog" aria-modal="true">
      <div className="overlay-bg" onClick={onClose}></div>
      <div className="sheet">
        <button className="sheet-close" onClick={onClose} aria-label="Close">✕</button>
        <div className="sheet-head">
          <div className="tool-logo" style={{ width: 58, height: 58, borderRadius: 16, fontSize: 24, background: `linear-gradient(135deg, hsl(${tool.hue} 80% 55%), hsl(${tool.hue + 40} 75% 60%))` }}>{tool.glyph}</div>
          <div>
            <div style={{ fontSize: 22, fontWeight: 700, letterSpacing: '-0.025em' }}>{tool.name}</div>
            <div style={{ fontSize: 13, color: 'var(--ink-3)', marginTop: 3 }}>{tool.cat} {tool.api && <span className="api-chip" style={{ marginLeft: 8 }}>API</span>}</div>
          </div>
        </div>
        <div className="sheet-stats">
          <div className="sheet-stat"><div className="k">Rating</div><div className="v">★ {tool.rating.toFixed(1)}</div></div>
          <div className="sheet-stat"><div className="k">Users</div><div className="v">{tool.users}</div></div>
          <div className="sheet-stat"><div className="k">Traffic</div><div className="v">{tool.traffic}</div></div>
          <div className="sheet-stat"><div className="k">Pricing</div><div className="v" style={{ fontSize: 13 }}>{tool.price}</div></div>
        </div>
        <h4>About</h4>
        <p className="about">{tool.about}</p>
        <h4>Alternatives</h4>
        <div className="alt-chips">
          {tool.alts.map((a) => {
            const target = TOOLS_FULL.find((t) => t.name === a);
            return <button key={a} className="alt-chip" onClick={() => target && onPick(target)} style={{ opacity: target ? 1 : .6, cursor: target ? 'pointer' : 'default' }}>{a}</button>;
          })}
        </div>
        <div className="sheet-actions">
          <a className="btn primary" href="#" onClick={(e) => e.preventDefault()}>Visit website ↗</a>
          <button className="btn ghost" onClick={onClose}>Back to directory</button>
        </div>
      </div>
    </div>
  );
}

function ToolsPage() {
  useRevealAll();
  const [cat, setCat] = useStateT('All');
  const [pricing, setPricing] = useStateT('all');
  const [apiOnly, setApiOnly] = useStateT(false);
  const [sort, setSort] = useStateT('rating');
  const [q, setQ] = useStateT('');
  const [open, setOpen] = useStateT(null);

  const counts = useMemoT(() => {
    const c = { All: TOOLS_FULL.length };
    TOOLS_FULL.forEach((t) => { c[t.cat] = (c[t.cat] || 0) + 1; });
    return c;
  }, []);

  const list = useMemoT(() => {
    let arr = TOOLS_FULL.filter((t) => {
      if (cat !== 'All' && t.cat !== cat) return false;
      if (pricing !== 'all' && t.pricing !== pricing) return false;
      if (apiOnly && !t.api) return false;
      if (q && !(t.name + ' ' + t.desc + ' ' + t.cat).toLowerCase().includes(q.toLowerCase())) return false;
      return true;
    });
    arr.sort((a, b) => {
      if (sort === 'users') return parseUsers(b.users) - parseUsers(a.users);
      if (sort === 'name') return a.name.localeCompare(b.name);
      return b.rating - a.rating;
    });
    return arr;
  }, [cat, pricing, apiOnly, sort, q]);

  return (
    <>
      <Nav active="tools" />
      <PageHero eyebrow="Tool directory" title={<>Every AI tool, <span className="grad-text">actually organized.</span></>}
        sub="28,419 tools rated, priced and categorized — with alternatives, traffic estimates and API support flags.">
        <div className="search" style={{ maxWidth: 440 }}>
          <span className="ic">⌕</span>
          <input value={q} onChange={(e) => setQ(e.target.value)} placeholder="Search tools, categories…" />
        </div>
      </PageHero>

      <main className="wrap page-body">
        <div className="tools-layout">
          <aside className="side reveal">
            <div className="side-group">
              <div className="t">Category</div>
              <div className="side-list">
                {T_CATS.map((c) => (
                  <button key={c} className={'side-item' + (cat === c ? ' on' : '')} onClick={() => setCat(c)}>
                    {c}<span className="n">{counts[c]}</span>
                  </button>
                ))}
              </div>
            </div>
            <div className="side-group">
              <div className="t">Pricing</div>
              <div className="side-list">
                {T_PRICING.map((p) => (
                  <button key={p.key} className={'side-item' + (pricing === p.key ? ' on' : '')} onClick={() => setPricing(p.key)}>{p.label}</button>
                ))}
              </div>
            </div>
            <div className="side-group">
              <div className="t">Integration</div>
              <label className="side-check">
                <input type="checkbox" checked={apiOnly} onChange={(e) => setApiOnly(e.target.checked)} />
                Has public API
              </label>
            </div>
          </aside>

          <div>
            <div className="tools-head reveal">
              <span className="result-count"><b>{list.length}</b> tools{cat !== 'All' ? ` in ${cat}` : ''}</span>
              <div className="pills" style={{ marginBottom: 0 }}>
                {T_SORTS.map((s) => (
                  <button key={s.key} className={'pill' + (sort === s.key ? ' on' : '')} onClick={() => setSort(s.key)}>{s.label}</button>
                ))}
              </div>
            </div>
            <div className="tool-grid page reveal">
              {list.map((t) => (
                <article className="tool-card clickable" key={t.name} onClick={() => setOpen(t)}>
                  <div className="tool-top">
                    <div className="tool-logo" style={{ background: `linear-gradient(135deg, hsl(${t.hue} 80% 55%), hsl(${t.hue + 40} 75% 60%))` }}>{t.glyph}</div>
                    <div>
                      <div className="tool-name">{t.name} {t.api && <span className="api-chip">API</span>}</div>
                      <div className="tool-cat">{t.cat} · {t.users} users</div>
                    </div>
                  </div>
                  <p className="tool-desc">{t.desc}</p>
                  <div className="tool-foot">
                    <span className="tool-rating"><span className="star">★</span>{t.rating.toFixed(1)}</span>
                    <span className="tool-price">{t.price}</span>
                  </div>
                </article>
              ))}
              {list.length === 0 && <p className="empty-note" style={{ gridColumn: '1/-1' }}>No tools match those filters.</p>}
            </div>
          </div>
        </div>
      </main>
      <Footer />
      <ToolSheet tool={open} onClose={() => setOpen(null)} onPick={(t) => setOpen(t)} />
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<ToolsPage />);