export class GoalsView {
    constructor(containerId, app) {
        this.container = document.getElementById(containerId);
        this.app = app;
        this.render();
        this.attachEvents();
    }

    render() {
        const goalsData = JSON.parse(localStorage.getItem('hydroflux_goals') || '[]');

        this.container.innerHTML = `
            <div class="w-full max-w-md bg-white min-h-screen relative overflow-hidden mx-auto bg-gradient-to-br from-blue-50 to-blue-100 flex flex-col p-6">
                <!-- Header -->
                <div class="flex justify-between items-center mb-8">
                    <button id="backBtn" class="w-10 h-10 rounded-full bg-white flex items-center justify-center shadow-md">
                        <svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
                    </button>
                    <span class="text-lg font-bold text-gray-800">Your Goals</span>
                    <button id="addGoalProto" class="w-10 h-10 rounded-full bg-blue-500 text-white flex items-center justify-center shadow-lg hover:bg-blue-600 transition">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path></svg>
                    </button>
                </div>

                <!-- Active Goals -->
                <div class="space-y-4 flex-1 overflow-y-auto pb-20" id="detailGoalsList">
                    ${goalsData.map(g => `
                        <div class="bg-white rounded-2xl p-4 shadow-sm flex items-center gap-4 transition-all ${g.completed ? 'opacity-60 grayscale' : ''}">
                            <button class="toggle-goal w-8 h-8 rounded-full border-2 ${g.completed ? 'bg-blue-500 border-blue-500' : 'border-gray-200'} flex items-center justify-center" data-id="${g.id}">
                                ${g.completed ? '<svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>' : ''}
                            </button>
                            <div class="flex-1">
                                <div class="font-bold text-gray-800 ${g.completed ? 'line-through text-gray-400' : ''}">${g.text}</div>
                                <div class="text-xs text-gray-400">Daily Goal</div>
                            </div>
                            <button class="delete-goal text-gray-300 hover:text-red-400 p-2" data-id="${g.id}">
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
                            </button>
                        </div>
                    `).join('')}
                    
                    ${goalsData.length === 0 ? `
                        <div class="text-center text-gray-400 mt-10">
                            No goals set. Tap + to add one!
                        </div>
                    ` : ''}
                </div>

                <!-- Add Goal Input (Hidden by default, shown on click) -->
                <div id="newGoalPanel" class="hidden absolute bottom-0 left-0 w-full bg-white p-6 rounded-t-3xl shadow-[0_-10px_40px_rgba(0,0,0,0.1)] z-50">
                    <h3 class="font-bold text-gray-800 mb-4">New Goal</h3>
                    <input type="text" id="newGoalInput" placeholder="e.g. Meditate for 10 mins" class="w-full bg-gray-50 border-none rounded-xl p-4 text-gray-800 font-medium focus:ring-2 focus:ring-blue-200 mb-4 outline-none">
                    <div class="flex gap-3">
                         <button id="cancelAdd" class="flex-1 py-4 rounded-xl bg-gray-100 text-gray-500 font-bold">Cancel</button>
                         <button id="saveGoal" class="flex-1 py-4 rounded-xl bg-blue-500 text-white font-bold shadow-lg shadow-blue-200">Save Goal</button>
                    </div>
                </div>
            </div>
        `;
    }

    attachEvents() {
        this.container.querySelector('#backBtn').addEventListener('click', () => this.app.back());

        // Toggle Done
        this.container.querySelectorAll('.toggle-goal').forEach(btn => {
            btn.addEventListener('click', () => {
                const id = btn.dataset.id;
                const goals = JSON.parse(localStorage.getItem('hydroflux_goals') || '[]');
                const goal = goals.find(g => g.id === id);
                if (goal) {
                    goal.completed = !goal.completed;
                    localStorage.setItem('hydroflux_goals', JSON.stringify(goals));
                    this.render();
                    this.attachEvents();
                }
            });
        });

        // Delete
        this.container.querySelectorAll('.delete-goal').forEach(btn => {
            btn.addEventListener('click', () => {
                const id = btn.dataset.id;
                let goals = JSON.parse(localStorage.getItem('hydroflux_goals') || '[]');
                goals = goals.filter(g => g.id !== id);
                localStorage.setItem('hydroflux_goals', JSON.stringify(goals));
                this.render();
                this.attachEvents();
            });
        });


        // Add Panel Logic
        const panel = this.container.querySelector('#newGoalPanel');
        this.container.querySelector('#addGoalProto').addEventListener('click', () => {
            panel.classList.remove('hidden');
            this.container.querySelector('#newGoalInput').focus();
        });

        this.container.querySelector('#cancelAdd').addEventListener('click', () => {
            panel.classList.add('hidden');
        });

        this.container.querySelector('#saveGoal').addEventListener('click', () => {
            const input = this.container.querySelector('#newGoalInput');
            const text = input.value.trim();
            if (text) {
                const goals = JSON.parse(localStorage.getItem('hydroflux_goals') || '[]');
                goals.push({
                    id: Date.now().toString(),
                    text: text,
                    completed: false
                });
                localStorage.setItem('hydroflux_goals', JSON.stringify(goals));
                this.render();
                this.attachEvents();
            }
        });
    }
}
