wildflower.component('user-profile-computed', {
    state: {
        firstName: 'John',
        lastName: 'Doe',
        username: ''
    },
    
    computed: {
        // Basic computed property - combines state values
        fullName() {
            return `${this.firstName} ${this.lastName}`.trim()
        },

        // Computed property with string manipulation
        initials() {
            const first = this.firstName.charAt(0).toUpperCase()
            const last = this.lastName.charAt(0).toUpperCase()
            return `${first}${last}`
        },
        
        // Computed property using other computed properties
        displayName() {
            const full = this.fullName
            return full || this.username || 'Anonymous User'
        },
        
        // Computed property with calculation
        nameLength() {
            return this.fullName.length
        },
        
        // Boolean computed property
        hasFullName() {
            return this.firstName && this.lastName
        }
    },
    
    loadSample() {
        this.firstName = 'Alice'
        this.lastName = 'Johnson'
        this.username = 'alice.j'
    },

    clearAll() {
        this.firstName = ''
        this.lastName = ''
        this.username = ''
    },

    randomize() {
        const firstNames = ['Emma', 'Oliver', 'Sophia', 'William', 'Ava', 'James']
        const lastNames = ['Smith', 'Johnson', 'Brown', 'Taylor', 'Anderson', 'Wilson']

        this.firstName = firstNames[Math.floor(Math.random() * firstNames.length)]
        this.lastName = lastNames[Math.floor(Math.random() * lastNames.length)]
        this.username = `${this.firstName.toLowerCase()}.${this.lastName.toLowerCase()}`
    }
})

wildflower.component('shopping-cart-computed', {
    state: {
        items: [
            { name: 'Widget A', price: 19.99, quantity: 2 },
            { name: 'Widget B', price: 29.99, quantity: 1 }
        ],
        taxRate: 8.5,
        hasDiscount: false
    },
    
    computed: {
        // Item-level computed property for line totals
        lineTotal() {
            return (this.price * this.quantity).toFixed(2)
        },
        
        // Component-level computed properties
        hasItems() {
            return this.items.length > 0
        },

        itemCount() {
            return this.items.length
        },

        totalQuantity() {
            return this.items.reduce((sum, item) => sum + item.quantity, 0)
        },

        subtotal() {
            return this.items.reduce((sum, item) => {
                return sum + (item.price * item.quantity)
            }, 0).toFixed(2)
        },

        averagePrice() {
            if (this.items.length === 0) return '0.00'
            const total = this.items.reduce((sum, item) => sum + item.price, 0)
            return (total / this.items.length).toFixed(2)
        },

        discountAmount() {
            return this.hasDiscount ? (this.subtotal * 0.1).toFixed(2) : '0.00'
        },

        taxableAmount() {
            const subtotal = parseFloat(this.subtotal)
            const discount = parseFloat(this.discountAmount)
            return subtotal - discount
        },

        tax() {
            return (this.taxableAmount * (this.taxRate / 100)).toFixed(2)
        },

        total() {
            return (this.taxableAmount + parseFloat(this.tax)).toFixed(2)
        }
    },
    
    addItem() {
        const products = [
            { name: 'Gadget Pro', price: 49.99 },
            { name: 'Super Tool', price: 24.99 },
            { name: 'Magic Device', price: 79.99 },
            { name: 'Wonder Item', price: 34.99 }
        ]
        
        const product = products[Math.floor(Math.random() * products.length)]
        this.items.push({
            ...product,
            quantity: Math.floor(Math.random() * 3) + 1
        })
    },

    removeItem(event, element, details) {
        this.items.splice(details.index, 1)
    },

    applyDiscount() {
        this.hasDiscount = !this.hasDiscount
    },

    changeTaxRate() {
        const rates = [5.0, 8.5, 10.0, 12.5]
        const currentIndex = rates.indexOf(this.taxRate)
        const nextIndex = (currentIndex + 1) % rates.length
        this.taxRate = rates[nextIndex]
    },

    clearCart() {
        this.items = []
        this.hasDiscount = false
    }
})

wildflower.component('performance-demo', {
    state: {
        arraySize: 5,
        numbers: [],
        calcCounts: {
            sum: 0,
            minMax: 0,
            stdDev: 0
        }
    },
    
    computed: {
        actualLength() {
            return this.numbers.length
        },

        // Expensive calculation - only runs when numbers array changes
        sum() {
            return this.numbers.reduce((a, b) => a + b, 0)
        },

        // Uses cached sum value - no additional calculation
        average() {
            return this.numbers.length > 0
                ? (this.sum / this.numbers.length).toFixed(2)
                : 0
        },
        
        // Another expensive calculation with its own caching
        minMax() {
            // Simple cascade breaker - track call frequency
            if (!this._cascadeBreaker) this._cascadeBreaker = {};
            if (!this._cascadeBreaker.minMax) this._cascadeBreaker.minMax = { calls: 0, lastReset: Date.now() };
            
            const now = Date.now();
            const breaker = this._cascadeBreaker.minMax;
            
            // Reset counter every 100ms
            if (now - breaker.lastReset > 100) {
                breaker.calls = 0;
                breaker.lastReset = now;
            }
            
            breaker.calls++;
            
            // Enhanced diagnostic logging

            // If called more than 20 times in 100ms, return cached result
            if (breaker.calls > 20) {
                console.log('🟠 CASCADE BREAKER: minMax called too frequently, returning cached result');
                return this._cascadeBreaker.minMax.lastResult || { min: 0, max: 0 };
            }
            
            const numbers = this.numbers;
            if (numbers.length === 0) {
                return { min: 0, max: 0 };
            }

            let min = numbers[0];
            let max = numbers[0];

            for (let i = 1; i < numbers.length; i++) {
                const num = numbers[i];
                if (num < min) min = num;
                if (num > max) max = num;
            }

            const result = { min, max };
            this._cascadeBreaker.minMax.lastResult = result;
            return result;
        },
        
        // Very expensive calculation - uses cached sum for efficiency
        standardDeviation() {
            const numbers = this.numbers
              if (numbers.length <= 1) return '0.00'

              const mean = this.sum / numbers.length
              let sumSquaredDifferences = 0

              for (let i = 0; i < numbers.length; i++) {
                const difference = numbers[i] - mean
                sumSquaredDifferences += difference * difference
              }

              const variance = sumSquaredDifferences / numbers.length

              return Math.sqrt(variance).toFixed(2)
        }
    },
    
    // Manual tracking methods for demonstration
    trackSumCalculation() {
        this.calcCounts = {
            ...this.calcCounts,
            sum: this.calcCounts.sum + 1
        }
    },

    trackMinMaxCalculation() {
        this.calcCounts = {
            ...this.calcCounts,
            minMax: this.calcCounts.minMax + 1
        }
    },

    trackStdDevCalculation() {
        this.calcCounts = {
            ...this.calcCounts,
            stdDev: this.calcCounts.stdDev + 1
        }
    },
    
    
    init() {
        this.regenerateNumbers()
    },
    
    regenerateNumbers() {
        console.log('Regenerating array - computed properties will recalculate')
        this.numbers = Array.from(
            { length: parseInt(this.arraySize) },
            () => Math.floor(Math.random() * 100)
        )
        // No automatic tracking - only when user clicks buttons
    },

    addRandomNumber() {
        this.numbers = [...this.numbers, Math.floor(Math.random() * 100)]
    },

    multiplyArray() {
        // Double the array by adding more random numbers
        const currentLength = this.numbers.length
        const newNumbers = Array.from(
            { length: currentLength },
            () => Math.floor(Math.random() * 100)
        )
        this.numbers = [...this.numbers, ...newNumbers]
        this.arraySize = this.numbers.length
    },

    accessSum() {
        // Access the computed sum multiple times
        // Notice the calculation count doesn't increase because it's cached
        console.log('Accessing cached sum:', this.sum)
        console.log('Accessing cached sum again:', this.sum)
        console.log('And again:', this.sum)
        // Manually track this access for demo purposes
        this.trackSumCalculation()
    },

    accessStats() {
        // Access multiple computed properties
        // Each is calculated only once and then cached
        console.log('Stats - Sum:', this.sum)
        console.log('Stats - Average:', this.average)
        console.log('Stats - Min:', this.minValue)
        console.log('Stats - Max:', this.maxValue)
        console.log('Stats - StdDev:', this.standardDeviation)
        // Manually track these accesses for demo purposes
        this.trackSumCalculation()
        this.trackMinMaxCalculation()
        this.trackStdDevCalculation()
    }
})

wildflower.component('task-manager', {
    state: {
        tasks: [],
        newTaskText: '',
        currentFilter: 'all',
        sortBy: 'created'
    },
    
    computed: {
        // Basic computed properties
        totalTasks() {
            return this.tasks.length
        },

        activeTasks() {
            return this.tasks.filter(task => !task.completed).length
        },

        completedTasks() {
            return this.tasks.filter(task => task.completed).length
        },

        highPriorityCount() {
            return this.tasks.filter(task => task.priority === 'high').length
        },

        // Chained computed properties
        completionRate() {
            return this.totalTasks > 0
                ? Math.round((this.completedTasks / this.totalTasks) * 100)
                : 0
        },

        statusMessage() {
            if (this.totalTasks === 0) return 'No tasks'
            if (this.completionRate === 100) return 'All complete!'
            if (this.completionRate >= 75) return 'Almost done!'
            if (this.completionRate >= 50) return 'Good progress'
            return 'Getting started'
        },

        // Computed array filtering
        filteredTasks() {
            const filter = this.currentFilter
            const tasks = this.tasks
            
            switch (filter) {
                case 'active':
                    return tasks.filter(task => !task.completed)
                case 'completed':
                    return tasks.filter(task => task.completed)
                case 'priority':
                    return tasks.filter(task => task.priority === 'high')
                default:
                    return tasks
            }
        },
        
        // Computed array sorting (depends on filteredTasks)
        sortedAndFilteredTasks() {
            const tasks = [...this.filteredTasks]
            const sortBy = this.sortBy
            
            switch (sortBy) {
                case 'priority':
                    const priorityOrder = { 'high': 3, 'medium': 2, 'low': 1 }
                    return tasks.sort((a, b) => priorityOrder[b.priority] - priorityOrder[a.priority])
                case 'alphabetical':
                    return tasks.sort((a, b) => a.text.localeCompare(b.text))
                default: // created
                    return tasks.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt))
            }
        },
        
        filteredTaskCount() {
            return this.filteredTasks.length
        },

        noTasksVisible() {
            return this.sortedAndFilteredTasks.length === 0
        },
        
        // Item-level computed properties
        formattedDate() {
            return new Date(this.createdAt).toLocaleDateString()
        },
        
        priorityBadgeClass() {
            const classes = {
                'high': 'bg-danger',
                'medium': 'bg-warning',
                'low': 'bg-success'
            }
            return classes[this.priority] || 'bg-secondary'
        }
    },
    
    addTask() {
        const text = this.newTaskText.trim()
        if (!text) return

        const priorities = ['low', 'medium', 'high']

        this.tasks.push({
            text: text,
            completed: false,
            priority: priorities[Math.floor(Math.random() * priorities.length)],
            createdAt: new Date().toISOString()
        })

        this.newTaskText = ''
    },
    
    addSampleTasks() {
        const sampleTasks = [
            { text: 'Complete project documentation', priority: 'high' },
            { text: 'Review pull requests', priority: 'medium' },
            { text: 'Update dependencies', priority: 'low' },
            { text: 'Fix critical bug in production', priority: 'high' },
            { text: 'Plan team meeting', priority: 'medium' }
        ]
        
        sampleTasks.forEach(task => {
            this.tasks.push({
                ...task,
                completed: Math.random() > 0.7,
                createdAt: new Date(Date.now() - Math.random() * 7 * 24 * 60 * 60 * 1000).toISOString()
            })
        })
    },
    
    removeTask(event, element, details) {
        this.tasks.splice(details.index, 1)
    }
})