app.js

// Permalist Ultra - SQL.js Powered Todo App
class PermalistUltra {
    constructor() {
        this.db = null;
        this.currentPriority = 'low';
        this.currentFilter = 'all';
        this.init();
    }

    async init() {
        // Initialize SQL.js database
        await this.initDatabase();
        
        // Load todos from database
        await this.loadTodos();
        
        // Setup event listeners
        this.setupEventListeners();
        
        // Update stats
        this.updateStats();
        
        // Set initial theme
        this.setThemeFromPreference();
    }

    async initDatabase() {
        try {
            // Initialize SQL.js
            const SQL = await initSqlJs({
                locateFile: file => `./${file}`
            });
            
            // Create or open database
            this.db = new SQL.Database();
            
            // Create todos table if it doesn't exist
            this.db.run(`
                CREATE TABLE IF NOT EXISTS todos (
                    id INTEGER PRIMARY KEY AUTOINCREMENT,
                    title TEXT NOT NULL,
                    completed BOOLEAN DEFAULT 0,
                    priority TEXT DEFAULT 'low',
                    created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
                    completed_at DATETIME
                )
            `);
            
            console.log('SQL.js database initialized successfully');
        } catch (error) {
            console.error('Failed to initialize SQL.js:', error);
            this.showToast('Failed to initialize database. Using fallback storage.', 'error');
            
            // Fallback to localStorage
            this.useLocalStorageFallback();
        }
    }

    useLocalStorageFallback() {
        this.db = {
            run: (sql, params = []) => {
                console.log('Fallback: run', sql, params);
                return { changes: 0 };
            },
            exec: (sql, params = []) => {
                console.log('Fallback: exec', sql, params);
                return { columns: [], values: [] };
            },
            prepare: (sql, params = []) => ({
                getAsObject: () => ({}),
                bind: () => {},
                step: () => false,
                free: () => {}
            })
        };
        
        // Load from localStorage
        const storedTodos = localStorage.getItem('permalist_todos');
        if (storedTodos) {
            try {
                const todos = JSON.parse(storedTodos);
                todos.forEach(todo => {
                    const sql = `INSERT INTO todos (id, title, completed, priority, created_at) VALUES (?, ?, ?, ?, ?)`;
                    this.db.run(sql, [todo.id, todo.title, todo.completed ? 1 : 0, todo.priority, todo.created_at]);
                });
            } catch (e) {
                console.error('Failed to load from localStorage:', e);
            }
        }
    }

    async loadTodos() {
        try {
            const result = this.db.exec(`
                SELECT id, title, completed, priority, 
                       datetime(created_at) as created_at,
                       datetime(completed_at) as completed_at
                FROM todos 
                ORDER BY 
                    CASE priority 
                        WHEN 'critical' THEN 1
                        WHEN 'high' THEN 2
                        WHEN 'medium' THEN 3
                        WHEN 'low' THEN 4
                    END,
                    created_at DESC
            `);
            
            const todos = result.values ? result.values.map(row => ({
                id: row[0],
                title: row[1],
                completed: Boolean(row[2]),
                priority: row[3],
                created_at: row[4],
                completed_at: row[5]
            })) : [];
            
            this.renderTodos(todos);
        } catch (error) {
            console.error('Failed to load todos:', error);
        }
    }

    renderTodos(todos) {
        const todoList = document.getElementById('todo-list');
        const filteredTodos = this.filterTodos(todos);
        
        if (filteredTodos.length === 0) {
            todoList.innerHTML = `
                <div class="empty-state">
                    <i class="fas fa-clipboard-list"></i>
                    <h3>No missions found</h3>
                    <p>${this.currentFilter === 'all' ? 'Add your first mission to get started!' : 'No missions match your filter'}</p>
                </div>
            `;
            return;
        }
        
        todoList.innerHTML = filteredTodos.map(todo => `
            <div class="todo-item ${todo.completed ? 'completed' : ''}" data-id="${todo.id}">
                <div class="todo-checkbox ${todo.completed ? 'checked' : ''}" 
                     onclick="app.toggleTodo(${todo.id})"></div>
                <div class="todo-content">
                    <div class="todo-title">${this.escapeHtml(todo.title)}</div>
                    <div class="todo-meta">
                        <span class="priority-badge ${todo.priority}">${this.formatPriority(todo.priority)}</span>
                        <span class="todo-date">${this.formatDate(todo.created_at)}</span>
                    </div>
                </div>
                <div class="todo-actions">
                    <button class="todo-action-btn" onclick="app.editTodo(${todo.id})" title="Edit">
                        <i class="fas fa-edit"></i>
                    </button>
                    <button class="todo-action-btn" onclick="app.deleteTodo(${todo.id})" title="Delete">
                        <i class="fas fa-trash"></i>
                    </button>
                </div>
            </div>
        `).join('');
    }

    filterTodos(todos) {
        switch (this.currentFilter) {
            case 'active':
                return todos.filter(todo => !todo.completed);
            case 'completed':
                return todos.filter(todo => todo.completed);
            case 'high':
                return todos.filter(todo => todo.priority === 'high' || todo.priority === 'critical');
            default:
                return todos;
        }
    }

    async addTodo(title) {
        if (!title.trim()) {
            this.showToast('Please enter a mission title', 'warning');
            return;
        }
        
        try {
            const sql = `INSERT INTO todos (title, priority) VALUES (?, ?)`;
            this.db.run(sql, [title.trim(), this.currentPriority]);
            
            this.showToast('Mission added successfully!', 'success');
            document.getElementById('new-todo').value = '';
            await this.loadTodos();
            this.updateStats();
            this.triggerConfetti();
        } catch (error) {
            console.error('Failed to add todo:', error);
            this.showToast('Failed to add mission', 'error');
        }
    }

    async toggleTodo(id) {
        try {
            const todo = this.getTodoById(id);
            if (!todo) return;
            
            const completed = !todo.completed;
            const completed_at = completed ? new Date().toISOString() : null;
            
            const sql = `UPDATE todos SET completed = ?, completed_at = ? WHERE id = ?`;
            this.db.run(sql, [completed ? 1 : 0, completed_at, id]);
            
            if (completed) {
                this.showToast('Mission completed! 🎉', 'success');
                this.triggerConfetti();
            }
            
            await this.loadTodos();
            this.updateStats();
        } catch (error) {
            console.error('Failed to toggle todo:', error);
        }
    }

    async editTodo(id) {
        const todo = this.getTodoById(id);
        if (!todo) return;
        
        const newTitle = prompt('Edit mission:', todo.title);
        if (newTitle !== null && newTitle.trim() !== '') {
            try {
                const sql = `UPDATE todos SET title = ? WHERE id = ?`;
                this.db.run(sql, [newTitle.trim(), id]);
                
                this.showToast('Mission updated successfully!', 'success');
                await this.loadTodos();
            } catch (error) {
                console.error('Failed to edit todo:', error);
                this.showToast('Failed to update mission', 'error');
            }
        }
    }

    async deleteTodo(id) {
        if (!confirm('Are you sure you want to delete this mission?')) return;
        
        try {
            const sql = `DELETE FROM todos WHERE id = ?`;
            this.db.run(sql, [id]);
            
            this.showToast('Mission deleted successfully!', 'success');
            await this.loadTodos();
            this.updateStats();
        } catch (error) {
            console.error('Failed to delete todo:', error);
            this.showToast('Failed to delete mission', 'error');
        }
    }

    getTodoById(id) {
        try {
            const stmt = this.db.prepare(`SELECT * FROM todos WHERE id = ?`);
            stmt.bind([id]);
            const result = stmt.getAsObject();
            stmt.free();
            return result.id ? result : null;
        } catch (error) {
            console.error('Failed to get todo:', error);
            return null;
        }
    }

    updateStats() {
        try {
            // Get total and completed counts
            const totalResult = this.db.exec(`SELECT COUNT(*) as count FROM todos`);
            const completedResult = this.db.exec(`SELECT COUNT(*) as count FROM todos WHERE completed = 1`);
            
            const total = totalResult.values ? totalResult.values[0][0] : 0;
            const completed = completedResult.values ? completedResult.values[0][0] : 0;
            const progress = total > 0 ? Math.round((completed / total) * 100) : 0;
            
            // Update UI
            document.getElementById('total-tasks').textContent = total;
            document.getElementById('completed-tasks').textContent = completed;
            document.getElementById('productivity').textContent = `${progress}%`;
            document.getElementById('total-count').textContent = total;
            document.getElementById('completed-count').textContent = completed;
            document.getElementById('progress-percent').textContent = `${progress}%`;
            document.getElementById('progress-fill').style.width = `${progress}%`;
            
            // Update today's focus (missions created today)
            const today = new Date().toISOString().split('T')[0];
            const todayResult = this.db.exec(`SELECT COUNT(*) as count FROM todos WHERE date(created_at) = ?`, [today]);
            const todayFocus = todayResult.values ? todayResult.values[0][0] : 0;
            document.getElementById('today-focus').textContent = `${todayFocus} missions`;
            
            // Update streak (consecutive days with completed missions)
            const streakResult = this.db.exec(`
                WITH RECURSIVE dates(date) AS (
                    SELECT date('now')
                    UNION ALL
                    SELECT date(date, '-1 day')
                    FROM dates
                    LIMIT 30
                )
                SELECT COUNT(*) as streak
                FROM dates d
                WHERE EXISTS (
                    SELECT 1 FROM todos 
                    WHERE date(completed_at) = d.date
                )
                AND NOT EXISTS (
                    SELECT 1 FROM dates d2
                    WHERE d2.date = date(d.date, '-1 day')
                    AND NOT EXISTS (
                        SELECT 1 FROM todos 
                        WHERE date(completed_at) = d2.date
                    )
                )
                ORDER BY d.date DESC
                LIMIT 1
            `);
            
            const streak = streakResult.values ? streakResult.values[0][0] : 0;
            document.getElementById('streak').textContent = `${streak} days`;
            
            // Update achievements
            const achievements = this.calculateAchievements(total, completed, progress);
            document.getElementById('achievements').textContent = `${achievements} unlocked`;
            
        } catch (error) {
            console.error('Failed to update stats:', error);
        }
    }

    calculateAchievements(total, completed, progress) {
        let achievements = 0;
        if (total >= 1) achievements++; // First mission
        if (total >= 10) achievements++; // Mission master
        if (completed >= 5) achievements++; // Task completer
        if (completed >= 25) achievements++; // Productivity pro
        if (progress >= 100 && total > 0) achievements++; // Perfect day
        return achievements;
    }

    setupEventListeners() {
        // Add todo button
        document.getElementById('add-todo').addEventListener('click', () => {
            const input = document.getElementById('new-todo');
            this.addTodo(input.value);
        });
        
        // Enter key in input
        document.getElementById('new-todo').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') {
                this.addTodo(e.target.value);
            }
        });
        
        // Priority buttons
        document.querySelectorAll('.priority-btn').forEach(btn => {
            btn.addEventListener('click', (e) => {
                document.querySelectorAll('.priority-btn').forEach(b => b.classList.remove('active'));
                e.currentTarget.classList.add('active');
                this.currentPriority = e.currentTarget.dataset.priority;
            });
        });
        
        // Filter buttons
        document.querySelectorAll('.filter-btn').forEach(btn => {
            btn.addEventListener('click', (e) => {
                document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
                e.currentTarget.classList.add('active');
                this.currentFilter = e.currentTarget.dataset.filter;
                this.loadTodos();
            });
        });
        
        // Theme toggle
        document.getElementById('theme-toggle').addEventListener('click', () => {
            this.toggleTheme();
        });
        
        // Voice input (placeholder)
        document.getElementById('voice-input').addEventListener('click', () => {
            this.showToast('Voice input coming soon!', 'info');
        });
        
        // Export data
        document.getElementById('export-btn').addEventListener('click', () => {
            this.exportData();
        });
        
        // Import data
        document.getElementById('import-btn').addEventListener('click', () => {
            this.importData();
        });
        
        // Clear all
        document.getElementById('clear-btn').addEventListener('click', () => {
            this.clearAll();
        });
    }

    toggleTheme() {
        const currentTheme = document.documentElement.getAttribute('data-theme');
        const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
        
        document.documentElement.setAttribute('data-theme', newTheme);
        localStorage.setItem('permalist_theme', newTheme);
        
        this.showToast(`Switched to ${newTheme} theme`, 'info');
    }

    setThemeFromPreference() {
        const savedTheme = localStorage.getItem('permalist_theme') || 'light';
        const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
        const theme = savedTheme === 'system' ? (prefersDark ? 'dark' : 'light') : savedTheme;
        
        document.documentElement.setAttribute('data-theme', theme);
    }

    exportData() {
        try {
            const result = this.db.exec(`SELECT * FROM todos`);
            const data = result.values ? result.values.map(row => ({
                id: row[0],
                title: row[1],
                completed: Boolean(row[2]),
                priority: row[3],
                created_at: row[4],
                completed_at: row[5]
            })) : [];
            
            const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = `permalist-backup-${new Date().toISOString().split('T')[0]}.json`;
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            URL.revokeObjectURL(url);
            
            this.showToast('Data exported successfully!', 'success');
        } catch (error) {
            console.error('Failed to export data:', error);
            this.showToast('Failed to export data', 'error');
        }
    }

    importData() {
        const input = document.createElement('input');
        input.type = 'file';
        input.accept = '.json';
        
        input.onchange = async (e) => {
            const file = e.target.files[0];
            if (!file) return;
            
            try {
                const text = await file.text();
                const data = JSON.parse(text);
                
                // Clear existing data
                this.db.run(`DELETE FROM todos`);
                
                // Import new data
                data.forEach(todo => {
                    this.db.run(
                        `INSERT INTO todos (id, title, completed, priority, created_at, completed_at) VALUES (?, ?, ?, ?, ?, ?)`,
                        [todo.id, todo.title, todo.completed ? 1 : 0, todo.priority, todo.created_at, todo.completed_at]
                    );
                });
                
                this.showToast('Data imported successfully!', 'success');
                await this.loadTodos();
                this.updateStats();
            } catch (error) {
                console.error('Failed to import data:', error);
                this.showToast('Failed to import data. Invalid file format.', 'error');
            }
        };
        
        input.click();
    }

    async clearAll() {
        if (!confirm('Are you sure you want to clear ALL missions? This cannot be undone.')) return;
        
        try {
            this.db.run(`DELETE FROM todos`);
            this.showToast('All missions cleared!', 'success');
            await this.loadTodos();
            this.updateStats();
        } catch (error) {
            console.error('Failed to clear data:', error);
            this.showToast('Failed to clear data', 'error');
        }
    }

    showToast(message, type = 'info') {
        const toast = document.getElementById('toast');
        const toastMessage = toast.querySelector('.toast-message');
        
        // Set message and type
        toastMessage.textContent = message;
        toast.className = 'toast';
        toast.classList.add(type);
        
        // Show toast
        toast.classList.add('show');
        
        // Hide after 3 seconds
        setTimeout(() => {
            toast.classList.remove('show');
        }, 3000);
    }

    triggerConfetti() {
        // Simple confetti effect using emojis in toast
        this.showToast('🎉 Mission completed! 🎉', 'success');
    }

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

    formatPriority(priority) {
        const priorities = {
            'low': 'Low',
            'medium': 'Medium', 
            'high': 'High',
            'critical': 'Critical'
        };
        return priorities[priority] || priority;
    }

    formatDate(dateString) {
        if (!dateString) return 'Just now';
        
        const date = new Date(dateString);
        const now = new Date();
        const diffMs = now - date;
        const diffMins = Math.floor(diffMs / 60000);
        const diffHours = Math.floor(diffMs / 3600000);
        const diffDays = Math.floor(diffMs / 86400000);
        
        if (diffMins < 1) return 'Just now';
        if (diffMins < 60) return `${diffMins}m ago`;
        if (diffHours < 24) return `${diffHours}h ago`;
        if (diffDays < 7) return `${diffDays}d ago`;
        
        return date.toLocaleDateString('en-US', { 
            month: 'short', 
            day: 'numeric',
            year: diffDays > 365 ? 'numeric' : undefined
        });
    }
}

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