export class GoalsTracker {
    constructor(containerId) {
        this.container = document.getElementById(containerId);
        this.STORAGE_KEY = 'hydroflux_goals';
        this.goals = [];

        this.loadState();
        this.render();
    }

    loadState() {
        const saved = localStorage.getItem(this.STORAGE_KEY);
        if (saved) {
            this.goals = JSON.parse(saved);
        } else {
            // Default Goal Example
            this.goals = [
                { id: Date.now(), text: "Drink 3L of Water", completed: false }
            ];
            this.saveState();
        }
    }

    saveState() {
        localStorage.setItem(this.STORAGE_KEY, JSON.stringify(this.goals));
    }

    addGoal(text) {
        if (!text.trim()) return;
        const newGoal = {
            id: Date.now(),
            text: text.trim(),
            completed: false
        };
        this.goals.push(newGoal);
        this.saveState();
        this.render();
    }

    toggleGoal(id) {
        const goal = this.goals.find(g => g.id === id);
        if (goal) {
            goal.completed = !goal.completed;
            this.saveState();
            this.render();

            if (goal.completed && navigator.vibrate) {
                navigator.vibrate(50); // Haptic feedback
            }
        }
    }

    deleteGoal(id) {
        if (confirm("Delete this goal?")) {
            this.goals = this.goals.filter(g => g.id !== id);
            this.saveState();
            this.render();
        }
    }

    render() {
        if (!this.container) return;

        this.container.innerHTML = `
            <div class="goals-container">
                <h2 class="section-title">GOALS</h2>
                
                <div class="goal-input-area">
                    <input type="text" id="new-goal-input" placeholder="Add new goal..." class="glow-input">
                    <button id="add-goal-btn" class="connect-glow-btn" style="padding: 0 20px; height: 50px;">ADD</button>
                </div>

                <div class="goals-list">
                    ${this.goals.map(goal => `
                        <div class="goal-item ${goal.completed ? 'completed' : ''}" data-id="${goal.id}">
                            <div class="checkbox-custom"></div>
                            <span class="goal-text">${goal.text}</span>
                            <button class="delete-goal-btn" data-id="${goal.id}">✕</button>
                        </div>
                    `).join('')}
                    ${this.goals.length === 0 ? '<div class="empty-state">No active goals</div>' : ''}
                </div>
            </div>
        `;

        this.attachEvents();
    }

    attachEvents() {
        const input = this.container.querySelector('#new-goal-input');
        const addBtn = this.container.querySelector('#add-goal-btn');

        // Add Logic
        const handleAdd = () => {
            if (input.value) {
                this.addGoal(input.value);
                input.value = ''; // Reset
            }
        };

        addBtn.addEventListener('click', handleAdd);
        input.addEventListener('keypress', (e) => {
            if (e.key === 'Enter') handleAdd();
        });

        // Toggle Logic (Delegate)
        this.container.querySelectorAll('.goal-item').forEach(item => {
            item.addEventListener('click', (e) => {
                // Ignore if clicked delete button
                if (e.target.classList.contains('delete-goal-btn')) return;
                this.toggleGoal(parseInt(item.dataset.id));
            });
        });

        // Delete Logic
        this.container.querySelectorAll('.delete-goal-btn').forEach(btn => {
            btn.addEventListener('click', (e) => {
                e.stopPropagation();
                this.deleteGoal(parseInt(btn.dataset.id));
            });
        });
    }
}
