document.addEventListener("DOMContentLoaded", () => {
  const downloadForm = document.getElementById("downloadForm");
  const urlInput = document.getElementById("urlInput");
  const syncLikesBtn = document.getElementById("syncLikesBtn");
  const tasksList = document.getElementById("tasksList");
  const historyBody = document.getElementById("historyBody");
  const tracksCount = document.getElementById("tracksCount");

  // Load history and active tasks
  fetchHistory();
  fetchTasks();
  setInterval(fetchTasks, 2000);
  setInterval(fetchHistory, 10000);

  // Form submit
  downloadForm.addEventListener("submit", async (e) => {
    e.preventDefault();
    const url = urlInput.value.trim();
    if (!url) return;

    try {
      const res = await fetch("/api/download", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ url })
      });
      const data = await res.json();
      if (data.task_id) {
        urlInput.value = "";
        fetchTasks();
      } else {
        alert(data.error || "Ошибка запуска загрузки");
      }
    } catch (err) {
      alert("Ошибка сети: " + err);
    }
  });

  // Sync likes button
  syncLikesBtn.addEventListener("click", async () => {
    if (!confirm("Запустить синхронизацию плейлиста «Мне нравится» из Яндекс Музыки?")) return;
    try {
      const res = await fetch("/api/sync/yandex-likes", { method: "POST" });
      const data = await res.json();
      if (data.task_id) {
        fetchTasks();
      }
    } catch (err) {
      alert("Ошибка запуска синхронизации: " + err);
    }
  });

  async function fetchTasks() {
    try {
      const res = await fetch("/api/tasks");
      const tasks = await res.json();
      renderTasks(tasks);
    } catch (err) {
      console.error(err);
    }
  }

  function renderTasks(tasks) {
    if (!tasks || tasks.length === 0) {
      tasksList.innerHTML = `<p class="empty-state">Нет активных загрузок</p>`;
      return;
    }

    tasksList.innerHTML = tasks.map(t => {
      const percent = t.total > 0 ? Math.round((t.progress / t.total) * 100) : 0;
      return `
        <div class="task-item">
          <div class="task-header">
            <strong>${escapeHtml(t.target)}</strong>
            <span class="badge ${t.status === 'completed' ? 'badge-success' : 'badge-info'}">${t.status}</span>
          </div>
          <div class="task-progress-bar">
            <div class="task-progress-fill" style="width: ${percent}%;"></div>
          </div>
          <div class="task-current">
            ${t.progress}/${t.total} (${percent}%) • ${escapeHtml(t.current_item || '')}
          </div>
        </div>
      `;
    }).join("");
  }

  async function fetchHistory() {
    try {
      const res = await fetch("/api/history");
      const data = await res.json();
      if (tracksCount) tracksCount.textContent = `Загружено: ${data.total || 0}`;
      renderHistory(data.tracks || []);
    } catch (err) {
      console.error(err);
    }
  }

  function renderHistory(tracks) {
    if (!tracks || tracks.length === 0) {
      historyBody.innerHTML = `<tr><td colspan="5" class="empty-state">Пока нет загрузок</td></tr>`;
      return;
    }

    historyBody.innerHTML = tracks.map(t => `
      <tr>
        <td><span class="tag-badge tag-${t.service}">${t.service}</span></td>
        <td><strong>${escapeHtml(t.artist)}</strong></td>
        <td>${escapeHtml(t.title)}</td>
        <td>${escapeHtml(t.album || 'Singles')}</td>
        <td style="color: var(--text-secondary);">${formatDate(t.downloaded_at)}</td>
      </tr>
    `).join("");
  }

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

  function formatDate(isoStr) {
    if (!isoStr) return "";
    const d = new Date(isoStr);
    return d.toLocaleDateString() + " " + d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
  }
});