import "./nav.ts";
import { autoMountViewers } from "./viewer3d.ts";

/**
 * DSGVO-Placeholder: Wir setzen standardmäßig KEIN Analytics.
 * Falls ihr später z.B. Matomo self-hosted wollt, kann man hier Consent + Script-Loader ergänzen.
 */
const KEY = "ffjr_consent";

type Consent = { analytics: boolean; updatedAt: string };

export function getConsent(): Consent {
  const raw = localStorage.getItem(KEY);
  if (!raw) return { analytics: false, updatedAt: "" };
  try {
    return JSON.parse(raw) as Consent;
  } catch {
    return { analytics: false, updatedAt: "" };
  }
}

export function setConsent(consent: Consent) {
  localStorage.setItem(KEY, JSON.stringify(consent));
}

// aktuell: nichts weiter tun

// Auto-init global scripts (Navigation + optional 3D viewer)
autoMountViewers();

function initHistorySliders() {
  const sliders = document.querySelectorAll<HTMLElement>(".history-slider");
  if (!sliders.length) return;

  sliders.forEach((root) => {
    const range = root.querySelector<HTMLInputElement>(".history-slider__range");
    const yearEl = root.querySelector<HTMLElement>(".hs-year");
    const titleEl = root.querySelector<HTMLElement>(".hs-title");
    const textEl = root.querySelector<HTMLElement>(".hs-text");

    if (!range || !yearEl || !titleEl || !textEl) return;

    const min = Number(root.dataset.min ?? range.min ?? 0);
    const max = Number(root.dataset.max ?? range.max ?? 0);
    const initial = Number(root.dataset.initial ?? range.value ?? max);

    if (!Number.isNaN(min)) range.min = String(min);
    if (!Number.isNaN(max)) range.max = String(max);
    range.value = String(Number.isNaN(initial) ? max : initial);

    let events: Array<{ year: number; title: string; text: string }> = [];
    try {
      const raw = root.getAttribute("data-events") || "[]";
      events = JSON.parse(raw);
    } catch (err) {
      console.warn("History slider: invalid data-events JSON", err);
      events = [];
    }

    events = (events || [])
      .filter((e: any) => typeof e?.year === "number")
      .sort((a, b) => a.year - b.year);

    // Build tick markers for event years (progressive enhancement)
    const ensureTicks = () => {
      // avoid duplicates if init runs twice
      let ticks = root.querySelector<HTMLElement>(".history-slider__ticks");
      if (!ticks) {
        ticks = document.createElement("div");
        ticks.className = "history-slider__ticks";
        ticks.setAttribute("role", "list");
        // place ticks right after the range input
        range.insertAdjacentElement("afterend", ticks);
      } else {
        ticks.innerHTML = "";
      }

      const span = Math.max(1, max - min);

      for (const ev of events) {
        const btn = document.createElement("button");
        btn.type = "button";
        btn.className = "hs-tick";
        btn.dataset.year = String(ev.year);

        const pct = ((ev.year - min) / span) * 100;
        btn.style.left = `${pct}%`;
        btn.setAttribute("role", "listitem");
        btn.setAttribute("aria-label", `Jahr ${ev.year}: ${ev.title}`);
        btn.title = `${ev.year} – ${ev.title}`;

        btn.addEventListener("click", () => {
          range.value = String(ev.year);
          // trigger UI update
          range.dispatchEvent(new Event("input", { bubbles: true }));
        });

        ticks!.appendChild(btn);
      }
    };

    ensureTicks();
    const tickButtons = root.querySelectorAll<HTMLButtonElement>(".hs-tick");

    const render = () => {
      const y = Number(range.value);
      yearEl.textContent = String(y);

      const event =
        [...events].reverse().find((e) => e.year <= y) ??
        events[0] ??
        ({ year: y, title: "—", text: "" } as any);

        const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;

        const swap = (el: HTMLElement, value: string) => {
          if (reduceMotion) {
            el.textContent = value;
            return;
          }
          el.classList.add("hs-fade");
          requestAnimationFrame(() => {
            el.textContent = value;
            requestAnimationFrame(() => el.classList.remove("hs-fade"));
          });
        };
        
        swap(titleEl, event.title || "—");
        swap(textEl, event.text || "");

      // highlight the active milestone tick
      tickButtons.forEach((t) => {
        const isActive = t.dataset.year === String(event.year);
        t.classList.toggle("is-active", isActive);
        if (isActive) t.setAttribute("aria-current", "true");
        else t.removeAttribute("aria-current");
      });
    };

    range.addEventListener("input", render, { passive: true });
    render();
  });
}

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