script.js

const LANGUAGE_LABELS = {
  "🇨🇳": "Chinese",
  "🇺🇸": "English",
  "🇯🇵": "Japanese",
  "🇰🇷": "Korean",
  "🇪🇸": "Spanish",
  "🇫🇷": "French",
  "🇩🇪": "German",
  "🇮🇹": "Italian",
  "🇭🇺": "Hungarian",
  "🇷🇺": "Russian",
  "🇮🇷": "Persian",
  "🇸🇦": "Arabic",
  "🇵🇱": "Polish",
  "🇵🇹": "Portuguese",
  "🇨🇿": "Czech",
  "🇩🇰": "Danish",
  "🇸🇪": "Swedish",
  "🇬🇷": "Greek",
  "🇹🇷": "Turkish",
};

const SAMPLE_CONTAINERS = {
  chinese:      document.querySelector("#chineseSamples"),
  english:      document.querySelector("#englishSamples"),
  multilingual: document.querySelector("#multilingualSamples"),
};

// ─── Reveal observer ──────────────────────────────────────
const revealObserver =
  typeof IntersectionObserver === "function"
    ? new IntersectionObserver(
        (entries, obs) => {
          entries.forEach((entry) => {
            if (!entry.isIntersecting) return;
            entry.target.classList.add("is-visible");
            obs.unobserve(entry.target);
          });
        },
        { threshold: 0, rootMargin: "0px 0px -6% 0px" },
      )
    : null;

function observeReveal(el) {
  if (el.dataset.revealBound) return;
  el.dataset.revealBound = "true";
  if (!revealObserver) {
    el.classList.add("is-visible");
    return;
  }
  revealObserver.observe(el);
}

function setupRevealAnimations() {
  document.querySelectorAll(".reveal").forEach(observeReveal);
}

// ─── Sidebar nav active state ─────────────────────────────
function setupSidebarActive() {
  const links = document.querySelectorAll(".sidebar-link");
  if (!links.length || typeof IntersectionObserver !== "function") return;

  const sectionIds = ["overview", "introduction", "architecture", "demo", "languages"];

  const observer = new IntersectionObserver(
    (entries) => {
      entries.forEach((entry) => {
        if (!entry.isIntersecting) return;
        const id = entry.target.id;
        links.forEach((link) => {
          const href = link.getAttribute("href");
          const match =
            href === `#${id}` ||
            (href === "#overview" && id === "introduction");
          link.classList.toggle("active", match);
        });
      });
    },
    { threshold: 0.3, rootMargin: "-80px 0px -40% 0px" },
  );

  sectionIds.forEach((id) => {
    const el = document.getElementById(id);
    if (el) observer.observe(el);
  });
}

// ─── Tab switching ────────────────────────────────────────
function setupTabs() {
  const tabs = document.querySelectorAll(".demo-tab");
  const panels = {
    chinese:      document.getElementById("chineseSamples"),
    english:      document.getElementById("englishSamples"),
    multilingual: document.getElementById("multilingualSamples"),
  };

  function showTab(targetKey) {
    tabs.forEach((t) => {
      const isActive = t.dataset.tab === targetKey;
      t.classList.toggle("active", isActive);
      t.setAttribute("aria-selected", isActive ? "true" : "false");
    });
    Object.entries(panels).forEach(([key, panel]) => {
      if (!panel) return;
      panel.style.display = key === targetKey ? "grid" : "none";
    });
    setupRevealAnimations();
  }

  // Initialize: hide non-active panels
  showTab("chinese");

  tabs.forEach((tab) => {
    tab.addEventListener("click", () => showTab(tab.dataset.tab));
  });
}

// ─── Asset URL ────────────────────────────────────────────
function buildAssetUrl(assetPath) {
  return encodeURI(`./assets/${assetPath}`);
}

function getCategory(flag) {
  if (flag === "🇨🇳") return "chinese";
  if (flag === "🇺🇸") return "english";
  return "multilingual";
}

// ─── DOM helpers ──────────────────────────────────────────
function el(tag, className, text) {
  const node = document.createElement(tag);
  if (className) node.className = className;
  if (typeof text === "string") node.textContent = text;
  return node;
}

function createAudioPanel(label, src, options = {}) {
  const { collapsible = false } = options;
  const wrap = el("div", "audio-panel");
  const audio = document.createElement("audio");
  audio.controls = true;
  audio.preload  = "none";
  audio.src      = src;

  if (collapsible) {
    wrap.classList.add("audio-panel-collapsible");
    audio.hidden = true;

    const toggle = document.createElement("button");
    toggle.type = "button";
    toggle.className = "audio-label audio-label-button";
    toggle.textContent = label;
    toggle.setAttribute("aria-expanded", "false");
    toggle.setAttribute("aria-label", `Show ${label.toLowerCase()} audio`);
    toggle.addEventListener("click", () => {
      const isExpanded = toggle.getAttribute("aria-expanded") === "true";
      const nextExpanded = !isExpanded;
      audio.hidden = !nextExpanded;
      toggle.setAttribute("aria-expanded", String(nextExpanded));
      toggle.setAttribute(
        "aria-label",
        `${nextExpanded ? "Hide" : "Show"} ${label.toLowerCase()} audio`,
      );
      if (!nextExpanded) audio.pause();
    });

    wrap.append(toggle, audio);
    return wrap;
  }

  const lbl = el("p", "audio-label", label);
  wrap.append(lbl, audio);
  return wrap;
}

function createTextPanel(text) {
  const wrap = el("div", "text-panel");
  const lbl  = el("p", "audio-label", "Text");
  const body = el("div", "sample-text", text);
  wrap.append(lbl, body);
  return wrap;
}

function createSampleCard(sample, index) {
  const compact = sample.category === "multilingual";
  const card    = el("article", compact ? "sample-card compact reveal" : "sample-card reveal");

  card.style.setProperty("--delay", `${Math.min(index * 55, 330)}ms`);

  // Header
  const header = el("header", "sample-header");
  const copy   = document.createElement("div");
  const lang   = el("p", "sample-lang", sample.languageLabel);
  const title  = el("h4", "sample-title", sample.name);
  const chip   = el("span", "status-chip", compact ? "Multilingual" : "Featured");

  copy.append(lang, title);
  header.append(copy, chip);

  // Body
  card.append(
    header,
    createAudioPanel("Prompt speech", sample.promptSpeech, { collapsible: true }),
    createTextPanel(sample.text),
    createAudioPanel("Generated speech", sample.generatedSpeech),
  );

  return card;
}

// ─── Data parsing ─────────────────────────────────────────
function parseSample(line) {
  const raw = JSON.parse(line);
  const [flag, ...rest] = raw.name.trim().split(/\s+/);
  return {
    name:           raw.name,
    title:          rest.join(" ").trim(),
    flag,
    languageLabel:  LANGUAGE_LABELS[flag] ?? "Multilingual",
    text:           raw.text,
    promptSpeech:   buildAssetUrl(raw.prompt_speech),
    generatedSpeech: buildAssetUrl(raw.speech),
    category:       getCategory(flag),
  };
}

// ─── Stats & badges ───────────────────────────────────────
function updateStats(samples) {
  const langCount = new Set(samples.map((s) => s.flag)).size;
  const langEl    = document.querySelector("#languageCount");
  const demoEl    = document.querySelector("#demoCount");
  if (langEl) langEl.textContent = String(langCount);
  if (demoEl) demoEl.textContent = String(samples.length);
}

function renderLanguageBadges(samples) {
  const container = document.querySelector("#languageBadges");
  if (!container) return;
  const seen = new Set();
  container.textContent = "";
  samples.forEach((s) => {
    if (seen.has(s.flag)) return;
    seen.add(s.flag);
    container.append(el("span", "badge", `${s.flag} ${s.languageLabel}`));
  });
}

// ─── Sample rendering ─────────────────────────────────────
function renderSamples(samples) {
  // Clear containers
  Object.values(SAMPLE_CONTAINERS).forEach((c) => {
    if (c) c.textContent = "";
  });

  const indexes = { chinese: 0, english: 0, multilingual: 0 };

  samples.forEach((sample) => {
    const target = SAMPLE_CONTAINERS[sample.category];
    if (!target) return;
    const card = createSampleCard(sample, indexes[sample.category]++);
    target.append(card);
  });
}

function renderError(message) {
  Object.values(SAMPLE_CONTAINERS).forEach((c) => {
    if (!c) return;
    c.textContent = "";
    c.append(el("article", "notice-card", message));
  });
}

// ─── Data loading ─────────────────────────────────────────
async function loadSamples() {
  const response = await fetch("./assets/metadata.jsonl");
  if (!response.ok) throw new Error(`HTTP ${response.status}`);
  const text = await response.text();
  return text.trim().split(/\r?\n/).filter(Boolean).map(parseSample);
}

// ─── Init ─────────────────────────────────────────────────
async function init() {
  setupRevealAnimations();
  setupSidebarActive();
  setupTabs();

  try {
    const samples = await loadSamples();
    updateStats(samples);
    renderLanguageBadges(samples);
    renderSamples(samples);
    setupRevealAnimations(); // observe newly created cards
  } catch (err) {
    console.error(err);
    renderError("Unable to load the demo metadata right now.");
  }
}

init();