const { entrypoints } = require("uxp");
const photoshop = require("photoshop");
const { app, core } = photoshop;

function setStatus(message) {
  const node = document.getElementById("status");
  if (node) node.textContent = message;
}

function getActiveDocument() {
  if (!app.documents || app.documents.length === 0) return null;
  return app.activeDocument;
}

function refreshDocumentStatus() {
  const node = document.getElementById("documentStatus");
  if (!node) return;

  const doc = getActiveDocument();
  if (!doc) {
    node.textContent = "No Photoshop document is open.";
    return;
  }

  node.textContent = `${doc.title || doc.name || "Untitled"} — ${doc.width} × ${doc.height}`;
}

function showLayerNames() {
  const list = document.getElementById("layers");
  const doc = getActiveDocument();

  if (!doc) {
    list.textContent = "Open a Photoshop document first.";
    setStatus("No active document.");
    refreshDocumentStatus();
    return;
  }

  const layers = Array.from(doc.layers || []);

  if (layers.length === 0) {
    list.textContent = "This document has no top-level layers.";
    setStatus("Layer list refreshed.");
    return;
  }

  const sorted = layers
    .map(layer => ({ name: layer.name, kind: layer.kind }))
    .sort((a, b) => a.name.localeCompare(b.name));

  list.innerHTML = `<ul>${sorted
    .map(layer => `<li>${escapeHtml(layer.name)}</li>`)
    .join("")}</ul>`;

  setStatus(`${sorted.length} top-level layer${sorted.length === 1 ? "" : "s"} found.`);
  refreshDocumentStatus();
}

function escapeHtml(value) {
  return String(value)
    .replace(/&/g, "&amp;")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;")
    .replace(/\"/g, "&quot;")
    .replace(/'/g, "&#039;");
}

async function inspectDocument() {
  const doc = getActiveDocument();

  if (!doc) {
    setStatus("Open a Photoshop document first.");
    refreshDocumentStatus();
    return;
  }

  showLayerNames();
  setStatus(`Inspected ${doc.title || doc.name || "active document"}.`);
}

async function createFrameGroup() {
  const doc = getActiveDocument();

  if (!doc) {
    setStatus("Open a Photoshop document first.");
    return;
  }

  try {
    await core.executeAsModal(async () => {
      const group = await doc.createLayerGroup({ name: "FRAME_001" });
      if (group) {
        setStatus("Created FRAME_001 group.");
      }
    }, { commandName: "Create Animation Frame Group" });

    showLayerNames();
  } catch (error) {
    console.error(error);
    setStatus(`Could not create frame group: ${error.message}`);
  }
}

function wirePanel() {
  const btnPopulate = document.getElementById("btnPopulate");
  const btnInspect = document.getElementById("btnInspect");
  const btnFrameGroup = document.getElementById("btnFrameGroup");

  if (btnPopulate) btnPopulate.addEventListener("click", showLayerNames);
  if (btnInspect) btnInspect.addEventListener("click", inspectDocument);
  if (btnFrameGroup) btnFrameGroup.addEventListener("click", createFrameGroup);

  refreshDocumentStatus();
  showLayerNames();
}

entrypoints.setup({
  panels: {
    designStudio: {
      show() {
        wirePanel();
      }
    }
  }
});