import { KokoroSession, loadConfig, loadVoicepack, type KokoroConfig, type KokoroVocab } from "./model";
import { phonemizeByWord } from "./phonemize";
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore — sanscript ships JS with no types
import Sanscript from "@indic-transliteration/sanscript";
import { tokenizeByWord } from "./tokenize";
import { buildTimings, type WordTiming, type PhonemeTiming } from "./timestamps";
import type { PhonemizedWord } from "./phonemize";

// Voice list, per-voice default speeds, and gender-aware test phrases all
// come from public/voicepacks.json — single source of truth, edited there
// to add voices or update sample chips without touching code.
interface VoicepackEntry {
  id: string;
  name: string;
  name_native: string;
  gender: "male" | "female";
  source: string;
  default_speed: number;
  ship_status: string;
}
interface ChipPhrase {
  label: string;
  text: string;
}
interface VoicepackManifest {
  voices: VoicepackEntry[];
  test_phrases: Record<string, ChipPhrase[]>;
  default_textarea?: { female?: string; male?: string };
}

// ── DOM refs ────────────────────────────────────────────────────────────────
const $ = <T extends HTMLElement>(id: string) => document.getElementById(id) as T;

const statusEl = $<HTMLElement>("status");
const textEl = $<HTMLTextAreaElement>("text");
const voiceEl = $<HTMLSelectElement>("voice");
const speedEl = $<HTMLInputElement>("speed");
const speedValEl = $<HTMLElement>("speed-val");
const synthBtn = $<HTMLButtonElement>("synth");
const transliterateBtn = $<HTMLButtonElement>("transliterate");
const outputSection = $<HTMLElement>("output-section");
const audioEl = $<HTMLAudioElement>("audio");
const transcriptEl = $<HTMLElement>("transcript");
const voiceRefDlEl = $<HTMLAnchorElement>("voice-ref-dl");
const audioDlEl = $<HTMLAnchorElement>("audio-dl");
const metricsCard = $<HTMLElement>("metrics-card");
const mTtfb = $<HTMLElement>("m-ttfb");
const mSynth = $<HTMLElement>("m-synth");
const mRtf = $<HTMLElement>("m-rtf");
const mTps = $<HTMLElement>("m-tps");
const mTokens = $<HTMLElement>("m-tokens");
const mFrames = $<HTMLElement>("m-frames");
const compactEl = $<HTMLElement>("transcript-compact");
const phonemesEl = $<HTMLElement>("phonemes");
const wordTimingsEl = $<HTMLElement>("word-timings");
const waveformCanvas = $<HTMLCanvasElement>("waveform");
const playPauseBtn = $<HTMLButtonElement>("playpause");
const timeCurEl = $<HTMLElement>("time-cur");
const timeTotalEl = $<HTMLElement>("time-total");
const loadModelBtn = $<HTMLButtonElement>("load-model");
const modelGateEl = $<HTMLElement>("model-gate");

// ── State ───────────────────────────────────────────────────────────────────
let session: KokoroSession | null = null;
let config: KokoroConfig | null = null;
let voicepackManifest: VoicepackManifest | null = null;
const voicepackCache: Record<string, Float32Array> = {};
let currentWords: WordTiming[] = [];
let currentAudio: Float32Array | null = null;
let currentAudioURL: string | null = null;  // blob URL we must revoke before replacing
let highlightRaf: number | null = null;

async function loadVoicepackManifest(): Promise<VoicepackManifest> {
  const res = await fetch("voicepacks.json");
  if (!res.ok) throw new Error(`voicepacks.json: ${res.status}`);
  return (await res.json()) as VoicepackManifest;
}

// Extra silence to splice into synthesized audio AFTER each punctuation phoneme.
// The Marathi v0.2 predictor allocates very few frames to punctuation tokens —
// likely because training data was silence-trimmed, so the predictor never saw
// natural pauses around commas/periods to learn from. Until v0.6 retrains with
// preserved punctuation prosody, splice silence client-side.
//
// Values in seconds. `,` `;` `:` `—` get the "minor break" treatment; `.` `?`
// `!` `…` get the "major break" treatment.
const PUNC_PAUSE_SEC: Record<string, number> = {
  ",": 0.20,
  ";": 0.25,
  ":": 0.20,
  "—": 0.20,
  ".": 0.30,
  "!": 0.30,
  "?": 0.30,
  "…": 0.30,
};

function injectPunctuationPauses(
  audio: Float32Array,
  phonemes: PhonemeTiming[],
  words: WordTiming[],
  sampleRate: number,
): { audio: Float32Array; phonemes: PhonemeTiming[]; words: WordTiming[] } {
  type Insertion = { atSample: number; padSamples: number; afterPhonemeIndex: number };
  const insertions: Insertion[] = [];
  for (let i = 0; i < phonemes.length; i++) {
    const extra = PUNC_PAUSE_SEC[phonemes[i].phone];
    if (!extra) continue;
    insertions.push({
      atSample: Math.min(audio.length, Math.floor(phonemes[i].end * sampleRate)),
      padSamples: Math.floor(extra * sampleRate),
      afterPhonemeIndex: i,
    });
  }
  if (insertions.length === 0) return { audio, phonemes, words };

  // Build new audio buffer with zeros spliced in at insertion points.
  // Insertions are already in increasing atSample order (phonemes are ordered
  // by time and we walked forward), so we can stream a single pass.
  const totalPad = insertions.reduce((acc, x) => acc + x.padSamples, 0);
  const out = new Float32Array(audio.length + totalPad);
  let writeOff = 0;
  let readOff = 0;
  for (const ins of insertions) {
    const copyLen = ins.atSample - readOff;
    if (copyLen > 0) {
      out.set(audio.subarray(readOff, ins.atSample), writeOff);
      writeOff += copyLen;
      readOff = ins.atSample;
    }
    // Float32Array is already zero-initialized; just advance the write cursor.
    writeOff += ins.padSamples;
  }
  if (readOff < audio.length) {
    out.set(audio.subarray(readOff), writeOff);
  }

  // Compute cumulative time shift per phoneme index (each phoneme that comes
  // after an insertion gets pushed later by all preceding pads).
  const shiftSecPerPhoneme = new Array(phonemes.length).fill(0);
  for (const ins of insertions) {
    const shiftSec = ins.padSamples / sampleRate;
    for (let i = ins.afterPhonemeIndex + 1; i < phonemes.length; i++) {
      shiftSecPerPhoneme[i] += shiftSec;
    }
  }
  const newPhonemes: PhonemeTiming[] = phonemes.map((p, i) => ({
    ...p,
    start: p.start + shiftSecPerPhoneme[i],
    end: p.end + shiftSecPerPhoneme[i],
  }));

  // Words: each word has a phonemes[] sub-array. Find the first/last phoneme
  // belonging to each word by phone-equality + time-window match against the
  // new phoneme list, and shift word.start/end to match. Phone strings repeat,
  // so we walk a cursor through newPhonemes to pair them up safely.
  let cursor = 0;
  const newWords: WordTiming[] = words.map((w) => {
    const wordPhonemes: PhonemeTiming[] = [];
    for (const wp of w.phonemes) {
      // Find the next newPhonemes entry with matching phone + roughly matching
      // pre-shift end time. Since phonemes preserve order across the splice,
      // a forward cursor walk is sufficient.
      while (cursor < newPhonemes.length && phonemes[cursor].phone !== wp.phone) {
        cursor++;
      }
      if (cursor < newPhonemes.length) {
        wordPhonemes.push(newPhonemes[cursor]);
        cursor++;
      }
    }
    if (wordPhonemes.length === 0) return w;
    return {
      ...w,
      start: wordPhonemes[0].start,
      end: wordPhonemes[wordPhonemes.length - 1].end,
      phonemes: wordPhonemes,
    };
  });

  return { audio: out, phonemes: newPhonemes, words: newWords };
}

function populateVoiceSelector(manifest: VoicepackManifest): void {
  // Native <optgroup> by gender — keeps the dropdown a one-click affair on
  // mobile and accessible by default, while making the (now 25+) voice list
  // browsable. Order: Female first, Male second; within each group the
  // manifest order is preserved (Marathi-trained voices float to the top).
  while (voiceEl.firstChild) voiceEl.removeChild(voiceEl.firstChild);
  const femaleGroup = document.createElement("optgroup");
  femaleGroup.label = "आवाज (स्त्री) — Female voices";
  const maleGroup = document.createElement("optgroup");
  maleGroup.label = "आवाज (पुरुष) — Male voices";
  for (const v of manifest.voices) {
    const opt = document.createElement("option");
    opt.value = v.id;
    const tag = v.ship_status === "stable" ? "" : ` [${v.ship_status.replace(/_/g, " ")}]`;
    // Drop the trailing "— female"/"— male" since the optgroup label conveys
    // gender now; keeps option text short on narrow screens.
    opt.textContent = `${v.name} (${v.name_native})${tag}`;
    (v.gender === "female" ? femaleGroup : maleGroup).appendChild(opt);
  }
  // Append both groups even if one is empty — empty optgroups are invisible.
  voiceEl.appendChild(femaleGroup);
  voiceEl.appendChild(maleGroup);
}

// Build chip <button>s under #chips-marathi and #chips-minglish, filtered by
// the active voice's gender. Called on initial load + every voice change.
function populateChips(manifest: VoicepackManifest, gender: "male" | "female"): void {
  const marathiContainer = document.getElementById("chips-marathi") as HTMLDivElement | null;
  const minglishContainer = document.getElementById("chips-minglish") as HTMLDivElement | null;
  if (!marathiContainer || !minglishContainer) return;

  // Strip out previously-injected chips (preserve the static label span).
  marathiContainer.querySelectorAll(".chip").forEach((c) => c.remove());
  minglishContainer.querySelectorAll(".chip").forEach((c) => c.remove());

  const buildChip = (p: ChipPhrase): HTMLButtonElement => {
    const b = document.createElement("button");
    b.className = "chip";
    b.type = "button";
    b.setAttribute("data-text", p.text);
    b.textContent = p.label;
    b.addEventListener("click", () => {
      textEl.value = p.text;
    });
    return b;
  };

  const marathi: ChipPhrase[] = [
    ...(manifest.test_phrases.marathi_neutral ?? []),
    ...(manifest.test_phrases[`marathi_${gender}`] ?? []),
  ];
  const minglish: ChipPhrase[] = [
    ...(manifest.test_phrases.minglish_neutral ?? []),
    ...(manifest.test_phrases[`minglish_${gender}`] ?? []),
  ];

  for (const p of marathi) marathiContainer.appendChild(buildChip(p));
  for (const p of minglish) minglishContainer.appendChild(buildChip(p));
}

// Kokoro's PLBERT caps at 510 input tokens. Going over crashes with a shape
// assertion; we surface a clear user error before calling the model.
const PLBERT_MAX_TOKENS = 510;

// ── Boot ────────────────────────────────────────────────────────────────────
// Two-step boot: fetch small metadata on page load (config + one voicepack,
// together ~530 KB), then gate the big 325 MB model download behind a button
// so users don't accidentally consume data.
async function bootLight() {
  setStatus("loading config…");
  config = await loadConfig();
  // Kick off loanword map fetch in parallel — small (~700 KB) and we want it
  // ready before the first synth so the auto-preprocess in onSynth doesn't
  // race or skip silently.
  ensureLoanwordMap().catch((e) => console.warn("loanword_map.json fetch failed:", e));
  voicepackManifest = await loadVoicepackManifest();
  populateVoiceSelector(voicepackManifest);
  const initialVoice = voicepackManifest.voices[0];
  voiceEl.value = initialVoice.id;
  populateChips(voicepackManifest, initialVoice.gender);
  speedEl.value = String(initialVoice.default_speed);
  speedValEl.textContent = fmtSpeed(speedEl.value);
  updateVoiceRefLink(initialVoice.id);
  // Replace the index.html-baked textarea default with one that matches the
  // initial voice's gender — only on cold load, before the user has typed.
  // (Textarea default doesn't follow voice changes, to avoid eating typed text.)
  const defaultText = voicepackManifest.default_textarea?.[initialVoice.gender];
  if (defaultText) textEl.value = defaultText;
  voicepackCache[initialVoice.id] = await loadVoicepack(initialVoice.id);
  setStatus(
    `ready to load model · vocab ${Object.keys(config.vocab).length} — tap "Load model" to proceed`,
  );
  modelGateEl.hidden = false;
  loadModelBtn.disabled = false;
}

async function loadModel() {
  if (!config) return;
  loadModelBtn.disabled = true;
  loadModelBtn.textContent = "Loading…";
  try {
    session = await KokoroSession.create((msg) => setStatus(msg));
    // Belt-and-suspenders: explicitly tear down the gate card and re-enable
    // synthesize. `.hidden` sometimes fights stylesheet rules in certain
    // browsers; setting display:none as a backup guarantees it disappears.
    modelGateEl.hidden = true;
    modelGateEl.style.display = "none";
    loadModelBtn.textContent = "Load model";
    synthBtn.disabled = false;
    setStatus(
      `ready · vocab ${Object.keys(config.vocab).length} · ${session.backend}`,
      "ready",
    );
  } catch (err) {
    console.error("model load failed", err);
    setStatus(`model load failed: ${(err as Error).message}`, "error");
    loadModelBtn.disabled = false;
    loadModelBtn.textContent = "Retry load";
  }
}

loadModelBtn.addEventListener("click", loadModel);

function setStatus(msg: string, cls: "ready" | "error" | "" = "") {
  statusEl.textContent = msg;
  statusEl.className = "card status" + (cls ? ` ${cls}` : "");
}

// ── UI wiring ───────────────────────────────────────────────────────────────
const fmtSpeed = (v: string | number) => `${parseFloat(String(v)).toFixed(2)}×`;
function updateVoiceRefLink(voiceId: string) {
  voiceRefDlEl.href = `/refs/${voiceId}.mp3`;
  voiceRefDlEl.setAttribute("download", `${voiceId}_reference.mp3`);
}
voiceEl.addEventListener("change", () => {
  if (!voicepackManifest) return;
  const v = voicepackManifest.voices.find((x) => x.id === voiceEl.value);
  if (!v) return;
  speedEl.value = String(v.default_speed);
  speedValEl.textContent = fmtSpeed(speedEl.value);
  populateChips(voicepackManifest, v.gender);
  updateVoiceRefLink(v.id);
});
speedEl.addEventListener("input", () => {
  speedValEl.textContent = fmtSpeed(speedEl.value);
});

// Transliteration: Latin (ITRANS) → Devanagari, in-place. User can edit the
// result before synthesizing, so any quirks of the scheme (intuitive mapping
// for vowels, anusvara via "M", proper-noun handling) can be fixed manually
// rather than by us second-guessing them.
//
// `syncope: true` is sanscript's built-in Hindi/Marathi schwa-deletion mode —
// it drops the inherent /a/ and the corresponding `्` (halant) in positions
// where Indo-Aryan languages don't pronounce it (especially word-final
// consonants). Without it, ITRANS produces Sanskrit-style "नमस्कार्" instead
// of the form a Marathi reader expects, "नमस्कार".
function transliterateLatinToDevanagari(input: string): string {
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  return (Sanscript as any).t(input, "itrans", "devanagari", { syncope: true }) as string;
}

// ── English-loanword preprocessor ───────────────────────────────────────────
// Why: the Marathi-trained TTS routes Latin English (e.g., "Weekend") through
// espeak en G2P → English-IPA neighborhood the decoder hasn't seen → produces
// "weekenda"/"amajing"-style outputs. Same word as conventional Devanagari
// (वीकेंड) → espeak mr G2P → Marathi-IPA → decoder produces clean
// Indian-Marathi rendering. The 19,436-entry loanword_map.json is built from
// the IndicCMix-derived dictionary at
// experiments/v0_4_lang_conditioning/data/loanword_dict_dev_to_latin.tsv,
// frequency-deduped, lower-cased keys. See
// feedback_devanagari_transliteration_bypasses_decoder_ceiling.md.
let loanwordMap: Record<string, string> | null = null;
async function ensureLoanwordMap(): Promise<Record<string, string>> {
  if (loanwordMap) return loanwordMap;
  const res = await fetch("/loanword_map.json");
  if (!res.ok) throw new Error(`loanword_map.json fetch failed: ${res.status}`);
  loanwordMap = await res.json();
  return loanwordMap!;
}
const LATIN_WORD_RE = /[A-Za-z][A-Za-z'\-]*/g;
function preprocessLoanwords(input: string, map: Record<string, string>): string {
  // Replace Latin English tokens with their conventional Devanagari spellings.
  // OOV Latin tokens are kept verbatim (the user can fall back to ITRANS via
  // the Transliterate button if needed). Non-Latin segments are untouched.
  return input.replace(LATIN_WORD_RE, (tok) => map[tok.toLowerCase()] ?? tok);
}
// Tracks substitutions performed in the last onSynth call so the per-word
// transcript table can show the user's original Roman word (e.g. "movie")
// instead of the auto-substituted Devanagari (मूव्ही). Devanagari → Roman.
let lastSubstitutions: Map<string, string> = new Map();
function preprocessLoanwordsRecorded(
  input: string,
  map: Record<string, string>,
): string {
  lastSubstitutions = new Map();
  return input.replace(LATIN_WORD_RE, (tok) => {
    const replacement = map[tok.toLowerCase()];
    if (replacement && replacement !== tok) {
      lastSubstitutions.set(replacement, tok);
    }
    return replacement ?? tok;
  });
}

transliterateBtn.addEventListener("click", () => {
  const before = textEl.value;
  // Two-pass: dictionary lookup first (catches common loanwords automatically),
  // sanscript ITRANS fallback after (for users typing romanized Sanskrit/Marathi
  // that the dict doesn't cover).
  const map = loanwordMap;  // may be null on first click before fetch resolves
  const afterDict = map ? preprocessLoanwords(before, map) : before;
  const after = transliterateLatinToDevanagari(afterDict);
  if (after !== before) {
    textEl.value = after;
    textEl.focus();
  }
});

synthBtn.disabled = true;
synthBtn.addEventListener("click", onSynth);

// ── fused player wiring ──────────────────────────────────────────────────
playPauseBtn.addEventListener("click", () => {
  if (audioEl.paused) audioEl.play().catch(() => {});
  else audioEl.pause();
});
audioEl.addEventListener("play",  () => { playPauseBtn.textContent = "⏸"; playPauseBtn.classList.add("playing"); });
audioEl.addEventListener("pause", () => { playPauseBtn.textContent = "▶";  playPauseBtn.classList.remove("playing"); });
audioEl.addEventListener("ended", () => { playPauseBtn.textContent = "▶";  playPauseBtn.classList.remove("playing"); });
// HTMLMediaElement.currentTime/duration are MEDIA-time seconds (independent of
// playbackRate) — same units as our pred_dur-derived word timings. Don't
// multiply by playbackRate; doing so made the clock drift proportional to the
// speed slider and broke seek/highlight alignment on non-1.0 speeds.
audioEl.addEventListener("loadedmetadata", () => {
  timeTotalEl.textContent = fmtTime(audioEl.duration);
});
audioEl.addEventListener("timeupdate", () => {
  timeCurEl.textContent = fmtTime(audioEl.currentTime);
});

// Click + drag (scrub) on the waveform. Pointer events cover mouse + touch.
let scrubbing = false;
let wasPlayingBeforeScrub = false;
function seekToPointer(e: PointerEvent | MouseEvent) {
  if (!currentAudio) return;
  const rect = waveformCanvas.getBoundingClientRect();
  const pct = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
  const totalNat = currentAudio.length / 24000;
  // audioEl.currentTime is media-time; our natural-second target matches directly.
  audioEl.currentTime = pct * totalNat;
  // Keep the waveform + timing rows visually in sync even while paused / dragging
  tickHighlight();
}
waveformCanvas.addEventListener("pointerdown", (e) => {
  if (!currentAudio) return;
  scrubbing = true;
  wasPlayingBeforeScrub = !audioEl.paused;
  if (wasPlayingBeforeScrub) audioEl.pause();
  waveformCanvas.setPointerCapture(e.pointerId);
  seekToPointer(e);
});
waveformCanvas.addEventListener("pointermove", (e) => {
  if (scrubbing) seekToPointer(e);
});
function endScrub(e: PointerEvent) {
  if (!scrubbing) return;
  scrubbing = false;
  try { waveformCanvas.releasePointerCapture(e.pointerId); } catch {/* ignore */}
  if (wasPlayingBeforeScrub) audioEl.play().catch(() => {});
}
waveformCanvas.addEventListener("pointerup", endScrub);
waveformCanvas.addEventListener("pointercancel", endScrub);

// Space bar toggles play/pause when focus isn't on text input
document.addEventListener("keydown", (e) => {
  if (e.code !== "Space") return;
  const t = e.target as HTMLElement;
  if (t.tagName === "TEXTAREA" || t.tagName === "INPUT") return;
  e.preventDefault();
  playPauseBtn.click();
});

function fmtTime(sec: number): string {
  if (!isFinite(sec) || sec < 0) sec = 0;
  const m = Math.floor(sec / 60);
  const s = Math.floor(sec % 60);
  return `${m}:${s.toString().padStart(2, "0")}`;
}

// ── Chunk planning for long text ────────────────────────────────────────────
// Kokoro's PLBERT caps input at 510 phoneme tokens. For longer text we split
// on sentence boundaries (via Intl.Segmenter — locale-aware, understands
// Devanagari danda/double-danda as well as Latin .!?), phonemize each sentence,
// then greedy-pack sentences into chunks under the cap. If a single sentence
// still exceeds cap, we fall back to per-word greedy packing within that
// sentence — prosody at the sub-split boundary will be less clean but at
// least the synthesis runs.
async function planChunks(
  text: string,
  vocab: KokoroVocab,
  cap: number,
): Promise<PhonemizedWord[][]> {
  const segmenter = new Intl.Segmenter("mr", { granularity: "sentence" });
  const sentences = [...segmenter.segment(text)]
    .map(s => s.segment.trim())
    .filter(s => s.length > 0);

  const tokCount = (ws: PhonemizedWord[]) => tokenizeByWord(ws, vocab).inputIds.length;

  const chunks: PhonemizedWord[][] = [];
  let current: PhonemizedWord[] = [];
  let currentTokens = 0;

  // tokenizeByWord inserts one boundary-space token BETWEEN each word (not
  // before the first). So `tokCount(sA ++ sB) = tokCount(sA) + tokCount(sB) + 1`
  // when we merge sentences A and B into the same chunk — that +1 is easy to
  // miss and was previously causing near-cap inputs to overflow PLBERT. Account
  // for it explicitly in the packing math.
  const BOUNDARY_TOKEN_COST = 1;

  for (const s of sentences) {
    const sWords = await phonemizeByWord(s);
    const sTokens = tokCount(sWords);

    // Skip sentences that phonemize to nothing (whitespace, orphan punctuation,
    // quote marks that espeak drops). Passing 0 tokens to PLBERT crashes at the
    // Expand node with "invalid expand shape".
    if (sTokens === 0) continue;

    if (sTokens > cap) {
      // Sentence alone exceeds cap — flush current, sub-split by greedy word packing.
      if (current.length) { chunks.push(current); current = []; currentTokens = 0; }
      let sub: PhonemizedWord[] = [];
      for (const w of sWords) {
        const probe = [...sub, w];
        const probeTokens = tokCount(probe);
        if (probeTokens > cap) {
          if (sub.length > 0) {
            chunks.push(sub);
            sub = [w];
            // If this single word is STILL > cap by itself, we can't split further
            // without corrupting phoneme-to-grapheme alignment. Skip with a warning.
            if (tokCount(sub) > cap) {
              console.warn(`dropping oversized word (${tokCount(sub)} tokens > cap ${cap})`, w);
              sub = [];
            }
          } else {
            // sub was already empty; this lone word exceeds cap. Skip.
            console.warn(`dropping oversized word (${probeTokens} tokens > cap ${cap})`, w);
          }
        } else {
          sub = probe;
        }
      }
      if (sub.length) chunks.push(sub);
      continue;
    }

    const boundary = current.length > 0 ? BOUNDARY_TOKEN_COST : 0;
    if (currentTokens + boundary + sTokens > cap) {
      chunks.push(current);
      current = [...sWords];
      currentTokens = sTokens;
    } else {
      current.push(...sWords);
      currentTokens += boundary + sTokens;
    }
  }
  if (current.length) chunks.push(current);
  // Final safety: drop any chunk that ended up with 0 tokens or, defensively,
  // still over cap (belt-and-suspenders against any miscount above).
  return chunks.filter(c => {
    const t = tokCount(c);
    if (t === 0) return false;
    if (t > cap) {
      console.warn(`dropping over-cap chunk (${t} tokens > ${cap}) after packing`, c);
      return false;
    }
    return true;
  });
}

// ── Main action ─────────────────────────────────────────────────────────────
async function onSynth() {
  if (!session || !config) return;
  let text = textEl.value.trim();
  if (!text) return;

  // Auto-replace common English loanwords with their conventional Devanagari
  // spellings before the rest of the pipeline. This routes Hinglish through
  // espeak mr G2P (Marathi-IPA neighborhood the decoder knows) instead of
  // espeak en G2P (English-IPA the decoder produces "weekenda"-style
  // approximations for). Done in-memory only — textarea keeps the user's
  // original mixed Roman+Devanagari text so they don't lose the source they
  // typed. The explicit "Transliterate" button is what mutates textEl.value.
  if (loanwordMap) {
    text = preprocessLoanwordsRecorded(text, loanwordMap);
  }

  try {
    synthBtn.disabled = true;
    setStatus("phonemizing…");

    const voiceId = voiceEl.value;
    if (!voicepackCache[voiceId]) {
      voicepackCache[voiceId] = await loadVoicepack(voiceId);
    }
    const voicepack = voicepackCache[voiceId];

    const chunks = await planChunks(text, config.vocab, PLBERT_MAX_TOKENS);
    if (chunks.length === 0) {
      setStatus("no phonemes produced — check input text", "error");
      return;
    }

    const speed = parseFloat(speedEl.value);
    // 100 ms silence between chunks — keeps sentence boundaries audibly
    // separated without introducing a long gap.
    const INTER_CHUNK_PAD_SEC = 0.1;

    const allAudio: Float32Array[] = [];
    const allWords: WordTiming[] = [];
    const allPhonemes: PhonemeTiming[] = [];
    let totalTokens = 0;
    let audioOffsetSamples = 0;
    let sampleRate = 24000;

    const t0 = performance.now();
    let tFirstChunkDone = 0;  // time-to-first-chunk: latency to first playable audio

    for (let ci = 0; ci < chunks.length; ci++) {
      const chunk = chunks[ci];
      const tok = tokenizeByWord(chunk, config.vocab);
      if (tok.inputIds.length === 0) {
        console.warn(`skipping empty chunk ${ci + 1}/${chunks.length}`, chunk);
        continue;
      }
      totalTokens += tok.inputIds.length;

      if (chunks.length > 1) {
        setStatus(`synthesizing chunk ${ci + 1}/${chunks.length} (${tok.inputIds.length} tokens)…`);
      } else {
        setStatus(`synthesizing (${tok.inputIds.length} tokens)…`);
      }

      // KPipeline convention: ref_s = voicepack[n_phonemes - 1] (voicepack is
      // [510, 1, 256] flat). Per chunk, not per whole text — shorter chunks
      // want the ref_s slice for their own length.
      const idx = Math.min(tok.inputIds.length - 1, 509);
      const refS = voicepack.slice(idx * 256, (idx + 1) * 256);

      const result = await session.synthesize(tok.inputIds, refS, speed);
      sampleRate = result.sampleRate;
      const PAD_SAMPLES = Math.floor(sampleRate * INTER_CHUNK_PAD_SEC);
      let { phonemes, words } = buildTimings(tok, result.predDur, sampleRate);

      // Tail-trim NON-final chunks only: ISTFTNet's residual frames would
      // otherwise bleed into the next chunk's silence pad and onset, which
      // sounds gross. The final chunk has nothing after it, so we keep its
      // full decoder output — letting word-final semi-vowels (/j/ in सांगतोय,
      // /w/ in हवा) and aspirated stops complete their natural release. Trim
      // pad on internal chunks is 80 ms, which preserves codas while still
      // dropping the worst of the ghost-vowel "uhh" tail.
      let audio = result.audio;
      const isFinalChunk = ci === chunks.length - 1;
      if (!isFinalChunk && words.length > 0) {
        // words[].end is content-relative (predDur excludes BOS+EOS) but the
        // audio buffer's first samples are BOS warmup. Add leadOffsetSec to
        // the cutoff so we don't slice into the last word's tail.
        const cutoff = Math.min(
          audio.length,
          Math.floor((words[words.length - 1].end + result.leadOffsetSec + 0.08) * sampleRate),
        );
        if (cutoff < audio.length) audio = audio.slice(0, cutoff);
      }

      // Splice in extra silence after each punctuation phoneme. The Marathi
      // v0.2 predictor under-allocates duration to punctuation tokens (training
      // data lacked natural punctuation prosody); this is a client-side
      // workaround until v0.6 retrains with preserved punctuation supervision.
      ({ audio, phonemes, words } = injectPunctuationPauses(audio, phonemes, words, sampleRate));

      // Offset this chunk's timings by cumulative audio start + the BOS
      // pre-roll inside this chunk's audio (since predDur returned from
      // synthesize() covers ONLY content; the audio buffer still has the
      // BOS warmup audio at its start).
      const offsetSec = audioOffsetSamples / sampleRate + result.leadOffsetSec;
      for (const p of phonemes) { p.start += offsetSec; p.end += offsetSec; }
      for (const w of words) {
        w.start += offsetSec; w.end += offsetSec;
        for (const pp of w.phonemes) { pp.start += offsetSec; pp.end += offsetSec; }
      }

      allAudio.push(audio);
      audioOffsetSamples += audio.length;
      allPhonemes.push(...phonemes);
      allWords.push(...words);
      // TTFB = wall time from synth start until the first chunk's audio is ready.
      // For single-chunk inputs this equals total synth time. For multi-chunk
      // it's the latency a streaming player would actually surface to the user.
      if (tFirstChunkDone === 0) tFirstChunkDone = performance.now();

      // Silence pad between chunks (not after the last).
      if (ci < chunks.length - 1) {
        allAudio.push(new Float32Array(PAD_SAMPLES));
        audioOffsetSamples += PAD_SAMPLES;
      }
    }

    // Trailing pad after the final chunk. ISTFTNet decoder produces samples
    // up to the last predicted phoneme's duration with no acoustic decay
    // buffer — without this pad, the very end of the audio file ends mid-
    // release-transient and listeners perceive the last word as "eaten".
    // 80 ms is enough to cover any voicepack's natural release without
    // making the end feel laggy.
    const TRAIL_PAD_SEC = 0.08;
    const TRAIL_PAD_SAMPLES = Math.floor(sampleRate * TRAIL_PAD_SEC);
    allAudio.push(new Float32Array(TRAIL_PAD_SAMPLES));
    audioOffsetSamples += TRAIL_PAD_SAMPLES;

    const t1 = performance.now();

    // Concat audio into one Float32Array for the WAV encoder + waveform.
    const audio = new Float32Array(audioOffsetSamples);
    {
      let off = 0;
      for (const a of allAudio) { audio.set(a, off); off += a.length; }
    }

    const wavBlob = float32ToWav(audio, sampleRate);
    // Revoke the previous blob URL before replacing — else each synth leaks
    // ~N bytes of WAV data in the browser's URL table until the tab closes.
    if (currentAudioURL) URL.revokeObjectURL(currentAudioURL);
    currentAudioURL = URL.createObjectURL(wavBlob);
    audioEl.src = currentAudioURL;
    // Wire the download button to the same blob URL with a meaningful filename.
    audioDlEl.href = currentAudioURL;
    const dlVoiceId = voiceEl.value || "voice";
    const dlTimestamp = new Date().toISOString().slice(0, 19).replaceAll(":", "-");
    audioDlEl.download = `bol-tts_${dlVoiceId}_${dlTimestamp}.wav`;
    audioEl.preservesPitch = true;
    // Speed is now applied at the model level (passed to ONNX as a float32[1]
    // input that scales the predictor's per-phoneme duration before rounding).
    // The audio buffer is already at the requested pacing — playbackRate stays
    // at 1.0 so per-word timings line up with what the user hears.
    audioEl.playbackRate = 1.0;

    const phonemes = allPhonemes;
    const words = allWords;
    currentWords = words;

    renderSideBySide(words);
    currentAudio = audio;
    drawWaveform(audio, words, sampleRate);

    phonemesEl.textContent = phonemes
      .map(p => `${p.phone}  ${fmtSec(p.start)}–${fmtSec(p.end)}  (${p.durFrames}f)`)
      .join("\n");
    wordTimingsEl.textContent = words
      .map(w => `${w.word.padEnd(14)}  ${fmtSec(w.start)}–${fmtSec(w.end)}  [${w.ipa}]`)
      .join("\n");

    outputSection.hidden = false;
    const chunkTag = chunks.length > 1 ? ` · ${chunks.length} chunks` : "";
    const synthMs = t1 - t0;
    const audioSec = audio.length / sampleRate;
    setStatus(
      `synth ${synthMs.toFixed(0)}ms · ${audioSec.toFixed(2)}s audio · ${totalTokens} tokens${chunkTag}`,
      "ready",
    );

    // Populate the metrics card. RTF = audio_seconds / synth_seconds —
    // values >1 mean synthesis is faster than realtime (i.e. you could
    // synthesize a 10s clip in <10s wall time). On WebGPU this is usually
    // 5-10×; on WASM CPU fallback ~1-3×.
    const synthSec = synthMs / 1000;
    const rtf = synthSec > 0 ? audioSec / synthSec : 0;
    const tps = synthSec > 0 ? totalTokens / synthSec : 0;
    const totalFrames = phonemes.reduce((acc, p) => acc + p.durFrames, 0);
    const ttfbMs = tFirstChunkDone > 0 ? tFirstChunkDone - t0 : synthMs;
    mTtfb.textContent = ttfbMs.toFixed(0);
    mSynth.textContent = synthMs.toFixed(0);
    mRtf.textContent = rtf.toFixed(1);
    mTps.textContent = tps.toFixed(0);
    mTokens.textContent = String(totalTokens);
    mFrames.textContent = String(totalFrames);
    metricsCard.hidden = false;

    audioEl.play().catch(() => {/* user may block autoplay; harmless */});

  } catch (err) {
    console.error(err);
    setStatus(`error: ${(err as Error).message}`, "error");
  } finally {
    synthBtn.disabled = false;
  }
}

// ── Transcript rendering ────────────────────────────────────────────────
// Two views:
//   1. Compact (default): one inline Devanagari sentence, per-word spans that
//      highlight during playback. Click/Enter opens the details panel.
//   2. Details: 3-column Devanagari / IPA / timing table — one row per word.
// Both get updated live by tickHighlight().
function renderSideBySide(words: WordTiming[]) {
  // For each word, prefer the user's ORIGINAL Roman input (when the loanword
  // preprocessor substituted a Devanagari spelling) so they recognize their
  // own typing rather than seeing auto-rewrites. Falls through to the
  // synthesized Devanagari for non-substituted words.
  const labelOf = (w: WordTiming): string => lastSubstitutions.get(w.word) ?? w.word;

  // Compact transcript — one span per word for live highlight
  while (compactEl.firstChild) compactEl.removeChild(compactEl.firstChild);
  words.forEach((w, i) => {
    const span = document.createElement("span");
    span.className = "word";
    span.dataset.idx = String(i);
    span.tabIndex = 0;
    span.role = "button";
    span.title = `Seek to ${w.start.toFixed(2)}s (${w.ipa})`;
    span.textContent = labelOf(w);
    compactEl.appendChild(span);
    if (i < words.length - 1) compactEl.appendChild(document.createTextNode(" "));
  });

  // Details table — clear old rows, keep the 3 col-heads, add one row per word
  const heads = Array.from(transcriptEl.querySelectorAll(".col-head"));
  while (transcriptEl.firstChild) transcriptEl.removeChild(transcriptEl.firstChild);
  heads.forEach((h) => transcriptEl.appendChild(h));

  words.forEach((w, i) => {
    const row = document.createElement("div");
    row.className = "row";
    row.dataset.idx = String(i);

    const devanagari = document.createElement("div");
    devanagari.className = "cell devanagari";
    devanagari.textContent = labelOf(w);

    const ipa = document.createElement("div");
    ipa.className = "cell ipa";
    ipa.textContent = w.ipa;

    const timing = document.createElement("div");
    timing.className = "cell timing";
    const range = document.createElement("span");
    range.className = "range";
    range.textContent = `${w.start.toFixed(2)}–${w.end.toFixed(2)}s`;
    const bar = document.createElement("div");
    bar.className = "bar";
    const barFill = document.createElement("div");
    barFill.className = "bar-fill";
    barFill.style.transform = "scaleX(0)";
    bar.appendChild(barFill);
    timing.appendChild(range);
    timing.appendChild(bar);

    row.appendChild(devanagari);
    row.appendChild(ipa);
    row.appendChild(timing);
    transcriptEl.appendChild(row);
  });
}

// ── Waveform drawing ───────────────────────────────────────────────────────
// Static silhouette of the audio colored by word segments. A playhead is
// drawn on top in requestAnimationFrame tick during playback.
function drawWaveform(audio: Float32Array, words: WordTiming[], sampleRate: number) {
  const canvas = waveformCanvas;
  const dpr = window.devicePixelRatio || 1;
  const cssW = canvas.clientWidth || 600;
  const cssH = canvas.clientHeight || 56;
  canvas.width = cssW * dpr;
  canvas.height = cssH * dpr;
  const ctx = canvas.getContext("2d")!;
  ctx.scale(dpr, dpr);
  ctx.clearRect(0, 0, cssW, cssH);

  const totalDur = audio.length / sampleRate;
  if (totalDur <= 0) return;

  // Downsample audio into one bin per pixel column
  const cols = Math.floor(cssW);
  const samplesPerCol = Math.max(1, Math.floor(audio.length / cols));

  // Per-pixel colour based on which word's time range the column belongs to
  const colorForT = (t: number): string => {
    for (const w of words) {
      if (t >= w.start && t <= w.end) {
        // alternate two warm tones for adjacent words so boundaries are visible
        const idx = words.indexOf(w);
        return idx % 2 === 0 ? "#E07A1F" : "#B65F14";
      }
    }
    return "#C4A97A";
  };

  const mid = cssH / 2;
  ctx.lineWidth = 1;
  for (let x = 0; x < cols; x++) {
    const t = (x / cols) * totalDur;
    let peak = 0;
    const from = x * samplesPerCol;
    const to = Math.min(audio.length, from + samplesPerCol);
    for (let i = from; i < to; i++) {
      const v = Math.abs(audio[i]);
      if (v > peak) peak = v;
    }
    const h = Math.max(1, peak * (cssH * 0.9));
    ctx.strokeStyle = colorForT(t);
    ctx.beginPath();
    ctx.moveTo(x + 0.5, mid - h / 2);
    ctx.lineTo(x + 0.5, mid + h / 2);
    ctx.stroke();
  }
}

// Called each frame during playback to overlay a moving playhead + a dimmed
// "past" region covering the played portion of the waveform.
function drawPlayhead(currentSec: number, totalSec: number) {
  if (!currentAudio) return;
  const canvas = waveformCanvas;
  const cssW = canvas.clientWidth || 600;
  const cssH = canvas.clientHeight || 56;
  const ctx = canvas.getContext("2d")!;
  // redraw underlying (cheap — ~600 stroked lines is trivial)
  drawWaveform(currentAudio, currentWords, 24000);
  const x = (currentSec / totalSec) * cssW;
  // Dimmed overlay on the played portion (shows progress visually)
  ctx.save();
  ctx.globalCompositeOperation = "multiply";
  ctx.fillStyle = "#D9C9A7"; // muted tan dims the bright saffron
  ctx.fillRect(0, 0, x, cssH);
  ctx.restore();
  // Thin playhead line at the current position
  ctx.save();
  ctx.strokeStyle = "#8E2E2E";
  ctx.lineWidth = 1.5;
  ctx.beginPath();
  ctx.moveTo(x, 0);
  ctx.lineTo(x, cssH);
  ctx.stroke();
  ctx.restore();
}

// ── Live word highlighting + timing bar fill + waveform playhead ──────────
// Listeners attached ONCE at module load. The tick function always reads
// current state from DOM + module state — no stale closure captures when
// the user re-synthesizes with a different voice.
function tickHighlight(): void {
  // audioEl.currentTime is media-time (independent of playbackRate), which
  // matches our pred_dur-derived word timings directly.
  const natSec = audioEl.currentTime;
  const totalNatSec = currentAudio ? currentAudio.length / 24000 : 1;

  let activeIdx = -1;
  for (let i = 0; i < currentWords.length; i++) {
    if (natSec >= currentWords[i].start && natSec <= currentWords[i].end) {
      activeIdx = i;
      break;
    }
    if (natSec > currentWords[i].end) activeIdx = i;
  }

  // Fresh DOM read every tick — always targets the currently-rendered nodes.
  // Update compact transcript spans (the default-visible highlight).
  compactEl.querySelectorAll<HTMLElement>(".word").forEach((span, i) => {
    span.classList.toggle("active", i === activeIdx);
    span.classList.toggle("past", i < activeIdx);
  });
  // Update detail rows + their timing-bar fills (only visible when details expanded).
  const rows = transcriptEl.querySelectorAll<HTMLElement>(".row");
  rows.forEach((row, i) => {
    row.classList.toggle("active", i === activeIdx);
    row.classList.toggle("past", i < activeIdx);
    const fill = row.querySelector<HTMLElement>(".bar-fill");
    if (!fill) return;
    if (i < activeIdx) {
      fill.style.transform = "scaleX(1)";
    } else if (i === activeIdx) {
      const w = currentWords[i];
      const dur = Math.max(0.001, w.end - w.start);
      const pct = Math.min(1, Math.max(0, (natSec - w.start) / dur));
      fill.style.transform = `scaleX(${pct.toFixed(3)})`;
    } else {
      fill.style.transform = "scaleX(0)";
    }
  });

  drawPlayhead(natSec, totalNatSec);

  if (!audioEl.paused && !audioEl.ended) {
    highlightRaf = requestAnimationFrame(tickHighlight);
  } else {
    highlightRaf = null;
  }
}

audioEl.addEventListener("play", () => {
  if (highlightRaf === null) highlightRaf = requestAnimationFrame(tickHighlight);
});
audioEl.addEventListener("ended", () => {
  transcriptEl.querySelectorAll<HTMLElement>(".row").forEach((r) => r.classList.remove("active"));
  compactEl.querySelectorAll<HTMLElement>(".word").forEach((s) => s.classList.remove("active"));
});

// Click a word in the compact transcript → seek audio playback to that word's
// start time. Also clickable in the per-word detail table.
function seekToWord(idx: number) {
  const w = currentWords[idx];
  if (!w || !currentAudio) return;
  const wasPlaying = !audioEl.paused;
  // Word timings are media-time seconds — assign directly (see loadedmetadata
  // handler comment re: why `/ playbackRate` was removed).
  audioEl.currentTime = w.start;
  tickHighlight();  // update highlight instantly even if paused
  if (!wasPlaying) audioEl.play().catch(() => {});
}
compactEl.addEventListener("click", (e) => {
  const t = e.target as HTMLElement;
  if (!t.classList.contains("word")) return;
  const idx = parseInt(t.dataset.idx ?? "-1", 10);
  if (idx >= 0) seekToWord(idx);
});
compactEl.addEventListener("keydown", (e) => {
  if (e.key !== "Enter" && e.key !== " ") return;
  const t = e.target as HTMLElement;
  if (!t.classList.contains("word")) return;
  e.preventDefault();
  const idx = parseInt(t.dataset.idx ?? "-1", 10);
  if (idx >= 0) seekToWord(idx);
});
// Same seek-on-click for Devanagari cell in the detail table rows
transcriptEl.addEventListener("click", (e) => {
  const row = (e.target as HTMLElement).closest<HTMLElement>(".row");
  if (!row) return;
  const idx = parseInt(row.dataset.idx ?? "-1", 10);
  if (idx >= 0) seekToWord(idx);
});

// ── Helpers ────────────────────────────────────────────────────────────────
function fmtSec(s: number): string { return s.toFixed(2) + "s"; }

function float32ToWav(samples: Float32Array, sr: number): Blob {
  const buf = new ArrayBuffer(44 + samples.length * 2);
  const view = new DataView(buf);
  writeStr(view, 0, "RIFF");
  view.setUint32(4, 36 + samples.length * 2, true);
  writeStr(view, 8, "WAVE");
  writeStr(view, 12, "fmt ");
  view.setUint32(16, 16, true);
  view.setUint16(20, 1, true);
  view.setUint16(22, 1, true);
  view.setUint32(24, sr, true);
  view.setUint32(28, sr * 2, true);
  view.setUint16(32, 2, true);
  view.setUint16(34, 16, true);
  writeStr(view, 36, "data");
  view.setUint32(40, samples.length * 2, true);
  let off = 44;
  for (let i = 0; i < samples.length; i++, off += 2) {
    const v = Math.max(-1, Math.min(1, samples[i]));
    view.setInt16(off, v < 0 ? v * 0x8000 : v * 0x7fff, true);
  }
  return new Blob([buf], { type: "audio/wav" });
}
function writeStr(view: DataView, off: number, s: string) {
  for (let i = 0; i < s.length; i++) view.setUint8(off + i, s.charCodeAt(i));
}

bootLight().catch(err => setStatus(`boot failed: ${err.message}`, "error"));