const API_URL = '/api';

class Task {
    constructor(id, title, description, size, reward) {
        this.id = id;
        this.title = title;
        this.description = description;
        this.size = size;
        this.reward = reward;
        this.completed = false;
        this.subtasks = [];
    }

    getProgressWeight() {
        const weights = { small: 10, medium: 25, large: 50 };
        return weights[this.size] || 25;
    }

    calculateProgress() {
        if (this.subtasks.length === 0) {
            return this.completed ? 100 : 0;
        }

        const totalWeight = this.subtasks.reduce((sum, st) => sum + st.getProgressWeight(), 0);
        const completedWeight = this.subtasks.reduce((sum, st) => {
            return sum + (st.completed ? st.getProgressWeight() : 0);
        }, 0);

        return totalWeight > 0 ? Math.round((completedWeight / totalWeight) * 100) : 0;
    }
}

class App {
    constructor() {
        this.tasks = [];
        this.draggedTask = null;
        this.draggedSubtask = null;
        this.draggedParent = null;
        this.draggedSubtaskIndex = null;
        this.dropZoneTimer = null;
        this.contextMenuTarget = null;
        this.contextMenuType = null;
        this.contextMenuParent = null;
        this.init();
    }

    async init() {
        this.setupEventListeners();
        await this.loadTasks();
    }

    setupEventListeners() {
        const form = document.getElementById('task-form');
        const openModal = document.getElementById('open-modal');
        const closeModal = document.getElementById('close-modal');
        const modal = document.getElementById('modal');
        const contextMenu = document.getElementById('context-menu');

        form.addEventListener('submit', (e) => this.handleSubmit(e));
        openModal.addEventListener('click', () => this.openCreateModal());
        closeModal.addEventListener('click', () => this.toggleModal(false));
        
        modal.addEventListener('click', (e) => {
            if (e.target === modal) this.toggleModal(false);
        });

        document.getElementById('context-edit').addEventListener('click', () => this.handleContextEdit());
        document.getElementById('context-delete').addEventListener('click', () => this.handleContextDelete());
        document.getElementById('context-promote').addEventListener('click', () => this.handleContextPromote());

        document.addEventListener('click', () => this.hideContextMenu());
        contextMenu.addEventListener('click', (e) => e.stopPropagation());
    }

    openCreateModal() {
        document.getElementById('modal-title').textContent = 'Create New Goal';
        document.getElementById('submit-btn').textContent = 'Add Goal';
        document.getElementById('task-form').reset();
        document.getElementById('edit-task-id').value = '';
        document.getElementById('edit-parent-id').value = '';
        this.toggleModal(true);
    }

    openEditModal(task, parentTask = null) {
        document.getElementById('modal-title').textContent = parentTask ? 'Edit Subtask' : 'Edit Goal';
        document.getElementById('submit-btn').textContent = 'Update';
        document.getElementById('edit-task-id').value = task.id;
        document.getElementById('edit-parent-id').value = parentTask ? parentTask.id : '';
        document.getElementById('task-title').value = task.title;
        document.getElementById('task-description').value = task.description || '';
        document.getElementById('task-size').value = task.size;
        document.getElementById('task-reward').value = task.reward || '';
        
        this.toggleModal(true);
    }

    toggleModal(open) {
        const modal = document.getElementById('modal');
        if (open) {
            modal.classList.add('open');
        } else {
            modal.classList.remove('open');
        }
    }

    showContextMenu(e, target, type, parentTask = null) {
        e.preventDefault();
        e.stopPropagation();
        
        const contextMenu = document.getElementById('context-menu');
        const promoteOption = document.getElementById('context-promote');
        
        this.contextMenuTarget = target;
        this.contextMenuType = type;
        this.contextMenuParent = parentTask;
        
        // Show "Promote to Task" only for subtasks
        if (type === 'subtask') {
            promoteOption.style.display = 'block';
        } else {
            promoteOption.style.display = 'none';
        }
        
        // Use clientX/clientY for fixed positioning (viewport-relative)
        let x = e.clientX;
        let y = e.clientY;
        
        // Temporarily show offscreen to measure dimensions
        contextMenu.style.left = '-9999px';
        contextMenu.style.top = '-9999px';
        contextMenu.classList.add('show');
        
        const menuWidth = contextMenu.offsetWidth;
        const menuHeight = contextMenu.offsetHeight;
        
        // Clamp to viewport boundaries
        if (x + menuWidth > window.innerWidth) {
            x = window.innerWidth - menuWidth - 5;
        }
        if (y + menuHeight > window.innerHeight) {
            y = window.innerHeight - menuHeight - 5;
        }
        if (x < 0) x = 5;
        if (y < 0) y = 5;
        
        contextMenu.style.left = x + 'px';
        contextMenu.style.top = y + 'px';
    }

    hideContextMenu() {
        document.getElementById('context-menu').classList.remove('show');
    }

    handleContextEdit() {
        if (this.contextMenuTarget) {
            this.openEditModal(this.contextMenuTarget, this.contextMenuParent);
        }
        this.hideContextMenu();
    }

    async handleContextDelete() {
        if (!this.contextMenuTarget) return;

        if (!confirm('Delete this ' + (this.contextMenuType === 'task' ? 'task' : 'subtask') + '?')) {
            this.hideContextMenu();
            return;
        }

        if (this.contextMenuType === 'task') {
            await this.deleteTask(this.contextMenuTarget.id);
        } else if (this.contextMenuType === 'subtask' && this.contextMenuParent) {
            await this.deleteSubtask(this.contextMenuParent.id, this.contextMenuTarget.id);
        }
        
        this.hideContextMenu();
    }

    async handleContextPromote() {
        if (!this.contextMenuTarget || this.contextMenuType !== 'subtask' || !this.contextMenuParent) {
            this.hideContextMenu();
            return;
        }

        // Remove from parent's subtasks
        const parentTask = this.tasks.find(t => t.id === this.contextMenuParent.id);
        if (!parentTask) {
            this.hideContextMenu();
            return;
        }

        const subtask = this.contextMenuTarget;
        parentTask.subtasks = parentTask.subtasks.filter(st => st.id !== subtask.id);

        try {
            // Update parent task
            await fetch(`${API_URL}/tasks/${parentTask.id}`, {
                method: 'PUT',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(parentTask)
            });

            // Create new top-level task
            await fetch(`${API_URL}/tasks`, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                    title: subtask.title,
                    description: subtask.description,
                    size: subtask.size,
                    reward: subtask.reward
                })
            });

            await this.loadTasks();
        } catch (error) {
            console.error('Error promoting subtask:', error);
        }

        this.hideContextMenu();
    }

    async handleSubmit(e) {
        e.preventDefault();

        const title = document.getElementById('task-title').value.trim();
        const description = document.getElementById('task-description').value.trim();
        const size = document.getElementById('task-size').value;
        const reward = document.getElementById('task-reward').value.trim();
        const editId = document.getElementById('edit-task-id').value;
        const parentId = document.getElementById('edit-parent-id').value;

        if (editId) {
            if (parentId) {
                // Editing a subtask
                const parentTask = this.tasks.find(t => t.id === parentId);
                if (parentTask) {
                    const subtask = parentTask.subtasks.find(st => st.id === editId);
                    if (subtask) {
                        subtask.title = title;
                        subtask.description = description;
                        subtask.size = size;
                        subtask.reward = reward;
                        await this.updateTask(parentTask);
                    }
                }
            } else {
                // Editing a main task
                const task = this.tasks.find(t => t.id === editId);
                if (task) {
                    task.title = title;
                    task.description = description;
                    task.size = size;
                    task.reward = reward;
                    await this.updateTask(task);
                }
            }
        } else {
            // Creating new task
            try {
                const response = await fetch(`${API_URL}/tasks`, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ title, description, size, reward })
                });

                if (response.ok) await this.loadTasks();
            } catch (error) {
                console.error('Error creating task:', error);
            }
        }

        e.target.reset();
        this.toggleModal(false);
    }

    async loadTasks() {
        try {
            const response = await fetch(`${API_URL}/tasks`);
            const data = await response.json();
            
            this.tasks = data.map(taskData => {
                const task = new Task(taskData.id, taskData.title, taskData.description, taskData.size, taskData.reward);
                task.completed = taskData.completed;
                
                if (taskData.subtasks && Array.isArray(taskData.subtasks)) {
                    task.subtasks = taskData.subtasks.map(stData => {
                        const subtask = new Task(stData.id, stData.title, stData.description, stData.size, stData.reward);
                        subtask.completed = stData.completed;
                        return subtask;
                    });
                }
                
                return task;
            });

            this.updateOverallProgress();
            this.render();
        } catch (error) {
            console.error('Error loading tasks:', error);
            this.showError();
        }
    }

    updateOverallProgress() {
        const totalTasks = this.tasks.length;
        const completedTasks = this.tasks.filter(t => t.calculateProgress() === 100).length;

        document.getElementById('completed-count').textContent = completedTasks;
        document.getElementById('total-count').textContent = totalTasks;

        if (totalTasks === 0) {
            document.getElementById('overall-percentage').textContent = '0%';
            document.getElementById('overall-progress-fill').style.width = '0%';
            return;
        }

        const totalWeight = this.tasks.reduce((sum, t) => sum + t.getProgressWeight(), 0);
        const completedWeight = this.tasks.reduce((sum, t) => {
            const progress = t.calculateProgress();
            return sum + (t.getProgressWeight() * progress / 100);
        }, 0);

        const overallProgress = totalWeight > 0 ? Math.round((completedWeight / totalWeight) * 100) : 0;

        document.getElementById('overall-percentage').textContent = overallProgress + '%';
        document.getElementById('overall-progress-fill').style.width = overallProgress + '%';
    }

    async deleteTask(taskId) {
        try {
            const response = await fetch(`${API_URL}/tasks/${taskId}`, { method: 'DELETE' });
            if (response.ok) await this.loadTasks();
        } catch (error) {
            console.error('Error deleting task:', error);
        }
    }

    async toggleTaskComplete(taskId) {
        const task = this.tasks.find(t => t.id === taskId);
        if (!task) return;

        task.completed = !task.completed;
        
        // When completing or uncompleting a task, also update all subtasks
        if (task.subtasks.length > 0) {
            task.subtasks.forEach(st => st.completed = task.completed);
        }
        
        await this.updateTask(task);
    }

    async toggleSubtaskComplete(taskId, subtaskId) {
        const task = this.tasks.find(t => t.id === taskId);
        if (!task) return;

        const subtask = task.subtasks.find(st => st.id === subtaskId);
        if (!subtask) return;

        subtask.completed = !subtask.completed;
        await this.updateTask(task);
    }

    async deleteSubtask(taskId, subtaskId) {
        const task = this.tasks.find(t => t.id === taskId);
        if (!task) return;

        task.subtasks = task.subtasks.filter(st => st.id !== subtaskId);
        await this.updateTask(task);
    }

    async updateTask(task) {
        try {
            const response = await fetch(`${API_URL}/tasks/${task.id}`, {
                method: 'PUT',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(task)
            });
            if (response.ok) await this.loadTasks();
        } catch (error) {
            console.error('Error updating task:', error);
        }
    }

    handleDragStart(e, item, isSubtask = false, parentTask = null, index = null) {
        if (isSubtask) {
            this.draggedSubtask = item;
            this.draggedParent = parentTask;
            this.draggedSubtaskIndex = index;
            this.draggedTask = null;
        } else {
            this.draggedTask = item;
            this.draggedSubtask = null;
            this.draggedParent = null;
            this.draggedSubtaskIndex = null;
        }
        e.currentTarget.classList.add('dragging');
    }

    handleDragEnd(e) {
        e.currentTarget.classList.remove('dragging');
        document.querySelectorAll('.drag-over').forEach(el => el.classList.remove('drag-over'));
        document.querySelectorAll('.drop-zone').forEach(el => el.classList.remove('visible'));
        
        if (this.dropZoneTimer) {
            clearTimeout(this.dropZoneTimer);
            this.dropZoneTimer = null;
        }
        
        this.draggedTask = null;
        this.draggedSubtask = null;
        this.draggedParent = null;
        this.draggedSubtaskIndex = null;
    }

    handleCardDragOver(e) {
        e.preventDefault();
        e.stopPropagation();
        e.currentTarget.classList.add('drag-over');
    }

    handleDragLeave(e) {
        e.currentTarget.classList.remove('drag-over');
    }

    handleDragEnter(e, taskId) {
        e.preventDefault();
        
        if (!this.draggedTask && !this.draggedSubtask) return;
        
        if (this.dropZoneTimer) clearTimeout(this.dropZoneTimer);

        this.dropZoneTimer = setTimeout(() => {
            const dropZone = document.querySelector(`[data-task-id="${taskId}"] .drop-zone`);
            if (dropZone && (this.draggedTask || this.draggedSubtask)) {
                dropZone.classList.add('visible');
            }
        }, 1000);
    }

    async handleDrop(e, targetTask) {
        e.preventDefault();
        e.stopPropagation();
        e.currentTarget.classList.remove('drag-over');

        if (this.draggedTask && this.draggedTask.id !== targetTask.id) {
            // Move task as subtask
            targetTask.subtasks.push(this.draggedTask);
            try {
                await fetch(`${API_URL}/tasks/${this.draggedTask.id}`, { method: 'DELETE' });
                await this.updateTask(targetTask);
            } catch (error) {
                console.error('Error moving task:', error);
            }
        } else if (this.draggedSubtask && this.draggedParent && targetTask.id !== this.draggedParent.id) {
            // Move subtask between different parent tasks
            this.draggedParent.subtasks = this.draggedParent.subtasks.filter(st => st.id !== this.draggedSubtask.id);
            targetTask.subtasks.push(this.draggedSubtask);
            try {
                await this.updateTask(this.draggedParent);
                await this.updateTask(targetTask);
            } catch (error) {
                console.error('Error moving subtask:', error);
            }
        }
    }

    async handleTaskReorder(e, targetIndex) {
        e.preventDefault();
        e.stopPropagation();
        e.currentTarget.classList.remove('drag-over');

        if (!this.draggedTask) return;

        const currentIndex = this.tasks.findIndex(t => t.id === this.draggedTask.id);
        if (currentIndex === -1 || currentIndex === targetIndex) return;

        this.tasks.splice(currentIndex, 1);
        this.tasks.splice(targetIndex, 0, this.draggedTask);

        try {
            await fetch(`${API_URL}/tasks/reorder`, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(this.tasks.map(t => t.id))
            });
            this.render();
        } catch (error) {
            console.error('Error reordering:', error);
            await this.loadTasks();
        }
    }

    async handleSubtaskReorder(e, parentTask, targetIndex) {
        e.preventDefault();
        e.stopPropagation();
        e.currentTarget.classList.remove('drag-over');

        if (!this.draggedSubtask || !this.draggedParent) return;
        if (this.draggedParent.id !== parentTask.id) return;
        if (this.draggedSubtaskIndex === targetIndex) return;

        // Reorder within same parent
        const currentIndex = this.draggedSubtaskIndex;
        const subtask = parentTask.subtasks[currentIndex];
        
        parentTask.subtasks.splice(currentIndex, 1);
        parentTask.subtasks.splice(targetIndex, 0, subtask);

        await this.updateTask(parentTask);
    }

    renderTask(task, index) {
        const progress = task.calculateProgress();
        const isCompleted = progress === 100 || task.completed;

        const card = document.createElement('div');
        card.className = `task-card ${isCompleted ? 'completed' : ''}`;
        card.draggable = true;
        card.setAttribute('data-task-id', task.id);

        card.addEventListener('dragstart', (e) => this.handleDragStart(e, task, false));
        card.addEventListener('dragend', (e) => this.handleDragEnd(e));
        card.addEventListener('dragover', (e) => this.handleCardDragOver(e));
        card.addEventListener('dragleave', (e) => this.handleDragLeave(e));
        card.addEventListener('dragenter', (e) => this.handleDragEnter(e, task.id));
        card.addEventListener('drop', (e) => {
            if (e.target.closest('.drop-zone')) {
                this.handleDrop(e, task);
            } else if (this.draggedTask && this.draggedTask.id !== task.id) {
                this.handleTaskReorder(e, index);
            }
        });
        card.addEventListener('contextmenu', (e) => {
            if (!e.target.closest('.subtask')) {
                this.showContextMenu(e, task, 'task');
            }
        });

        card.innerHTML = `
            <div class="task-header">
                <div class="task-title">${this.escapeHtml(task.title)}</div>
                <div class="task-size-badge ${task.size}">${task.size}</div>
            </div>
            ${task.description ? `<div class="task-description">${this.escapeHtml(task.description)}</div>` : ''}
            <div class="progress-section">
                <div class="progress-label">
                    <span>Progress</span>
                    <span>${progress}%</span>
                </div>
                <div class="progress-bar">
                    <div class="progress-fill" style="width: ${progress}%">
                        ${progress > 15 ? progress + '%' : ''}
                    </div>
                </div>
            </div>
            ${task.reward ? `
                <div class="reward-section">
                    <strong>🎁 Reward:</strong>
                    ${isCompleted 
                        ? `<span class="reward-revealed">${this.escapeHtml(task.reward)}</span>`
                        : `<span class="reward-hidden">Complete to reveal</span>`
                    }
                </div>
            ` : ''}
            <div class="task-actions">
                <button class="btn-small btn-complete" onclick="app.toggleTaskComplete('${task.id}')">
                    ${task.completed ? 'Undo' : 'Complete'}
                </button>
            </div>
        `;

        // Append subtasks as DOM nodes to preserve event listeners
        if (task.subtasks.length > 0) {
            card.appendChild(this.renderSubtasks(task));
        }

        // Add drop zone
        const dropZone = document.createElement('div');
        dropZone.className = 'drop-zone';
        dropZone.textContent = 'Drop tasks here to add as subtasks';
        card.appendChild(dropZone);

        return card;
    }

    renderSubtasks(task) {
        const container = document.createElement('div');
        container.className = 'subtasks-container';

        task.subtasks.forEach((subtask, index) => {
            const div = document.createElement('div');
            div.className = 'subtask';
            div.draggable = true;
            div.setAttribute('data-subtask-id', subtask.id);

            div.addEventListener('dragstart', (e) => {
                e.stopPropagation();
                this.handleDragStart(e, subtask, true, task, index);
            });
            
            div.addEventListener('dragend', (e) => {
                e.stopPropagation();
                this.handleDragEnd(e);
            });
            
            div.addEventListener('dragover', (e) => { 
                e.preventDefault(); 
                e.stopPropagation();
                if (this.draggedSubtask && this.draggedParent && this.draggedParent.id === task.id) {
                    e.currentTarget.classList.add('drag-over');
                }
            });
            
            div.addEventListener('dragleave', (e) => {
                e.stopPropagation();
                e.currentTarget.classList.remove('drag-over');
            });
            
            div.addEventListener('drop', (e) => {
                e.stopPropagation();
                this.handleSubtaskReorder(e, task, index);
            });
            
            div.addEventListener('contextmenu', (e) => {
                e.stopPropagation();
                this.showContextMenu(e, subtask, 'subtask', task);
            });

            const progress = subtask.calculateProgress();

            div.innerHTML = `
                <div class="subtask-header">
                    <div class="subtask-title">${this.escapeHtml(subtask.title)}</div>
                    <div class="task-size-badge ${subtask.size}">${subtask.size}</div>
                </div>
                ${subtask.description ? `<div class="task-description">${this.escapeHtml(subtask.description)}</div>` : ''}
                <div class="subtask-progress">
                    <div class="subtask-progress-fill" style="width: ${progress}%"></div>
                </div>
                <div style="font-size: 0.85em; color: #a0aec0; margin-bottom: 8px;">${progress}%</div>
                ${subtask.reward && subtask.completed ? `
                    <div style="font-size: 0.9em; color: #68d391; margin-bottom: 8px;">
                        🎁 ${this.escapeHtml(subtask.reward)}
                    </div>
                ` : ''}
                <div class="subtask-actions">
                    <button class="btn-small btn-complete" onclick="event.stopPropagation(); app.toggleSubtaskComplete('${task.id}', '${subtask.id}')">
                        ${subtask.completed ? 'Undo' : 'Complete'}
                    </button>
                </div>
            `;

            container.appendChild(div);
        });

        return container;
    }

    render() {
        const container = document.getElementById('tasks-container');
        container.innerHTML = '';

        if (this.tasks.length === 0) {
            container.innerHTML = `
                <div class="empty-state">
                    <h2>No goals yet</h2>
                    <p>Click "+ New Goal" to get started</p>
                </div>
            `;
            return;
        }

        this.tasks.forEach((task, index) => {
            container.appendChild(this.renderTask(task, index));
        });
    }

    showError() {
        const container = document.getElementById('tasks-container');
        container.innerHTML = `
            <div class="empty-state">
                <h2>Connection Error</h2>
                <p>Cannot connect to server</p>
            </div>
        `;
    }

    escapeHtml(text) {
        const div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
    }
}

const app = new App();