app.js

// app.js
import { Store } from './store.js';
import { UI } from './UI.js';

const appStore = new Store();

// INITIALIZE: Tell UI to render whenever Store changes
appStore.subscribe((newState) => {
    UI.renderTasks(newState, (id, col) => appStore.deleteTask(id, col));
});

// EVENT: Add Task
const input = document.getElementById('taskInput');
const addBtn = document.getElementById('addBtn');

const handleAddTask = () => {
    if (input.value.trim()) {
        appStore.addTask('todo', input.value);
        input.value = '';
    }
};

addBtn.addEventListener('click', handleAddTask);
input.addEventListener('keypress', (e) => { if(e.key === 'Enter') handleAddTask(); });

// EVENT: Drop Zones (Drag & Drop API)
document.querySelectorAll('.column').forEach(zone => {
    zone.addEventListener('dragover', (e) => {
        e.preventDefault(); // Required to allow drop
        zone.style.background = "rgba(255, 255, 255, 0.1)";
    });

    zone.addEventListener('dragleave', () => {
        zone.style.background = "rgba(255, 255, 255, 0.03)";
    });

    zone.addEventListener('drop', (e) => {
        zone.style.background = "rgba(255, 255, 255, 0.03)";
        const taskId = e.dataTransfer.getData('taskId');
        const sourceCol = e.dataTransfer.getData('sourceCol');
        const targetCol = zone.id;

        if (sourceCol !== targetCol) {
            appStore.moveTask(taskId, sourceCol, targetCol);
        }
    });
});

// Initial Load
UI.renderTasks(appStore.state, (id, col) => appStore.deleteTask(id, col));