(function() {
    const initApp = () => {
        const appContainer = document.getElementById('work-agenda-app');
        if (!appContainer) return;

        // --- 1. ESTADO DE LA APLICACIÓN ---
        const state = new Proxy({
            tasks: [],
            filter: 'all',
            loading: true,
            editingTaskId: null
        }, {
            set(target, property, value) {
                target[property] = value;
                if (property === 'tasks' || property === 'filter' || property === 'loading') {
                    renderApp();
                }
                return true;
            }
        });

        // --- HELPER PARA LAS URLS CON TOKEN ---
        const getApiUrl = (endpoint = '') => {
            const config = window.WorkAgendaConfig || { root: '/wp-json/work-agenda/v1/', token: '' };
            const separator = endpoint.includes('?') ? '&' : '?';
            return `${config.root}${endpoint}${separator}token=${config.token}`;
        };

        // --- 2. SERVICIOS API ---
        const API = {
            async fetchTasks() {
                state.loading = true;
                try {
                    const response = await fetch(getApiUrl('tasks'));
                    const data = await response.json();
                    state.tasks = Array.isArray(data) ? data : []; 
                } catch (err) {
                    console.error("Error cargando tareas:", err);
                    state.tasks = [];
                } finally {
                    state.loading = false;
                }
            },

            async createTask(taskData) {
                try {
                    const response = await fetch(getApiUrl('tasks'), {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify(taskData)
                    });
                    const newTask = await response.json();
                    if (newTask && newTask.id) {
                        state.tasks = [newTask, ...state.tasks];
                    }
                } catch (err) {
                    console.error("Error al guardar tarea:", err);
                }
            },

            async updateTask(id, taskData) {
                state.tasks = state.tasks.map(t => t.id == id ? { ...t, ...taskData } : t);
                try {
                    await fetch(getApiUrl(`tasks/${id}`), {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify(taskData)
                    });
                } catch (err) {
                    console.error("Error al actualizar tarea:", err);
                    API.fetchTasks();
                }
            },

            async toggleTaskStatus(id, currentStatus) {
                const newStatus = currentStatus === 'pending' ? 'completed' : 'pending';
                state.tasks = state.tasks.map(t => t.id == id ? { ...t, status: newStatus } : t);

                try {
                    await fetch(getApiUrl(`tasks/${id}`), {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify({ status: newStatus })
                    });
                } catch (err) {
                    console.error("Error al actualizar estado:", err);
                    API.fetchTasks();
                }
            }
        };

        // --- 3. COMPONENTES Y RENDERIZADO DE LA INTERFAZ ---
        function renderApp() {
            if (state.loading) {
                appContainer.innerHTML = `<div style="text-align:center; padding:40px; color:var(--wa-text-muted)">Cargando tu Agenda...</div>`;
                return;
            }

            const pendingCount = state.tasks.filter(t => t.status === 'pending').length;
            const completedCount = state.tasks.filter(t => t.status === 'completed').length;
            const totalCount = state.tasks.length;
            const progressPercentage = totalCount > 0 ? Math.round((completedCount / totalCount) * 100) : 0;

            appContainer.innerHTML = `
                <header class="wa-header">
                    <h1 style="margin:0; font-size:1.6rem; font-weight:800;">Mi Agenda</h1>
                    <div class="wa-stats-bar">
                        <div class="wa-stat-badge">Pendientes: ${pendingCount}</div>
                        <div class="wa-stat-badge">Completadas: ${completedCount}</div>
                        <div class="wa-stat-badge ${pendingCount > 3 ? 'urgent' : ''}">Progreso: ${progressPercentage}%</div>
                    </div>
                    <div class="wa-progress-container">
                        <div class="wa-progress-bar" style="width: ${progressPercentage}%"></div>
                    </div>
                </header>

                <main class="wa-task-list">
                    ${state.tasks.length === 0 ? '<p style="text-align:center; color:var(--wa-text-muted); margin-top:40px;">¡Todo listo por hoy! No tienes tareas.</p>' : ''}
                    ${state.tasks.map(task => `
                        <div class="wa-task-card prio-${task.priority} ${task.status === 'completed' ? 'completed' : ''}" data-id="${task.id}">
                            <div class="wa-checkbox" data-id="${task.id}" data-status="${task.status}"></div>
                            <div class="wa-task-content wa-clickable-content" data-id="${task.id}">
                                <h3 class="wa-task-title">${task.title}</h3>
                                ${task.description ? `<p class="wa-task-desc">${task.description}</p>` : ''}
                                <div class="wa-task-meta-row">
                                    <span>⚡ Prioridad ${task.priority}</span>
                                    ${task.due_date ? `<span>📅 Vence: ${task.due_date.substring(0,10)}</span>` : ''}
                                </div>
                            </div>
                        </div>
                    `).join('')}
                </main>

                <button id="wa-open-modal-btn" class="wa-fab">
                    <span>➕</span> Nueva Tarea
                </button>

                <div id="wa-task-modal" class="wa-modal">
                    <div class="wa-modal-content">
                        <h3 id="wa-modal-title" style="margin-top:0; margin-bottom:16px;">Crear Nueva Tarea</h3>
                        <form id="wa-task-form">
                            <input type="text" id="task-title" class="wa-input" placeholder="¿Qué vas a hacer?" required autocomplete="off">
                            <textarea id="task-desc" class="wa-input" placeholder="Descripción (opcional)" rows="3"></textarea>
                            
                            <label style="font-size:0.85rem; color:var(--wa-text-muted)">Prioridad</label>
                            <select id="task-priority" class="wa-select">
                                <option value="0">🔴 Urgente</option>
                                <option value="1">🟠 Alta</option>
                                <option value="2" selected>🟡 Media</option>
                                <option value="3">🟢 Baja</option>
                            </select>

                            <label style="font-size:0.85rem; color:var(--wa-text-muted)">Fecha Límite</label>
                            <input type="date" id="task-due" class="wa-input">

                            <div style="display:flex; gap:12px; margin-top:8px;">
                                <button type="button" id="wa-close-modal-btn" class="wa-input" style="background:transparent; color:var(--wa-text-muted)">Cancelar</button>
                                <button type="submit" id="wa-submit-btn" class="wa-input" style="background:var(--wa-primary); color:white; font-weight:bold;">Guardar</button>
                            </div>
                        </form>
                    </div>
                </div>
            `;

            // --- 4. ASIGNACIÓN DE EVENTOS EN TIEMPO REAL ---
            const modal = document.getElementById('wa-task-modal');
            const form = document.getElementById('wa-task-form');
            const modalTitle = document.getElementById('wa-modal-title');

            document.getElementById('wa-open-modal-btn').addEventListener('click', () => {
                state.editingTaskId = null;
                modalTitle.innerText = "Crear Nueva Tarea";
                form.reset();
                modal.classList.add('open');
            });

            document.getElementById('wa-close-modal-btn').addEventListener('click', () => modal.classList.remove('open'));

            document.querySelectorAll('.wa-clickable-content').forEach(content => {
                content.addEventListener('click', () => {
                    const id = content.getAttribute('data-id');
                    const task = state.tasks.find(t => t.id == id);
                    if (task) {
                        state.editingTaskId = id;
                        modalTitle.innerText = "Editar Tarea";
                        document.getElementById('task-title').value = task.title;
                        document.getElementById('task-desc').value = task.description || '';
                        document.getElementById('task-priority').value = task.priority;
                        document.getElementById('task-due').value = task.due_date ? task.due_date.substring(0, 10) : '';
                        modal.classList.add('open');
                    }
                });
            });

            form.addEventListener('submit', async (e) => {
                e.preventDefault();
                const title = document.getElementById('task-title').value;
                const description = document.getElementById('task-desc').value;
                const priority = document.getElementById('task-priority').value;
                const due_date = document.getElementById('task-due').value || null;

                modal.classList.remove('open');

                if (state.editingTaskId) {
                    await API.updateTask(state.editingTaskId, { title, description, priority, due_date });
                } else {
                    await API.createTask({ title, description, priority, due_date });
                }
                form.reset();
            });

            document.querySelectorAll('.wa-checkbox').forEach(box => {
                box.addEventListener('click', (e) => {
                    e.stopPropagation();
                    const id = e.target.getAttribute('data-id');
                    const status = e.target.getAttribute('data-status');
                    API.toggleTaskStatus(id, status);
                });
            });
        }

        API.fetchTasks();
    };

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initApp);
    } else {
        initApp();
    }
})();