(function () {
  const API_URL = 'https://avatiah.com/api/latest.php';
  const UPDATE_INTERVAL = 30000; // 30 сек

  const script = document.currentScript;
  const containerId = script.dataset.container || 'avatiah-how-to-read-index';
  const width = script.dataset.width || '100%';
  const height = script.dataset.height || 'auto';
  const theme = script.dataset.theme || 'light';

  let container = document.getElementById(containerId);
  if (!container) {
    container = document.createElement('div');
    container.id = containerId;
    if (script.parentNode) {
      script.parentNode.insertBefore(container, script.nextSibling);
    } else {
      document.body.appendChild(container);
    }
  }

  const isDark = theme === 'dark';
  const bgColor = isDark ? '#1e293b' : '#ffffff';
  const textColor = isDark ? '#f1f5f9' : '#2c3e50';
  const borderColor = isDark ? '#334155' : '#e2e8f0';

  container.style.cssText = `
    width: ${width};
    height: ${height};
    background: ${bgColor};
    color: ${textColor};
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
    border: 1px solid ${borderColor};
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    overflow: hidden;
  `;

  function render(data) {
    if (!data || typeof data.security_index !== 'number') {
      container.innerHTML = `<div style="color: #e74c3c;">❌ Нет данных</div>`;
      return;
    }

    const index = data.security_index;
    const aal = data.aal_level;

    // Определение текущего уровня
    let currentLevel = '';
    if (index < 2) currentLevel = 'aal-5';
    else if (index < 3.5) currentLevel = 'aal-4';
    else if (index < 5) currentLevel = 'aal-3';
    else if (index < 7) currentLevel = 'aal-2';
    else currentLevel = 'aal-1';

    // Цвета уровней
    const colors = {
      'aal-5': '#27ae60',
      'aal-4': '#f39c12',
      'aal-3': '#e67e22',
      'aal-2': '#e74c3c',
      'aal-1': '#8e44ad'
    };

    // Шкала с подсветкой текущего уровня
    const scaleHtml = `
      <div style="display: flex; height: 40px; border-radius: 20px; overflow: hidden; margin: 1.5rem 0; box-shadow: 0 2px 8px rgba(0,0,0,0.2);">
        <div style="flex: 2; background: ${colors['aal-5']}; display: flex; align-items: center; justify-content: center; color: white; font-size: 0.8rem; font-weight: bold;">
          0–2<br>НОРМА
        </div>
        <div style="flex: 1.5; background: ${colors['aal-4']}; display: flex; align-items: center; justify-content: center; color: white; font-size: 0.8rem; font-weight: bold;">
          2–3.5<br>ПОВЫШЕННАЯ
        </div>
        <div style="flex: 1.5; background: ${colors['aal-3']}; display: flex; align-items: center; justify-content: center; color: white; font-size: 0.8rem; font-weight: bold;">
          3.5–5<br>ВЫСОКАЯ
        </div>
        <div style="flex: 2; background: ${colors['aal-2']}; display: flex; align-items: center; justify-content: center; color: white; font-size: 0.8rem; font-weight: bold;">
          5–7<br>КРИТИЧЕСКАЯ
        </div>
        <div style="flex: 3; background: ${colors['aal-1']}; display: flex; align-items: center; justify-content: center; color: white; font-size: 0.8rem; font-weight: bold;">
          7–10<br>МАКСИМАЛЬНАЯ
        </div>
      </div>
    `;

    // Маркер текущего положения
    const markerPosition = Math.min(95, Math.max(5, (index / 10) * 100));
    const markerHtml = `
      <div style="text-align: center; margin-top: -10px; position: relative; z-index: 2;">
        <span style="
          font-size: 1.8rem;
          animation: bounce 2s infinite;
          display: inline-block;
        ">👇</span>
        <div style="
          position: absolute;
          top: 25px;
          left: ${markerPosition}%;
          transform: translateX(-50%);
          background: ${colors[currentLevel]};
          color: white;
          padding: 0.3rem 0.8rem;
          border-radius: 20px;
          font-weight: bold;
          font-size: 0.9rem;
          white-space: nowrap;
        ">
          ${index.toFixed(1)} / 10
        </div>
      </div>
    `;

    // Список уровней с подсветкой
    const levels = [
      { range: '0–2', label: 'НОРМА', desc: 'Нормальная ситуация, обычная активность', color: '#27ae60' },
      { range: '2–3.5', label: 'ПОВЫШЕННАЯ', desc: 'Повышенная готовность, усиленное наблюдение', color: '#f39c12' },
      { range: '3.5–5', label: 'ВЫСОКАЯ', desc: 'Высокая готовность, вероятность конфликта', color: '#e67e22' },
      { range: '5–7', label: 'КРИТИЧЕСКАЯ', desc: 'Критический уровень, неминуемая угроза', color: '#e74c3c' },
      { range: '7–10', label: 'МАКСИМАЛЬНАЯ', desc: 'Максимальная угроза, боевые действия', color: '#8e44ad' }
    ];

    let listHtml = '<ul style="margin-left: 1.5rem; margin-top: 1rem; line-height: 1.8;">';
    levels.forEach(level => {
      const isActive = (
        (level.range === '0–2' && index < 2) ||
        (level.range === '2–3.5' && index >= 2 && index < 3.5) ||
        (level.range === '3.5–5' && index >= 3.5 && index < 5) ||
        (level.range === '5–7' && index >= 5 && index < 7) ||
        (level.range === '7–10' && index >= 7)
      );
      const prefix = isActive ? `<strong>(${index.toFixed(1)}) ← СЕЙЧАС ЗДЕСЬ</strong>` : '';
      listHtml += `
        <li>
          <span style="color: ${level.color}; font-weight: bold;">${level.range} (${level.label})</span> — ${level.desc} ${prefix}
        </li>
      `;
    });
    listHtml += '</ul>';

    container.innerHTML = `
      <h3 style="font-size: 1.6rem; margin-bottom: 1.2rem; color: ${textColor}; text-align: center;">
        💡 Как понимать индекс?
      </h3>
      <p style="text-align: center; margin-bottom: 1.5rem;">
        <strong>Индекс безопасности</strong> — это числовое значение от 0 до 10, которое показывает уровень геополитической напряжённости вокруг Израиля.
      </p>
      ${scaleHtml}
      ${markerHtml}
      ${listHtml}
      <div style="margin-top: 1.5rem; font-size: 0.85rem; opacity: 0.7; text-align: center;">
        Источник: Avatiah Security Index • Обновлено: <span id="update-time">—</span>
      </div>
    `;

    // Обновляем время
    if (data.timestamp) {
      const time = new Date(data.timestamp).toLocaleString('ru-RU', {
        timeZone: 'Asia/Jerusalem',
        year: 'numeric',
        month: 'short',
        day: 'numeric',
        hour: '2-digit',
        minute: '2-digit'
      });
      document.getElementById('update-time').textContent = time;
    }

    // Добавляем анимацию маркера (если ещё не добавлена)
    if (!document.getElementById('avatiah-bounce-style')) {
      const style = document.createElement('style');
      style.id = 'avatiah-bounce-style';
      style.textContent = `
        @keyframes bounce {
          0%, 100% { transform: translateY(0); }
          50% { transform: translateY(-8px); }
        }
      `;
      document.head.appendChild(style);
    }
  }

  function fetchData() {
    fetch(API_URL)
      .then(res => {
        if (!res.ok) throw new Error('Network error');
        return res.json();
      })
      .then(render)
      .catch(err => {
        console.error('Avatiah "How to Read Index" Widget error:', err);
        container.innerHTML = `<div style="color: #e74c3c; text-align: center;">⚠️ Ошибка загрузки данных</div>`;
      });
  }

  fetchData();
  setInterval(fetchData, UPDATE_INTERVAL);
})();