{% extends "base.html" %}
{% block content %}

<style>
.benchmark-page {
    max-width: 1600px;
    margin: 0 auto;
    padding: 20px;
}

.page-header {
    margin-bottom: 30px;
}

.page-header h1 {
    font-size: 32px;
    font-weight: 600;
    color: #1a202c;
    margin-bottom: 8px;
}

.page-header p {
    color: #6b7280;
    font-size: 16px;
}

.filters-section {
    background: white;
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.filters-row {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.filter-group {
    flex: 1;
    min-width: 200px;
}

.filter-group label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    margin-bottom: 8px;
}

.filter-select, .search-input {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 14px;
    outline: none;
    transition: all 0.2s ease;
}

.filter-select {
    max-width: 1200px;
}

.search-input {
    max-width: 1000px;
}

.filter-select:focus, .search-input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.table-container {
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.table-scroll {
    max-height: 600px;
    overflow-y: auto;
}

.benchmark-table {
    width: 100%;
}

.benchmark-table thead {
    background: #f9fafb;
    border-bottom: 2px solid #e5e7eb;
    position: sticky;
    top: 0;
    z-index: 10;
}

.benchmark-table th {
    padding: 16px;
    text-align: left;
    font-weight: 600;
    color: #374151;
    font-size: 14px;
}

.benchmark-table td {
    padding: 16px;
    border-bottom: 1px solid #e5e7eb;
    color: #1f2937;
    font-size: 14px;
}

.benchmark-table tbody tr {
    transition: background 0.2s ease;
}

.benchmark-table tbody tr:hover {
    background: #f9fafb;
}

.geo-select {
    padding: 6px 10px;
    border: 2px solid #e5e7eb;
    border-radius: 6px;
    font-size: 13px;
    outline: none;
    cursor: pointer;
    background: white;
}

.geo-select:focus {
    border-color: #3b82f6;
}

.current-benchmark {
    color: #F97316;
    font-weight: 500;
    font-size: 13px;
}

.no-benchmark {
    color: #9ca3af;
    font-style: italic;
    font-size: 13px;
}

.assign-btn {
    padding: 8px 16px;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.assign-btn:hover {
    background: #2563eb;
}

.results-info {
    padding: 12px 20px;
    background: #f9fafb;
    border-top: 1px solid #e5e7eb;
    color: #6b7280;
    font-size: 14px;
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-overlay.hidden {
    display: none;
}

.benchmark-modal-content {
    background: white;
    border-radius: 16px;
    padding: 24px;
    max-width: 700px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 2px solid #e5e7eb;
}

.modal-header h2 {
    font-size: 20px;
    font-weight: 600;
    color: #1a202c;
    margin: 0;
}

.close-btn {
    background: none;
    border: none;
    font-size: 28px;
    color: #9ca3af;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    width: 32px;
    height: 32px;
}

.close-btn:hover {
    color: #374151;
}

.suggestions-section h3 {
    font-size: 16px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 16px;
}

.suggestion-card {
    background: #f9fafb;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.2s ease;
}

.suggestion-card:hover {
    border-color: #3b82f6;
    background: #eff6ff;
}

.suggestion-info {
    flex: 1;
}

.suggestion-info .song-name {
    font-weight: 600;
    color: #1f2937;
    font-size: 15px;
    margin-bottom: 4px;
}

.suggestion-info .artist-name {
    color: #6b7280;
    font-size: 14px;
}

.select-btn {
    padding: 8px 20px;
    background: #F97316;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.select-btn:hover {
    background: #EA580C;
}

.loading-message {
    text-align: center;
    padding: 20px;
    color: #6b7280;
}

.spinner {
    border: 3px solid #f3f4f6;
    border-top: 3px solid #3b82f6;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 0 auto 12px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.success-message {
    background: #d1fae5;
    border: 1px solid #10b981;
    color: #065f46;
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    display: none;
}

.success-message {
    background: #ffedd5;
    border: 1px solid #F97316;
    color: #9a3412;
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    display: none;
}
</style>

<div class="benchmark-page">
    <div class="page-header">
        <h1>Benchmark Chooser</h1>
        <p>Choose your own benchmark for each song in First 35. Once you choose it, give it a second, and your choice will be stored!</p>
    </div>

    <div id="successMessage" class="success-message"></div>

    <div class="filters-section">
        <div class="filters-row">
            <div class="filter-group">
                <label>Label</label>
                <select id="labelFilter" class="filter-select">
                    <option value="">All Labels</option>
                </select>
            </div>

            <div class="filter-group">
                <label>Artist</label>
                <select id="artistFilter" class="filter-select">
                    <option value="">All Artists</option>
                </select>
            </div>
        </div>

        <div class="filter-group">
            <input 
                type="text" 
                id="searchInput" 
                class="search-input" 
                placeholder="Search by song, artist, ISRC!"
            />
        </div>
    </div>

    <div class="table-container">
        <div class="table-scroll">
            <table class="benchmark-table">
                <thead>
                    <tr>
                        <th>Song</th>
                        <th>Artist</th>
                        <th>Label</th>
                        <th>Geo</th>
                        <th>Current Benchmark</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody id="tableBody">
                    <!-- Will be populated by JavaScript -->
                </tbody>
            </table>
        </div>
        <div class="results-info" id="resultsInfo">
            Showing 0 of 0 tracks
        </div>
    </div>
</div>

<div id="benchmarkModal" class="modal-overlay hidden">
    <div class="benchmark-modal-content">
        <div class="modal-header">
            <h2>Choose Benchmark for: <span id="targetSongName"></span> (<span id="targetGeo"></span>)</h2>
            <button class="close-btn" onclick="closeBenchmarkModal()">×</button>
        </div>

        <div id="loadingSection" class="loading-message">
            <div class="spinner"></div>
            <span>Loading...</span>
        </div>

        <div id="suggestionsSection" class="suggestions-section" style="display: none;">
            
            <div style="margin-bottom: 24px;">
                <h3>Option 1: Choose a benchmark from this artist's previous releases</h3>
                <div class="filter-group">
                    <label>Choose a track from the same artist:</label>
                    <select id="trackDropdown" class="filter-select" style="margin-bottom: 12px;">
                        <option value="">-- Select a track --</option>
                    </select>
                    <button class="assign-btn" onclick="assignFromDropdown()" style="width: 100%;">
                        Assign Selected Track
                    </button>
                </div>
            </div>

            <div style="text-align: center; margin: 24px 0; color: #9ca3af; font-weight: 500;">OR</div>

            <div>
                <h3>Option 2: Enter Your own ISRC!</h3>
                <div class="filter-group">
                    <label>Enter ISRC code:</label>
                    <input 
                        type="text" 
                        id="manualIsrc" 
                        class="search-input" 
                        placeholder="e.g. USRC12345678"
                        style="margin-bottom: 12px;"
                    />
                    <button class="assign-btn" onclick="assignFromManualIsrc()" style="width: 100%; background: #F97316;">
                        Assign Manual ISRC
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
let allTracks = {{ tracks|tojson|safe }};
let filteredTracks = [...allTracks];
let currentTargetIsrc = null;
let currentTargetGeo = null;

function init() {
    populateFilters();
    applyFilters();
    
    document.getElementById('labelFilter').addEventListener('change', applyFilters);
    document.getElementById('artistFilter').addEventListener('change', applyFilters);
    document.getElementById('searchInput').addEventListener('input', applyFilters);
}

function populateFilters() {
    const labelFilter = document.getElementById('labelFilter');
    const artistFilter = document.getElementById('artistFilter');
    
    const uniqueLabels = [...new Set(allTracks.map(t => t.fin_label_parent_name))].sort();
    const uniqueArtists = [...new Set(allTracks.map(t => t.artist_name))].sort();
    
    uniqueLabels.forEach(label => {
        const option = document.createElement('option');
        option.value = label;
        option.textContent = label;
        labelFilter.appendChild(option);
    });
    
    uniqueArtists.forEach(artist => {
        const option = document.createElement('option');
        option.value = artist;
        option.textContent = artist;
        artistFilter.appendChild(option);
    });
}

function applyFilters() {
    const labelFilter = document.getElementById('labelFilter').value;
    const artistFilter = document.getElementById('artistFilter').value;
    const searchQuery = document.getElementById('searchInput').value.toLowerCase();
    
    filteredTracks = allTracks.filter(track => {
        const labelMatch = !labelFilter || track.fin_label_parent_name === labelFilter;
        const artistMatch = !artistFilter || track.artist_name === artistFilter;
        const searchMatch = !searchQuery || 
            (track.product_name && track.product_name.toLowerCase().includes(searchQuery)) ||
            (track.artist_name && track.artist_name.toLowerCase().includes(searchQuery)) ||
            (track.isrc_cd && track.isrc_cd.toLowerCase().includes(searchQuery));
        
        return labelMatch && artistMatch && searchMatch;
    });
    
    renderTable();
}

function renderTable() {
    const tbody = document.getElementById('tableBody');
    tbody.innerHTML = '';
    
    filteredTracks.forEach(track => {
        const row = document.createElement('tr');
        
        const usBenchmark = track.benchmark_name_us ? 
            `${track.benchmark_artist_us} - ${track.benchmark_name_us}` : null;
        const gbBenchmark = track.benchmark_name_gb ? 
            `${track.benchmark_artist_gb} - ${track.benchmark_name_gb}` : null;
        
        // Add null checks here
        const safeSongName = (track.product_name || '').replace(/'/g, "\\'");
        const safeArtistName = (track.artist_name || '').replace(/'/g, "\\'");
        
        row.innerHTML = `
            <td>${track.product_name || 'Unknown'}</td>
            <td>${track.artist_name || 'Unknown'}</td>
            <td>${track.fin_label_parent_name || 'Unknown'}</td>
            <td>
                <select class="geo-select" id="geo-${track.isrc_cd}" onchange="updateBenchmarkDisplay('${track.isrc_cd}')">
                    <option value="US">US</option>
                    <option value="GB">GB</option>
                    <option value="SE" {% if geo_country == 'SE' %}selected{% endif %}>Sweden</option>
                    <option value="MX" {% if geo_country == 'MX' %}selected{% endif %}>Mexico</option>
                </select>
            </td>
            <td>
                <span id="benchmark-display-${track.isrc_cd}">
                    ${usBenchmark ? 
                        `<span class="current-benchmark">${usBenchmark}</span>` :
                        `<span class="no-benchmark">None assigned</span>`
                    }
                </span>
            </td>
            <td>
                <button class="assign-btn" onclick="openBenchmarkModal('${track.isrc_cd}', '${safeSongName}', '${safeArtistName}')">
                    Assign
                </button>
            </td>
        `;
        tbody.appendChild(row);
        
        const selectEl = document.getElementById(`geo-${track.isrc_cd}`);
        selectEl.dataset.usBenchmark = usBenchmark || '';
        selectEl.dataset.gbBenchmark = gbBenchmark || '';
    });
    
    document.getElementById('resultsInfo').textContent = 
        `Showing ${filteredTracks.length} of ${allTracks.length} tracks`;
}

function updateBenchmarkDisplay(isrc) {
    const selectEl = document.getElementById(`geo-${isrc}`);
    const displayEl = document.getElementById(`benchmark-display-${isrc}`);
    const selectedGeo = selectEl.value;
    
    const benchmark = selectedGeo === 'US' ? 
        selectEl.dataset.usBenchmark : 
        selectEl.dataset.gbBenchmark;
    
    if (benchmark) {
        displayEl.innerHTML = `<span class="current-benchmark">${benchmark}</span>`;
    } else {
        displayEl.innerHTML = `<span class="no-benchmark">None assigned</span>`;
    }
}

function openBenchmarkModal(isrc, songName, artistName) {
    const selectEl = document.getElementById(`geo-${isrc}`);
    const selectedGeo = selectEl.value;
    
    currentTargetIsrc = isrc;
    currentTargetGeo = selectedGeo;
    
    document.getElementById('targetSongName').textContent = `${artistName} - ${songName}`;
    document.getElementById('targetGeo').textContent = selectedGeo;
    document.getElementById('benchmarkModal').classList.remove('hidden');
    
    document.getElementById('loadingSection').style.display = 'block';
    document.getElementById('suggestionsSection').style.display = 'none';
    
    document.getElementById('trackDropdown').innerHTML = '<option value="">-- Select a track --</option>';
    document.getElementById('manualIsrc').value = '';
    
    fetch('/first_35/get_suggestions', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ 
            target_isrc: isrc,
            geo_country: selectedGeo
        })
    })
    .then(response => response.json())
    .then(data => {
        populateDropdown(data.suggestions);
        document.getElementById('loadingSection').style.display = 'none';
        document.getElementById('suggestionsSection').style.display = 'block';
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Error loading suggestions');
        document.getElementById('loadingSection').style.display = 'none';
    });
}

function populateDropdown(suggestions) {
    const dropdown = document.getElementById('trackDropdown');
    dropdown.innerHTML = '<option value="">-- Select a track --</option>';
    
    if (suggestions.length === 0) {
        dropdown.innerHTML = '<option value="">No tracks available</option>';
        return;
    }
    
    suggestions.forEach(suggestion => {
        const option = document.createElement('option');
        option.value = suggestion.pfn;
        option.textContent = `${suggestion.product_name} - ${suggestion.artist_name}`;
        dropdown.appendChild(option);
    });
}

function assignFromDropdown() {
    const dropdown = document.getElementById('trackDropdown');
    const selectedPfn = dropdown.value;
    
    if (!selectedPfn) {
        alert('Please select a track from the dropdown');
        return;
    }
    
    assignBenchmark(selectedPfn, 'pfn');
}

function assignFromManualIsrc() {
    const manualIsrc = document.getElementById('manualIsrc').value.trim();
    
    if (!manualIsrc) {
        alert('Type in your own ISRC');
        return;
    }
    
    assignBenchmark(manualIsrc, 'isrc');
}

function assignBenchmark(benchmarkIdentifier, identifierType) {
    if (!currentTargetIsrc || !currentTargetGeo) return;
    
    fetch('/first_35/assign_benchmark', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
            target_isrc: currentTargetIsrc,
            benchmark_identifier: benchmarkIdentifier,
            identifier_type: identifierType,
            geo_country: currentTargetGeo
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showSuccessMessage(`Benchmark assigned successfully for ${currentTargetGeo}!`);
            closeBenchmarkModal();
            setTimeout(() => {
                window.location.reload();
            }, 1000);
        } else {
            alert('Error assigning benchmark: ' + (data.error || 'Unknown error'));
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Error assigning benchmark');
    });
}

function closeBenchmarkModal() {
    document.getElementById('benchmarkModal').classList.add('hidden');
    currentTargetIsrc = null;
    currentTargetGeo = null;
}

function showSuccessMessage(message) {
    const msgEl = document.getElementById('successMessage');
    msgEl.textContent = message;
    msgEl.classList.add('show');
    setTimeout(() => {
        msgEl.classList.remove('show');
    }, 3000);
}

document.getElementById('benchmarkModal')?.addEventListener('click', (e) => {
    if (e.target.id === 'benchmarkModal') {
        closeBenchmarkModal();
    }
});

init();
</script>

{% endblock %}