script.js

let todos = [];
let todoIdCounter = 0;
let autoSaveEnabled = true;
let autoSaveInterval;
let journalEntries = [];

const templates = {
    daily: {
        name: "Daily Code Session",
        icon: "💻",
        fields: [
            "What did I code today?",
            "What languages/frameworks did I use?",
            "What problems did I solve?",
            "What new concepts did I learn?",
            "What challenged me the most?",
            "Code snippets or solutions to remember",
            "Tomorrow's coding goals"
        ]
    },
    project: {
        name: "Project Development Log",
        icon: "🚀",
        fields: [
            "Project name and current milestone",
            "Features implemented today",
            "Technical decisions made",
            "Architecture/design patterns used",
            "Challenges encountered and solutions",
            "Code quality improvements",
            "Next development priorities"
        ]
    },
    skill: {
        name: "Skill Building Session",
        icon: "⚡",
        fields: [
            "Skill/technology being learned",
            "Learning resources used",
            "Hands-on practice completed",
            "Key concepts understood",
            "Areas still confusing",
            "Practice projects or exercises",
            "Next learning steps"
        ]
    },
    debugging: {
        name: "Bug Hunt & Debug Log",
        icon: "🐛",
        fields: [
            "Bug description and symptoms",
            "Error messages encountered",
            "Debugging techniques used",
            "Root cause identified",
            "Solution implemented",
            "Prevention strategies for future",
            "Tools that helped most"
        ]
    },
    learning: {
        name: "New Tech Learning Log",
        icon: "📚",
        fields: [
            "Technology/framework being learned",
            "Why this tech was chosen",
            "Tutorial/course progress",
            "Hello world and first examples",
            "Comparison with familiar technologies",
            "Practical applications identified",
            "Learning roadmap and next steps"
        ]
    }
};

// Auto-save functionality
function toggleAutoSave() {
    autoSaveEnabled = !autoSaveEnabled;
    const toggle = document.getElementById('autoSaveToggle');
    const status = document.getElementById('autoSaveStatus');
    
    if (autoSaveEnabled) {
        toggle.classList.add('active');
        status.textContent = 'Auto-Save: ON';
        startAutoSave();
        showNotification('Auto-save enabled', 'success');
    } else {
        toggle.classList.remove('active');
        status.textContent = 'Auto-Save: OFF';
        stopAutoSave();
        showNotification('Auto-save disabled', 'info');
    }
}

function startAutoSave() {
    if (autoSaveInterval) clearInterval(autoSaveInterval);
    autoSaveInterval = setInterval(autoSave, 30000); // Auto-save every 30 seconds
}

function stopAutoSave() {
    if (autoSaveInterval) {
        clearInterval(autoSaveInterval);
        autoSaveInterval = null;
    }
}

function autoSave() {
    if (!autoSaveEnabled) return;
    
    const status = document.getElementById('autoSaveStatus');
    status.textContent = 'Saving...';
    status.classList.add('saving');
    
    const allData = {
        todos: todos,
        journalEntries: getAllEntries(),
        settings: {
            focus: document.getElementById('focus').value,
            language: document.getElementById('language').value,
            experience: document.getElementById('experience').value
        },
        lastSaved: new Date().toISOString(),
        version: '2.0'
    };
    
    localStorage.setItem('devjournal_data', JSON.stringify(allData));
    
    setTimeout(() => {
        status.textContent = 'Auto-Save: ON';
        status.classList.remove('saving');
        updateLastSavedTime();
    }, 1000);
}

function loadData() {
    try {
        const savedData = localStorage.getItem('devjournal_data');
        if (!savedData) return;

        const data = JSON.parse(savedData);
        
        // Load todos
        if (data.todos) {
            todos = data.todos;
            todoIdCounter = Math.max(...todos.map(t => t.id), 0) + 1;
        }
        
        // Load journal entries
        if (data.journalEntries) {
            journalEntries = data.journalEntries;
        }
        
        // Load settings
        if (data.settings) {
            document.getElementById('focus').value = data.settings.focus || 'daily';
            document.getElementById('language').value = data.settings.language || 'javascript';
            document.getElementById('experience').value = data.settings.experience || 'beginner';
        }
        
        renderTodos();
        updateProgress();
        updateTemplates();
        populateTemplatesWithData();
        updateLastSavedTime();
        updateDataInfo();
        
        showNotification('Data loaded successfully', 'success');
    } catch (error) {
        console.error('Error loading data:', error);
        showNotification('Error loading saved data', 'error');
    }
}

function populateTemplatesWithData() {
    if (journalEntries.length === 0) return;
    
    const cards = document.querySelectorAll('.template-card');
    cards.forEach(card => {
        const title = card.querySelector('h3').textContent.replace(/[💻🚀⚡🐛📚]/g, '').trim();
        const latestEntry = journalEntries
            .filter(entry => entry.template === title)
            .sort((a, b) => new Date(b.date) - new Date(a.date))[0];
        
        if (latestEntry && latestEntry.content) {
            const fields = card.querySelectorAll('.field');
            fields.forEach(field => {
                const label = field.querySelector('.field-label').textContent.replace('> ', '');
                const input = field.querySelector('.field-input');
                if (latestEntry.content[label]) {
                    input.value = latestEntry.content[label];
                }
            });
        }
    });
}

// Notification system
function showNotification(message, type = 'info') {
    const notification = document.getElementById('notification');
    notification.textContent = message;
    notification.className = `notification ${type}`;
    notification.classList.add('show');
    
    setTimeout(() => {
        notification.classList.remove('show');
    }, 3000);
}

function updateLastSavedTime() {
    const lastSaved = localStorage.getItem('devjournal_last_saved') || new Date().toISOString();
    const date = new Date(lastSaved);
    document.getElementById('lastSavedTime').textContent = date.toLocaleString();
    localStorage.setItem('devjournal_last_saved', new Date().toISOString());
}

function updateDataInfo() {
    const entryCount = journalEntries.length;
    const todoCount = todos.length;
    
    document.getElementById('entryCount').textContent = entryCount;
    document.getElementById('todoCount').textContent = todoCount;
}

// File import functionality
function handleFileImport(event) {
    const file = event.target.files[0];
    if (!file) return;
    
    const reader = new FileReader();
    reader.onload = function(e) {
        try {
            const data = JSON.parse(e.target.result);
            
            if (data.todos) {
                const existingTodos = todos.length;
                todos = [...todos, ...data.todos.map(todo => ({
                    ...todo,
                    id: todoIdCounter++
                }))];
                
                renderTodos();
                updateProgress();
                showNotification(`Imported ${data.todos.length} todos (${existingTodos} existing)`, 'success');
            }
        } catch (error) {
            showNotification('Invalid file format', 'error');
        }
    };
    reader.readAsText(file);
    event.target.value = '';
}

function handleFullDataImport(event) {
    const file = event.target.files[0];
    if (!file) return;
    
    const reader = new FileReader();
    reader.onload = function(e) {
        try {
            const data = JSON.parse(e.target.result);
            
            if (confirm('This will replace all your current data. Are you sure?')) {
                if (data.todos) {
                    todos = data.todos;
                    todoIdCounter = Math.max(...todos.map(t => t.id), 0) + 1;
                }
                
                if (data.journalEntries) {
                    journalEntries = data.journalEntries;
                }
                
                if (data.settings) {
                    document.getElementById('focus').value = data.settings.focus || 'daily';
                    document.getElementById('language').value = data.settings.language || 'javascript';
                    document.getElementById('experience').value = data.settings.experience || 'beginner';
                }
                
                renderTodos();
                updateProgress();
                updateTemplates();
                populateTemplatesWithData();
                updateDataInfo();
                autoSave();
                
                showNotification('Data imported successfully', 'success');
            }
        } catch (error) {
            showNotification('Invalid backup file format', 'error');
        }
    };
    reader.readAsText(file);
    event.target.value = '';
}

function mergeDataPrompt() {
    const input = document.createElement('input');
    input.type = 'file';
    input.accept = '.json';
    input.onchange = function(event) {
        const file = event.target.files[0];
        if (!file) return;
        
        const reader = new FileReader();
        reader.onload = function(e) {
            try {
                const data = JSON.parse(e.target.result);
                
                let merged = 0;
                
                if (data.todos) {
                    const newTodos = data.todos.filter(importTodo => 
                        !todos.some(existingTodo => existingTodo.text === importTodo.text)
                    );
                    
                    newTodos.forEach(todo => {
                        todos.push({ ...todo, id: todoIdCounter++ });
                    });
                    
                    merged += newTodos.length;
                }
                
                if (data.journalEntries) {
                    const newEntries = data.journalEntries.filter(importEntry => 
                        !journalEntries.some(existingEntry => 
                            existingEntry.date === importEntry.date && 
                            existingEntry.template === importEntry.template
                        )
                    );
                    
                    journalEntries = [...journalEntries, ...newEntries];
                    merged += newEntries.length;
                }
                
                renderTodos();
                updateProgress();
                updateDataInfo();
                autoSave();
                
                showNotification(`Merged ${merged} new items`, 'success');
            } catch (error) {
                showNotification('Invalid file format', 'error');
            }
        };
        reader.readAsText(file);
    };
    input.click();
}

function updateTemplates() {
    const focus = document.getElementById('focus').value;
    const language = document.getElementById('language').value;
    const experience = document.getElementById('experience').value;
    
    const templatesDiv = document.getElementById('templates');
    templatesDiv.innerHTML = '';
    
    // Get primary template
    const primaryTemplate = templates[focus];
    
    // Customize fields based on experience level
    let fields = [...primaryTemplate.fields];
    if (experience === 'beginner') {
        fields = fields.map(field => {
            if (field.includes('patterns')) return field.replace('patterns', 'approaches');
            if (field.includes('architecture')) return 'Basic structure and organization';
            return field;
        });
    }
    
    // Create template card
    const templateDiv = document.createElement('div');
    templateDiv.className = 'template-card';
    templateDiv.innerHTML = `
        <h3><span class="icon">${primaryTemplate.icon}</span>${primaryTemplate.name}</h3>
        <div class="template-content">
            ${fields.map(field => `
                <div class="field">
                    <div class="field-label">${field}</div>
                    <textarea class="field-input" placeholder="Share your coding insights..." oninput="scheduleAutoSave()"></textarea>
                </div>
            `).join('')}
            <button class="btn" onclick="saveEntry(this)">Save Entry</button>
        </div>
    `;
    templatesDiv.appendChild(templateDiv);
    
    // Add a second complementary template
    const complementaryTemplates = Object.values(templates).filter(t => t !== primaryTemplate);
    if (complementaryTemplates.length > 0) {
        const secondTemplate = complementaryTemplates[0];
        const secondDiv = document.createElement('div');
        secondDiv.className = 'template-card';
        secondDiv.innerHTML = `
            <h3><span class="icon">${secondTemplate.icon}</span>${secondTemplate.name}</h3>
            <div class="template-content">
                ${secondTemplate.fields.slice(0, 5).map(field => `
                    <div class="field">
                        <div class="field-label">${field}</div>
                        <textarea class="field-input" placeholder="Document your progress..." oninput="scheduleAutoSave()"></textarea>
                    </div>
                `).join('')}
                <button class="btn" onclick="saveEntry(this)">Save Entry</button>
            </div>
        `;
        templatesDiv.appendChild(secondDiv);
    }
    
    populateTemplatesWithData();
}

function scheduleAutoSave() {
    if (autoSaveEnabled) {
        clearTimeout(window.autoSaveTimeout);
        window.autoSaveTimeout = setTimeout(autoSave, 5000); // Save 5 seconds after typing stops
    }
}

function addTodo() {
    const input = document.getElementById('todoInput');
    const text = input.value.trim();
    
    if (text === '') return;
    
    const todo = {
        id: todoIdCounter++,
        text: text,
        completed: false,
        timestamp: new Date().toLocaleTimeString(),
        dateAdded: new Date().toISOString()
    };
    
    todos.push(todo);
    input.value = '';
    renderTodos();
    updateProgress();
    updateDataInfo();
    
    if (autoSaveEnabled) {
        scheduleAutoSave();
    }
}

function renderTodos() {
    const todoList = document.getElementById('todoList');
    todoList.innerHTML = '';
    
    todos.forEach(todo => {
        const li = document.createElement('li');
        li.className = `todo-item ${todo.completed ? 'completed' : ''}`;
        li.innerHTML = `
            <input type="checkbox" class="todo-checkbox" ${todo.completed ? 'checked' : ''} 
                   onchange="toggleTodo(${todo.id})">
            <span class="todo-text">${todo.text}</span>
            <button class="delete-btn" onclick="deleteTodo(${todo.id})">×</button>
        `;
        todoList.appendChild(li);
    });
}

function toggleTodo(id) {
    const todo = todos.find(t => t.id === id);
    if (todo) {
        todo.completed = !todo.completed;
        todo.completedDate = todo.completed ? new Date().toISOString() : null;
        renderTodos();
        updateProgress();
        
        if (autoSaveEnabled) {
            scheduleAutoSave();
        }
    }
}

function deleteTodo(id) {
    todos = todos.filter(t => t.id !== id);
    renderTodos();
    updateProgress();
    updateDataInfo();
    
    if (autoSaveEnabled) {
        scheduleAutoSave();
    }
}

function clearCompleted() {
    const completedCount = todos.filter(t => t.completed).length;
    todos = todos.filter(t => !t.completed);
    renderTodos();
    updateProgress();
    updateDataInfo();
    
    if (completedCount > 0) {
        showNotification(`Cleared ${completedCount} completed tasks`, 'success');
        if (autoSaveEnabled) {
            scheduleAutoSave();
        }
    }
}

function updateProgress() {
    const completed = todos.filter(t => t.completed).length;
    const total = todos.length;
    const percentage = total > 0 ? (completed / total) * 100 : 0;
    
    document.getElementById('progressFill').style.width = percentage + '%';
    document.getElementById('completedCount').textContent = `${completed} completed`;
    document.getElementById('totalCount').textContent = `${total} total`;
}

// Journal entry functions
function saveEntry(button) {
    const card = button.closest('.template-card');
    const inputs = card.querySelectorAll('.field-input');
    const title = card.querySelector('h3').textContent.replace(/[💻🚀⚡🐛📚]/g, '').trim();
    let hasContent = false;
    
    const entry = {
        template: title,
        date: new Date().toISOString(),
        content: {}
    };
    
    inputs.forEach(input => {
        const fieldLabel = input.parentNode.querySelector('.field-label').textContent.replace('> ', '');
        const value = input.value.trim();
        if (value) {
            hasContent = true;
            entry.content[fieldLabel] = value;
        }
    });
    
    if (hasContent) {
        // Update existing entry or add new one
        const existingIndex = journalEntries.findIndex(e => 
            e.template === entry.template && 
            new Date(e.date).toDateString() === new Date(entry.date).toDateString()
        );
        
        if (existingIndex >= 0) {
            journalEntries[existingIndex] = entry;
        } else {
            journalEntries.push(entry);
        }
        
        button.textContent = 'Entry Saved! ✓';
        button.style.background = 'linear-gradient(45deg, #00ff88, #00cc6a)';
        
        updateDataInfo();
        
        if (autoSaveEnabled) {
            scheduleAutoSave();
        }
        
        setTimeout(() => {
            button.textContent = 'Save Entry';
            button.style.background = 'linear-gradient(45deg, #00ff88, #00cc6a)';
        }, 2000);
    } else {
        button.textContent = 'Add some content first!';
        button.style.background = 'linear-gradient(45deg, #ff4757, #c0392b)';
        setTimeout(() => {
            button.textContent = 'Save Entry';
            button.style.background = 'linear-gradient(45deg, #00ff88, #00cc6a)';
        }, 2000);
    }
}

function getAllEntries() {
    return journalEntries;
}

function getTimestamp() {
    const now = new Date();
    const year = now.getFullYear();
    const month = String(now.getMonth() + 1).padStart(2, '0');
    const day = String(now.getDate()).padStart(2, '0');
    const hours = String(now.getHours()).padStart(2, '0');
    const minutes = String(now.getMinutes()).padStart(2, '0');
    
    return `${year}-${month}-${day}_${hours}-${minutes}`;
}

function exportAsText() {
    const entries = getAllEntries();
    if (entries.length === 0) {
        showNotification('No entries to export! Fill out some journal entries first.', 'error');
        return;
    }
    
    let content = `DEV JOURNAL EXPORT\n`;
    content += `Exported: ${new Date().toLocaleString()}\n`;
    content += `Total Entries: ${entries.length}\n`;
    content += `${'='.repeat(60)}\n\n`;
    
    entries.forEach((entry, index) => {
        content += `[${index + 1}] ${entry.template}\n`;
        content += `Date: ${new Date(entry.date).toLocaleString()}\n`;
        content += `${'-'.repeat(40)}\n`;
        
        Object.entries(entry.content).forEach(([question, answer]) => {
            content += `${question}\n${answer}\n\n`;
        });
        
        content += `${'='.repeat(60)}\n\n`;
    });
    
    const filename = `DevJournal_Export_${getTimestamp()}.txt`;
    downloadFile(content, filename, 'text/plain');
    showNotification('Text export downloaded!', 'success');
}

function exportAsJSON() {
    const entries = getAllEntries();
    
    const exportData = {
        exportDate: new Date().toISOString(),
        version: '2.0',
        journalEntries: entries,
        todos: todos,
        settings: {
            focus: document.getElementById('focus').value,
            language: document.getElementById('language').value,
            experience: document.getElementById('experience').value
        },
        stats: {
            totalEntries: entries.length,
            totalTodos: todos.length,
            completedTodos: todos.filter(t => t.completed).length
        }
    };
    
    const filename = `DevJournal_Backup_${getTimestamp()}.json`;
    downloadFile(JSON.stringify(exportData, null, 2), filename, 'application/json');
    showNotification('Full backup downloaded!', 'success');
}

function copyToClipboard() {
    const entries = getAllEntries();
    if (entries.length === 0) {
        showNotification('No entries to copy!', 'error');
        return;
    }
    
    let content = `DEV JOURNAL ENTRIES\n`;
    content += `Copied: ${new Date().toLocaleString()}\n\n`;
    
    entries.forEach((entry, index) => {
        content += `${entry.template} (${new Date(entry.date).toLocaleDateString()})\n`;
        Object.entries(entry.content).forEach(([question, answer]) => {
            content += `• ${question}: ${answer}\n`;
        });
        content += `\n`;
    });
    
    navigator.clipboard.writeText(content).then(() => {
        showNotification('Journal entries copied to clipboard!', 'success');
    }).catch(() => {
        showNotification('Could not copy to clipboard', 'error');
    });
}

function exportTodos() {
    if (todos.length === 0) {
        showNotification('No todos to export!', 'error');
        return;
    }
    
    let content = `DEV TODO LIST\n`;
    content += `Exported: ${new Date().toLocaleString()}\n`;
    content += `${'='.repeat(40)}\n\n`;
    
    const pending = todos.filter(t => !t.completed);
    const completed = todos.filter(t => t.completed);
    
    if (pending.length > 0) {
        content += `PENDING TASKS (${pending.length}):\n`;
        content += `${'-'.repeat(20)}\n`;
        pending.forEach((todo, i) => {
            content += `${i + 1}. [ ] ${todo.text}\n`;
            content += `    Added: ${new Date(todo.dateAdded).toLocaleString()}\n\n`;
        });
        content += `\n`;
    }
    
    if (completed.length > 0) {
        content += `COMPLETED TASKS (${completed.length}):\n`;
        content += `${'-'.repeat(20)}\n`;
        completed.forEach((todo, i) => {
            content += `${i + 1}. [✓] ${todo.text}\n`;
            content += `    Added: ${new Date(todo.dateAdded).toLocaleString()}\n`;
            content += `    Completed: ${new Date(todo.completedDate).toLocaleString()}\n\n`;
        });
    }
    
    const filename = `DevJournal_Todos_${getTimestamp()}.txt`;
    downloadFile(content, filename, 'text/plain');
    showNotification('Todo list exported!', 'success');
}

function downloadFile(content, filename, mimeType) {
    const blob = new Blob([content], { type: mimeType });
    const url = URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    link.download = filename;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    URL.revokeObjectURL(url);
}

// Event listeners
document.getElementById('todoInput').addEventListener('keypress', function(e) {
    if (e.key === 'Enter') {
        addTodo();
    }
});

// Listen for template input changes
document.addEventListener('input', function(e) {
    if (e.target.classList.contains('field-input')) {
        scheduleAutoSave();
    }
});

// Initialize
document.addEventListener('DOMContentLoaded', function() {
    loadData();
    updateTemplates();
    renderTodos();
    updateProgress();
    updateDataInfo();
    startAutoSave();
});

// Save data before page unload
window.addEventListener('beforeunload', function() {
    if (autoSaveEnabled) {
        autoSave();
    }
});