import { storyPrompt } from "./tokenizer.js";

const form = document.querySelector("#story-form");
const write = document.querySelector("#write");
const stop = document.querySelector("#stop");
const story = document.querySelector("#story");
const copy = document.querySelector("#copy");
const status = document.querySelector("#status");
const progress = document.querySelector("#progress");
const meta = document.querySelector("#story-meta");
let worker;
let loaded = false;
let running = false;

function message(text, error = false) {
  status.textContent = text;
  status.classList.toggle("error", error);
}

function finish() {
  running = false;
  write.disabled = false;
  write.textContent = loaded ? "Write a story" : "Load model & write";
  stop.hidden = true;
  progress.hidden = true;
  form.querySelectorAll("input, textarea, select, [data-example]").forEach(input => input.disabled = false);
  story.removeAttribute("aria-busy");
}

function startWorker() {
  worker = new Worker(new URL("./worker.js", import.meta.url), { type: "module" });
  worker.onmessage = ({ data }) => {
    if (data.type === "status") message(data.text);
    if (data.type === "progress") {
      progress.hidden = false;
      progress.value = data.value;
      message(`Loading weights… ${Math.round(data.value * 100)}%`);
    }
    if (data.type === "loaded") {
      loaded = true;
      progress.hidden = true;
      document.querySelector("#download-note").textContent = "Model loaded. Stories are generated on your device; prompts are never sent to a server.";
    }
    if (data.type === "text") {
      story.textContent = data.text;
      copy.disabled = !data.text;
      meta.textContent = `${data.tokens} tokens written`;
    }
    if (data.type === "done") {
      meta.textContent = `${data.reason} · ${data.tokens} tokens${data.seconds ? ` · ${data.seconds.toFixed(1)}s` : ""}`;
      message(data.reason === "Stopped" ? "Stopped. You can write another story." : "Ready for another idea.");
      finish();
    }
    if (data.type === "error") {
      meta.textContent = "Could not write this story";
      message(data.text, true);
      finish();
    }
  };
  worker.onerror = () => {
    worker.terminate();
    worker = undefined;
    loaded = false;
    meta.textContent = "Model unavailable";
    message("The browser model could not start. Reload and try again, or use the local Python demo linked below.", true);
    finish();
  };
}

form.addEventListener("submit", event => {
  event.preventDefault();
  if (running) return;
  const fields = Object.fromEntries(new FormData(form));
  try { storyPrompt(fields); }
  catch (error) { message(error.message, true); return; }
  if (!worker) startWorker();
  running = true;
  write.disabled = true;
  write.textContent = loaded ? "Writing…" : "Loading…";
  stop.hidden = false;
  stop.disabled = false;
  stop.textContent = "Stop";
  copy.disabled = true;
  story.textContent = "";
  story.setAttribute("aria-busy", "true");
  meta.textContent = "Getting ready to write";
  form.querySelectorAll("input, textarea, select, [data-example]").forEach(input => input.disabled = true);
  message(loaded ? "Writing your story…" : "Loading the model for the first story…");
  worker.postMessage({ type: "generate", fields,
    temperature: Number(document.querySelector("#temperature").value),
    maxTokens: Number(document.querySelector("#length").value) });
});

stop.addEventListener("click", () => {
  if (!loaded) {
    worker.terminate();
    worker = undefined;
    message("Loading stopped. Click Load model & write to try again.");
    meta.textContent = "Loading stopped";
    finish();
  } else {
    stop.disabled = true;
    stop.textContent = "Stopping…";
    worker.postMessage({ type: "stop" });
  }
});

document.querySelectorAll("[data-example]").forEach(button => {
  button.addEventListener("click", () => {
    document.querySelector("#summary").value = button.dataset.example;
    document.querySelector("#summary").focus();
  });
});
document.querySelector("#temperature").addEventListener("input", event => {
  document.querySelector("#temperature-value").value = Number(event.target.value).toFixed(1);
});
copy.addEventListener("click", async () => {
  try {
    await navigator.clipboard.writeText(story.textContent);
    message("Story copied.");
  } catch { message("Select the story text and copy it with your keyboard.", true); }
});