class SliderCaptcha {
    constructor(container, options = {}) {
        this.container = typeof container === 'string' ? document.querySelector(container) : container;
        
        if (!this.container) {
            throw new Error('SliderCaptcha: Container element not found');
        }

        this.options = {
            apiBaseUrl: '/user',
            onSuccess: null,
            onFail: null,
            onRefresh: null,
            width: 300,
            autoLoad: true,
            ...options
        };

        this.captchaKey = null;
        this.bgImage = null;
        this.sliderImage = null;
        this.yPosition = 0;
        this.isDragging = false;
        this.startX = 0;
        this.currentX = 0;
        this.trajectory = [];
        this.maxX = 0;
        this.verified = false;

        this._init();
    }

    _init() {
        this._createDOM();
        this._bindEvents();
        
        if (this.options.autoLoad) {
            this.loadCaptcha();
        }
    }

    _createDOM() {
        const captchaId = 'slider-captcha-' + Date.now();
        this.container.innerHTML = `
            <div class="slider-captcha" id="${captchaId}">
                <div class="slider-captcha-header">
                    <span class="slider-captcha-title">请完成安全验证</span>
                    <button class="slider-captcha-refresh" type="button" title="刷新验证码">
                        <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
                            <path d="M17.65 6.35A7.958 7.958 0 0012 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08A5.99 5.99 0 0112 18c-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/>
                        </svg>
                    </button>
                </div>
                
                <div class="slider-captcha-body">
                    <div class="slider-captcha-image-container">
                        <canvas class="slider-captcha-canvas" width="300" height="150"></canvas>
                        <div class="slider-captcha-slider-piece"></div>
                        <div class="slider-captcha-loading">
                            <div class="slider-captcha-spinner"></div>
                            <span>加载中...</span>
                        </div>
                    </div>
                </div>
                
                <div class="slider-captcha-track-container">
                    <div class="slider-captcha-track">
                        <div class="slider-captcha-track-text">向右拖动滑块完成验证</div>
                        <div class="slider-captcha-track-fill"></div>
                    </div>
                    <div class="slider-captcha-slider-btn" role="slider" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" tabindex="0">
                        <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
                            <path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/>
                        </svg>
                    </div>
                </div>
                
                <div class="slider-captcha-footer">
                    <div class="slider-captcha-status"></div>
                </div>
            </div>
        `;

        this.element = this.container.querySelector('.slider-captcha');
        this.canvas = this.container.querySelector('.slider-captcha-canvas');
        this.ctx = this.canvas.getContext('2d');
        this.sliderPiece = this.container.querySelector('.slider-captcha-slider-piece');
        this.loading = this.container.querySelector('.slider-captcha-loading');
        this.track = this.container.querySelector('.slider-captcha-track');
        this.trackFill = this.container.querySelector('.slider-captcha-track-fill');
        this.trackText = this.container.querySelector('.slider-captcha-track-text');
        this.sliderBtn = this.container.querySelector('.slider-captcha-slider-btn');
        this.refreshBtn = this.container.querySelector('.slider-captcha-refresh');
        this.status = this.container.querySelector('.slider-captcha-status');
        
        this.maxX = this.track.offsetWidth - this.sliderBtn.offsetWidth;
    }

    _bindEvents() {
        this.refreshBtn.addEventListener('click', () => this.loadCaptcha());

        this.sliderBtn.addEventListener('mousedown', (e) => this._onDragStart(e));
        this.sliderBtn.addEventListener('touchstart', (e) => this._onDragStart(e), { passive: false });

        document.addEventListener('mousemove', (e) => this._onDragMove(e));
        document.addEventListener('touchmove', (e) => this._onDragMove(e), { passive: false });

        document.addEventListener('mouseup', (e) => this._onDragEnd(e));
        document.addEventListener('touchend', (e) => this._onDragEnd(e));
    }

    async loadCaptcha() {
        this._showLoading(true);
        this._resetState();
        
        try {
            const response = await fetch(`${this.options.apiBaseUrl}/slider-captcha/generate/`);
            const data = await response.json();
            
            if (data.code === 0 || data.code === 20000) {
                const captchaData = data.data;
                this.captchaKey = captchaData.captcha_key;
                this.yPosition = captchaData.y_position;
                
                await this._loadImages(captchaData.bg_image, captchaData.slider_image);
                this._drawCaptcha();
                this._showLoading(false);
            } else {
                throw new Error(data.message || '加载验证码失败');
            }
        } catch (error) {
            console.error('Failed to load captcha:', error);
            this._showLoading(false);
            this._showStatus('加载失败，点击刷新重试', 'fail');
        }
    }

    _loadImages(bgSrc, sliderSrc) {
        return new Promise((resolve, reject) => {
            let loaded = 0;
            const onLoad = () => {
                loaded++;
                if (loaded === 2) resolve();
            };

            this.bgImage = new Image();
            this.bgImage.onload = onLoad;
            this.bgImage.onerror = reject;
            this.bgImage.src = bgSrc;

            this.sliderImage = new Image();
            this.sliderImage.onload = onLoad;
            this.sliderImage.onerror = reject;
            this.sliderImage.src = sliderSrc;
        });
    }

    _drawCaptcha() {
        if (!this.bgImage || !this.ctx) return;
        
        this.canvas.width = this.options.width;
        this.canvas.height = 150;
        
        this.ctx.drawImage(this.bgImage, 0, 0, this.canvas.width, this.canvas.height);
        
        if (this.sliderImage) {
            this.sliderPiece.style.backgroundImage = `url(${this.sliderImage.src})`;
            this.sliderPiece.style.top = `${this.yPosition}px`;
            this.sliderPiece.style.left = '0px';
            this.sliderPiece.style.width = '60px';
            this.sliderPiece.style.height = '60px';
        }
    }

    _onDragStart(e) {
        if (this.verified) return;
        
        e.preventDefault();
        this.isDragging = true;
        this.trajectory = [];
        
        const clientX = e.type === 'touchstart' ? e.touches[0].clientX : e.clientX;
        this.startX = clientX;
        this.currentX = 0;
        
        this.sliderBtn.classList.add('dragging');
        this.element.classList.add('dragging');
        
        this._recordTrajectory(0);
    }

    _onDragMove(e) {
        if (!this.isDragging) return;
        
        e.preventDefault();
        
        const clientX = e.type === 'touchmove' ? e.touches[0].clientX : e.clientX;
        let moveX = clientX - this.startX;
        
        moveX = Math.max(0, Math.min(moveX, this.maxX));
        this.currentX = moveX;
        
        this._updateSliderPosition(moveX);
        this._recordTrajectory(moveX);
    }

    _onDragEnd(e) {
        if (!this.isDragging) return;
        
        this.isDragging = false;
        this.sliderBtn.classList.remove('dragging');
        this.element.classList.remove('dragging');
        
        if (this.currentX > 10) {
            this._verify();
        } else {
            this._resetSlider();
        }
    }

    _updateSliderPosition(x) {
        const percent = (x / this.maxX) * 100;
        
        this.sliderBtn.style.left = `${x}px`;
        this.sliderBtn.setAttribute('aria-valuenow', Math.round(percent));
        
        this.trackFill.style.width = `${x + this.sliderBtn.offsetWidth / 2}px`;
        
        this.sliderPiece.style.left = `${x}px`;
    }

    _recordTrajectory(x) {
        this.trajectory.push({
            x: Math.round(x),
            t: Date.now()
        });
    }

    async _verify() {
        const xPosition = Math.round(this.currentX);
        
        try {
            const response = await fetch(`${this.options.apiBaseUrl}/slider-captcha/verify/`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    captcha_key: this.captchaKey,
                    x_position: xPosition,
                    trajectory: this.trajectory
                })
            });
            
            const data = await response.json();
            
            if (data.code === 0 || data.code === 20000) {
                if (data.data && data.data.verified) {
                    this._onSuccess();
                } else {
                    this._onFail();
                }
            } else {
                this._onFail(data.message);
            }
        } catch (error) {
            console.error('Verification failed:', error);
            this._onFail('验证失败，请重试');
        }
    }

    _onSuccess() {
        this.verified = true;
        
        this.sliderBtn.classList.add('success');
        this.element.classList.add('verified');
        
        this.trackFill.style.background = 'linear-gradient(90deg, #52c41a, #73d13d)';
        
        this._showStatus('验证成功', 'success');
        
        if (typeof this.options.onSuccess === 'function') {
            this.options.onSuccess({
                captchaKey: this.captchaKey,
                xPosition: Math.round(this.currentX)
            });
        }
    }

    _onFail(message = '验证失败，请重试') {
        this.sliderBtn.classList.add('fail');
        this._showStatus(message, 'fail');
        
        setTimeout(() => {
            this._resetSlider();
            this.sliderBtn.classList.remove('fail');
            this.loadCaptcha();
        }, 1500);
        
        if (typeof this.options.onFail === 'function') {
            this.options.onFail(message);
        }
    }

    _resetState() {
        this.verified = false;
        this.isDragging = false;
        this.currentX = 0;
        this.trajectory = [];
        
        this.element.classList.remove('verified', 'dragging');
        this.sliderBtn.classList.remove('success', 'fail', 'dragging');
        this.sliderBtn.style.left = '0px';
        this.sliderBtn.setAttribute('aria-valuenow', 0);
        this.trackFill.style.width = '0px';
        this.trackFill.style.background = 'linear-gradient(90deg, #52c41a, #73d13d)';
        this.trackText.style.display = 'block';
        this._showStatus('', '');
    }

    _resetSlider() {
        this.currentX = 0;
        this.trajectory = [];
        
        this.sliderBtn.style.left = '0px';
        this.sliderBtn.setAttribute('aria-valuenow', 0);
        this.trackFill.style.width = '0px';
        
        this.sliderPiece.style.left = '0px';
        
        this._showStatus('', '');
    }

    _showLoading(show) {
        if (this.loading) {
            this.loading.classList.toggle('hidden', !show);
        }
    }

    _showStatus(message, type) {
        if (this.status) {
            this.status.textContent = message;
            this.status.className = 'slider-captcha-status';
            if (type) {
                this.status.classList.add(type);
            }
            if (!message) {
                this.status.classList.add('hidden');
            }
        }
    }

    refresh() {
        this.loadCaptcha();
    }

    destroy() {
        document.removeEventListener('mousemove', this._onDragMove);
        document.removeEventListener('touchmove', this._onDragMove);
        document.removeEventListener('mouseup', this._onDragEnd);
        document.removeEventListener('touchend', this._onDragEnd);
        
        this.container.innerHTML = '';
    }

    isVerified() {
        return this.verified;
    }
}

if (typeof module !== 'undefined' && module.exports) {
    module.exports = SliderCaptcha;
}