/**
 * Animated Fiction - Main Application Integration
 * Integrates all modules to create an interactive fiction experience.
 */
import { AnimationQueue } from './animation-queue.js';
import { TextProcessor } from './text-processor.js';
import { ParagraphLayout } from './paragraph-layout.js';
import { LayoutRenderer } from './layout-renderer.js';
import { AudioManager } from './audio-manager.js';
import { TtsPlayer } from './tts-player.js';
import { PersistenceManager } from './persistence-manager.js';
import { InputHandler } from './input-handler.js';
import { SocketClient } from './socket-client.js';
import { UiController } from './ui-controller.js';
import { ttsFactory } from './tts-factory.js';
import { LoadingOverlay } from './loading-overlay.js';
import { TextBuffer } from './text-buffer.js';
import { OptionsUI } from './options-ui.js';

export class AnimatedFiction {
    /**
     * Create a new AnimatedFiction application
     * @param {Object} config - Configuration options
     */
    constructor(config = {}) {
        this.config = config;
        this.storyContainer = document.getElementById(config.storyContainerId || 'story');
        this.commandHistoryContainer = document.getElementById(config.commandHistoryContainerId || 'command_history'); // Added for user commands

        // Game state
        this.gameState = {
            started: false,
            currentRoomId: '',
            isThinking: false,
            textSpeed: config.initialSpeed || 50 // Keep track of speed locally if needed
        };
        this.currentCommandTimeout = null; // To handle server timeouts
        
        // Use the pre-existing loading overlay if available, or create a new one
        if (window.initialOverlay) {
            console.log("Using pre-existing loading overlay");
            // Create a wrapper for the initial overlay to match our LoadingOverlay API
            this.loadingOverlay = {
                updateProgressItem: (id, progress, complete) => {
                    // Map progress items to overall percentages
                    let totalProgress = 0;
                    if (id === 'components') totalProgress = 30;
                    else if (id === 'tts') totalProgress = complete ? 80 : 40 + (progress * 0.4);
                    else if (id === 'ui') totalProgress = 90;
                    else if (id === 'socket') totalProgress = 95;
                    
                    let message = 'Loading...';
                    if (id === 'components') message = 'Loading core components...';
                    else if (id === 'tts') message = complete ? 'TTS system ready' : 'Initializing Text-to-Speech...';
                    else if (id === 'ui') message = 'Preparing user interface...';
                    else if (id === 'socket') message = 'Connecting to server...';
                    
                    window.initialOverlay.updateProgress(totalProgress, message);
                },
                hide: (callback) => {
                    window.initialOverlay.hide();
                    if (callback) setTimeout(callback, 500);
                },
                show: () => {} // No-op as it's already showing
            };
        } else {
            // Create a fallback LoadingOverlay if initialOverlay is not available
            this.loadingOverlay = new LoadingOverlay({
                title: 'Initializing AI Fiction',
                fadeOutDuration: 800
            });
            this.loadingOverlay.show();
        }
        
        // Add additional progress tracking items for hyphenation
        this.loadingOverlay.updateProgressItem('components', 10, false);
        this.loadingOverlay.updateProgressItem('hyphenation', 0, false);
        this.loadingOverlay.updateProgressItem('tts', 0, false);
        this.loadingOverlay.updateProgressItem('ui', 0, false);
        this.loadingOverlay.updateProgressItem('socket', 0, false);
        
        // Track when modules are ready to hide the loading overlay
        this.componentsReady = false;
        this.hyphenationReady = false;
        this.ttsReady = false;
        this.uiReady = false;
        
        // Initialize core components
        // (This only creates the component instances but doesn't start processing yet)
        this.initializeComponents();
        this.bindGlobalEvents();
    }

    /**
     * Initialize all components
     */
    initializeComponents() {
        // 1. Core Components
        this.animationQueue = new AnimationQueue();
        // Initialize TextProcessor without hyphenator initially
        this.textProcessor = new TextProcessor(window.SmartyPants);
        // Pass null for measure func initially, it will be provided after DOM measurement setup
        this.paragraphLayout = new ParagraphLayout(window.kap, null);
        this.layoutRenderer = new LayoutRenderer(this.animationQueue);
        this.audioManager = new AudioManager();
        this.ttsPlayer = new TtsPlayer({
            apiKey: this.config.ttsApiKey,
            animationQueue: this.animationQueue,
            persistenceManager: this.persistenceManager,
            audioManager: this.audioManager,
            ttsFactory: window.ttsFactory
        });
        this.persistenceManager = new PersistenceManager({
            storage: localStorage // Note: Persistence might need rework for socket state
        });
        
        // Initialize the TextBuffer for sentence collection
        this.textBuffer = new TextBuffer({
            ttsPlayer: this.ttsPlayer,
            onSentenceReady: (sentence) => this.handleSentenceReady(sentence)
        });
        
        // Mark components as initialized for loading progress
        this.loadingOverlay.updateProgressItem('components', 60, false);

        // Initialize the DOM-based text measurement system
        this.initializeTextMeasurement();

        // 2. Input, Socket, and UI Controller
        this.inputHandler = new InputHandler('player_input', 'cursor');
        this.socketClient = new SocketClient(this.config.serverUrl); // Pass server URL if provided

        this.uiController = new UiController({
            // storyPlayer: this.storyPlayer, // Remove storyPlayer dependency
            animationQueue: this.animationQueue, // Keep for speed control
            ttsPlayer: this.ttsPlayer, // Keep for TTS toggle
            speedSliderElement: document.getElementById('speed'),
            // choiceContainerElement: document.getElementById('choices'), // Choices are now suggestions/input
            commandHistoryContainerElement: this.commandHistoryContainer, // Pass command history
            storyContainerElement: this.storyContainer, // Pass story container
            rewindButtonElement: document.getElementById('rewind'),
            saveButtonElement: document.getElementById('save'),
            loadButtonElement: document.getElementById('reload'),
            speechButtonElement: document.getElementById('speech'),
            speedResetElement: document.getElementById('speed_reset'),
            inputHandler: this.inputHandler, // Pass input handler for suggestion clicks etc.
            socketClient: this.socketClient, // Pass socket client for actions
            translations: this.config.translations,
            locale: this.config.locale || 'en-us'
        });

        // Configure TTS Player based on factory readiness
        this.listenForTTSReady();

        // Link InputHandler submission to SocketClient
        this.inputHandler.onCommandSubmit((command) => {
            this.submitCommand(command);
        });

        // Link UI Controller actions to SocketClient
        this.uiController.onRestartRequest = () => this.socketClient.requestStartGame();
        this.uiController.onSaveRequest = () => this.socketClient.requestSaveGame();
        this.uiController.onLoadRequest = () => this.socketClient.requestLoadGame();
        // TTS toggle is likely handled within UiController using TtsPlayer/ttsHandler

        // Initialize Socket Listeners
        this.initializeSocketListeners();
    }

    /**
     * Initialize DOM-based text measurement system
     * Recreates the ruler stack system from the original game.js
     */
    initializeTextMeasurement() {
        // Set up ruler DOM element & stack for text measurement
        this.rulerElement = document.getElementById('ruler');
        if (!this.rulerElement) {
            console.error("AnimatedFiction: Ruler element not found! Text measurement will fail.");
            return;
        }
        
        // Reset and initialize ruler stack
        this.rulerStack = [this.rulerElement];
        
        // Create the DOM-based text measurement function
        this.measureText = (str) => {
            // Get current ruler from stack top
            let ruler = this.rulerStack[this.rulerStack.length - 1];
            
            // Handle HTML tags specially
            if (str.substr(0, 2) == '</') {
                // End tag: pop the last child off the stack
                let child = this.rulerStack.pop();
                ruler = this.rulerStack[this.rulerStack.length - 1];
                ruler.removeChild(child);
                return 0;
            } else if (str.substr(0, 1) == '<') {
                // Start tag: create and push element onto stack
                let tmp = document.createElement('div');
                tmp.innerHTML = str;
                let word = tmp.firstChild;
                ruler = this.rulerStack[this.rulerStack.length - 1];
                this.rulerStack.push(word);
                ruler.appendChild(word);
                return 0;
            } else if (str === '|') {
                // Pipe character (hyphenation marker): zero width
                return 0;
            } else if (str === ' ') {
                // Non-breaking space for measurement
                str = '\u00A0';
            }
            
            // For normal text, measure width with a text node
            ruler = this.rulerStack[this.rulerStack.length - 1];
            let textNode = document.createTextNode(str);
            ruler.appendChild(textNode);
            let width = ruler.getClientRects()[0].width;
            ruler.removeChild(textNode);
            
            return width;
        };
        
        // Provide the measurement function to ParagraphLayout
        if (this.paragraphLayout) {
            this.paragraphLayout.setMeasureFunction(this.measureText);
        }
    }

    // Removed measureDomText method

    /**
     * Listen for the tts-ready event from the factory
     */
    listenForTTSReady() {
        // Add a shorter timeout specifically for TTS initialization (8 seconds)
        const ttsTimeout = setTimeout(() => {
            console.warn("AnimatedFiction: TTS initialization timeout reached, continuing without it");
            this.loadingOverlay.updateProgressItem('tts', 100, true, 'TTS not available, continuing anyway');
            this.ttsReady = true;
            this.checkInitializationComplete();
        }, 8000); // 8 second timeout is enough since the UI needs to become responsive

        // Listen for the normal TTS ready event
        window.addEventListener('tts-ready', (event) => {
            // Clear the timeout since we got the event
            clearTimeout(ttsTimeout);
            
            console.log('AnimatedFiction received tts-ready event:', event.detail);
            const { available, type, handler, systems } = event.detail;
            
            // Update loading progress for TTS initialization
            this.loadingOverlay.updateProgressItem('tts', 100, true, 
                available ? `${type} TTS ready` : 'TTS not available');
            this.ttsReady = true;
            
            // Check if we can hide the loading overlay
            this.checkInitializationComplete();
            
            // Rest of TTS ready handling
            if (available && handler) {
                console.log(`AnimatedFiction: Using ${type} TTS system with handler:`, handler);
                
                // Store the handler for direct access
                window.ttsHandler = handler;
                
                // Pass the handler to the TtsPlayer if needed
                if (this.ttsPlayer) {
                    this.ttsPlayer.setTtsHandler(handler);
                }
                
                // Initialize the options UI with available TTS systems
                if (systems) {
                    this.initializeOptionsUI(systems);
                } else {
                    // If no systems info provided, pass an empty object
                    this.initializeOptionsUI({});
                }
                
                // Ensure UI controller knows about it
                if (this.uiController) {
                    this.uiController.setTtsHandler(handler);
                    this.uiController.updateSpeechButtonAvailability(available, type);
                }
                
                // Set user activation flag once we have user interaction
                document.addEventListener('click', function setUserActivation() {
                    if (window.ttsHandler) {
                        window.ttsHandler.hasUserActivation = true;
                        // If using Kokoro, try to resume the AudioContext
                        if (window.ttsHandler.audioContext && window.ttsHandler.audioContext.state === 'suspended') {
                            window.ttsHandler.audioContext.resume().catch(err => 
                                console.error('Error resuming AudioContext on click:', err));
                        }
                    }
                    // Only need this once
                    document.removeEventListener('click', setUserActivation);
                }, { once: false });
                
            } else {
                console.warn("AnimatedFiction: No TTS handler available after initialization.");
                if (this.uiController) {
                    this.uiController.updateSpeechButtonAvailability(false);
                }
            }
        });
    }

    /**
     * Initialize listeners for SocketClient events.
     */
    initializeSocketListeners() {
        this.socketClient.on('connect', () => {
            console.log('AnimatedFiction: Socket connected.');
            // Automatically start the game once connected
            if (!this.gameState.started) {
                // Don't display any message before starting the game
                this.socketClient.requestStartGame();
            }
        });

        this.socketClient.on('connect_error', (error) => {
            console.error('AnimatedFiction: Socket connection error:', error);
            this.displaySystemMessage('Connection error. Please check server and network.');
        });

        this.socketClient.on('disconnect', (reason) => {
            console.warn('AnimatedFiction: Socket disconnected.', reason);
            this.displaySystemMessage('Disconnected from server.');
            this.gameState.started = false; // Reset started state on disconnect
            this.uiController.updateButtonStates(this.gameState); // Disable buttons
        });

        this.socketClient.on('gameIntroduction', (data) => {
            // Clear any existing content
            this.clearStoryDisplay();
            
            // Display the introduction text with proper animation
            this.displayNarrative(data.introduction);
            this.displayNarrative(data.initialRoomDescription);

            this.gameState.started = true;
            this.gameState.currentRoomId = data.currentRoomId;
            this.gameState.isThinking = false;

            this.uiController.updateButtonStates(this.gameState); // Enable buttons
            this.inputHandler.enableInput();
            this.inputHandler.focus();
        });

        this.socketClient.on('narrativeResponse', (data) => {
            this.handleNarrativeResponse(data);
        });

        this.socketClient.on('gameSaved', () => {
            this.displaySystemMessage('Game saved successfully.');
            this.gameState.canLoad = true; // Assuming save enables load
            this.uiController.updateButtonStates(this.gameState);
        });

        this.socketClient.on('gameLoaded', (data) => {
            this.clearStoryDisplay();
            this.displaySystemMessage('Game loaded successfully.');
            this.displayNarrative(data.currentRoomDescription); // Display current room after load

            this.gameState.started = true; // Ensure game is marked as started
            this.gameState.currentRoomId = data.currentRoomId;
            this.gameState.isThinking = false;
            this.gameState.canLoad = true; // Can still load after loading

            this.uiController.updateButtonStates(this.gameState);
            this.inputHandler.enableInput();
            this.inputHandler.focus();
        });

        this.socketClient.on('error', (data) => {
            this.handleNarrativeResponse({ text: '' }); // Clear thinking indicator on error
            this.displaySystemMessage(`Server Error: ${data.message}`);
            this.inputHandler.enableInput(); // Re-enable input on server error
        });
    }

    /**
     * Handles the narrative response from the server.
     * @param {object} data - The data received from the server.
     * @param {string} data.text - The narrative text.
     * @param {string[]} [data.suggestions] - Optional suggestions.
     * @param {object} [data.gameState] - Optional updated game state.
     */
    handleNarrativeResponse(data) {
        // Clear thinking indicator and timeout
        if (this.currentCommandTimeout) {
            clearTimeout(this.currentCommandTimeout);
            this.currentCommandTimeout = null;
        }
        this.removeThinkingIndicator();
        this.gameState.isThinking = false;

        // Display narrative using the proper text processing pipeline
        if (data.text) {
            this.displayNarrative(data.text);
        }

        // Display suggestions
        if (data.suggestions && data.suggestions.length > 0) {
            this.displaySuggestions(data.suggestions);
        }

        // Update game state if provided
        if (data.gameState) {
            this.gameState.currentRoomId = data.gameState.currentRoomId;
            // Update other relevant state parts if needed
        }

        // Re-enable input and focus
        this.inputHandler.enableInput();
        this.scrollToBottom(); // Ensure view is scrolled down
    }

    /**
     * Submits a command entered by the user.
     * @param {string} command - The command text.
     */
    submitCommand(command) {
        if (!this.gameState.started || this.gameState.isThinking) return;

        this.displayUserCommand(command); // Show command in history
        this.displayThinkingIndicator(); // Show thinking message
        this.gameState.isThinking = true;

        this.socketClient.sendCommand(command);

        // Failsafe timeout to re-enable input if server doesn't respond
        this.currentCommandTimeout = setTimeout(() => {
            if (this.gameState.isThinking) { // Only if still thinking
                console.warn("Server response timeout.");
                this.removeThinkingIndicator();
                this.displaySystemMessage('The server is taking too long to respond.');
                this.gameState.isThinking = false;
                this.inputHandler.enableInput();
            }
        }, 15000); // 15 seconds timeout
    }

    /**
     * Displays a narrative paragraph using the rendering pipeline.
     * @param {string} text - The narrative text.
     */
    displayNarrative(text) {
        if (!text) return;
        
        console.log("AnimatedFiction: Displaying narrative text:", text);
        
        try {
            // 1. Process the text with TextProcessor (SmartyPants, hyphenation)
            const processed = this.textProcessor.process(text);
            
            // 2. Get container width for line measure calculation
            const containerWidth = this.storyContainer.clientWidth;
            
            // 3. Setup measures array for the Knuth-Plass algorithm
            // Calculate indent width for the measures array
            const indentWidth = 2 * parseFloat(window.getComputedStyle(document.querySelector("#indent")).lineHeight);
            const measures = [
                containerWidth,                     // Full width
                containerWidth - indentWidth,       // Indented width
                containerWidth - indentWidth * 0.9  // Slightly less indented width
            ];
            
            // 4. Calculate Layout using the Knuth-Plass algorithm with DOM-based measurement
            console.log("AnimatedFiction: Calculating paragraph layout with DOM ruler");
            const layout = this.paragraphLayout.calculateLayout(processed, measures.slice().reverse(), true);
            
            // 5. Render paragraph using the LayoutRenderer
            console.log("AnimatedFiction: Rendering paragraph with layout data");
            const renderResult = this.layoutRenderer.renderParagraph(layout, this.animationQueue.getDelay(), measures.slice().reverse());
            
            if (!Array.isArray(renderResult) || renderResult.length < 2) {
                throw new Error("renderParagraph did not return the expected array [element, delay]");
            }
            
            const [paragraphElement, finalDelay] = renderResult;
            
            // Update the animation queue's delay
            this.animationQueue.setDelay(finalDelay);
            
            // 6. Append the paragraph element to the story container
            this.storyContainer.appendChild(paragraphElement);
            
            // 7. Add text to the TextBuffer for TTS processing
            // This buffers text, extracts complete sentences, and processes them for TTS
            if (this.textBuffer) {
                console.log("AnimatedFiction: Adding text to buffer for sentence processing");
                this.textBuffer.addText(text);
            }
            // Direct TTS fallback if TextBuffer isn't available
            else if (this.ttsPlayer && this.ttsPlayer.isEnabled()) {
                console.log("AnimatedFiction: Speaking text directly with TTS (no buffer)");
                this.ttsPlayer.speak(text);
            } 
            else if (window.ttsHandler && typeof window.ttsHandler.isEnabled === 'function' && window.ttsHandler.isEnabled()) {
                console.log("AnimatedFiction: Speaking text with global TTS handler (no buffer)");
                window.ttsHandler.speak(text);
            }
            
        } catch (error) {
            console.error("Error during paragraph layout or rendering:", error);
            console.error(error.stack);
            // Display raw text as fallback with simple fade-in
            const fallbackPara = document.createElement('p');
            fallbackPara.textContent = text;
            fallbackPara.classList.add("fallback");
            fallbackPara.classList.add("fade-in");
            this.storyContainer.appendChild(fallbackPara);
            
            // Still try to speak the text if TTS is enabled
            // Since rendering failed, don't use buffer, just speak directly
            if (this.ttsPlayer && this.ttsPlayer.isEnabled()) {
                this.ttsPlayer.speak(text);
            } else if (window.ttsHandler && typeof window.ttsHandler.isEnabled === 'function' && window.ttsHandler.isEnabled()) {
                window.ttsHandler.speak(text);
            }
        }
        
        this.scrollToBottom();
    }

    /**
     * Displays the user's command in the history.
     * @param {string} command - The command text.
     */
    displayUserCommand(command) {
        const element = document.createElement('p');
        element.className = 'user-input';
        element.textContent = `> ${command}`;
        this.commandHistoryContainer.appendChild(element);
        this.scrollToBottom();
    }

    /**
     * Displays a system message (e.g., errors, confirmations).
     * @param {string} message - The message text.
     */
    displaySystemMessage(message) {
        const element = document.createElement('p');
        element.className = 'system-message';
        element.textContent = message;
        this.storyContainer.appendChild(element); // Add to main story flow
        this.scrollToBottom();
    }

    /**
     * Displays clickable suggestions.
     * @param {string[]} suggestions - An array of suggestion strings.
     */
    displaySuggestions(suggestions) {
        // Remove previous suggestions if any
        const existingSuggestions = this.storyContainer.querySelector('.suggestions');
        if (existingSuggestions) {
            existingSuggestions.remove();
        }

        const element = document.createElement('div');
        element.className = 'suggestions';

        const heading = document.createElement('p');
        heading.textContent = 'Suggestions:'; // TODO: Localize
        heading.style.fontStyle = 'italic';
        heading.style.marginTop = '1em';
        element.appendChild(heading);

        const list = document.createElement('ul');
        suggestions.forEach(suggestion => {
            const item = document.createElement('li');
            item.textContent = suggestion;
            item.style.cursor = 'pointer';
            item.addEventListener('click', () => {
                this.inputHandler.setValue(suggestion); // Set input value
                this.submitCommand(suggestion); // Submit immediately
            });
            list.appendChild(item);
        });
        element.appendChild(list);

        this.storyContainer.appendChild(element);
        this.scrollToBottom();
    }

    /** Displays a "Thinking..." indicator. */
    displayThinkingIndicator() {
        this.removeThinkingIndicator(); // Ensure only one exists
        const id = 'thinking-' + Date.now();
        const element = document.createElement('div');
        element.id = id;
        element.className = 'thinking';
        element.innerHTML = '<p>Thinking<span class="loading-indicator"><span>.</span><span>.</span><span>.</span></span></p>'; // TODO: Localize
        this.storyContainer.appendChild(element);
        this.scrollToBottom();
    }

    /** Removes the "Thinking..." indicator. */
    removeThinkingIndicator() {
        const thinkingElement = this.storyContainer.querySelector('.thinking');
        if (thinkingElement) {
            thinkingElement.remove();
        }
    }

    /** Clears the main story display area. */
    clearStoryDisplay() {
        // Clear story container
        while (this.storyContainer.firstChild) {
            this.storyContainer.removeChild(this.storyContainer.firstChild);
        }
        // Optionally clear command history as well, or keep it
        // while (this.commandHistoryContainer.firstChild) {
        //     this.commandHistoryContainer.removeChild(this.commandHistoryContainer.firstChild);
        // }
    }

    /** Scrolls the main content area to the bottom. */
    scrollToBottom() {
        // Scroll the right page (story container's parent)
        const rightPage = document.getElementById('page_right');
        if (rightPage) {
            // Use setTimeout to ensure rendering is complete before scrolling
            setTimeout(() => {
                rightPage.scrollTop = rightPage.scrollHeight;
            }, 50); // Small delay
        }
    }

    /** Binds global event listeners like focus management. */
    bindGlobalEvents() {
        // Basic focus management: click anywhere focuses input unless on interactive element
        document.addEventListener('click', (e) => {
            if (
                e.target.tagName !== 'BUTTON' &&
                e.target.tagName !== 'A' &&
                e.target.tagName !== 'INPUT' && // Allow range slider interaction
                !e.target.closest('.suggestions li') && // Allow clicking suggestions
                e.target !== this.inputHandler.playerInput // Don't refocus if already clicking input
            ) {
                this.inputHandler.focus();
            }
        });

        // Refocus on window visibility change
         window.addEventListener('focus', () => this.inputHandler.focus());
         window.addEventListener('visibilitychange', () => {
             if (document.visibilityState === 'visible') {
                 setTimeout(() => this.inputHandler.focus(), 100);
             }
         });
    }

    /**
     * Start the application: Load all modules, then connect socket and set up UI
     */
    async start() {
        try {
            // 1. Initialize UI components first (non-linguistic)
            this.uiController.setupEventListeners();
            this.uiController.updateBookDimensions();
            this.uiController.updateParagraphHeight();

            const initialQueueSpeed = Math.pow(100.0 - (this.config.initialSpeed || 50), 3) / 10000 * 10 + 0.01;
            this.animationQueue.setSpeed(initialQueueSpeed);
            this.uiController.updateSpeedDisplay(this.config.initialSpeed || 50);
            
            this.loadingOverlay.updateProgressItem('components', 60, false);
            this.componentsReady = true;

            // 2. Load and initialize the hyphenation engine
            this.loadingOverlay.updateProgressItem('hyphenation', 20, false);
            await this.initializeHyphenation();
            this.loadingOverlay.updateProgressItem('hyphenation', 100, true);
            this.hyphenationReady = true;

            // 3. The TTS system is initialized separately through events
            // We're already listening for the 'tts-ready' event in listenForTTSReady()
            
            // 4. Mark UI as ready
            this.loadingOverlay.updateProgressItem('ui', 80, false);
            this.uiReady = true;
            
            // 5. Connect to the socket server and wait for connection
            this.loadingOverlay.updateProgressItem('socket', 50, false);
            await this.connectToServer();
            
            // Everything is now loaded, we can check initialization state
            // This will hide the loading overlay when all components are ready
            this.checkInitializationComplete();
            
            // UI resize may be needed after everything is loaded
            this.uiController.handleWindowResize();
        } catch (error) {
            console.error("Error during application startup:", error);
            // Display error message to user
            if (this.storyContainer) {
                const errorElement = document.createElement('div');
                errorElement.className = 'system-error';
                errorElement.textContent = `Failed to start application: ${error.message}`;
                this.storyContainer.appendChild(errorElement);
            }
            
            // Hide loading overlay anyway
            this.loadingOverlay.hide();
        }
    }

    /**
     * Initialize and load hyphenation engine
     * @returns {Promise} Resolves when hyphenation is ready
     */
    async initializeHyphenation() {
        try {
            this.loadingOverlay.updateProgressItem('hyphenation', 30, false, 'Loading hyphenation engine...');
            
            // Import the hyphenopoly module
            const hyphenopoly = await import('./hyphenopoly.module.js').then(module => module.default);
            this.loadingOverlay.updateProgressItem('hyphenation', 50, false, 'Configuring hyphenation patterns...');
            
            // Configure the hyphenator with proper exceptions to demonstrate it's working
            const hyphenatorConfig = hyphenopoly.config({
                "require": ["en-us"],
                "hyphen": "|",
                "minWordLength": 4,
                "exceptions": {
                    "en-us": "aban|doned, vic|to|ri|an, man|sion, stand|ing, im|pos|ing, ex|am|ine"
                },
                "loader": async (file, patDir) => {
                    console.log(`Loading pattern file: ${patDir}${file}`);
                    try {
                        const response = await fetch(`${patDir}${file}`);
                        if (!response.ok) {
                            throw new Error(`Failed to fetch ${file}: ${response.status}`);
                        }
                        return response.arrayBuffer();
                    } catch (error) {
                        console.error(`Error loading pattern file ${file}:`, error);
                        throw error;
                    }
                }
            });
            
            this.loadingOverlay.updateProgressItem('hyphenation', 80, false, 'Getting hyphenation function...');
            
            // Get the hyphenateText function for en-us and await it
            const hyphenateFunction = await hyphenatorConfig.get("en-us");
            
            // Test the hyphenator to verify it works
            const testWord = "abandoned";
            const hyphenatedTest = hyphenateFunction(testWord);
            console.log(`Hyphenation test: "${testWord}" → "${hyphenatedTest}"`);
            
            // Create a wrapper function for our text processor that properly handles errors
            const hyphenateWrapper = (text) => {
                try {
                    return hyphenateFunction(text);
                } catch (error) {
                    console.error("Hyphenation error:", error);
                    return text; // Return original text on error
                }
            };
            
            // Set the hyphenator on the text processor
            this.textProcessor.setHyphenator(hyphenateWrapper);
            console.log("Hyphenator successfully set on text processor");
            
            this.loadingOverlay.updateProgressItem('hyphenation', 100, true, 'Hyphenation ready');
            return true;
        } catch (error) {
            console.error("Failed to initialize hyphenation:", error);
            this.loadingOverlay.updateProgressItem('hyphenation', 100, true, 'Hyphenation failed, continuing anyway');
            // We'll continue without hyphenation rather than blocking the app
            return false;
        }
    }

    /**
     * Connect to the socket server
     * @returns {Promise} Resolves when socket is connected
     */
    connectToServer() {
        return new Promise((resolve) => {
            console.log("AnimatedFiction: Connecting to server...");
            this.loadingOverlay.updateProgressItem('socket', 50, false, 'Connecting to server...');
            
            // Set up a connection handler that resolves the promise
            const connectionHandler = () => {
                console.log("AnimatedFiction: Socket connected successfully.");
                this.loadingOverlay.updateProgressItem('socket', 100, true, 'Connected to server');
                this.socketClient.off('connect', connectionHandler);
                resolve();
            };
            
            // Set up an error handler
            const errorHandler = (error) => {
                console.error("AnimatedFiction: Socket connection failed:", error);
                this.loadingOverlay.updateProgressItem('socket', 100, true, 'Connection failed, will retry');
                // We resolve anyway to not block the app
                this.socketClient.off('connect_error', errorHandler);
                resolve();
            };
            
            // Connect to socket server
            this.socketClient.on('connect', connectionHandler);
            this.socketClient.on('connect_error', errorHandler);
            this.socketClient.connect();
            
            // Set a timeout to resolve anyway after 5 seconds
            setTimeout(() => {
                this.socketClient.off('connect', connectionHandler);
                this.socketClient.off('connect_error', errorHandler);
                console.warn("AnimatedFiction: Socket connection timeout, continuing anyway");
                this.loadingOverlay.updateProgressItem('socket', 100, true, 'Connection timeout, will retry later');
                resolve();
            }, 5000);
        });
    }

    /**
     * Check if all initialization tasks are complete and hide loading overlay if so
     */
    checkInitializationComplete() {
        // We require core components, hyphenation and UI to be ready
        // TTS is optional and can continue loading in the background
        if (this.componentsReady && this.hyphenationReady && this.uiReady) {
            console.log("AnimatedFiction: All required initialization tasks complete, hiding loading overlay");
            
            // Update UI progress item and mark as complete
            this.loadingOverlay.updateProgressItem('ui', 100, true);
            
            // Hide the loading overlay with fade-out animation
            this.loadingOverlay.hide(() => {
                console.log("AnimatedFiction: Loading overlay hidden, starting game");
                
                // Focus the input handler once the overlay is gone
                if (this.inputHandler) {
                    this.inputHandler.focus();
                }
            });
        } else {
            console.log("AnimatedFiction: Waiting for initialization to complete", 
                        "Components ready:", this.componentsReady,
                        "Hyphenation ready:", this.hyphenationReady, 
                        "UI ready:", this.uiReady,
                        "TTS ready:", this.ttsReady);
        }
    }

    /**
     * Initialize the options UI with available TTS systems
     * @param {Object} availableSystems - Object containing available TTS systems
     */
    initializeOptionsUI(availableSystems) {
        // Create options button if it doesn't exist
        if (!document.getElementById('options')) {
            const optionsButton = document.createElement('button');
            optionsButton.id = 'options';
            optionsButton.className = 'l10n-options';
            optionsButton.title = 'Open options menu';
            optionsButton.innerText = 'options';
            optionsButton.style.order = '5'; // Position it in the control bar
            
            // Add to control bar
            const controlBar = document.querySelector('.control-bar');
            if (controlBar) {
                controlBar.appendChild(optionsButton);
            }
        }
        
        // Create and configure the options UI
        this.optionsUI = new OptionsUI({
            persistenceManager: this.persistenceManager,
            ttsPlayer: this.ttsPlayer,
            audioManager: this.audioManager,
            ttsFactory: window.ttsFactory,
            onClose: () => {
                // Handle options UI closed - refresh any UI elements if needed
                if (this.uiController) {
                    this.uiController.refreshFromPreferences();
                }
            }
        });
        
        // Link the options button to the options UI
        this.setupOptionsButton();
        
        // Update available system information
        if (availableSystems && this.optionsUI) {
            // Update the provider selection in the UI with available systems
            console.log("Available TTS systems:", availableSystems);
            
            // Disable unavailable systems in the UI
            for (const system in availableSystems) {
                if (!availableSystems[system]) {
                    console.log(`TTS system ${system} is not available, will be disabled in options`);
                    // The OptionsUI handles this internally
                }
            }
        }
    }

    /**
     * Link the options button to the options UI
     */
    setupOptionsButton() {
        // Get the options button or create it if needed
        let optionsButton = document.getElementById('options');
        if (optionsButton) {
            // Connect options button to the UI
            optionsButton.addEventListener('click', () => {
                if (this.optionsUI) {
                    this.optionsUI.open();
                } else {
                    console.warn("Options UI not initialized yet");
                    // Create options UI if it doesn't exist yet
                    this.initializeOptionsUI();
                }
            });
            console.log("Options button connected to options UI");
        } else {
            console.warn("Options button not found in DOM");
        }
    }
}

/**
 * Initialize the application when the window loads
 */
window.addEventListener('load', async () => {
    // Define translations
    const translations = {
        'en-us': {
            by: "powered by Generative AI", // Updated
            speed: "speed<sup>*</sup>", // Simpler superscript
            title_speed: "Set speed of text animation",
            restart: "restart",
            title_restart: "Restart game from beginning", // Clarified
            save: "save",
            title_save: "Save progress",
            load: "load",
            title_load: "Reload from save point",
            prompt: "What do you want to do next?", // Changed from italic
            remark: "<i><sup>*</sup>click on page or press spacebar to fast forward text animation</i>", // Simplified
            end: "The End", // Keep for potential future use
            // Action prompts might not be needed for socket version, keep for now
            action_examine: "Examine",
            action_comment: "Comment",
            action_ask: "Ask",
            action_interact: "Interact",
            action_reflect: "Reflect",
            action_inventory: "Inventory",
            speech: "speech", // Lowercase to match button style
            title_speech: "Toggle text to speech",
            system_error: "Error", // Added
            system_connecting: "Connecting...", // Added
            system_thinking: "Thinking", // Added
            system_suggestions: "Suggestions:", // Added
            system_save_ok: "Game saved.", // Added
            system_load_ok: "Game loaded.", // Added
            system_connection_lost: "Connection lost.", // Added
            system_restarting: "Restarting game..." // Added
        },
        'de': { // Keep German translations, update/add as needed
            by: "powered by Generative AI",
            speed: "Geschwindigkeit<sup>*</sup>",
            title_speed: "Geschwindigkeit der Textanimation einstellen",
            restart: "Neustart",
            title_restart: "Spiel von vorne beginnen",
            save: "Speichern",
            title_save: "Fortschritt speichern",
            load: "Laden",
            title_load: "Gespeicherten Spielstand laden",
            prompt: "Was möchtest du als Nächstes tun?",
            remark: "<i><sup>*</sup>Klicke auf die Seite oder drücke die Leertaste, um die Textanimation zu beschleunigen</i>",
            end: "Ende",
            action_examine: "Untersuchen",
            action_comment: "Kommentieren",
            action_ask: "Fragen",
            action_interact: "Interagieren",
            action_reflect: "Nachdenken",
            action_inventory: "Inventar",
            speech: "Sprache",
            title_speech: "Sprachausgabe umschalten",
            system_error: "Fehler",
            system_connecting: "Verbinde...",
            system_thinking: "Denke nach",
            system_suggestions: "Vorschläge:",
            system_save_ok: "Spiel gespeichert.",
            system_load_ok: "Spiel geladen.",
            system_connection_lost: "Verbindung verloren.",
            system_restarting: "Starte Spiel neu..."
        }
    };

    // Create and initialize the application
    window.app = new AnimatedFiction({
        storyContainerId: 'story',
        commandHistoryContainerId: 'command_history', 
        initialSpeed: 50,
        locale: window.locale || 'en-us',
        translations: translations
    });

    // Start the application with proper async initialization
    await window.app.start();
});