/* global React */ (function () { const { useState } = React; const T = window.SC_T; const Icon = window.SC_Icon; const PAGE_SIZES = [100, 500, 1000, 0]; function ResultRow({ row }) { const [hover, setHover] = useState(false); return (
setHover(true)} onMouseLeave={() => setHover(false)} style={{ display: 'grid', gridTemplateColumns: '1fr 160px 140px 110px', padding: '11px 18px', borderBottom: `1px solid ${T.borderSoft}`, fontSize: 13, alignItems: 'center', background: hover ? T.accentSoft : 'transparent', transition: 'background .12s ease', }} >
{row.phrase}
{row.cluster || '—'}
{(row.freq || 0).toLocaleString('ru')}
); } function ResultsScreen({ rows, totalCount, seedCount, aiCount, suggestCount, wordstatCount, allLoaded, onLoadAll }) { const [q, setQ] = useState(''); const [srcFilter, setSrcFilter] = useState('all'); const [sortCol, setSortCol] = useState('freq'); const [sortAsc, setSortAsc] = useState(false); const [pageSize, setPageSize] = useState(500); const filtered = rows .filter((r) => (srcFilter === 'all' || r.src === srcFilter) && (!q || r.phrase.toLowerCase().includes(q.toLowerCase()) || r.cluster.toLowerCase().includes(q.toLowerCase()))) .sort((a, b) => { const va = a[sortCol] ?? 0, vb = b[sortCol] ?? 0; const rv = typeof va === 'number' ? va - vb : String(va).localeCompare(String(vb), 'ru'); return sortAsc ? rv : -rv; }); const displayed = pageSize === 0 ? filtered : filtered.slice(0, pageSize); const onSort = (col) => { if (sortCol === col) setSortAsc(!sortAsc); else { setSortCol(col); setSortAsc(col !== 'freq'); } }; const handlePageSize = async (s) => { setPageSize(s); if (!allLoaded && (s === 0 || s > rows.length)) await onLoadAll(); }; const srcOpts = [{ v: 'all', l: 'Все' }, { v: 'seed', l: 'Seed' }, { v: 'ai', l: 'AI' }, { v: 'suggest', l: 'Suggest' }, { v: 'wordstat', l: 'Wordstat' }]; return (
{/* Toolbar */}
{Icon.search(14)} setQ(e.target.value)} placeholder="Поиск по фразам и кластерам..." style={{ width: '100%', padding: '7px 12px 7px 32px', border: `1px solid ${T.border}`, borderRadius: 8, fontSize: 13, fontFamily: 'inherit', outline: 'none', background: T.surface }} onFocus={(e) => { e.target.style.borderColor = T.accent; e.target.style.boxShadow = `0 0 0 3px ${T.accentSoft}`; }} onBlur={(e) => { e.target.style.borderColor = T.border; e.target.style.boxShadow = 'none'; }} />
{srcOpts.map((o) => ( ))}
{PAGE_SIZES.map((s) => ( ))}
{displayed.length.toLocaleString('ru')} {filtered.length > displayed.length && ` из ${filtered.length.toLocaleString('ru')}`} {` / всего ${totalCount.toLocaleString('ru')}`}
{/* Table */}
{[['phrase', 'Фраза'], ['cluster', 'Кластер'], ['freq', 'Кол-во поисков'], ['src', 'Источник']].map(([k, l]) => (
onSort(k)} style={{ cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 4, userSelect: 'none', justifyContent: k === 'freq' ? 'flex-end' : 'flex-start' }}> {l}{sortCol === k && {sortAsc ? '▲' : '▼'}}
))}
{displayed.map((r, i) => )} {displayed.length === 0 &&
Ничего не нашлось
}
); } window.ResultsScreen = ResultsScreen; })();