const fs = require("fs");
const path = require("path");

const htmlPath = path.join(__dirname, "..", "demo", "figma", "buttons.html");
let html = fs.readFileSync(htmlPath, "utf8");

const leftArrow = `<svg class="btn-arrow" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224 128a8 8 0 0 1-8 8H59.31l58.35 58.34a8 8 0 0 1-11.32 11.32l-72-72a8 8 0 0 1 0-11.32l72-72a8 8 0 0 1 11.32 11.32L59.31 120H216a8 8 0 0 1 8 8Z"/></svg>`;
const rightArrow = `<svg class="btn-arrow" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="m221.66 133.66-72 72a8 8 0 0 1-11.32-11.32L196.69 136H40a8 8 0 0 1 0-16h156.69l-58.35-58.34a8 8 0 0 1 11.32-11.32l72 72a8 8 0 0 1 0 11.32Z"/></svg>`;

// Replace text-only buttons (not icon-only) that contain exactly "Button"
html = html.replace(
  /<button([^>]*?)class="btn ([^"]*?)"([^>]*?)>Button<\/button>/g,
  (match, before, classes, after) => {
    if (classes.includes("btn-icon-only")) return match;
    const newClasses = classes.trim() + " btn-arrows";
    return `<button${before}class="btn ${newClasses}"${after}>${leftArrow}<span>Button</span>${rightArrow}</button>`;
  }
);

// Add CSS for btn-arrow padding overrides
const arrowCss = `
      .btn-arrows.btn-lg { padding: 14px 20px; }
      .btn-arrows.btn-md { padding: 10px 16px; }
      .btn-arrows.btn-sm { padding: 7px 12px; }
      .btn-arrows.btn-xs { padding: 5px 10px; }
      .btn-arrows.btn-xxs { padding: 2px 8px; }
      .btn-arrow { flex-shrink: 0; width: 1em; height: 1em; }
      .btn-lg .btn-arrow { width: 18px; height: 18px; }
      .btn-md .btn-arrow { width: 15px; height: 15px; }
      .btn-sm .btn-arrow { width: 13px; height: 13px; }
      .btn-xs .btn-arrow { width: 12px; height: 12px; }
      .btn-xxs .btn-arrow { width: 12px; height: 12px; }
`;
html = html.replace(
  /\.figma-row \{ display: flex; align-items: center; gap: 12px; margin-bottom: 16px; \}/,
  match => match + arrowCss
);

fs.writeFileSync(htmlPath, html);
console.log("Added arrow icons to text buttons in buttons.html");