/**
 * Results Component
 * Handles the display of research results
 */
(function() {
    // DOM Elements
    let resultsContainer = null;
    let exportBtn = null;
    let pdfBtn = null;
    let researchId = null;
    let researchData = null;

    /**
     * Initialize the results component
     */
    function initializeResults() {
        // Get DOM elements
        resultsContainer = document.getElementById('results-content');
        exportBtn = document.getElementById('export-markdown-btn');
        pdfBtn = document.getElementById('download-pdf-btn');

        if (!resultsContainer) {
            console.error('Results container not found');
            return;
        }

        console.log('Results component initialized');

        // Get research ID from URL
        researchId = getResearchIdFromUrl();

        if (!researchId) {
            showError('Research ID not found in URL');
            return;
        }

        // Set up event listeners
        setupEventListeners();

        // Load research results
        loadResearchResults();

        // Initialize star rating
        initializeStarRating();

        // Note: Log panel is now automatically initialized by logpanel.js
        // No need to manually initialize it here
    }

    /**
     * Set up event listeners
     */
    function setupEventListeners() {
        // View metrics button
        const metricsBtn = document.getElementById('view-metrics-btn');
        if (metricsBtn) {
            metricsBtn.addEventListener('click', () => {
                window.location.href = URLBuilder.detailsPage(researchId);
            });
        }

        // Export button
        if (exportBtn) {
            exportBtn.addEventListener('click', handleExport);
        }

        // PDF button
        if (pdfBtn) {
            pdfBtn.addEventListener('click', handlePdfExport);
        }

        // LaTeX export button
        const latexBtn = document.getElementById('export-latex-btn');
        if (latexBtn) {
            latexBtn.addEventListener('click', () => handleFormatExport('latex'));
        }

        // Quarto export button
        const quartoBtn = document.getElementById('export-quarto-btn');
        if (quartoBtn) {
            quartoBtn.addEventListener('click', () => handleFormatExport('quarto'));
        }

        // RIS export button (for Zotero)
        const risBtn = document.getElementById('export-ris-btn');
        if (risBtn) {
            risBtn.addEventListener('click', () => handleFormatExport('ris'));
        }

        // Back to history button
        const backBtn = document.getElementById('back-to-history');
        if (backBtn) {
            backBtn.addEventListener('click', () => {
                window.location.href = URLS.PAGES.HISTORY;
            });
        }

    }

    /**
     * Get research ID from URL using centralized URL system
     * @returns {string|null} Research ID
     */
    function getResearchIdFromUrl() {
        return URLBuilder.extractResearchIdFromPattern('results');
    }

    /**
     * Load research results from API
     */
    async function loadResearchResults() {
        try {
            // Show loading state
            resultsContainer.innerHTML = '<div class="text-center my-5"><i class="fas fa-spinner fa-pulse"></i><p class="mt-3">Loading research results...</p></div>';

            // Fetch result from report API (reports are stored in database now)
            const response = await fetch(`/api/report/${researchId}`);

            if (!response.ok) {
                throw new Error(`HTTP error ${response.status}`);
            }

            const responseData = await response.json();
            console.log('Original API response:', responseData);

            // Store data for export
            researchData = responseData;

            // Check if we have data to display
            if (!responseData) {
                throw new Error('No data received from server');
            }

            // Use the API metadata directly
            if (responseData.metadata && typeof responseData.metadata === 'object') {
                console.log('Using metadata directly from API response:', responseData.metadata);
                populateMetadataFromApiResponse(responseData);
            } else {
                // Fallback to content extraction if no metadata in response
                populateMetadata(responseData);
            }

            // Render the content
            if (responseData.content && typeof responseData.content === 'string') {
                console.log('Rendering content from API response');
                renderResults(responseData.content);
            } else {
                // Try to find content in other response formats
                console.log('No direct content found, trying to find content in response');
                findAndRenderContent(responseData);
            }

            // Enable export buttons
            if (exportBtn) exportBtn.disabled = false;
            if (pdfBtn) pdfBtn.disabled = false;

        } catch (error) {
            console.error('Error loading research results:', error);
            showError(`Error loading research results: ${error.message}`);

            // Disable export buttons
            if (exportBtn) exportBtn.disabled = true;
            if (pdfBtn) pdfBtn.disabled = true;
        }
    }

    /**
     * Populate metadata directly from API response metadata
     * @param {Object} data - API response with metadata
     */
    function populateMetadataFromApiResponse(data) {
        const metadata = data.metadata || {};
        console.log('Using API response metadata:', metadata);

        // Query field
        const queryElement = document.getElementById('result-query');
        if (queryElement) {
            // Prefer processed query over original query for news subscriptions
            const query = metadata.processed_query || metadata.query || metadata.title || data.query || 'Untitled Research';
            console.log('Setting query to:', query);
            queryElement.textContent = query;
        }

        // Generated date field
        const dateElement = document.getElementById('result-date');
        if (dateElement) {
            let dateStr = 'Unknown date';

            // Try multiple sources for the timestamp - first from the API response directly, then from metadata
            const timestamp = data.created_at || data.timestamp || data.date ||
                            metadata.created_at || metadata.timestamp || metadata.date;

            console.log('Found timestamp:', timestamp);

            if (timestamp) {
                if (window.formatting && typeof window.formatting.formatDate === 'function') {
                    dateStr = window.formatting.formatDate(timestamp);
                    console.log('Formatting timestamp with formatter:', timestamp, '→', dateStr);
                } else {
                    try {
                        const date = new Date(timestamp);
                        dateStr = date.toLocaleString();
                        console.log('Formatting timestamp with toLocaleString:', timestamp, '→', dateStr);
                    } catch (e) {
                        console.error('Error parsing date:', e);
                    }
                }

                // Add duration if available - format as "Xm Ys" for values over 60 seconds
                if (metadata.duration || metadata.duration_seconds || data.duration_seconds) {
                    const durationSeconds = parseInt(metadata.duration || metadata.duration_seconds || data.duration_seconds, 10);

                    if (!isNaN(durationSeconds)) {
                        let durationStr;
                        if (durationSeconds < 60) {
                            durationStr = `${durationSeconds}s`;
                        } else {
                            const minutes = Math.floor(durationSeconds / 60);
                            const seconds = durationSeconds % 60;
                            durationStr = `${minutes}m ${seconds}s`;
                        }
                        dateStr += ` (${durationStr})`;
                    }
                }
            }

            console.log('Setting date to:', dateStr);
            dateElement.textContent = dateStr;
        }

        // Mode field
        const modeElement = document.getElementById('result-mode');
        if (modeElement) {
            // Get mode from metadata or main response
            let mode = metadata.mode || metadata.research_mode || metadata.type ||
                      data.mode || data.research_mode || data.type;

            // Detect if this is a detailed report based on content structure
            if (!mode && data.content) {
                if (data.content.toLowerCase().includes('table of contents') ||
                    data.content.match(/^#.*\n+##.*\n+###/m)) {
                    mode = 'detailed';
                } else {
                    mode = 'quick';
                }
            }

            // Format mode using available formatter
            if (window.formatting && typeof window.formatting.formatMode === 'function') {
                mode = window.formatting.formatMode(mode);
                console.log('Formatted mode:', mode);
            }

            console.log('Setting mode to:', mode || 'Quick');
            modeElement.textContent = mode || 'Quick';
        }
    }

    /**
     * Find and render content from various response formats
     * @param {Object} data - Research data to extract content from
     */
    function findAndRenderContent(data) {
        if (data.content && typeof data.content === 'string') {
            // Direct content property (newer format)
            console.log('Rendering from data.content');
            renderResults(data.content);
        } else if (data.research && data.research.content) {
            // Nested content in research object (older format)
            console.log('Rendering from data.research.content');
            renderResults(data.research.content);
        } else if (data.report && typeof data.report === 'string') {
            // Report format
            console.log('Rendering from data.report');
            renderResults(data.report);
        } else if (data.results && data.results.content) {
            // Results with content field
            console.log('Rendering from data.results.content');
            renderResults(data.results.content);
        } else if (data.results && typeof data.results === 'string') {
            // Results as direct string
            console.log('Rendering from data.results string');
            renderResults(data.results);
        } else if (typeof data === 'string') {
            // Plain string format
            console.log('Rendering from string data');
            renderResults(data);
        } else {
            // Look for any property that might contain the content
            const contentProps = ['markdown', 'text', 'summary', 'output', 'research_output'];
            let foundContent = false;

            for (const prop of contentProps) {
                if (data[prop] && typeof data[prop] === 'string') {
                    console.log(`Rendering from data.${prop}`);
                    renderResults(data[prop]);
                    foundContent = true;
                    break;
                }
            }

            if (!foundContent) {
                // Last resort: try to render the entire data object
                console.log('No clear content found, rendering entire data object');
                renderResults(data);
            }
        }
    }

    /**
     * Populate metadata fields with information from the research data
     * @param {Object} data - Research data with metadata
     */
    function populateMetadata(data) {
        // Debug the data structure
        console.log('API response data:', data);
        console.log('Data type:', typeof data);
        console.log('Available top-level keys:', Object.keys(data));

        // Direct extraction from content
        if (data.content && typeof data.content === 'string') {
            console.log('Attempting to extract metadata from content');

            // Extract the query from content first line or header
            // Avoid matching "Table of Contents" as query
            const queryMatch = data.content.match(/^#\s*([^\n]+)/m) || // First heading
                             data.content.match(/Query:\s*([^\n]+)/i) || // Explicit query label
                             data.content.match(/Question:\s*([^\n]+)/i) || // Question label
                             data.content.match(/^([^\n#]+)(?=\n)/); // First line if not starting with #

            if (queryMatch && queryMatch[1] && !queryMatch[1].toLowerCase().includes('table of contents')) {
                const queryElement = document.getElementById('result-query');
                if (queryElement) {
                    const extractedQuery = queryMatch[1].trim();
                    console.log('Extracted query from content:', extractedQuery);
                    queryElement.textContent = extractedQuery;
                }
            } else {
                // Try to find the second heading if first was "Table of Contents"
                const secondHeadingMatch = data.content.match(/^#\s*([^\n]+)[\s\S]*?^##\s*([^\n]+)/m);
                if (secondHeadingMatch && secondHeadingMatch[2]) {
                    const queryElement = document.getElementById('result-query');
                    if (queryElement) {
                        const extractedQuery = secondHeadingMatch[2].trim();
                        console.log('Extracted query from second heading:', extractedQuery);
                        queryElement.textContent = extractedQuery;
                    }
                }
            }

            // Extract generated date/time - Try multiple formats
            const dateMatch = data.content.match(/Generated at:\s*([^\n]+)/i) ||
                           data.content.match(/Date:\s*([^\n]+)/i) ||
                           data.content.match(/Generated:\s*([^\n]+)/i) ||
                           data.content.match(/Created:\s*([^\n]+)/i);

            if (dateMatch && dateMatch[1]) {
                const dateElement = document.getElementById('result-date');
                if (dateElement) {
                    const extractedDate = dateMatch[1].trim();
                    console.log('Extracted date from content:', extractedDate);

                    // Format the date using the available formatter
                    let formattedDate = extractedDate;
                    if (window.formatting && typeof window.formatting.formatDate === 'function') {
                        formattedDate = window.formatting.formatDate(extractedDate);
                        console.log('Date formatted using formatter:', formattedDate);
                    }

                    dateElement.textContent = formattedDate || new Date().toLocaleString();
                }
            }

            // Extract mode
            const modeMatch = data.content.match(/Mode:\s*([^\n]+)/i) ||
                            data.content.match(/Research type:\s*([^\n]+)/i);

            if (modeMatch && modeMatch[1]) {
                const modeElement = document.getElementById('result-mode');
                if (modeElement) {
                    const extractedMode = modeMatch[1].trim();
                    console.log('Extracted mode from content:', extractedMode);

                    // Format mode using available formatter
                    let formattedMode = extractedMode;
                    if (window.formatting && typeof window.formatting.formatMode === 'function') {
                        formattedMode = window.formatting.formatMode(extractedMode);
                        console.log('Mode formatted using formatter:', formattedMode);
                    }

                    modeElement.textContent = formattedMode || 'Standard';
                }
            } else {
                // Detect mode based on content structure and keywords
                const modeElement = document.getElementById('result-mode');
                if (modeElement) {
                    if (data.content.toLowerCase().includes('table of contents') ||
                        data.content.toLowerCase().includes('detailed report') ||
                        data.content.match(/^#.*\n+##.*\n+###/m)) { // Has H1, H2, H3 structure
                        modeElement.textContent = 'Detailed';
                    } else if (data.content.toLowerCase().includes('quick research') ||
                              data.content.toLowerCase().includes('summary')) {
                        modeElement.textContent = 'Quick';
                    } else {
                        modeElement.textContent = 'Standard'; // Better default
                    }
                }
            }

            return; // Exit early since we've handled extraction from content
        }

        // Also check the metadata field which likely contains the actual metadata
        const metadata = data.metadata || {};
        console.log('Metadata object:', metadata);
        if (metadata) {
            console.log('Metadata keys:', Object.keys(metadata));
        }

        // Extract research object if nested
        const researchData = data.research || data;

        // Debug nested structure if exists
        if (data.research) {
            console.log('Nested research data:', data.research);
            console.log('Research keys:', Object.keys(data.research));
        }

        // Query field
        const queryElement = document.getElementById('result-query');
        if (queryElement) {
            // Try different possible locations for query data
            let query = 'Unknown query';

            if (metadata.query) {
                query = metadata.query;
            } else if (metadata.title) {
                query = metadata.title;
            } else if (researchData.query) {
                query = researchData.query;
            } else if (researchData.prompt) {
                query = researchData.prompt;
            } else if (researchData.title) {
                query = researchData.title;
            } else if (researchData.question) {
                query = researchData.question;
            } else if (researchData.input) {
                query = researchData.input;
            }

            console.log('Setting query to:', query);
            queryElement.textContent = query;
        }

        // Generated date field
        const dateElement = document.getElementById('result-date');
        if (dateElement) {
            let dateStr = 'Unknown date';
            let timestampField = null;

            // Try different possible date fields
            if (metadata.created_at) {
                timestampField = metadata.created_at;
            } else if (metadata.timestamp) {
                timestampField = metadata.timestamp;
            } else if (metadata.date) {
                timestampField = metadata.date;
            } else if (researchData.timestamp) {
                timestampField = researchData.timestamp;
            } else if (researchData.created_at) {
                timestampField = researchData.created_at;
            } else if (researchData.date) {
                timestampField = researchData.date;
            } else if (researchData.time) {
                timestampField = researchData.time;
            }

            // Format the date using the available formatter
            if (timestampField) {
                if (window.formatting && typeof window.formatting.formatDate === 'function') {
                    dateStr = window.formatting.formatDate(timestampField);
                    console.log('Using formatter for timestamp:', timestampField, '→', dateStr);
                } else {
                    try {
                        const date = new Date(timestampField);
                        dateStr = date.toLocaleString();
                        console.log('Using timestamp:', timestampField, '→', dateStr);
                    } catch (e) {
                        console.error('Error parsing date:', timestampField, e);
                    }
                }
            }

            // Add duration if available
            if (metadata.duration) {
                dateStr += ` (${metadata.duration} seconds)`;
            } else if (metadata.duration_seconds) {
                dateStr += ` (${metadata.duration_seconds} seconds)`;
            } else if (researchData.duration) {
                dateStr += ` (${researchData.duration} seconds)`;
            }

            console.log('Setting date to:', dateStr);
            dateElement.textContent = dateStr;
        }

        // Mode field
        const modeElement = document.getElementById('result-mode');
        if (modeElement) {
            let mode = 'Quick'; // Default to Quick

            if (metadata.mode) {
                mode = metadata.mode;
            } else if (metadata.research_mode) {
                mode = metadata.research_mode;
            } else if (metadata.type) {
                mode = metadata.type;
            } else if (researchData.mode) {
                mode = researchData.mode;
            } else if (researchData.research_mode) {
                mode = researchData.research_mode;
            } else if (researchData.type) {
                mode = researchData.type;
            }

            // Format mode using available formatter
            if (window.formatting && typeof window.formatting.formatMode === 'function') {
                mode = window.formatting.formatMode(mode);
            }

            console.log('Setting mode to:', mode);
            modeElement.textContent = mode;
        }
    }

    /**
     * Render research results in the container
     * @param {Object|string} data - Research data to render
     */
    function renderResults(data) {
        try {
            // Clear container
            resultsContainer.innerHTML = '';

            // Determine the content to render
            let content = '';

            if (typeof data === 'string') {
                // Direct string content
                content = data;
            } else if (data.markdown) {
                // Markdown content
                content = data.markdown;
            } else if (data.html) {
                // HTML content
                resultsContainer.innerHTML = data.html;
                return; // Return early since we've set HTML directly
            } else if (data.text) {
                // Text content
                content = data.text;
            } else if (data.summary) {
                // Summary content
                content = data.summary;
            } else if (data.results) {
                // Results array (old format)
                if (Array.isArray(data.results)) {
                    content = data.results.join('\n\n');
                } else {
                    content = JSON.stringify(data.results, null, 2);
                }
            } else {
                // Last resort: stringify the entire object
                content = JSON.stringify(data, null, 2);
            }

            // Render the content as Markdown if possible
            if (window.ui && window.ui.renderMarkdown) {
                const renderedHtml = window.ui.renderMarkdown(content);
                resultsContainer.innerHTML = renderedHtml;
            } else {
                // Fall back to basic formatting
                content = content.replace(/\n/g, '<br>');
                resultsContainer.innerHTML = `<div class="markdown-content">${content}</div>`;
            }

            // Add syntax highlighting if Prism is available
            if (window.Prism) {
                window.Prism.highlightAllUnder(resultsContainer);
            }

        } catch (error) {
            console.error('Error rendering results:', error);
            showError(`Error rendering results: ${error.message}`);
        }
    }

    /**
     * Show error message in the results container
     * @param {string} message - Error message
     */
    function showError(message) {
        resultsContainer.innerHTML = `
            <div class="alert alert-danger" role="alert">
                <i class="fas fa-exclamation-triangle"></i> ${message}
            </div>
            <p class="text-center mt-3">
                <a href="/research" class="btn btn-primary">
                    <i class="fas fa-arrow-left"></i> Back to Research
                </a>
            </p>
        `;
    }

    /**
     * Handle export button click
     */
    function handleExport() {
        try {
            if (!researchData) {
                throw new Error('No research data available');
            }

            // Get metadata from DOM (which should be populated by now)
            const query = document.getElementById('result-query')?.textContent || 'Unknown query';
            const generated = document.getElementById('result-date')?.textContent || 'Unknown date';
            const mode = document.getElementById('result-mode')?.textContent || 'Quick';

            // Create markdown header with metadata
            let markdownHeader = `# Research Results: ${query}\n\n`;
            markdownHeader += `- **Generated:** ${generated}\n`;
            markdownHeader += `- **Mode:** ${mode}\n\n`;
            markdownHeader += `---\n\n`;

            // Extract the content to export
            let markdownContent = '';

            // Try to extract the markdown content from various possible locations
            if (typeof researchData === 'string') {
                markdownContent = researchData;
            } else {
                // Check for content in standard locations
                const contentProps = [
                    'content',
                    'report',
                    'markdown',
                    'text',
                    'summary',
                    'output',
                    'research_output'
                ];

                let found = false;

                // First check direct properties
                for (const prop of contentProps) {
                    if (researchData[prop] && typeof researchData[prop] === 'string') {
                        markdownContent = researchData[prop];
                        console.log(`Using ${prop} for markdown content`);
                        found = true;
                        break;
                    }
                }

                // Then check nested properties
                if (!found && researchData.research) {
                    for (const prop of contentProps) {
                        if (researchData.research[prop] && typeof researchData.research[prop] === 'string') {
                            markdownContent = researchData.research[prop];
                            console.log(`Using research.${prop} for markdown content`);
                            found = true;
                            break;
                        }
                    }
                }

                // Check results property
                if (!found && researchData.results) {
                    if (typeof researchData.results === 'string') {
                        markdownContent = researchData.results;
                        console.log('Using results string for markdown content');
                    } else {
                        for (const prop of contentProps) {
                            if (researchData.results[prop] && typeof researchData.results[prop] === 'string') {
                                markdownContent = researchData.results[prop];
                                console.log(`Using results.${prop} for markdown content`);
                                found = true;
                                break;
                            }
                        }
                    }
                }

                // Last resort
                if (!markdownContent) {
                    console.warn('Could not extract markdown content, using JSON');
                    markdownContent = "```json\n" + JSON.stringify(researchData, null, 2) + "\n```";
                }
            }

            // Combine header and content
            const fullMarkdown = markdownHeader + markdownContent;

            // Create blob and trigger download
            const blob = new Blob([fullMarkdown], { type: 'text/markdown' });
            const link = document.createElement('a');
            link.href = URL.createObjectURL(blob);
            link.download = `research_${researchId}.md`;

            // Trigger download
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);

        } catch (error) {
            console.error('Error exporting markdown:', error);
            alert(`Error exporting markdown: ${error.message}`);
        }
    }

    /**
     * Handle export to specific format (LaTeX or Quarto)
     * @param {string} format - Export format ('latex' or 'quarto')
     */
    async function handleFormatExport(format) {
        try {
            if (!researchId) {
                throw new Error('No research ID available');
            }

            const formatName = format === 'latex' ? 'LaTeX' : format === 'quarto' ? 'Quarto' : 'RIS';
            console.log(`Exporting to ${formatName}...`);

            // Get CSRF token
            const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';

            // Call API to export the report
            const response = await fetch(`/api/v1/research/${researchId}/export/${format}`, {
                method: 'POST',
                headers: {
                    'X-CSRFToken': csrfToken
                }
            });

            if (!response.ok) {
                const error = await response.json();
                throw new Error(error.error || `Failed to export to ${formatName}`);
            }

            // Get the blob from response
            const blob = await response.blob();

            // Determine file extension
            const extension = format === 'latex' ? 'tex' : format === 'quarto' ? 'qmd' : 'ris';

            // Create download link
            const link = document.createElement('a');
            link.href = URL.createObjectURL(blob);
            link.download = `research_${researchId}.${extension}`;

            // Trigger download
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);

            console.log(`Successfully exported to ${formatName}`);

        } catch (error) {
            console.error(`Error exporting to ${format}:`, error);
            alert(`Failed to export to ${format}: ${error.message}`);
        }
    }


    /**
     * Handle PDF export button click
     */
    function handlePdfExport() {
        try {
            if (!researchId) {
                throw new Error('No research ID available');
            }

            console.log('PDF export initiated for research ID:', researchId);

            // Show loading indicator
            pdfBtn.disabled = true;
            pdfBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Generating PDF...';

            // Get CSRF token from meta tag or cookie
            const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content ||
                              document.cookie.split('; ').find(row => row.startsWith('csrf_token='))?.split('=')[1];

            // Call the backend API to generate PDF using WeasyPrint
            fetch(`/api/v1/research/${researchId}/export/pdf`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': csrfToken
                },
                credentials: 'same-origin'
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                return response.blob();
            })
            .then(blob => {
                // Create download link
                const url = URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.href = url;
                a.download = `research_${researchId}.pdf`;
                document.body.appendChild(a);
                a.click();
                document.body.removeChild(a);
                URL.revokeObjectURL(url);

                console.log('PDF downloaded successfully');
                // Reset button
                pdfBtn.disabled = false;
                pdfBtn.innerHTML = '<i class="fas fa-file-pdf"></i> Download PDF';
            })
            .catch(error => {
                console.error('Error generating PDF:', error);
                alert(`Error generating PDF: ${error.message || 'Unknown error'}`);

                // Reset button
                pdfBtn.disabled = false;
                pdfBtn.innerHTML = '<i class="fas fa-file-pdf"></i> Download PDF';
            });

        } catch (error) {
            console.error('Error exporting PDF:', error);
            alert(`Error exporting PDF: ${error.message || 'Unknown error'}`);

            // Reset button
            if (pdfBtn) {
                pdfBtn.disabled = false;
                pdfBtn.innerHTML = '<i class="fas fa-file-pdf"></i> Download PDF';
            }
        }
    }

    /**
     * Initialize star rating functionality
     */
    function initializeStarRating() {
        const starRating = document.getElementById('research-rating');
        if (!starRating || !researchId) return;

        const stars = starRating.querySelectorAll('.star');
        let currentRating = 0;

        // Load existing rating
        loadExistingRating();

        // Add hover effects
        stars.forEach((star, index) => {
            star.addEventListener('mouseenter', () => {
                highlightStars(index + 1);
            });

            star.addEventListener('click', () => {
                const rating = index + 1;
                setRating(rating);
                saveRating(rating);

                // Visual feedback for saving
                starRating.style.opacity = '0.7';
                setTimeout(() => {
                    starRating.style.opacity = '1';
                }, 500);
            });
        });

        starRating.addEventListener('mouseleave', () => {
            // Restore the permanent rating when mouse leaves
            setRating(currentRating);
        });

        function highlightStars(rating) {
            stars.forEach((star, index) => {
                // Clear all classes first
                star.classList.remove('hover', 'active');
                // Add hover class for preview
                if (index < rating) {
                    star.classList.add('hover');
                }
            });
        }

        function setRating(rating) {
            currentRating = rating;
            stars.forEach((star, index) => {
                // Clear all classes first
                star.classList.remove('hover', 'active');
                // Set active state for permanent rating
                if (index < rating) {
                    star.classList.add('active');
                }
            });
        }

        async function loadExistingRating() {
            try {
                const response = await fetch(`/metrics/api/ratings/${researchId}`);
                if (response.ok) {
                    const data = await response.json();
                    if (data.rating) {
                        setRating(data.rating);
                    }
                }
            } catch (error) {
                console.log('No existing rating found');
            }
        }

        async function saveRating(rating) {
            try {
                console.log('Attempting to save rating:', rating);

                // Get CSRF token from meta tag
                const csrfToken = document.querySelector('meta[name=csrf-token]')?.getAttribute('content');
                console.log('CSRF token:', csrfToken ? 'found' : 'missing');

                const headers = {
                    'Content-Type': 'application/json',
                };

                // Add CSRF token if available
                if (csrfToken) {
                    headers['X-CSRFToken'] = csrfToken;
                }

                const response = await fetch(`/metrics/api/ratings/${researchId}`, {
                    method: 'POST',
                    headers: headers,
                    body: JSON.stringify({ rating: rating })
                });

                console.log('Response status:', response.status);
                const responseText = await response.text();
                console.log('Response:', responseText);

                if (response.ok) {
                    console.log('Rating saved successfully');
                    try {
                        const responseData = JSON.parse(responseText);
                        if (responseData.status === 'success') {
                            console.log('✅ Rating confirmed saved:', responseData.rating);
                        }
                    } catch (e) {
                        console.log('✅ Rating saved (non-JSON response)');
                    }
                } else {
                    console.error('❌ Failed to save rating:', response.status, responseText);
                }
            } catch (error) {
                console.error('❌ Error saving rating:', error);
            }
        }
    }

    // Initialize on DOM content loaded
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initializeResults);
    } else {
        initializeResults();
    }
})();
