'use strict';

const _store = SM.loadData();
if (!_store) {
  window.location.replace('upload');
  throw new Error('No data — redirecting');
}

SM.injectLayout('nav-tweets');

document.addEventListener('DOMContentLoaded', function () {
  const { rows, meta } = _store;
  document.getElementById('topbarMeta').textContent =
    `${meta.filename} — ${rows.length} tweets`;

  let pageSize = 20;
  let currentPage = 1;
  let activeFilter = 'all';
  let searchQuery  = '';
  let sortMode     = 'default';

  const pos = rows.filter(r => r.sentiment === 'Positif').length;
  const neg = rows.filter(r => r.sentiment === 'Negatif').length;
  const neu = rows.filter(r => r.sentiment === 'Netral').length;

  // Update tab counts
  document.getElementById('cntPos').textContent = pos;
  document.getElementById('cntNeg').textContent = neg;
  document.getElementById('cntNeu').textContent = neu;

  function getFiltered() {
    let result = rows;
    if (activeFilter !== 'all') result = result.filter(r => r.sentiment === activeFilter);
    if (searchQuery) {
      const q = searchQuery.toLowerCase();
      result = result.filter(r =>
        (r.raw||'').toLowerCase().includes(q) ||
        (r.username||'').toLowerCase().includes(q) ||
        (r.location||'').toLowerCase().includes(q)
      );
    }
    // Sort
    if (sortMode === 'conf-desc') result = [...result].sort((a,b) => b.confidence - a.confidence);
    else if (sortMode === 'conf-asc') result = [...result].sort((a,b) => a.confidence - b.confidence);
    else if (sortMode === 'engage-desc') result = [...result].sort((a,b) => (b.engagement||0) - (a.engagement||0));
    else if (sortMode === 'date-desc') result = [...result].sort((a,b) => (b.date||'').localeCompare(a.date||''));
    else if (sortMode === 'date-asc')  result = [...result].sort((a,b) => (a.date||'').localeCompare(b.date||''));
    return result;
  }

  function formatDate(ds) {
    if (!ds) return '';
    const d = new Date(ds);
    if (isNaN(d.getTime())) return ds.slice(0,16).replace('T',' ');
    return d.toLocaleDateString('id-ID', {day:'numeric',month:'short',year:'numeric'}) +
           ' · ' + d.toLocaleTimeString('id-ID', {hour:'2-digit',minute:'2-digit'});
  }

  function initials(name) {
    if (!name || name === '—') return '?';
    return name.replace('@','').split(/[\s_]/)[0].slice(0,2).toUpperCase();
  }

  function avatarColor(name) {
    const colors = ['#6c8fff','#a78bfa','#34d399','#f472b6','#fb923c','#60d9f9','#f87171','#fbbf24'];
    let h = 0;
    for (let c of (name||'')) h = (h * 31 + c.charCodeAt(0)) & 0xffffffff;
    return colors[Math.abs(h) % colors.length];
  }

  function renderHashtags(text) {
    return (text.match(/#(\w+)/g) || []).slice(0,5)
      .map(t => `<span class="tl-hashtag">${SM.esc(t)}</span>`).join('');
  }

  function highlightText(text, q) {
    if (!q) return SM.esc(text);
    const escaped = q.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
    return SM.esc(text).replace(new RegExp(`(${escaped})`, 'gi'),
      '<mark class="tl-highlight">$1</mark>');
  }

  function sentimentClass(s) {
    return s === 'Positif' ? 'pos' : s === 'Negatif' ? 'neg' : 'neu';
  }
  function sentimentBadgeClass(s) {
    return s === 'Positif' ? 'badge-pos' : s === 'Negatif' ? 'badge-neg' : 'badge-neu';
  }

  function renderConfBar(conf, sent) {
    const pct = (conf * 100).toFixed(0);
    const cls = sent === 'Positif' ? 'conf-fill-pos' : sent === 'Negatif' ? 'conf-fill-neg' : 'conf-fill-neu';
    return `<div class="tl-conf-wrap">
      <span class="tl-conf-val">${(conf*100).toFixed(1)}%</span>
      <div class="tl-conf-track">
        <div class="tl-conf-fill ${cls}" style="width:${pct}%"></div>
      </div>
    </div>`;
  }

  function renderCard(r) {
    const sc   = sentimentClass(r.sentiment);
    const sbc  = sentimentBadgeClass(r.sentiment);
    const col  = avatarColor(r.username);
    const init = initials(r.username);
    const tags = renderHashtags(r.raw);
    const hasMedia = r.media_url || r.photo_url || r.image_url;
    const mediaURL = r.media_url || r.photo_url || r.image_url || '';

    return `
    <div class="tl-card tl-card-${sc}">
      <!-- Card Header -->
      <div class="tl-card-header">
        <div class="tl-avatar" style="background:${col}">${init}</div>
        <div class="tl-user-info">
          <div class="tl-user-row">
            <span class="tl-username">@${SM.esc(r.username || '—')}</span>
            <span class="tl-date">${formatDate(r.date)}</span>
          </div>
          ${r.location && r.location !== '—' ? `<span class="tl-location">${SM.esc(r.location)}</span>` : ''}
        </div>
        <div class="tl-header-right">
          <div style="display:flex; gap:6px; align-items:center;">
            <span class="badge ${sbc} tl-sent-badge">${SM.esc(r.sentiment)}</span>
            ${r.tweetId ? 
            `<a href="https://twitter.com/${SM.esc(r.username)}/status/${r.tweetId}" target="_blank" rel="noopener noreferrer" class="tl-link-btn" title="Buka di X (Twitter)">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
            </a>` : ''}
          </div>
        </div>
      </div>

      <!-- Tweet Text -->
      <div class="tl-tweet-text">${highlightText(r.raw, searchQuery)}</div>

      <!-- Hashtags -->
      ${tags ? `<div class="tl-tags-row">${tags}</div>` : ''}

      <!-- Media (if available) -->
      ${hasMedia ? `<div class="tl-media"><img src="${SM.esc(mediaURL)}" alt="tweet media" class="tl-media-img" loading="lazy" onerror="this.parentElement.style.display='none'" /></div>` : ''}

      <!-- Footer -->
      <div class="tl-card-footer">
        <div class="tl-engage-row">
          <span class="tl-engage-item" title="Replies">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
            ${r.rep || 0}
          </span>
          <span class="tl-engage-item" title="Retweets">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
            ${r.rt || 0}
          </span>
          <span class="tl-engage-item" title="Likes">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
            ${r.fav || 0}
          </span>
          ${r.qot ? `<span class="tl-engage-item" title="Quotes">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 21c3 0 7-1 7-8V5c0-1.25-.756-2.017-2-2H4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2 1 0 1 0 1 1v1c0 1-1 2-2 2s-1 .008-1 1.031V20c0 1 0 1 1 1z"/><path d="M15 21c3 0 7-1 7-8V5c0-1.25-.757-2.017-2-2h-4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2h.75c0 2.25.25 4-2.75 4v3c0 1 0 1 1 1z"/></svg>
            ${r.qot}
          </span>` : ''}
        </div>
      </div>
    </div>`;
  }

  function render() {
    const filtered = getFiltered();
    const total    = filtered.length;
    const totalPages = Math.max(1, Math.ceil(total / pageSize));
    currentPage = Math.min(currentPage, totalPages);

    const start = (currentPage - 1) * pageSize;
    const end   = Math.min(start + pageSize, total);
    const page  = filtered.slice(start, end);

    const feed = document.getElementById('tweetFeed');

    if (!page.length) {
      feed.innerHTML = `
        <div class="empty-state" style="margin-top:20px;border:1px dashed var(--border)">
          <div class="empty-state-title">Tidak ada tweet ditemukan</div>
          <div class="empty-state-desc">Coba ubah filter atau kata kunci pencarian</div>
        </div>`;
    } else {
      feed.innerHTML = page.map(r => renderCard(r)).join('');
    }

    // Info
    document.getElementById('tweetInfo').textContent =
      total > 0
        ? `Menampilkan ${start + 1}–${end} dari ${total} data (total ${rows.length})`
        : '';

    // Pagination
    renderPagination(totalPages);

    // Stats pills
    document.getElementById('tweetStats').innerHTML =
      `<span class="tl-stat-pill" style="background:var(--pos-d);color:var(--pos)">${pos} Positif</span>
       <span class="tl-stat-pill" style="background:var(--neg-d);color:var(--neg)">${neg} Negatif</span>
       <span class="tl-stat-pill" style="background:var(--neu-d);color:var(--neu)">${neu} Netral</span>`;
  }

  function renderPagination(totalPages) {
    const pg = document.getElementById('tweetPagination');
    if (totalPages <= 1) { pg.innerHTML = ''; return; }
    const range = [];
    range.push(1);
    if (currentPage > 3) range.push('…');
    for (let i = Math.max(2, currentPage-1); i <= Math.min(totalPages-1, currentPage+1); i++) range.push(i);
    if (currentPage < totalPages - 2) range.push('…');
    if (totalPages > 1) range.push(totalPages);

    pg.innerHTML = `
      <button class="pg-btn" ${currentPage===1?'disabled':''} id="pgPrev" title="Previous">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="width:16px;height:16px"><polyline points="15 18 9 12 15 6"/></svg>
      </button>
      ${range.map(p => p === '…'
        ? `<span class="pg-btn dots">…</span>`
        : `<button class="pg-btn ${p===currentPage?'active':''}" data-page="${p}">${p}</button>`
      ).join('')}
      <button class="pg-btn" ${currentPage===totalPages?'disabled':''} id="pgNext" title="Next">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="width:16px;height:16px"><polyline points="9 18 15 12 9 6"/></svg>
      </button>`;

    pg.querySelectorAll('[data-page]').forEach(btn => {
      btn.addEventListener('click', () => { currentPage = +btn.dataset.page; render(); scrollToFeed(); });
    });
    const prev = pg.querySelector('#pgPrev');
    const next = pg.querySelector('#pgNext');
    if (prev) prev.addEventListener('click', () => { currentPage--; render(); scrollToFeed(); });
    if (next) next.addEventListener('click', () => { currentPage++; render(); scrollToFeed(); });
  }

  function scrollToFeed() {
    document.getElementById('tweetFeed').scrollIntoView({ behavior:'smooth', block:'start' });
  }

  // ── Filter tabs ──
  document.querySelectorAll('.tl-tab').forEach(btn => {
    btn.addEventListener('click', () => {
      document.querySelectorAll('.tl-tab').forEach(b => b.classList.remove('active'));
      btn.classList.add('active');
      activeFilter = btn.dataset.filter;
      currentPage  = 1;
      render();
    });
  });

  // ── Search ──
  let searchTimer;
  document.getElementById('tweetSearch').addEventListener('input', e => {
    clearTimeout(searchTimer);
    searchTimer = setTimeout(() => {
      searchQuery = e.target.value.trim();
      document.getElementById('searchClear').style.display = searchQuery ? 'flex' : 'none';
      currentPage = 1;
      render();
    }, 220);
  });
  document.getElementById('searchClear').addEventListener('click', () => {
    document.getElementById('tweetSearch').value = '';
    searchQuery = '';
    document.getElementById('searchClear').style.display = 'none';
    currentPage = 1;
    render();
  });

  // ── Sort ──
  document.getElementById('sortSel').addEventListener('change', e => {
    sortMode = e.target.value;
    currentPage = 1;
    render();
  });

  // Initial render
  render();

  // ── Custom Dropdowns ──
  SM.initCustomSelect(document.getElementById('sortSel'), { compact: false });
  SM.initCustomSelect(document.getElementById('pageSizeSel'), { compact: true });

  // ── Page Size Change ──
  document.getElementById('pageSizeSel').addEventListener('change', e => {
    pageSize = parseInt(e.target.value);
    currentPage = 1;
    render();
  });
});