// ============================================
// App — Main Application Controller
// ============================================

const App = {
    state: {
        currentView: 'dashboard',
        currentCustomer: 'west',
        currentCamera: null,
        currentCategory: null,
        selectedImages: [],
        userId: null,
        sidebarOpen: true
    },

    init() {
        this.bindEvents();
        this.handleRoute();
        window.addEventListener('hashchange', () => this.handleRoute());

        // Auto-login if session exists
        const savedUserId = sessionStorage.getItem('masic_user_id');
        if (savedUserId) {
            this.quickLogin(savedUserId);
        }
    },

    // ---- Quick Login ----
    quickLogin(userId) {
        this.state.userId = userId;
        sessionStorage.setItem('masic_user_id', userId);

        const user = MockData.getUserById(userId);
        if (!user) return;

        // Update user UI
        Helpers.$('#user-avatar-btn span').textContent = user.avatar;
        Helpers.$('#user-name').textContent = user.name;
        Helpers.$('#user-role').textContent = user.role === 'management'
            ? 'Management'
            : user.name.split(' ')[0] + ' — ' + MockData.getCustomerName(user.customerId);

        // Set current customer
        this.state.currentCustomer = user.customerId || 'west';

        // Show app, hide login
        Helpers.$('#login-screen').classList.add('hidden');
        Helpers.$('#app-shell').classList.remove('hidden');

        // Initialize sidebar
        Sidebar.init();
        Dashboard.init();

        // Navigate to dashboard
        this.navigate('dashboard');
        Toast.show('Welcome, ' + user.name, 'success');
    },

    logout() {
        sessionStorage.removeItem('masic_user_id');
        this.state.userId = null;
        Helpers.$('#login-screen').classList.remove('hidden');
        Helpers.$('#app-shell').classList.add('hidden');
        Helpers.$('#user-dropdown').classList.remove('visible');
    },

    // ---- Navigation ----
    navigate(view, options = {}) {
        // Hide all views
        Helpers.$$('.view').forEach(v => v.classList.add('hidden'));

        // Show target
        const target = Helpers.$('#view-' + view);
        if (target) target.classList.remove('hidden');

        // Update nav
        Helpers.$$('.top-nav__link').forEach(link => {
            link.classList.toggle('active', link.dataset.view === view);
        });

        this.state.currentView = view;
        window.location.hash = view;
        this.closeDetailPanel();

        // Init component
        this.initViewComponents(view);
    },

    initViewComponents(view) {
        switch (view) {
            case 'dashboard': Dashboard.init(); break;
            case 'upload': UploadWizard.init(); break;
            case 'quarantine': Quarantine.init(); break;
            case 'gallery': Gallery.init(); break;
            case 'synthetic': SyntheticGenerator.init(); break;
            case 'model-comparison': ModelComparison.init(); break;
        }
    },

    handleRoute() {
        const hash = window.location.hash.replace('#', '') || 'dashboard';
        this.navigate(hash);
    },

    // ---- Detail Panel ----
    openDetailPanel(title, bodyHtml) {
        Helpers.$('#detail-panel-title').innerHTML = title;
        Helpers.$('#detail-panel-body').innerHTML = bodyHtml;
        Helpers.$('#detail-panel').classList.add('detail-panel--open');
        Helpers.$('#detail-panel-overlay').classList.add('detail-panel__overlay--visible');
    },

    closeDetailPanel() {
        Helpers.$('#detail-panel').classList.remove('detail-panel--open');
        Helpers.$('#detail-panel-overlay').classList.remove('detail-panel__overlay--visible');
    },

    // ---- Event Binding ----
    bindEvents() {
        // Quick login buttons
        Helpers.$$('[data-quick-login]').forEach(btn => {
            btn.addEventListener('click', (e) => {
                e.preventDefault();
                this.quickLogin(btn.dataset.quickLogin);
            });
        });

        // Logout
        Helpers.$('#btn-logout').addEventListener('click', () => this.logout());

        // User dropdown
        Helpers.$('#user-avatar-btn').addEventListener('click', (e) => {
            e.stopPropagation();
            Helpers.$('#user-dropdown').classList.toggle('visible');
        });

        // Close dropdown outside click
        document.addEventListener('click', () => {
            Helpers.$('#user-dropdown').classList.remove('visible');
        });

        // Close detail panel
        Helpers.$('#btn-close-panel').addEventListener('click', () => this.closeDetailPanel());
        Helpers.$('#detail-panel-overlay').addEventListener('click', () => this.closeDetailPanel());

        // Nav links
        Helpers.$$('.top-nav__link').forEach(link => {
            link.addEventListener('click', (e) => {
                e.preventDefault();
                this.navigate(link.dataset.view);
            });
        });
    }
};

document.addEventListener('DOMContentLoaded', () => App.init());