import { initI18n, t, getLang, onLangChange } from "./i18n";
import { initSidebar } from "./sidebar";

interface LinkCategory {
  id: string;
  nameDE: string;
  nameEN: string;
}

interface Link {
  id: string;
  category: string;
  title: string;
  url: string;
  descDE: string;
  descEN: string;
}

interface LinksData {
  categories: LinkCategory[];
  links: Link[];
}

const ICON_EXTERNAL = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" width="14" height="14"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>';
const ICON_FEEDBACK = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" width="16" height="16"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/></svg>';

let data: LinksData | null = null;
let activeCategory = "all";
let searchQuery = "";

document.addEventListener("DOMContentLoaded", () => {
  initI18n();
  initSidebar();
  initSearch();
  loadLinks();
  loadSuggestionCount();
  setupSuggestModal();
  setupFeedbackModal();
  onLangChange(() => {
    if (data) renderAll();
  });
});

function initSearch() {
  const input = document.getElementById("links-search") as HTMLInputElement | null;
  if (!input) return;
  input.addEventListener("input", () => {
    searchQuery = input.value;
    renderLinks();
  });
  // Honor `?q=` from the global search-palette deep links. renderLinks()
  // runs after loadLinks() resolves and reads the module-level searchQuery.
  const q = new URLSearchParams(location.search).get("q");
  if (q) {
    input.value = q;
    searchQuery = q;
  }
}

async function loadLinks() {
  try {
    const resp = await fetch("/api/links");
    if (!resp.ok) return;
    data = await resp.json();
    renderAll();
  } catch {
    // Silently fail — page will show empty state
  }
}

async function loadSuggestionCount() {
  try {
    const resp = await fetch("/api/links/suggestions/count");
    if (!resp.ok) return;
    const result = await resp.json();
    const badge = document.getElementById("pending-badge");
    if (badge && result.count > 0) {
      badge.textContent = `${result.count} ${t("links.pending")}`;
      badge.style.display = "";
    }
  } catch {
    // Ignore — badge stays hidden
  }
}

function renderAll() {
  if (!data) return;
  renderFilters();
  renderLinks();
}

function renderFilters() {
  if (!data) return;
  const container = document.getElementById("category-filters");
  if (!container) return;

  const lang = getLang();
  const allBtn = `<button class="links-filter-btn${activeCategory === "all" ? " active" : ""}" data-category="all" type="button">${t("links.filter.all")}</button>`;
  const catBtns = data.categories.map((cat) => {
    const label = lang === "en" ? cat.nameEN : cat.nameDE;
    const active = activeCategory === cat.id ? " active" : "";
    return `<button class="links-filter-btn${active}" data-category="${cat.id}" type="button">${label}</button>`;
  });

  container.innerHTML = allBtn + catBtns.join("");

  container.querySelectorAll<HTMLButtonElement>(".links-filter-btn").forEach((btn) => {
    btn.addEventListener("click", () => {
      activeCategory = btn.dataset.category || "all";
      renderAll();
    });
  });
}

function renderLinks() {
  if (!data) return;
  const grid = document.getElementById("links-grid");
  if (!grid) return;

  const lang = getLang();
  const q = searchQuery.trim().toLowerCase();
  const filtered = data.links.filter((l) => {
    if (activeCategory !== "all" && l.category !== activeCategory) return false;
    if (q) {
      const hay = `${l.title} ${l.descDE} ${l.descEN} ${l.url}`.toLowerCase();
      if (!hay.includes(q)) return false;
    }
    return true;
  });

  const count = document.getElementById("links-count");
  if (count) count.textContent = `${filtered.length} / ${data.links.length}`;

  if (filtered.length === 0) {
    grid.innerHTML = `<p class="links-empty">${t("links.empty")}</p>`;
    return;
  }

  // Group by category for display
  const grouped = new Map<string, Link[]>();
  for (const link of filtered) {
    const list = grouped.get(link.category) || [];
    list.push(link);
    grouped.set(link.category, list);
  }

  let html = "";
  for (const [catId, links] of grouped) {
    const cat = data.categories.find((c) => c.id === catId);
    const catName = cat ? (lang === "en" ? cat.nameEN : cat.nameDE) : catId;

    if (activeCategory === "all") {
      html += `<h2 class="links-category-heading">${catName}</h2>`;
    }

    html += `<div class="links-category-grid">`;
    for (const link of links) {
      const desc = lang === "en" ? link.descEN : link.descDE;
      const isPlaceholder = link.url === "#";
      const target = isPlaceholder ? "" : ' target="_blank" rel="noopener"';
      const placeholderClass = isPlaceholder ? " link-card-placeholder" : "";
      html += `<a href="${link.url}" class="link-card${placeholderClass}"${target}>
        <div class="link-card-body">
          <div class="link-card-title">
            <span>${link.title}</span>
            ${isPlaceholder ? "" : `<span class="link-card-external">${ICON_EXTERNAL}</span>`}
          </div>
          <p class="link-card-desc">${desc}</p>
        </div>
        <button class="link-card-feedback" type="button" data-link-id="${link.id}" title="Feedback">
          ${ICON_FEEDBACK}
        </button>
      </a>`;
    }
    html += `</div>`;
  }

  grid.innerHTML = html;

  // Attach feedback handlers
  grid.querySelectorAll<HTMLButtonElement>(".link-card-feedback").forEach((btn) => {
    btn.addEventListener("click", (e) => {
      e.preventDefault();
      e.stopPropagation();
      openFeedbackModal(btn.dataset.linkId || "");
    });
  });
}

// --- Suggest Modal ---

function setupSuggestModal() {
  const modal = document.getElementById("suggest-modal");
  const btn = document.getElementById("suggest-btn");
  const cancel = document.getElementById("suggest-cancel");
  const form = document.getElementById("suggest-form") as HTMLFormElement | null;

  if (!btn || !modal || !form) return;

  btn.addEventListener("click", () => {
    populateCategorySelect("suggest-category");
    modal.style.display = "";
  });

  cancel?.addEventListener("click", () => {
    modal.style.display = "none";
    form.reset();
    clearMessage("suggest-message");
  });

  modal.addEventListener("click", (e) => {
    if (e.target === modal) {
      modal.style.display = "none";
      form.reset();
      clearMessage("suggest-message");
    }
  });

  form.addEventListener("submit", async (e) => {
    e.preventDefault();
    const title = (document.getElementById("suggest-title") as HTMLInputElement).value.trim();
    const url = (document.getElementById("suggest-url") as HTMLInputElement).value.trim();
    const category = (document.getElementById("suggest-category") as HTMLSelectElement).value;
    const description = (document.getElementById("suggest-desc") as HTMLTextAreaElement).value.trim();

    try {
      const resp = await fetch("/api/links/suggest", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ title, url, category, description }),
      });
      if (resp.ok) {
        showMessage("suggest-message", t("links.suggest.success"), "success");
        form.reset();
        setTimeout(() => {
          modal.style.display = "none";
          clearMessage("suggest-message");
        }, 2000);
        loadSuggestionCount();
      } else {
        showMessage("suggest-message", t("links.suggest.error"), "error");
      }
    } catch {
      showMessage("suggest-message", t("links.suggest.error"), "error");
    }
  });
}

// --- Feedback Modal ---

function openFeedbackModal(linkId: string) {
  const modal = document.getElementById("feedback-modal");
  const input = document.getElementById("feedback-link-id") as HTMLInputElement | null;
  if (!modal || !input) return;
  input.value = linkId;
  modal.style.display = "";
}

function setupFeedbackModal() {
  const modal = document.getElementById("feedback-modal");
  const cancel = document.getElementById("feedback-cancel");
  const form = document.getElementById("feedback-form") as HTMLFormElement | null;

  if (!modal || !form) return;

  cancel?.addEventListener("click", () => {
    modal.style.display = "none";
    form.reset();
    clearMessage("feedback-message-status");
  });

  modal.addEventListener("click", (e) => {
    if (e.target === modal) {
      modal.style.display = "none";
      form.reset();
      clearMessage("feedback-message-status");
    }
  });

  form.addEventListener("submit", async (e) => {
    e.preventDefault();
    const linkId = (document.getElementById("feedback-link-id") as HTMLInputElement).value;
    const type = (document.getElementById("feedback-type") as HTMLSelectElement).value;
    const message = (document.getElementById("feedback-message") as HTMLTextAreaElement).value.trim();

    try {
      const resp = await fetch("/api/links/feedback", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ linkId, type, message }),
      });
      if (resp.ok) {
        showMessage("feedback-message-status", t("links.feedback.success"), "success");
        form.reset();
        setTimeout(() => {
          modal.style.display = "none";
          clearMessage("feedback-message-status");
        }, 2000);
      } else {
        showMessage("feedback-message-status", t("links.suggest.error"), "error");
      }
    } catch {
      showMessage("feedback-message-status", t("links.suggest.error"), "error");
    }
  });
}

// --- Helpers ---

function populateCategorySelect(selectId: string) {
  if (!data) return;
  const select = document.getElementById(selectId) as HTMLSelectElement | null;
  if (!select) return;
  const lang = getLang();
  select.innerHTML = data.categories.map((cat) => {
    const label = lang === "en" ? cat.nameEN : cat.nameDE;
    return `<option value="${cat.id}">${label}</option>`;
  }).join("");
}

function showMessage(id: string, text: string, type: "success" | "error") {
  const el = document.getElementById(id);
  if (!el) return;
  el.textContent = text;
  el.className = `form-message form-message-${type}`;
}

function clearMessage(id: string) {
  const el = document.getElementById(id);
  if (!el) return;
  el.textContent = "";
  el.className = "form-message";
}
