script.js

// DOM Elements - will be initialized after DOM loads
let taskInput, taskList, clearCompletedBtn, totalTasksEl, completedTasksEl, pendingTasksEl;

// Tasks array
let tasks = [];

// App state
let currentPage = 'tasks';
let currentList = 'all';
let currentView = 'list'; // list, kanban
let searchQuery = '';
let filterStatus = 'all'; // all, active, completed, overdue
let draggedTask = null;
let editingTaskId = null;

// Helper function to escape HTML
function escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}

// Load tasks from localStorage on page load
document.addEventListener('DOMContentLoaded', () => {
    // Initialize DOM elements
    taskInput = document.getElementById('taskInput');
    taskList = document.getElementById('taskList');
    clearCompletedBtn = document.getElementById('clearCompleted');
    totalTasksEl = document.getElementById('totalTasks');
    completedTasksEl = document.getElementById('completedTasks');
    pendingTasksEl = document.getElementById('pendingTasks');
    
    loadTasks();
    renderTasks();
    updateStats();
    
    // Clear completed button handler
    if (clearCompletedBtn) {
        clearCompletedBtn.addEventListener('click', clearCompleted);
    }
    
    // Load theme and check for voodoo activation
    checkVoodooTheme();
});

// Page Navigation
function navigateToPage(pageName) {
    currentPage = pageName;
    
    // Hide all pages
    document.querySelectorAll('.page').forEach(page => page.classList.remove('active'));
    
    // Show selected page
    const selectedPage = document.getElementById(pageName + 'Page');
    if (selectedPage) {
        selectedPage.classList.add('active');
    }
    
    // Update active nav button
    document.querySelectorAll('.nav-btn').forEach(btn => btn.classList.remove('active'));
    document.querySelector(`[data-page="${pageName}"]`)?.classList.add('active');
    
    // Render content based on page
    if (pageName === 'calendar') {
        renderCalendarPage();
    } else if (pageName === 'stats') {
        updateStats();
    } else if (pageName === 'tasks') {
        renderTasks();
    }
}

// Task Modal Functions
function openTaskModal(taskId = null) {
    const modal = document.getElementById('taskModal');
    const modalTitle = document.getElementById('taskModalTitle');
    const taskInputEl = document.getElementById('taskInput');
    const taskDescEl = document.getElementById('taskDescription');
    const taskDateEl = document.getElementById('taskDueDate');
    const taskListEl = document.getElementById('taskList-select');
    
    if (!modal) return;
    
    editingTaskId = taskId;
    
    if (taskId) {
        // Edit mode
        const task = tasks.find(t => t.id === taskId);
        if (task) {
            modalTitle.textContent = 'Edit Task';
            if (taskInputEl) taskInputEl.value = task.text;
            if (taskDescEl) taskDescEl.value = task.description || '';
            if (taskDateEl) taskDateEl.value = task.dueDate || '';
            if (taskListEl) taskListEl.value = task.list || 'misc';
        }
    } else {
        // Add mode
        modalTitle.textContent = 'Add New Task';
        if (taskInputEl) taskInputEl.value = '';
        if (taskDescEl) taskDescEl.value = '';
        if (taskDateEl) taskDateEl.value = '';
        if (taskListEl) taskListEl.value = 'misc';
    }
    
    modal.classList.add('active');
}

function closeTaskModal() {
    const modal = document.getElementById('taskModal');
    if (modal) {
        modal.classList.remove('active');
    }
    editingTaskId = null;
}

function saveTask() {
    const taskInputEl = document.getElementById('taskInput');
    const taskDescEl = document.getElementById('taskDescription');
    const taskDateEl = document.getElementById('taskDueDate');
    const taskListEl = document.getElementById('taskList-select');
    
    const taskText = taskInputEl ? taskInputEl.value.trim() : '';
    
    if (taskText === '') {
        alert('Please enter a task!');
        return;
    }
    
    if (editingTaskId) {
        // Update existing task
        const task = tasks.find(t => t.id === editingTaskId);
        if (task) {
            const oldText = task.text;
            task.text = taskText;
            task.description = taskDescEl ? taskDescEl.value.trim() : '';
            task.dueDate = taskDateEl ? taskDateEl.value : null;
            task.list = taskListEl ? taskListEl.value : 'misc';
            
            // Check if voodoo theme should be activated or deactivated based on text change
            if (oldText.toLowerCase() === 'toodoo voodoo' || task.text.toLowerCase() === 'toodoo voodoo') {
                checkVoodooTheme();
            }
        }
    } else {
        // Add new task
        const task = {
            id: Date.now(),
            text: taskText,
            description: taskDescEl ? taskDescEl.value.trim() : '',
            dueDate: taskDateEl ? taskDateEl.value : null,
            completed: false,
            list: taskListEl ? taskListEl.value : 'misc',
            priority: 'medium',
            createdAt: new Date().toISOString()
        };
        
        tasks.push(task);
        
        // Check if voodoo theme should be activated
        checkVoodooTheme();
    }
    
    saveTasks();
    renderTasks();
    updateStats();
    closeTaskModal();
}

// Function to add a new task (legacy support - now opens modal)
function addTask() {
    openTaskModal();
}

// Function to toggle task completion
function toggleTask(id) {
    const task = tasks.find(t => t.id === id);
    if (task) {
        task.completed = !task.completed;
        saveTasks();
        renderTasks();
        updateStats();
    }
}

// Function to delete a task
function deleteTask(id) {
    tasks = tasks.filter(t => t.id !== id);
    saveTasks();
    renderTasks();
    updateStats();
    
    // Check if voodoo theme should be deactivated
    checkVoodooTheme();
}

// Function to clear all completed tasks
function clearCompleted() {
    const completedCount = tasks.filter(t => t.completed).length;
    
    if (completedCount === 0) {
        alert('No completed tasks to clear!');
        return;
    }
    
    if (confirm(`Are you sure you want to delete ${completedCount} completed task(s)?`)) {
        tasks = tasks.filter(t => !t.completed);
        saveTasks();
        renderTasks();
        updateStats();
        
        // Check if voodoo theme should be deactivated
        checkVoodooTheme();
    }
}

// Function to render all tasks
function renderTasks() {
    const filteredTasks = getFilteredTasks();
    
    if (currentView === 'calendar') {
        renderCalendarView(filteredTasks);
        return;
    }
    
    if (currentView === 'kanban') {
        renderKanbanView(filteredTasks);
        return;
    }
    
    // List view
    taskList.innerHTML = '';
    
    if (filteredTasks.length === 0) {
        taskList.innerHTML = `
            <div class="empty-state">
                <p>No tasks yet!</p>
                <p style="font-size: 0.9rem;">Add a task to get started 🚀</p>
            </div>
        `;
        return;
    }
    
    filteredTasks.forEach(task => {
        const taskItem = createTaskElement(task);
        taskList.appendChild(taskItem);
    });
}

// Get filtered tasks based on current filters
function getFilteredTasks() {
    let filtered = tasks;
    
    // Filter by list
    if (currentList !== 'all') {
        filtered = filtered.filter(t => t.list === currentList);
    }
    
    // Filter by search query
    if (searchQuery) {
        filtered = filtered.filter(t => 
            t.text.toLowerCase().includes(searchQuery.toLowerCase()) ||
            (t.description && t.description.toLowerCase().includes(searchQuery.toLowerCase()))
        );
    }
    
    // Filter by status
    if (filterStatus === 'active') {
        filtered = filtered.filter(t => !t.completed);
    } else if (filterStatus === 'completed') {
        filtered = filtered.filter(t => t.completed);
    } else if (filterStatus === 'overdue') {
        filtered = filtered.filter(t => !t.completed && isOverdue(t));
    }
    
    return filtered;
}

// Check if task is overdue
function isOverdue(task) {
    if (!task.dueDate) return false;
    const now = new Date();
    now.setHours(0, 0, 0, 0);
    const dueDate = new Date(task.dueDate);
    dueDate.setHours(0, 0, 0, 0);
    return dueDate < now && !task.completed;
}

// Function to create a task element
function createTaskElement(task) {
    const li = document.createElement('li');
    li.className = `task-item ${task.completed ? 'completed' : ''} ${isOverdue(task) ? 'overdue' : ''}`;
    li.draggable = true;
    li.dataset.taskId = task.id;
    
    // Drag and drop event handlers
    li.addEventListener('dragstart', handleDragStart);
    li.addEventListener('dragover', handleDragOver);
    li.addEventListener('drop', handleDrop);
    li.addEventListener('dragend', handleDragEnd);
    
    const checkbox = document.createElement('input');
    checkbox.type = 'checkbox';
    checkbox.className = 'checkbox';
    checkbox.checked = task.completed;
    checkbox.addEventListener('change', () => toggleTask(task.id));
    
    const taskContent = document.createElement('div');
    taskContent.className = 'task-content';
    
    const taskText = document.createElement('span');
    taskText.className = 'task-text';
    taskText.textContent = task.text;
    
    taskContent.appendChild(taskText);
    
    if (task.description) {
        const taskDesc = document.createElement('div');
        taskDesc.className = 'task-description';
        taskDesc.textContent = task.description;
        taskContent.appendChild(taskDesc);
    }
    
    if (task.dueDate) {
        const dueDate = document.createElement('div');
        dueDate.className = 'task-due-date';
        const date = new Date(task.dueDate);
        const today = new Date();
        today.setHours(0, 0, 0, 0);
        const taskDate = new Date(task.dueDate);
        taskDate.setHours(0, 0, 0, 0);
        
        let dateText = date.toLocaleDateString();
        if (taskDate.getTime() === today.getTime()) {
            dateText += ' (Today)';
        } else if (isOverdue(task)) {
            dateText += ' (Overdue!)';
        }
        
        dueDate.textContent = `📅 ${dateText}`;
        taskContent.appendChild(dueDate);
    }
    
    const taskActions = document.createElement('div');
    taskActions.className = 'task-actions';
    
    const editBtn = document.createElement('button');
    editBtn.className = 'edit-btn';
    editBtn.textContent = 'Edit';
    editBtn.addEventListener('click', () => editTask(task.id));
    
    const deleteBtn = document.createElement('button');
    deleteBtn.className = 'delete-btn';
    deleteBtn.textContent = 'Delete';
    deleteBtn.addEventListener('click', () => deleteTask(task.id));
    
    taskActions.appendChild(editBtn);
    taskActions.appendChild(deleteBtn);
    
    li.appendChild(checkbox);
    li.appendChild(taskContent);
    li.appendChild(taskActions);
    
    return li;
}

// Drag and drop functions
function handleDragStart(e) {
    draggedTask = this;
    this.classList.add('dragging');
    e.dataTransfer.effectAllowed = 'move';
}

function handleDragOver(e) {
    if (e.preventDefault) {
        e.preventDefault();
    }
    e.dataTransfer.dropEffect = 'move';
    return false;
}

function handleDrop(e) {
    if (e.stopPropagation) {
        e.stopPropagation();
    }
    
    if (draggedTask !== this) {
        const draggedId = parseInt(draggedTask.dataset.taskId);
        const targetId = parseInt(this.dataset.taskId);
        
        const draggedIndex = tasks.findIndex(t => t.id === draggedId);
        const targetIndex = tasks.findIndex(t => t.id === targetId);
        
        // Swap tasks
        const temp = tasks[draggedIndex];
        tasks.splice(draggedIndex, 1);
        tasks.splice(targetIndex, 0, temp);
        
        saveTasks();
        renderTasks();
    }
    
    return false;
}

function handleDragEnd(e) {
    this.classList.remove('dragging');
}

// Edit task function - now opens modal
function editTask(id) {
    openTaskModal(id);
}

// Function to update statistics
function updateStats() {
    const filteredTasks = getFilteredTasks();
    const total = filteredTasks.length;
    const completed = filteredTasks.filter(t => t.completed).length;
    const pending = total - completed;
    const overdue = filteredTasks.filter(t => isOverdue(t)).length;
    
    if (totalTasksEl) totalTasksEl.textContent = total;
    if (completedTasksEl) completedTasksEl.textContent = completed;
    if (pendingTasksEl) pendingTasksEl.textContent = pending;
    
    const overdueTasksEl = document.getElementById('overdueTasks');
    if (overdueTasksEl) overdueTasksEl.textContent = overdue;
    
    // Update progress bar
    const progressBar = document.getElementById('progress-bar');
    if (progressBar) {
        if (total > 0) {
            const percentage = (completed / total) * 100;
            progressBar.style.width = percentage + '%';
            progressBar.textContent = Math.round(percentage) + '%';
        } else {
            progressBar.style.width = '0%';
            progressBar.textContent = '0%';
        }
    }
    
    // Disable clear completed button if no completed tasks
    if (clearCompletedBtn) {
        clearCompletedBtn.disabled = completed === 0;
    }
}

// Function to save tasks to localStorage
function saveTasks() {
    localStorage.setItem('toodoo-tasks', JSON.stringify(tasks));
}

// Function to load tasks from localStorage
function loadTasks() {
    const savedTasks = localStorage.getItem('toodoo-tasks');
    if (savedTasks) {
        tasks = JSON.parse(savedTasks);
        // Migrate old tasks without new fields
        tasks = tasks.map(task => ({
            ...task,
            description: task.description || '',
            dueDate: task.dueDate || null,
            list: task.list || 'misc',
            priority: task.priority || 'medium',
            createdAt: task.createdAt || new Date().toISOString()
        }));
    }
}

// Calendar View (for tasks page list view)
function renderCalendarView(filteredTasks) {
    if (!taskList) return;
    taskList.innerHTML = '<div id="calendar-container" class="calendar-view"></div>';
    const container = document.getElementById('calendar-container');
    renderCalendarInContainer(container, filteredTasks);
}

// Calendar Page rendering
function renderCalendarPage() {
    const container = document.getElementById('calendarContainer');
    if (!container) return;
    const filteredTasks = getFilteredTasks();
    renderCalendarInContainer(container, filteredTasks);
}

// Shared calendar rendering logic
function renderCalendarInContainer(container, filteredTasks) {
    if (!container) return;
    const now = new Date();
    const year = now.getFullYear();
    const month = now.getMonth();
    
    const monthNames = ['January', 'February', 'March', 'April', 'May', 'June',
                       'July', 'August', 'September', 'October', 'November', 'December'];
    
    const firstDay = new Date(year, month, 1).getDay();
    const daysInMonth = new Date(year, month + 1, 0).getDate();
    
    let html = `
        <div class="calendar-header">
            <h3>${monthNames[month]} ${year}</h3>
        </div>
        <div class="calendar-grid">
            <div class="calendar-day-name">Sun</div>
            <div class="calendar-day-name">Mon</div>
            <div class="calendar-day-name">Tue</div>
            <div class="calendar-day-name">Wed</div>
            <div class="calendar-day-name">Thu</div>
            <div class="calendar-day-name">Fri</div>
            <div class="calendar-day-name">Sat</div>
    `;
    
    // Empty cells for days before month starts
    for (let i = 0; i < firstDay; i++) {
        html += '<div class="calendar-day empty"></div>';
    }
    
    // Days of the month
    for (let day = 1; day <= daysInMonth; day++) {
        const dateStr = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
        const tasksOnDay = filteredTasks.filter(t => t.dueDate === dateStr);
        const isToday = day === now.getDate() && month === now.getMonth() && year === now.getFullYear();
        
        html += `<div class="calendar-day ${isToday ? 'today' : ''}">
            <div class="day-number">${day}</div>
            <div class="day-tasks">`;
        
        tasksOnDay.forEach(task => {
            const escapedText = escapeHtml(task.text);
            const truncatedText = task.text.length > 15 ? task.text.substring(0, 15) + '...' : task.text;
            const escapedDisplayText = escapeHtml(truncatedText);
            html += `<div class="calendar-task ${task.completed ? 'completed' : ''}" title="${escapedText}">
                ${escapedDisplayText}
            </div>`;
        });
        
        html += '</div></div>';
    }
    
    html += '</div>';
    container.innerHTML = html;
}

// Kanban View
function renderKanbanView(filteredTasks) {
    taskList.innerHTML = '<div id="kanban-container" class="kanban-view"></div>';
    const container = document.getElementById('kanban-container');
    
    const todoTasks = filteredTasks.filter(t => !t.completed && !t.inProgress);
    const inProgressTasks = filteredTasks.filter(t => !t.completed && t.inProgress);
    const doneTasks = filteredTasks.filter(t => t.completed);
    
    container.innerHTML = `
        <div class="kanban-column">
            <h3>To Do (${todoTasks.length})</h3>
            <div class="kanban-tasks" data-status="todo">
                ${todoTasks.map(t => createKanbanCard(t)).join('')}
            </div>
        </div>
        <div class="kanban-column">
            <h3>In Progress (${inProgressTasks.length})</h3>
            <div class="kanban-tasks" data-status="inprogress">
                ${inProgressTasks.map(t => createKanbanCard(t)).join('')}
            </div>
        </div>
        <div class="kanban-column">
            <h3>Done (${doneTasks.length})</h3>
            <div class="kanban-tasks" data-status="done">
                ${doneTasks.map(t => createKanbanCard(t)).join('')}
            </div>
        </div>
    `;
}

function createKanbanCard(task) {
    const escapedText = escapeHtml(task.text);
    const escapedDesc = task.description ? escapeHtml(task.description) : '';
    let dateDisplay = '';
    if (task.dueDate) {
        try {
            const date = new Date(task.dueDate);
            if (!isNaN(date.getTime())) {
                dateDisplay = `<div class="kanban-card-date">📅 ${date.toLocaleDateString()}</div>`;
            }
        } catch (e) {
            // Invalid date, skip display
        }
    }
    return `
        <div class="kanban-card ${isOverdue(task) ? 'overdue' : ''}" data-task-id="${task.id}">
            <div class="kanban-card-title">${escapedText}</div>
            ${task.description ? `<div class="kanban-card-desc">${escapedDesc}</div>` : ''}
            ${dateDisplay}
            <div class="kanban-card-actions">
                <button onclick="moveTask(${task.id}, 'left')">←</button>
                <button onclick="moveTask(${task.id}, 'right')">→</button>
            </div>
        </div>
    `;
}

function moveTask(id, direction) {
    const task = tasks.find(t => t.id === id);
    if (!task) return;
    
    if (direction === 'left') {
        if (task.completed) {
            task.completed = false;
            task.inProgress = true;
        } else if (task.inProgress) {
            task.inProgress = false;
        }
    } else {
        if (!task.inProgress && !task.completed) {
            task.inProgress = true;
        } else if (task.inProgress) {
            task.inProgress = false;
            task.completed = true;
        }
    }
    
    saveTasks();
    renderTasks();
    updateStats();
}

// Pomodoro Timer
let pomodoroInterval = null;
let pomodoroTimeLeft = 25 * 60; // 25 minutes
let pomodoroRunning = false;

function startPomodoro() {
    if (pomodoroRunning) return;
    
    pomodoroRunning = true;
    const timerDisplay = document.getElementById('pomodoro-timer');
    
    pomodoroInterval = setInterval(() => {
        pomodoroTimeLeft--;
        
        const minutes = Math.floor(pomodoroTimeLeft / 60);
        const seconds = pomodoroTimeLeft % 60;
        timerDisplay.textContent = `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
        
        if (pomodoroTimeLeft <= 0) {
            clearInterval(pomodoroInterval);
            pomodoroRunning = false;
            pomodoroTimeLeft = 25 * 60;
            alert('Pomodoro session complete! Time for a break.');
            timerDisplay.textContent = '25:00';
        }
    }, 1000);
}

function pausePomodoro() {
    if (!pomodoroRunning) return;
    clearInterval(pomodoroInterval);
    pomodoroRunning = false;
}

function resetPomodoro() {
    clearInterval(pomodoroInterval);
    pomodoroRunning = false;
    pomodoroTimeLeft = 25 * 60;
    const timerDisplay = document.getElementById('pomodoro-timer');
    if (timerDisplay) {
        timerDisplay.textContent = '25:00';
    }
}

// Theme toggle - cycles through light -> dark -> voodoo -> light
function toggleTheme() {
    const body = document.body;
    const currentTheme = body.getAttribute('data-theme');
    let newTheme;
    
    // Cycle through themes: light -> dark -> voodoo -> light
    if (currentTheme === 'light') {
        newTheme = 'dark';
    } else if (currentTheme === 'dark') {
        newTheme = 'voodoo';
    } else {
        newTheme = 'light';
    }
    
    body.setAttribute('data-theme', newTheme);
    localStorage.setItem('toodoo-theme', newTheme);
}

// Check if voodoo theme should be active based on "toodoo voodoo" task
function checkVoodooTheme() {
    const hasVoodooTask = tasks.some(t => t.text.toLowerCase() === 'toodoo voodoo');
    const currentTheme = localStorage.getItem('toodoo-theme') || 'light';
    
    if (hasVoodooTask && currentTheme !== 'voodoo') {
        // Activate voodoo theme if not already active
        activateVoodooTheme();
    } else if (!hasVoodooTask && currentTheme === 'voodoo') {
        // Deactivate voodoo theme if currently active
        deactivateVoodooTheme();
    } else {
        // Apply current theme from localStorage
        document.body.setAttribute('data-theme', currentTheme);
    }
}

// Activate the vibrant voodoo theme
function activateVoodooTheme() {
    document.body.setAttribute('data-theme', 'voodoo');
    localStorage.setItem('toodoo-theme', 'voodoo');
}

// Deactivate voodoo theme and return to light theme
function deactivateVoodooTheme() {
    document.body.setAttribute('data-theme', 'light');
    localStorage.setItem('toodoo-theme', 'light');
}

// View switching
function switchView(view) {
    currentView = view;
    document.querySelectorAll('.view-btn').forEach(btn => btn.classList.remove('active'));
    document.querySelector(`[data-view="${view}"]`)?.classList.add('active');
    renderTasks();
}

// List switching
function switchList(list) {
    currentList = list;
    document.querySelectorAll('.list-tab').forEach(tab => tab.classList.remove('active'));
    document.querySelector(`[data-list="${list}"]`)?.classList.add('active');
    renderTasks();
    updateStats();
}

// Search function
function handleSearch(query) {
    searchQuery = query;
    renderTasks();
}

// Filter function
function handleFilter(status) {
    filterStatus = status;
    document.querySelectorAll('.filter-btn').forEach(btn => btn.classList.remove('active'));
    document.querySelector(`[data-filter="${status}"]`)?.classList.add('active');
    renderTasks();
}

// Settings Functions
function setTheme(theme) {
    document.body.setAttribute('data-theme', theme);
    localStorage.setItem('toodoo-theme', theme);
}

function exportTasks() {
    const dataStr = JSON.stringify(tasks, null, 2);
    const dataBlob = new Blob([dataStr], { type: 'application/json' });
    const url = URL.createObjectURL(dataBlob);
    const link = document.createElement('a');
    link.href = url;
    link.download = `toodoo-tasks-${new Date().toISOString().split('T')[0]}.json`;
    link.click();
    URL.revokeObjectURL(url);
}

function importTasks() {
    const input = document.createElement('input');
    input.type = 'file';
    input.accept = 'application/json';
    input.onchange = (e) => {
        const file = e.target.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = (event) => {
                try {
                    const importedTasks = JSON.parse(event.target.result);
                    if (Array.isArray(importedTasks)) {
                        if (confirm(`Import ${importedTasks.length} tasks? This will replace your current tasks.`)) {
                            tasks = importedTasks;
                            saveTasks();
                            renderTasks();
                            updateStats();
                            checkVoodooTheme();
                            alert('Tasks imported successfully!');
                        }
                    } else {
                        alert('Invalid file format!');
                    }
                } catch (error) {
                    alert('Error importing tasks: ' + error.message);
                }
            };
            reader.readAsText(file);
        }
    };
    input.click();
}

function clearAllData() {
    if (confirm('Are you sure you want to clear all tasks and settings? This cannot be undone!')) {
        if (confirm('Really clear everything? This is your last chance!')) {
            tasks = [];
            activeTimezones = ['UTC'];
            saveTasks();
            saveTimezones();
            renderTasks();
            renderClocks();
            updateStats();
            alert('All data cleared!');
        }
    }
}

// Digital Clock Implementation
let activeTimezones = [];
let clockInterval = null;

// Timezone data with display names
const timezoneData = {
    'UTC': 'UTC',
    'America/New_York': 'New York',
    'America/Chicago': 'Chicago',
    'America/Denver': 'Denver',
    'America/Los_Angeles': 'Los Angeles',
    'Europe/London': 'London',
    'Europe/Paris': 'Paris',
    'Europe/Moscow': 'Moscow',
    'Asia/Dubai': 'Dubai',
    'Asia/Kolkata': 'India',
    'Asia/Shanghai': 'Shanghai',
    'Asia/Tokyo': 'Tokyo',
    'Australia/Sydney': 'Sydney',
    'Pacific/Auckland': 'Auckland'
};

// Initialize clock on page load
document.addEventListener('DOMContentLoaded', () => {
    loadTimezones();
    renderClocks();
    startClockUpdates();
});

// Load timezones from localStorage
function loadTimezones() {
    const saved = localStorage.getItem('toodoo-timezones');
    if (saved) {
        activeTimezones = JSON.parse(saved);
    } else {
        // Default to UTC
        activeTimezones = ['UTC'];
    }
}

// Save timezones to localStorage
function saveTimezones() {
    localStorage.setItem('toodoo-timezones', JSON.stringify(activeTimezones));
}

// Open timezone modal
function openTimezoneModal() {
    const modal = document.getElementById('timezoneModal');
    if (modal) {
        modal.classList.add('active');
    }
}

// Close timezone modal
function closeTimezoneModal() {
    const modal = document.getElementById('timezoneModal');
    if (modal) {
        modal.classList.remove('active');
    }
}

// Add timezone
function addTimezone() {
    const select = document.getElementById('timezoneSelect');
    if (!select) return;
    
    const timezone = select.value;
    
    if (!activeTimezones.includes(timezone)) {
        activeTimezones.push(timezone);
        saveTimezones();
        renderClocks();
    }
    
    closeTimezoneModal();
}

// Remove timezone
function removeTimezone(timezone) {
    if (activeTimezones.length === 1) {
        alert('You must have at least one timezone!');
        return;
    }
    
    activeTimezones = activeTimezones.filter(tz => tz !== timezone);
    saveTimezones();
    renderClocks();
}

// Get formatted time for a timezone
function getTimeForTimezone(timezone) {
    try {
        const now = new Date();
        
        // Format time
        const timeOptions = {
            timeZone: timezone,
            hour: '2-digit',
            minute: '2-digit',
            second: '2-digit',
            hour12: false
        };
        const time = new Intl.DateTimeFormat('en-US', timeOptions).format(now);
        
        // Format date
        const dateOptions = {
            timeZone: timezone,
            weekday: 'short',
            year: 'numeric',
            month: 'short',
            day: 'numeric'
        };
        const date = new Intl.DateTimeFormat('en-US', dateOptions).format(now);
        
        return { time, date };
    } catch (e) {
        console.error(`Error formatting time for ${timezone}:`, e);
        return { time: '--:--:--', date: 'Invalid timezone' };
    }
}

// Render all clocks
function renderClocks() {
    const clockDisplay = document.getElementById('clockDisplay');
    if (!clockDisplay) return;
    
    if (activeTimezones.length === 0) {
        clockDisplay.innerHTML = `
            <div class="clock-empty-state">
                <p>No time zones added</p>
                <p style="font-size: 0.9rem;">Click "+ Add Time Zone" to get started</p>
            </div>
        `;
        return;
    }
    
    clockDisplay.innerHTML = '';
    
    activeTimezones.forEach(timezone => {
        const { time, date } = getTimeForTimezone(timezone);
        const displayName = timezoneData[timezone] || timezone;
        
        const clockZone = document.createElement('div');
        clockZone.className = 'clock-zone';
        clockZone.innerHTML = `
            <div class="clock-zone-header">
                <div class="clock-zone-name">${escapeHtml(displayName)}</div>
                <button class="clock-remove-btn" onclick="removeTimezone('${timezone}')" title="Remove">×</button>
            </div>
            <div class="clock-time">${escapeHtml(time)}</div>
            <div class="clock-date">${escapeHtml(date)}</div>
        `;
        
        clockDisplay.appendChild(clockZone);
    });
}

// Start updating clocks every second
function startClockUpdates() {
    // Update immediately
    renderClocks();
    
    // Then update every second
    clockInterval = setInterval(() => {
        renderClocks();
    }, 1000);
}

// Close modal when clicking outside
window.addEventListener('click', (event) => {
    const modal = document.getElementById('timezoneModal');
    if (event.target === modal) {
        closeTimezoneModal();
    }
});