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.expandDescription = 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.archivedTasks = [];
        this.viewMode = 'active'; // 'active' or 'archive'
        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();
        await this.loadArchivedCount();
    }

    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);
        });

        // Context menu actions
        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.getElementById('context-archive').addEventListener('click', () => this.handleContextArchive());
        document.getElementById('context-restore').addEventListener('click', () => this.handleContextRestore());

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

        // View toggle
        document.getElementById('view-active').addEventListener('click', () => this.switchView('active'));
        document.getElementById('view-archive').addEventListener('click', () => this.switchView('archive'));
    }

    // ─── View Switching ───

    async switchView(mode) {
        if (this.viewMode === mode) return;
        this.viewMode = mode;

        document.getElementById('view-active').classList.toggle('active', mode === 'active');
        document.getElementById('view-archive').classList.toggle('active', mode === 'archive');

        // Show/hide elements based on view
        document.getElementById('overall-progress').classList.toggle('hidden', mode === 'archive');
        document.getElementById('open-modal').style.display = mode === 'archive' ? 'none' : '';

        if (mode === 'archive') {
            await this.loadArchivedTasks();
        } else {
            await this.loadTasks();
        }
    }

    // ─── Modal ───

    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 = '';
        document.getElementById('task-expand-desc').checked = false;
        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 || '';
        document.getElementById('task-expand-desc').checked = !!task.expandDescription;
        this.toggleModal(true);
    }

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

    // ─── Context Menu ───

    showContextMenu(e, target, type, parentTask = null) {
        e.preventDefault();
        e.stopPropagation();

        const contextMenu = document.getElementById('context-menu');
        const promoteOption = document.getElementById('context-promote');
        const archiveOption = document.getElementById('context-archive');
        const restoreOption = document.getElementById('context-restore');

        this.contextMenuTarget = target;
        this.contextMenuType = type;
        this.contextMenuParent = parentTask;

        // Show/hide context-specific options
        promoteOption.style.display = (type === 'subtask' && this.viewMode === 'active') ? 'flex' : 'none';

        const isCompleted = target.completed || target.calculateProgress() === 100;
        archiveOption.style.display = (type === 'task' && this.viewMode === 'active' && isCompleted) ? 'flex' : 'none';
        restoreOption.style.display = (type === 'task' && this.viewMode === 'archive') ? 'flex' : 'none';

        // Position using clientX/clientY for fixed menu, with viewport clamping
        let x = e.clientX;
        let y = e.clientY;

        contextMenu.style.left = '-9999px';
        contextMenu.style.top = '-9999px';
        contextMenu.classList.add('show');

        const menuWidth = contextMenu.offsetWidth;
        const menuHeight = contextMenu.offsetHeight;

        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;

        const label = this.contextMenuType === 'task' ? 'task' : 'subtask';
        if (!confirm(`Delete this ${label}?`)) {
            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;
        }

        const parentTask = this.getCurrentTasks().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 {
            await fetch(`${API_URL}/tasks/${parentTask.id}`, {
                method: 'PUT',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(parentTask)
            });

            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 handleContextArchive() {
        if (!this.contextMenuTarget || this.contextMenuType !== 'task') {
            this.hideContextMenu();
            return;
        }
        await this.archiveTask(this.contextMenuTarget.id);
        this.hideContextMenu();
    }

    async handleContextRestore() {
        if (!this.contextMenuTarget || this.contextMenuType !== 'task') {
            this.hideContextMenu();
            return;
        }
        await this.unarchiveTask(this.contextMenuTarget.id);
        this.hideContextMenu();
    }

    // ─── Form Submit ───

    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 expandDescription = document.getElementById('task-expand-desc').checked;
        const editId = document.getElementById('edit-task-id').value;
        const parentId = document.getElementById('edit-parent-id').value;

        const taskList = this.getCurrentTasks();

        if (editId) {
            if (parentId) {
                const parentTask = taskList.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;
                        subtask.expandDescription = expandDescription;
                        await this.updateTask(parentTask);
                    }
                }
            } else {
                const task = taskList.find(t => t.id === editId);
                if (task) {
                    task.title = title;
                    task.description = description;
                    task.size = size;
                    task.reward = reward;
                    task.expandDescription = expandDescription;
                    await this.updateTask(task);
                }
            }
        } else {
            try {
                const response = await fetch(`${API_URL}/tasks`, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ title, description, size, reward, expandDescription })
                });
                if (response.ok) await this.loadTasks();
            } catch (error) {
                console.error('Error creating task:', error);
            }
        }

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

    // ─── Data Loading ───

    getCurrentTasks() {
        return this.viewMode === 'archive' ? this.archivedTasks : this.tasks;
    }

    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;
                task.expandDescription = !!taskData.expandDescription;
                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;
                        subtask.expandDescription = !!stData.expandDescription;
                        return subtask;
                    });
                }
                return task;
            });

            this.updateOverallProgress();
            if (this.viewMode === 'active') this.render();
            this.loadArchivedCount();
        } catch (error) {
            console.error('Error loading tasks:', error);
            this.showError();
        }
    }

    async loadArchivedTasks() {
        try {
            const response = await fetch(`${API_URL}/tasks?archived=1`);
            const data = await response.json();

            this.archivedTasks = data.map(taskData => {
                const task = new Task(taskData.id, taskData.title, taskData.description, taskData.size, taskData.reward);
                task.completed = taskData.completed;
                task.expandDescription = !!taskData.expandDescription;
                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;
                        subtask.expandDescription = !!stData.expandDescription;
                        return subtask;
                    });
                }
                return task;
            });

            if (this.viewMode === 'archive') this.renderArchive();
            this.updateArchiveCount();
        } catch (error) {
            console.error('Error loading archived tasks:', error);
            this.showError();
        }
    }

    async loadArchivedCount() {
        try {
            const response = await fetch(`${API_URL}/tasks?archived=1`);
            const data = await response.json();
            this.archivedTasks = data.map(taskData => {
                const task = new Task(taskData.id, taskData.title, taskData.description, taskData.size, taskData.reward);
                task.completed = taskData.completed;
                return task;
            });
            this.updateArchiveCount();
        } catch (error) {
            // Silently fail — count is non-critical
        }
    }

    updateArchiveCount() {
        const badge = document.getElementById('archive-count');
        const count = this.archivedTasks.length;
        badge.textContent = count;
        badge.style.display = count > 0 ? 'inline-block' : 'none';
    }

    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 + '%';
    }

    // ─── Task Actions ───

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

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

        task.completed = !task.completed;
        if (task.subtasks.length > 0) {
            task.subtasks.forEach(st => st.completed = task.completed);
        }
        await this.updateTask(task);
    }

    async toggleSubtaskComplete(taskId, subtaskId) {
        const task = this.getCurrentTasks().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.getCurrentTasks().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) {
                if (this.viewMode === 'archive') await this.loadArchivedTasks();
                else await this.loadTasks();
            }
        } catch (error) {
            console.error('Error updating task:', error);
        }
    }

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

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

    // ─── Drag & Drop ───

    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) {
            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) {
            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;

        const currentIndex = this.draggedSubtaskIndex;
        const subtask = parentTask.subtasks[currentIndex];

        parentTask.subtasks.splice(currentIndex, 1);
        parentTask.subtasks.splice(targetIndex, 0, subtask);

        await this.updateTask(parentTask);
    }

    // ─── Render: Active Tasks ───

    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);

        // Drag events
        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.addEventListener('dblclick', (e) => {
            if (!e.target.closest('.subtask') && !e.target.closest('button')) {
                this.openEditModal(task);
            }
        });

        const descClass = task.expandDescription ? 'task-description expanded' : 'task-description';

        card.innerHTML = `
            <div class="task-header">
                <div class="task-title">${this.escapeHtml(task.title)}</div>
                <div class="task-meta">
                    <div class="task-size-badge ${task.size}">${task.size}</div>
                </div>
            </div>
            ${task.description ? `<div class="${descClass}">${this.escapeHtml(task.description)}</div>` : ''}
            <div class="progress-row">
                <div class="progress-bar">
                    <div class="progress-fill" style="width: ${progress}%"></div>
                </div>
                <div class="progress-text">${progress}%</div>
            </div>
            ${task.reward ? `
                <div class="reward-section">
                    <span>&#127873;</span>
                    ${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>
                ${isCompleted ? `<button class="btn-small btn-archive" onclick="app.archiveTask('${task.id}')">Archive</button>` : ''}
            </div>
        `;

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

        // 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);
            });
            div.addEventListener('dblclick', (e) => {
                e.stopPropagation();
                if (!e.target.closest('button')) {
                    this.openEditModal(subtask, task);
                }
            });

            const progress = subtask.calculateProgress();
            const stDescClass = subtask.expandDescription ? 'task-description expanded' : 'task-description';

            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="${stDescClass}">${this.escapeHtml(subtask.description)}</div>` : ''}
                <div class="subtask-progress-row">
                    <div class="subtask-progress">
                        <div class="subtask-progress-fill" style="width: ${progress}%"></div>
                    </div>
                    <div class="progress-text" style="font-size:0.75em;">${progress}%</div>
                </div>
                ${subtask.reward ? `
                    <div class="reward-section">
                        <span>&#127873;</span>
                        ${subtask.completed
                            ? `<span class="reward-revealed">${this.escapeHtml(subtask.reward)}</span>`
                            : `<span class="reward-hidden">Complete to reveal</span>`
                        }
                    </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));
        });
    }

    // ─── Render: Archive View ───

    renderArchivedTask(task) {
        const progress = task.calculateProgress();
        const isCompleted = progress === 100 || task.completed;

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

        card.addEventListener('contextmenu', (e) => {
            if (!e.target.closest('.subtask')) {
                this.showContextMenu(e, task, 'task');
            }
        });
        card.addEventListener('dblclick', (e) => {
            if (!e.target.closest('.subtask') && !e.target.closest('button')) {
                this.openEditModal(task);
            }
        });

        const descClass = task.expandDescription ? 'task-description expanded' : 'task-description';

        card.innerHTML = `
            <div class="task-header">
                <div class="task-title">${this.escapeHtml(task.title)}</div>
                <div class="task-meta">
                    <div class="task-size-badge ${task.size}">${task.size}</div>
                </div>
            </div>
            ${task.description ? `<div class="${descClass}">${this.escapeHtml(task.description)}</div>` : ''}
            <div class="progress-row">
                <div class="progress-bar">
                    <div class="progress-fill" style="width: ${progress}%"></div>
                </div>
                <div class="progress-text">${progress}%</div>
            </div>
            ${task.reward ? `
                <div class="reward-section">
                    <span>&#127873;</span>
                    ${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-restore" onclick="app.unarchiveTask('${task.id}')">Restore</button>
                <button class="btn-small btn-delete" onclick="if(confirm('Delete permanently?')) app.deleteTask('${task.id}')">Delete</button>
            </div>
        `;

        // Subtasks (read-only, no drag)
        if (task.subtasks.length > 0) {
            card.appendChild(this.renderArchivedSubtasks(task));
        }

        return card;
    }

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

        task.subtasks.forEach((subtask) => {
            const div = document.createElement('div');
            div.className = 'subtask';
            div.style.cursor = 'default';

            div.addEventListener('contextmenu', (e) => {
                e.stopPropagation();
                this.showContextMenu(e, subtask, 'subtask', task);
            });
            div.addEventListener('dblclick', (e) => {
                e.stopPropagation();
                if (!e.target.closest('button')) {
                    this.openEditModal(subtask, task);
                }
            });

            const progress = subtask.calculateProgress();
            const stDescClass = subtask.expandDescription ? 'task-description expanded' : 'task-description';

            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="${stDescClass}">${this.escapeHtml(subtask.description)}</div>` : ''}
                <div class="subtask-progress-row">
                    <div class="subtask-progress">
                        <div class="subtask-progress-fill" style="width: ${progress}%"></div>
                    </div>
                    <div class="progress-text" style="font-size:0.75em;">${progress}%</div>
                </div>
                ${subtask.reward ? `
                    <div class="reward-section">
                        <span>&#127873;</span>
                        ${subtask.completed
                            ? `<span class="reward-revealed">${this.escapeHtml(subtask.reward)}</span>`
                            : `<span class="reward-hidden">Complete to reveal</span>`
                        }
                    </div>
                ` : ''}
            `;

            container.appendChild(div);
        });

        return container;
    }

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

        if (this.archivedTasks.length === 0) {
            container.innerHTML = `
                <div class="empty-state">
                    <h2>Archive is empty</h2>
                    <p>Completed tasks you archive will appear here</p>
                </div>
            `;
            return;
        }

        this.archivedTasks.forEach(task => {
            container.appendChild(this.renderArchivedTask(task));
        });
    }

    // ─── Utility ───

    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();