// kb.jsx — «База знаний»: оглавление по 8 кластерам, поиск по названию и «коротко»,
// страница материала. Тело материала приходит с сервера только при праве доступа;
// иначе — заголовок, блок «Коротко», оглавление и замок.

function KBIndex({ nav, params }) {
  const kb = useKB();
  const [q, setQ] = React.useState('');
  const cluster = params.c || null;
  const query = q.trim().toLowerCase();
  const clusters = (kb && kb.clusters) || CFG().clusters || [];
  const items = (kb && kb.items) || [];
  const match = (it) => (!cluster || it.cluster === cluster)
    && (!query || (it.title + ' ' + (it.summary || '')).toLowerCase().includes(query));
  const shown = items.filter(match);
  const count = (id) => items.filter(i => i.cluster === id).length;
  const setCluster = (id) => nav('kb', id ? { c: id } : {});

  return (
    <div className="os-frame">
      <Sidebar active="kb" nav={nav}/>
      <div className="os-main">
        <Topbar crumbs={['Сообщество', 'База знаний']} actions={
          <label className="os-search live" style={{ width: 240, height: 34 }}>
            {Icons.search()}
            <input className="os-search-input" type="search" placeholder="Поиск по базе" aria-label="Поиск по базе знаний"
                   value={q} onChange={e=>setQ(e.target.value)} autoComplete="off" spellCheck="false"/>
            {q && <span className="os-search-clear" onClick={()=>setQ('')} aria-label="Очистить">×</span>}
          </label>
        }/>
        <div className="os-content">
          <div>
            <div className="os-eyebrow" style={{ marginBottom: 10 }}>База знаний сообщества</div>
            <h1 className="os-h1">Гайды, подборки и кейсы.</h1>
            <p className="os-sub" style={{ marginTop: 8, maxWidth: 620 }}>
              Практика основателей и участников: как подключить сервисы, какие модели брать,
              как внедрять ИИ в работу и команду. Материалы с замком открыты по подписке.
            </p>
          </div>

          <div className="os-chips" role="tablist" aria-label="Разделы базы">
            <button className={!cluster ? 'on' : ''} onClick={()=>setCluster(null)}>Все · {items.length}</button>
            {clusters.map(c => (
              <button key={c.id} className={cluster === c.id ? 'on' : ''} onClick={()=>setCluster(c.id)}>
                {c.title}{count(c.id) ? ` · ${count(c.id)}` : ''}
              </button>
            ))}
          </div>

          {!kb && <div className="cm-empty">Загружаем материалы…</div>}
          {kb && clusters.filter(c => !cluster || c.id === cluster).map(c => {
            const list = shown.filter(i => i.cluster === c.id);
            if (query && !list.length) return null;
            return (
              <section key={c.id} className="cm-sec">
                <div className="cm-sec-h">
                  <span className="cm-sec-n">{c.n}</span>
                  <div style={{ minWidth: 0 }}>
                    <h2 className="os-h2" style={{ fontSize: 20 }}>{c.title}</h2>
                    <div className="cm-sec-d">{c.d}</div>
                  </div>
                </div>
                {list.length ? (
                  <div className="os-card" style={{ padding: 0, overflow:'hidden' }}>
                    {list.map((it, i) => <MatRow key={it.slug} it={it} nav={nav} first={i === 0}/>)}
                  </div>
                ) : (
                  <div className="cm-soon">Материалы раздела готовятся — появятся в ближайших выпусках.</div>
                )}
              </section>
            );
          })}
          {kb && query && !shown.length && (
            <div className="cm-empty">Ничего не нашлось по «{q}». Попробуйте короче или другим словом.</div>
          )}
        </div>
      </div>
      <MemberRail>
        <div className="os-rail-block">
          <div className="os-rail-h">Как читать базу</div>
          <div className="os-card tight" style={{ padding: 16 }}>
            <p style={{ fontSize: 13, color:'var(--ink-55)', lineHeight: 1.5, margin: 0 }}>
              В каждом материале первым идёт блок «Коротко» — ответ по сути за минуту. Дальше подробности,
              в конце — частые вопросы и связанные материалы.
            </p>
          </div>
        </div>
      </MemberRail>
    </div>
  );
}

function KBPage({ nav, slug }) {
  const kb = useKB();
  const [state, setState] = React.useState({ loading: true, item: null, error: null });
  React.useEffect(()=>{
    let alive = true;
    setState({ loading: true, item: null, error: null });
    fetch('/api/kb/' + encodeURIComponent(slug), { credentials:'same-origin' })
      .then(r => r.json().then(j => ({ r, j })))
      .then(({ r, j }) => { if (!alive) return;
        if (r.ok && j && j.ok) setState({ loading: false, item: j.item, error: null });
        else setState({ loading: false, item: null, error: r.status === 404 ? 'not_found' : 'server' }); })
      .catch(() => alive && setState({ loading: false, item: null, error: 'server' }));
    return () => { alive = false; };
  }, [slug]);
  const it = state.item;
  const slugs = React.useMemo(() => new Set(((kb && kb.items) || []).map(i => i.slug)), [kb]);
  const ctx = { slugs, open: (s) => nav('kb', { m: s }) };

  return (
    <div className="os-frame">
      <Sidebar active="kb" nav={nav}/>
      <div className="os-main">
        <Topbar crumbs={['База знаний', it ? clusterTitle(it.cluster) : '…']}/>
        <div className="os-content">
          <a className="cm-back" href="/os/?view=kb" onClick={(e)=>{ e.preventDefault(); nav('kb', it ? { c: it.cluster } : {}); }}>
            {Icons.back()} Все материалы{it ? ` раздела «${clusterTitle(it.cluster)}»` : ''}
          </a>
          {state.loading && <div className="cm-empty">Открываем материал…</div>}
          {state.error === 'not_found' && (
            <div className="os-card" style={{ padding: 24 }}>
              <h2 className="os-h2">Такого материала нет.</h2>
              <p className="os-sub" style={{ marginTop: 8 }}>Возможно, ссылка устарела. Загляните в оглавление базы.</p>
            </div>
          )}
          {state.error === 'server' && <div className="os-login-err show">Сервер не ответил. Обновите страницу через минуту.</div>}
          {it && (
            <article className="cm-article">
              <div className="cm-article-meta">
                <span className="os-badge">{TYPE_LABEL[it.type] || 'Материал'}</span>
                {it.locked && <LockBadge lock={it.lock}/>}
                {it.fixture && <span className="os-badge orange">фикстура</span>}
                {it.updated && <span>обновлено {fmtDate(it.updated)}</span>}
              </div>
              <h1 className="os-h1 cm-article-h">{it.title}</h1>
              <p className="cm-lead">{it.summary}</p>

              {it.md ? (
                <div className="os-wiki-body cm-md">{mdRender(it.md, ctx)}</div>
              ) : (
                <>
                  {it.short && (
                    <div className="os-wiki-body cm-md">
                      <h2>Коротко</h2>
                      {mdRender(it.short, ctx)}
                    </div>
                  )}
                  {it.toc && it.toc.length > 0 && (
                    <div className="cm-toc">
                      <div className="os-wiki-sec-h">Что внутри</div>
                      <ol>{it.toc.map((t, i) => <li key={i}>{t}</li>)}</ol>
                    </div>
                  )}
                  <LockCard lock={it.lock}/>
                </>
              )}

              {it.related && it.related.length > 0 && (
                <div className="cm-related">
                  <div className="os-wiki-sec-h">Связанные материалы</div>
                  <div className="os-grid-2">{it.related.map(r => <MatCard key={r.slug} it={r} nav={nav}/>)}</div>
                </div>
              )}
            </article>
          )}
        </div>
      </div>
    </div>
  );
}

function KB({ nav, params = {} }) {
  // просмотр материала сервер пишет сам (GET /api/kb/:slug)
  return params.m ? <KBPage nav={nav} slug={params.m}/> : <KBIndex nav={nav} params={params}/>;
}
window.KB = KB;