document.addEventListener('DOMContentLoaded', () => {
    const spreadsheetDiv = document.getElementById('spreadsheet');
    const commandInput = document.getElementById('commandInput');
    const sendBtn = document.getElementById('sendBtn');
    const saveBtn = document.getElementById('saveBtn');
    const exportBtn = document.getElementById('exportBtn');
    const loadingOverlay = document.getElementById('loadingOverlay');
    const statsDisplay = document.getElementById('statsDisplay');
    const micBtn = document.getElementById('micBtn');

    let spreadsheet = null;

    // --- ISO Codes & Data ---
    const statusOptions = ['To-do', 'Booked', 'In Progress', 'Done'];

    // Full ISO 3166-1 alpha-2 Country Codes
    const countryOptions = [
        { id: 'US', name: 'United States' },
        { id: 'GB', name: 'United Kingdom' },
        { id: 'CA', name: 'Canada' },
        { id: 'AU', name: 'Australia' },
        { id: 'DE', name: 'Germany' },
        { id: 'FR', name: 'France' },
        { id: 'IT', name: 'Italy' },
        { id: 'ES', name: 'Spain' },
        { id: 'JP', name: 'Japan' },
        { id: 'CN', name: 'China' },
        { id: 'IN', name: 'India' },
        { id: 'BR', name: 'Brazil' },
        { id: 'MX', name: 'Mexico' },
        { id: 'RU', name: 'Russia' },
        { id: 'ZA', name: 'South Africa' },
        { id: 'NL', name: 'Netherlands' },
        { id: 'SE', name: 'Sweden' },
        { id: 'NO', name: 'Norway' },
        { id: 'DK', name: 'Denmark' },
        { id: 'FI', name: 'Finland' },
        { id: 'KR', name: 'South Korea' },
        { id: 'SG', name: 'Singapore' },
        { id: 'NZ', name: 'New Zealand' },
        { id: 'IE', name: 'Ireland' },
        { id: 'CH', name: 'Switzerland' },
        { id: 'AT', name: 'Austria' },
        { id: 'BE', name: 'Belgium' },
        { id: 'PL', name: 'Poland' },
        { id: 'PT', name: 'Portugal' },
        { id: 'GR', name: 'Greece' },
        { id: 'TR', name: 'Turkey' },
        { id: 'AE', name: 'United Arab Emirates' },
        { id: 'SA', name: 'Saudi Arabia' },
        { id: 'IL', name: 'Israel' },
        { id: 'AR', name: 'Argentina' },
        { id: 'CL', name: 'Chile' },
        { id: 'CO', name: 'Colombia' },
        { id: 'PE', name: 'Peru' },
        { id: 'TH', name: 'Thailand' },
        { id: 'VN', name: 'Vietnam' },
        { id: 'ID', name: 'Indonesia' },
        { id: 'MY', name: 'Malaysia' },
        { id: 'PH', name: 'Philippines' }
        // Add more as needed or fetch from an API
    ];

    // Full ISO 639-1 Language Codes
    const languageOptions = [
        { id: 'EN', name: 'English' },
        { id: 'FR', name: 'French' },
        { id: 'DE', name: 'German' },
        { id: 'IT', name: 'Italian' },
        { id: 'ES', name: 'Spanish' },
        { id: 'PT', name: 'Portuguese' },
        { id: 'RU', name: 'Russian' },
        { id: 'ZH', name: 'Chinese' },
        { id: 'JA', name: 'Japanese' },
        { id: 'KO', name: 'Korean' },
        { id: 'AR', name: 'Arabic' },
        { id: 'HI', name: 'Hindi' },
        { id: 'BN', name: 'Bengali' },
        { id: 'NL', name: 'Dutch' },
        { id: 'SV', name: 'Swedish' },
        { id: 'NO', name: 'Norwegian' },
        { id: 'DA', name: 'Danish' },
        { id: 'FI', name: 'Finnish' },
        { id: 'TR', name: 'Turkish' },
        { id: 'PL', name: 'Polish' },
        { id: 'EL', name: 'Greek' },
        { id: 'HE', name: 'Hebrew' },
        { id: 'TH', name: 'Thai' },
        { id: 'ID', name: 'Indonesian' },
        { id: 'MS', name: 'Malay' },
        { id: 'VI', name: 'Vietnamese' }
    ];

    const categoryOptions = ['Digital', 'DOOH', 'Online - Banner - Celtra', 'OOH', 'Print', 'Video'];
    const mediaOptions = ['POS', 'OOH', 'Social', 'Community management', 'Online advertising', 'Banner', 'Rich media', 'Landing page', 'Static Image', 'Video', 'Push notifications', '.com', 'Print', 'Digital', 'Direct mail', 'Packaging', 'TV', 'Cinema', 'Radio', 'VOD'];

    // --- Initial Load ---
    loadData();

    // --- API Interactions ---

    async function loadData() {
        showLoading(true);
        try {
            // Cache buster
            const response = await fetch(`api.php?action=load&t=${Date.now()}`);
            const rawData = await response.json();

            if (!rawData) {
                initSpreadsheet([]);
                return;
            }

            // Transform JSON object array to Array of Arrays for Jspreadsheet if needed, 
            // BUT Jspreadsheet supports JSON directly if we define columns matching keys.
            // Let's use JSON support for simplicity.

            initSpreadsheet(rawData);
            updateStats(rawData.length);

        } catch (error) {
            console.error('Error loading data:', error);
            alert('Failed to load data.');
        } finally {
            showLoading(false);
        }
    }

    function initSpreadsheet(data) {
        if (spreadsheet) {
            spreadsheet.destroy();
        }

        spreadsheet = jspreadsheet(spreadsheetDiv, {
            data: data,
            columns: [
                { type: 'hidden', title: 'Number', width: 100, readOnly: true, name: 'Number' }, // Hidden but present for logic
                { type: 'text', title: 'Title', width: 300, name: 'Title' },
                { type: 'dropdown', title: 'Status', width: 100, name: 'Status', source: statusOptions },
                { type: 'dropdown', title: 'Category', width: 120, name: 'Category', source: categoryOptions },
                { type: 'dropdown', title: 'Media', width: 120, name: 'Media', source: mediaOptions },
                { type: 'text', title: 'Sub-media', width: 150, name: 'Sub-media' },
                { type: 'calendar', title: 'Supply date', width: 100, name: 'Supply date', options: { format: 'YYYY-MM-DD' } },
                { type: 'calendar', title: 'Live date', width: 100, name: 'Live date', options: { format: 'YYYY-MM-DD' } },
                { type: 'dropdown', title: 'Language', width: 100, name: 'Language', source: languageOptions },
                { type: 'dropdown', title: 'Country', width: 100, name: 'Country', source: countryOptions },
                { type: 'hidden', title: 'Quantity', width: 50, name: 'Quantity' }
            ],
            defaultColWidth: 100,
            tableOverflow: true,
            tableWidth: '100%',
            tableHeight: '70vh', // Fixed height for scrolling

            // Context Menu
            contextMenu: function (obj, x, y, e) {
                var items = [];
                if (y == null) {
                    // Header context menu
                    if (obj.options.allowInsertColumn == true) {
                        items.push({
                            title: obj.options.text.insertNewColumnBefore,
                            onclick: function () { obj.insertColumn(1, parseInt(x), 1); }
                        });
                        items.push({
                            title: obj.options.text.insertNewColumnAfter,
                            onclick: function () { obj.insertColumn(1, parseInt(x), 0); }
                        });
                    }
                } else {
                    // Row context menu
                    items.push({
                        title: 'Delete Selected Rows',
                        onclick: function () {
                            // Use the same logic as the button
                            document.getElementById('deleteSelectedBtn').click();
                        }
                    });
                    items.push({
                        title: 'Insert New Row',
                        onclick: function () { obj.insertRow(1, parseInt(y)); }
                    });
                }
                return items;
            },

            // Events
            onchange: function (instance, cell, x, y, value) {
                // Auto-save on change? Or wait?
                // User asked for "real time", but constant saving might be heavy.
                // Let's save on every change for now to be safe.
                saveData();
            },
            oninsertrow: function () { saveData(); },
            ondeleterow: function () { saveData(); }
        });
    }

    async function saveData(dataOverride = null) {
        // showLoading(true); // Don't block UI for auto-save
        try {
            const data = dataOverride || spreadsheet.getJson();
            const response = await fetch('api.php?action=save', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ data: data })
            });
            const result = await response.json();
            if (result.success) {
                console.log('Saved.');
                updateStats(data.length);
            } else {
                console.error('Save failed:', result.message);
            }
        } catch (error) {
            console.error('Error saving data:', error);
        } finally {
            // showLoading(false);
        }
    }

    let lastCommandText = '';

    async function sendCommand(overrideCommand = null, forceYolo = false) {
        const command = overrideCommand || commandInput.value.trim();
        if (!command) return;

        lastCommandText = command;
        const yoloMode = forceYolo || document.getElementById('yoloToggle').checked;

        const aiOutput = document.getElementById('aiOutput');
        aiOutput.textContent = `> Sending command: "${command}" (YOLO: ${yoloMode})...\n`;

        showLoading(true);
        try {
            const response = await fetch('api.php?action=command', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                    command: command,
                    yolo_mode: yoloMode
                })
            });
            const result = await response.json();

            if (result.success) {
                if (result.question) {
                    // AI has a question
                    aiOutput.innerHTML += `<div style="color: #ff9800; font-weight: bold; margin: 10px 0;">
                        🤖 AI Question: ${result.question}
                    </div>`;

                    // Add "Do what you think" button
                    const yoloBtn = document.createElement('button');
                    yoloBtn.className = 'btn btn-primary';
                    yoloBtn.style.marginTop = '5px';
                    yoloBtn.innerText = '🚀 Do what you think (YOLO)';
                    yoloBtn.onclick = () => sendCommand(lastCommandText, true);

                    aiOutput.appendChild(yoloBtn);
                    aiOutput.innerHTML += '\nOr type your clarification above.\n';

                } else {
                    // Success
                    await loadData(); // Reload grid
                    commandInput.value = '';
                    aiOutput.textContent += `> Success! Processed ${result.count || 0} items.\n`;
                    if (result.debug_llm) {
                        aiOutput.textContent += `\n--- AI Response ---\n${result.debug_llm}\n`;
                    }
                }
            } else {
                aiOutput.textContent += `> Error: ${result.message}\n`;
                if (result.message && result.message.includes('Debug:')) {
                    aiOutput.textContent += `\n--- Debug Info ---\n${result.message}\n`;
                }
            }
            // Auto-scroll to bottom
            aiOutput.scrollTop = aiOutput.scrollHeight;
        } catch (error) {
            console.error('Error processing command:', error);
            aiOutput.textContent += `> Critical Error: ${error.message}\n`;
            aiOutput.scrollTop = aiOutput.scrollHeight;
        } finally {
            showLoading(false);
        }
    }

    // Clear Log Button
    document.getElementById('clearLogBtn').addEventListener('click', () => {
        document.getElementById('aiOutput').textContent = 'Waiting for command...';
    });

    function updateStats(count) {
        statsDisplay.textContent = `${count} Deliverables`;
    }

    function showLoading(show) {
        if (show) loadingOverlay.classList.add('active');
        else loadingOverlay.classList.remove('active');
    }

    // --- Event Listeners ---

    const deleteSelectedBtn = document.getElementById('deleteSelectedBtn');
    // Clear Sheet Logic
    const clearSheetBtn = document.getElementById('clearSheetBtn');
    if (clearSheetBtn) {
        clearSheetBtn.addEventListener('click', () => {
            if (confirm('Are you sure you want to clear the ENTIRE sheet? This cannot be undone.')) {
                spreadsheet.setData([]);
                saveData([]); // Force save empty array
                updateStats(0);
            }
        });
    }

    // Delete Selected Logic
    deleteSelectedBtn.addEventListener('click', () => {
        const selected = spreadsheet.getSelected(); // [c1, r1, c2, r2]

        if (!selected) {
            alert('Please select a cell to delete its row.');
            return;
        }

        // Normalize coordinates (handle reverse selection)
        const y1 = parseInt(selected[1]);
        const y2 = parseInt(selected[3]);
        const startRow = Math.min(y1, y2);
        const endRow = Math.max(y1, y2);

        if (isNaN(startRow) || isNaN(endRow)) {
            alert('Invalid selection.');
            return;
        }

        const numberOfRows = endRow - startRow + 1;
        const totalRows = spreadsheet.getData().length;

        if (confirm(`Delete ${numberOfRows} row(s)?`)) {
            // Special case: If deleting ALL rows (or the last remaining row), 
            // Jspreadsheet might block it or leave 1 empty row.
            // We should just clear the data.
            if (numberOfRows === totalRows) {
                spreadsheet.setData([]); // Clear everything
                saveData([]); // Force save empty array
            } else {
                spreadsheet.deleteRow(startRow, numberOfRows);
                saveData();
            }

            spreadsheet.resetSelection();
        }
    });

    sendBtn.addEventListener('click', () => stopMicAndSend());

    commandInput.addEventListener('keydown', (e) => {
        if (e.key === 'Enter') {
            e.preventDefault();
            stopMicAndSend();
        }
    });

    saveBtn.addEventListener('click', () => {
        saveData();
        alert('Saved!');
    });

    // Custom CSV Export
    if (exportBtn) {
        exportBtn.addEventListener('click', function () {
            const data = spreadsheet.getData();

            // Strict Header Requirement
            const headers = [
                "Number", "Title", "Status", "Category", "Media", "Sub media",
                "Destination", "Format", "Supply date", "Live date", "End date",
                "Special instructions", "Language", "Country", "Quantity"
            ];

            let csvContent = "Sep=,\n" + headers.map(h => `"${h}"`).join(",") + "\n";

            data.forEach(row => {
                // Map Jspreadsheet row indices to the required CSV format
                // Row structure in Jspreadsheet: 
                // 0:Number, 1:Title, 2:Status, 3:Category, 4:Media, 5:Sub-media, 
                // 6:Format (New Index!), 7:Supply date, 8:Live date, 9:Language, 10:Country, 11:Quantity

                const csvRow = [
                    "", // Number (Cleared as requested)
                    row[1] || "", // Title
                    row[2] || "", // Status
                    row[3] || "", // Category
                    row[4] || "", // Media
                    row[5] || "", // Sub media
                    "", // Destination (Empty)
                    row[6] || "", // Format (Now mapped!)
                    row[7] || "", // Supply date
                    row[8] || "", // Live date
                    "", // End date (Empty)
                    "", // Special instructions (Empty)
                    row[9] || "", // Language
                    row[10] || "", // Country
                    "1.00" // Quantity
                ];

                // Escape quotes and wrap in quotes
                const escapedRow = csvRow.map(field => {
                    const stringField = String(field);
                    if (stringField.includes('"')) {
                        return `"${stringField.replace(/"/g, '""')}"`;
                    }
                    return `"${stringField}"`;
                });

                csvContent += escapedRow.join(",") + "\n";
            });

            const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
            const link = document.createElement("a");
            const url = URL.createObjectURL(blob);
            link.setAttribute("href", url);
            link.setAttribute("download", "activation_calendar_export.csv");
            link.style.visibility = 'hidden';
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        });
    }

    // --- Voice Recognition ---
    let recognition;
    if ('webkitSpeechRecognition' in window) {
        recognition = new webkitSpeechRecognition();
        recognition.continuous = true;
        recognition.interimResults = true;
        recognition.lang = 'en-US';

        micBtn.addEventListener('click', () => {
            if (micBtn.classList.contains('listening')) {
                recognition.stop();
            } else {
                recognition.start();
            }
        });

        recognition.onstart = () => {
            micBtn.classList.add('listening');
            commandInput.placeholder = "Listening... (Press Enter to send)";
        };

        recognition.onend = () => {
            micBtn.classList.remove('listening');
            commandInput.placeholder = "Type or speak a command...";
        };

        recognition.onresult = (event) => {
            let finalTranscript = '';
            let interimTranscript = '';
            for (let i = 0; i < event.results.length; ++i) {
                if (event.results[i].isFinal) {
                    finalTranscript += event.results[i][0].transcript;
                } else {
                    interimTranscript += event.results[i][0].transcript;
                }
            }
            commandInput.value = finalTranscript + interimTranscript;
        };
    } else {
        micBtn.style.display = 'none';
    }

    function stopMicAndSend() {
        if (recognition && micBtn.classList.contains('listening')) {
            recognition.stop();
        }
        sendCommand();
    }
});