static/hot_multi.js

// === OVERRIDE: loadHotTopics loads from MULTIPLE hashtags ===
// v3: 5 topics (AI Thế Giới + AI Việt Nam + top 3 hot) + lazy load more
// This file loaded AFTER app_v2.js, overrides the function

const HT_AI_TOPICS = ['AI Thế Giới', 'AI Việt Nam'];
let _htAllSources = [];
let _htTopics = [];
let _htPages = 0;
let _htDates = [];

async function loadHotTopics(){
  const j=await fetch('/api/hot_topics').then(r=>r.json()).catch(()=>({topics:[]}));
  const el=document.getElementById('hot-topics');if(!el)return;
  const topics=j.topics||[];

  // Prepend AI topics that aren't already in the list
  const prepend = HT_AI_TOPICS.filter(ai => 
    !topics.some(t => (t.topic || '').toLowerCase().includes(ai.toLowerCase()))
  ).map(ai => ({label: '#' + ai.replace(/\s+/g, ''), topic: ai, count: 0}));

  const finalTopics = [...prepend, ...topics].slice(0, 18);

  el.innerHTML=finalTopics.map(t=>{
    const topicText=t.topic||t.label.replace(/^#/,'');
    return`<button class="hot-chip" onclick="searchTopic('${topicText.replace(/'/g,"\\'")}')">${esc(t.label)}</button>`;
  }).join('');

  // Load tin HOT = tổng hợp từ TOP 5 hashtag (AI Thế Giới + AI Việt Nam + top 3 hot)
  const top5 = [...prepend, ...topics].slice(0, 5);
  if(top5.length>=2){
    _htTopics = top5.map(t=>t.topic||t.label.replace(/^#/,''));
    loadMultiHashtag(_htTopics);
  }else if(topics.length){
    searchTopic(topics[0].topic||topics[0].label.replace(/^#/,''));
  }
}

async function loadMultiHashtag(topicList){
  const box=document.getElementById('hashtag-box');if(!box)return;
  _htAllSources = [];
  _htPages = 0;

  box.innerHTML=`<div class="hashtag-sources"><h3>🔥 Tin HOT tổng hợp</h3><div class="hashtag-loading"><div class="hashtag-spinner"></div>Tổng hợp từ ${topicList.length} chủ đề nóng nhất...</div></div>`;
  try{
    const results=await Promise.all(topicList.map(topic=>
      fetch(`/api/hashtag/sources?topic=${encodeURIComponent(topic)}&page=0`).then(r=>r.json()).catch(()=>({sources:[]}))
    ));
    // Interleave from all topics
    const all=[];const seen=new Set();
    const mx=Math.max(...results.map(r=>(r.sources||[]).length));
    for(let i=0;i<mx;i++){
      for(let j=0;j<results.length;j++){
        const src=(results[j].sources||[])[i];
        if(src&&src.url&&!seen.has(src.url)){seen.add(src.url);src._topic=topicList[j];all.push(src);}
      }
    }
    _htAllSources = all;
    _renderHT();
  }catch(e){box.innerHTML=`<div class="hashtag-sources"><h3>🔥 Tin HOT</h3><div style="color:#e74c3c;padding:8px">Lỗi tải tin</div></div>`;}
}

function _renderHT(){
  const box=document.getElementById('hashtag-box');if(!box)return;
  const all = _htAllSources;
  if(!all.length){box.innerHTML=`<div class="hashtag-sources"><h3>🔥 Tin HOT</h3><div style="color:#888;padding:8px">Đang cập nhật...</div></div>`;return;}

  const perPage = 12;
  const total = all.length;
  const shown = Math.min((_htPages + 1) * perPage, total);
  const visible = all.slice(0, shown);

  let h=`<div class="hashtag-sources"><h3>🔥 Tin HOT tổng hợp <span style="font-size:10px;color:#888">(${total} bài · ${_htTopics.length} chủ đề)</span></h3><div id="ht-list">`;
  visible.forEach((s,i)=>{
    const dateStr = _htDates[i] ? `<span style="font-size:9px;color:#666;margin-left:4px">${esc(_htDates[i])}</span>` : '';
    h+=`<div class="hashtag-src-item" onclick="readArticle('${esc(s.url)}')"><div class="hashtag-src-img" id="ht-img-${i}"></div><div class="hashtag-src-text"><div class="hashtag-src-title">${esc(s.title)}</div><div class="hashtag-src-via">${esc(s.via||'')}${dateStr} · <span style="color:#f0c040;font-size:9px">#${esc(s._topic||'')}</span></div></div></div>`;
  });
  h+=`</div><div style="display:flex;gap:4px;flex-wrap:wrap;margin-top:8px">`;
  _htTopics.forEach(t=>{h+=`<button class="hot-chip" onclick="searchTopic('${t.replace(/'/g,"\\'")}')" style="font-size:10px">🔍 #${esc(t)}</button>`;});
  h+=`</div>`;
  if(shown < total){
    h+=`<button class="hashtag-load-more" id="ht-load-more" onclick="htLoadMore()">Tải thêm (${total - shown} tin) ▼</button>`;
  }
  h+=`</div>`;
  box.innerHTML=h;

  // Lazy load images + dates
  visible.forEach((s,i)=>{if(!s.url)return;const ctrl=new AbortController();setTimeout(()=>ctrl.abort(),4000);fetch('/api/article?url='+encodeURIComponent(s.url),{signal:ctrl.signal}).then(r=>r.json()).then(d=>{if(d&&(d.og_image||d.img)){const el=document.getElementById('ht-img-'+i);if(el)el.innerHTML=`<img src="${esc(d.og_image||d.img)}" onerror="this.style.display='none'">`;}if(d&&d.date_vn){_htDates[i]=d.date_vn;const viaEl=document.querySelector('#ht-list .hashtag-src-item:nth-child('+(i+1)+') .hashtag-src-via');if(viaEl&&!viaEl.querySelector('.ht-date')){const sp=document.createElement('span');sp.className='ht-date';sp.style.cssText='font-size:9px;color:#666;margin-left:4px';sp.textContent=d.date_vn;viaEl.insertBefore(sp,viaEl.querySelector('span')||null);}}}).catch(()=>{});});
  _htTopic = _htTopics[0];
}

async function htLoadMore(){
  const btn=document.getElementById('ht-load-more');if(!btn)return;
  btn.disabled=true;btn.textContent='Đang tải thêm...';
  const nextPage = _htPages + 1;

  try{
    // Fetch next page from each topic
    const results=await Promise.all(_htTopics.map(topic=>
      fetch(`/api/hashtag/sources?topic=${encodeURIComponent(topic)}&page=${nextPage}`).then(r=>r.json()).catch(()=>({sources:[]}))
    ));
    _htPages = nextPage;

    // Interleave new sources
    const seen=new Set(_htAllSources.map(s=>s.url));
    const mx=Math.max(...results.map(r=>(r.sources||[]).length));
    const newItems=[];
    for(let i=0;i<mx;i++){
      for(let j=0;j<results.length;j++){
        const src=(results[j].sources||[])[i];
        if(src&&src.url&&!seen.has(src.url)){seen.add(src.url);src._topic=_htTopics[j];newItems.push(src);}
      }
    }

    if(newItems.length){
      _htAllSources = [..._htAllSources, ...newItems];
    }

    _renderHT();
  }catch(e){
    btn.disabled=false;btn.textContent='Tải thêm ▼';
    toast('❌ Lỗi tải thêm');
  }
}