script.js

// Global variables for Excel data
let cellBudgetCountryData = {};

// Load real cell data with budget and country information
async function loadCellData() {
    try {
        const response = await fetch('cell_data.json');
        cellBudgetCountryData = await response.json();
        console.log('Loaded cell data for', Object.keys(cellBudgetCountryData).length, 'cells');
        return true;
    } catch (error) {
        console.error('Error loading cell data:', error);
        return false;
    }
}

// Calculate total budget for a cell based on movies in that cell
function calculateCellBudget(cellKey) {
    const cellData = cellBudgetCountryData[cellKey];
    console.log(`=== BUDGET DEBUG FOR ${cellKey} ===`);
    console.log('Cell data:', cellData);
    if (cellData) {
        console.log('Total budget from data:', cellData.total_budget);
        console.log('Number of movies in this cell:', cellData.movies ? cellData.movies.length : 'N/A');
        if (cellData.movies && cellData.movies.length > 0) {
            console.log('Sample movies with budgets:');
            cellData.movies.slice(0, 5).forEach((movie, idx) => {
                console.log(`  ${idx + 1}. "${movie.title}" - Budget: $${movie.budget?.toLocaleString() || 'N/A'}`);
            });
        }
    } else {
        console.log('No data found for this cell');
    }
    console.log('=====================================');
    return cellData ? cellData.total_budget : 0;
}

// Format budget for display (millions/billions with 2 decimals)
function formatBudget(budget) {
    if (budget === 0) return 'N/A';
    
    if (budget >= 1000000000) {
        return `$${(budget / 1000000000).toFixed(2)}B`;
    } else if (budget >= 1000000) {
        return `$${(budget / 1000000).toFixed(2)}M`;
    } else {
        return `$${budget.toLocaleString()}`;
    }
}



const colorMapping = {
    "A1": "#fa717b", "A2": "#fa717b", "A3": "#bc5d5e", "A4": "#ffffff", "A5": "#bc5d5e", "A6": "#ffffff", 
    "A7": "#ffffff", "A8": "#fa717b", "A9": "#ffffff", "A10": "#bc5d5e", "A11": "#fa717b", "A12": "#fa717b",
    "A13": "#fa717b", "A14": "#fa717b", "A15": "#ffffff", "A16": "#fa717b", "A17": "#ffffff", "A18": "#bc5d5e",
    "A19": "#ffffff", "A20": "#ffffff", "A21": "#ffffff", "A22": "#ffffff",
    
    "B1": "#fa717b", "B2": "#bc5d5e", "B3": "#bc5d5e", "B4": "#fa717b", "B5": "#bc5d5e", "B6": "#fa717b",
    "B7": "#bc5d5e", "B8": "#fa717b", "B9": "#ffffff", "B10": "#bc5d5e", "B11": "#ffffff", "B12": "#ffffff",
    "B13": "#fa717b", "B14": "#fa717b", "B15": "#ffffff", "B16": "#ffffff", "B17": "#ffffff", "B18": "#fa717b",
    "B19": "#fa717b", "B20": "#ffffff", "B21": "#ffffff", "B22": "#ffffff",
    
    "C1": "#fd0203", "C2": "#910101", "C3": "#910101", "C4": "#bc5d5e", "C5": "#910101", "C6": "#dd0430",
    "C7": "#dd0430", "C8": "#fd0203", "C9": "#fa717b", "C10": "#dd0430", "C11": "#bc5d5e", "C12": "#dd0430",
    "C13": "#fa717b", "C14": "#fa717b", "C15": "#dd0430", "C16": "#dd0430", "C17": "#bc5d5e", "C18": "#ffffff",
    "C19": "#fa717b", "C20": "#fd0203", "C21": "#fa717b", "C22": "#ffffff",
    
    "D1": "#910101", "D2": "#910101", "D3": "#fd0203", "D4": "#fd0203", "D5": "#910101", "D6": "#910101",
    "D7": "#dd0430", "D8": "#910101", "D9": "#bc5d5e", "D10": "#fd0203", "D11": "#fd0203", "D12": "#fd0203",
    "D13": "#bc5d5e", "D14": "#fa717b", "D15": "#fd0203", "D16": "#fd0203", "D17": "#fd0203", "D18": "#ffffff",
    "D19": "#bc5d5e", "D20": "#910101", "D21": "#bc5d5e", "D22": "#fa717b",
    
    "E1": "#fd0203", "E2": "#fd0203", "E3": "#bc5d5e", "E4": "#dd0430", "E5": "#fd0203", "E6": "#fd0203",
    "E7": "#fa717b", "E8": "#910101", "E9": "#dd0430", "E10": "#bc5d5e", "E11": "#dd0430", "E12": "#bc5d5e",
    "E13": "#fa717b", "E14": "#fa717b", "E15": "#dd0430", "E16": "#fd0203", "E17": "#dd0430", "E18": "#ffffff",
    "E19": "#bc5d5e", "E20": "#fd0203", "E21": "#bc5d5e", "E22": "#fa717b",
    
    "F1": "#dd0430", "F2": "#dd0430", "F3": "#ffffff", "F4": "#fa717b", "F5": "#bc5d5e", "F6": "#dd0430",
    "F7": "#ffffff", "F8": "#fd0203", "F9": "#bc5d5e", "F10": "#fa717b", "F11": "#bc5d5e", "F12": "#fa717b",
    "F13": "#ffffff", "F14": "#fa717b", "F15": "#fa717b", "F16": "#fa717b", "F17": "#fa717b", "F18": "#ffffff",
    "F19": "#ffffff", "F20": "#bc5d5e", "F21": "#fa717b", "F22": "#bc5d5e",
    
    "G1": "#bc5d5e", "G2": "#fa717b", "G3": "#ffffff", "G4": "#fa717b", "G5": "#ffffff", "G6": "#bc5d5e",
    "G7": "#ffffff", "G8": "#bc5d5e", "G9": "#fa717b", "G10": "#ffffff", "G11": "#ffffff", "G12": "#ffffff",
    "G13": "#ffffff", "G14": "#fa717b", "G15": "#ffffff", "G16": "#fa717b", "G17": "#ffffff", "G18": "#ffffff",
    "G19": "#ffffff", "G20": "#fa717b", "G21": "#ffffff", "G22": "#ffffff"
};

const tooltipData = {
    "A1": {listings: 1, views: "1,900,000"}, "A2": {listings: 1, views: "1,900,000"}, "A3": {listings: 6, views: "44,800,000"}, "A4": {listings: 0, views: "0"}, "A5": {listings: 3, views: "31,200,000"}, "A6": {listings: 0, views: "0"}, "A7": {listings: 0, views: "0"}, "A8": {listings: 4, views: "17,100,000"}, "A9": {listings: 0, views: "0"}, "A10": {listings: 4, views: "31,500,000"}, "A11": {listings: 1, views: "1,600,000"}, "A12": {listings: 1, views: "1,500,000"}, "A13": {listings: 1, views: "3,000,000"}, "A14": {listings: 1, views: "1,900,000"}, "A15": {listings: 0, views: "0"}, "A16": {listings: 1, views: "5,500,000"}, "A17": {listings: 0, views: "0"}, "A18": {listings: 10, views: "37,500,000"}, "A19": {listings: 0, views: "0"}, "A20": {listings: 0, views: "0"}, "A21": {listings: 0, views: "0"}, "A22": {listings: 0, views: "0"},
    
    "B1": {listings: 4, views: "10,900,000"}, "B2": {listings: 8, views: "53,200,000"}, "B3": {listings: 11, views: "61,400,000"}, "B4": {listings: 2, views: "16,400,000"}, "B5": {listings: 7, views: "43,800,000"}, "B6": {listings: 2, views: "14,300,000"}, "B7": {listings: 8, views: "64,000,000"}, "B8": {listings: 3, views: "6,100,000"}, "B9": {listings: 0, views: "0"}, "B10": {listings: 7, views: "22,100,000"}, "B11": {listings: 0, views: "0"}, "B12": {listings: 0, views: "0"}, "B13": {listings: 1, views: "5,600,000"}, "B14": {listings: 1, views: "1,400,000"}, "B15": {listings: 0, views: "0"}, "B16": {listings: 0, views: "0"}, "B17": {listings: 0, views: "0"}, "B18": {listings: 2, views: "10,100,000"}, "B19": {listings: 1, views: "3,500,000"}, "B20": {listings: 0, views: "0"}, "B21": {listings: 0, views: "0"}, "B22": {listings: 0, views: "0"},
    
    "C1": {listings: 67, views: "442,500,000"}, "C2": {listings: 97, views: "1,137,000,000"}, "C3": {listings: 87, views: "1,099,800,000"}, "C4": {listings: 6, views: "24,600,000"}, "C5": {listings: 160, views: "1,353,500,000"}, "C6": {listings: 38, views: "178,600,000"}, "C7": {listings: 29, views: "162,500,000"}, "C8": {listings: 76, views: "372,500,000"}, "C9": {listings: 3, views: "7,800,000"}, "C10": {listings: 36, views: "193,600,000"}, "C11": {listings: 22, views: "64,500,000"}, "C12": {listings: 43, views: "156,800,000"}, "C13": {listings: 3, views: "6,700,000"}, "C14": {listings: 4, views: "10,300,000"}, "C15": {listings: 22, views: "88,300,000"}, "C16": {listings: 35, views: "138,300,000"}, "C17": {listings: 10, views: "55,300,000"}, "C18": {listings: 0, views: "0"}, "C19": {listings: 2, views: "10,400,000"}, "C20": {listings: 53, views: "304,800,000"}, "C21": {listings: 1, views: "2,700,000"}, "C22": {listings: 0, views: "0"},
    
    "D1": {listings: 368, views: "2,622,800,000"}, "D2": {listings: 244, views: "1,862,600,000"}, "D3": {listings: 87, views: "978,200,000"}, "D4": {listings: 51, views: "206,100,000"}, "D5": {listings: 459, views: "3,046,600,000"}, "D6": {listings: 212, views: "1,436,500,000"}, "D7": {listings: 16, views: "94,300,000"}, "D8": {listings: 447, views: "2,393,400,000"}, "D9": {listings: 18, views: "56,700,000"}, "D10": {listings: 64, views: "321,000,000"}, "D11": {listings: 67, views: "377,700,000"}, "D12": {listings: 129, views: "556,200,000"}, "D13": {listings: 16, views: "73,300,000"}, "D14": {listings: 3, views: "13,700,000"}, "D15": {listings: 109, views: "648,500,000"}, "D16": {listings: 176, views: "971,000,000"}, "D17": {listings: 62, views: "303,000,000"}, "D18": {listings: 0, views: "0"}, "D19": {listings: 17, views: "70,700,000"}, "D20": {listings: 215, views: "1,455,200,000"}, "D21": {listings: 7, views: "37,100,000"}, "D22": {listings: 2, views: "6,600,000"},
    
    "E1": {listings: 151, views: "949,100,000"}, "E2": {listings: 101, views: "614,900,000"}, "E3": {listings: 5, views: "22,500,000"}, "E4": {listings: 37, views: "142,000,000"}, "E5": {listings: 53, views: "404,600,000"}, "E6": {listings: 82, views: "474,000,000"}, "E7": {listings: 1, views: "6,000,000"}, "E8": {listings: 200, views: "1,084,200,000"}, "E9": {listings: 20, views: "95,500,000"}, "E10": {listings: 15, views: "75,200,000"}, "E11": {listings: 32, views: "143,600,000"}, "E12": {listings: 12, views: "34,300,000"}, "E13": {listings: 3, views: "8,200,000"}, "E14": {listings: 2, views: "5,800,000"}, "E15": {listings: 26, views: "112,700,000"}, "E16": {listings: 32, views: "246,800,000"}, "E17": {listings: 34, views: "162,600,000"}, "E18": {listings: 0, views: "0"}, "E19": {listings: 12, views: "38,900,000"}, "E20": {listings: 57, views: "365,900,000"}, "E21": {listings: 8, views: "48,700,000"}, "E22": {listings: 3, views: "12,600,000"},
    
    "F1": {listings: 33, views: "186,800,000"}, "F2": {listings: 17, views: "122,300,000"}, "F3": {listings: 0, views: "0"}, "F4": {listings: 4, views: "13,600,000"}, "F5": {listings: 10, views: "46,900,000"}, "F6": {listings: 20, views: "92,500,000"}, "F7": {listings: 0, views: "0"}, "F8": {listings: 43, views: "211,500,000"}, "F9": {listings: 3, views: "15,300,000"}, "F10": {listings: 4, views: "18,400,000"}, "F11": {listings: 5, views: "29,900,000"}, "F12": {listings: 2, views: "9,500,000"}, "F13": {listings: 0, views: "0"}, "F14": {listings: 2, views: "3,200,000"}, "F15": {listings: 3, views: "4,500,000"}, "F16": {listings: 2, views: "17,800,000"}, "F17": {listings: 2, views: "14,400,000"}, "F18": {listings: 0, views: "0"}, "F19": {listings: 0, views: "0"}, "F20": {listings: 7, views: "52,200,000"}, "F21": {listings: 3, views: "11,100,000"}, "F22": {listings: 3, views: "20,800,000"},
    
    "G1": {listings: 5, views: "27,600,000"}, "G2": {listings: 2, views: "5,400,000"}, "G3": {listings: 0, views: "0"}, "G4": {listings: 2, views: "8,500,000"}, "G5": {listings: 0, views: "0"}, "G6": {listings: 3, views: "27,000,000"}, "G7": {listings: 0, views: "0"}, "G8": {listings: 6, views: "31,500,000"}, "G9": {listings: 1, views: "1,400,000"}, "G10": {listings: 0, views: "0"}, "G11": {listings: 0, views: "0"}, "G12": {listings: 0, views: "0"}, "G13": {listings: 0, views: "0"}, "G14": {listings: 1, views: "1,600,000"}, "G15": {listings: 0, views: "0"}, "G16": {listings: 2, views: "5,500,000"}, "G17": {listings: 0, views: "0"}, "G18": {listings: 0, views: "0"}, "G19": {listings: 0, views: "0"}, "G20": {listings: 1, views: "2,300,000"}, "G21": {listings: 0, views: "0"}, "G22": {listings: 0, views: "0"}
};

// Helper function to format numbers with commas
function formatNumberWithCommas(number) {
    // Remove any existing commas and convert to number
    const num = typeof number === 'string' ? parseFloat(number.replace(/,/g, '')) : number;
    return num.toLocaleString();
}

// Calculate ranking based on views/counts ratio
function calculateRankings() {
    const rankings = [];
    
    for (const [cellKey, data] of Object.entries(tooltipData)) {
        if (data.listings > 0) { // Only cells with actual data
            const views = parseInt(data.views.replace(/,/g, ''));
            const ratio = views / data.listings;
            rankings.push({
                cellKey,
                ratio,
                views: data.views,
                counts: data.listings
            });
        }
    }
    
    // Sort by ratio in descending order (highest ratio = rank 1)
    rankings.sort((a, b) => b.ratio - a.ratio);
    
    // Create ranking map
    const rankingMap = {};
    rankings.forEach((item, index) => {
        rankingMap[item.cellKey] = index + 1;
    });
    
    return rankingMap;
}

// Get genre and runtime from cell coordinates
function getCellInfo(cellKey) {
    const genres = [
        'Action', 'Adventure', 'Animation', 'Biography', 'Comedy', 'Crime', 'Documentary',
        'Drama', 'History', 'Family', 'Fantasy', 'Horror', 'Music', 'Musical', 'Mystery', 'Romance',
        'Sci-Fi', 'Short', 'Sport', 'Thriller', 'War', 'Western'
    ];
    
    const runtimeLabels = ['0.5', '1.0', '1.5', '2.0', '2.5', '3.0', '3.5'];
    
    const rowIndex = cellKey.charCodeAt(0) - 65; // A=0, B=1, etc.
    const colIndex = parseInt(cellKey.substring(1)) - 1; // 1=0, 2=1, etc.
    
    if (rowIndex >= 0 && rowIndex < runtimeLabels.length && colIndex >= 0 && colIndex < genres.length) {
        return {
            runtime: parseFloat(runtimeLabels[rowIndex]),
            genre: genres[colIndex]
        };
    }
    
    return null;
}

// Format runtime for display
function formatRuntime(runtime) {
    if (runtime === 0.5) return 'HALF HOUR';
    if (runtime === 1.0) return 'HOUR';
    if (runtime === 1.5) return 'HOUR & HALF';
    if (runtime === 2.0) return '2 HOUR';
    if (runtime === 2.5) return '2 & HALF HOUR';
    if (runtime === 3.0) return '3 HOUR';
    if (runtime === 3.5) return '3 & HALF HOUR';
    return `${runtime} HOUR`;
}

// Update detail section when cell is clicked
function updateDetailSection(cellKey) {
    const detailSection = document.querySelector('.detail-section');
    const data = tooltipData[cellKey];
    
    if (!data || data.listings === 0) {
        // Hide detail section for empty cells
        detailSection.style.display = 'none';
        return;
    }
    
    // Show detail section
    detailSection.style.display = 'flex';
    
    // Get ranking
    const rankings = calculateRankings();
    const rank = rankings[cellKey] || 'N/A';
    
    // Get cell info
    const cellInfo = getCellInfo(cellKey);
    
    // Update spot number
    const spotNumber = detailSection.querySelector('.detail-spot-number');
    spotNumber.textContent = rank;
    
    // Add double-click functionality to spot number (only add once)
    if (!spotNumber.hasAttribute('data-double-click-enabled')) {
        spotNumber.setAttribute('data-double-click-enabled', 'true');
        spotNumber.style.cursor = 'pointer';
        spotNumber.addEventListener('dblclick', handleSpotNumberDoubleClick);
    }
    
    // Update category title with equal width sizing
    if (cellInfo) {
        const runtimeElement = detailSection.querySelector('.detail-runtime');
        const genreElement = detailSection.querySelector('.detail-genre');
        
        const runtimeText = formatRuntime(cellInfo.runtime);
        const genreText = cellInfo.genre.toUpperCase();
        
        runtimeElement.textContent = runtimeText;
        genreElement.textContent = genreText;
        
        // Equalize the text widths
        equalizeTextWidths(runtimeElement, genreElement);
    }
    
    // Update stats with separated numbers and words
    const viewsElement = detailSection.querySelector('.detail-views');
    const countsElement = detailSection.querySelector('.detail-counts');
    const budgetElement = detailSection.querySelector('.detail-budget');
    
    viewsElement.innerHTML = `<span class="stat-number">${data.views}</span><span class="stat-label">Views</span>`;
    countsElement.innerHTML = `<span class="stat-number">${data.listings}</span><span class="stat-label">Count${data.listings === 1 ? '' : 's'}</span>`;
    
    // Calculate and display real budget data
    const totalBudget = calculateCellBudget(cellKey);
    budgetElement.innerHTML = `<span class="stat-number">${formatBudget(totalBudget)}</span><span class="stat-label">Budget</span>`;
    
    // Update movie poster and information
    const posterElement = detailSection.querySelector('.detail-poster');
    const movieTitleElement = detailSection.querySelector('.detail-movie-title');
    const movieViewsElement = detailSection.querySelector('.detail-movie-views');
    
    if (topMoviesData[cellKey]) {
        const movieData = topMoviesData[cellKey];
        
        // Set poster image
        posterElement.src = `posters/${cellKey}.jpg`;
        posterElement.alt = `${movieData.title} Poster`;
        posterElement.style.display = 'block';
        
        // Handle poster load error (fallback to placeholder)
        posterElement.onerror = function() {
            this.style.display = 'none';
        };
        
        // Set movie information
        movieTitleElement.textContent = movieData.title;
        movieViewsElement.textContent = `${movieData.views} views`;
    } else {
        // Hide poster and clear info if no data available
        posterElement.style.display = 'none';
        movieTitleElement.textContent = 'No data available';
        movieViewsElement.textContent = '';
    }
}

// Function to equalize text widths by adjusting font sizes
function equalizeTextWidths(element1, element2) {
    // Reset font sizes to default first
    element1.style.fontSize = '';
    element2.style.fontSize = '';
    
    // Get computed styles to find the current font size
    const style1 = window.getComputedStyle(element1);
    const style2 = window.getComputedStyle(element2);
    const baseFontSize = parseFloat(style1.fontSize);
    
    // Create temporary measuring elements
    const measurer1 = document.createElement('span');
    const measurer2 = document.createElement('span');
    
    // Copy styles but make invisible for measurement
    measurer1.style.cssText = `
        position: absolute;
        visibility: hidden;
        white-space: nowrap;
        font-family: ${style1.fontFamily};
        font-weight: ${style1.fontWeight};
        font-size: ${baseFontSize}px;
        letter-spacing: ${style1.letterSpacing};
    `;
    
    measurer2.style.cssText = `
        position: absolute;
        visibility: hidden;
        white-space: nowrap;
        font-family: ${style2.fontFamily};
        font-weight: ${style2.fontWeight};
        font-size: ${baseFontSize}px;
        letter-spacing: ${style2.letterSpacing};
    `;
    
    measurer1.textContent = element1.textContent;
    measurer2.textContent = element2.textContent;
    
    document.body.appendChild(measurer1);
    document.body.appendChild(measurer2);
    
    // Get the natural widths
    const width1 = measurer1.offsetWidth;
    const width2 = measurer2.offsetWidth;
    
    // Determine which text is shorter (will determine the target size)
    const shorterWidth = Math.min(width1, width2);
    const longerWidth = Math.max(width1, width2);
    
    // Calculate the font size that makes the longer text match the shorter width
    const targetFontSize = baseFontSize * (shorterWidth / longerWidth);
    
    // Apply the calculated font sizes
    if (width1 < width2) {
        // Runtime is shorter, genre gets smaller font
        element1.style.fontSize = baseFontSize + 'px';
        element2.style.fontSize = targetFontSize + 'px';
    } else {
        // Genre is shorter, runtime gets smaller font
        element1.style.fontSize = targetFontSize + 'px';
        element2.style.fontSize = baseFontSize + 'px';
    }
    
    // Clean up measuring elements
    document.body.removeChild(measurer1);
    document.body.removeChild(measurer2);
}

// Handle double-click on spot number to allow manual rank input
function handleSpotNumberDoubleClick(event) {
    const spotNumber = event.target;
    const currentRank = spotNumber.textContent;
    
    // Ask user for input using prompt - this always works
    const newRank = prompt('Enter rank number (1-154):', currentRank === 'N/A' ? '' : currentRank);
    
    if (newRank !== null) { // User didn't cancel
        const rank = parseInt(newRank);
        if (rank >= 1 && rank <= 154) {
            const rankings = calculateRankings();
            const cellKey = findCellByRank(rankings, rank);
            if (cellKey) {
                updateDetailSection(cellKey);
                updateCountsTable(cellKey);
                highlightTableCell(cellKey);
            } else {
                alert('No data found for rank ' + rank);
            }
        } else if (newRank.trim() !== '') {
            alert('Please enter a valid rank between 1 and 154');
        }
    }
}

// Find cell key by rank number
function findCellByRank(rankings, targetRank) {
    for (const [cellKey, rank] of Object.entries(rankings)) {
        if (rank === targetRank) {
            return cellKey;
        }
    }
    return null;
}

// Highlight the corresponding table cell
function highlightTableCell(cellKey) {
    // Remove previous highlights
    document.querySelectorAll('#data-table td').forEach(cell => {
        cell.classList.remove('selected');
    });
    
    // Find and highlight the new cell
    const table = document.getElementById('data-table');
    const rows = table.querySelectorAll('tr');
    
    // Parse cellKey (e.g., "A1" -> row A, column 1)
    const rowIndex = cellKey.charCodeAt(0) - 65; // A=0, B=1, etc.
    const colIndex = parseInt(cellKey.substring(1)) - 1; // 1=0, 2=1, etc.
    
    if (rows[rowIndex] && rows[rowIndex].children[colIndex]) {
        rows[rowIndex].children[colIndex].classList.add('selected');
    }
}



function generateTable() {
    const table = document.getElementById('data-table');
    const genreLabelsContainer = document.querySelector('.genre-labels-container');
    const runtimeLabelsContainer = document.querySelector('.runtime-labels');
    
    // Genre names (now horizontal)
    const genres = [
        'Action', 'Adventure', 'Animation', 'Biography', 'Comedy', 'Crime', 'Documentary',
        'Drama', 'History', 'Family', 'Fantasy', 'Horror', 'Music', 'Musical', 'Mystery',
        'Romance', 'Sci-Fi', 'Short', 'Sport', 'Thriller', 'War', 'Western'
    ];
    
    // Runtime labels (now vertical)
    const runtimeLabels = ['0.5', '1.0', '1.5', '2.0', '2.5', '3.0', '3.5'];
    
    // Clear existing content
    table.innerHTML = '';
    genreLabelsContainer.innerHTML = '';
    
    // Generate genre labels (horizontal)
    genres.forEach(genre => {
        const label = document.createElement('div');
        label.className = 'genre-label';
        label.textContent = genre;
        genreLabelsContainer.appendChild(label);
    });
    
    // Generate runtime labels if container doesn't exist
    let runtimeContainer = document.querySelector('.runtime-labels');
    if (!runtimeContainer) {
        runtimeContainer = document.createElement('div');
        runtimeContainer.className = 'runtime-labels';
        document.querySelector('.table-container').insertBefore(runtimeContainer, table);
    }
    
    runtimeContainer.innerHTML = '';
    runtimeLabels.forEach(runtime => {
        const label = document.createElement('div');
        label.className = 'runtime-label';
        label.textContent = runtime;
        runtimeContainer.appendChild(label);
    });
    
    // Generate table with flipped axes
    // Now: 7 rows (runtimes) x 22 columns (genres)
    const rows = 7; // Runtime categories
    const cols = 22; // Genres
    const rowLabels = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
    
    for (let runtimeIndex = 0; runtimeIndex < rows; runtimeIndex++) {
        const tr = document.createElement('tr');
        
        for (let genreIndex = 0; genreIndex < cols; genreIndex++) {
            const td = document.createElement('td');
            // Cell key remains the same: A1, A2, etc. where A-G is runtime, 1-22 is genre
            const cellKey = rowLabels[runtimeIndex] + (genreIndex + 1);
            
            // Apply color from mapping
            if (colorMapping[cellKey]) {
                td.style.backgroundColor = colorMapping[cellKey];
            } else {
                td.style.backgroundColor = '#333333';
            }
            
            // Add hover functionality
            td.addEventListener('mouseenter', function(e) {
                showTooltip(e, cellKey);
            });
            
            td.addEventListener('mouseleave', function() {
                hideTooltip();
            });
            
            // Add click functionality
            td.addEventListener('click', function() {
                console.log(`=== CELL CLICKED ===`);
                console.log(`Runtime Index: ${runtimeIndex}, Genre Index: ${genreIndex}`);
                console.log(`Generated Cell Key: ${cellKey}`);
                
                // Show counts table on first click
                const countsContainer = document.querySelector('.counts-table-container');
                if (countsContainer.style.display === 'none') {
                    countsContainer.style.display = 'flex';
                }
                
                updateCountsTable(cellKey);
                
                // Update detail section
                updateDetailSection(cellKey);
                
                // Visual feedback for clicked cell
                document.querySelectorAll('#data-table td').forEach(cell => {
                    cell.classList.remove('selected');
                });
                td.classList.add('selected');
            });
            
            tr.appendChild(td);
        }
        
        table.appendChild(tr);
    }
}

function showTooltip(event, cellKey) {
    const tooltip = document.getElementById('tooltip') || createTooltip();
    const data = tooltipData[cellKey];
    
    if (data) {
        const countsText = data.listings === 1 ? '1 Count' : `${data.listings} Counts`;
        const viewsText = `${data.views} Views`;
        
        tooltip.innerHTML = `
            <div class="tooltip-line"><span class="tooltip-number">${data.listings}</span> ${data.listings === 1 ? 'Count' : 'Counts'}</div>
            <div class="tooltip-line"><span class="tooltip-number">${data.views}</span> Views</div>
        `;
        
        tooltip.style.display = 'block';
        
        // Position tooltip near the mouse
        const rect = event.target.getBoundingClientRect();
        tooltip.style.left = (rect.left + rect.width / 2) + 'px';
        tooltip.style.top = (rect.top - tooltip.offsetHeight - 10) + 'px';
    }
}

function hideTooltip() {
    const tooltip = document.getElementById('tooltip');
    if (tooltip) {
        tooltip.style.display = 'none';
    }
}

function createTooltip() {
    const tooltip = document.createElement('div');
    tooltip.id = 'tooltip';
    tooltip.className = 'tooltip';
    document.body.appendChild(tooltip);
    return tooltip;
}

// CSV data storage
let csvData = {};

// Load CSV data
async function loadCSVData() {
    try {
        const response = await fetch('Itimized Counts.csv');
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        const csvText = await response.text();
        console.log('CSV loaded successfully, length:', csvText.length);
        console.log('First 1000 characters of CSV:', csvText.substring(0, 1000));
        parseCSVData(csvText);
        
        // Only add real data if no CSV data was parsed
        if (Object.keys(csvData).length === 0) {
            console.log('No CSV data found, using real Netflix data...');
            addRealData();
        } else {
            console.log(`Successfully loaded ${Object.keys(csvData).length} cells from CSV`);
        }
    } catch (error) {
        console.log('CSV file not found or could not be loaded:', error);
        // Use real Netflix data
        addRealData();
    }
}

// Real Netflix data from your CSV  
function addRealData() {
    csvData = {};

    // Basic test data to get it working
    csvData['A1'] = [{ title: 'Pokémon: The Arceus Chronicles', views: '1,900,000' }];
    csvData['B1'] = [{ title: 'Miraculous World: New York, United Heroez', views: '3,800,000' }];
    csvData['C1'] = [{ title: 'Malibu Rescue', views: '1,800,000' }];
    csvData['D1'] = [{ title: 'Counterattack // Contraataque', views: '71,300,000' }];
    csvData['E1'] = [{ title: 'The Electric State', views: '74,200,000' }];
    csvData['F1'] = [{ title: 'Kraven the Hunter', views: '34,500,000' }];
    csvData['G1'] = [{ title: 'GOAT - The Greatest of All Time', views: '2,300,000' }];
    
    csvData['A2'] = [{ title: 'Pokémon: The Arceus Chronicles', views: '1,900,000' }];
    csvData['A3'] = [{ title: 'Sing: Thriller', views: '27,000,000' }];
    
    // Initialize empty arrays for all other cells
    for (let col = 0; col < 7; col++) {
        const colLetter = String.fromCharCode(65 + col); // A, B, C, D, E, F, G
        for (let row = 4; row <= 22; row++) {
            const cellKey = colLetter + row;
            if (!csvData[cellKey]) {
                csvData[cellKey] = [];
            }
        }
    }
    
    console.log('Netflix data loaded for', Object.keys(csvData).length, 'cells');
}

// Parse CSV data into structured format - FIXED FOR ACTUAL CSV STRUCTURE
function parseCSVData(csvText) {
    console.log('CSV Text received, parsing actual horizontal structure...');
    
    const lines = csvText.split(/\r?\n/);
    if (lines.length < 3) {
        console.error('CSV file too short - need at least 3 rows');
        return;
    }
    
    // Parse the CSV properly as columns
    const rows = [];
    for (let line of lines) {
        // Split by comma, but handle quoted fields properly
        const row = [];
        let current = '';
        let inQuotes = false;
        
        for (let i = 0; i < line.length; i++) {
            const char = line[i];
            if (char === '"') {
                inQuotes = !inQuotes;
            } else if (char === ',' && !inQuotes) {
                row.push(current.trim());
                current = '';
            } else {
                current += char;
            }
        }
        row.push(current.trim()); // Add the last field
        rows.push(row);
    }
    
    console.log(`Parsed ${rows.length} rows, first row has ${rows[0].length} columns`);
    console.log('Row 0 (identifiers):', rows[0].slice(0, 20)); // Show first 20 identifiers
    console.log('Row 1 (headers):', rows[1].slice(0, 20)); // Show first 20 headers
    
    // Debug: Show exactly what's in the first 10 columns
    for (let i = 0; i < Math.min(10, rows[0].length); i++) {
        const cell = rows[0][i];
        const cleaned = cell ? cell.replace(/^\ufeff/, '') : cell;
        console.log(`  Column ${i}: "${cell}" -> cleaned: "${cleaned}"`);
    }
    
    // Find all columns with identifiers first
    const identifierColumns = [];
    for (let col = 0; col < rows[0].length; col++) {
        let identifier = rows[0][col];
        if (identifier && identifier.trim() !== '') {
            // Remove BOM character if present
            identifier = identifier.replace(/^\ufeff/, '').trim();
            
            // Check if it matches identifier pattern
            const match = identifier.match(/^(\d+)([A-G])$/);
            if (match) {
                identifierColumns.push({
                    col: col,
                    identifier: identifier,
                    rowNum: match[1],
                    colLetter: match[2]
                });
            }
        }
    }
    
    console.log(`Found ${identifierColumns.length} identifier columns:`, identifierColumns);
    
    // Process each identifier column and its corresponding views column
    for (let i = 0; i < identifierColumns.length; i++) {
        const identifierInfo = identifierColumns[i];
        const movieCol = identifierInfo.col;
        const viewsCol = movieCol + 1; // Views should be in the next column
        
        const cellKey = identifierInfo.colLetter + identifierInfo.rowNum; // Convert "1A" to "A1"
        
        console.log(`✓ Processing ${identifierInfo.identifier} -> ${cellKey} (columns ${movieCol}, ${viewsCol})`);
        
        csvData[cellKey] = [];
        
        // Extract all movies and views from this column pair
        let movieCount = 0;
        for (let rowIdx = 2; rowIdx < rows.length; rowIdx++) {
            const movieTitle = rows[rowIdx][movieCol] ? rows[rowIdx][movieCol].trim() : '';
            const movieViews = rows[rowIdx][viewsCol] ? rows[rowIdx][viewsCol].trim() : '';
            
            if (movieTitle && movieViews && movieTitle !== 'Count(s)' && movieViews !== 'Views') {
                // Clean up the data
                const cleanTitle = movieTitle.replace(/"/g, '').replace(/¬/g, '').replace(/[""]/g, '"').trim();
                let cleanViews = movieViews.replace(/"/g, '').replace(/[,\s]/g, '').trim();
                
                // Remove any non-numeric characters except commas for formatting
                cleanViews = cleanViews.replace(/[^\d,]/g, '');
                
                if (cleanTitle && cleanViews && cleanViews !== '' && !isNaN(cleanViews.replace(/,/g, ''))) {
                    csvData[cellKey].push({
                        title: cleanTitle,
                        views: cleanViews
                    });
                    movieCount++;
                }
            }
        }
        
        console.log(`✓ ${cellKey}: ${movieCount} movies extracted`);
        if (csvData[cellKey].length > 0) {
            console.log(`  First movie: "${csvData[cellKey][0].title}" (${csvData[cellKey][0].views})`);
        }
    }
    
    const cellsWithData = Object.keys(csvData).filter(key => csvData[key].length > 0);
    console.log(`Final parsing complete: ${Object.keys(csvData).length} cells total`);
    console.log(`Cells with data (${cellsWithData.length}):`, cellsWithData);
    
    // Show summary of data
    let totalMovies = 0;
    cellsWithData.forEach(cell => {
        totalMovies += csvData[cell].length;
        console.log(`  ${cell}: ${csvData[cell].length} movies`);
    });
    console.log(`Total movies extracted: ${totalMovies}`);
}

// Create counts table if it doesn't exist
function createCountsTableIfNeeded() {
    const existingContainer = document.querySelector('.counts-table-container');
    if (existingContainer) {
        return; // Already exists in HTML
    }
    
    console.log('Creating counts table dynamically...');
    
    const sidebar = document.querySelector('.sidebar');
    if (!sidebar) {
        console.error('Sidebar not found!');
        return;
    }
    
    const container = document.createElement('div');
    container.className = 'counts-table-container';
    container.style.display = 'none'; // Initially hidden
    
    const table = document.createElement('table');
    table.className = 'counts-table';
    
    const thead = document.createElement('thead');
    const headerRow = document.createElement('tr');
    const headerCell = document.createElement('th');
    headerCell.className = 'counts-header';
    headerCell.textContent = 'Counts';
    headerCell.colSpan = 2;
    headerRow.appendChild(headerCell);
    thead.appendChild(headerRow);
    
    const tbody = document.createElement('tbody');
    tbody.className = 'counts-body';
    
    // Initial content
    const row = document.createElement('tr');
    const cell = document.createElement('td');
    cell.colSpan = 2;
    cell.textContent = 'Click a square to see movie data';
    cell.style.textAlign = 'center';
    cell.style.fontStyle = 'italic';
    cell.style.color = '#666';
    row.appendChild(cell);
    tbody.appendChild(row);
    
    table.appendChild(thead);
    table.appendChild(tbody);
    container.appendChild(table);
    
    sidebar.appendChild(container);
    console.log('Counts table created and added to sidebar');
}

// Update counts table based on selected cell
function updateCountsTable(cellKey) {
    console.log(`Updating counts table for cell: ${cellKey}`);
    
    // Make sure table exists
    createCountsTableIfNeeded();
    
    const tbody = document.querySelector('.counts-body');
    const header = document.querySelector('.counts-header');
    
    if (!tbody || !header) {
        console.error('Counts table elements not found!');
        return;
    }
    
    // Update header color based on cell color
    const cellColor = colorMapping[cellKey];
    if (cellColor && cellColor !== '#ffffff' && cellColor !== 'white') {
        header.style.backgroundColor = cellColor;
    } else {
        header.style.backgroundColor = 'transparent';
        header.style.border = '1px solid white';
    }
    
    console.log('CSV Data available:', Object.keys(csvData));
    console.log(`Data for ${cellKey}:`, csvData[cellKey]);
    
    tbody.innerHTML = '';
    
    const data = csvData[cellKey] || [];
    
    // Create exactly 5 rows for the visible area
    for (let i = 0; i < 5; i++) {
        const row = document.createElement('tr');
        
        if (i < data.length && data[i]) {
            // Movie data available
            const movie = data[i];
            
            const titleCell = document.createElement('td');
            titleCell.className = 'movie-title';
            titleCell.textContent = movie.title;
            
            const viewsCell = document.createElement('td');
            viewsCell.className = 'movie-views';
            viewsCell.textContent = `${formatNumberWithCommas(movie.views)} Views`;
            
            row.appendChild(titleCell);
            row.appendChild(viewsCell);
        } else {
            // Blank row
            const titleCell = document.createElement('td');
            titleCell.className = 'movie-title';
            titleCell.innerHTML = '&nbsp;';
            
            const viewsCell = document.createElement('td');
            viewsCell.className = 'movie-views';
            viewsCell.innerHTML = '&nbsp;';
            
            row.appendChild(titleCell);
            row.appendChild(viewsCell);
        }
        
        tbody.appendChild(row);
    }
    
    // Add remaining movies for scrolling (if more than 5)
    for (let i = 5; i < data.length; i++) {
        const row = document.createElement('tr');
        const movie = data[i];
        
        const titleCell = document.createElement('td');
        titleCell.className = 'movie-title';
        titleCell.textContent = movie.title;
        
        const viewsCell = document.createElement('td');
        viewsCell.className = 'movie-views';
        viewsCell.textContent = `${formatNumberWithCommas(movie.views)} Views`;
        
        row.appendChild(titleCell);
        row.appendChild(viewsCell);
        tbody.appendChild(row);
    }
    
    console.log(`Table shows 5 rows (${Math.min(data.length, 5)} with data) ${data.length > 5 ? `+ ${data.length - 5} scrollable` : ''}`);
}

// Function to get the movie with most views from each cell
function getTopMovieFromEachCell() {
    const topMovies = {};
    
    for (const [cellKey, movies] of Object.entries(csvData)) {
        if (movies && movies.length > 0) {
            // Find the movie with the highest views in this cell
            let topMovie = movies[0];
            let maxViews = parseInt(topMovie.views.replace(/,/g, '')) || 0;
            
            for (let i = 1; i < movies.length; i++) {
                const currentViews = parseInt(movies[i].views.replace(/,/g, '')) || 0;
                if (currentViews > maxViews) {
                    maxViews = currentViews;
                    topMovie = movies[i];
                }
            }
            
            // Get cell info for context
            const cellInfo = getCellInfo(cellKey);
            
            topMovies[cellKey] = {
                title: topMovie.title,
                views: topMovie.views,
                viewsNumber: maxViews,
                runtime: cellInfo ? formatRuntime(cellInfo.runtime) : 'Unknown',
                genre: cellInfo ? cellInfo.genre : 'Unknown'
            };
        }
    }
    
    return topMovies;
}

// Function to display the top movies report
function displayTopMoviesReport() {
    const topMovies = getTopMovieFromEachCell();
    const sortedCells = Object.keys(topMovies).sort();
    
    console.log('=== TOP MOVIE FROM EACH CELL ===');
    console.log('Cell | Runtime | Genre | Title | Views');
    console.log('-----|---------|-------|-------|-------');
    
    sortedCells.forEach(cellKey => {
        const movie = topMovies[cellKey];
        console.log(`${cellKey.padEnd(4)} | ${movie.runtime.padEnd(7)} | ${movie.genre.padEnd(5)} | ${movie.title.padEnd(30)} | ${movie.views}`);
    });
    
    // Also return sorted by views (highest first)
    const sortedByViews = Object.entries(topMovies)
        .sort((a, b) => b[1].viewsNumber - a[1].viewsNumber)
        .slice(0, 20); // Top 20
    
    console.log('\n=== TOP 20 MOVIES BY VIEWS ===');
    console.log('Rank | Cell | Title | Views | Runtime | Genre');
    console.log('-----|------|-------|-------|---------|-------');
    
    sortedByViews.forEach(([cellKey, movie], index) => {
        console.log(`${(index + 1).toString().padEnd(4)} | ${cellKey.padEnd(4)} | ${movie.title.padEnd(25)} | ${movie.views.padEnd(7)} | ${movie.runtime.padEnd(7)} | ${movie.genre}`);
    });
    
    return topMovies;
}

// Top movies data for each cell (from the analysis)
const topMoviesData = {
    'A1': { title: 'Pokémon: The Arceus Chronicles', views: '1,900,000' },
    'A2': { title: 'Pokémon: The Arceus Chronicles', views: '1,900,000' },
    'A3': { title: 'Sing: Thriller', views: '27,000,000' },
    'A5': { title: 'Sing: Thriller', views: '27,000,000' },
    'A8': { title: 'Anuja', views: '8,100,000' },
    'A10': { title: 'Sing: Thriller', views: '27,000,000' },
    'A11': { title: 'An Elf\'s Story: The Elf on the Shelf', views: '1,600,000' },
    'A12': { title: 'The Blue Drum', views: '1,500,000' },
    'A13': { title: 'Avicii - My Last Show', views: '3,000,000' },
    'A14': { title: 'Sorga Vaasal', views: '1,900,000' },
    'A16': { title: 'The Back-Up Plan', views: '5,500,000' },
    'A18': { title: 'Masha and the Bear: The Legend of the 12 Months', views: '11,200,000' },
    'B1': { title: 'Miraculous World: New York, United Heroez', views: '3,800,000' },
    'B2': { title: 'Minions & More Volume 1', views: '15,700,000' },
    'B3': { title: 'Minions & More Volume 1', views: '15,700,000' },
    'B4': { title: 'Untold: The Fall of Favre', views: '10,800,000' },
    'B5': { title: 'Minions & More Volume 1', views: '15,700,000' },
    'B6': { title: 'Untold: The Fall of Favre', views: '10,800,000' },
    'B7': { title: 'Trainwreck: Poop Cruise', views: '22,700,000' },
    'B8': { title: 'Baki Hanma VS Kengan Ashura', views: '2,400,000' },
    'B10': { title: 'Barbie Dolphin Magic', views: '8,200,000' },
    'B13': { title: 'Sisters (2015)', views: '5,600,000' },
    'B14': { title: 'Barbie Big City Big Dreams', views: '1,400,000' },
    'B18': { title: 'The Quilters', views: '5,600,000' },
    'B19': { title: 'Untold: The Murder of Air McNair', views: '3,500,000' },
    'C1': { title: 'Counterattack', views: '71,300,000' },
    'C2': { title: 'The Secret Life of Pets 2', views: '74,500,000' },
    'C3': { title: 'The Secret Life of Pets 2', views: '74,500,000' },
    'C4': { title: 'Untold: The Liver King', views: '7,900,000' },
    'C5': { title: 'The Secret Life of Pets 2', views: '74,500,000' },
    'C6': { title: 'Con Mum', views: '15,100,000' },
    'C7': { title: 'The Twister: Caught in the Storm', views: '27,300,000' },
    'C8': { title: 'K.O.', views: '43,500,000' },
    'C9': { title: 'Britain and The Blitz', views: '4,900,000' },
    'C10': { title: 'Dr. Seuss\' The Grinch', views: '25,900,000' },
    'C11': { title: 'Liar Liar (1997)', views: '11,400,000' },
    'C12': { title: 'Fear Street: Prom Queen', views: '22,900,000' },
    'C13': { title: 'Banger', views: '3,400,000' },
    'C14': { title: 'Blue Story', views: '3,700,000' },
    'C15': { title: 'Fear Street: Prom Queen', views: '22,900,000' },
    'C16': { title: 'The Heart Knows', views: '22,000,000' },
    'C17': { title: 'Lucy (2014)', views: '16,500,000' },
    'C19': { title: 'Happy Gilmore', views: '7,600,000' },
    'C20': { title: 'Counterattack', views: '71,300,000' },
    'C21': { title: 'Grave of the Fireflies', views: '2,700,000' },
    'D1': { title: 'Back in Action', views: '164,700,000' },
    'D2': { title: 'Despicable Me 4', views: '69,800,000' },
    'D3': { title: 'Despicable Me 4', views: '69,800,000' },
    'D4': { title: 'Number 24', views: '24,200,000' },
    'D5': { title: 'Back in Action', views: '164,700,000' },
    'D6': { title: 'Havoc', views: '86,900,000' },
    'D7': { title: 'A Deadly American Marriage', views: '32,300,000' },
    'D8': { title: 'STRAW', views: '102,900,000' },
    'D9': { title: 'The Children\'s Train', views: '14,500,000' },
    'D10': { title: 'Sing (2016)', views: '41,100,000' },
    'D11': { title: 'Damsel', views: '20,400,000' },
    'D12': { title: 'Ma (2019)', views: '22,500,000' },
    'D13': { title: 'Purple Hearts', views: '13,900,000' },
    'D14': { title: 'Grease', views: '6,200,000' },
    'D15': { title: 'Exterritorial', views: '87,500,000' },
    'D16': { title: 'La Dolce Villa', views: '55,500,000' },
    'D17': { title: 'Venom: The Last Dance', views: '39,600,000' },
    'D19': { title: 'The Match', views: '7,400,000' },
    'D20': { title: 'STRAW', views: '102,900,000' },
    'D21': { title: 'Number 24', views: '24,200,000' },
    'D22': { title: 'High Plains Drifter', views: '4,900,000' },
    'E1': { title: 'The Electric State', views: '74,200,000' },
    'E2': { title: 'The Electric State', views: '74,200,000' },
    'E3': { title: 'Spider-Man: Across the Spider-Verse', views: '8,500,000' },
    'E4': { title: 'Trial by Fire (2018)', views: '12,600,000' },
    'E5': { title: 'The Life List', views: '95,500,000' },
    'E6': { title: 'Bullet Train Explosion', views: '33,400,000' },
    'E7': { title: 'Into the Fire: The Lost Daughter: Season 1', views: '6,000,000' },
    'E8': { title: 'The Life List', views: '95,500,000' },
    'E9': { title: 'The Six Triple Eight', views: '28,800,000' },
    'E10': { title: 'How To Make Millions Before Grandma Dies', views: '8,800,000' },
    'E11': { title: 'Spider-Man: No Way Home', views: '15,000,000' },
    'E12': { title: 'Bird Box', views: '6,000,000' },
    'E13': { title: 'Latin Blood - The Ballad of Ney Matogrosso', views: '5,100,000' },
    'E14': { title: 'EMILIA PÉREZ', views: '3,400,000' },
    'E15': { title: 'Where the Crawdads Sing', views: '17,500,000' },
    'E16': { title: 'The Life List', views: '95,500,000' },
    'E17': { title: 'Transformers: Rise of the Beasts', views: '17,200,000' },
    'E19': { title: 'TEST', views: '7,400,000' },
    'E20': { title: 'Kraven the Hunter', views: '34,500,000' },
    'E21': { title: 'The Six Triple Eight', views: '28,800,000' },
    'E22': { title: 'The Harder They Fall', views: '6,400,000' },
    'F1': { title: 'Mission: Impossible - Dead Reckoning', views: '31,100,000' },
    'F2': { title: 'Mission: Impossible - Dead Reckoning', views: '31,100,000' },
    'F4': { title: 'Oppenheimer (2023)', views: '4,300,000' },
    'F5': { title: 'Transformers: The Last Knight', views: '10,100,000' },
    'F6': { title: 'Deva', views: '12,700,000' },
    'F8': { title: 'Deva', views: '12,700,000' },
    'F9': { title: 'Chhaava', views: '9,500,000' },
    'F10': { title: 'Harry Potter and the Chamber of Secrets', views: '6,300,000' },
    'F11': { title: 'Meet Joe Black', views: '9,100,000' },
    'F12': { title: 'Bhool Bhulaiyaa 3', views: '8,100,000' },
    'F14': { title: 'Yeh Jawaani Hai Deewani', views: '1,700,000' },
    'F15': { title: 'The Hateful Eight', views: '1,800,000' },
    'F16': { title: 'Meet Joe Black', views: '9,100,000' },
    'F17': { title: 'Interstellar', views: '12,400,000' },
    'F20': { title: 'Mission: Impossible - Dead Reckoning', views: '31,100,000' },
    'F21': { title: 'Inglourious Basterds', views: '6,800,000' },
    'F22': { title: 'Horizon: An American Saga: Chapter 1', views: '11,000,000' },
    'G1': { title: 'Pushpa 2: The Rule (Reloaded Version)', views: '17,100,000' },
    'G2': { title: 'King Kong (2005)', views: '3,900,000' },
    'G4': { title: 'The Irishman', views: '7,100,000' },
    'G6': { title: 'Pushpa 2: The Rule (Reloaded Version)', views: '17,100,000' },
    'G8': { title: 'Pushpa 2: The Rule (Reloaded Version)', views: '17,100,000' },
    'G9': { title: 'Schindler\'s List', views: '1,400,000' },
    'G14': { title: 'Kabhi Khushi Kabhie Gham', views: '1,600,000' },
    'G16': { title: 'King Kong (2005)', views: '3,900,000' },
    'G20': { title: 'GOAT - The Greatest of All Time', views: '2,300,000' }
};

// Function to update color mapping (call this with your Excel data)
function updateColorMapping(newColorData) {
    Object.assign(colorMapping, newColorData);
    generateTable();
}

// Example of how to load color data from Excel:
// To use this with your actual Excel file, you would need to:
// 1. Convert Excel to JSON format, or
// 2. Use a library like SheetJS to read Excel files, or  
// 3. Export Excel as CSV and parse it
// 
// Example format for your color data:
// const excelColorData = {
//     "A1": "#your_color_code",
//     "A2": "#your_color_code", 
//     // ... etc for all 154 cells (7 rows × 22 columns)
// };
// updateColorMapping(excelColorData);

// Generate table when page loads
document.addEventListener('DOMContentLoaded', function() {
    // Initialize video overlay functionality
    initializeVideoOverlay();
    
    // Load both CSV data and cell budget/country data
    Promise.all([
        loadCSVData(),
        loadCellData()
    ]).then(() => {
        generateTable();
        
        // Test button removed - CSV data is now working!
        
        // Show available data after load
        setTimeout(() => {
            console.log('=== FINAL DATA LOADED ===');
            console.log('Available cells:', Object.keys(csvData));
            console.log('Total cells with data:', Object.keys(csvData).length);
            console.log('Cell budget/country data loaded for:', Object.keys(cellBudgetCountryData).length, 'cells');
            
            // Generate top movies report
            displayTopMoviesReport();
            
            // Auto-test with first available cell that has data
            const availableCells = Object.keys(csvData).filter(key => csvData[key] && csvData[key].length > 0);
            if (availableCells.length > 0) {
                console.log(`Auto-testing first available cell: ${availableCells[0]}`);
                updateCountsTable(availableCells[0]);
            }
        }, 500);
    });
    
    // Handle window resize for responsive design
    window.addEventListener('resize', function() {
        // Recalculate sizes if needed
        setTimeout(() => {
            generateTable();
        }, 100);
    });
});

function initializeVideoOverlay() {
    const videoOverlay = document.getElementById('video-overlay');
    const introVideo = document.getElementById('intro-video');
    const body = document.body;
    
    // Add class to prevent scrolling during video
    body.classList.add('video-playing');
    
    // Handle video end event
    introVideo.addEventListener('ended', function() {
        fadeOutVideo();
    });
    
    // Handle video error (if video file doesn't exist)
    introVideo.addEventListener('error', function() {
        console.log('Video file not found, skipping intro');
        fadeOutVideo();
    });
    
    // Optional: Allow clicking to skip video
    videoOverlay.addEventListener('click', function() {
        fadeOutVideo();
    });
    
    // Optional: Allow pressing any key to skip video
    document.addEventListener('keydown', function(event) {
        if (videoOverlay.style.opacity !== '0') {
            fadeOutVideo();
        }
    }, { once: true });
    
    function fadeOutVideo() {
        videoOverlay.classList.add('fade-out');
        body.classList.remove('video-playing');
        
        // Remove the overlay completely after fade animation
        setTimeout(() => {
            videoOverlay.remove();
        }, 1000);
    }
}