content.js

(function () {
  "use strict";

  const DOMAIN = window.location.hostname;
  const STORAGE_KEY = "qn_notes";

  // If notepad already exists, just toggle it
  const existing = document.getElementById("quick-notes-container");
  if (existing) {
    const isVisible = existing.style.display !== "none";
    existing.style.display = isVisible ? "none" : "flex";
    return;
  }

  // ── SVG Icons ──────────────────────────────────────────────
  const ICON_NOTEPAD = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20"/><line x1="8" y1="7" x2="16" y2="7"/><line x1="8" y1="11" x2="14" y2="11"/></svg>`;
  const ICON_MINIMIZE = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="5" y1="12" x2="19" y2="12"/></svg>`;
  const ICON_MAXIMIZE = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/></svg>`;
  const ICON_CLOSE = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>`;

  // ── Storage helpers ────────────────────────────────────────
  function loadNote() {
    return new Promise((resolve) => {
      chrome.storage.local.get(STORAGE_KEY, (data) => {
        const notes = data[STORAGE_KEY] || {};
        resolve(notes[DOMAIN] || "");
      });
    });
  }

  function saveNote(text) {
    return new Promise((resolve) => {
      chrome.storage.local.get(STORAGE_KEY, (data) => {
        const notes = data[STORAGE_KEY] || {};
        notes[DOMAIN] = text;
        chrome.storage.local.set({ [STORAGE_KEY]: notes }, resolve);
      });
    });
  }

  function deleteNote() {
    return new Promise((resolve) => {
      chrome.storage.local.get(STORAGE_KEY, (data) => {
        const notes = data[STORAGE_KEY] || {};
        delete notes[DOMAIN];
        chrome.storage.local.set({ [STORAGE_KEY]: notes }, resolve);
      });
    });
  }

  function getNoteCount() {
    return new Promise((resolve) => {
      chrome.storage.local.get(STORAGE_KEY, (data) => {
        const notes = data[STORAGE_KEY] || {};
        resolve(Object.keys(notes).length);
      });
    });
  }

  // ── Build DOM ──────────────────────────────────────────────
  function createNotepad() {
    const container = document.createElement("div");
    container.className = "qn-container";
    container.id = "quick-notes-container";
    container.innerHTML = `
      <div class="qn-header">
        <span class="qn-title">${ICON_NOTEPAD} Quick Notes</span>
        <div class="qn-header-actions">
          <button class="qn-btn qn-minimize-btn" title="Minimize">${ICON_MINIMIZE}</button>
          <button class="qn-btn qn-close-btn" title="Hide">${ICON_CLOSE}</button>
        </div>
      </div>
      <div class="qn-body">
        <textarea class="qn-textarea" placeholder="Write a note for this site..."></textarea>
        <div class="qn-footer">
          <div class="qn-footer-left">
            <span class="qn-status">Ready</span>
            <span class="qn-note-count"></span>
          </div>
          <div class="qn-footer-right">
            <button class="qn-clear-btn">Clear</button>
          </div>
        </div>
      </div>
    `;
    return container;
  }

  // ── Init ───────────────────────────────────────────────────
  async function init() {
    const container = createNotepad();
    document.body.appendChild(container);

    const textarea = container.querySelector(".qn-textarea");
    const minimizeBtn = container.querySelector(".qn-minimize-btn");
    const closeBtn = container.querySelector(".qn-close-btn");
    const clearBtn = container.querySelector(".qn-clear-btn");
    const status = container.querySelector(".qn-status");
    const noteCount = container.querySelector(".qn-note-count");

    let saveTimeout = null;

    // Load saved note
    const savedText = await loadNote();
    textarea.value = savedText;
    updateStatus("Loaded", true);
    updateNoteCount();

    // Auto-save on input
    textarea.addEventListener("input", () => {
      updateStatus("Saving...");
      clearTimeout(saveTimeout);
      saveTimeout = setTimeout(async () => {
        await saveNote(textarea.value);
        updateStatus("Saved", true);
        updateNoteCount();
      }, 400);
    });

    // Minimize
    minimizeBtn.addEventListener("click", () => {
      const isMinimized = container.classList.toggle("qn-minimized");
      minimizeBtn.innerHTML = isMinimized ? ICON_MAXIMIZE : ICON_MINIMIZE;
      minimizeBtn.title = isMinimized ? "Restore" : "Minimize";
    });

    // Hide (save first)
    closeBtn.addEventListener("click", async () => {
      if (textarea.value.trim()) {
        await saveNote(textarea.value);
      }
      container.style.display = "none";
    });

    // Clear note
    clearBtn.addEventListener("click", async () => {
      if (!textarea.value.trim()) return;
      textarea.value = "";
      await deleteNote();
      updateStatus("Cleared", true);
      updateNoteCount();
    });

    // ── Drag ───────────────────────────────────────────────
    const header = container.querySelector(".qn-header");
    let isDragging = false;
    let dragX, dragY;

    header.addEventListener("mousedown", (e) => {
      if (e.target.closest(".qn-btn")) return;
      isDragging = true;
      // On first drag, convert from centered to explicit positioning
      const rect = container.getBoundingClientRect();
      container.style.transform = "none";
      container.style.left = rect.left + "px";
      container.style.top = rect.top + "px";
      dragX = e.clientX - rect.left;
      dragY = e.clientY - rect.top;
      container.style.transition = "none";
      document.addEventListener("mousemove", onDrag);
      document.addEventListener("mouseup", onDragEnd);
    });

    function onDrag(e) {
      if (!isDragging) return;
      const x = e.clientX - dragX;
      const y = e.clientY - dragY;
      const maxX = window.innerWidth - container.offsetWidth;
      const maxY = window.innerHeight - container.offsetHeight;
      container.style.left = Math.max(0, Math.min(x, maxX)) + "px";
      container.style.top = Math.max(0, Math.min(y, maxY)) + "px";
    }

    function onDragEnd() {
      isDragging = false;
      container.style.transition = "box-shadow 0.2s ease";
      document.removeEventListener("mousemove", onDrag);
      document.removeEventListener("mouseup", onDragEnd);
    }

    // ── Helpers ────────────────────────────────────────────
    function updateStatus(text, isSaved) {
      status.textContent = text;
      status.className = "qn-status" + (isSaved ? " qn-saved" : "");
    }

    async function updateNoteCount() {
      const count = await getNoteCount();
      noteCount.textContent = count > 1 ? `${count} sites` : "";
    }

    // ── Listen for messages from popup ─────────────────────
    chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
      if (msg.action === "toggleNotepad") {
        const isVisible = container.style.display !== "none";
        container.style.display = isVisible ? "none" : "flex";
        if (!isVisible) textarea.focus();
        sendResponse({ success: true });
      } else if (msg.action === "showNotepad") {
        container.style.display = "flex";
        textarea.focus();
        sendResponse({ success: true });
      } else if (msg.action === "hideNotepad") {
        container.style.display = "none";
        sendResponse({ success: true });
      }
      return true;
    });

    // Show notepad
    container.style.display = "flex";
  }

  // Wait for DOM ready
  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", init);
  } else {
    init();
  }
})();