/* Shared SAVOV Clusterer header + helpers
   Exposed on window: SavovHeader, Footer, MockCluster, sampleData
*/

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

/* ---------- Tweaks state ---------- */
function useAccentTheme() {
  const [accent, setAccent] = useState(() => localStorage.getItem('sv-accent') || '#F5821F');
  const [theme, setTheme] = useState(() => localStorage.getItem('sv-theme') || 'dark');
  useEffect(() => {
    document.documentElement.style.setProperty('--accent', accent);
    document.documentElement.style.setProperty(
      '--accent-soft',
      accent + '26'
    );
    localStorage.setItem('sv-accent', accent);
  }, [accent]);
  useEffect(() => {
    document.documentElement.dataset.theme = theme;
    localStorage.setItem('sv-theme', theme);
  }, [theme]);
  return { accent, setAccent, theme, setTheme };
}

/* ---------- Header ---------- */
function SavovHeader({ section = 'user', tabs, activeTab, onTabChange, planBadge }) {
  return (
    <header className="hdr">
      <div className="hdr-inner">
        <a href={section === 'admin' ? 'admin.html' : 'index.html'} className="brand">
          <img className="logo" src="https://savov.ru/logo_white.svg" alt="SAVOV" />
          <span className="sep"></span>
          <span className="product">
            {section === 'admin' ? 'CLUSTERER · ADMIN' : 'CLUSTERER'}
          </span>
        </a>
        {tabs ? (
          <nav className="nav">
            {tabs.map(t => (
              <button
                key={t.id}
                className={activeTab === t.id ? 'active' : ''}
                onClick={() => onTabChange(t.id)}>
                {t.label}
              </button>
            ))}
          </nav>
        ) : (
          <nav className="nav">
            <a href="index.html" className={section === 'user' ? 'active' : ''}>Инструмент</a>
            <a href="#features">Возможности</a>
            <a href="#pricing">Тарифы</a>
            <a href="#docs">Документация</a>
          </nav>
        )}
        <div className="hdr-right">
          {planBadge}
          <div className="hdr-contact">
            <b>+7 900 656 69 03</b>
            г. Санкт-Петербург
          </div>
          {section === 'admin' ? (
            <a href="index.html" className="btn btn-ghost btn-sm">← К инструменту</a>
          ) : null}
          <a href="#" className="btn btn-pri btn-sm">Заявка</a>
        </div>
      </div>
    </header>
  );
}

/* ---------- Footer ---------- */
function SavovFooter() {
  return (
    <footer className="foot">
      <div className="foot-inner">
        <div className="row" style={{gap: 18}}>
          <span className="display" style={{fontSize: 18, letterSpacing: '0.04em'}}>SAVOV</span>
          <span className="muted">© 2026 · Кластеризатор семантики</span>
        </div>
        <div className="row" style={{gap: 18}}>
          <a href="#" className="muted">Политика</a>
          <a href="#" className="muted">Оферта</a>
          <a href="#" className="muted">API</a>
          <a href="#" className="muted">Telegram</a>
        </div>
      </div>
    </footer>
  );
}

/* ---------- Real clustering via backend ---------- */
async function clusterPhrases(phrases, opts = {}) {
  const { ignoreWords = [], minSize = 1, sensitivity = 0.5, useEmbeddings = false } = opts;
  const res = await fetch('/api/cluster', {
    method: 'POST',
    headers: { 'content-type': 'application/json' },
    body: JSON.stringify({
      phrases,
      ignoreWords,
      minClusterSize: minSize,
      sensitivity,
      useEmbeddings,
    }),
  });
  if (!res.ok) {
    const text = await res.text().catch(() => '');
    throw new Error(`cluster_api_failed: ${res.status} ${text.slice(0, 200)}`);
  }
  const data = await res.json();
  return (data.clusters ?? []).map(c => ({
    name: c.main,
    topTokens: [],
    size: c.items.length,
    phrases: c.items,
    splitMarker: c.splitMarker,
  }));
}

/* ---------- Mock helpers retained for legacy callers ---------- */
const STOPWORDS_DEFAULT = ['купить','цена','стоимость','недорого','спб','москва','онлайн','с','доставкой','в','на','для','от','и','или'];

function tokenize(s) {
  return s.toLowerCase()
    .replace(/[^\p{L}\p{N}\s-]/gu, ' ')
    .split(/[\s-]+/)
    .filter(Boolean);
}

function stem(w) {
  // very rough Russian stemmer — strip common endings
  if (w.length <= 4) return w;
  return w.replace(/(ами|ями|ого|его|ому|ему|ыми|ими|ая|яя|ое|ее|ой|ей|ом|ем|ы|и|у|ю|а|я|о|е|ь|ъ|ть)$/u, '');
}

/* ---------- Sample data ---------- */
const sampleData = {
  phrases: `купить пылесос
пылесос недорого
робот-пылесос
робот пылесос для дома
лучшие роботы пылесосы
ручной пылесос
автомобильный пылесос
пылесос для машины 12в
вертикальный пылесос
вертикальный пылесос беспроводной
аккумуляторный пылесос отзывы
xiaomi робот пылесос
лучший робот пылесос xiaomi
пылесос моющий
пылесос моющий для дома
моющий пылесос karcher
промышленный пылесос для строительной пыли
строительный пылесос
пылесос для бассейна
автомобильный пылесос беспроводной`,
  ignore: 'купить, цена, недорого, отзывы',
};

const sampleRules = [
  { id: 1, kind: 'stopword', key: 'недорого', value: '', priority: 0, enabled: true, desc: 'коммерческий маркер' },
  { id: 2, kind: 'stopword', key: 'спб', value: '', priority: 0, enabled: true, desc: 'гео' },
  { id: 3, kind: 'synonym', key: 'хувер', value: 'пылесос', priority: 5, enabled: true, desc: 'жаргон' },
  { id: 4, kind: 'synonym', key: 'робот-пылесос', value: 'робот пылесос', priority: 3, enabled: true, desc: 'нормализация дефиса' },
  { id: 5, kind: 'merge', key: 'xiaomi+робот', value: 'xiaomi роботы', priority: 10, enabled: true, desc: 'принудительная склейка бренд+тип' },
  { id: 6, kind: 'split', key: 'пылесос для авто', value: '', priority: 8, enabled: false, desc: 'разрезать многозначный кластер' },
  { id: 7, kind: 'force_main', key: 'моющие пылесосы', value: 'моющий пылесос', priority: 2, enabled: true, desc: 'единая главная фраза' },
];

const sampleKb = [
  { id: 'kb-001', title: 'Гайд: моющие пылесосы 2026', source: 'manual', date: '2026-04-22', size: '4.2 KB', tags: ['моющие', 'обзор'] },
  { id: 'kb-002', title: 'Сравнение Xiaomi vs Roborock', source: 'cluster_run', date: '2026-04-20', size: '12.8 KB', tags: ['роботы', 'xiaomi'] },
  { id: 'kb-003', title: 'Технические характеристики Karcher', source: 'manual', date: '2026-03-31', size: '6.5 KB', tags: ['karcher'] },
  { id: 'kb-004', title: 'Семантика по запросу «пылесос для авто»', source: 'cluster_run', date: '2026-03-29', size: '2.1 KB', tags: ['авто'] },
  { id: 'kb-005', title: 'FAQ: вертикальные пылесосы', source: 'manual', date: '2026-02-14', size: '3.8 KB', tags: ['faq', 'вертикальные'] },
];

const sampleLogs = [
  { id: '#48291', user: 'demo@savov', phrases: 4892, groups: 312, time: '2026-05-08 10:42', dur: '3.2с', status: 'ok' },
  { id: '#48290', user: 'a.petrov', phrases: 1240, groups: 87, time: '2026-05-08 09:18', dur: '0.9с', status: 'ok' },
  { id: '#48289', user: 'm.ivanova', phrases: 18420, groups: 1042, time: '2026-05-08 08:55', dur: '14.7с', status: 'ok' },
  { id: '#48288', user: 'demo@savov', phrases: 24, groups: 6, time: '2026-05-08 08:11', dur: '0.1с', status: 'ok' },
  { id: '#48287', user: 'system', phrases: 0, groups: 0, time: '2026-05-08 06:00', dur: '—', status: 'cron' },
  { id: '#48286', user: 'k.smirnov', phrases: 6720, groups: 0, time: '2026-05-07 23:42', dur: '—', status: 'fail' },
];

const sampleTokens = [
  { id: 'tok_a8f1...', label: 'Production API', user: 'a.petrov', created: '2026-01-12', last: '2 минуты назад', scope: 'cluster, kb' },
  { id: 'tok_b203...', label: 'CI / cron', user: 'system', created: '2025-11-04', last: '6 часов назад', scope: 'cluster' },
  { id: 'tok_c911...', label: 'Демо-доступ', user: 'demo@savov', created: '2026-04-01', last: 'вчера', scope: 'cluster' },
];

Object.assign(window, {
  useAccentTheme,
  SavovHeader, SavovFooter,
  clusterPhrases, sampleData, sampleRules, sampleKb, sampleLogs, sampleTokens,
});