{%- style -%}
  #shopify-section-{{ section.id }} {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: {{ section.settings.height }}px;
    z-index: 999999;
    pointer-events: none;
  }

  .scroll-progress-container {
    width: 100%;
    height: 100%;
    background: rgba(200,200,200,0.3); /* Visible container for debugging */
  }

  .scroll-progress-bar {
    height: 100%;
    width: 0%;
    background: {{ section.settings.color }};
    display: block !important;
  }

  /* Debug styles - can be removed after confirmation */
  .debug-info {
    position: fixed;
    top: 20px;
    right: 20px;
    background: white;
    padding: 10px;
    z-index: 1000000;
    border: 1px solid #000;
    display: none;
  }
{%- endstyle -%}

{% if section.settings.enable_scroll_bar %}

<div class="scroll-progress-container">
  <div class="scroll-progress-bar" id="progress-{{ section.id }}"></div>
</div>

<div class="debug-info" id="debug-{{ section.id }}"></div>


<script>
document.addEventListener('DOMContentLoaded', function() {
  // Get elements
  const progressBar = document.getElementById('progress-{{ section.id }}');
  const debugInfo = document.getElementById('debug-{{ section.id }}');
  
  // Show debug info if URL has ?debug=progress
  if (window.location.search.includes('debug=progress')) {
    debugInfo.style.display = 'block';
  }
  
  // Verify elements exist
  if (!progressBar) {
    console.error('Progress bar element not found!');
    if (debugInfo) debugInfo.textContent = 'Element not found';
    return;
  }
  
  // Initial check
  progressBar.style.width = '30%'; // Test if bar can show at all
  setTimeout(() => { progressBar.style.width = '0%' }, 1000);
  
  function updateProgress() {
    const scrollTop = window.scrollY || document.documentElement.scrollTop;
    const windowHeight = window.innerHeight;
    const docHeight = document.documentElement.scrollHeight;
    const totalScroll = docHeight - windowHeight;
    const progress = totalScroll > 0 ? (scrollTop / totalScroll) * 100 : 0;
    
    progressBar.style.width = progress + '%';
    
    // Debug output
    if (debugInfo) {
      debugInfo.innerHTML = `
        ScrollTop: ${scrollTop}<br>
        WindowH: ${windowHeight}<br>
        DocH: ${docHeight}<br>
        Progress: ${progress.toFixed(1)}%
      `;
    }
  }
  
  // Set up listeners
  window.addEventListener('scroll', updateProgress);
  window.addEventListener('resize', updateProgress);
  
  // Initial update
  updateProgress();
});
</script>
{%- endif -%}

{% schema %}
{
  "name": "Page scroll progress",
  "settings": [
    {
      "type": "checkbox",
      "id": "enable_scroll_bar",
      "label": "Enable progress bar",
      "default": false,
      "info": "Due to javascript, you must click save to view change."
    },
    {
      "type": "range",
      "id": "height",
      "min": 3,
      "max": 6,
      "step": 1,
      "unit": "px",
      "label": "Height",
      "default": 4
    },
    {
      "type": "color",
      "id": "color",
      "label": "Color",
      "default": "#000000",
      "info": "Color of progress bar"
    }
  ],
  "presets": [
    {
      "name": "Page scroll progress",
      "category": "Layout"
    }
  ]
}
{% endschema %}