<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sketch Diff Viewer Demo</title>
  <link rel="stylesheet" href="../../../node_modules/diff2html/bundles/css/diff2html.min.css">
  <script type="module" src="/dist/web-components/sketch-diff-view.js"></script>
  <style>
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      max-width: 1200px;
      margin: 0 auto;
      padding: 2rem;
    }
    
    h1 {
      color: #333;
      margin-bottom: 2rem;
    }
    
    .control-panel {
      margin-bottom: 2rem;
      padding: 1rem;
      background-color: #f0f0f0;
      border-radius: 4px;
    }
    
    input {
      padding: 0.5rem;
      border-radius: 4px;
      border: 1px solid #ccc;
      width: 300px;
    }
    
    button {
      padding: 0.5rem 1rem;
      background-color: #2196f3;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      margin-left: 1rem;
    }
    
    button:hover {
      background-color: #0d8bf2;
    }
  </style>

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const diffViewer = document.getElementById('diffViewer');
    const commitHashInput = document.getElementById('commitHash');
    const viewDiffButton = document.getElementById('viewDiff');
    let commit = false;
    viewDiffButton.addEventListener('click', () => {
      let diffContent = `diff --git a/sample.txt b/sample.txt
index 1111111..2222222 100644
--- a/sample.txt
+++ b/sample.txt
@@ -1,5 +1,5 @@
 This is a sample file
-This line will be removed
+This line is added as a replacement
 This line stays the same
-Another line to remove
+A completely new line
 The last line is unchanged`;
       if (commit) {
            // For demo purposes, generate fake diff based on commit hash
            diffContent = `diff --git a/file-${commit.substring(0,5)}.txt b/file-${commit.substring(0,5)}.txt
index 3333333..4444444 100644
--- a/file-${commit.substring(0,5)}.txt
+++ b/file-${commit.substring(0,5)}.txt
@@ -1,4 +1,6 @@
 File with commit: ${commit}
+This line was added in commit ${commit}
 This line exists in both versions
-This line was removed in commit ${commit}
+This line replaced the removed line
+Another new line added in this commit
 Last line of the file`;
          }
      diffViewer.diffText = diffContent;
      diffViewer.commitHash = commitHashInput.value.trim();
    });
  });
</script>

</head>
<body>
  <h1>Sketch Diff Viewer Demo</h1>
  
  <div class="control-panel">
    <label for="commitHash">Commit Hash (leave empty for unstaged changes):</label>
    <input type="text" id="commitHash" placeholder="Enter commit hash">
    <button id="viewDiff">View Diff</button>
  </div>
  
  <sketch-diff-view id="diffViewer"></sketch-diff-view>
  
</body>
</html>