import { logTo, setText } from "../shared.js";

const hasPromptApi = "LanguageModel" in window;

document.querySelector("#check").addEventListener("click", checkAvailability);
document.querySelector("#run").addEventListener("click", runPrompt);

await checkAvailability();

async function checkAvailability() {
  setText("#support-status", hasPromptApi ? "支持" : "未暴露");
  setText("#mode", hasPromptApi ? "Native" : "Mock");

  if (!hasPromptApi) {
    setText("#availability", "unavailable");
    logTo("#log", "prompt-api.detect", {
      supported: false,
      fallback: "Use local mock response for the presentation.",
    });
    return;
  }

  try {
    const availability = await LanguageModel.availability();
    setText("#availability", availability);
    logTo("#log", "prompt-api.availability", { availability });
  } catch (error) {
    setText("#availability", "error");
    logTo("#log", "prompt-api.error", { message: error.message });
  }
}

async function runPrompt() {
  const source = document.querySelector("#prompt-input").value.trim();
  const tone = document.querySelector("#tone").value;
  const prompt = `请用${tone}风格，用三句话解释下面内容：\n\n${source}`;

  if (!hasPromptApi) {
    const result = createMockSummary(source, tone);
    logTo("#log", "prompt-api.mock-result", { prompt, result });
    return;
  }

  try {
    setText("#mode", "Native running");
    const session = await LanguageModel.create({
      monitor(monitor) {
        monitor.addEventListener("downloadprogress", (event) => {
          const percent = Math.round(event.loaded * 100);
          setText("#availability", `downloading ${percent}%`);
        });
      },
    });
    const result = await session.prompt(prompt);
    setText("#mode", "Native complete");
    logTo("#log", "prompt-api.native-result", { prompt, result });
  } catch (error) {
    setText("#mode", "Native error");
    logTo("#log", "prompt-api.native-error", {
      prompt,
      message: error.message,
      fallback: createMockSummary(source, tone),
    });
  }
}

function createMockSummary(source, tone) {
  const first = source.split(/[。.!?]/).find(Boolean)?.trim() || source;
  return [
    `[${tone}] Chrome 的新能力可以理解为三条线同时推进。`,
    `第一条是用户体验升级，第二条是开发者工具升级，第三条是让网页能被 AI Agent 结构化调用。`,
    `这是一段 mock 输出，用来在当前浏览器没有 Prompt API 时保持演示可运行；输入摘要：${first}。`,
  ].join("");
}