// ==UserScript==
// @name         Auto Scroll
// @namespace    https://carodevsystem.com/
// @version      2.0
// @description  Auto-scroll any page (control speed & direction)
// @author       Carodev System
// @match        *://*/*
// @grant        none
// ==/UserScript==

(function () {
  'use strict';

  // --- Create UI container ---
  const panel = document.createElement('div');
  panel.id = 'autoScrollPanel';
  panel.innerHTML = `
    <div class="header">🌀 Auto Scroll</div>
    <div class="content">
      <button id="toggleScroll" class="btn start">▶ Start</button>
      <div class="slider-box">
        <label>Speed</label>
        <input type="range" id="scrollSpeed" min="10" max="200" value="50">
        <span id="speedValue">50</span>
      </div>
      <div class="select-box">
        <label>Direction</label>
        <select id="scrollDirection">
          <option value="down">⬇ Down</option>
          <option value="up">⬆ Up</option>
        </select>
      </div>
    </div>
  `;

  document.body.appendChild(panel);

  // --- Add Styles ---
  const style = document.createElement('style');
  style.textContent = `
    #autoScrollPanel {
      position: fixed;
      top: 30px;
      right: 30px;
      width: 190px;
      background: linear-gradient(135deg, rgba(40,40,40,0.8), rgba(0,0,0,0.7));
      backdrop-filter: blur(6px);
      border: 1px solid rgba(255,255,255,0.2);
      color: #fff;
      border-radius: 15px;
      box-shadow: 0 4px 20px rgba(0,0,0,0.4);
      font-family: 'Segoe UI', sans-serif;
      font-size: 14px;
      z-index: 999999;
      padding: 10px;
      cursor: move;
      user-select: none;
    }
    #autoScrollPanel .header {
      text-align: center;
      font-weight: bold;
      margin-bottom: 8px;
      color: #00ffd5;
      text-shadow: 0 0 6px #00ffd5;
    }
    .btn {
      width: 100%;
      padding: 6px 0;
      border: none;
      border-radius: 8px;
      font-weight: bold;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .btn.start {
      background: linear-gradient(90deg, #00ffa2, #00b3ff);
      color: #000;
    }
    .btn.stop {
      background: linear-gradient(90deg, #ff5b5b, #ff9e00);
      color: #000;
    }
    .btn:hover {
      transform: scale(1.05);
      filter: brightness(1.2);
    }
    .slider-box, .select-box {
      margin-top: 10px;
      text-align: left;
    }
    input[type="range"] {
      width: 100%;
    }
    select {
      width: 100%;
      border-radius: 6px;
      border: none;
      padding: 4px;
    }
    #speedValue {
      float: right;
      font-size: 12px;
      color: #00ffd5;
    }
  `;
  document.head.appendChild(style);

  // --- Scroll Logic ---
  let scrollInterval;
  let scrollSpeed = 50;
  let direction = 'down';
  let isScrolling = false;

  function startAutoScroll() {
    stopAutoScroll();
    scrollInterval = setInterval(() => {
      const scrollAmount = direction === 'down' ? scrollSpeed : -scrollSpeed;
      window.scrollBy(0, scrollAmount);
    }, 100);
  }

  function stopAutoScroll() {
    clearInterval(scrollInterval);
  }

  // --- Event Listeners ---
  const toggleBtn = panel.querySelector('#toggleScroll');
  const speedInput = panel.querySelector('#scrollSpeed');
  const speedValue = panel.querySelector('#speedValue');
  const directionSelect = panel.querySelector('#scrollDirection');

  toggleBtn.addEventListener('click', () => {
    isScrolling = !isScrolling;
    if (isScrolling) {
      startAutoScroll();
      toggleBtn.textContent = '⏸ Stop';
      toggleBtn.classList.remove('start');
      toggleBtn.classList.add('stop');
    } else {
      stopAutoScroll();
      toggleBtn.textContent = '▶ Start';
      toggleBtn.classList.remove('stop');
      toggleBtn.classList.add('start');
    }
  });

  speedInput.addEventListener('input', e => {
    scrollSpeed = parseInt(e.target.value);
    speedValue.textContent = scrollSpeed;
  });

  directionSelect.addEventListener('change', e => {
    direction = e.target.value;
  });

  // --- Make panel draggable ---
  let isDragging = false, offsetX, offsetY;
  panel.addEventListener('mousedown', e => {
    isDragging = true;
    offsetX = e.clientX - panel.getBoundingClientRect().left;
    offsetY = e.clientY - panel.getBoundingClientRect().top;
  });
  document.addEventListener('mouseup', () => isDragging = false);
  document.addEventListener('mousemove', e => {
    if (isDragging) {
      panel.style.top = `${e.clientY - offsetY}px`;
      panel.style.left = `${e.clientX - offsetX}px`;
      panel.style.right = 'auto';
    }
  });
})();