import {
  startNotificationClient,
  subscribeNotifications,
  subscribeReady,
  subscribeStatus,
  markAllNotificationsRead,
} from "./notify-client.js";

const wsStatus = document.getElementById("ws-status");
const listEl = document.getElementById("notification-list");
const emptyState = document.getElementById("empty-state");
const keywordInput = document.getElementById("keyword-input");
const saveKeywordsBtn = document.getElementById("save-keywords");
const keywordHint = document.getElementById("keyword-hint");
const webhookEnabledInput = document.getElementById("webhook-enabled");
const webhookUrlInput = document.getElementById("webhook-url");
const saveWebhookBtn = document.getElementById("save-webhook");
const telegramEnabledInput = document.getElementById("telegram-enabled");
const telegramBotTokenInput = document.getElementById("telegram-bot-token");
const telegramChatIdInput = document.getElementById("telegram-chat-id");
const saveTelegramBtn = document.getElementById("save-telegram");
const panel = document.getElementById("notification-panel");
const previewModal = document.getElementById("notification-preview-modal");
const previewModalImg = document.getElementById("notification-preview-image");
const previewModalClose = document.getElementById("notification-preview-close");

const MAX_ROWS = 200;

function setStatus(text, tone = "neutral") {
  if (!wsStatus) return;
  const icon = wsStatus.querySelector("i");
  const label = wsStatus.querySelector("span");
  if (label) label.textContent = text;
  if (icon) {
    icon.className = "fa-solid fa-circle-dot";
    icon.classList.remove("text-green-400", "text-red-400", "text-yellow-400", "text-slate-400");
    if (tone === "ok") icon.classList.add("text-green-400");
    else if (tone === "error") icon.classList.add("text-red-400");
    else if (tone === "warn") icon.classList.add("text-yellow-400");
    else icon.classList.add("text-slate-400");
  }
}

function formatTime(ts) {
  if (ts == null) return "-";
  let normalized = ts;
  if (typeof normalized === "bigint") {
    normalized = Number(normalized);
  } else if (typeof normalized === "string") {
    normalized = Number(normalized);
  }
  if (!Number.isFinite(normalized)) return "-";
  const date = new Date(normalized);
  if (Number.isNaN(date.getTime())) return "-";
  return date.toLocaleString();
}

function escapeHtml(text) {
  const div = document.createElement("div");
  div.textContent = text == null ? "" : String(text);
  return div.innerHTML;
}

function renderRow(item, prepend = true) {
  if (!listEl) return;
  const row = document.createElement("tr");
  row.className = "border-t border-slate-800/60";
  row.innerHTML = `
    <td class="py-2 pr-4 whitespace-nowrap text-slate-400">${formatTime(item.ts)}</td>
    <td class="py-2 pr-4 whitespace-nowrap">${escapeHtml(item.clientId || "-")}</td>
    <td class="py-2 pr-4 whitespace-nowrap">${escapeHtml(item.user || "-")}</td>
    <td class="py-2 pr-4 max-w-xl truncate" title="${escapeHtml(item.title || "")}">${escapeHtml(item.title || "-")}</td>
    <td class="py-2 pr-4 whitespace-nowrap">${escapeHtml(item.process || "-")}</td>
    <td class="py-2 pr-4 whitespace-nowrap">${escapeHtml(item.keyword || "-")}</td>
    <td class="py-2 pr-4"><div class="preview-slot"></div></td>
  `;

  const preview = row.querySelector(".preview-slot");
  if (preview) {
    const notificationId = item?.id || "";
    if (!notificationId) {
      preview.textContent = "-";
      preview.className = "text-slate-500";
    } else {
      preview.textContent = "Loading...";
      preview.className = "text-slate-500";
      const img = document.createElement("img");
      img.className = "max-h-32 w-auto rounded border border-slate-800/80 cursor-zoom-in";
      img.loading = "lazy";
      img.alt = "Notification screenshot";

      let attempts = 0;
      const maxAttempts = 5;
      const fetchPreview = async () => {
        attempts += 1;
        try {
          const url = `/api/notifications/${encodeURIComponent(notificationId)}/screenshot?ts=${Date.now()}`;
          const res = await fetch(url, { cache: "no-store" });
          if (!res.ok) {
            if (res.status === 404 && attempts < maxAttempts) {
              setTimeout(fetchPreview, 1000 * attempts);
              return;
            }
            preview.textContent = "-";
            preview.className = "text-slate-500";
            return;
          }
          const blob = await res.blob();
          const objectUrl = URL.createObjectURL(blob);
          img.classList.add("opacity-0");
          preview.innerHTML = "";
          preview.className = "";
          preview.appendChild(img);
          img.addEventListener("load", () => {
            img.classList.remove("opacity-0");
          });
          img.addEventListener("error", () => {
            preview.textContent = "-";
            preview.className = "text-slate-500";
            URL.revokeObjectURL(objectUrl);
          });
          img.src = objectUrl;
          img.dataset.previewUrl = objectUrl;
          if (img.decode) {
            img.decode().catch(() => {});
          }

          img.addEventListener("click", () => {
            if (!previewModal || !previewModalImg) return;
            previewModalImg.src = img.dataset.previewUrl || objectUrl;
            previewModal.classList.remove("hidden");
            previewModal.classList.add("flex");
          });
        } catch (err) {
          if (attempts < maxAttempts) {
            setTimeout(fetchPreview, 1000 * attempts);
            return;
          }
          preview.textContent = "-";
          preview.className = "text-slate-500";
        }
      };
      fetchPreview();
    }
  }

  if (prepend) {
    listEl.prepend(row);
  } else {
    listEl.appendChild(row);
  }

  const rows = listEl.querySelectorAll("tr");
  if (rows.length > MAX_ROWS) {
    rows[rows.length - 1].remove();
  }

  if (emptyState) {
    emptyState.classList.toggle("hidden", listEl.children.length > 0);
  }
}

function handleNotification(item) {
  console.log("[notifications] item", item);
  renderRow(item, true);
}


function parseKeywords(text) {
  return text
    .split(/\r?\n/)
    .map((k) => k.trim())
    .filter(Boolean);
}

function renderKeywordHint(count) {
  if (!keywordHint) return;
  keywordHint.textContent = `${count} keyword${count === 1 ? "" : "s"}`;
}

async function loadKeywords() {
  if (!keywordInput) return;
  try {
    const res = await fetch("/api/notifications/config");
    if (!res.ok) return;
    const data = await res.json();
    const notifications = data?.notifications || {};
    const keywords = notifications.keywords || [];
    keywordInput.value = keywords.join("\n");
    renderKeywordHint(keywords.length);
    if (webhookEnabledInput) {
      webhookEnabledInput.checked = !!notifications.webhookEnabled;
    }
    if (webhookUrlInput) {
      webhookUrlInput.value = notifications.webhookUrl || "";
    }
    if (telegramEnabledInput) {
      telegramEnabledInput.checked = !!notifications.telegramEnabled;
    }
    if (telegramBotTokenInput) {
      telegramBotTokenInput.value = notifications.telegramBotToken || "";
    }
    if (telegramChatIdInput) {
      telegramChatIdInput.value = notifications.telegramChatId || "";
    }
  } catch {}
}

function wireKeywordSave() {
  if (!saveKeywordsBtn || !keywordInput) return;
  saveKeywordsBtn.addEventListener("click", async () => {
    const keywords = parseKeywords(keywordInput.value);
    try {
      const res = await fetch("/api/notifications/config", {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ keywords }),
      });
      if (!res.ok) {
        window.showToast?.("Failed to save keywords", "error", 4000);
        return;
      }
      const data = await res.json();
      const updated = data?.notifications?.keywords || keywords;
      keywordInput.value = updated.join("\n");
      renderKeywordHint(updated.length);
      window.showToast?.("Keywords updated", "success", 3000);
    } catch {
      window.showToast?.("Failed to save keywords", "error", 4000);
    }
  });

  keywordInput.addEventListener("input", () => {
    const keywords = parseKeywords(keywordInput.value);
    renderKeywordHint(keywords.length);
  });
}

function wireWebhookSave() {
  if (!saveWebhookBtn || !webhookUrlInput || !webhookEnabledInput) return;
  saveWebhookBtn.addEventListener("click", async () => {
    const webhookUrl = webhookUrlInput.value.trim();
    const webhookEnabled = !!webhookEnabledInput.checked;
    try {
      const res = await fetch("/api/notifications/config", {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ webhookUrl, webhookEnabled }),
      });
      if (!res.ok) {
        window.showToast?.("Failed to save webhook", "error", 4000);
        return;
      }
      const data = await res.json();
      const notifications = data?.notifications || {};
      webhookEnabledInput.checked = !!notifications.webhookEnabled;
      webhookUrlInput.value = notifications.webhookUrl || "";
      window.showToast?.("Webhook updated", "success", 3000);
    } catch {
      window.showToast?.("Failed to save webhook", "error", 4000);
    }
  });
}

function wireTelegramSave() {
  if (!saveTelegramBtn || !telegramBotTokenInput || !telegramChatIdInput || !telegramEnabledInput) return;
  saveTelegramBtn.addEventListener("click", async () => {
    const telegramBotToken = telegramBotTokenInput.value.trim();
    const telegramChatId = telegramChatIdInput.value.trim();
    const telegramEnabled = !!telegramEnabledInput.checked;
    try {
      const res = await fetch("/api/notifications/config", {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ telegramBotToken, telegramChatId, telegramEnabled }),
      });
      if (!res.ok) {
        window.showToast?.("Failed to save Telegram settings", "error", 4000);
        return;
      }
      const data = await res.json();
      const notifications = data?.notifications || {};
      telegramEnabledInput.checked = !!notifications.telegramEnabled;
      telegramBotTokenInput.value = notifications.telegramBotToken || "";
      telegramChatIdInput.value = notifications.telegramChatId || "";
      window.showToast?.("Telegram settings updated", "success", 3000);
    } catch {
      window.showToast?.("Failed to save Telegram settings", "error", 4000);
    }
  });
}


function connect() {
  startNotificationClient();
  if (panel) {
    markAllNotificationsRead();
  }
  subscribeStatus((status) => {
    if (status === "connected") setStatus("Connected", "ok");
    if (status === "error") setStatus("Error", "error");
    if (status === "disconnected") setStatus("Disconnected", "warn");
  });
  subscribeReady((history) => {
    if (listEl) listEl.innerHTML = "";
    history.reverse().forEach((item) => renderRow(item, false));
    if (emptyState) {
      emptyState.classList.toggle("hidden", history.length > 0);
    }
    markAllNotificationsRead();
  });
  subscribeNotifications(handleNotification);
}

wireKeywordSave();
wireWebhookSave();
wireTelegramSave();
loadKeywords();
connect();

function wireActiveClear() {
  const clearIfActive = () => {
    if (document.visibilityState === "visible") {
      markAllNotificationsRead();
    }
  };
  document.addEventListener("visibilitychange", clearIfActive);
  window.addEventListener("focus", clearIfActive);
  clearIfActive();
}

wireActiveClear();

if (previewModal && previewModalClose && previewModalImg) {
  const closePreview = () => {
    previewModal.classList.add("hidden");
    previewModal.classList.remove("flex");
    previewModalImg.src = "";
  };
  previewModalClose.addEventListener("click", closePreview);
  previewModal.addEventListener("click", (event) => {
    if (event.target === previewModal) closePreview();
  });
}