(function() {
  const ENTRIES = {{ entries | tojson }};
  const PROJECT = {{ project | tojson }};
  const BASE_URL = {{ base_url | tojson }};
  const ENTRY_COUNT = {{ entry_count }};

  const CATEGORY_ICONS = {
    'feature': '\u2728',
    'fix': '\uD83D\uDC1B',
    'improvement': '\uD83D\uDE80',
    'breaking': '\u26A0\uFE0F',
    'docs': '\uD83D\uDCD6',
    'chore': '\uD83D\uDD27'
  };

  const containerId = 'changelog-hq-widget-' + PROJECT.id;

  if (document.getElementById(containerId)) return;

  const style = document.createElement('style');
  style.textContent = `
    #${containerId} {
      position: fixed;
      bottom: 20px;
      right: 20px;
      z-index: 99999;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    }

    #${containerId} .chq-trigger {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: #6366f1;
      color: white;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 12px rgba(99,102,241,0.4);
      transition: transform 0.2s, box-shadow 0.2s;
      position: relative;
    }

    #${containerId} .chq-trigger:hover {
      transform: scale(1.08);
      box-shadow: 0 6px 20px rgba(99,102,241,0.5);
    }

    #${containerId} .chq-trigger svg {
      width: 22px;
      height: 22px;
    }

    #${containerId} .chq-badge {
      position: absolute;
      top: -4px;
      right: -4px;
      background: #ef4444;
      color: white;
      font-size: 11px;
      font-weight: 700;
      min-width: 20px;
      height: 20px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 5px;
      line-height: 1;
    }

    #${containerId} .chq-panel {
      position: absolute;
      bottom: 60px;
      right: 0;
      width: 360px;
      max-height: 480px;
      background: #ffffff;
      border-radius: 12px;
      box-shadow: 0 12px 40px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.05);
      overflow: hidden;
      display: none;
      flex-direction: column;
      animation: chqSlideUp 0.2s ease-out;
    }

    #${containerId} .chq-panel.open { display: flex; }

    @keyframes chqSlideUp {
      from { opacity: 0; transform: translateY(8px); }
      to { opacity: 1; transform: translateY(0); }
    }

    #${containerId} .chq-panel-header {
      padding: 16px 20px;
      border-bottom: 1px solid #e5e7eb;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    #${containerId} .chq-panel-header h3 {
      font-size: 15px;
      font-weight: 600;
      color: #111827;
      margin: 0;
    }

    #${containerId} .chq-panel-header a {
      font-size: 12px;
      color: #6366f1;
      text-decoration: none;
    }

    #${containerId} .chq-panel-header a:hover { text-decoration: underline; }

    #${containerId} .chq-entries {
      overflow-y: auto;
      padding: 8px 0;
      flex: 1;
    }

    #${containerId} .chq-entry {
      padding: 12px 20px;
      border-bottom: 1px solid #f3f4f6;
      transition: background 0.1s;
    }

    #${containerId} .chq-entry:hover { background: #f9fafb; }
    #${containerId} .chq-entry:last-child { border-bottom: none; }

    #${containerId} .chq-entry-cat {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: #6b7280;
      margin-bottom: 4px;
    }

    #${containerId} .chq-entry-title {
      font-size: 14px;
      font-weight: 500;
      color: #111827;
      line-height: 1.4;
    }

    #${containerId} .chq-entry-body {
      font-size: 13px;
      color: #6b7280;
      margin-top: 4px;
      line-height: 1.4;
    }

    #${containerId} .chq-entry-date {
      font-size: 11px;
      color: #9ca3af;
      margin-top: 6px;
    }

    #${containerId} .chq-empty {
      padding: 32px 20px;
      text-align: center;
      color: #9ca3af;
      font-size: 14px;
    }

    @media (prefers-color-scheme: dark) {
      #${containerId} .chq-panel {
        background: #1f2937;
        box-shadow: 0 12px 40px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.05);
      }
      #${containerId} .chq-panel-header { border-color: #374151; }
      #${containerId} .chq-panel-header h3 { color: #f3f4f6; }
      #${containerId} .chq-entry { border-color: #374151; }
      #${containerId} .chq-entry:hover { background: #111827; }
      #${containerId} .chq-entry-title { color: #f3f4f6; }
      #${containerId} .chq-entry-body { color: #9ca3af; }
    }
  `;
  document.head.appendChild(style);

  const container = document.createElement('div');
  container.id = containerId;

  const changelogUrl = BASE_URL + '/projects/' + PROJECT.id + '/changelog?format=html';

  let entriesHtml = '';
  if (ENTRIES.length === 0) {
    entriesHtml = '<div class="chq-empty">No updates yet.</div>';
  } else {
    for (const entry of ENTRIES) {
      const icon = CATEGORY_ICONS[entry.category] || '';
      const date = entry.created_at ? entry.created_at.substring(0, 10) : '';
      const bodyHtml = entry.body ? '<div class="chq-entry-body">' + escapeHtml(entry.body).substring(0, 120) + '</div>' : '';
      entriesHtml += `
        <div class="chq-entry">
          <div class="chq-entry-cat">${icon} ${escapeHtml(entry.category)}</div>
          <div class="chq-entry-title">${escapeHtml(entry.title)}</div>
          ${bodyHtml}
          <div class="chq-entry-date">${date}</div>
        </div>
      `;
    }
  }

  container.innerHTML = `
    <div class="chq-panel" id="${containerId}-panel">
      <div class="chq-panel-header">
        <h3>What's New</h3>
        <a href="${changelogUrl}" target="_blank">View all</a>
      </div>
      <div class="chq-entries">${entriesHtml}</div>
    </div>
    <button class="chq-trigger" id="${containerId}-trigger" aria-label="What's New">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"/>
      </svg>
      ${ENTRY_COUNT > 0 ? '<span class="chq-badge">' + Math.min(ENTRY_COUNT, 99) + '</span>' : ''}
    </button>
  `;

  document.body.appendChild(container);

  const trigger = document.getElementById(containerId + '-trigger');
  const panel = document.getElementById(containerId + '-panel');

  trigger.addEventListener('click', function(e) {
    e.stopPropagation();
    panel.classList.toggle('open');
  });

  document.addEventListener('click', function(e) {
    if (!container.contains(e.target)) {
      panel.classList.remove('open');
    }
  });

  function escapeHtml(str) {
    if (!str) return '';
    return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
  }
})();