// מערכת אנימציה מורכבת עם מצבים מרובים
class AdvancedAnimation {
    constructor(element) {
        this.element = element;
        this.states = new Map();
        this.currentAnimation = null;
    }

    addState(name, keyframes, timing = {}) {
        this.states.set(name, { keyframes, timing });
        return this;
    }

    async transitionTo(stateName) {
        if (this.currentAnimation) {
            this.currentAnimation.cancel();
        }

        const state = this.states.get(stateName);
        if (!state) throw new Error(`State ${stateName} not found`);

        const defaultTiming = {
            duration: 1000,
            easing: 'cubic-bezier(0.4, 0.0, 0.2, 1)',
            fill: 'forwards'
        };

        this.currentAnimation = this.element.animate(
            state.keyframes,
            { ...defaultTiming, ...state.timing }
        );

        return this.currentAnimation.finished;
    }

    pause() {
        if (this.currentAnimation) this.currentAnimation.pause();
        return this;
    }

    resume() {
        if (this.currentAnimation) this.currentAnimation.play();
        return this;
    }

    // מערכת מתקדמת לשרשור אנימציות
    async sequence(stateNames) {
        for (const state of stateNames) {
            await this.transitionTo(state);
        }
    }
}

// מערכת ניהול אירועים מתקדמת
class AnimationEventManager {
    constructor(animation) {
        this.animation = animation;
        this.eventHandlers = new Map();
        this.metrics = new PerformanceObserver(this.handlePerformanceEntry.bind(this));
        
        this.setupEventListeners();
    }

    setupEventListeners() {
        const events = ['finish', 'cancel', 'remove'];
        
        events.forEach(eventName => {
            this.animation[`on${eventName}`] = () => {
                const handlers = this.eventHandlers.get(eventName) || [];
                handlers.forEach(handler => {
                    requestAnimationFrame(() => handler());
                });
            };
        });
    }

    on(eventName, handler) {
        if (!this.eventHandlers.has(eventName)) {
            this.eventHandlers.set(eventName, []);
        }
        
        this.eventHandlers.get(eventName).push(handler);
        return this;
    }

    handlePerformanceEntry(entries) {
        entries.getEntries().forEach(entry => {
            if (entry.entryType === 'animation') {
                console.log(`Animation Performance Metrics:
                    Duration: ${entry.duration}ms
                    Start Time: ${entry.startTime}ms
                    Frames: ${entry.frames}`);
            }
        });
    }
}