wildflower.component('interactive-events-demo', {
    state: {
        clickCount: 0,
        inputValue: '',
        hoverStatus: 'Not hovering',
        mouseStatus: 'Ready',
        lastKey: 'none',
        eventLog: []
    },
    
    computed: {
        inputLength() {
            return this.inputValue.length
        },
        
        eventCount() {
            return this.eventLog.length
        },

        // Item-level computed for event log badges
        badgeClass() {
            const classes = {
                'click': 'bg-primary',
                'input': 'bg-success',
                'mouse': 'bg-info',
                'keyboard': 'bg-warning'
            }
            return classes[this.type] || 'bg-secondary'
        }
    },
    
    // Click event handlers
    handleClick(event, element) {
        this.clickCount++
        this.logEvent('Button clicked', 'click')
        console.log('Button clicked!', { event, element })
    },
    
    doubleClick(event, element) {
        this.clickCount += 2
        this.logEvent('Double click performed', 'click')
    },
    
    // Input event handlers
    handleInputChange(event, element) {
        this.logEvent(`Input changed: "${event.target.value}"`, 'input')
        console.log('Input changed:', event.target.value)
    },
    
    handleKeyup(event, element) {
        this.lastKey = event.key
        this.logEvent(`Key pressed: ${event.key}`, 'keyboard')
    },
    
    // Mouse event handlers
    handleHover(event, element) {
        this.hoverStatus = 'Currently hovering! 🙂'
        this.logEvent('Mouse hover started', 'mouse')
    },
    
    handleHoverOut(event, element) {
        this.hoverStatus = 'Not hovering'
        this.logEvent('Mouse hover ended', 'mouse')
    },
    
    handleMouseDown(event, element) {
        this.mouseStatus = 'Mouse Down 🔄'
        this.logEvent('Mouse down in area', 'mouse')
    },
    
    handleMouseUp(event, element) {
        this.mouseStatus = 'Mouse Up ⬆️'
        this.logEvent('Mouse up in area', 'mouse')
        
        // Reset after a short delay
        setTimeout(() => {
            this.mouseStatus = 'Ready'
        }, 1000)
    },
    
    // Utility methods
    logEvent(description, type) {
        this.eventLog.unshift({
            timestamp: new Date().toLocaleTimeString(),
            description: description,
            type: type
        })
        
        // Keep only last 15 events
        if (this.eventLog.length > 15) {
            this.eventLog = this.eventLog.slice(0, 15)
        }
    },
    
    clearEventLog() {
        this.eventLog = []
        this.logEvent('Event log cleared', 'click')
    }
})

wildflower.component('event-types-demo', {
    state: {
        mouseX: 0,
        mouseY: 0,
        mouseStatus: 'Ready',
        eventLog: []
    },
    
    computed: {
        eventCount() {
            return this.eventLog.length
        },
        
        isEmpty() {
            return this.eventLog.length === 0
        }
    },
    
    // Form event handlers
    handleSubmit(event, element) {
        event.preventDefault()
        this.logEvent('Form submitted', 'form')

        // Get form data
        const formData = new FormData(element)
        const data = Object.fromEntries(formData.entries())
        console.log('Form submitted with data:', data)
    },
    
    handleFocus(event, element) {
        this.logEvent(`Input focused: ${element.placeholder}`, 'focus')
    },
    
    handleBlur(event, element) {
        const value = event.target.value
        this.logEvent(`Input blurred${value ? ': ' + value : ' (empty)'}`, 'blur')
    },
    
    handleSelectChange(event, element) {
        const value = event.target.value
        this.logEvent(`Select changed to: ${value || '(none)'}`, 'change')
    },
    
    // Mouse event handlers
    handleMouseDown(event, element) {
        this.mouseStatus = 'Mouse Down'
        this.logEvent('Mouse button pressed', 'mouse')
    },
    
    handleMouseUp(event, element) {
        this.mouseStatus = 'Mouse Up'
        this.logEvent('Mouse button released', 'mouse')
        
        // Reset status after delay
        setTimeout(() => {
            this.mouseStatus = 'Ready'
        }, 1000)
    },
    
    handleMouseMove(event, element) {
        const rect = element.getBoundingClientRect()
        this.mouseX = Math.round(event.clientX - rect.left)
        this.mouseY = Math.round(event.clientY - rect.top)
        
        // Throttle mouse move events in log
        if (!this._mouseMoveThrottle) {
            this._mouseMoveThrottle = true
            this.logEvent(`Mouse moved to (${this.mouseX}, ${this.mouseY})`, 'mouse')
            setTimeout(() => {
                this._mouseMoveThrottle = false
            }, 500)
        }
    },
    
    // Utility methods
    logEvent(eventDescription, type = 'general') {
        this.eventLog.unshift({
            timestamp: new Date().toLocaleTimeString(),
            event: eventDescription,
            type: type
        })
        
        // Keep only last 20 events
        if (this.eventLog.length > 20) {
            this.eventLog = this.eventLog.slice(0, 20)
        }
    },
    
    clearEventLog() {
        this.eventLog = []
        this.logEvent('Event log cleared', 'system')
    }
})

wildflower.component('arguments-demo', {
    state: {
        items: [
            { id: 1, name: 'Task Alpha', category: 'work' },
            { id: 2, name: 'Task Beta', category: 'personal' },
            { id: 3, name: 'Task Gamma', category: 'work' }
        ],
        lastEventDetails: 'No events analyzed yet. Click a button or interact with list items to see event details.'
    },
    
    computed: {
        itemCount() {
            return this.items.length
        },
        
        isEmpty() {
            return this.items.length === 0
        }
    },
    
    analyzeEvent(event, element, details) {
        // Comprehensive event analysis
        const eventInfo = {
            // Event object properties
            event: {
                type: event.type,
                timestamp: new Date(event.timeStamp).toISOString(),
                bubbles: event.bubbles,
                cancelable: event.cancelable,
                target: {
                    tagName: event.target.tagName,
                    className: event.target.className,
                    textContent: event.target.textContent.substring(0, 50)
                }
            },
            
            // Element object properties
            element: {
                tagName: element.tagName,
                className: element.className,
                id: element.id || 'no-id',
                dataset: element.dataset,
                textContent: element.textContent.substring(0, 50)
            },
            
            // Details object (context from framework)
            details: details || 'No additional context provided',
            
            // Analysis metadata
            analysis: {
                eventAndElementSame: event.target === element,
                hasCustomData: Object.keys(element.dataset).length > 0,
                componentContext: this.constructor.name || 'unknown'
            }
        }
        
        this.lastEventDetails = JSON.stringify(eventInfo, null, 2)
        console.log('Event Analysis:', eventInfo)
    },
    
    editItem(event, element, details) {
        // Use details.index from the framework's action context
        const itemIndex = details.index
        const item = details.item

        const eventInfo = {
            action: 'Edit item',
            itemData: item,
            listContext: {
                itemIndex: itemIndex,
                totalItems: this.items.length,
                detailsProvided: true
            },
            elementInfo: {
                tag: element.tagName,
                classes: element.className.split(' '),
                customAttributes: element.dataset
            },
            eventDetails: {
                type: event.type,
                button: event.button || 'n/a',
                ctrlKey: event.ctrlKey,
                altKey: event.altKey
            }
        }

        this.lastEventDetails = JSON.stringify(eventInfo, null, 2)
    },

    deleteItem(event, element, details) {
        // Use details.index and details.item from the framework's action context
        const itemIndex = details.index
        const item = details.item

        if (confirm(`Delete "${item.name}"?`)) {
            this.items.splice(itemIndex, 1)

            const eventInfo = {
                action: 'Deleted item',
                deletedItem: item,
                listContext: {
                    itemWasAtIndex: itemIndex,
                    remainingItems: this.items.length,
                    listLength: this.items.length
                },
                eventContext: {
                    type: event.type,
                    elementClicked: element.textContent.trim()
                }
            }

            this.lastEventDetails = JSON.stringify(eventInfo, null, 2)
        }
    },

    addRandomItem() {
        const names = ['Task Delta', 'Task Epsilon', 'Task Zeta', 'Task Theta', 'Task Lambda']
        const categories = ['work', 'personal', 'urgent', 'research']

        const name = names[Math.floor(Math.random() * names.length)]
        const category = categories[Math.floor(Math.random() * categories.length)]
        const id = Date.now() + Math.floor(Math.random() * 1000)

        this.items.push({ id, name, category })

        this.lastEventDetails = `Added new item: ${JSON.stringify({ id, name, category }, null, 2)}`
    },

    resetItems() {
        this.items = [
            { id: 1, name: 'Task Alpha', category: 'work' },
            { id: 2, name: 'Task Beta', category: 'personal' },
            { id: 3, name: 'Task Gamma', category: 'work' }
        ]
        this.lastEventDetails = 'Items reset to original state.'
    }
})

wildflower.component('action-args-demo', {
    state: {
        priority: 'medium',
        opacity: 1,
        lastAction: ''
    },

    setPriority(event, element, details) {
        // details.args = ['high'], ['medium'], or ['low']
        this.priority = details.args[0]
        this.lastAction = 'setPriority called with: ' + details.args[0]
    },

    setOpacity(event, element, details) {
        // details.args = [1], [0.5], or [0]
        this.opacity = details.args[0]
        this.lastAction = 'setOpacity called with: ' + details.args[0]
    }
})