wildflower.component('task-dashboard', {
    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 computeds: note the `(item)` parameter. The framework
        // uses fn.length > 0 to detect these and runs them once per list item
        // with the current item as the argument. See the dedicated section on
        // /docs/lists for compound-expression usage.
        formattedDate(item) {
            return new Date(item.createdAt).toLocaleDateString()
        },

        priorityBadgeClass(item) {
            const classes = {
                'high': 'bg-danger',
                'medium': 'bg-warning',
                'low': 'bg-success'
            }
            return classes[item.priority] || 'bg-secondary'
        }
    },

    init() {
        this._nextId = 0
    },

    addTask() {
        const text = this.newTaskText.trim()
        if (!text) return

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

        this.tasks.push({
            id: ++this._nextId,
            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({
                id: ++this._nextId,
                ...task,
                completed: Math.random() > 0.7,
                createdAt: new Date(Date.now() - Math.random() * 7 * 24 * 60 * 60 * 1000).toISOString()
            })
        })
    },

    removeTask(event, element, details) {
        // details.index is the position in the rendered (filtered/sorted) list,
        // so look up the actual item and find it in the original array
        const task = this.sortedAndFilteredTasks[details.index]
        const originalIndex = this.tasks.indexOf(task)
        if (originalIndex !== -1) this.tasks.splice(originalIndex, 1)
    }
})