/**
 * Main Application - Alpine.js Sales Panel App
 * 
 * This file combines all components into the main Alpine.js application.
 */

function salesApp() {
    return {
        // Authentication state
        isLoggedIn: false,
        isLoading: true,
        currentUser: '',
        loginForm: { username: '', password: '' },

        // Order state
        submitting: false,
        orderComplete: false,
        lastOrder: { id: '', name: '', total: '' },

        // Include state from components
        ...CartComponent.getInitialState(),
        ...ProductsComponent.getInitialState(),
        ...FormsComponent.getInitialState(),

        // Computed properties
        get total() {
            return CartComponent.getComputed().total.call(this);
        },

        get filteredProducts() {
            return ProductsComponent.getComputed().filteredProducts.call(this);
        },

        get filteredExtraProducts() {
            return ProductsComponent.getComputed().filteredExtraProducts.call(this);
        },

        /**
         * Initialize the application
         * Runs automatically on page load
         */
        async init() {
            this.isLoading = true;
            try {
                const data = await ApiService.checkSession();
                if (data.authenticated) {
                    this.currentUser = data.user || localStorage.getItem('telvero_user') || 'Agent';
                    await this.loadProducts();
                    this.isLoggedIn = true;
                }
            } catch (e) {
                console.error("Session check failed");
            } finally {
                this.isLoading = false;
            }
        },

        /**
         * Handle user login
         */
        async doLogin() {
            const result = await ApiService.login(this.loginForm.username, this.loginForm.password);
            if (result.ok) {
                this.currentUser = result.data.user;
                localStorage.setItem('telvero_user', result.data.user);
                await this.loadProducts();
                this.isLoggedIn = true;
            } else {
                alert("Login mislukt");
            }
        },

        /**
         * Handle user logout
         */
        async doLogout() {
            await ApiService.logout();
            localStorage.removeItem('telvero_user');
            location.reload();
        },

        /**
         * Submit order to API
         */
        async submitOrder() {
            this.submitting = true;
            
            try {
                const payload = this.buildOrderPayload();
                const result = await ApiService.createOrder(payload);
                
                if (result.success) {
                    this.lastOrder = {
                        id: result.order_id,
                        name: this.form.initials + ' ' + this.form.lastname,
                        total: result.total
                    };
                    this.orderComplete = true;
                } else {
                    alert("Fout: " + result.error);
                }
            } catch (e) {
                alert("Systeemfout");
            }
            
            this.submitting = false;
        },

        /**
         * Reset everything for a new order
         */
        resetForNewOrder() {
            this.resetCart();
            this.resetProducts();
            this.resetForm();
            this.orderComplete = false;
        },

        // Include methods from components
        ...CartComponent.getMethods(),
        ...ProductsComponent.getMethods(),
        ...FormsComponent.getMethods()
    };
}