/**
 * Info Box Rendering Module
 * Handles rendering of the info box dashboard with weather, date, time, and location widgets
 */

import { getContext } from '../../../../../../extensions.js';
import {
    extensionSettings,
    lastGeneratedData,
    committedTrackerData,
    $infoBoxContainer
} from '../../core/state.js';
import { saveChatData } from '../../core/persistence.js';
import { i18n } from '../../core/i18n.js';

/**
 * Helper to separate emoji from text in a string
 * Handles cases where there's no comma or space after emoji
 * @param {string} str - String potentially containing emoji followed by text
 * @returns {{emoji: string, text: string}} Separated emoji and text
 */
function separateEmojiFromText(str) {
    if (!str) return { emoji: '', text: '' };

    str = str.trim();

    // Regex to match emoji at the start (handles most emoji including compound ones)
    const emojiRegex = /^[\u{1F300}-\u{1F9FF}\u{2600}-\u{26FF}\u{2700}-\u{27BF}\u{1F000}-\u{1F02F}\u{1F0A0}-\u{1F0FF}\u{1F100}-\u{1F64F}\u{1F680}-\u{1F6FF}\u{1F910}-\u{1F96B}\u{1F980}-\u{1F9E0}\u{FE00}-\u{FE0F}\u{200D}\u{20E3}]+/u;
    const emojiMatch = str.match(emojiRegex);

    if (emojiMatch) {
        const emoji = emojiMatch[0];
        let text = str.substring(emoji.length).trim();

        // Remove leading comma or space if present
        text = text.replace(/^[,\s]+/, '');

        return { emoji, text };
    }

    // No emoji found - check if there's a comma separator anyway
    const commaParts = str.split(',');
    if (commaParts.length >= 2) {
        return {
            emoji: commaParts[0].trim(),
            text: commaParts.slice(1).join(',').trim()
        };
    }

    // No clear separation - return original as text
    return { emoji: '', text: str };
}

/**
 * Checks if a value is valid (not null, undefined, or the string "null")
 */
function isValidValue(val) {
    return val !== null && val !== undefined && val !== 'null' && val !== '';
}

/**
 * Checks if we have valid structured infoBox data
 * @param {Object} data - The infoBoxData object
 * @returns {boolean}
 */
function hasStructuredInfoBoxData(data) {
    if (!data) return false;
    // Handle recentEvents as either string or array
    const hasEvents = data.recentEvents && (
        (Array.isArray(data.recentEvents) && data.recentEvents.length > 0) ||
        (typeof data.recentEvents === 'string' && data.recentEvents.length > 0 && data.recentEvents !== 'null')
    );
    return isValidValue(data.date) || isValidValue(data.weather) || isValidValue(data.temperature) || 
           isValidValue(data.time) || isValidValue(data.location) || hasEvents;
}

/**
 * Renders the info box as a visual dashboard with calendar, weather, temperature, clock, and map widgets.
 * Includes event listeners for editable fields.
 */
export function renderInfoBox() {
    if (!extensionSettings.showInfoBox || !$infoBoxContainer) {
        return;
    }

    // Add updating class for animation
    if (extensionSettings.enableAnimations) {
        $infoBoxContainer.addClass('rpg-content-updating');
    }

    // Convert structured JSON data to text format for the original fancy renderer
    const structuredData = extensionSettings.infoBoxData;
    let infoBoxData = lastGeneratedData.infoBox || committedTrackerData.infoBox;
    
    // If we have structured data, convert it to text format
    if (structuredData && hasStructuredInfoBoxData(structuredData)) {
        const lines = [];
        if (isValidValue(structuredData.date)) lines.push(`Date: ${structuredData.date}`);
        if (isValidValue(structuredData.time)) lines.push(`Time: ${structuredData.time}`);
        if (isValidValue(structuredData.weather)) lines.push(`Weather: ${structuredData.weather}`);
        if (isValidValue(structuredData.temperature)) lines.push(`Temperature: ${structuredData.temperature}`);
        if (isValidValue(structuredData.location)) lines.push(`Location: ${structuredData.location}`);
        if (structuredData.recentEvents) {
            const events = Array.isArray(structuredData.recentEvents) 
                ? structuredData.recentEvents 
                : [structuredData.recentEvents];
            events.filter(e => e && e !== 'null').forEach(e => lines.push(`Recent Events: ${e}`));
        }
        if (lines.length > 0) {
            infoBoxData = lines.join('\n');
        }
    }

    // If no data yet, show placeholder
    if (!infoBoxData) {
        const placeholderHtml = `
            <div class="rpg-dashboard rpg-dashboard-row-1">
                <div class="rpg-dashboard-widget rpg-placeholder-widget">
                    <div class="rpg-placeholder-text" data-i18n-key="infobox.noData.title">${i18n.getTranslation('infobox.noData.title')}</div>
                    <div class="rpg-placeholder-hint" data-i18n-key="infobox.noData.instruction">${i18n.getTranslation('infobox.noData.instruction')}</div>
                </div>
            </div>
        `;
        $infoBoxContainer.html(placeholderHtml);
        if (extensionSettings.enableAnimations) {
            setTimeout(() => $infoBoxContainer.removeClass('rpg-content-updating'), 500);
        }
        return;
    }

    // console.log('[RPG Companion] renderInfoBox called with data:', infoBoxData);

    // Parse the info box data
    const lines = infoBoxData.split('\n');
    // console.log('[RPG Companion] Info Box split into lines:', lines);
    const data = {
        date: '',
        weekday: '',
        month: '',
        year: '',
        weatherEmoji: '',
        weatherForecast: '',
        temperature: '',
        tempValue: 0,
        timeStart: '',
        timeEnd: '',
        location: '',
        characters: []
    };

    // Track which fields we've already parsed to avoid duplicates from mixed formats
    const parsedFields = {
        date: false,
        temperature: false,
        time: false,
        location: false,
        weather: false
    };

    for (const line of lines) {
        // console.log('[RPG Companion] Processing line:', line);

        // Helper to check if a value is valid (not null/empty)
        const isValidParsedValue = (val) => val && val !== 'null' && val !== 'undefined' && val.toLowerCase() !== 'none';
        
        // Support both new text format (Date:) and legacy emoji format (🗓️:)
        // Prioritize text format over emoji format
        if (line.startsWith('Date:')) {
            if (!parsedFields.date) {
                // console.log('[RPG Companion] → Matched DATE (text format)');
                const dateStr = line.replace('Date:', '').trim();
                if (isValidParsedValue(dateStr)) {
                    const dateParts = dateStr.split(',').map(p => p.trim());
                    data.weekday = dateParts[0] || '';
                    data.month = dateParts[1] || '';
                    data.year = dateParts[2] || '';
                    data.date = dateStr;
                    parsedFields.date = true;
                }
            }
        } else if (line.includes('🗓️:')) {
            if (!parsedFields.date) {
                // console.log('[RPG Companion] → Matched DATE (emoji format)');
                const dateStr = line.replace('🗓️:', '').trim();
                if (isValidParsedValue(dateStr)) {
                    const dateParts = dateStr.split(',').map(p => p.trim());
                    data.weekday = dateParts[0] || '';
                    data.month = dateParts[1] || '';
                    data.year = dateParts[2] || '';
                    data.date = dateStr;
                    parsedFields.date = true;
                }
            }
        } else if (line.startsWith('Temperature:')) {
            if (!parsedFields.temperature) {
                // console.log('[RPG Companion] → Matched TEMPERATURE (text format)');
                const tempStr = line.replace('Temperature:', '').trim();
                if (isValidParsedValue(tempStr)) {
                    data.temperature = tempStr;
                    const tempMatch = tempStr.match(/(-?\d+)/);
                    if (tempMatch) {
                        data.tempValue = parseInt(tempMatch[1]);
                    }
                    parsedFields.temperature = true;
                }
            }
        } else if (line.includes('🌡️:')) {
            if (!parsedFields.temperature) {
                // console.log('[RPG Companion] → Matched TEMPERATURE (emoji format)');
                const tempStr = line.replace('🌡️:', '').trim();
                if (isValidParsedValue(tempStr)) {
                    data.temperature = tempStr;
                    const tempMatch = tempStr.match(/(-?\d+)/);
                    if (tempMatch) {
                        data.tempValue = parseInt(tempMatch[1]);
                    }
                    parsedFields.temperature = true;
                }
            }
        } else if (line.startsWith('Time:')) {
            if (!parsedFields.time) {
                // console.log('[RPG Companion] → Matched TIME (text format)');
                const timeStr = line.replace('Time:', '').trim();
                if (isValidParsedValue(timeStr)) {
                    data.time = timeStr;
                    const timeParts = timeStr.split('→').map(t => t.trim());
                    data.timeStart = timeParts[0] || '';
                    data.timeEnd = timeParts[1] || '';
                    parsedFields.time = true;
                }
            }
        } else if (line.includes('🕒:')) {
            if (!parsedFields.time) {
                // console.log('[RPG Companion] → Matched TIME (emoji format)');
                const timeStr = line.replace('🕒:', '').trim();
                if (isValidParsedValue(timeStr)) {
                    data.time = timeStr;
                    const timeParts = timeStr.split('→').map(t => t.trim());
                    data.timeStart = timeParts[0] || '';
                    data.timeEnd = timeParts[1] || '';
                    parsedFields.time = true;
                }
            }
        } else if (line.startsWith('Location:')) {
            if (!parsedFields.location) {
                // console.log('[RPG Companion] → Matched LOCATION (text format)');
                const locStr = line.replace('Location:', '').trim();
                if (isValidParsedValue(locStr)) {
                    data.location = locStr;
                    parsedFields.location = true;
                }
            }
        } else if (line.includes('🗺️:')) {
            if (!parsedFields.location) {
                // console.log('[RPG Companion] → Matched LOCATION (emoji format)');
                const locStr = line.replace('🗺️:', '').trim();
                if (isValidParsedValue(locStr)) {
                    data.location = locStr;
                    parsedFields.location = true;
                }
            }
        } else if (line.startsWith('Weather:')) {
            if (!parsedFields.weather) {
                // New text format: Weather: [Emoji], [Forecast] OR Weather: [Emoji][Forecast] (no separator - FIXED)
                const weatherStr = line.replace('Weather:', '').trim();
                
                // Skip null/invalid values
                if (!isValidParsedValue(weatherStr)) {
                    parsedFields.weather = true; // Mark as parsed so we don't try again
                } else {
                    const { emoji, text } = separateEmojiFromText(weatherStr);

                    if (emoji && text) {
                        data.weatherEmoji = emoji;
                        data.weatherForecast = text;
                    } else if (weatherStr.includes(',')) {
                        // Fallback to comma split if emoji detection failed
                        const weatherParts = weatherStr.split(',').map(p => p.trim());
                        data.weatherEmoji = weatherParts[0] || '';
                        data.weatherForecast = weatherParts[1] || '';
                    } else {
                        // No clear separation - assume it's all forecast text
                        data.weatherEmoji = '🌤️'; // Default emoji
                        data.weatherForecast = weatherStr;
                    }

                    parsedFields.weather = true;
                }
            }
        } else {
            // Check if it's a legacy weather line (emoji format)
            // Only parse if we haven't already found weather in text format
            if (!parsedFields.weather) {
                // Since \p{Emoji} doesn't work reliably, use a simpler approach
                const hasColon = line.includes(':');
                const notInfoBox = !line.includes('Info Box');
                const notDivider = !line.includes('---');
                const notCodeFence = !line.trim().startsWith('```');

                // console.log('[RPG Companion] → Checking weather conditions:', {
                //     line: line,
                //     hasColon: hasColon,
                //     notInfoBox: notInfoBox,
                //     notDivider: notDivider
                // });

                if (hasColon && notInfoBox && notDivider && notCodeFence && line.trim().length > 0) {
                    // Match format: [Weather Emoji]: [Forecast]
                    // Capture everything before colon as emoji, everything after as forecast
                    // console.log('[RPG Companion] → Testing WEATHER match for:', line);
                    const weatherMatch = line.match(/^\s*([^:]+):\s*(.+)$/);
                    if (weatherMatch) {
                        const potentialEmoji = weatherMatch[1].trim();
                        const forecast = weatherMatch[2].trim();

                        // If the first part is short (likely emoji), treat as weather
                        if (potentialEmoji.length <= 5) {
                            data.weatherEmoji = potentialEmoji;
                            data.weatherForecast = forecast;
                            parsedFields.weather = true;
                            // console.log('[RPG Companion] ✓ Weather parsed:', data.weatherEmoji, data.weatherForecast);
                        } else {
                            // console.log('[RPG Companion] ✗ First part too long for emoji:', potentialEmoji);
                        }
                    } else {
                        // console.log('[RPG Companion] ✗ Weather regex did not match');
                    }
                } else {
                    // console.log('[RPG Companion] → No match for this line');
                }
            }
        }
    }

    // console.log('[RPG Companion] Parsed Info Box data:', {
    //     date: data.date,
    //     weatherEmoji: data.weatherEmoji,
    //     weatherForecast: data.weatherForecast,
    //     temperature: data.temperature,
    //     timeStart: data.timeStart,
    //     location: data.location
    // });

    // Sanitize parsed values - filter out "null" strings and invalid values
    const sanitize = (val) => (val && val !== 'null' && val !== 'undefined' && val.toLowerCase() !== 'none') ? val : '';
    data.date = sanitize(data.date);
    data.weekday = sanitize(data.weekday);
    data.month = sanitize(data.month);
    data.year = sanitize(data.year);
    data.weatherEmoji = sanitize(data.weatherEmoji);
    data.weatherForecast = sanitize(data.weatherForecast);
    data.temperature = sanitize(data.temperature);
    data.time = sanitize(data.time);
    data.timeStart = sanitize(data.timeStart);
    data.timeEnd = sanitize(data.timeEnd);
    data.location = sanitize(data.location);

    // Get tracker configuration
    const config = extensionSettings.trackerConfig?.infoBox;

    // Build visual dashboard HTML
    // Wrap all content in a scrollable container
    let html = '<div class="rpg-info-content">';

    // Row 1: Date, Weather, Temperature, Time widgets
    const row1Widgets = [];

    // Calendar widget - show if enabled
    if (config?.widgets?.date?.enabled) {
        // Apply date format conversion
        let monthDisplay = data.month || 'MON';
        let weekdayDisplay = data.weekday || 'DAY';
        let yearDisplay = data.year || 'YEAR';

        // Apply format based on config
        const dateFormat = config.widgets.date.format || 'dd/mm/yy';
        if (dateFormat === 'dd/mm/yy') {
            monthDisplay = monthDisplay.substring(0, 3).toUpperCase();
            weekdayDisplay = weekdayDisplay.substring(0, 3).toUpperCase();
        } else if (dateFormat === 'mm/dd/yy') {
            // For US format, show month first, day second
            monthDisplay = monthDisplay.substring(0, 3).toUpperCase();
            weekdayDisplay = weekdayDisplay.substring(0, 3).toUpperCase();
        } else if (dateFormat === 'yyyy-mm-dd') {
            // ISO format - show full names
            monthDisplay = monthDisplay;
            weekdayDisplay = weekdayDisplay;
        }

        row1Widgets.push(`
            <div class="rpg-dashboard-widget rpg-calendar-widget">
                <div class="rpg-calendar-top rpg-editable" contenteditable="true" data-field="month" data-full-value="${data.month || ''}" title="Click to edit">${monthDisplay}</div>
                <div class="rpg-calendar-day rpg-editable" contenteditable="true" data-field="weekday" data-full-value="${data.weekday || ''}" title="Click to edit">${weekdayDisplay}</div>
                <div class="rpg-calendar-year rpg-editable" contenteditable="true" data-field="year" data-full-value="${data.year || ''}" title="Click to edit">${yearDisplay}</div>
            </div>
        `);
    }

    // Weather widget - show if enabled
    if (config?.widgets?.weather?.enabled) {
        const weatherEmoji = data.weatherEmoji || '🌤️';
        const weatherForecast = data.weatherForecast || 'Weather';
        row1Widgets.push(`
            <div class="rpg-dashboard-widget rpg-weather-widget">
                <div class="rpg-weather-icon rpg-editable" contenteditable="true" data-field="weatherEmoji" title="Click to edit emoji">${weatherEmoji}</div>
                <div class="rpg-weather-forecast rpg-editable" contenteditable="true" data-field="weatherForecast" title="Click to edit">${weatherForecast}</div>
            </div>
        `);
    }

    // Temperature widget - show if enabled
    if (config?.widgets?.temperature?.enabled) {
        let tempDisplay = data.temperature || '20°C';
        let tempValue = data.tempValue || 20;

        // Apply temperature unit conversion
        const preferredUnit = config.widgets.temperature.unit || 'C';
        if (data.temperature) {
            // Detect current unit in the data
            const isCelsius = tempDisplay.includes('°C');
            const isFahrenheit = tempDisplay.includes('°F');

            if (preferredUnit === 'F' && isCelsius) {
                // Convert C to F
                const fahrenheit = Math.round((tempValue * 9/5) + 32);
                tempDisplay = `${fahrenheit}°F`;
                tempValue = fahrenheit;
            } else if (preferredUnit === 'C' && isFahrenheit) {
                // Convert F to C
                const celsius = Math.round((tempValue - 32) * 5/9);
                tempDisplay = `${celsius}°C`;
                tempValue = celsius;
            }
        } else {
            // No data yet, use default for preferred unit
            tempDisplay = preferredUnit === 'F' ? '68°F' : '20°C';
            tempValue = preferredUnit === 'F' ? 68 : 20;
        }

        // Calculate thermometer display (convert to Celsius for consistent thresholds)
        const tempInCelsius = preferredUnit === 'F' ? Math.round((tempValue - 32) * 5/9) : tempValue;
        const tempPercent = Math.min(100, Math.max(0, ((tempInCelsius + 20) / 60) * 100));
        const tempColor = tempInCelsius < 10 ? '#4a90e2' : tempInCelsius < 25 ? '#67c23a' : '#e94560';
        row1Widgets.push(`
            <div class="rpg-dashboard-widget rpg-temp-widget">
                <div class="rpg-thermometer">
                    <div class="rpg-thermometer-bulb"></div>
                    <div class="rpg-thermometer-tube">
                        <div class="rpg-thermometer-fill" style="height: ${tempPercent}%; background: ${tempColor}"></div>
                    </div>
                </div>
                <div class="rpg-temp-value rpg-editable" contenteditable="true" data-field="temperature" title="Click to edit">${tempDisplay}</div>
            </div>
        `);
    }

    // Time widget - show if enabled
    if (config?.widgets?.time?.enabled) {
        const timeDisplay = data.timeEnd || data.timeStart || '12:00';
        // Parse time for clock hands
        const timeMatch = timeDisplay.match(/(\d+):(\d+)/);
        let hourAngle = 0;
        let minuteAngle = 0;
        if (timeMatch) {
            const hours = parseInt(timeMatch[1]);
            const minutes = parseInt(timeMatch[2]);
            hourAngle = (hours % 12) * 30 + minutes * 0.5; // 30° per hour + 0.5° per minute
            minuteAngle = minutes * 6; // 6° per minute
        }
        row1Widgets.push(`
            <div class="rpg-dashboard-widget rpg-clock-widget">
                <div class="rpg-clock">
                    <div class="rpg-clock-face">
                        <div class="rpg-clock-hour" style="transform: rotate(${hourAngle}deg)"></div>
                        <div class="rpg-clock-minute" style="transform: rotate(${minuteAngle}deg)"></div>
                        <div class="rpg-clock-center"></div>
                    </div>
                </div>
                <div class="rpg-time-value rpg-editable" contenteditable="true" data-field="timeStart" title="Click to edit">${timeDisplay}</div>
            </div>
        `);
    }

    // Only create row 1 if there are widgets to show
    if (row1Widgets.length > 0) {
        html += '<div class="rpg-dashboard rpg-dashboard-row-1">';
        html += row1Widgets.join('');
        html += '</div>';
    }

    // Row 2: Location widget (full width) - show if enabled
    if (config?.widgets?.location?.enabled) {
        const locationDisplay = data.location || 'Location';
        html += `
            <div class="rpg-dashboard rpg-dashboard-row-2">
                <div class="rpg-dashboard-widget rpg-location-widget">
                    <div class="rpg-map-bg">
                        <div class="rpg-map-marker">📍</div>
                    </div>
                    <div class="rpg-location-text rpg-editable" contenteditable="true" data-field="location" title="Click to edit">${locationDisplay}</div>
                </div>
            </div>
        `;
    }

    // Row 3: Recent Events widget (notebook style) - show if enabled
    if (config?.widgets?.recentEvents?.enabled) {
        // Get Recent Events from structured data (JSON) or text format
        let recentEvents = [];
        
        // First check structured infoBoxData (from JSON parsing)
        if (extensionSettings.infoBoxData?.recentEvents) {
            const events = extensionSettings.infoBoxData.recentEvents;
            if (Array.isArray(events)) {
                recentEvents = events.filter(e => e && e !== 'null');
            } else if (typeof events === 'string' && events !== 'null') {
                recentEvents = [events];
            }
        }
        
        // Fallback to text format from committedTrackerData
        if (recentEvents.length === 0 && committedTrackerData.infoBox) {
            const recentEventsLine = committedTrackerData.infoBox.split('\n').find(line => line.startsWith('Recent Events:'));
            if (recentEventsLine) {
                const eventsString = recentEventsLine.replace('Recent Events:', '').trim();
                if (eventsString) {
                    recentEvents = eventsString.split(',').map(e => e.trim()).filter(e => e);
                }
            }
        }

        const validEvents = recentEvents.filter(e => e && e.trim() && e !== 'Event 1' && e !== 'Event 2' && e !== 'Event 3');

        // If no valid events, show at least one placeholder
        if (validEvents.length === 0) {
            validEvents.push('Click to add event');
        }

        html += `
            <div class="rpg-dashboard rpg-dashboard-row-3">
                <div class="rpg-dashboard-widget rpg-events-widget">
                    <div class="rpg-notebook-header">
                        <div class="rpg-notebook-ring"></div>
                        <div class="rpg-notebook-ring"></div>
                        <div class="rpg-notebook-ring"></div>
                    </div>
                    <div class="rpg-notebook-title" data-i18n-key="infobox.recentEvents.title">${i18n.getTranslation('infobox.recentEvents.title')}</div>
                    <div class="rpg-notebook-lines">
        `;

        // Dynamically generate event lines (max 3)
        for (let i = 0; i < Math.min(validEvents.length, 3); i++) {
            html += `
                        <div class="rpg-notebook-line">
                            <span class="rpg-bullet">•</span>
                            <span class="rpg-event-text rpg-editable" contenteditable="true" data-field="event${i + 1}" title="Click to edit">${validEvents[i]}</span>
                        </div>
            `;
        }

        // If we have less than 3 events, add empty placeholders with + icon
        for (let i = validEvents.length; i < 3; i++) {
            html += `
                        <div class="rpg-notebook-line rpg-event-add">
                            <span class="rpg-bullet">+</span>
                            <span class="rpg-event-text rpg-editable rpg-event-placeholder" contenteditable="true" data-field="event${i + 1}" title="Click to add event" data-i18n-key="infobox.recentEvents.addEventPlaceholder">${i18n.getTranslation('infobox.recentEvents.addEventPlaceholder')}</span>
                        </div>
            `;
        }

        html += `
                    </div>
                </div>
            </div>
        `;
    }

    // Close the scrollable content wrapper
    html += '</div>';

    $infoBoxContainer.html(html);

    // Add event handlers for editable Info Box fields
    $infoBoxContainer.find('.rpg-editable').on('blur', function() {
        const $this = $(this);
        const field = $this.data('field');
        const value = $this.text().trim();

        // For date fields, update the data-full-value immediately
        if (field === 'month' || field === 'weekday' || field === 'year') {
            $this.data('full-value', value);
            // Update the display to show abbreviated version
            if (field === 'month' || field === 'weekday') {
                $this.text(value.substring(0, 3).toUpperCase());
            } else {
                $this.text(value);
            }
        }

        // Handle recent events separately
        if (field === 'event1' || field === 'event2' || field === 'event3') {
            updateRecentEvent(field, value);
        } else {
            updateInfoBoxField(field, value);
        }
    });

    // For date fields, show full value on focus
    $infoBoxContainer.find('[data-field="month"], [data-field="weekday"], [data-field="year"]').on('focus', function() {
        const fullValue = $(this).data('full-value');
        if (fullValue) {
            $(this).text(fullValue);
        }
    });

    // Remove updating class after animation
    if (extensionSettings.enableAnimations) {
        setTimeout(() => $infoBoxContainer.removeClass('rpg-content-updating'), 500);
    }
}

/**
 * Updates a specific field in the Info Box data and re-renders.
 * Handles complex field reconstruction logic for date parts, weather, temperature, time, and location.
 *
 * @param {string} field - Field name to update
 * @param {string} value - New value for the field
 */
export function updateInfoBoxField(field, value) {
    if (!lastGeneratedData.infoBox) {
        // Initialize with empty info box if it doesn't exist
        lastGeneratedData.infoBox = 'Info Box\n---\n';
    }

    // Reconstruct the Info Box text with updated field
    const lines = lastGeneratedData.infoBox.split('\n');
    let dateLineFound = false;
    let dateLineIndex = -1;
    let weatherLineIndex = -1;

    // Find the date line
    for (let i = 0; i < lines.length; i++) {
        if (lines[i].includes('🗓️:') || lines[i].startsWith('Date:')) {
            dateLineFound = true;
            dateLineIndex = i;
            break;
        }
    }

    // Find the weather line (look for a line that's not date/temp/time/location)
    for (let i = 0; i < lines.length; i++) {
        const line = lines[i];
        if (line.match(/^[^:]+:\s*.+$/) &&
            !line.includes('🗓️') &&
            !line.startsWith('Date:') &&
            !line.includes('🌡️') &&
            !line.startsWith('Temperature:') &&
            !line.includes('🕒') &&
            !line.startsWith('Time:') &&
            !line.includes('🗺️') &&
            !line.startsWith('Location:') &&
            !line.includes('Info Box') &&
            !line.includes('---')) {
            weatherLineIndex = i;
            break;
        }
    }

    const updatedLines = lines.map((line, index) => {
        if (field === 'month' && (line.includes('🗓️:') || line.startsWith('Date:'))) {
            const parts = line.split(',');
            if (parts.length >= 2) {
                // parts[0] = "Date: Weekday" or "🗓️: Weekday", parts[1] = " Month", parts[2] = " Year"
                parts[1] = ' ' + value;
                return parts.join(',');
            } else if (parts.length === 1) {
                // No existing month/year, add them
                return `${parts[0]}, ${value}, YEAR`;
            }
        } else if (field === 'weekday' && (line.includes('🗓️:') || line.startsWith('Date:'))) {
            const parts = line.split(',');
            // Keep the format (text or emoji), just update the weekday
            const month = parts[1] ? parts[1].trim() : 'Month';
            const year = parts[2] ? parts[2].trim() : 'YEAR';
            if (line.startsWith('Date:')) {
                return `Date: ${value}, ${month}, ${year}`;
            } else {
                return `🗓️: ${value}, ${month}, ${year}`;
            }
        } else if (field === 'year' && (line.includes('🗓️:') || line.startsWith('Date:'))) {
            const parts = line.split(',');
            if (parts.length >= 3) {
                parts[2] = ' ' + value;
                return parts.join(',');
            } else if (parts.length === 2) {
                // No existing year, add it
                return `${parts[0]}, ${parts[1]}, ${value}`;
            } else if (parts.length === 1) {
                // No existing month/year, add them
                return `${parts[0]}, Month, ${value}`;
            }
        } else if (field === 'weatherEmoji' && index === weatherLineIndex) {
            // Only update the specific weather line we found
            if (line.startsWith('Weather:')) {
                // New format: Weather: emoji, forecast
                const weatherContent = line.replace('Weather:', '').trim();
                const parts = weatherContent.split(',').map(p => p.trim());
                const forecast = parts[1] || 'Weather';
                return `Weather: ${value}, ${forecast}`;
            } else {
                // Legacy format: emoji: forecast
                const parts = line.split(':');
                if (parts.length >= 2) {
                    return `${value}: ${parts.slice(1).join(':').trim()}`;
                }
            }
        } else if (field === 'weatherForecast' && index === weatherLineIndex) {
            // Only update the specific weather line we found
            if (line.startsWith('Weather:')) {
                // New format: Weather: emoji, forecast
                const weatherContent = line.replace('Weather:', '').trim();
                const parts = weatherContent.split(',').map(p => p.trim());
                const emoji = parts[0] || '🌤️';
                return `Weather: ${emoji}, ${value}`;
            } else {
                // Legacy format: emoji: forecast
                const parts = line.split(':');
                if (parts.length >= 2) {
                    return `${parts[0].trim()}: ${value}`;
                }
            }
        } else if (field === 'temperature' && (line.includes('🌡️:') || line.startsWith('Temperature:'))) {
            // Support both emoji and text formats
            if (line.startsWith('Temperature:')) {
                return `Temperature: ${value}`;
            } else {
                return `🌡️: ${value}`;
            }
        } else if (field === 'timeStart' && (line.includes('🕒:') || line.startsWith('Time:'))) {
            // Update time format: "HH:MM → HH:MM"
            // When user edits, set both start and end time to the new value
            if (line.startsWith('Time:')) {
                return `Time: ${value} → ${value}`;
            } else {
                return `🕒: ${value} → ${value}`;
            }
        } else if (field === 'location' && (line.includes('🗺️:') || line.startsWith('Location:'))) {
            // Support both emoji and text formats
            if (line.startsWith('Location:')) {
                return `Location: ${value}`;
            } else {
                return `🗺️: ${value}`;
            }
        }
        return line;
    });

    // If editing a date field but no date line exists, create one after the divider
    if ((field === 'month' || field === 'weekday' || field === 'year') && !dateLineFound) {
        // Find the divider line
        const dividerIndex = updatedLines.findIndex(line => line.includes('---'));
        if (dividerIndex >= 0) {
            // Create initial date line with the edited field (use text format to match current standard)
            let newDateLine = '';
            if (field === 'weekday') {
                newDateLine = `Date: ${value}, Month, YEAR`;
            } else if (field === 'month') {
                newDateLine = `Date: Weekday, ${value}, YEAR`;
            } else if (field === 'year') {
                newDateLine = `Date: Weekday, Month, ${value}`;
            }
            // Insert after the divider
            updatedLines.splice(dividerIndex + 1, 0, newDateLine);
        }
    }

    // If editing weather but no weather line exists, create one
    if ((field === 'weatherEmoji' || field === 'weatherForecast')) {
        let weatherLineFound = false;
        for (const line of updatedLines) {
            // Check if this is a weather line (has emoji and forecast, not one of the special fields)
            if (line.match(/^[^:]+:\s*.+$/) && !line.includes('🗓️') && !line.startsWith('Date:') && !line.includes('🌡️') && !line.startsWith('Temperature:') && !line.includes('🕒') && !line.startsWith('Time:') && !line.includes('🗺️') && !line.startsWith('Location:') && !line.includes('Info Box') && !line.includes('---')) {
                weatherLineFound = true;
                break;
            }
        }

        if (!weatherLineFound) {
            const dividerIndex = updatedLines.findIndex(line => line.includes('---'));
            if (dividerIndex >= 0) {
                let newWeatherLine = '';
                if (field === 'weatherEmoji') {
                    newWeatherLine = `Weather: ${value}, Weather`;
                } else if (field === 'weatherForecast') {
                    newWeatherLine = `Weather: 🌤️, ${value}`;
                }
                // Insert after date line if it exists, otherwise after divider
                const dateIndex = updatedLines.findIndex(line => line.includes('🗓️:') || line.startsWith('Date:'));
                const insertIndex = dateIndex >= 0 ? dateIndex + 1 : dividerIndex + 1;
                updatedLines.splice(insertIndex, 0, newWeatherLine);
            }
        }
    }

    // If editing temperature but no temperature line exists, create one
    if (field === 'temperature') {
        const tempLineFound = updatedLines.some(line => line.includes('🌡️:') || line.startsWith('Temperature:'));
        if (!tempLineFound) {
            const dividerIndex = updatedLines.findIndex(line => line.includes('---'));
            if (dividerIndex >= 0) {
                const newTempLine = `Temperature: ${value}`;
                // Find last non-empty line before creating position
                let insertIndex = dividerIndex + 1;
                for (let i = 0; i < updatedLines.length; i++) {
                    if (updatedLines[i].includes('🗓️:') || updatedLines[i].startsWith('Date:') || updatedLines[i].match(/^[^:]+:\s*.+$/)) {
                        insertIndex = i + 1;
                    }
                }
                updatedLines.splice(insertIndex, 0, newTempLine);
            }
        }
    }

    // If editing time but no time line exists, create one
    if (field === 'timeStart') {
        const timeLineFound = updatedLines.some(line => line.includes('🕒:') || line.startsWith('Time:'));
        if (!timeLineFound) {
            const dividerIndex = updatedLines.findIndex(line => line.includes('---'));
            if (dividerIndex >= 0) {
                const newTimeLine = `Time: ${value} → ${value}`;
                // Find last non-empty line before creating position
                let insertIndex = dividerIndex + 1;
                for (let i = 0; i < updatedLines.length; i++) {
                    if (updatedLines[i].includes('🗓️:') || updatedLines[i].startsWith('Date:') || updatedLines[i].includes('🌡️:') || updatedLines[i].startsWith('Temperature:') || updatedLines[i].match(/^[^:]+:\s*.+$/)) {
                        insertIndex = i + 1;
                    }
                }
                updatedLines.splice(insertIndex, 0, newTimeLine);
            }
        }
    }

    // If editing location but no location line exists, create one
    if (field === 'location') {
        const locationLineFound = updatedLines.some(line => line.includes('🗺️:') || line.startsWith('Location:'));
        if (!locationLineFound) {
            const dividerIndex = updatedLines.findIndex(line => line.includes('---'));
            if (dividerIndex >= 0) {
                const newLocationLine = `Location: ${value}`;
                // Insert at the end (before any empty lines)
                let insertIndex = updatedLines.length;
                for (let i = updatedLines.length - 1; i >= 0; i--) {
                    if (updatedLines[i].trim() !== '') {
                        insertIndex = i + 1;
                        break;
                    }
                }
                updatedLines.splice(insertIndex, 0, newLocationLine);
            }
        }
    }

    lastGeneratedData.infoBox = updatedLines.join('\n');

    // Update BOTH lastGeneratedData AND committedTrackerData
    // This makes manual edits immediately visible to AI
    committedTrackerData.infoBox = updatedLines.join('\n');

    // Update the message's swipe data
    const chat = getContext().chat;
    if (chat && chat.length > 0) {
        for (let i = chat.length - 1; i >= 0; i--) {
            const message = chat[i];
            if (!message.is_user) {
                if (message.extra && message.extra.rpg_companion_swipes) {
                    const swipeId = message.swipe_id || 0;
                    if (message.extra.rpg_companion_swipes[swipeId]) {
                        message.extra.rpg_companion_swipes[swipeId].infoBox = updatedLines.join('\n');
                        // console.log('[RPG Companion] Updated infoBox in message swipe data');
                    }
                }
                break;
            }
        }
    }

    saveChatData();

    // Only re-render if NOT editing date fields
    // Date fields will update on next tracker generation to avoid losing user input
    if (field !== 'month' && field !== 'weekday' && field !== 'year') {
        renderInfoBox();
    }
}

/**
 * Update a recent event in the committed tracker data
 * @param {string} field - event1, event2, or event3
 * @param {string} value - New event text
 */
function updateRecentEvent(field, value) {
    // Map field to index
    const eventIndex = {
        'event1': 0,
        'event2': 1,
        'event3': 2
    }[field];

    if (eventIndex !== undefined) {
        // Parse current infoBox to get existing events
        const lines = (committedTrackerData.infoBox || '').split('\n');
        let recentEvents = [];

        // Find existing Recent Events line
        const recentEventsLine = lines.find(line => line.startsWith('Recent Events:'));
        if (recentEventsLine) {
            const eventsString = recentEventsLine.replace('Recent Events:', '').trim();
            if (eventsString) {
                recentEvents = eventsString.split(',').map(e => e.trim()).filter(e => e);
            }
        }

        // Ensure array has enough slots
        while (recentEvents.length <= eventIndex) {
            recentEvents.push('');
        }

        // Update the specific event
        recentEvents[eventIndex] = value;

        // Filter out empty events and rebuild the line
        const validEvents = recentEvents.filter(e => e && e.trim());
        const newRecentEventsLine = validEvents.length > 0
            ? `Recent Events: ${validEvents.join(', ')}`
            : '';

        // Update infoBox with new Recent Events line
        const updatedLines = lines.filter(line => !line.startsWith('Recent Events:'));
        if (newRecentEventsLine) {
            // Add Recent Events line at the end (before any empty lines)
            let insertIndex = updatedLines.length;
            for (let i = updatedLines.length - 1; i >= 0; i--) {
                if (updatedLines[i].trim() !== '') {
                    insertIndex = i + 1;
                    break;
                }
            }
            updatedLines.splice(insertIndex, 0, newRecentEventsLine);
        }

        committedTrackerData.infoBox = updatedLines.join('\n');
        lastGeneratedData.infoBox = updatedLines.join('\n');

        // Update the message's swipe data
        const chat = getContext().chat;
        if (chat && chat.length > 0) {
            for (let i = chat.length - 1; i >= 0; i--) {
                const message = chat[i];
                if (!message.is_user) {
                    if (message.extra && message.extra.rpg_companion_swipes) {
                        const swipeId = message.swipe_id || 0;
                        if (message.extra.rpg_companion_swipes[swipeId]) {
                            message.extra.rpg_companion_swipes[swipeId].infoBox = updatedLines.join('\n');
                        }
                    }
                    break;
                }
            }
        }

        saveChatData();
        renderInfoBox();
        console.log(`[RPG Companion] Updated recent event ${field}:`, value);
    }
}