<div class="container mt-5">
  <div class="row">
    <!-- Input/Options Column -->
    <div class="col-md-6">
      <div class="form-group">
        <label for="sourceInput">Source Text:</label>
        <textarea class="form-control" id="sourceInput" rows="12" placeholder="Enter your text with line breaks here"></textarea>
      </div>
      <div class="form-group my-3">
        <label for="regexInput">Regular Expression:</label>
        <input
          type="text"
          class="form-control"
          id="regexInput"
          placeholder="e.g., (?<=^|\n)\s*#.*(?=\n|$)"
        />
      </div>
      <div class="form-group my-3">
        <label for="prependInput">Prepend Value:</label>
        <input
          type="text"
          class="form-control"
          id="prependInput"
          placeholder="Optional: Text to prepend"
        />
      </div>
      <div class="form-group my-3">
        <label for="appendInput">Append Value:</label>
        <input
          type="text"
          class="form-control"
          id="appendInput"
          placeholder="Optional: Text to append"
        />
      </div>
      <div class="form-group my-3">
        <label for="operationSelect">Select Operation:</label>
        <select class="form-control" id="operationSelect">
          <option value="prepend">Prepend</option>
          <option value="append">Append</option>
          <option value="replace">Replace</option>
          <option value="append-prepend">Append and Prepend</option>
        </select>
      </div>
      <div class="form-group my-3">
        <button class="btn btn-primary btn-block" id="findMatchButton">
          Find Match
        </button>
        <button class="btn btn-success btn-block" id="applyOperationButton">
          Apply Operation
        </button>
      </div>
    </div>

    <!-- Result Column -->
    <div class="col-md-6">
      <div class="text-center">
        <h2>Result:</h2>
        <button class="btn btn-secondary my-2" onclick="copyResultToClipboard()">
          Copy Result
        </button>
      </div>
      <!-- The #result container displays processed text while preserving line breaks -->
      <div id="result"></div>
    </div>
  </div>
</div>

<!-- JavaScript: Bootstrap and clipboard functionality -->
<!-- jQuery and Bootstrap JS (optional, for Bootstrap functionality) -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.min.js"></script>

<script>
  // Utility function to encode HTML entities
  function encodeHTML(str) {
    var div = document.createElement("div");
    div.appendChild(document.createTextNode(str));
    return div.innerHTML;
  }

  document.addEventListener("DOMContentLoaded", function () {
    const findMatchButton = document.getElementById("findMatchButton");
    const applyOperationButton = document.getElementById("applyOperationButton");
    const resultDiv = document.getElementById("result");
    let processedText = ""; // Store the processed text with highlighted matches

    // Find and highlight matches based on the regex pattern provided
    findMatchButton.addEventListener("click", function () {
      const sourceText = document.getElementById("sourceInput").value;
      const regexPattern = document.getElementById("regexInput").value.trim();

      try {
        const regex = new RegExp(regexPattern, "g");
        // Wrap each match in a span for further processing/operations
        processedText = sourceText.replace(regex, function(match) {
          return `<span class="matched-text">${encodeHTML(match)}</span>`;
        });
        // Use innerHTML so that line breaks are rendered (CSS handles the formatting)
        resultDiv.innerHTML = processedText;
      } catch (error) {
        resultDiv.textContent = "Invalid Regular Expression";
      }
    });

    // Apply the chosen operation (prepend, append, replace, or both) on the matched segments
    applyOperationButton.addEventListener("click", function () {
      const operation = document.getElementById("operationSelect").value;
      const prependValue = document.getElementById("prependInput").value;
      const appendValue = document.getElementById("appendInput").value;

      if (processedText) {
        // Use a regex that matches the span-wrapped matches, handling multiline content (including newlines)
        processedText = processedText.replace(/<span class="matched-text">([\s\S]*?)<\/span>/g, function(match, group) {
          switch (operation) {
            case "prepend":
              return `<span class="matched-text">${encodeHTML(prependValue + group)}</span>`;
            case "append":
              return `<span class="matched-text">${encodeHTML(group + appendValue)}</span>`;
            case "replace":
              return encodeHTML(appendValue);
            case "append-prepend":
              return `<span class="matched-text">${encodeHTML(prependValue + group + appendValue)}</span>`;
            default:
              return match;
          }
        });
        resultDiv.innerHTML = processedText;
      } else {
        resultDiv.textContent = "No matching text to apply the operation.";
      }
    });
  });

  // The copy function uses innerText to ensure that the line breaks are preserved when copying
  function copyResultToClipboard() {
    const resultDiv = document.getElementById("result");
    const tempTextArea = document.createElement("textarea");
    tempTextArea.value = resultDiv.innerText;
    document.body.appendChild(tempTextArea);
    tempTextArea.select();
    document.execCommand("copy");
    document.body.removeChild(tempTextArea);
    alert("Copied result to clipboard!");
  }
</script>