wildflower.component('timer-lifecycle-demo', {
    state: {
        startTime: '',
        startTimestamp: 0,  // Store actual timestamp for calculations
        currentTime: '',
        elapsed: 0,
        lastLapTime: 0,  // Track last lap time for split calculation
        isRunning: false,
        intervalId: null,
        componentId: '',
        initTime: '',
        updateCount: 0,
        autoStarted: false,
        laps: []
    },

    computed: {
        statusText() {
            return this.isRunning ? 'Running' : 'Stopped'
        },

        toggleButtonText() {
            return this.isRunning ? 'Stop Timer' : 'Start Timer'
        },

        hasLaps() {
            return this.laps.length > 0
        }
    },

    // Lifecycle: Component initialization
    init() {
        console.log('Timer component initialized with ID:', this.id)

        // Store component information
        this.componentId = this.id
        this.initTime = new Date().toLocaleTimeString()

        // Set initial time display (timer not started yet)
        this.currentTime = new Date().toLocaleTimeString()
        this.startTime = '(not started)'
        this.elapsed = 0

        // Auto-start flag shows init ran
        this.autoStarted = true

        // Log initialization completion
        console.log('Timer component fully initialized at:', this.initTime)

        // Example of setting up initial data or external connections in init()
        this.loadInitialData()
    },

    // Example of data loading in init()
    loadInitialData() {
        // Simulate loading some initial configuration
        setTimeout(() => {
            console.log('Initial data loaded in init()')
        }, 100)
    },

    startTimer() {
        if (!this.isRunning) {
            // Set start time when timer actually starts
            const now = Date.now()
            this.startTime = new Date(now).toLocaleTimeString()
            this.startTimestamp = now
            this.elapsed = 0
            this.isRunning = true

            this.intervalId = setInterval(() => {
                this.currentTime = new Date().toLocaleTimeString()
                this.updateCount++

                // Calculate elapsed time using stored timestamp
                const newElapsed = Math.floor((Date.now() - this.startTimestamp) / 1000)

                // Only update if changed to prevent unnecessary updates
                if (this.elapsed !== newElapsed) {
                    this.elapsed = newElapsed
                }
            }, 1000)
        }
    },

    stopTimer() {
        if (this.isRunning) {
            this.isRunning = false
            if (this.intervalId) {
                clearInterval(this.intervalId)
                this.intervalId = null
            }
        }
    },

    toggleTimer() {
        if (this.isRunning) {
            this.stopTimer()
        } else {
            this.startTimer()
        }
    },

    resetTimer() {
        this.stopTimer()
        this.startTime = '(not started)'
        this.startTimestamp = 0
        this.currentTime = new Date().toLocaleTimeString()
        this.elapsed = 0
        this.lastLapTime = 0
        this.laps = []
        this.updateCount = 0
    },

    addLap() {
        if (this.isRunning) {
            const splitTime = this.elapsed - this.lastLapTime
            this.laps.push({
                time: splitTime,
                timestamp: new Date().toLocaleTimeString(),
                number: this.laps.length + 1
            })
            this.lastLapTime = this.elapsed
        }
    },
    
    // Lifecycle: Cleanup (called when component is destroyed)
    destroy() {
        console.log('Timer component destroyed:', this.componentId)
        this.stopTimer()
        
        // Clear any other resources that were set up in init()
        console.log('All timer resources cleaned up')
    }
})

wildflower.component('analytics-tracker-demo', {
    state: {
        clickCount: 0,
        searchCount: 0,
        searchQuery: '',
        activityLog: [],
        totalUpdates: 0,
        lastUpdatePaths: 'None yet',
        lastUpdateTime: null,
        firstUpdateTime: null,
        autoScroll: true
    },

    computed: {
        logCount() {
            return this.activityLog.length
        },

        updateRate() {
            if (!this.firstUpdateTime || this.totalUpdates < 2) return '0'
            const minutes = (Date.now() - this.firstUpdateTime) / (1000 * 60)
            return minutes > 0 ? Math.round(this.totalUpdates / minutes) : '0'
        },

        // Item-level computed for activity log badges
        badgeClass() {
            const classes = {
                'update': 'bg-primary',
                'click': 'bg-success',
                'search': 'bg-info',
                'init': 'bg-warning'
            }
            return classes[this.type] || 'bg-secondary'
        }
    },

    // Use watchers to track specific property changes
    watch: {
        clickCount(newVal, oldVal) {
            this.logActivity(`Button clicked (total: ${newVal})`, 'click')
            this.trackUpdate('clickCount')
        },

        searchQuery(newVal, oldVal) {
            if (newVal.trim()) {
                this.searchCount++
                this.logActivity(`Searched for: "${newVal}"`, 'search')
            } else if (oldVal.trim()) {
                this.logActivity('Search cleared', 'search')
            }
            this.trackUpdate('searchQuery')
        }
    },

    init() {
        this.logActivity('Component initialized', 'init')
        console.log('Analytics tracker initialized')
    },

    // Lifecycle: Runs after every state update (no parameters)
    onUpdate() {
        // Good for DOM operations after updates
        // Auto-scroll activity log to bottom (if enabled)
        if (this.autoScroll) {
            this.scrollActivityLog()
        }
    },

    trackUpdate(path) {
        this.totalUpdates++
        this.lastUpdatePaths = path
        this.lastUpdateTime = Date.now()
        if (!this.firstUpdateTime) this.firstUpdateTime = this.lastUpdateTime
    },

    incrementClicks() {
        this.clickCount++
    },

    simulateClicks() {
        // Simulate rapid clicking to show batched updates
        for (let i = 0; i < 5; i++) {
            setTimeout(() => {
                this.clickCount++
            }, i * 200)
        }
    },

    clearSearch() {
        this.searchQuery = ''
    },

    toggleAutoScroll() {
        this.autoScroll = !this.autoScroll
    },

    clearLog() {
        this.activityLog = []
        this.logActivity('Activity log cleared', 'init')
    },

    logActivity(action, type = 'info') {
        this.activityLog.push({
            timestamp: new Date().toLocaleTimeString(),
            action: action,
            type: type
        })

        // Keep only last 50 activities
        if (this.activityLog.length > 50) {
            this.activityLog = this.activityLog.slice(-50)
        }
    },

    scrollActivityLog() {
        // Find the activity log container and scroll to bottom
        setTimeout(() => {
            const logContainer = this.element.querySelector('#activity-log')
            if (logContainer) {
                logContainer.scrollTop = logContainer.scrollHeight
            }
        }, 10)
    }
})

wildflower.component('lifecycle-manager-demo', {
    state: {
        componentCounter: 0,
        activeComponents: [],
        destroyedCount: 0,
        cleanupLog: []
    },
    
    computed: {
        activeComponentCount() {
            return this.activeComponents.length
        },
        
        hasNoComponents() {
            return this.activeComponents.length === 0
        }
    },
    
    init() {
        this.logCleanup('Manager component initialized', 'create')
        
        // Set up global cleanup tracking
        window.lifecycleManagerDemo = this
    },
    
    createWorkerComponent() {
        this.componentCounter++
        const componentId = `worker-${this.componentCounter}`
        
        const componentHtml = `
            <div data-component="worker-component" class="card mb-2" data-id="${componentId}">
                <div class="card-body">
                    <h6>Worker Component #${this.componentCounter}</h6>
                    <p><strong>Status:</strong> <span data-bind="status"></span></p>
                    <p><strong>Work Done:</strong> <span data-bind="workCount"></span> tasks</p>
                    <p><strong>Component ID:</strong> <code data-bind="componentId"></code></p>
                    <button data-action="selfDestruct" class="btn btn-sm btn-danger">
                        Self Destruct
                    </button>
                </div>
            </div>
        `
        
        this.insertComponent(componentHtml, componentId)
    },
    
    createTimerComponent() {
        this.componentCounter++
        const componentId = `timer-${this.componentCounter}`
        
        const componentHtml = `
            <div data-component="timer-component" class="card mb-2" data-id="${componentId}">
                <div class="card-body">
                    <h6>Timer Component #${this.componentCounter}</h6>
                    <p><strong>Time:</strong> <span data-bind="currentTime"></span></p>
                    <p><strong>Ticks:</strong> <span data-bind="tickCount"></span></p>
                    <p><strong>Component ID:</strong> <code data-bind="componentId"></code></p>
                    <button data-action="selfDestruct" class="btn btn-sm btn-danger">
                        Remove Timer
                    </button>
                </div>
            </div>
        `
        
        this.insertComponent(componentHtml, componentId)
    },
    
    insertComponent(html, componentId) {
        const container = this.element.querySelector('#dynamic-components-container')
        container.insertAdjacentHTML('beforeend', html)
        
        // Track the component
        this.activeComponents.push(componentId)
        this.logCleanup(`Created component: ${componentId}`, 'create')
        
        // Scan for new components
        wildflower.scanForComponents(container)
    },
    
    removeAllComponents() {
        const container = this.element.querySelector('#dynamic-components-container')
        const components = container.querySelectorAll('[data-component]')
        
        components.forEach(comp => comp.remove())
        
        this.activeComponents = []
        this.logCleanup('Removed all components', 'destroy')
    },
    
    // Called by child components when they're destroyed
    notifyComponentDestroyed(componentId) {
        this.activeComponents = this.activeComponents.filter(id => id !== componentId)
        this.destroyedCount++
        this.logCleanup(`Component destroyed: ${componentId}`, 'destroy')
    },
    
    logCleanup(message, type) {
        this.cleanupLog.push({
            timestamp: new Date().toLocaleTimeString(),
            message: message,
            type: type
        })
        
        // Keep only last 20 log entries
        if (this.cleanupLog.length > 20) {
            this.cleanupLog = this.cleanupLog.slice(-20)
        }
    },
    
    clearLog() {
        this.cleanupLog = []
    },
    
    destroy() {
        this.logCleanup('Manager component destroyed', 'destroy')
        window.lifecycleManagerDemo = null
    }
})

// Worker component with cleanup
wildflower.component('worker-component', {
    state: {
        status: 'Starting...',
        workCount: 0,
        intervalId: null,
        componentId: ''
    },
    
    init() {
        this.componentId = this.element.dataset.id
        this.status = 'Working'
        
        // Simulate work being done
        this.intervalId = setInterval(() => {
            this.workCount++
            this.status = `Completed ${this.workCount} tasks`
        }, 1500)
        
        console.log('Worker component initialized:', this.componentId)
    },
    
    selfDestruct() {
        // Remove from DOM (triggers destroy)
        this.element.remove()
    },
    
    destroy() {
        console.log('Worker component destroyed:', this.componentId)
        
        // Clear interval to prevent memory leak
        if (this.intervalId) {
            clearInterval(this.intervalId)
            console.log('Work interval cleared for:', this.componentId)
        }
        
        // Notify parent manager
        if (window.lifecycleManagerDemo) {
            window.lifecycleManagerDemo.notifyComponentDestroyed(this.componentId)
        }
        
        this.status = 'Destroyed'
    }
})

// Timer component with cleanup
wildflower.component('timer-component', {
    state: {
        currentTime: '',
        tickCount: 0,
        intervalId: null,
        componentId: ''
    },
    
    init() {
        this.componentId = this.element.dataset.id
        this.currentTime = new Date().toLocaleTimeString()
        
        // Update time every second
        this.intervalId = setInterval(() => {
            this.currentTime = new Date().toLocaleTimeString()
            this.tickCount++
        }, 1000)
        
        console.log('Timer component initialized:', this.componentId)
    },
    
    selfDestruct() {
        this.element.remove()
    },
    
    destroy() {
        console.log('Timer component destroyed:', this.componentId)
        
        // Clear timer interval
        if (this.intervalId) {
            clearInterval(this.intervalId)
            console.log('Timer interval cleared for:', this.componentId)
        }
        
        // Notify parent manager
        if (window.lifecycleManagerDemo) {
            window.lifecycleManagerDemo.notifyComponentDestroyed(this.componentId)
        }
    }
})