ScopeJS

import { Component } from './js/ScopeJS.js';

const TodoList = Component({
    controller: class {
        constructor() {
            this.todos = [];
            this.newTodo = '';
            this.filter = 'all';
        }
        
        addTodo() {
            if (this.newTodo.trim()) {
                this.todos.push({
                    id: Date.now(),
                    text: this.newTodo,
                    completed: false
                });
                this.newTodo = '';
                this.apply();
            }
        }
        
        toggleTodo(id) {
            const todo = this.todos.find(t => t.id == id);
            if (todo) {
                todo.completed = !todo.completed;
                this.apply();
            }
        }
        
        deleteTodo(id) {
            this.todos = this.todos.filter(t => t.id != id);
            this.apply();
        }
        
        get filteredTodos() {
            if (this.filter === 'completed') {
                return this.todos.filter(t => t.completed);
            }
            if (this.filter === 'active') {
                return this.todos.filter(t => !t.completed);
            }
            return this.todos;
        }
    },
    
    render() {
        return `
            <div class="todo-app">
                <h3>Lista de Tareas</h3>
                
                <div class="add-todo">
                    <input type="text" model="newTodo" 
                           placeholder="Nueva tarea...">
                    <button onclick="addTodo()">Agregar</button>
                </div>
                
                <div class="filters">
                    <button onclick="filter='all'; apply()" 
                            class="${this.filter === 'all' ? 'active' : ''}">
                        Todas
                    </button>
                    <button onclick="filter='active'; apply()" 
                            class="${this.filter === 'active' ? 'active' : ''}">
                        Activas
                    </button>
                    <button onclick="filter='completed'; apply()" 
                            class="${this.filter === 'completed' ? 'active' : ''}">
                        Completadas
                    </button>
                </div>
                
                <ul class="todo-list">
                    ${this.filteredTodos.map(todo => `
                        <li class="todo-item ${todo.completed ? 'completed' : ''}">
                            <input type="checkbox" 
                                   ${todo.completed ? 'checked' : ''} 
                                   onclick="toggleTodo(${todo.id})">
                            <span>${todo.text}</span>
                            <button onclick="deleteTodo(${todo.id})">❌</button>
                        </li>
                    `).join('')}
                </ul>
            </div>
        `;
    },
    
    style: `
        padding: 1rem;
        border: 2px solid #9333ea;
        border-radius: 0.5rem;
        background: white;
    `,
    
    tagName: 'todo-list'
});

import { Router, Component } from './js/ScopeJS.js';

// Definir las vistas/componentes
const HomePage = Component({
    controller: class {
        constructor() {
            this.title = "Página de Inicio";
            this.message = "¡Bienvenido a ScopeJS!";
        }
    },
    
    render() {
        return `
            <div class="p-6 text-center">
                <h1 class="text-3xl font-bold text-purple-800 mb-4">
                    ${this.title}
                </h1>
                <p class="text-gray-600">${this.message}</p>
                <a href="/usuario/123" class="text-purple-600 hover:underline">
                    Ver perfil de usuario
                </a>
            </div>
        `;
    }
});

const UserProfile = Component({
    controller: class {
        constructor() {
            this.userId = null;
            this.userName = "";
        }
        
        init(params) {
            this.userId = params.id;
            this.userName = `Usuario ${params.id}`;
            this.apply();
        }
    },
    
    render() {
        return `
            <div class="p-6">
                <h1 class="text-2xl font-bold text-purple-800 mb-4">
                    Perfil de ${this.userName}
                </h1>
                <p class="text-gray-600 mb-4">ID: ${this.userId}</p>
                <button onclick="history.back()" 
                        class="bg-purple-600 text-white px-4 py-2 rounded">
                    Volver
                </button>
            </div>
        `;
    }
});

// Configurar el router
const AppRouter = Router([
    {
        path: "/",
        component: HomePage,
        alias: "inicio"
    },
    {
        path: "/inicio",
        component: HomePage,
        alias: "home"
    },
    {
        path: "/usuario/:id",
        component: UserProfile,
        alias: "perfil-usuario",
        middleware: (params, next) => {
            // Validar que el ID sea un número
            if (isNaN(params.id)) {
                alert("ID de usuario inválido");
                return false;
            }
            next();
        }
    },
    {
        path: "/productos",
        alias: "catalogo-productos",
        component: Component({
            render() {
                return `
                    <div class="p-6">
                        <h1 class="text-2xl font-bold text-purple-800 mb-4">
                            Catálogo de Productos
                        </h1>
                        <div class="grid grid-cols-2 gap-4">
                            <div class="border p-4 rounded">Producto 1</div>
                            <div class="border p-4 rounded">Producto 2</div>
                        </div>
                    </div>
                `;
            }
        })
    }
]);

// Renderizar el router en el DOM
const container = document.getElementById('app');
AppRouter.render(container);

// Navegación programática
function navigateToUser(userId) {
    AppRouter.navigate(`/usuario/${userId}`);
}

function navigateToProducts() {
    AppRouter.navigate('/productos');
}

// Escuchar cambios de ruta
AppRouter.listen((route, params) => {
    console.log('Navegando a:', route, 'Parámetros:', params);
});