static/js/app.js

/**
 * Main Application
 * SPA Router and State Management
 */

console.log('app.js loaded');

const app = {
    currentRoute: 'home',
    currentComponent: null,
    state: {},

    routes: {
        'home': HomeComponent,
        'species-selector': SpeciesSelectorComponent,
        'capture-form': CaptureFormComponent,
        'confirmation': ConfirmationComponent,
        'history': HistoryComponent,
        'info': EducationComponent, // Info tab now points to Education/Guidelines
        'data': InfoComponent,      // Data tab now points to the visualizations module
        'forum': ForumComponent,    // Foro comunitario
        'anzuelo': AnzueloComponent, // Asistente IA Anzuelo
        'emergency': EmergencyComponent
    },

    /**
     * Initialize the application
     */
    async init() {
        console.log('app.init() starting...');
        console.log('Initializing Mi Pesca RD...');

        // Initialize sync service
        syncService.init();

        // Load initial route
        this.navigate('home');
    },

    /**
     * Navigate to a route
     */
    async navigate(route) {
        console.log(`Navigating to: ${route}`);
        if (!this.routes[route]) {
            console.error(`Route not found: ${route}`);
            return;
        }

        try {
            // Destroy previous component
            if (this.currentComponent && this.currentComponent.destroy) {
                this.currentComponent.destroy();
            }

            // Update current route
            this.currentRoute = route;
            this.currentComponent = this.routes[route];

            // Initialize component
            if (this.currentComponent.init) {
                await this.currentComponent.init();
            }

            // Update Navigation State
            this.updateNavState(route);

            // Render component
            this.render();
        } catch (error) {
            console.error(`Navigation to ${route} failed:`, error);
            // Fallback render or simple error message
            const appContainer = document.getElementById('app');
            if (appContainer) {
                appContainer.innerHTML = `
                    <div class="card">
                        <h2>Error de Carga</h2>
                        <p>No se pudo cargar la vista solicitada. Por favor, intenta de nuevo.</p>
                        <button class="btn-primary" onclick="window.location.reload()">Refrescar App</button>
                    </div>
                `;
            }
        }
    },

    /**
     * Render current component
     */
    render() {
        const appContainer = document.getElementById('app');

        if (!appContainer) {
            console.error('App container not found');
            return;
        }

        if (this.currentComponent && this.currentComponent.render) {
            appContainer.innerHTML = this.currentComponent.render();
        }
    },

    /**
     * Update Bottom Tab Bar active state
     */
    updateNavState(route) {
        const tabs = document.querySelectorAll('.tab-item');
        tabs.forEach(tab => tab.classList.remove('active'));

        // Map routes to tab IDs
        const routeToTab = {
            'home': 'nav-home',
            'species-selector': 'nav-home',
            'capture-form': 'nav-home',
            'confirmation': 'nav-home',
            'history': 'nav-home',
            'data': 'nav-info',
            'info': 'nav-info',
            'forum': 'nav-forum',
            'anzuelo': 'nav-anzuelo',
            'education': 'nav-education'
        };

        const activeTabId = routeToTab[route];
        if (activeTabId) {
            const activeTab = document.getElementById(activeTabId);
            if (activeTab) activeTab.classList.add('active');
        }
    }
};

// Initialize app when DOM is ready
document.addEventListener('DOMContentLoaded', () => {
    app.init();
});