script.js

document.addEventListener('DOMContentLoaded', () => {
    // DOM Elements
    const form = document.getElementById('add-goal-form');
    const input = document.getElementById('goal-input');
    const categorySelect = document.getElementById('category-select');
    const goalsList = document.getElementById('goals-list');
    const emptyState = document.getElementById('empty-state');
    const completedCountEl = document.getElementById('completed-count');
    const totalLimitEl = document.getElementById('total-limit');
    const progressBar = document.getElementById('progress-bar');
    const themeSelect = document.getElementById('theme-select');
    const filterBtns = document.querySelectorAll('.filter-btn');

    const MAX_GOALS = 100;
    
    // Example Initial Goals
    const defaultGoals = [
        { id: generateId(), text: 'Visit Japan during Cherry Blossom season', category: 'Travel', completed: false, date: Date.now() },
        { id: generateId(), text: 'Learn to play the guitar', category: 'Skill', completed: false, date: Date.now() - 1000 },
        { id: generateId(), text: 'Skydive from 15,000 feet', category: 'Experience', completed: false, date: Date.now() - 2000 },
        { id: generateId(), text: 'Run a marathon', category: 'Health', completed: false, date: Date.now() - 3000 },
        { id: generateId(), text: 'See the Northern Lights in Norway', category: 'Travel', completed: false, date: Date.now() - 4000 },
        { id: generateId(), text: 'Speak a new language fluently', category: 'Skill', completed: false, date: Date.now() - 5000 },
        { id: generateId(), text: 'Scuba dive in the Great Barrier Reef', category: 'Experience', completed: false, date: Date.now() - 6000 },
    ];

    // State
    let goals = JSON.parse(localStorage.getItem('bucketListGoals')) || null;
    if (!goals) {
        goals = defaultGoals;
        saveGoals();
    }
    
    let currentFilter = 'All';

    // Theme Management
    const savedTheme = localStorage.getItem('bucketListTheme') || 'theme-default';
    document.body.className = savedTheme;
    themeSelect.value = savedTheme;

    themeSelect.addEventListener('change', (e) => {
        document.body.className = e.target.value;
        localStorage.setItem('bucketListTheme', e.target.value);
    });

    // Helper functions
    function generateId() {
        return Math.random().toString(36).substr(2, 9);
    }

    function saveGoals() {
        localStorage.setItem('bucketListGoals', JSON.stringify(goals));
    }

    function updateProgress() {
        const completedCount = goals.filter(g => g.completed).length;
        completedCountEl.textContent = completedCount;
        totalLimitEl.textContent = MAX_GOALS;

        const percentage = Math.min((completedCount / MAX_GOALS) * 100, 100);
        progressBar.style.width = `${percentage}%`;

        if (goals.length === 0) {
            emptyState.classList.remove('hidden');
        } else {
            const filteredGoals = getFilteredGoals();
            if (filteredGoals.length === 0) {
                 emptyState.classList.remove('hidden');
                 emptyState.querySelector('h3').textContent = 'No goals in this category';
                 emptyState.querySelector('p').textContent = 'Change the filter or add a new goal.';
            } else {
                 emptyState.classList.add('hidden');
            }
        }
    }

    function getFilteredGoals() {
        if (currentFilter === 'All') return goals;
        return goals.filter(g => g.category === currentFilter);
    }

    // Render Goals
    function renderGoals() {
        goalsList.innerHTML = '';
        
        const goalsToRender = getFilteredGoals();
        
        // Sort: incomplete first, then by newest
        goalsToRender.sort((a, b) => {
            if (a.completed === b.completed) {
                return b.date - a.date;
            }
            return a.completed ? 1 : -1;
        });

        goalsToRender.forEach(goal => {
            const li = document.createElement('li');
            li.className = `goal-item ${goal.completed ? 'completed' : ''}`;
            li.dataset.id = goal.id;

            li.innerHTML = `
                <div class="checkbox-wrapper">
                    <input type="checkbox" id="check-${goal.id}" ${goal.completed ? 'checked' : ''}>
                    <div class="checkmark">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
                    </div>
                </div>
                <div class="goal-content">
                    <label for="check-${goal.id}" class="goal-text">${escapeHTML(goal.text)}</label>
                    <div class="goal-meta">
                        <span class="goal-category">${goal.category}</span>
                        <span class="goal-date">${new Date(goal.date).toLocaleDateString()}</span>
                    </div>
                </div>
                <button class="delete-btn" aria-label="Delete goal">
                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>
                </button>
            `;

            // Event Listeners for goal items
            const checkbox = li.querySelector('input[type="checkbox"]');
            checkbox.addEventListener('change', () => toggleGoal(goal.id));

            const deleteBtn = li.querySelector('.delete-btn');
            deleteBtn.addEventListener('click', () => deleteGoal(goal.id));

            goalsList.appendChild(li);
        });

        updateProgress();
    }

    // Actions
    function addGoal(e) {
        e.preventDefault();
        
        if (goals.length >= MAX_GOALS) {
            alert(`You have reached the maximum of ${MAX_GOALS} goals!`);
            return;
        }

        const text = input.value.trim();
        const category = categorySelect.value;

        if (text) {
            const newGoal = {
                id: generateId(),
                text,
                category,
                completed: false,
                date: Date.now()
            };

            goals.push(newGoal);
            saveGoals();
            input.value = '';
            
            // If current filter doesn't match the new item and isn't 'All', switch to 'All'
            if (currentFilter !== 'All' && currentFilter !== category) {
                document.querySelector('.filter-btn[data-filter="All"]').click();
            } else {
                renderGoals();
            }
        }
    }

    function toggleGoal(id) {
        const goal = goals.find(g => g.id === id);
        if (goal) {
            goal.completed = !goal.completed;
            saveGoals();
            renderGoals();
        }
    }

    function deleteGoal(id) {
        goals = goals.filter(g => g.id !== id);
        saveGoals();
        renderGoals();
    }

    // Filtering
    filterBtns.forEach(btn => {
        btn.addEventListener('click', () => {
            filterBtns.forEach(b => b.classList.remove('active'));
            btn.classList.add('active');
            currentFilter = btn.dataset.filter;
            renderGoals();
        });
    });

    // Utility
    function escapeHTML(str) {
        return str.replace(/[&<>'"]/g, 
            tag => ({
                '&': '&amp;',
                '<': '&lt;',
                '>': '&gt;',
                "'": '&#39;',
                '"': '&quot;'
            }[tag] || tag)
        );
    }

    // Initialization
    form.addEventListener('submit', addGoal);
    renderGoals();
});