class AvisionScore {
    constructor(containerSelector = '.score-circle') {
        this.container = document.querySelector(containerSelector);
        this.currentScore = 0;
        this.targetScore = 42;
        this.circumference = 2 * Math.PI * 70;
    }

    init(initialScore = 42) {
        if (!this.container) return;
        
        this.targetScore = initialScore;
        this.render();
        this.animateScore(0, initialScore);
    }

    render() {
        this.container.innerHTML = `
            <svg viewBox="0 0 160 160">
                <circle class="bg-circle" cx="80" cy="80" r="70"></circle>
                <circle class="progress-circle" cx="80" cy="80" r="70" 
                    stroke-dasharray="${this.circumference}" 
                    stroke-dashoffset="${this.circumference}">
                </circle>
            </svg>
            <span class="score-value">0</span>
            <span class="score-label">/100</span>
        `;

        this.progressCircle = this.container.querySelector('.progress-circle');
        this.scoreValue = this.container.querySelector('.score-value');
    }

    animateScore(from, to, duration = 1000) {
        const startTime = performance.now();
        
        const animate = (currentTime) => {
            const elapsed = currentTime - startTime;
            const progress = Math.min(elapsed / duration, 1);
            
            const easeOutQuart = 1 - Math.pow(1 - progress, 4);
            const currentScore = Math.round(from + (to - from) * easeOutQuart);
            
            this.updateDisplay(currentScore);
            
            if (progress < 1) {
                requestAnimationFrame(animate);
            } else {
                this.currentScore = to;
            }
        };
        
        requestAnimationFrame(animate);
    }

    updateDisplay(score) {
        if (this.scoreValue) {
            this.scoreValue.textContent = score;
        }
        
        if (this.progressCircle) {
            const offset = this.circumference - (score / 100) * this.circumference;
            this.progressCircle.style.strokeDashoffset = offset;
            this.progressCircle.style.stroke = this.getScoreColor(score);
        }
    }

    getScoreColor(score) {
        if (score < 40) return '#ef4444';
        if (score < 60) return '#f59e0b';
        if (score < 80) return '#10b981';
        return '#2563eb';
    }

    updateScore(newScore, animate = true) {
        if (animate) {
            this.animateScore(this.currentScore, newScore);
        } else {
            this.updateDisplay(newScore);
            this.currentScore = newScore;
        }
        this.targetScore = newScore;
        
        this.updateStatusText(newScore);
    }

    updateStatusText(score) {
        const statusEl = document.querySelector('.score-status');
        if (!statusEl) return;

        statusEl.classList.remove('critical', 'improving', 'good', 'excellent');
        
        if (score < 40) {
            statusEl.textContent = window.avisionI18n.get('dashboard_status_critical');
            statusEl.classList.add('critical');
        } else if (score < 60) {
            statusEl.textContent = window.avisionI18n.get('dashboard_status_improving');
            statusEl.classList.add('improving');
        } else if (score < 80) {
            statusEl.textContent = window.avisionI18n.get('dashboard_status_good');
            statusEl.classList.add('good');
        } else {
            statusEl.textContent = window.avisionI18n.get('dashboard_status_excellent');
            statusEl.classList.add('excellent');
        }
    }

    getCurrentScore() {
        return this.currentScore;
    }
}

window.AvisionScore = AvisionScore;
