popup.js

const form = document.getElementById("reply-form");
const threadInput = document.getElementById("thread");
const roleSelect = document.getElementById("role");
const toneSelect = document.getElementById("tone");
const modeSelect = document.getElementById("mode");
const newMessageInput = document.getElementById("new-message");
const newMessageLabel = document.getElementById("new-message-label");
const repliesContainer = document.getElementById("replies-container");
const statusDiv = document.getElementById("status");
const generateBtn = document.getElementById("generate-btn");

// Show/hide new message textarea based on mode
modeSelect.addEventListener("change", () => {
  if (modeSelect.value === "analyze" || modeSelect.value === "both") {
    newMessageInput.classList.remove("hidden");
    newMessageLabel.classList.remove("hidden");
    newMessageInput.required = true;
  } else {
    newMessageInput.classList.add("hidden");
    newMessageLabel.classList.add("hidden");
    newMessageInput.required = false;
    newMessageInput.value = "";
  }
});

// Copy button event delegation (added once)
repliesContainer.addEventListener("click", async (e) => {
  if (e.target.classList.contains("copy-btn")) {
    const btn = e.target;
    const replyCard = btn.closest(".reply-card");
    const replyText = replyCard.innerText.replace("Copy 📋", "").trim();

    try {
      await navigator.clipboard.writeText(replyText);
      btn.textContent = "Copied! 📋";
      setTimeout(() => {
        btn.textContent = "Copy 📋";
      }, 2000);
    } catch {
      btn.textContent = "Failed to copy";
      setTimeout(() => {
        btn.textContent = "Copy 📋";
      }, 2000);
    }
  }
});

function autoResizeTextarea(textarea) {
  textarea.style.height = "auto"; // reset height
  textarea.style.height = textarea.scrollHeight + "px"; // set height based on scrollHeight
}


// For #thread textarea
threadInput.addEventListener("input", () => autoResizeTextarea(threadInput));
// For #new-message textarea
newMessageInput.addEventListener("input", () => autoResizeTextarea(newMessageInput))

autoResizeTextarea(threadInput);
autoResizeTextarea(newMessageInput);

// Form submission
form.addEventListener("submit", async (e) => {
  e.preventDefault();
  const geminiApiKey = await new Promise((resolve) => {
    chrome.storage.local.get("geminiApiKey", (result) => {
      resolve(result.geminiApiKey || "");
    });
  });

  repliesContainer.innerHTML = "";
  statusDiv.textContent = "Generating replies... ⏳";
  generateBtn.disabled = true;

  const payload = {
    thread: threadInput.value.trim(),
    role: roleSelect.value,
    tone: toneSelect.value,
    mode: modeSelect.value,
    api_key: geminiApiKey
  };

  if (modeSelect.value === "analyze" || modeSelect.value === "both") {
    payload.new_message = newMessageInput.value.trim();
  }

  if (!geminiApiKey) {
    statusDiv.textContent = "❌ Gemini API key is missing. Please set it in settings.";
    return;
  }
  try {
    const response = await fetch("https://threadwise-ai-backend.onrender.com/generate-replies", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(payload),
    });

    if (!response.ok) {
      statusDiv.textContent = `❌ Failed to generate replies. Server responded with status ${response.status}.`;
      generateBtn.disabled = false;
      return;
    }

    const data = await response.json();

    let replies = [];

    try {
      if (typeof data.reply === "string") {
        replies = JSON.parse(data.reply);
      } else {
        replies = data.reply;
      }
    } catch {
      replies = [data.reply];
    }

    if (!replies.length) {
      statusDiv.textContent = "No replies generated.";
      generateBtn.disabled = false;
      return;
    }

    statusDiv.textContent = `✅ Generated ${replies.length} reply${replies.length > 1 ? "ies" : "y"}:`;

    repliesContainer.innerHTML = replies
      .map(
        (r) => `
      <div class="reply-card" tabindex="0" role="region" aria-label="Generated reply">
        ${r.replace(/\n/g, "<br>")}
        <button class="copy-btn" aria-label="Copy reply to clipboard">Copy 📋</button>
      </div>`
      )
      .join("");

  } catch (error) {
  if (error instanceof TypeError && error.message.includes("Failed to fetch")) {
    statusDiv.textContent = "❌ Invalid API Key || Turn on the Internet";
  } else {
    statusDiv.textContent = `❌ Unexpected error: ${error.message}`;
  }
}


  generateBtn.disabled = false;
});


  const mainTabBtn = document.getElementById("generate-tab-btn");
  const settingsTabBtn = document.getElementById("settings-tab-btn");
  const mainTab = document.getElementById("generate-tab");
  const settingsTab = document.getElementById("settings-tab");

  if (mainTabBtn && settingsTabBtn && mainTab && settingsTab) {
    function switchTab(to) {
      if (to === "main") {
        mainTab.classList.remove("hidden");
        settingsTab.classList.add("hidden");
        mainTabBtn.classList.add("active");
        settingsTabBtn.classList.remove("active");
      } else {
        mainTab.classList.add("hidden");
        settingsTab.classList.remove("hidden");
        settingsTabBtn.classList.add("active");
        mainTabBtn.classList.remove("active");
      }
    }

    mainTabBtn.addEventListener("click", () => switchTab("main"));
    settingsTabBtn.addEventListener("click", () => switchTab("settings"));
  }


const saveBtn = document.getElementById("save-api-key");
const apiInput = document.getElementById("gemini-api-key");
const apiStatus = document.getElementById("api-status");

saveBtn.addEventListener("click", () => {
  const key = apiInput.value.trim();

  if (!key || key.length < 15) {
    apiStatus.textContent = "❌ Please enter a valid API key (min 15 characters) .";
    apiStatus.classList.add("error");
    return;
  }

  chrome.storage.local.set({ geminiApiKey: key }, () => {
    apiStatus.textContent = "✅ API key saved!";
    apiStatus.classList.remove("error");
  });
});

chrome.storage.local.get("geminiApiKey", (result) => {
    if (result.geminiApiKey) {
      apiInput.value = result.geminiApiKey;
    }
  });