// kb-home.jsx — главная базы знаний (структура из макета)

const StatCard = ({ icon, value, label, tone }) => (
  <div className={`kb-stat kb-stat-${tone}`}>
    <div className="kb-stat-icon"><Icon name={icon} size={18} /></div>
    <div>
      <div className="kb-stat-value">{value}</div>
      <div className="kb-stat-label">{label}</div>
    </div>
  </div>
);

const ArticleListItem = ({ article, onOpen, showRating, showNew, showAuthor }) => {
  const sectionLabel = window.getSectionLabel(article.section);
  const author = article.authorId ? window.findPerson(article.authorId) : window.findPerson(article.responsibles?.[0]);
  const tagNames = (article.tags || []).map(t => window.findTag(t)?.name).filter(Boolean);

  return (
    <div className="kb-list-item" onClick={() => onOpen(article)}>
      <div className="kb-list-icon"><Icon name="file" size={16} /></div>
      <div className="kb-list-body">
        <div className="kb-list-title">{article.title}</div>
        <div className="kb-list-meta">
          {sectionLabel !== '—' ? sectionLabel : 'Без раздела'}{tagNames.length ? ` · ${tagNames[0]}` : ''}
        </div>
      </div>
      <div className="kb-list-stats">
        {showNew && <span className="kb-badge kb-badge-new">Новое</span>}
        {showRating && article.rating > 0 && (
          <span className="kb-list-stat"><Icon name="star" size={12} /> {article.rating.toFixed(1)}</span>
        )}
        <span className="kb-list-stat"><Icon name="eye" size={12} /> {article.views.toLocaleString('ru')}</span>
      </div>
      {showAuthor && author && (
        <div className="kb-list-author">
          <span className={`avatar ${author.av}`}>{author.name.split(' ').map(n => n[0]).join('').slice(0, 2)}</span>
          <span>{author.name.split(' ').slice(-1)[0]} {author.name.split(' ')[0][0]}.</span>
        </div>
      )}
      {showAuthor && <span className="kb-list-time">{article.updated}</span>}
      <button className="topbar-icon-btn" onClick={(e) => e.stopPropagation()}><Icon name="more" size={14} /></button>
    </div>
  );
};

const KbHomeView = ({ onOpenArticle, onCreate, onNavigateKb, onTagClick, searchQuery, refreshKey = 0 }) => {
  const [tab, setTab] = React.useState('popular');
  const [, tick] = React.useReducer((n) => n + 1, 0);

  React.useEffect(() => {
    tick();
  }, [refreshKey]);

  const recentEntries = React.useMemo(
    () => window.KB.getRecentEntries()
      .map((e) => {
        const article = window.ARTICLES.find((a) => a.id === e.id && !a.deletedAt);
        return article ? { article, viewedAt: e.viewedAt } : null;
      })
      .filter(Boolean),
    [refreshKey, tick],
  );

  const published = React.useMemo(() => {
    let list = window.getVisibleArticles().filter((a) => a.status === 'published');
    if (searchQuery) {
      const q = searchQuery.toLowerCase();
      list = list.filter(a => a.title.toLowerCase().includes(q) || (a.desc || '').toLowerCase().includes(q));
    }
    return list;
  }, [searchQuery, refreshKey, tick]);

  const stats = {
    total: published.length,
    sections: window.getRootSections().length,
    favorites: window.KB.bookmarks?.size || 0,
    mandatory: window.ARTICLES.filter(a => a.isMandatory && !a.deletedAt).length,
  };

  const popular = [...published].sort((a, b) => b.views - a.views).slice(0, 5);
  const newest = [...published].sort((a, b) => new Date(b.createdAt || 0) - new Date(a.createdAt || 0)).slice(0, 5);
  const recentAll = recentEntries;
  const recent = recentAll.slice(0, 5);
  const pinned = window.ARTICLES.filter(a => a.isPinned && !a.deletedAt).slice(0, 4);
  const recommended = published.filter(a => a.isMandatory).slice(0, 3).concat(
    published.filter(a => !a.isMandatory).slice(0, 3 - Math.min(3, published.filter(a => a.isMandatory).length))
  );

  const tagCounts = {};
  published.forEach(a => (a.tags || []).forEach(tid => { tagCounts[tid] = (tagCounts[tid] || 0) + 1; }));
  const tagCloud = window.TAGS
    .map(t => ({ ...t, count: tagCounts[t.id] || 0 }))
    .filter(t => t.count > 0)
    .sort((a, b) => b.count - a.count || a.name.localeCompare(b.name, 'ru'));

  const tabList = tab === 'popular' ? popular
    : tab === 'new' ? newest
    : tab === 'recent' ? recentAll.map((e) => e.article)
    : recommended;

  return (
    <div className="page kb-home">
      <div className="kb-home-header">
        <div>
          <h1 className="page-title">База знаний</h1>
          <p className="page-sub">Централизованное хранилище инструкций, регламентов и справочной информации</p>
        </div>
        <button className="btn btn-primary" onClick={onCreate}>
          <Icon name="plus" size={14} /> Создать статью
        </button>
      </div>

      <div className="kb-stats">
        <StatCard icon="file" value={stats.total.toLocaleString('ru')} label="Всего статей" tone="blue" />
        <StatCard icon="folder" value={stats.sections} label="Разделов" tone="green" />
        <StatCard icon="star" value={stats.favorites} label="Избранных" tone="amber" />
        <StatCard icon="bookmark" value={stats.mandatory} label="Обязательных" tone="violet" />
      </div>

      <div className="kb-layout">
        <div className="kb-main">
          <div className="kb-tabs">
            {[
              { id: 'popular', label: 'Популярное' },
              { id: 'new', label: 'Новое' },
              { id: 'recent', label: 'Недавно просмотренные' },
              { id: 'recommended', label: 'Рекомендованное' },
            ].map(t => (
              <button key={t.id} className={`kb-tab ${tab === t.id ? 'active' : ''}`} onClick={() => setTab(t.id)}>
                {t.label}
              </button>
            ))}
          </div>

          <div className="kb-list">
            {tabList.length === 0 ? (
              <div className="empty-state" style={{ padding: '48px 24px' }}>
                <Icon name="file" size={32} style={{ color: 'var(--text-3)', marginBottom: 12 }} />
                <p style={{ marginBottom: 16 }}>Статей пока нет. Создайте первую!</p>
                <button className="btn btn-primary" onClick={onCreate}><Icon name="plus" size={14} /> Создать статью</button>
              </div>
            ) : tabList.map(a => (
              <ArticleListItem
                key={a.id}
                article={a}
                onOpen={onOpenArticle}
                showRating={tab === 'popular'}
                showNew={tab === 'new'}
                showAuthor={tab === 'new'}
              />
            ))}
          </div>

          {tabList.length > 0 && (
            <button className="kb-show-all" onClick={onNavigateKb}>
              Показать все {tab === 'popular' ? 'популярные' : tab === 'new' ? 'новые' : ''} статьи →
            </button>
          )}

          {tab !== 'new' && (
            <div className="kb-section-block">
              <h2 className="kb-section-title">Новое</h2>
              <div className="kb-list">
                {newest.length === 0 ? (
                  <p className="text-3 text-sm" style={{ padding: '16px 0' }}>Новых статей пока нет</p>
                ) : newest.slice(0, 3).map(a => (
                  <ArticleListItem key={a.id} article={a} onOpen={onOpenArticle} showNew showAuthor />
                ))}
              </div>
            </div>
          )}
        </div>

        <aside className="kb-aside">
          <div className="kb-widget">
            <h3 className="kb-widget-title">Облако тегов</h3>
            <div className="kb-tag-cloud">
              {tagCloud.length === 0 ? (
                <p className="kb-tag-cloud-empty">Нет тегов у опубликованных статей</p>
              ) : tagCloud.slice(0, 12).map(t => (
                <button
                  key={t.id}
                  type="button"
                  className={`tag ${t.color} kb-tag-cloud-btn`}
                  onClick={() => onTagClick?.(t.id)}
                >
                  {t.name}
                  <span className="kb-tag-count">{t.count}</span>
                </button>
              ))}
            </div>
            <button type="button" className="kb-widget-link" onClick={onNavigateKb}>Показать все теги</button>
          </div>

          <div className="kb-widget">
            <h3 className="kb-widget-title">Закреплённые статьи</h3>
            {pinned.length === 0 ? (
              <p className="text-3 text-xs">Нет закреплённых</p>
            ) : pinned.map(a => (
              <button key={a.id} className="kb-widget-item" onClick={() => onOpenArticle(a)}>
                <Icon name="bookmark" size={12} style={{ color: 'var(--accent)' }} />
                <span>{a.title}</span>
              </button>
            ))}
          </div>

          <div className="kb-widget">
            <h3 className="kb-widget-title">Недавно просмотренные</h3>
            {recent.length === 0 ? (
              <p className="text-3 text-xs">История пуста</p>
            ) : recent.map(({ article, viewedAt }) => (
              <button key={article.id} className="kb-widget-item" onClick={() => onOpenArticle(article)}>
                <span>{article.title}</span>
                <span className="kb-widget-time">
                  {viewedAt ? window.KB.formatRecentTime(viewedAt) : 'ранее'}
                </span>
              </button>
            ))}
            <button type="button" className="kb-widget-link" onClick={() => setTab('recent')}>
              Показать всю историю
            </button>
          </div>

          <div className="kb-widget">
            <h3 className="kb-widget-title">Рекомендованное для вас</h3>
            {recommended.length === 0 ? (
              <p className="text-3 text-xs">Появится после добавления статей</p>
            ) : recommended.slice(0, 3).map(a => (
              <button key={a.id} className="kb-widget-item kb-widget-rec" onClick={() => onOpenArticle(a)}>
                <span>{a.title}</span>
                <span className="kb-widget-reason">{a.isMandatory ? 'Обязательное чтение' : 'На основе вашего раздела'}</span>
              </button>
            ))}
          </div>
        </aside>
      </div>
    </div>
  );
};

window.KbHomeView = KbHomeView;