/**
 * InsertrAuth - Authentication and state management
 * Pure business logic - no DOM manipulation or UI concerns
 * 
 * Responsibilities:
 * - Manage authentication state
 * - Handle OAuth flows
 * - Validate permissions
 * - Emit state change events
 */
export class InsertrAuth {
    constructor(options = {}) {
        this.options = {
            mockAuth: options.mockAuth !== false, // Enable mock auth by default
            hideGatesAfterAuth: options.hideGatesAfterAuth === true, // Keep gates visible by default
            ...options
        };

        // Authentication state
        this.state = {
            isAuthenticated: false,
            editMode: false,
            currentUser: null,
            activeEditor: null,
            isInitialized: false,
            isAuthenticating: false
        };

        // Event listeners for state changes
        this.listeners = {
            stateChange: [],
            authChange: [],
            editModeChange: []
        };
    }

    /**
     * Event emitter methods
     */
    on(event, callback) {
        if (this.listeners[event]) {
            this.listeners[event].push(callback);
        }
    }

    off(event, callback) {
        if (this.listeners[event]) {
            this.listeners[event] = this.listeners[event].filter(cb => cb !== callback);
        }
    }

    emit(event, data) {
        if (this.listeners[event]) {
            this.listeners[event].forEach(callback => callback(data));
        }
    }

    /**
     * Initialize gate system (called on page load)
     */
    init() {
        console.log('🔧 Insertr: Scanning for editor gates');
        this.setupEditorGates();
    }

    /**
     * Initialize full editing system (called after successful OAuth)
     */
    initializeFullSystem() {
        if (this.state.isInitialized) {
            return; // Already initialized
        }

        console.log('🔐 Initializing Insertr Editing System');
        
        // Auto-enable edit mode after OAuth
        this.state.editMode = true;
        this.state.isInitialized = true;
        
        // Start the editor system
        if (window.Insertr && window.Insertr.startEditor) {
            window.Insertr.startEditor();
        }
        
        // Emit state change for UI to update
        this.emitStateChange();
        
        console.log('📱 Editing system active');
        console.log('✏️ Edit mode enabled - Click elements to edit');
    }

    /**
     * Setup editor gate click handlers for any .insertr-gate elements
     */
    setupEditorGates() {
        const gates = document.querySelectorAll('.insertr-gate');
        
        if (gates.length === 0) {
            console.log('ℹ️  No .insertr-gate elements found - editor access disabled');
            return;
        }

        console.log(`🚪 Found ${gates.length} editor gate(s)`);
        
        gates.forEach((gate, index) => {
            // Store original text for later restoration
            if (!gate.hasAttribute('data-original-text')) {
                gate.setAttribute('data-original-text', gate.textContent);
            }
            
            gate.addEventListener('click', (e) => {
                e.preventDefault();
                this.handleGateClick(gate, index);
            });
            
            // Add minimal styling to indicate it's clickable
            gate.style.cursor = 'pointer';
        });
    }

    /**
     * Handle click on an editor gate element
     */
    async handleGateClick(gateElement, gateIndex) {
        // Prevent multiple simultaneous authentication attempts
        if (this.state.isAuthenticating) {
            console.log('⏳ Authentication already in progress...');
            return;
        }

        console.log(`🚀 Editor gate activated (gate ${gateIndex + 1})`);
        this.state.isAuthenticating = true;
        
        // Store original text and show loading state
        const originalText = gateElement.textContent;
        gateElement.setAttribute('data-original-text', originalText);
        gateElement.textContent = '⏳ Signing in...';
        gateElement.style.pointerEvents = 'none';
        
        try {
            // Perform OAuth authentication
            await this.performOAuthFlow();
            
            // Initialize full editing system
            this.initializeFullSystem();
            
            // Handle gate visibility based on options
            if (this.options.hideGatesAfterAuth) {
                this.hideAllGates();
            } else {
                this.updateGateState();
            }
            
        } catch (error) {
            console.error('❌ Authentication failed:', error);
            
            // Restore clicked gate to original state
            const originalText = gateElement.getAttribute('data-original-text');
            if (originalText) {
                gateElement.textContent = originalText;
            }
            gateElement.style.pointerEvents = '';
        } finally {
            this.state.isAuthenticating = false;
        }
    }

    /**
     * Perform OAuth authentication flow
     */
    async performOAuthFlow() {
        // In development, simulate OAuth flow
        if (this.options.mockAuth) {
            console.log('🔐 Mock OAuth: Simulating authentication...');
            
            // Simulate network delay
            await new Promise(resolve => setTimeout(resolve, 1000));
            
            // Set authenticated state
            this.state.isAuthenticated = true;
            this.state.currentUser = {
                name: 'Site Owner',
                email: 'owner@example.com',
                role: 'admin'
            };
            
            console.log('✅ Mock OAuth: Authentication successful');
            return;
        }
        
        // TODO: In production, implement real OAuth flow
        // This would redirect to OAuth provider, handle callback, etc.
        throw new Error('Production OAuth not implemented yet');
    }

    /**
     * Hide all editor gates after successful authentication (optional)
     */
    hideAllGates() {
        document.body.classList.add('insertr-hide-gates');
        console.log('🚪 Editor gates hidden (hideGatesAfterAuth enabled)');
    }

    /**
     * Update gate state after authentication (restore normal appearance)
     */
    updateGateState() {
        const gates = document.querySelectorAll('.insertr-gate');
        gates.forEach(gate => {
            // Restore original text if it was saved
            const originalText = gate.getAttribute('data-original-text');
            if (originalText) {
                gate.textContent = originalText;
            }
            
            // Restore interactive state
            gate.style.pointerEvents = '';
            gate.style.opacity = '';
        });
        
        console.log('🚪 Editor gates restored to original state');
    }

    /**
     * Toggle authentication state
     */
    toggleAuthentication() {
        this.state.isAuthenticated = !this.state.isAuthenticated;
        this.state.currentUser = this.state.isAuthenticated ? { 
            name: 'Demo User', 
            email: 'demo@example.com',
            role: 'editor'
        } : null;

        // Reset edit mode when logging out
        if (!this.state.isAuthenticated) {
            this.state.editMode = false;
        }

        this.emitStateChange();

        console.log(this.state.isAuthenticated 
            ? '✅ Authenticated as Demo User' 
            : '❌ Logged out');
    }

    /**
     * Toggle edit mode (only when authenticated)
     */
    toggleEditMode() {
        if (!this.state.isAuthenticated) {
            console.warn('❌ Cannot enable edit mode - not authenticated');
            return;
        }

        this.state.editMode = !this.state.editMode;

        // Cancel any active editing when turning off edit mode
        if (!this.state.editMode && this.state.activeEditor) {
            // This would be handled by the main editor
            this.state.activeEditor = null;
        }

        this.emitStateChange();

        console.log(this.state.editMode 
            ? '✏️ Edit mode ON - Click elements to edit' 
            : '👀 Edit mode OFF - Read-only view');
    }

    /**
     * Emit state change events for UI updates
     */
    emitStateChange() {
        const stateData = {
            isAuthenticated: this.state.isAuthenticated,
            editMode: this.state.editMode,
            currentUser: this.state.currentUser
        };

        this.emit('stateChange', stateData);
        this.emit('authChange', { isAuthenticated: this.state.isAuthenticated, user: this.state.currentUser });
        this.emit('editModeChange', { editMode: this.state.editMode });
    }

    /**
     * Check if user is authenticated
     */
    isAuthenticated() {
        return this.state.isAuthenticated;
    }

    /**
     * Check if edit mode is enabled
     */
    isEditMode() {
        return this.state.editMode;
    }

    /**
     * Get current user info
     */
    getCurrentUser() {
        return this.state.currentUser;
    }

    /**
     * OAuth integration placeholder
     * In production, this would handle real OAuth flows
     */
    async authenticateWithOAuth(provider = 'google') {
        // Mock OAuth flow for now
        console.log(`🔐 Mock OAuth login with ${provider}`);
        
        // Simulate OAuth callback
        setTimeout(() => {
            this.state.isAuthenticated = true;
            this.state.currentUser = {
                name: 'OAuth User',
                email: 'user@example.com',
                provider: provider,
                role: 'editor'
            };
            
            this.emitStateChange();
            
            console.log('✅ OAuth authentication successful');
        }, 1000);
    }

    /**
     * Validate if user has permission for specific action
     */
    hasPermission(action) {
        if (!this.isAuthenticated()) return false;
        
        const user = this.getCurrentUser();
        if (!user) return false;

        // Simple role-based permissions
        switch (action) {
            case 'edit':
                return ['admin', 'editor'].includes(user.role);
            case 'enhance':
                return ['admin'].includes(user.role);
            case 'manage':
                return user.role === 'admin';
            default:
                return false;
        }
    }

    /**
     * Get authentication state snapshot
     */
    getState() {
        return {
            isAuthenticated: this.state.isAuthenticated,
            editMode: this.state.editMode,
            currentUser: this.state.currentUser,
            isInitialized: this.state.isInitialized,
            isAuthenticating: this.state.isAuthenticating
        };
    }
}