"use strict";

(function () {
  let cachedPayload = null;

  function core() {
    return (window.YAStatsCabinet && window.YAStatsCabinet.core) || {};
  }

  function escapeHtml(value) {
    if (typeof core().escapeHtml === "function") return core().escapeHtml(value);
    return String(value || "")
      .replace(/&/g, "&")
      .replace(/</g, "&lt;")
      .replace(/>/g, "&gt;")
      .replace(/"/g, "&quot;")
      .replace(/'/g, "&#39;");
  }

  function formatDateTime(value) {
    if (!value) return "—";
    try {
      return new Date(value).toLocaleString("ru-RU", {
        day: "2-digit",
        month: "2-digit",
        year: "numeric",
        hour: "2-digit",
        minute: "2-digit",
      });
    } catch (error) {
      return String(value);
    }
  }

  function fetchJson(url, options) {
    return fetch(url, Object.assign({ credentials: "same-origin", cache: "no-store" }, options || {}))
      .then(async (response) => {
        const data = await response.json().catch(() => ({}));
        if (!response.ok) throw new Error(data.detail || "request_failed");
        return data;
      });
  }

  function getUpgradeHtml() {
    return `
      <div class="glass-card p-6">
        <p class="text-sm text-gray-300 mb-4">Этот раздел доступен на тарифах <span class="text-white font-bold">Pro</span> и <span class="text-white font-bold">Business</span>.</p>
        <div class="rounded-2xl border border-yellow-500/20 bg-yellow-500/10 px-4 py-4 text-sm text-yellow-100">
          На Pro можно отслеживать до 3 сайтов на 3 месяца, на Business — до 10 сайтов на 2 месяца.
        </div>
      </div>
    `;
  }

  function statusBadge(item) {
    const code = String(item.last_status || "pending");
    const map = {
      pending: "border-white/10 bg-white/10 text-white",
      ok: "border-green-500/20 bg-green-500/20 text-green-200",
      changed: "border-yellow-500/20 bg-yellow-500/20 text-yellow-100",
      error: "border-red-500/20 bg-red-500/20 text-red-100",
    };
    const label = {
      pending: "Ждет первой проверки",
      ok: "Без критичных изменений",
      changed: "Найдены изменения",
      error: "Ошибка проверки",
    };
    return `<span class="signal-tag border ${map[code] || map.pending}">${escapeHtml(label[code] || label.pending)}</span>`;
  }

  function changeLevelBadge(item) {
    const code = String(item.last_change_level || "");
    if (!code || code === "new") return "";

    const map = {
      high: "bg-red-500/20 text-red-100 border-red-500/20",
      medium: "bg-yellow-500/20 text-yellow-100 border-yellow-500/20",
      low: "bg-white/10 text-gray-200 border-white/10",
      error: "bg-red-500/20 text-red-100 border-red-500/20",
    };
    const label = String(item.last_change_label || "");
    if (!label) return "";
    return `<span class="rounded-full border px-3 py-1 text-xs font-semibold ${map[code] || map.medium}">${escapeHtml(label)}</span>`;
  }

  function renderItems(items) {
    if (!items.length) {
      return `<div class="rounded-2xl border border-white/8 bg-white/3 px-4 py-5 text-sm text-gray-400">Пока нет ни одного сайта. Добавьте конкурента, и кабинет начнет хранить историю проверок, изменений и следующий срок мониторинга.</div>`;
    }

    return items.map((item) => {
      const tracking = item.tracking || {};
      const changes = Array.isArray(item.last_changes) ? item.last_changes : [];
      const tags = [];
      if (tracking.prices) tags.push("цены");
      if (tracking.promotions) tags.push("акции");
      if (tracking.offers) tags.push("оффер");
      if (tracking.contacts) tags.push("контакты");
      return `
        <div class="glass-card p-5 overflow-hidden">
          <div class="flex flex-col xl:flex-row xl:items-start xl:justify-between gap-4">
            <div class="min-w-0 flex-1">
              <div class="flex items-center gap-3 flex-wrap">
                <p class="text-base font-black min-w-0" style="word-break:break-word;overflow-wrap:anywhere;white-space:normal;">${escapeHtml(item.label || item.host || item.url)}</p>
                ${statusBadge(item)}
                ${item.last_status === "changed" || item.last_status === "error" ? changeLevelBadge(item) : ""}
              </div>
              <a href="${escapeHtml(item.url)}" target="_blank" rel="noopener noreferrer" class="block mt-2 max-w-full text-xs text-yellow-400" style="word-break:break-word;overflow-wrap:anywhere;white-space:normal;">${escapeHtml(item.url)}</a>
            </div>
            <div class="flex flex-wrap gap-2 xl:justify-end shrink-0">
              <button class="btn-secondary px-3 py-2 rounded-xl text-xs whitespace-nowrap competitor-check-btn" data-url="${escapeHtml(item.url)}">Проверить сейчас</button>
              <button class="btn-secondary px-3 py-2 rounded-xl text-xs whitespace-nowrap competitor-delete-btn" data-url="${escapeHtml(item.url)}">Удалить</button>
            </div>
          </div>

          <div class="grid md:grid-cols-3 gap-3 mt-4">
            <div class="rounded-2xl border border-white/8 bg-white/3 px-4 py-3 min-w-0">
              <div class="field-label" style="font-size:10px;line-height:1.2;">Последняя проверка</div>
              <div class="text-xs text-white" style="word-break:break-word;overflow-wrap:anywhere;white-space:normal;line-height:1.35;">${escapeHtml(formatDateTime(item.last_checked_at))}</div>
            </div>
            <div class="rounded-2xl border border-white/8 bg-white/3 px-4 py-3 min-w-0">
              <div class="field-label" style="font-size:10px;line-height:1.2;">Следующая проверка</div>
              <div class="text-xs text-white" style="word-break:break-word;overflow-wrap:anywhere;white-space:normal;line-height:1.35;">${escapeHtml(formatDateTime(item.next_check_at))}</div>
            </div>
            <div class="rounded-2xl border border-white/8 bg-white/3 px-4 py-3 min-w-0">
              <div class="field-label" style="font-size:10px;line-height:1.2;">Мониторинг до</div>
              <div class="text-xs text-white" style="word-break:break-word;overflow-wrap:anywhere;white-space:normal;line-height:1.35;">${escapeHtml(formatDateTime(item.monitor_until))}</div>
            </div>
          </div>

          <div class="flex flex-wrap gap-2 mt-4">
            ${tags.map((tag) => `<span class="rounded-full border border-white/8 bg-white/4 px-3 py-1 text-xs text-gray-300 max-w-full break-words">${escapeHtml(tag)}</span>`).join("")}
          </div>

          ${Array.isArray(item.watch_terms) && item.watch_terms.length ? `
            <div class="mt-4">
              <div class="field-label">Что ищем точечно</div>
              <div class="flex flex-wrap gap-2 mt-2">
                ${item.watch_terms.map((term) => `<span class="rounded-2xl border border-yellow-500/20 bg-yellow-500/10 px-3 py-1.5 text-xs text-yellow-100 max-w-full break-words">${escapeHtml(term)}</span>`).join("")}
              </div>
            </div>
          ` : ""}

          ${changes.length ? `
            <div class="mt-4 rounded-2xl border border-yellow-500/20 bg-yellow-500/10 px-4 py-4">
              <div class="field-label">Что изменилось</div>
              <div class="space-y-2 mt-3">
                ${changes.map((change) => `<div class="text-sm text-yellow-50 leading-relaxed" style="word-break:break-word;overflow-wrap:anywhere;white-space:normal;">${escapeHtml(change)}</div>`).join("")}
              </div>
            </div>
          ` : ""}

          ${item.last_error ? `
            <div class="mt-4 rounded-2xl border border-red-500/20 bg-red-500/10 px-4 py-4 text-sm text-red-100 break-words leading-relaxed" style="overflow-wrap:anywhere;">${escapeHtml(item.last_error)}</div>
          ` : ""}
        </div>
      `;
    }).join("");
  }

  function renderModal(payload) {
    cachedPayload = payload;
    const modal = document.getElementById("competitor-modal");
    const body = document.getElementById("competitor-modal-body");
    if (!modal || !body) return;

    const items = Array.isArray(payload.items) ? payload.items : [];
    const policy = payload.policy || {};
    const ideas = Array.isArray(payload.ideas) ? payload.ideas : [];
    const used = items.length;
    const limit = Number(policy.max_sites || 0);

    body.innerHTML = `
      <div class="rounded-3xl border border-white/8 bg-gradient-to-br from-white/6 via-white/3 to-yellow-500/8 px-5 py-4 mb-5 overflow-hidden">
        <p class="text-sm text-gray-300 leading-relaxed break-words">Добавьте сайты конкурентов, а сервис будет раз в неделю перепроверять страницу и замечать изменения в ценах, акциях, оффере и контактах. Все найденные сдвиги попадут в активность кабинета, а для связанного Telegram будут уходить уведомления.</p>
      </div>

      <div id="competitor-status" class="hidden rounded-2xl border border-red-500/20 bg-red-500/10 px-4 py-3 text-sm text-red-100 mb-4 break-words leading-relaxed"></div>

      <div class="grid xl:grid-cols-[1.05fr_0.95fr] gap-5">
        <div class="space-y-5">
          <div class="glass-card p-5 overflow-hidden">
            <div class="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4 mb-4">
              <div class="min-w-0">
                <p class="field-label !mb-1">Новый сайт</p>
                <p class="text-xs text-gray-500 break-words leading-relaxed">Сейчас занято ${used} из ${limit} мест на тарифе ${escapeHtml(policy.label || "")}.</p>
              </div>
              <div class="rounded-2xl border border-white/8 bg-white/3 px-4 py-3 text-left sm:text-right shrink-0">
                <div class="field-label !mb-1">Срок мониторинга</div>
                <div class="text-sm font-bold text-white">${escapeHtml(String(policy.term_days || 0))} дней</div>
              </div>
            </div>

            <div class="space-y-4">
              <div>
                <label class="field-label">Адрес сайта</label>
                <input id="competitor-url" class="field-input" type="url" placeholder="https://site-конкурента.ru">
              </div>
              <div>
                <label class="field-label">Короткое имя</label>
                <input id="competitor-label" class="field-input" type="text" placeholder="Например: Лидер окон">
              </div>
              <div>
                <label class="field-label">Что искать точечно</label>
                <input id="competitor-watch-terms" class="field-input" type="text" placeholder="Например: рассрочка, монтаж бесплатно, скидка 20%, доставка за 1 день">
              </div>
              <div>
                <label class="field-label">Что отслеживать</label>
                <div class="grid sm:grid-cols-2 gap-3 mt-3 text-sm">
                  <label class="rounded-2xl border border-white/8 bg-white/3 px-4 py-3 flex items-center gap-3 min-w-0"><input id="competitor-track-prices" type="checkbox" checked><span class="break-words">Цены и прайсы</span></label>
                  <label class="rounded-2xl border border-white/8 bg-white/3 px-4 py-3 flex items-center gap-3 min-w-0"><input id="competitor-track-promotions" type="checkbox" checked><span class="break-words">Акции и скидки</span></label>
                  <label class="rounded-2xl border border-white/8 bg-white/3 px-4 py-3 flex items-center gap-3 min-w-0"><input id="competitor-track-offers" type="checkbox" checked><span class="break-words">Оффер и заголовки</span></label>
                  <label class="rounded-2xl border border-white/8 bg-white/3 px-4 py-3 flex items-center gap-3 min-w-0"><input id="competitor-track-contacts" type="checkbox"><span class="break-words">Контакты и мессенджеры</span></label>
                </div>
              </div>
              <div>
                <label class="field-label">Комментарий</label>
                <textarea id="competitor-notes" class="field-textarea" placeholder="Что для вас важно у этого конкурента: цены на монтаж, сезонные скидки, новый оффер, акции и т.д."></textarea>
              </div>
            </div>

            <div class="flex justify-end mt-4">
              <button id="competitor-save-btn" class="btn-primary px-5 py-3 rounded-xl text-sm">Добавить в мониторинг</button>
            </div>
          </div>

          <div class="glass-card p-5 overflow-hidden">
            <p class="field-label">Сайты под наблюдением</p>
            <div class="space-y-4 mt-3">${renderItems(items)}</div>
          </div>
        </div>

        <div class="space-y-5">
          <div class="glass-card p-5 overflow-hidden">
            <p class="field-label">Как это работает</p>
            <div class="space-y-3 mt-3">
              <div class="rounded-xl border border-white/8 bg-white/3 px-4 py-3 text-sm text-gray-300 break-words leading-relaxed">1. Вы добавляете сайт конкурента и отмечаете, что для вас критично: цены, акции, оффер или контакты.</div>
              <div class="rounded-xl border border-white/8 bg-white/3 px-4 py-3 text-sm text-gray-300 break-words leading-relaxed">2. Сервис раз в 7 дней снимает свежий срез страницы и сравнивает его с прошлым состоянием.</div>
              <div class="rounded-xl border border-white/8 bg-white/3 px-4 py-3 text-sm text-gray-300 break-words leading-relaxed">3. Если что-то меняется, кабинет пишет понятное предупреждение, чтобы вы успели скорректировать свою рекламу или предложение.</div>
            </div>
          </div>

          <div class="glass-card p-5 overflow-hidden">
            <p class="field-label">Что еще полезно отслеживать</p>
            <div class="space-y-3 mt-3">
              ${ideas.map((idea) => `<div class="rounded-xl border border-white/8 bg-white/3 px-4 py-3 text-sm text-gray-300 break-words leading-relaxed">${escapeHtml(idea)}</div>`).join("")}
            </div>
          </div>

          <div class="glass-card p-5 overflow-hidden">
            <p class="field-label">Лимиты по тарифу</p>
            <div class="space-y-3 mt-3">
              <div class="rounded-xl border border-white/8 bg-white/3 px-4 py-3 text-sm text-gray-300 break-words leading-relaxed">Pro: до 3 сайтов, срок наблюдения для каждого сайта — 3 месяца.</div>
              <div class="rounded-xl border border-white/8 bg-white/3 px-4 py-3 text-sm text-gray-300 break-words leading-relaxed">Business: до 10 сайтов, срок наблюдения для каждого сайта — 2 месяца.</div>
              <div class="rounded-xl border border-white/8 bg-white/3 px-4 py-3 text-sm text-gray-300 break-words leading-relaxed">Если сайт связан с Telegram, изменения дополнительно уходят в уведомления.</div>
            </div>
          </div>
        </div>
      </div>
    `;

    bindActions();
  }

  function setStatus(message) {
    const box = document.getElementById("competitor-status");
    if (!box) return;
    if (!message) {
      box.textContent = "";
      box.classList.add("hidden");
      return;
    }
    box.textContent = String(message);
    box.classList.remove("hidden");
  }

  function readForm() {
    return {
      url: document.getElementById("competitor-url") ? document.getElementById("competitor-url").value : "",
      label: document.getElementById("competitor-label") ? document.getElementById("competitor-label").value : "",
      watch_terms: document.getElementById("competitor-watch-terms") ? document.getElementById("competitor-watch-terms").value : "",
      notes: document.getElementById("competitor-notes") ? document.getElementById("competitor-notes").value : "",
      tracking: {
        prices: !!(document.getElementById("competitor-track-prices") && document.getElementById("competitor-track-prices").checked),
        promotions: !!(document.getElementById("competitor-track-promotions") && document.getElementById("competitor-track-promotions").checked),
        offers: !!(document.getElementById("competitor-track-offers") && document.getElementById("competitor-track-offers").checked),
        contacts: !!(document.getElementById("competitor-track-contacts") && document.getElementById("competitor-track-contacts").checked),
      },
    };
  }

  async function reloadModal() {
    const payload = await fetchJson("/auth/site/competitors");
    renderModal(payload);
  }

  function bindActions() {
    const saveBtn = document.getElementById("competitor-save-btn");
    if (saveBtn) {
      saveBtn.addEventListener("click", async () => {
        setStatus("");
        try {
          await fetchJson("/auth/site/competitors", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify(readForm()),
          });
          await reloadModal();
        } catch (error) {
          setStatus(error && error.message ? error.message : "Не удалось добавить сайт.");
        }
      });
    }

    document.querySelectorAll(".competitor-delete-btn").forEach((button) => {
      button.addEventListener("click", async () => {
        setStatus("");
        try {
          await fetchJson("/auth/site/competitors/delete", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ url: button.dataset.url }),
          });
          await reloadModal();
        } catch (error) {
          setStatus(error && error.message ? error.message : "Не удалось удалить сайт.");
        }
      });
    });

    document.querySelectorAll(".competitor-check-btn").forEach((button) => {
      button.addEventListener("click", async () => {
        setStatus("");
        try {
          await fetchJson("/auth/site/competitors/check", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ url: button.dataset.url }),
          });
          await reloadModal();
        } catch (error) {
          setStatus(error && error.message ? error.message : "Не удалось проверить сайт.");
        }
      });
    });
  }

  async function openCompetitorAnalysisModal() {
    if (typeof window.openModal === "function") {
      window.openModal("competitor-modal");
    }

    const body = document.getElementById("competitor-modal-body");
    if (body) body.innerHTML = `<p class="text-sm text-gray-400">Подгружаем список конкурентов...</p>`;

    try {
      const payload = await fetchJson("/auth/site/competitors");
      renderModal(payload);
    } catch (error) {
      if (String(error && error.message || "").includes("только на тарифах")) {
        if (body) body.innerHTML = getUpgradeHtml();
        return;
      }
      if (body) {
        body.innerHTML = `<div class="glass-card p-5"><p class="text-sm font-bold mb-2">Раздел не открылся</p><p class="text-sm text-gray-500">${escapeHtml(error && error.message ? error.message : "Попробуйте позже.")}</p></div>`;
      }
    }
  }

  function bindButtons() {
    ["open-competitor-analysis-btn"].forEach((id) => {
      const node = document.getElementById(id);
      if (!node || node.dataset.competitorBound === "1") return;
      node.dataset.competitorBound = "1";
      node.addEventListener("click", openCompetitorAnalysisModal);
    });
  }

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", bindButtons, { once: true });
  } else {
    bindButtons();
  }

  window.openCompetitorAnalysisModal = openCompetitorAnalysisModal;
})();