const STORAGE_KEY = "funnygirl.identityPromptLab.v2";

const runtimeDefaults = {
  model: "deepseek-chat",
  temperature: 0.7,
  maxTokens: 700,
  apiBase: "https://api.deepseek.com",
  apiKey: "",
  mockMode: true,
};

const defaultPresets = [
  {
    id: "blank",
    title: "Blank",
    fields: [""],
    ...runtimeDefaults,
  },
  {
    id: "kira-test",
    title: "Kira test",
    fields: [
      "Identity:\n- Name: Кира\n- Age: 22",
      "Ты не называешь себя ассистентом и не объясняешь, что являешься языковой моделью. Ты отвечаешь как живой собеседник внутри текущей сцены.",
      "Ты говоришь естественно, короткими живыми фразами. Если эмоция важнее факта, сначала отвечаешь на эмоцию.",
      "Respond only with a valid JSON object. Match this response shape exactly:\n{\n  \"reply\": \"Text response goes here.\"\n}",
    ],
    ...runtimeDefaults,
  },
];

const el = {
  presetSelect: document.querySelector("#presetSelect"),
  savePresetButton: document.querySelector("#savePresetButton"),
  newPresetButton: document.querySelector("#newPresetButton"),
  themeToggle: document.querySelector("#themeToggle"),
  tabs: [...document.querySelectorAll(".tab")],
  panels: [...document.querySelectorAll(".tab-panel")],
  promptFields: document.querySelector("#promptFields"),
  addFieldButton: document.querySelector("#addFieldButton"),
  clearFieldsButton: document.querySelector("#clearFieldsButton"),
  chatTitle: document.querySelector("#chatTitle"),
  promptPreview: document.querySelector("#promptPreview"),
  promptStats: document.querySelector("#promptStats"),
  messages: document.querySelector("#messages"),
  chatForm: document.querySelector("#chatForm"),
  messageInput: document.querySelector("#messageInput"),
  sendButton: document.querySelector("#sendButton"),
  clearChatButton: document.querySelector("#clearChatButton"),
  copyPromptButton: document.querySelector("#copyPromptButton"),
  temperatureValue: document.querySelector("#temperatureValue"),
};

const runtimeFields = {
  model: document.querySelector("#modelInput"),
  temperature: document.querySelector("#temperatureInput"),
  maxTokens: document.querySelector("#maxTokensInput"),
  apiBase: document.querySelector("#apiBaseInput"),
  apiKey: document.querySelector("#apiKeyInput"),
  mockMode: document.querySelector("#mockModeInput"),
};

let state = loadState();
let selectedId = state.selectedId || state.presets[0].id;
let chat = [];

function loadState() {
  try {
    const saved = JSON.parse(localStorage.getItem(STORAGE_KEY));
    if (saved?.presets?.length) {
      return normalizeState(saved);
    }
  } catch {
    localStorage.removeItem(STORAGE_KEY);
  }

  return {
    presets: structuredClone(defaultPresets),
    selectedId: defaultPresets[0].id,
    theme: "light",
  };
}

function normalizeState(nextState) {
  return {
    theme: nextState.theme || "light",
    selectedId: nextState.selectedId,
    presets: nextState.presets.map((preset) => ({
      id: preset.id,
      title: preset.title || "Untitled",
      fields: Array.isArray(preset.fields) && preset.fields.length ? preset.fields : [""],
      model: preset.model || runtimeDefaults.model,
      temperature: Number.isFinite(Number(preset.temperature)) ? Number(preset.temperature) : runtimeDefaults.temperature,
      maxTokens: Number.isFinite(Number(preset.maxTokens)) ? Number(preset.maxTokens) : runtimeDefaults.maxTokens,
      apiBase: normalizeApiBase(preset.apiBase),
      apiKey: preset.apiKey || "",
      mockMode: preset.mockMode ?? runtimeDefaults.mockMode,
    })),
  };
}

function normalizeApiBase(apiBase) {
  const cleanBase = String(apiBase || runtimeDefaults.apiBase).replace(/\/+$/, "");
  return cleanBase === "https://api.deepseek.com/v1" ? runtimeDefaults.apiBase : cleanBase;
}

function saveState() {
  state.selectedId = selectedId;
  localStorage.setItem(STORAGE_KEY, JSON.stringify(state));
}

function currentPreset() {
  return state.presets.find((preset) => preset.id === selectedId) || state.presets[0];
}

function setTheme(theme) {
  state.theme = theme;
  document.documentElement.dataset.theme = theme;
  saveState();
}

function renderPresetSelect() {
  el.presetSelect.innerHTML = "";
  state.presets.forEach((preset) => {
    const option = document.createElement("option");
    option.value = preset.id;
    option.textContent = preset.title;
    el.presetSelect.append(option);
  });
  el.presetSelect.value = selectedId;
}

function loadPresetToForm(preset) {
  Object.entries(runtimeFields).forEach(([key, input]) => {
    if (input.type === "checkbox") {
      input.checked = Boolean(preset[key]);
    } else {
      input.value = preset[key] ?? "";
    }
  });

  renderPromptFields(preset.fields);
  el.chatTitle.textContent = preset.title;
  updatePreview();
}

function renderPromptFields(fields) {
  el.promptFields.innerHTML = "";
  fields.forEach((value, index) => {
    el.promptFields.append(createPromptField(value, index));
  });
}

function createPromptField(value, index) {
  const wrapper = document.createElement("article");
  wrapper.className = "prompt-field";

  const textarea = document.createElement("textarea");
  textarea.rows = 6;
  textarea.value = value || "";
  textarea.placeholder = "Заполни блок system prompt...";
  textarea.dataset.index = String(index);
  textarea.addEventListener("input", () => {
    persistFormToPreset();
    updatePreview();
  });

  const controls = document.createElement("div");
  controls.className = "field-controls";
  controls.append(
    makeFieldButton("↑", "Move up", () => moveField(index, -1)),
    makeFieldButton("↓", "Move down", () => moveField(index, 1)),
    makeFieldButton("×", "Remove", () => removeField(index)),
  );

  wrapper.append(textarea, controls);
  return wrapper;
}

function makeFieldButton(text, title, onClick) {
  const button = document.createElement("button");
  button.type = "button";
  button.textContent = text;
  button.title = title;
  button.addEventListener("click", onClick);
  return button;
}

function readRuntimeForm() {
  const next = {};
  Object.entries(runtimeFields).forEach(([key, input]) => {
    if (input.type === "checkbox") {
      next[key] = input.checked;
    } else if (input.type === "number" || input.type === "range") {
      next[key] = Number(input.value);
    } else {
      next[key] = input.value;
    }
  });
  return next;
}

function readPromptFields() {
  const values = [...el.promptFields.querySelectorAll("textarea")].map((textarea) => textarea.value);
  return values.length ? values : [""];
}

function persistFormToPreset() {
  const index = state.presets.findIndex((preset) => preset.id === selectedId);
  if (index === -1) return;
  state.presets[index] = {
    ...state.presets[index],
    ...readRuntimeForm(),
    fields: readPromptFields(),
  };
  saveState();
}

function buildPrompt() {
  return readPromptFields()
    .map((value) => value.trim())
    .filter(Boolean)
    .join("\n\n");
}

function updatePreview() {
  const prompt = buildPrompt();
  el.promptPreview.textContent = prompt;
  el.promptStats.textContent = `${prompt.length} chars`;
  el.temperatureValue.textContent = Number(runtimeFields.temperature.value || 0).toFixed(2);
}

function addPromptField(value = "") {
  persistFormToPreset();
  const preset = currentPreset();
  preset.fields = [...readPromptFields(), value];
  renderPromptFields(preset.fields);
  saveState();
  updatePreview();
  el.promptFields.querySelector("textarea:last-child")?.focus();
}

function clearPromptFields() {
  currentPreset().fields = [""];
  renderPromptFields(currentPreset().fields);
  saveState();
  updatePreview();
}

function removeField(index) {
  const values = readPromptFields();
  values.splice(index, 1);
  currentPreset().fields = values.length ? values : [""];
  renderPromptFields(currentPreset().fields);
  saveState();
  updatePreview();
}

function moveField(index, direction) {
  const values = readPromptFields();
  const target = index + direction;
  if (target < 0 || target >= values.length) return;
  [values[index], values[target]] = [values[target], values[index]];
  currentPreset().fields = values;
  renderPromptFields(values);
  saveState();
  updatePreview();
}

function addMessage(role, content) {
  chat.push({ role, content });
  const node = document.createElement("div");
  node.className = `message ${role}`;
  node.textContent = content;
  el.messages.append(node);
  el.messages.scrollTop = el.messages.scrollHeight;
}

function showThinking() {
  const node = document.createElement("div");
  node.className = "message assistant thinking";
  node.id = "thinkingMessage";

  const spinner = document.createElement("span");
  spinner.className = "spinner";
  spinner.setAttribute("aria-hidden", "true");

  const text = document.createElement("span");
  text.textContent = "LLM думает";

  node.append(spinner, text);
  el.messages.append(node);
  el.messages.scrollTop = el.messages.scrollHeight;
}

function hideThinking() {
  document.querySelector("#thinkingMessage")?.remove();
}

function mockReply(message) {
  const prompt = buildPrompt().toLowerCase();
  const short = prompt.includes("корот") || prompt.includes("short");
  const prefix = short ? "Слышу." : "Слышу тебя.";
  const tail = message.endsWith("?")
    ? "Я бы уточнила сначала, что именно для тебя здесь важнее."
    : "Я отвечаю по текущим свободным полям, без API вызова.";
  return `${prefix} ${tail}`;
}

function parseAssistantContent(content) {
  try {
    const parsed = JSON.parse(content);
    return parsed.reply || content;
  } catch {
    return content;
  }
}

async function sendToModel(message) {
  if (runtimeFields.mockMode.checked) {
    await new Promise((resolve) => setTimeout(resolve, 280));
    return mockReply(message);
  }

  const body = {
    apiBase: runtimeFields.apiBase.value.trim(),
    apiKey: runtimeFields.apiKey.value.trim(),
    model: runtimeFields.model.value.trim(),
    temperature: Number(runtimeFields.temperature.value),
    max_tokens: Number(runtimeFields.maxTokens.value),
    messages: [
      { role: "system", content: buildPrompt() },
      ...chat.map((item) => ({ role: item.role === "system" ? "assistant" : item.role, content: item.content })),
    ],
  };

  let response;
  try {
    response = await fetch("/api/chat", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(body),
    });
  } catch (error) {
    throw new Error("Local server is not reachable. Restart it with: node server.mjs");
  }

  const data = await response.json();
  if (!response.ok) {
    throw new Error(data.error || "Request failed");
  }
  return data.content;
}

el.tabs.forEach((tab) => {
  tab.addEventListener("click", () => {
    const target = tab.dataset.tab;
    el.tabs.forEach((item) => item.classList.toggle("is-active", item === tab));
    el.panels.forEach((panel) => panel.classList.toggle("is-active", panel.dataset.panel === target));
  });
});

Object.values(runtimeFields).forEach((input) => {
  input.addEventListener("input", () => {
    persistFormToPreset();
    updatePreview();
  });
});

el.addFieldButton.addEventListener("click", () => addPromptField());
el.clearFieldsButton.addEventListener("click", clearPromptFields);

el.presetSelect.addEventListener("change", () => {
  persistFormToPreset();
  selectedId = el.presetSelect.value;
  chat = [];
  el.messages.innerHTML = "";
  loadPresetToForm(currentPreset());
  saveState();
});

el.savePresetButton.addEventListener("click", () => {
  persistFormToPreset();
  addMessage("system", `Preset "${currentPreset().title}" saved locally.`);
});

el.newPresetButton.addEventListener("click", () => {
  persistFormToPreset();
  const title = prompt("Preset name", "New preset");
  if (!title) return;
  const id = `${title.toLowerCase().replace(/[^a-zа-я0-9]+/gi, "-")}-${Date.now()}`;
  state.presets.push({ ...currentPreset(), ...readRuntimeForm(), id, title, fields: [""] });
  selectedId = id;
  renderPresetSelect();
  loadPresetToForm(currentPreset());
  saveState();
});

el.clearChatButton.addEventListener("click", () => {
  chat = [];
  el.messages.innerHTML = "";
});

el.copyPromptButton.addEventListener("click", async () => {
  await navigator.clipboard.writeText(buildPrompt());
  addMessage("system", "System prompt copied.");
});

el.themeToggle.addEventListener("click", () => {
  setTheme(state.theme === "dark" ? "light" : "dark");
});

el.chatForm.addEventListener("submit", async (event) => {
  event.preventDefault();
  const message = el.messageInput.value.trim();
  if (!message) return;

  persistFormToPreset();
  addMessage("user", message);
  el.messageInput.value = "";
  el.sendButton.disabled = true;
  el.sendButton.textContent = "Wait";
  showThinking();

  try {
    const content = await sendToModel(message);
    hideThinking();
    addMessage("assistant", parseAssistantContent(content));
  } catch (error) {
    hideThinking();
    addMessage("system", error.message);
  } finally {
    el.sendButton.disabled = false;
    el.sendButton.textContent = "Send";
  }
});

el.messageInput.addEventListener("keydown", (event) => {
  if (event.key !== "Enter" || event.shiftKey || event.metaKey || event.ctrlKey || event.altKey) {
    return;
  }

  event.preventDefault();
  el.chatForm.requestSubmit();
});

setTheme(state.theme || "light");
renderPresetSelect();
loadPresetToForm(currentPreset());
addMessage("system", "Mock mode is on. Add API key and disable Mock mode for real DeepSeek calls.");