/**
 * Research Details Page JavaScript
 * Handles displaying detailed metrics for a specific research session
 */
(function() {
    'use strict';

    let researchId = null;
    let metricsData = null;
    let timelineChart = null;
    let searchChart = null;

    // Format large numbers with commas
    function formatNumber(num) {
        return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    }

    // Format currency
    function formatCurrency(amount) {
        if (amount < 0.01) {
            return `$${amount.toFixed(6)}`;
        } else if (amount < 1) {
            return `$${amount.toFixed(4)}`;
        } else {
            return `$${amount.toFixed(2)}`;
        }
    }

    // Get research ID from URL
    function getResearchIdFromUrl() {
        const path = window.location.pathname;
        const match = path.match(/\/research\/details\/(\d+)/);
        return match ? parseInt(match[1]) : null;
    }

    // Load research metrics data
    async function loadResearchMetrics() {
        try {
            console.log('Loading research metrics for ID:', researchId);

            // Show loading state
            document.getElementById('loading').style.display = 'block';
            document.getElementById('details-content').style.display = 'none';
            document.getElementById('error').style.display = 'none';

            // Load research details (includes strategy)
            console.log('Fetching research details...');
            const detailsResponse = await fetch(`/history/details/${researchId}`);
            console.log('Details response status:', detailsResponse.status);

            let researchDetails = null;
            if (detailsResponse.ok) {
                researchDetails = await detailsResponse.json();
                console.log('Research details loaded:', researchDetails);
            }

            // Load research metrics
            console.log('Fetching research metrics...');
            const metricsResponse = await fetch(`/metrics/api/metrics/research/${researchId}`);
            console.log('Metrics response status:', metricsResponse.status);

            if (!metricsResponse.ok) {
                throw new Error(`Metrics API failed: ${metricsResponse.status}`);
            }

            const metricsResult = await metricsResponse.json();
            console.log('Metrics result:', metricsResult);

            if (metricsResult.status !== 'success') {
                throw new Error('Failed to load research metrics');
            }

            metricsData = metricsResult.metrics;
            console.log('Metrics data loaded:', metricsData);

            // Display research details first
            if (researchDetails) {
                displayResearchDetails(researchDetails);
            }

            // Load timeline metrics
            console.log('Fetching timeline metrics...');
            const timelineResponse = await fetch(`/metrics/api/metrics/research/${researchId}/timeline`);
            console.log('Timeline response status:', timelineResponse.status);

            let timelineData = null;
            if (timelineResponse.ok) {
                const timelineResult = await timelineResponse.json();
                console.log('Timeline result:', timelineResult);
                if (timelineResult.status === 'success') {
                    timelineData = timelineResult.metrics;
                }
            }

            // Load search metrics
            console.log('Fetching search metrics...');
            const searchResponse = await fetch(`/metrics/api/metrics/research/${researchId}/search`);
            console.log('Search response status:', searchResponse.status);

            let searchData = null;
            if (searchResponse.ok) {
                const searchResult = await searchResponse.json();
                console.log('Search result:', searchResult);
                if (searchResult.status === 'success') {
                    searchData = searchResult.metrics;
                }
            }

            // Display all data
            console.log('Displaying research metrics...');
            displayResearchMetrics();

            if (timelineData) {
                console.log('Displaying timeline metrics...');
                displayTimelineMetrics(timelineData);

                console.log('Chart.js available:', typeof Chart !== 'undefined');
                console.log('Timeline data for chart:', timelineData);
                createTimelineChart(timelineData);
            }

            if (searchData) {
                console.log('Displaying search metrics...');
                displaySearchMetrics(searchData);
                createSearchChart(searchData);
            }

            // Load cost data
            console.log('Loading cost data...');
            loadCostData();

            console.log('Showing details content...');
            const loadingEl = document.getElementById('loading');
            const contentEl = document.getElementById('details-content');
            const errorEl = document.getElementById('error');

            loadingEl.style.display = 'none';
            errorEl.style.display = 'none';
            contentEl.style.display = 'block';

            // Show metrics sections
            console.log('Showing metrics sections...');
            const tokenMetricsSection = document.getElementById('token-metrics-section');
            const searchMetricsSection = document.getElementById('search-metrics-section');

            if (tokenMetricsSection) {
                tokenMetricsSection.style.display = 'block';
                console.log('Token metrics section shown');
            }

            if (searchMetricsSection) {
                searchMetricsSection.style.display = 'block';
                console.log('Search metrics section shown');
            }

            // Force visibility with CSS overrides
            contentEl.style.visibility = 'visible';
            contentEl.style.opacity = '1';
            contentEl.style.position = 'relative';
            contentEl.style.zIndex = '1000';

            console.log('Loading display:', loadingEl.style.display);
            console.log('Content display:', contentEl.style.display);
            console.log('Error display:', errorEl.style.display);

            // Verify content is actually populated
            const totalTokensEl = document.getElementById('total-tokens');
            const researchQueryEl = document.getElementById('research-query');
            console.log('Total tokens value:', totalTokensEl ? totalTokensEl.textContent : 'ELEMENT NOT FOUND');
            console.log('Research query value:', researchQueryEl ? researchQueryEl.textContent : 'ELEMENT NOT FOUND');
            console.log('Content element height:', contentEl.offsetHeight);
            console.log('Content element children:', contentEl.children.length);

        } catch (error) {
            console.error('Error loading research metrics:', error);
            console.error('Error details:', error.message, error.stack);
            showError();
        }
    }

    // Display research details from history endpoint
    function displayResearchDetails(details) {
        console.log('displayResearchDetails called with:', details);

        // Update basic research info
        if (details.query) {
            document.getElementById('research-query').textContent = details.query;
        }
        if (details.mode) {
            document.getElementById('research-mode').textContent = details.mode;
        }
        if (details.created_at) {
            const date = new Date(details.created_at);
            document.getElementById('research-date').textContent = date.toLocaleString();
        }

        // Update strategy information
        if (details.strategy) {
            document.getElementById('research-strategy').textContent = details.strategy;
        } else {
            document.getElementById('research-strategy').textContent = 'Not recorded';
        }

        // Update progress
        if (details.progress !== undefined) {
            const progressFill = document.getElementById('detail-progress-fill');
            const progressText = document.getElementById('detail-progress-percentage');
            if (progressFill && progressText) {
                progressFill.style.width = `${details.progress}%`;
                progressText.textContent = `${details.progress}%`;
            }
        }
    }

    // Display basic research metrics
    function displayResearchMetrics() {
        console.log('displayResearchMetrics called with:', metricsData);
        if (!metricsData) {
            console.error('No metrics data available');
            return;
        }

        // Update summary cards
        const totalTokensEl = document.getElementById('total-tokens');
        const totalTokens = formatNumber(metricsData.total_tokens || 0);
        console.log('Setting total tokens to:', totalTokens);
        totalTokensEl.textContent = totalTokens;

        // Calculate prompt/completion tokens from model usage
        let totalPromptTokens = 0;
        let totalCompletionTokens = 0;
        let totalCalls = 0;
        let model = 'Unknown';

        if (metricsData.model_usage && metricsData.model_usage.length > 0) {
            metricsData.model_usage.forEach(usage => {
                totalPromptTokens += usage.prompt_tokens || 0;
                totalCompletionTokens += usage.completion_tokens || 0;
                totalCalls += usage.calls || 0;
                if (model === 'Unknown') {
                    model = usage.model || 'Unknown';
                }
            });
        }

        document.getElementById('prompt-tokens').textContent = formatNumber(totalPromptTokens);
        document.getElementById('completion-tokens').textContent = formatNumber(totalCompletionTokens);
        document.getElementById('llm-calls').textContent = formatNumber(metricsData.total_calls || totalCalls);

        // Update model info
        document.getElementById('model-used').textContent = model;

        // Response time will be updated by timeline data
        document.getElementById('avg-response-time').textContent = '0s';
    }

    // Display timeline metrics
    function displayTimelineMetrics(timelineData) {
        if (!timelineData) return;

        // Update research info from timeline data
        if (timelineData.research_details) {
            const details = timelineData.research_details;
            document.getElementById('research-query').textContent = details.query || 'Unknown';
            document.getElementById('research-mode').textContent = details.mode || 'Unknown';
            if (details.created_at) {
                const date = new Date(details.created_at);
                document.getElementById('research-date').textContent = date.toLocaleString();
            }
        }

        // Update summary info
        if (timelineData.summary) {
            const summary = timelineData.summary;
            const avgResponseTime = (summary.avg_response_time || 0) / 1000;
            document.getElementById('avg-response-time').textContent = `${avgResponseTime.toFixed(1)}s`;
        }

        // Display phase breakdown
        if (timelineData.phase_stats) {
            const container = document.getElementById('phase-breakdown');
            container.innerHTML = '';

            Object.entries(timelineData.phase_stats).forEach(([phaseName, stats]) => {
                const item = document.createElement('div');
                item.className = 'phase-stat-item';
                item.innerHTML = `
                    <div class="phase-name">${phaseName}</div>
                    <div class="phase-tokens">${formatNumber(stats.tokens)} tokens</div>
                    <div class="phase-calls">${formatNumber(stats.count)} calls</div>
                `;
                container.appendChild(item);
            });
        }
    }

    // Display search metrics
    function displaySearchMetrics(searchData) {
        if (!searchData) return;

        // Update search summary metrics
        const totalSearches = searchData.total_searches || 0;
        const totalResults = searchData.total_results || 0;
        const avgResponseTime = searchData.avg_response_time || 0;
        const successRate = searchData.success_rate || 0;

        document.getElementById('total-searches').textContent = formatNumber(totalSearches);
        document.getElementById('total-search-results').textContent = formatNumber(totalResults);
        document.getElementById('avg-search-response-time').textContent = `${avgResponseTime.toFixed(0)}ms`;
        document.getElementById('search-success-rate').textContent = `${successRate.toFixed(1)}%`;

        // Display search engine breakdown
        if (!searchData.search_calls) return;

        const container = document.getElementById('search-engine-breakdown');
        container.innerHTML = '';

        searchData.search_calls.forEach(call => {
            const item = document.createElement('div');
            item.className = 'search-engine-item';
            item.innerHTML = `
                <div class="search-engine-info">
                    <div class="search-engine-name">${call.engine || 'Unknown'}</div>
                    <div class="search-engine-query">${call.query || 'No query'}</div>
                </div>
                <div class="search-engine-stats">
                    <div class="search-results">${formatNumber(call.results_count || 0)} results</div>
                    <div class="search-time">${((call.response_time_ms || 0) / 1000).toFixed(1)}s</div>
                </div>
            `;
            container.appendChild(item);
        });
    }

    // Create timeline chart
    function createTimelineChart(timelineData) {
        console.log('createTimelineChart called with:', timelineData);

        if (!timelineData || !timelineData.timeline) {
            console.log('No timeline data for chart, timelineData:', timelineData);
            return;
        }

        if (typeof Chart === 'undefined') {
            console.error('Chart.js not loaded!');
            return;
        }

        const chartElement = document.getElementById('timeline-chart');
        if (!chartElement) {
            console.error('Timeline chart element not found');
            return;
        }

        console.log('Creating timeline chart with', timelineData.timeline.length, 'data points');

        try {
            const ctx = chartElement.getContext('2d');
            console.log('Canvas context obtained');

            // Destroy existing chart
            if (timelineChart) {
                timelineChart.destroy();
            }

            // Prepare chart data with enhanced information
            const chartData = timelineData.timeline.map((item, index) => ({
                phase: item.research_phase || item.phase || `Step ${index + 1}`,
                tokens: item.tokens || 0,
                promptTokens: item.prompt_tokens || 0,
                completionTokens: item.completion_tokens || 0,
                timestamp: item.timestamp || item.created_at,
                responseTime: item.response_time_ms || 0
            }));

            const labels = chartData.map(item => item.phase);
            const totalTokens = chartData.map(item => item.tokens);
            const promptTokens = chartData.map(item => item.promptTokens);
            const completionTokens = chartData.map(item => item.completionTokens);

            console.log('Enhanced chart data:', chartData);

            timelineChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: labels,
                    datasets: [
                        {
                            label: 'Input Tokens',
                            data: promptTokens,
                            backgroundColor: 'rgba(99, 102, 241, 0.8)',
                            borderColor: 'rgba(99, 102, 241, 1)',
                            borderWidth: 1,
                            borderRadius: 4,
                            borderSkipped: false,
                        },
                        {
                            label: 'Output Tokens',
                            data: completionTokens,
                            backgroundColor: 'rgba(34, 197, 94, 0.8)',
                            borderColor: 'rgba(34, 197, 94, 1)',
                            borderWidth: 1,
                            borderRadius: 4,
                            borderSkipped: false,
                        }
                    ]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    animation: {
                        duration: 1000,
                        easing: 'easeInOutQuart'
                    },
                    interaction: {
                        intersect: false,
                        mode: 'index'
                    },
                    scales: {
                        x: {
                            stacked: true,
                            grid: {
                                display: false
                            },
                            ticks: {
                                font: {
                                    size: 11
                                },
                                maxRotation: 45,
                                minRotation: 0
                            }
                        },
                        y: {
                            stacked: true,
                            beginAtZero: true,
                            grid: {
                                color: 'rgba(0, 0, 0, 0.1)',
                                drawBorder: false
                            },
                            ticks: {
                                font: {
                                    size: 11
                                },
                                callback: function(value) {
                                    return formatNumber(value);
                                }
                            },
                            title: {
                                display: true,
                                text: 'Tokens',
                                font: {
                                    size: 12,
                                    weight: 'bold'
                                }
                            }
                        }
                    },
                    plugins: {
                        legend: {
                            display: true,
                            position: 'top',
                            align: 'end',
                            labels: {
                                usePointStyle: true,
                                pointStyle: 'rect',
                                font: {
                                    size: 11
                                },
                                padding: 15
                            }
                        },
                        tooltip: {
                            backgroundColor: 'rgba(0, 0, 0, 0.8)',
                            titleColor: 'white',
                            bodyColor: 'white',
                            borderColor: 'rgba(255, 255, 255, 0.1)',
                            borderWidth: 1,
                            cornerRadius: 8,
                            displayColors: true,
                            callbacks: {
                                title: function(tooltipItems) {
                                    const index = tooltipItems[0].dataIndex;
                                    const phase = chartData[index].phase;
                                    return phase;
                                },
                                beforeBody: function(tooltipItems) {
                                    const index = tooltipItems[0].dataIndex;
                                    const data = chartData[index];
                                    const total = data.tokens;
                                    return [`Total: ${formatNumber(total)} tokens`];
                                },
                                afterBody: function(tooltipItems) {
                                    const index = tooltipItems[0].dataIndex;
                                    const data = chartData[index];
                                    const lines = [];

                                    if (data.responseTime > 0) {
                                        lines.push(`Response time: ${(data.responseTime / 1000).toFixed(1)}s`);
                                    }

                                    if (data.timestamp) {
                                        const time = new Date(data.timestamp).toLocaleTimeString();
                                        lines.push(`Time: ${time}`);
                                    }

                                    return lines;
                                }
                            }
                        }
                    }
                }
            });

        console.log('Timeline chart created successfully');
        } catch (error) {
            console.error('Error creating timeline chart:', error);
            console.error('Chart error details:', error.message, error.stack);
        }
    }

    // Create search chart
    function createSearchChart(searchData) {
        if (!searchData || !searchData.search_calls) {
            console.log('No search data for chart');
            return;
        }

        const chartElement = document.getElementById('search-chart');
        if (!chartElement) {
            console.error('Search chart element not found');
            return;
        }

        const ctx = chartElement.getContext('2d');

        // Destroy existing chart
        if (searchChart) {
            searchChart.destroy();
        }

        // Prepare enhanced search data
        const searchCalls = searchData.search_calls.map((call, index) => ({
            label: call.query ? call.query.substring(0, 20) + '...' : `Search ${index + 1}`,
            results: call.results_count || 0,
            engine: call.engine || 'Unknown',
            responseTime: call.response_time_ms || 0,
            timestamp: call.timestamp
        }));

        const labels = searchCalls.map(call => call.label);
        const results = searchCalls.map(call => call.results);

        searchChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: labels,
                datasets: [{
                    label: 'Results Found',
                    data: results,
                    borderColor: 'rgba(168, 85, 247, 1)',
                    backgroundColor: 'rgba(168, 85, 247, 0.1)',
                    borderWidth: 2.5,
                    fill: true,
                    tension: 0.3,
                    pointBackgroundColor: 'rgba(168, 85, 247, 1)',
                    pointBorderColor: 'rgba(255, 255, 255, 1)',
                    pointBorderWidth: 2,
                    pointRadius: 4,
                    pointHoverRadius: 6
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                animation: {
                    duration: 800,
                    easing: 'easeInOutQuart'
                },
                interaction: {
                    intersect: false,
                    mode: 'index'
                },
                scales: {
                    x: {
                        grid: {
                            display: false
                        },
                        ticks: {
                            font: {
                                size: 10
                            },
                            maxRotation: 45
                        }
                    },
                    y: {
                        beginAtZero: true,
                        grid: {
                            color: 'rgba(0, 0, 0, 0.1)',
                            drawBorder: false
                        },
                        ticks: {
                            font: {
                                size: 10
                            },
                            callback: function(value) {
                                return formatNumber(value);
                            }
                        },
                        title: {
                            display: true,
                            text: 'Results',
                            font: {
                                size: 11,
                                weight: 'bold'
                            }
                        }
                    }
                },
                plugins: {
                    legend: {
                        display: false
                    },
                    tooltip: {
                        backgroundColor: 'rgba(0, 0, 0, 0.8)',
                        titleColor: 'white',
                        bodyColor: 'white',
                        borderColor: 'rgba(255, 255, 255, 0.1)',
                        borderWidth: 1,
                        cornerRadius: 6,
                        callbacks: {
                            title: function(tooltipItems) {
                                const index = tooltipItems[0].dataIndex;
                                return searchCalls[index].label;
                            },
                            beforeBody: function(tooltipItems) {
                                const index = tooltipItems[0].dataIndex;
                                const call = searchCalls[index];
                                return [`Engine: ${call.engine}`];
                            },
                            afterBody: function(tooltipItems) {
                                const index = tooltipItems[0].dataIndex;
                                const call = searchCalls[index];
                                const lines = [];

                                if (call.responseTime > 0) {
                                    lines.push(`Response time: ${(call.responseTime / 1000).toFixed(1)}s`);
                                }

                                return lines;
                            }
                        }
                    }
                }
            }
        });
    }

    // Load cost data
    async function loadCostData() {
        try {
            // Temporarily disable cost calculation until pricing logic is optimized
            document.getElementById('total-cost').textContent = '-';
            return;

            const response = await fetch(`/metrics/api/research-costs/${researchId}`);
            if (response.ok) {
                const data = await response.json();
                if (data.status === 'success') {
                    document.getElementById('total-cost').textContent = formatCurrency(data.total_cost || 0);
                }
            }
        } catch (error) {
            console.error('Error loading cost data:', error);
            document.getElementById('total-cost').textContent = '-';
        }
    }

    // Show error message
    function showError() {
        document.getElementById('loading').style.display = 'none';
        document.getElementById('error').style.display = 'block';
        document.getElementById('details-content').style.display = 'none';
    }

    // Check if all required DOM elements exist
    function checkRequiredElements() {
        const requiredIds = [
            'loading', 'error', 'details-content', 'total-tokens', 'prompt-tokens',
            'completion-tokens', 'llm-calls', 'avg-response-time', 'model-used',
            'research-query', 'research-mode', 'research-date', 'research-strategy', 'total-cost',
            'phase-breakdown', 'search-engine-breakdown', 'timeline-chart', 'search-chart'
        ];

        const missing = [];
        requiredIds.forEach(id => {
            if (!document.getElementById(id)) {
                missing.push(id);
            }
        });

        if (missing.length > 0) {
            console.error('Missing required DOM elements:', missing);
            return false;
        }
        return true;
    }

    // Initialize when DOM is ready
    document.addEventListener('DOMContentLoaded', function() {
        console.log('DOM loaded, initializing details page');

        researchId = getResearchIdFromUrl();
        console.log('Research ID from URL:', researchId);

        if (!researchId) {
            console.error('No research ID found in URL');
            showError();
            return;
        }

        // Check if all required elements exist
        if (!checkRequiredElements()) {
            console.error('Required DOM elements missing');
            showError();
            return;
        }

        // Update page title
        document.title = `Research Details #${researchId} - Deep Research System`;

        // Load research metrics
        loadResearchMetrics();

        // View Results button
        const viewResultsBtn = document.getElementById('view-results-btn');
        if (viewResultsBtn) {
            viewResultsBtn.addEventListener('click', () => {
                window.location.href = `/research/results/${researchId}`;
            });
        }

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

})();
