script.js

class TodoApp {
    constructor() {
        this.tasks = this.loadTasks();
        this.taskCounter = this.getNextTaskId();
        this.settings = this.loadSettings();
        this.initializeEventListeners();
        this.renderTasks();
    }

    // Initialize all event listeners
    initializeEventListeners() {
        const taskInput = document.getElementById('taskInput');
        const addTaskBtn = document.getElementById('addTaskBtn');
        const settingsBtn = document.getElementById('settingsBtn');
        const closeSettingsBtn = document.getElementById('closeSettingsBtn');
        const saveSettingsBtn = document.getElementById('saveSettingsBtn');
        const testConnectionBtn = document.getElementById('testConnectionBtn');
        const settingsModal = document.getElementById('settingsModal');

        // Add task button click
        addTaskBtn.addEventListener('click', () => this.addMainTask());
        
        // Enter key in task input
        taskInput.addEventListener('keypress', (e) => {
            if (e.key === 'Enter') {
                this.addMainTask();
            }
        });

        // Settings modal
        settingsBtn.addEventListener('click', () => this.showSettings());
        closeSettingsBtn.addEventListener('click', () => this.hideSettings());
        settingsModal.addEventListener('click', (e) => {
            if (e.target === settingsModal) {
                this.hideSettings();
            }
        });

        // Settings actions
        saveSettingsBtn.addEventListener('click', () => this.saveSettings());
        testConnectionBtn.addEventListener('click', () => this.testConnection());

        // Escape key to close modal
        document.addEventListener('keydown', (e) => {
            if (e.key === 'Escape' && settingsModal.classList.contains('show')) {
                this.hideSettings();
            }
        });
    }

    // Load tasks from localStorage
    loadTasks() {
        try {
            const savedTasks = localStorage.getItem('todoAppTasks');
            return savedTasks ? JSON.parse(savedTasks) : [];
        } catch (error) {
            console.error('Error loading tasks:', error);
            return [];
        }
    }

    // Load settings from localStorage
    loadSettings() {
        try {
            const savedSettings = localStorage.getItem('todoAppSettings');
            return savedSettings ? JSON.parse(savedSettings) : {
                apiEndpoint: '',
                apiKey: '',
                deploymentName: ''
            };
        } catch (error) {
            console.error('Error loading settings:', error);
            return {
                apiEndpoint: '',
                apiKey: '',
                deploymentName: ''
            };
        }
    }

    // Save tasks to localStorage
    saveTasks() {
        try {
            localStorage.setItem('todoAppTasks', JSON.stringify(this.tasks));
        } catch (error) {
            console.error('Error saving tasks:', error);
        }
    }

    // Save settings to localStorage
    saveSettingsData() {
        try {
            localStorage.setItem('todoAppSettings', JSON.stringify(this.settings));
        } catch (error) {
            console.error('Error saving settings:', error);
        }
    }

    // Get next available task ID
    getNextTaskId() {
        const maxId = this.tasks.reduce((max, task) => {
            const taskMaxId = Math.max(max, task.id);
            const subtaskMaxId = task.subtasks ? 
                task.subtasks.reduce((subMax, subtask) => Math.max(subMax, subtask.id), 0) : 0;
            return Math.max(taskMaxId, subtaskMaxId);
        }, 0);
        return maxId + 1;
    }

    // Add a new main task
    addMainTask() {
        const taskInput = document.getElementById('taskInput');
        const title = taskInput.value.trim();
        
        if (!title) {
            taskInput.focus();
            return;
        }

        const newTask = {
            id: this.taskCounter++,
            title: title,
            completed: false,
            subtasks: []
        };

        this.tasks.push(newTask);
        taskInput.value = '';
        this.saveTasks();
        this.renderTasks();
        taskInput.focus();
    }

    // Add a subtask to a main task
    addSubtask(taskId, title) {
        const task = this.tasks.find(t => t.id === taskId);
        if (!task || !title.trim()) return;

        const newSubtask = {
            id: this.taskCounter++,
            title: title.trim(),
            completed: false
        };

        task.subtasks.push(newSubtask);
        this.saveTasks();
        this.renderTasks();
    }

    // Toggle task completion status
    toggleTaskCompletion(taskId) {
        const task = this.tasks.find(t => t.id === taskId);
        if (task) {
            task.completed = !task.completed;
            this.saveTasks();
            this.renderTasks();
        }
    }

    // Toggle subtask completion status
    toggleSubtaskCompletion(taskId, subtaskId) {
        const task = this.tasks.find(t => t.id === taskId);
        if (task) {
            const subtask = task.subtasks.find(st => st.id === subtaskId);
            if (subtask) {
                subtask.completed = !subtask.completed;
                this.saveTasks();
                this.renderTasks();
            }
        }
    }

    // Update task title
    updateTaskTitle(taskId, newTitle) {
        const task = this.tasks.find(t => t.id === taskId);
        if (task && newTitle.trim()) {
            task.title = newTitle.trim();
            this.saveTasks();
        }
    }

    // Update subtask title
    updateSubtaskTitle(taskId, subtaskId, newTitle) {
        const task = this.tasks.find(t => t.id === taskId);
        if (task && newTitle.trim()) {
            const subtask = task.subtasks.find(st => st.id === subtaskId);
            if (subtask) {
                subtask.title = newTitle.trim();
                this.saveTasks();
            }
        }
    }

    // Delete a main task
    deleteTask(taskId) {
        this.tasks = this.tasks.filter(t => t.id !== taskId);
        this.saveTasks();
        this.renderTasks();
    }

    // Delete a subtask
    deleteSubtask(taskId, subtaskId) {
        const task = this.tasks.find(t => t.id === taskId);
        if (task) {
            task.subtasks = task.subtasks.filter(st => st.id !== subtaskId);
            this.saveTasks();
            this.renderTasks();
        }
    }

    // Settings management
    showSettings() {
        const modal = document.getElementById('settingsModal');
        const apiEndpoint = document.getElementById('apiEndpoint');
        const apiKey = document.getElementById('apiKey');
        const deploymentName = document.getElementById('deploymentName');
        
        // Populate current settings
        apiEndpoint.value = this.settings.apiEndpoint || '';
        apiKey.value = this.settings.apiKey || '';
        deploymentName.value = this.settings.deploymentName || '';
        
        modal.classList.add('show');
    }

    hideSettings() {
        const modal = document.getElementById('settingsModal');
        const status = document.getElementById('connectionStatus');
        modal.classList.remove('show');
        status.style.display = 'none';
    }

    saveSettings() {
        const apiEndpoint = document.getElementById('apiEndpoint').value.trim();
        const apiKey = document.getElementById('apiKey').value.trim();
        const deploymentName = document.getElementById('deploymentName').value.trim();
        
        if (!apiEndpoint || !apiKey || !deploymentName) {
            this.showConnectionStatus('Please fill in all fields', 'error');
            return;
        }

        this.settings = {
            apiEndpoint: apiEndpoint,
            apiKey: apiKey,
            deploymentName: deploymentName
        };

        this.saveSettingsData();
        this.showConnectionStatus('Settings saved successfully!', 'success');
    }

    async testConnection() {
        const apiEndpoint = document.getElementById('apiEndpoint').value.trim();
        const apiKey = document.getElementById('apiKey').value.trim();
        const deploymentName = document.getElementById('deploymentName').value.trim();
        
        if (!apiEndpoint || !apiKey || !deploymentName) {
            this.showConnectionStatus('Please fill in all fields first', 'error');
            return;
        }

        const testBtn = document.getElementById('testConnectionBtn');
        testBtn.disabled = true;
        testBtn.textContent = '🔄 Testing...';

        try {
            const response = await this.callAzureAI('Test connection', apiEndpoint, apiKey, deploymentName);
            if (response) {
                this.showConnectionStatus('✅ Connection successful!', 'success');
            } else {
                this.showConnectionStatus('❌ Connection failed. Please check your settings.', 'error');
            }
        } catch (error) {
            this.showConnectionStatus(`❌ Connection failed: ${error.message}`, 'error');
        } finally {
            testBtn.disabled = false;
            testBtn.textContent = '🔗 Test Connection';
        }
    }

    showConnectionStatus(message, type) {
        const status = document.getElementById('connectionStatus');
        status.textContent = message;
        status.className = `connection-status ${type}`;
        status.style.display = 'block';
    }

    // AI Integration
    async planForMe(taskId) {
        const task = this.tasks.find(t => t.id === taskId);
        if (!task) return;

        if (!this.settings.apiEndpoint || !this.settings.apiKey || !this.settings.deploymentName) {
            alert('Please configure your AI settings first by clicking the Settings button.');
            this.showSettings();
            return;
        }

        this.showLoading();
        
        try {
            const subtasks = await this.callAzureAI(task.title, this.settings.apiEndpoint, this.settings.apiKey, this.settings.deploymentName);
            if (subtasks && subtasks.length > 0) {
                // Add the AI-generated subtasks
                subtasks.forEach(subtaskTitle => {
                    if (subtaskTitle.trim()) {
                        const newSubtask = {
                            id: this.taskCounter++,
                            title: subtaskTitle.trim(),
                            completed: false
                        };
                        task.subtasks.push(newSubtask);
                    }
                });
                
                this.saveTasks();
                this.renderTasks();
            }
        } catch (error) {
            console.error('Error calling AI:', error);
            alert('Failed to generate subtasks. Please check your AI settings and try again.');
        } finally {
            this.hideLoading();
        }
    }

    async callAzureAI(taskTitle, endpoint, apiKey, deploymentName) {
        const url = `${endpoint}/openai/deployments/${deploymentName}/chat/completions?api-version=2024-02-15-preview`;
        
        const prompt = `Break down this task into 3-7 actionable subtasks. Return only a JSON array of strings, no other text or formatting:

Task: "${taskTitle}"

Example response format: ["Subtask 1", "Subtask 2", "Subtask 3"]`;

        const response = await fetch(url, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'api-key': apiKey
            },
            body: JSON.stringify({
                messages: [
                    {
                        role: 'system',
                        content: 'You are a helpful assistant that breaks down tasks into smaller, actionable subtasks. Always respond with a valid JSON array of strings.'
                    },
                    {
                        role: 'user',
                        content: prompt
                    }
                ],
                max_tokens: 500,
                temperature: 0.7
            })
        });

        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }

        const data = await response.json();
        const content = data.choices[0]?.message?.content?.trim();
        
        if (!content) {
            throw new Error('No response from AI');
        }

        try {
            // Parse the JSON response
            const subtasks = JSON.parse(content);
            if (Array.isArray(subtasks)) {
                return subtasks.slice(0, 10); // Limit to 10 subtasks
            } else {
                throw new Error('Response is not an array');
            }
        } catch (parseError) {
            console.error('Failed to parse AI response:', content);
            // Fallback: try to extract lines as subtasks
            const lines = content.split('\n')
                .map(line => line.replace(/^\d+\.?\s*/, '').replace(/^[-*]\s*/, '').trim())
                .filter(line => line.length > 0)
                .slice(0, 10);
            return lines.length > 0 ? lines : null;
        }
    }

    showLoading() {
        document.getElementById('loadingOverlay').classList.add('show');
    }

    hideLoading() {
        document.getElementById('loadingOverlay').classList.remove('show');
    }

    // Render all tasks
    renderTasks() {
        const tasksContainer = document.getElementById('tasksContainer');
        const emptyState = document.getElementById('emptyState');

        if (this.tasks.length === 0) {
            tasksContainer.innerHTML = '';
            emptyState.classList.add('show');
            return;
        }

        emptyState.classList.remove('show');
        tasksContainer.innerHTML = this.tasks.map(task => this.renderTask(task)).join('');
        
        // Add event listeners after rendering
        this.addTaskEventListeners();
    }

    // Render a single task
    renderTask(task) {
        const subtasksHtml = task.subtasks.map(subtask => this.renderSubtask(task.id, subtask)).join('');
        
        return `
            <div class="task-item ${task.completed ? 'completed' : ''}">
                <div class="main-task">
                    <input type="checkbox" class="task-checkbox" 
                           ${task.completed ? 'checked' : ''} 
                           data-task-id="${task.id}">
                    <input type="text" class="task-title ${task.completed ? 'completed' : ''}" 
                           value="${this.escapeHtml(task.title)}" 
                           data-task-id="${task.id}"
                           maxlength="100">
                    <div class="task-actions">
                        <button class="plan-for-me-btn" data-task-id="${task.id}" title="Generate subtasks with AI">
                            🪄 PlanForMe
                        </button>
                        <button class="add-subtask-btn" data-task-id="${task.id}">+ Subtask</button>
                        <button class="delete-task-btn" data-task-id="${task.id}">×</button>
                    </div>
                </div>
                ${task.subtasks.length > 0 ? `
                    <div class="subtasks-container">
                        ${subtasksHtml}
                    </div>
                ` : ''}
            </div>
        `;
    }

    // Render a single subtask
    renderSubtask(taskId, subtask) {
        return `
            <div class="subtask-item">
                <input type="checkbox" class="subtask-checkbox" 
                       ${subtask.completed ? 'checked' : ''} 
                       data-task-id="${taskId}" data-subtask-id="${subtask.id}">
                <input type="text" class="subtask-title ${subtask.completed ? 'completed' : ''}" 
                       value="${this.escapeHtml(subtask.title)}" 
                       data-task-id="${taskId}" data-subtask-id="${subtask.id}"
                       maxlength="100">
                <button class="delete-subtask-btn" 
                        data-task-id="${taskId}" data-subtask-id="${subtask.id}">×</button>
            </div>
        `;
    }

    // Add event listeners to task elements
    addTaskEventListeners() {
        const tasksContainer = document.getElementById('tasksContainer');

        // Task checkboxes
        tasksContainer.addEventListener('change', (e) => {
            if (e.target.classList.contains('task-checkbox')) {
                const taskId = parseInt(e.target.dataset.taskId);
                this.toggleTaskCompletion(taskId);
            } else if (e.target.classList.contains('subtask-checkbox')) {
                const taskId = parseInt(e.target.dataset.taskId);
                const subtaskId = parseInt(e.target.dataset.subtaskId);
                this.toggleSubtaskCompletion(taskId, subtaskId);
            }
        });

        // Task title editing
        tasksContainer.addEventListener('blur', (e) => {
            if (e.target.classList.contains('task-title')) {
                const taskId = parseInt(e.target.dataset.taskId);
                this.updateTaskTitle(taskId, e.target.value);
            } else if (e.target.classList.contains('subtask-title')) {
                const taskId = parseInt(e.target.dataset.taskId);
                const subtaskId = parseInt(e.target.dataset.subtaskId);
                this.updateSubtaskTitle(taskId, subtaskId, e.target.value);
            }
        }, true);

        // Enter key for saving edits
        tasksContainer.addEventListener('keypress', (e) => {
            if (e.key === 'Enter') {
                e.target.blur();
            }
        });

        // Button clicks
        tasksContainer.addEventListener('click', (e) => {
            if (e.target.classList.contains('plan-for-me-btn')) {
                const taskId = parseInt(e.target.dataset.taskId);
                this.planForMe(taskId);
            } else if (e.target.classList.contains('add-subtask-btn')) {
                const taskId = parseInt(e.target.dataset.taskId);
                this.showSubtaskInput(taskId, e.target);
            } else if (e.target.classList.contains('delete-task-btn')) {
                const taskId = parseInt(e.target.dataset.taskId);
                if (confirm('Are you sure you want to delete this task and all its subtasks?')) {
                    this.deleteTask(taskId);
                }
            } else if (e.target.classList.contains('delete-subtask-btn')) {
                const taskId = parseInt(e.target.dataset.taskId);
                const subtaskId = parseInt(e.target.dataset.subtaskId);
                if (confirm('Are you sure you want to delete this subtask?')) {
                    this.deleteSubtask(taskId, subtaskId);
                }
            }
        });
    }

    // Show subtask input field
    showSubtaskInput(taskId, button) {
        // Check if input already exists
        if (button.parentNode.parentNode.querySelector('.add-subtask-input')) {
            return;
        }

        const input = document.createElement('input');
        input.type = 'text';
        input.className = 'add-subtask-input';
        input.placeholder = 'Enter subtask title...';
        input.maxLength = 100;

        const handleSubtaskAdd = () => {
            const title = input.value.trim();
            if (title) {
                this.addSubtask(taskId, title);
            } else {
                input.remove();
            }
        };

        input.addEventListener('keypress', (e) => {
            if (e.key === 'Enter') {
                handleSubtaskAdd();
            } else if (e.key === 'Escape') {
                input.remove();
            }
        });

        input.addEventListener('blur', handleSubtaskAdd);

        const taskItem = button.parentNode.parentNode.parentNode;
        taskItem.appendChild(input);
        input.focus();
    }

    // Escape HTML to prevent XSS
    escapeHtml(text) {
        const div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
    }
}

// Initialize the app when the DOM is loaded
document.addEventListener('DOMContentLoaded', () => {
    new TodoApp();
});

// Export for potential testing
if (typeof module !== 'undefined' && module.exports) {
    module.exports = TodoApp;
}