import { flatDetailItems, isFinalKnowledge, itemBrief, itemMediaUrl } from './model.js'

export default function SearchResultColumn({ selected, detail, loading, error, onKnowledgeClick }) {
  const items = selected ? [...flatDetailItems(detail)].sort((a, b) => {
    const ak = isFinalKnowledge(a) ? 0 : 1
    const bk = isFinalKnowledge(b) ? 0 : 1
    if (ak !== bk) return ak - bk
    return (a.platform || '').localeCompare(b.platform || '') || (a.title || '').localeCompare(b.title || '')
  }) : []
  return (
    <div className="axcol qresult-col">
      <div className="axhd qresult-hd">
        <div className="axis-title">
          <span className="query-search-icon">帖</span>
          <span>搜索结果{selected ? `（${items.length}贴）` : ''}</span>
        </div>
        <div className="qresult-sub">
          {selected ? selected.query : '选择 Query 查看帖子'}
        </div>
      </div>
      <div className="qresult-list">
        {!selected && <div className="qresult-empty">点击左侧 Query 词后，这里展示本次搜到的帖子。</div>}
        {selected && loading && <div className="qresult-empty">加载搜索结果...</div>}
        {selected && error && <div className="qresult-empty error">{error}</div>}
        {selected && !loading && !error && items.length === 0 && (
          <div className="qresult-empty">这个 Query 暂无搜索结果。若后台还在运行，请等待数据写入。</div>
        )}
        {items.map((item) => {
          const knowledge = isFinalKnowledge(item)
          const cover = itemMediaUrl(item)
          const confidence = item.classification?.confidence
          return (
            <article className={`result-mini ${knowledge ? 'knowledge' : ''}`} key={item.id}>
              <button
                className="result-mini-click"
                type="button"
                onClick={() => { window.location.hash = `/item/${item.id}` }}
              >
                {cover && <img src={cover} alt="" loading="lazy" />}
                <div className="result-mini-main">
                  <div className="result-mini-title">{item.title || '无标题'}</div>
                  <div className="result-mini-tags">
                    <span className={`platform-mini ${item.platform_tone}`}>{item.platform_label}</span>
                    <span className={knowledge ? 'knowledge-mini yes' : 'knowledge-mini'}>{knowledge ? '创作知识' : '未形成知识'}</span>
                    {typeof confidence === 'number' && <span className="score-mini">{confidence.toFixed(2)}</span>}
                  </div>
                  {itemBrief(item) && <div className="result-mini-text">{itemBrief(item)}</div>}
                </div>
              </button>
              <div className="result-mini-actions">
                <button
                  className="mini-detail-btn detail"
                  type="button"
                  onClick={() => { window.location.hash = `/item/${item.id}` }}
                >
                  查看详情
                </button>
                {knowledge && (
                  <button
                    className="mini-detail-btn knowledge"
                    type="button"
                    onClick={() => onKnowledgeClick?.(item.id)}
                  >
                    查看创作知识
                  </button>
                )}
              </div>
            </article>
          )
        })}
      </div>
    </div>
  )
}
