{% extends "base.html" %} 
{% block content %}
<link rel="stylesheet" href="/static/day0_35/anomaly_detection_styles_v2.css" />

<style>
.pro-view-container {
    max-width: 1800px;
    margin: 0 auto;
    padding: 40px 20px;
}

.pro-header {
    text-align: center;
    margin-bottom: 40px;
    position: relative;
}

.pro-header::before {
    content: '';
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 4px;
    background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 50%, #ec4899 100%);
    border-radius: 2px;
}

.pro-header h1 {
    font-size: 48px;
    font-weight: 700;
    color: #1a202c;
    margin: 0 0 8px 0;
    letter-spacing: -0.5px;
}

.pro-gradient {
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 50%, #ec4899 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.pro-tagline {
    font-size: 16px;
    color: #6b7280;
    font-weight: 500;
    letter-spacing: 0.3px;
}

.filters-card {
    background: white;
    padding: 24px;
    border-radius: 20px;
    margin-bottom: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    border: 1px solid #f0f0f0;
}

.filters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.filter-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.filter-label {
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

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

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

.filter-select:hover, .search-input:hover {
    border-color: #e0e0e0;
    background: white;
}

.clear-btn {
    padding: 12px 24px;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    align-self: flex-end;
}

.clear-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.clear-btn.hidden {
    display: none;
}

.search-container {
    margin-top: 16px;
}

.search-input::placeholder {
    color: #9ca3af;
}

.table-card {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    border: 1px solid #f0f0f0;
    position: relative;
}

.table-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 50%, #ec4899 100%);
}

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

.pro-table {
    width: 100%;
    min-width: 1150px; 
    border-collapse: separate;
    border-spacing: 0;
}

.pro-table th {
    padding: 8px 10px;  
    text-align: left;
    font-size: 11px; 
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.3px; 
    background: #fafafa;
    cursor: pointer;
    white-space: nowrap;
    border-bottom: 2px solid #f0f0f0;
}

.pro-table td {
    padding: 10px 10px; 
    font-size: 13px;  
    color: #1f2937;
    background: white;
    border-bottom: 1px solid #f9f9f9;
}


.pro-table th:first-child {
    border-top-left-radius: 12px;
}

.pro-table th:last-child {
    border-top-right-radius: 12px;
}

.pro-table th:hover {
    background: #f5f5f5;
    color: #3b82f6;
}

.pro-table td {
    padding: 12px 12px;
    font-size: 14px;
    color: #1f2937;
    background: white;
    border-bottom: 1px solid #f9f9f9;
}

.pro-table tbody tr {
    transition: all 0.2s ease;
}

.pro-table tbody tr:hover {
    background: #fafafa;
    cursor: pointer;
}

.pro-table tbody tr:hover td {
    background: #fafafa;
}

.pro-table td:first-child {
    border-left: 3px solid transparent;
}

.pro-table tbody tr:hover td:first-child {
    border-left: 3px solid #3b82f6;
}

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

.song-id {
    font-size: 10px; 
    color: #9ca3af;
    font-family: 'Courier New', monospace;
}

.score-badge {
    display: inline-block;
    padding: 4px 10px;  
    border-radius: 20px;
    font-weight: 600;
    font-size: 12px;  
    min-width: 45px; 
    text-align: center;
}

.score-over {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    color: #1e3a8a;
}

.score-stable {
    background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
    color: #4b5563;
}

.score-under {
    background: linear-gradient(135deg, #fed7aa 0%, #fdba74 100%);
    color: #9a3412;
}

.score-null {
    background: #f5f5f5;
    color: #9ca3af;
    font-style: italic;
}

.legend-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    background: linear-gradient(to right, #fafafa 0%, white 50%, #fafafa 100%);
    border-top: 1px solid #f0f0f0;
    flex-wrap: wrap;
    gap: 16px;
}

.legend-items {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.legend-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #6b7280;
}

.legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

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

.sort-icon {
    margin-left: 4px;
    font-size: 10px;
    color: #d1d5db;
    transition: color 0.2s ease;
}

th.sorted-asc .sort-icon,
th.sorted-desc .sort-icon {
    color: #3b82f6;
}

th.sorted-asc .sort-icon::after {
    content: '↑';
}

th.sorted-desc .sort-icon::after {
    content: '↓';
}

th:not(.sorted-asc):not(.sorted-desc) .sort-icon::after {
    content: '↕';
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s ease;
    padding-left: 160px; 
}

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

.modal-overlay:not(.hidden) {
    opacity: 1;
}

.modal-content {
    background: white;
    border-radius: 20px;
    max-width: 1200px;
    width: 90%;
    max-height: 85vh;
    overflow-y: auto;
    transform: scale(0.9);
    transition: transform 0.3s ease;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 10000;
}

.loading-message {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 40px;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    z-index: 10001;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin: 0;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 32px;
    border-bottom: 1px solid #e5e7eb;
    position: sticky;
    top: 0;
    background: white;
    z-index: 10;
    border-radius: 20px 20px 0 0;
}

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

.close-btn {
    background: none;
    border: none;
    font-size: 32px;
    color: #9ca3af;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.modal-body {
    padding: 32px 40px;
}

.modal-album-art {
    flex-shrink: 0;
}

.modal-album-art img {
    width: 180px;
    height: 180px;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border: 1px solid #e5e7eb;
}

.song-info-container {
    display: flex;
    gap: 32px;
    margin-bottom: 32px;
    align-items: center;
}

.song-meta {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.meta-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.meta-item label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    color: #6b7280;
    letter-spacing: 0.5px;
}

.meta-item span {
    font-size: 15px;
    font-weight: 500;
    color: #1f2937;
}

.chart-section {
    width: 100%;
    margin-top: 32px;
}

.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

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

.chart-container {
    width: 100%;
    min-height: 400px;
}

.stream-type-toggle {
    display: flex;
    gap: 0;
    background: #f3f4f6;
    padding: 4px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
}

.stream-toggle-btn {
    padding: 8px 20px;
    background: transparent;
    color: #6b7280;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.stream-toggle-btn:hover {
    color: #374151;
}

.stream-toggle-btn.active {
    background: white;
    color: #3b82f6;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.modal-toggle {
    margin-right: 10px;
}

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

.tech-toggle:hover {
    background: #2563eb;
}

.loading-message {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 40px;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.loading-message.hidden {
    display: none;
}

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

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

.chart-description {
    color: #6b7280;
    font-size: 14px;
    margin-bottom: 16px;
}

.hidden {
    display: none !important;
}

.table-card::before {
    display: none;  
}

.pro-view-container {
    max-width: 1800px;
    margin: 0 auto;
    padding: 20px 20px; 
}

.pro-header {
    text-align: center;
    margin-bottom: 24px;  
    position: relative;
}

.pro-header h1 {
    font-size: 42px;  
    font-weight: 700;
    color: #1a202c;
    margin: 0 0 6px 0;  
    letter-spacing: -0.5px;
}

.pro-tagline {
    font-size: 14px; 
    color: #6b7280;
    font-weight: 500;
    letter-spacing: 0.3px;
}

.filters-card {
    background: white;
    padding: 20px; 
    border-radius: 20px;
    margin-bottom: 20px; 
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    border: 1px solid #f0f0f0;
}

.filters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px; 
    margin-bottom: 12px;  
}

.search-container {
    margin-top: 12px; 
}

.pro-table {
    width: 100%;
    min-width: 1100px;  
    border-collapse: separate;
    border-spacing: 0;
}

.pro-table th {
    padding: 8px 8px;  
    text-align: left;
    font-size: 10px;  
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    background: #fafafa;
    cursor: pointer;
    white-space: nowrap;
    border-bottom: 2px solid #f0f0f0;
}

.pro-table td {
    padding: 8px 8px; 
    font-size: 12px;  
    color: #1f2937;
    background: white;
    border-bottom: 1px solid #f9f9f9;
}

.song-name {
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 2px;  
    font-size: 12px; 
}

.song-id {
    font-size: 9px; 
    color: #9ca3af;
    font-family: 'Courier New', monospace;
}

.score-badge {
    display: inline-block;
    padding: 3px 8px; 
    border-radius: 16px; 
    font-weight: 600;
    font-size: 11px;  
    min-width: 42px;  
    text-align: center;
}

.table-wrapper {
    overflow-x: auto;
    max-height: 650px;  
    overflow-y: auto;
}

.legend-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;  
    background: linear-gradient(to right, #fafafa 0%, white 50%, #fafafa 100%);
    border-top: 1px solid #f0f0f0;
    flex-wrap: wrap;
    gap: 12px; 
}

.pro-table thead {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #fafafa;
}

.pro-table td:nth-child(5) {
    text-align: center;
}

.tiktok-option {
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    transition: background 0.15s;
    }

.tiktok-option:hover {
    background: #f3f4f6;
    }

#tiktokDropdownBtn.tiktok-active {
    background: #e0f2fe;
    color: #0369a1;
    border-color: #7dd3fc;
    }
.info-icon-container {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.info-icon {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #6a7383;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  transition: all 0.2s ease;
  border: 2px solid #6a7383;
}
.info-icon-container:hover .info-icon {
  background: #2563eb;
  border-color: #2563eb;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}
.info-tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: #1f2937;
  color: white;
  padding: 8px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.5;
  white-space: normal;
  width: 210px;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  pointer-events: none;
  margin-bottom: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.info-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #1f2937;
}
.info-tooltip p { margin: 0; font-weight: 400; }
.info-icon-container:hover .info-tooltip {
  opacity: 1;
  visibility: visible;
}

.pro-table th:nth-child(4),
.pro-table td:nth-child(4) {
    text-align: center;
}
</style>

<div class="pro-view-container">
  <div class="pro-header">
    <h1>First 35 <span class="pro-gradient">Pro</span></h1>
    <p class="pro-tagline">A version of our new release tool designed and built for analysts</p>
  </div>

  <div class="filters-card">
    <div class="filters-grid">
      <div class="filter-item" style="position: relative;">
        <label class="filter-label">Label</label>
        <div class="custom-multiselect" id="labelMultiselect" style="position: relative;">
            <button class="filter-select multiselect-trigger" id="labelDropdownBtn" type="button" 
                    style="display:flex; align-items:center; justify-content:space-between; cursor:pointer; text-align:left;">
                <span id="labelDropdownText">All Labels</span>
                <span class="ms-arrow">▾</span>
            </button>
            <div class="ms-options-panel hidden" id="labelOptionsPanel" style="position:absolute; top:calc(100% + 4px); left:0; background:white; border:1px solid #d1d5db; border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,0.12); z-index:500; min-width:220px; max-height:280px; overflow-y:auto; padding:6px 0;">
                <div style="padding: 6px 14px;">
                    <button id="clearLabelsBtn" type="button" style="font-size:12px; color:#6b7280; background:none; border:none; cursor:pointer; padding:0; text-decoration:underline;">
                        Clear selections
                    </button>
                </div>
                <label style="display:flex; align-items:center; gap:8px; padding:8px 14px; cursor:pointer; font-size:14px; font-weight:600; color:#1f2937;">
                    <input type="checkbox" value="__all_sme__" id="allSmeCheckbox" style="accent-color:#3b82f6; width:14px; height:14px;">
                    All SME (excl. Orchard/AWAL)
                </label>
                <hr style="margin: 4px 0; border: none; border-top: 1px solid #e5e7eb;">
                <div id="labelCheckboxList"></div>
            </div>
        </div>
    </div>

    <div class="filter-item">
        <label class="filter-label">Domestic</label>
        <button id="domesticBtn" class="filter-select" style="cursor:pointer; text-align:left;">
            Domestic
        </button>
    </div>

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

      <div class="filter-item">
        <label class="filter-label">Geo</label>
        <select id="geoFilter" class="filter-select">
            <option value="US" {% if geo_country == 'US' %}selected{% endif %}>United States</option>
            <option value="GB" {% if geo_country == 'GB' %}selected{% endif %}>United Kingdom</option>
            <option value="CA" {% if geo_country == 'CA' %}selected{% endif %}>Canada</option>
            <option value="DE" {% if geo_country == 'DE' %}selected{% endif %}>Germany</option>
            <option value="IT" {% if geo_country == 'IT' %}selected{% endif %}>Italy</option>
            <option value="SE" {% if geo_country == 'SE' %}selected{% endif %}>Sweden</option>
            <option value="MX" {% if geo_country == 'MX' %}selected{% endif %}>Mexico</option>
            <option value="PH" {% if geo_country == 'PH' %}selected{% endif %}>Philippines</option>
            <option value="NL" {% if geo_country == 'NL' %}selected{% endif %}>Netherlands</option>
        </select>
      </div>

      <button id="clearFilters" class="clear-btn hidden">Clear All</button>
      <button id="goBtn" class="clear-btn hidden" style="background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);">Go ↵</button>

    </div>

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

  <div class="table-card">
    <div class="table-wrapper">
      <table class="pro-table">
        <thead>
            <tr>
                <th data-sort="song">Song <span class="sort-icon"></span></th>
                <th data-sort="artist">Artist <span class="sort-icon"></span></th>
                <th data-sort="label">Label <span class="sort-icon"></span></th>
                <th data-sort="streams">Streams <span class="sort-icon"></span></th>
                <th data-sort="interesting">Interesting Score <span class="sort-icon"></span></th>
                <th data-sort="total_lf">Total LF <span class="sort-icon"></span></th>
                <th data-sort="total_lb">Total LB <span class="sort-icon"></span></th>
                <th data-sort="spotify_lf">Spotify LF <span class="sort-icon"></span></th>
                <th data-sort="spotify_lb">Spotify LB <span class="sort-icon"></span></th>
                <th data-sort="apple_lf">Apple LF <span class="sort-icon"></span></th>
                <th data-sort="apple_lb">Apple LB <span class="sort-icon"></span></th>
            </tr>
        </thead>
        <tbody id="proTableBody">
          <!-- Populated by JavaScript -->
        </tbody>
      </table>
    </div>

    <div class="legend-bar">
    <div class="legend-items">
        <div class="legend-badge">
            <div class="legend-dot" style="background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);"></div>
        <span>Over-performing (>= 20)</span>
        </div>
        <div class="legend-badge">
            <div class="legend-dot" style="background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);"></div>
        <span>Stable (-20 to 20)</span>
        </div>
        <div class="legend-badge">
            <div class="legend-dot" style="background: linear-gradient(135deg, #fed7aa 0%, #fdba74 100%);"></div>
        <span>Under-performing (<= -20)</span>
        </div>
        <div class="legend-badge">
        <div class="legend-dot" style="background: #f5f5f5;"></div>
        <span>No Data</span>
        </div>
    </div>
    <div class="results-count" id="resultsCount">
        Click any row for details
    </div>
    </div>
  </div>
    <div id="songModal" class="modal-overlay hidden">
    <div class="modal-content">
        <div class="modal-header">
        <h2 id="modalTitle">Song Analysis</h2>
        <div style="display: flex; gap: 10px; align-items: center">
            <div class="stream-type-toggle modal-toggle">
            <button id="modalTotalBtn"   class="stream-toggle-btn" data-type="total">Total (SP+AP)</button>
            <button
                id="modalSpotifyBtn"
                class="stream-toggle-btn active"
                data-type="spotify"
            >
                Spotify
            </button>
            <button
                id="modalAppleBtn"
                class="stream-toggle-btn"
                data-type="apple"
            >
                Apple
            </button>
            </div>
            <div class="stream-type-toggle modal-toggle">
            <button
                id="modalRegularBtn"
                class="stream-toggle-btn active"
                data-type="regular"
            >
                Total
            </button>
            <button id="modalLfBtn" class="stream-toggle-btn" data-type="lf">
                Lean Forward
            </button>
            <button id="modalLbBtn" class="stream-toggle-btn" data-type="lb">
                Lean Back
            </button>
            </div>
            <button class="close-btn" id="closeModal">×</button>
        </div>
        </div>

        <div class="modal-body">
        <div class="modal-album-art" id="modalAlbumArt" style="display: none">
            <img id="modalAlbumImage" src="" alt="Album Art" />
        </div>

        <div class="song-info-container">
            <div class="song-meta">
            <div class="meta-item">
                <label>Song</label>
                <span id="modalSong">-</span>
            </div>
            <div class="meta-item">
                <label>Artist</label>
                <span id="modalArtist">-</span>
            </div>
            <div class="meta-item">
                <label>Version</label>
                <span id="modalVersion">-</span>
            </div>
            <div class="meta-item">
                <label>Label</label>
                <span id="modalLabel">-</span>
            </div>
            <div class="meta-item">
                <label>Genre</label>
                <span id="modalGenre">-</span>
            </div>
            <div class="meta-item">
                <label>Interesting Score</label>
                <span id="modalAnomalyScore">-</span>
            </div>
            <div class="meta-item">
                <label>vs Expected</label>
                <span id="modalPerformanceRatio">-</span>
            </div>
            <div class="meta-item">
                <label>This Week Proj</label>
                <span id="modalNextWeekProj">-</span>
            </div>
            </div>
        </div>

        <div class="chart-section">
            <div class="chart-header">
            <div style="display: flex; gap: 8px; align-items: flex-end;">
            <h3>Performance</h3>
            <div class="info-icon-container" title="" style="margin-bottom: 3px;">
                <div class="info-icon">i</div>
                <div class="info-tooltip">
                <ul style="margin: 0; padding-left: 20px; list-style-type: disc;">
                    <p>Benchmark Composition:</p>
                    <li style="margin-left: 20px;"><span id="modalWeightLabel1">-</span>: <span id="modalWeightValue1">-</span></li>
                    <li style="margin-left: 20px;"><span id="modalWeightLabel2">-</span>: <span id="modalWeightValue2">-</span></li>
                    <li style="margin-left: 20px;"><span id="modalWeightLabel3">-</span>: <span id="modalWeightValue3">-</span></li>
                </ul>
                </div>
            </div>
            </div>
            <div style="display: flex; gap: 12px; align-items: center">
                <div id="benchmarkSelectorContainer" style="display: none">
                <select
                    id="benchmarkSelector"
                    class="filter-select"
                    style="
                    width: auto;
                    min-width: 200px;
                    padding: 8px 12px;
                    font-size: 14px;
                    "
                >
                    <option value="default">
                    Default (Marketplace + Artist + Genre)
                    </option>
                    <option value="custom" id="customBenchmarkOption"></option>
                </select>
                </div>
                <div style="position: relative;">
                    <button id="tiktokDropdownBtn" class="tech-toggle" 
                            style="background: white; color: #374151; border: 1px solid #e5e7eb; display: flex; align-items: center; gap: 6px;"
                            onclick="toggleTiktokDropdown()">
                        <span style="font-size: 15px;">♪</span> TikTok <span id="tiktokChevron">▾</span>
                    </button>
                    <div id="tiktokDropdown" style="display:none; position:absolute; right:0; top:calc(100% + 6px); 
                        background:white; border:1px solid #e5e7eb; border-radius:10px; 
                        box-shadow:0 4px 12px rgba(0,0,0,0.1); min-width:140px; z-index:50; overflow:hidden;">
                        <div class="tiktok-option" onclick="setTiktokOverlay('creations')">Creations</div>
                        <div class="tiktok-option" onclick="setTiktokOverlay('views')">Views</div>
                        <div class="tiktok-option" style="color:#ef4444;" onclick="setTiktokOverlay(null)">Remove</div>
                    </div>
                </div>
                <button id="toggleTechnical" class="tech-toggle">
                Show Technical
                </button>
            </div>
            </div>
            <div id="mainChart" class="chart-container"></div>
        </div>

        <div id="technicalSection" class="chart-section hidden">
            <h3
            style="
                font-size: 20px;
                font-weight: 600;
                color: #1a202c;
                margin: 0;
                margin-bottom: 16px;
            "
            >
            Decay Rate
            </h3>
            <p class="chart-description">
            Rate of change in streams between days. Points outside the band
            indicate anomalies to possibly optimize!
            </p>
            <div id="technicalChart" class="chart-container"></div>
        </div>
        </div>
    </div>
    </div>

    <div id="loadingMessage" class="loading-message hidden">
    <div class="spinner"></div>
    <span>Loading...</span>
    </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/plotly.js/2.24.1/plotly.min.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    let allSongs = {{ song_list|tojson|safe }};
    let filteredSongs = [...allSongs];
    let searchQuery = '';
    let sortColumn = null;
    let sortDirection = 'asc';
    let currentGeoCountry = '{{ geo_country }}';
    let currentSongData = null;
    let currentSongId = null;
    let modalDataType = '';
    let modalSourcePlatform = 'spotify';
    let currentTiktokOverlay = null;
    let pendingGeo = currentGeoCountry;
    let pendingDomestic = {{ 'true' if domestic else 'false' }};
    const savedStr = {{ (saved_label_filter or '')|tojson }};
    let pendingLabels = savedStr ? savedStr.split('|||').map(l => l.trim()).filter(l => l) : [];

    function updateLabelDropdownUI() {
        const labelText = document.getElementById('labelDropdownText');
        if (pendingLabels.length === 0) {
            labelText.textContent = 'All Labels';
        } else if (pendingLabels.length === 1) {
            labelText.textContent = pendingLabels[0];
        } else {
            labelText.textContent = `${pendingLabels.length} labels`;
        }
    }

    function updateLabelTriggerState() {
        const trigger = document.getElementById('labelDropdownBtn');
        const labelText = document.getElementById('labelDropdownText');
        const isLocked = pendingDomestic && pendingGeo !== 'US';

        trigger.disabled = isLocked;
        trigger.style.opacity = isLocked ? '0.5' : '';
        trigger.style.cursor = isLocked ? 'not-allowed' : 'pointer';
        trigger.title = isLocked ? 'Label filter disabled while Domestic is active' : '';
        labelText.style.color = isLocked ? '#9ca3af' : '';

        if (isLocked) {
            // clear labels when domestic turns on
            document.getElementById('labelOptionsPanel')
                .querySelectorAll('input[type="checkbox"]')
                .forEach(cb => cb.checked = false);
            pendingLabels = [];
            updateLabelDropdownUI();
        }
    }

    function init() {
        initializeFilters();
        sortColumn = 'total_streams';
        sortDirection = 'desc';
        applyFilters();   // ← replaces applySorting() + renderTable(), handles both
        setupEventListeners();
        updateLabelTriggerState();

      (function syncDomesticBtn() {
            const btn = document.getElementById('domesticBtn');
            const isDomestic = {{ 'true' if domestic else 'false' }};
            btn.style.background = isDomestic ? '#3b82f6' : '';
            btn.style.color = isDomestic ? 'white' : '';
            btn.textContent = isDomestic ? 'Domestic ✓' : 'Domestic';
        })();
    }


    function toggleTiktokDropdown() {
        const dd = document.getElementById('tiktokDropdown');
        dd.style.display = dd.style.display === 'none' ? 'block' : 'none';
        }

    function setTiktokOverlay(type) {
        currentTiktokOverlay = type;
        document.getElementById('tiktokDropdown').style.display = 'none';
        
        const btn = document.getElementById('tiktokDropdownBtn');
        if (type) {
            btn.classList.add('tiktok-active');
            btn.innerHTML = `<span style="font-size:15px;">♪</span> TikTok: ${type.charAt(0).toUpperCase() + type.slice(1)} <span>▾</span>`;
        } else {
            btn.classList.remove('tiktok-active');
            btn.innerHTML = `<span style="font-size:15px;">♪</span> TikTok <span id="tiktokChevron">▾</span>`;
        }
        
        if (currentSongData) createMainChart(currentSongData);
        }

        window.toggleTiktokDropdown = toggleTiktokDropdown;
        window.setTiktokOverlay = setTiktokOverlay;

        document.addEventListener('click', function(e) {
        if (!e.target.closest('#tiktokDropdownBtn') && !e.target.closest('#tiktokDropdown')) {
            const dd = document.getElementById('tiktokDropdown');
            if (dd) dd.style.display = 'none';
        }
    });

    function initializeFilters() {
        const list = document.getElementById('labelCheckboxList');
        const uniqueLabels = {{ available_labels | tojson | safe }};

        uniqueLabels.forEach(label => {
            const el = document.createElement('label');
            el.style.cssText = 'display:flex; align-items:center; gap:8px; padding:8px 14px; cursor:pointer; font-size:14px; color:#374151;';
            el.innerHTML = `<input type="checkbox" value="${label}" style="accent-color:#3b82f6; width:14px; height:14px;"> ${label}`;
            list.appendChild(el);
        });

        // Restore saved labels
        document.querySelectorAll('#labelCheckboxList input[type="checkbox"]').forEach(cb => {
            if (pendingLabels.includes(cb.value)) cb.checked = true;
        });

        updateLabelDropdownUI();
        updateArtistFilter('');
    }

    function showGoBtn() {
        document.getElementById('goBtn').classList.remove('hidden');
    }

    function syncDomesticBtn() {
        const btn = document.getElementById('domesticBtn');
        btn.style.background = pendingDomestic ? '#3b82f6' : '';
        btn.style.color = pendingDomestic ? 'white' : '';
        btn.textContent = pendingDomestic ? 'Domestic ✓' : 'Domestic';
    }

    function updateArtistFilter(selectedLabel) {
      const artistFilter = document.getElementById('artistFilter');
      artistFilter.innerHTML = '<option value="">All Artists</option>';

      let songsToConsider = selectedLabel
        ? allSongs.filter(song => song.label_filter_name === selectedLabel)
        : allSongs;

      const uniqueArtists = [...new Set(songsToConsider.map(song => song.artist_name))].sort();

      uniqueArtists.forEach(artist => {
        const option = document.createElement('option');
        option.value = artist;
        option.textContent = artist;
        artistFilter.appendChild(option);
      });
    }

    function getScoreBadge(score) {
      if (score === null || score === undefined) {
        return '<span class="score-badge score-null">NULL</span>';
      }

      const scoreValue = parseFloat(score);
      let className = 'score-stable';
      
      if (scoreValue >= 20) {
        className = 'score-over';
      } else if (scoreValue <= -20) {
        className = 'score-under';
      }

      return `<span class="score-badge ${className}">${scoreValue.toFixed(0)}</span>`;
    }

    function matchesSearch(song, query) {
      if (!query) return true;
      const searchLower = query.toLowerCase();
      return (
        song.product_name.toLowerCase().includes(searchLower) ||
        song.artist_name.toLowerCase().includes(searchLower) ||
        song.song_id.toLowerCase().includes(searchLower)
      );
    }

    function applyFilters() {
        const artistFilter = document.getElementById('artistFilter').value;

        if (pendingLabels.length === 0) {
            filteredSongs = allSongs.filter(song => {
                const artistMatch = !artistFilter || song.artist_name === artistFilter;
                return artistMatch && matchesSearch(song, searchQuery);
            });
        } else {
            filteredSongs = allSongs.filter(song => {
                const labelMatch = pendingLabels.includes(song.label_filter_name);
                const artistMatch = !artistFilter || song.artist_name === artistFilter;
                return labelMatch && artistMatch && matchesSearch(song, searchQuery);
            });
        }

        const hasFilters = pendingLabels.length > 0 || artistFilter;
        document.getElementById('clearFilters').classList.toggle('hidden', !hasFilters);

        applySorting();
        renderTable();
    }

    function clearFilters() {
    document.getElementById('labelOptionsPanel').querySelectorAll('input[type="checkbox"]').forEach(cb => cb.checked = false);
    pendingLabels = [];
    updateLabelDropdownUI();
    document.getElementById('artistFilter').value = '';
    document.getElementById('clearFilters').classList.add('hidden');
    updateArtistFilter('');
    applyFilters();
    }

    function applySorting() {
      if (!sortColumn) return;

      filteredSongs.sort((a, b) => {
        let aVal = a[sortColumn];
        let bVal = b[sortColumn];

        if (aVal === null && bVal === null) return 0;
        if (aVal === null) return 1;
        if (bVal === null) return -1;

        if (sortColumn === 'song_id' || sortColumn === 'product_name' || 
            sortColumn === 'artist_name' || sortColumn === 'label_parent_name') {
          aVal = String(aVal).toLowerCase();
          bVal = String(bVal).toLowerCase();
        } else {
          aVal = parseFloat(aVal);
          bVal = parseFloat(bVal);
        }

        if (sortDirection === 'asc') {
          return aVal > bVal ? 1 : -1;
        } else {
          return aVal < bVal ? 1 : -1;
        }
      });
    }

    function getInterestingScoreBadge(score) {
        if (score === null || score === undefined) {
            return '<span style="color: #9ca3af; font-style: italic;">NULL</span>';
        }

        const scoreValue = parseInt(score);
        let textColor = '#4b5563'; // stable gray
        
        if (scoreValue >= 20) {
            textColor = '#1e3a8a'; // over blue
        } else if (scoreValue <= -20) {
            textColor = '#9a3412'; // under orange
        }

        return `<span style="color: ${textColor}; font-weight: 700; font-size: 13px;">${scoreValue}</span>`;
    }

    function renderTable() {
      const tableBody = document.getElementById('proTableBody');
      tableBody.innerHTML = '';

      filteredSongs.forEach(song => {
        const row = document.createElement('tr');
        row.onclick = () => openSongModal(song.song_id);

        row.innerHTML = `
            <td>
                <div class="song-name">${truncateText(song.product_name, 35)}</div>
                <div class="song-id">#${song.song_id}</div>
            </td>
            <td>${truncateText(song.artist_name, 30)}</td>
            <td>${truncateText(song.label_parent_name, 30)}</td>
            <td><strong>${song.total_streams_display || '0'}</strong></td>
            <td style="text-align: center;">${song.interesting_score !== null && song.interesting_score !== undefined ? 
                getInterestingScoreBadge(song.interesting_score) : 
                '<span style="color: #9ca3af; font-style: italic;">NULL</span>'}</td>
            <td>${getScoreBadge(song.total_lf)}</td>
            <td>${getScoreBadge(song.total_lb)}</td>
            <td>${getScoreBadge(song.spotify_lf)}</td>
            <td>${getScoreBadge(song.spotify_lb)}</td>
            <td>${getScoreBadge(song.apple_lf)}</td>
            <td>${getScoreBadge(song.apple_lb)}</td>
            `;

        tableBody.appendChild(row);
      });

      document.getElementById('resultsCount').textContent = 
        `Showing ${filteredSongs.length} of ${allSongs.length} tracks`;
    }

    function openSongModal(songId) {
      currentSongId = songId;
      modalDataType = '';
      modalSourcePlatform = 'total';

      const modal = document.getElementById('songModal');
      const loadingMessage = document.getElementById('loadingMessage');
      const modalBody = document.querySelector('.modal-body');

      const modalRegBtn = document.getElementById('modalRegularBtn');
      const modalLfBtn = document.getElementById('modalLfBtn');
      const modalLbBtn = document.getElementById('modalLbBtn');

      modalRegBtn.classList.add('active');
      modalLfBtn.classList.remove('active');
      modalLbBtn.classList.remove('active');

      const modalSpotifyBtn = document.getElementById('modalSpotifyBtn');
      const modalAppleBtn = document.getElementById('modalAppleBtn');

      modalSpotifyBtn.classList.remove('active'); 
      modalAppleBtn.classList.remove('active');
      document.getElementById('modalTotalBtn').classList.add('active');


      modalBody.style.opacity = '0';

      modal.classList.remove('hidden');
      loadingMessage.classList.remove('hidden');

      setTimeout(() => {
        modal.style.opacity = '1';
        modal.querySelector('.modal-content').style.transform = 'scale(1)';
      }, 50);

      document.getElementById('technicalSection').classList.add('hidden');
      document.getElementById('toggleTechnical').textContent = 'Show Technical';

      loadModalData(songId, modalDataType, 'total');
    }

    function loadModalData(songId, dataType, sourcePlatform) {
      const loadingMessage = document.getElementById('loadingMessage');
      const modalBody = document.querySelector('.modal-body');

      modalBody.style.opacity = '0';
      loadingMessage.classList.remove('hidden');

      fetch('/first_35', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ 
          song_id: songId, 
          data_type: dataType, 
          geo_country: currentGeoCountry, 
          source_platform: sourcePlatform 
        })
      })
      .then(response => response.json())
      .then(data => {
        if (data.error) {
          alert(data.error);
          return;
        }

        currentSongData = data;

        const albumArtContainer = document.getElementById('modalAlbumArt');
        const albumArtImage = document.getElementById('modalAlbumImage');

        if (data.artwork_url && data.artwork_url !== null && data.artwork_url !== '') {
          albumArtImage.src = data.artwork_url;
          albumArtContainer.style.display = 'block';

          const container = document.querySelector('.song-info-container');
          if (container && !container.contains(albumArtContainer)) {
            container.insertBefore(albumArtContainer, container.firstChild);
          }
        } else {
          albumArtContainer.style.display = 'none';
        }

        const cardSong = filteredSongs.find(s => String(s.song_id) === String(songId));
        const cardRatio = cardSong ? cardSong.performance_ratio : null;

        document.getElementById('modalTitle').textContent = `${data.artist_name} - ${data.product_name}`;
        document.getElementById('modalSong').textContent = data.product_name || 'Unknown';
        document.getElementById('modalArtist').textContent = data.artist_name || 'Unknown';
        document.getElementById('modalVersion').textContent = data.suppl_title || '-';
        document.getElementById('modalLabel').textContent = data.label_parent_name || 'Unknown';
        document.getElementById('modalGenre').textContent = data.genre_name || 'Unknown';
        document.getElementById('modalNextWeekProj').textContent = data.next_week_proj || '-';        
        document.getElementById('modalAnomalyScore').textContent = `${(data.optimization_score || 0).toFixed(0)}`;
        document.getElementById('modalPerformanceRatio').textContent = `${data.performance_ratio !== null ? data.performance_ratio : 1.0}x`;

        const weights = [
            { label: 'Artist Weight', value: data.weight_artist || 'None' },
            { label: 'Genre Weight',  value: data.weight_genre  || 'None' },
            { label: 'Market Weight', value: data.weight_market || 'None' }
        ];
        weights.sort((a, b) => (parseFloat(b.value) || 0) - (parseFloat(a.value) || 0));
        for (let i = 0; i < weights.length; i++) {
            const displayValue = weights[i].value === 'None'
                ? 'None'
                : `${(parseFloat(weights[i].value) * 100).toFixed(1)}%`;
            document.getElementById(`modalWeightLabel${i + 1}`).textContent = weights[i].label;
            document.getElementById(`modalWeightValue${i + 1}`).textContent = displayValue;
        }

        // const benchmarkSelector = document.getElementById('benchmarkSelector');
        // if (benchmarkSelector) {
        //   benchmarkSelector.value = 'default';
        // }

        createMainChart(data);

        if (!document.getElementById('technicalSection').classList.contains('hidden')) {
          createTechnicalChart(data);
        }

        loadingMessage.classList.add('hidden');

        setTimeout(() => {
          modalBody.style.opacity = '1';
        }, 100);
      })
      .catch(error => {
        console.error('Error:', error);
        alert('Error loading song data');
        loadingMessage.classList.add('hidden');
        modalBody.style.opacity = '1';
      });
    }

    function closeSongModal() {
      const modal = document.getElementById('songModal');
      const modalBody = document.querySelector('.modal-body');

      modal.style.opacity = '0';
      modal.querySelector('.modal-content').style.transform = 'scale(0.9)';

      setTimeout(() => {
        modal.classList.add('hidden');
        document.getElementById('technicalSection').classList.add('hidden');
        modalBody.style.opacity = '0';
        currentSongId = null;
      }, 300);
    }

    function truncateText(text, maxLength) {
      if (!text) return 'Unknown';
      return text.length > maxLength ? text.substring(0, maxLength) + '...' : text;
    }

    function createExpectedSegments(days, expected, anomalousPeriods, normalPeriods, allDays) {
        const segments = [];
        let currentSegment = { x: [], y: [] };
        let isHidden = false;

        days.forEach((day, index) => {
            const dayNum = allDays.indexOf(day) + 1;

            if (normalPeriods && normalPeriods.includes(dayNum)) {
                isHidden = false;
                currentSegment = { x: [], y: [] };
            }

            if (!isHidden) {
                currentSegment.x.push(day);
                currentSegment.y.push(expected[index]);
            }

            if (anomalousPeriods && anomalousPeriods.includes(dayNum)) {
                if (currentSegment.x.length > 0) {
                    segments.push({ ...currentSegment });
                    currentSegment = { x: [], y: [] };
                }
                isHidden = true;
            }
        });

        if (currentSegment.x.length > 0) {
            segments.push(currentSegment);
        }

        return segments;
    }

    // all this stuff is the same right now from the main version
    function createMainChart(data) {
            console.log('First Friday Date:', data.first_friday_date);
            console.log('TikTok debug:', {
                overlay: currentTiktokOverlay,
                dates: data.tiktok_dates,
                creations: data.tiktok_creations,
                views: data.tiktok_views
            });

            const benchmarkContainer = document.getElementById('benchmarkSelectorContainer');
            const benchmarkSelector = document.getElementById('benchmarkSelector');
            const customOption = document.getElementById('customBenchmarkOption');

            if (data.has_custom_benchmark) {
                benchmarkContainer.style.display = 'block';
                customOption.textContent = data.custom_benchmark_name;
                customOption.style.display = 'block';
            } else {
                benchmarkContainer.style.display = 'none';
            }

            const showCustomBenchmark = data.has_custom_benchmark && benchmarkSelector.value === 'custom';

            const clusterColor = data.predicted_cluster === 0 ? '#1E3A8A' : '#EA580C';
            const songColor = data.predicted_cluster === 0 ? '#1E3A8A' : '#C2410C';

            const dataLength = data.data_length;
            const limitedDays = data.limited_days;
            const limitedActual = data.actual_streams.slice(0, dataLength);
            const limitedExpected = data.expected_streams.slice(0, dataLength);

            const expectedSegments = createExpectedSegments(limitedDays, limitedExpected, data.anomalous_periods, data.normal_periods, data.days);

            const traces = [];

            if (showCustomBenchmark && data.benchmark_data) {
                traces.push({
                    x: data.benchmark_data.days,
                    y: data.benchmark_data.scaled_streams,
                    mode: 'lines',
                    name: 'Benchmark Expected',
                    line: {
                        color: 'green',
                        dash: 'dash',
                        width: 2
                    },
                    hovertemplate: '<b>Benchmark Expected</b><br>Date: %{x}<br>Streams: %{y:,.0f}<extra></extra>'
                });
            } else {
                // DEFAULT BASELINE: Show blue/orange dashed line
                traces.push({
                    x: data.days,
                    y: data.expected_streams,
                    mode: 'lines',
                    name: 'Expected (Baseline)',
                    line: {
                        color: clusterColor,  // Use clusterColor here
                        dash: 'dash',
                        width: 2
                    },
                    hovertemplate: '<b>Expected</b><br>Date: %{x}<br>Streams: %{y:,.0f}<extra></extra>'
                });
            }


            if (!showCustomBenchmark) {
                expectedSegments.forEach(segment => {
                    traces.push({
                        x: segment.x,
                        y: segment.y,
                        type: 'scatter',
                        mode: 'lines',
                        name: 'Expected',
                        line: { color: clusterColor, width: 3, dash: 'dash'},
                        hovertemplate: '%{x}<br>Expected: %{y:,.0f}<extra></extra>',
                        showlegend: false
                    });
                });
            }

            traces.push({
                x: limitedDays,
                y: limitedActual,
                type: 'scatter',
                mode: 'lines+markers',
                name: 'Actual',
                line: { color: songColor, width: 4 },
                marker: { size: 4, color: songColor },
                hovertemplate: '%{x}<br>Actual: %{y:,.0f}<extra></extra>'
            });

            if (data.first_friday_date) {
                const yMax = Math.max(...limitedActual, ...limitedExpected) * 1.1;

                traces.push({
                    x: [data.first_friday_date, data.first_friday_date],
                    y: [0, yMax * 0.97],
                    type: 'scatter',
                    mode: 'lines',
                    line: {
                        color: '#9333EA',
                        width: 2,
                        dash: 'dash'
                    },
                    name: 'First Friday',
                    showlegend: false,
                    hovertemplate: 'First Friday<extra></extra>'
                });

                traces.push({
                    x: [data.first_friday_date],
                    y: [yMax * 1.1],
                    type: 'scatter',
                    mode: 'text',
                    text: ['First<br>Friday<br>'],
                    textfont: { color: '#9333EA', size: 10, family: 'Arial' },
                    textposition: 'bottom center',
                    showlegend: false,
                    hoverinfo: 'skip'
                });
            }

            if (data.album_release_day && data.album_release_day > 0 && data.album_release_day <= dataLength) {
                const albumReleaseDate = data.days[data.album_release_day - 1];
                const yMax = Math.max(...limitedActual, ...limitedExpected) * 1.1;

                traces.push({
                    x: [albumReleaseDate, albumReleaseDate],
                    y: [0, yMax],
                    type: 'scatter',
                    mode: 'lines',
                    line: {
                        color: '#EC4899',
                        width: 2,
                        dash: 'dash'
                    },
                    name: 'Album Release',
                    showlegend: false,
                    hovertemplate: 'Album Release<extra></extra>'
                });

                traces.push({
                    x: [albumReleaseDate],
                    y: [yMax * 1.05],
                    type: 'scatter',
                    mode: 'text',
                    text: ['Album Release'],
                    textfont: { color: '#EC4899', size: 10, family: 'Arial' },
                    textposition: 'bottom center',
                    showlegend: false,
                    hoverinfo: 'skip'
                });
            }

            if (!showCustomBenchmark) {
                if (data.anomalous_periods && data.anomalous_periods.length > 0) {
                    data.anomalous_periods.forEach(dateStr => {  // Changed from dayNum
                        // Use dateStr directly, not as an index
                        const yMax = Math.max(...limitedActual, ...limitedExpected) * 1.1;

                        traces.push({
                            x: [dateStr, dateStr],
                            y: [0, yMax],
                            type: 'scatter',
                            mode: 'lines',
                            line: {
                                color: '#D946EF',
                                width: 2,
                                dash: 'dash'
                            },
                            name: 'Trending',
                            showlegend: false,
                            hovertemplate: 'Trending<extra></extra>'
                        });

                        const dayIndex = data.days.indexOf(dateStr);
                        if (dayIndex < limitedExpected.length) {
                            const expectedValue = limitedExpected[dayIndex];
                            traces.push({
                                x: [dateStr],
                                y: [expectedValue],
                                type: 'scatter',
                                mode: 'markers',
                                marker: {
                                    size: 6,
                                    color: clusterColor,
                                    line: { color: clusterColor, width: 1 }
                                },
                                showlegend: false,
                                hovertemplate: `Expected end: %{y:,.0f}<extra></extra>`
                            });
                        }

                        traces.push({
                            x: [dateStr],
                            y: [yMax * 1.05],
                            type: 'scatter',
                            mode: 'text',
                            text: ['Trending'],
                            textfont: { color: '#D946EF', size: 10, family: 'Arial' },
                            textposition: 'bottom center',
                            showlegend: false,
                            hoverinfo: 'skip'
                        });
                    });
                }

                    if (data.normal_periods && data.normal_periods.length > 0) {
                        data.normal_periods.forEach(dateStr => {
                            const yMax = Math.max(...limitedActual, ...limitedExpected) * 1.1;

                        traces.push({
                            x: [dateStr, dateStr],
                            y: [0, yMax],
                            type: 'scatter',
                            mode: 'lines',
                            line: {
                                color: '#78350F',
                                width: 2,
                                dash: 'dash'
                            },
                            name: 'Normal',
                            showlegend: false,
                            hovertemplate: 'Regular Behavior<extra></extra>'
                        });

                        const dayIndex = data.days.indexOf(dateStr);
                        if (dayIndex >= 0 && dayIndex < limitedExpected.length) {
                            const expectedValue = limitedExpected[dayIndex];
                            traces.push({
                                x: [dateStr],
                                y: [expectedValue],
                                type: 'scatter',
                                mode: 'markers',
                                marker: {
                                    size: 6,
                                    color: clusterColor,
                                    line: { color: clusterColor, width: 1 }
                                },
                                showlegend: false,
                                hovertemplate: `Expected resume: %{y:,.0f}<extra></extra>`
                            });
                        }

                        traces.push({
                            x: [dateStr],
                            y: [yMax * 1.05],
                            type: 'scatter',
                            mode: 'text',
                            text: ['Regular'],
                            textfont: { color: '#78350F', size: 10, family: 'Arial' },
                            textposition: 'bottom center',
                            showlegend: false,
                            hoverinfo: 'skip'
                        });
                    });
                }
            }

            if (!showCustomBenchmark) {
                if (data.better_days && data.better_days.length > 0) {
                    const betterDaysAsDate = data.better_days.map(dayNum => data.days[dayNum - 1]).filter(date => date);
                    traces.push({
                        x: data.better_days,
                        y: data.better_stream_values,
                        type: 'scatter',
                        mode: 'markers',
                        name: 'Better',
                        marker: {
                            color: '#38BDF8',
                            size: 8,
                            symbol: 'triangle-up',
                            line: {
                                color: '#38BDF8',
                                width: 2
                            }
                        },
                        hovertemplate: '%{x}<br>Better: %{y:,.0f}<extra></extra>'
                    });
                }

                if (data.worse_days && data.worse_days.length > 0) {
                    const worseDaysAsDate = data.worse_days.map(dayNum => data.days[dayNum - 1]).filter(date => date);
                    traces.push({
                        x: data.worse_days,
                        y: data.worse_stream_values,
                        type: 'scatter',
                        mode: 'markers',
                        name: 'Worse',
                        marker: {
                            color: '#F97316',
                            size: 8,
                            symbol: 'triangle-down',
                            line: {
                                color: '#F97316',
                                width: 2
                            }
                        },
                        hovertemplate: '%{x}<br>Worse: %{y:,.0f}<extra></extra>'
                    });
                }
            }

            if (dataLength < 35) {
                traces.push({
                    x: [data.limited_days[dataLength-1], data.limited_days[dataLength-1]],
                    y: [0, Math.max(...limitedActual, ...limitedExpected) * 1.1],
                    type: 'scatter',
                    mode: 'lines',
                    line: {
                        color: '#9CA3AF',
                        width: 2,
                        dash: 'dash'
                    },
                    name: 'Data End',
                    showlegend: false,
                    hovertemplate: 'Data ends<extra></extra>'
                });
            }

            const layout = {
                title: {
                    text: `${data.artist_name} - "${data.product_name}"<br><sub>ISRC: ${data.song_id}</sub>`,
                    font: { size: 16, family: 'Arial, sans-serif', color: '#1F2937' },
                    x: 0.5
                },
                xaxis: {
                    title: { text: 'Date', font: { size: 14, color: '#374151' } },
                    type: 'date',
                    range: (() => {
                        const endWithBuffer = new Date(new Date(data.limited_days[data.data_length - 1]).getTime() + 7 * 86400000).toISOString().split('T')[0];
                        if (data.data_length <= 35) {
                            return [
                                data.days[0],
                                new Date(new Date(data.days[0]).getTime() + 34 * 86400000).toISOString().split('T')[0]
                            ];
                        } else if (data.data_length <= 60) {
                            return [data.days[0], endWithBuffer];
                        } else {
                            return [data.limited_days[data.data_length - 35], endWithBuffer];
                        }
                    })(),
                    tickformat: '%m-%d',
                    dtick: 86400000,
                    showgrid: true,
                    gridcolor: '#F3F4F6',
                    gridwidth: 1,
                    zeroline: false,
                    tickfont: { size: 10, color: '#6B7280' },
                    tickangle: -45
                },
                yaxis: {
                    title: { text: 'Streams', font: { size: 14, color: '#374151' } },
                    rangemode: 'tozero',
                    showgrid: true,
                    gridcolor: '#F3F4F6',
                    gridwidth: 1,
                    tickformat: ',d',
                    tickfont: { size: 12, color: '#6B7280' }
                },
                hovermode: 'x unified',
                margin: { l: 80, r: 40, t: 100, b: 80 },
                autosize: true,
                showlegend: false,
                plot_bgcolor: 'white',
                paper_bgcolor: 'white'
            };

            if (currentTiktokOverlay && data.tiktok_dates && data.tiktok_dates.length > 0) {
                const tealDark  = '#0e7490';
                const tealLight = '#8B5CF6'; //actually purple will rename this later
                let tiktokDates = data.tiktok_dates;
                let tiktokCreations = data.tiktok_creations;
                let tiktokViews = data.tiktok_views;

                if (data.first_friday_date) {
                    const filtered = data.tiktok_dates.reduce((acc, date, i) => {
                    if (date >= data.first_friday_date) {
                        acc.dates.push(date);
                        acc.creations.push(data.tiktok_creations[i]);
                        acc.views.push(data.tiktok_views[i]);
                    }
                    return acc;
                }, { dates: [], creations: [], views: [] });

                tiktokDates     = filtered.dates;
                tiktokCreations = filtered.creations;
                tiktokViews     = filtered.views;
                }

                while (tiktokDates.length > 0 && tiktokCreations[tiktokCreations.length - 1] === 0) {
                    tiktokDates.pop();
                    tiktokCreations.pop();
                    tiktokViews.pop();
                }

                if (currentTiktokOverlay === 'creations') {
                traces.push({
                    x: tiktokDates,
                    y: tiktokCreations,
                    name: 'TikTok Creations',
                    type: 'scatter',
                    mode: 'lines+markers',
                    yaxis: 'y2',
                    line: { color: tealDark, width: 2 },
                    marker: { color: tealDark, size: 5 },
                    hovertemplate: '<b>TikTok Creations</b><br>%{x}<br>%{y:,.0f}<extra></extra>'
                });
                }
                
                if (currentTiktokOverlay === 'views' || currentTiktokOverlay === 'both') {
                traces.push({
                    x: tiktokDates,
                    y: tiktokViews,
                    name: 'TikTok Views',
                    type: 'scatter',
                    mode: 'lines+markers',
                    yaxis: 'y2',
                    line: { color: tealLight, width: 2 },
                    marker: { color: tealLight, size: 5 },
                    hovertemplate: '<b>TikTok Views</b><br>%{x}<br>%{y:,.0f}<extra></extra>'
                });
                }
                
                layout.yaxis2 = {
                title: currentTiktokOverlay === 'both' ? 'TikTok' : `TikTok ${currentTiktokOverlay.charAt(0).toUpperCase() + currentTiktokOverlay.slice(1)}`,
                overlaying: 'y',
                side: 'right',
                showgrid: false,
                tickformat: '.2s',
                titlefont: { color: tealDark },
                tickfont: { color: tealDark },
                rangemode: 'tozero'
                };
                layout.margin = { ...layout.margin, r: 70 }; 
            }

            Plotly.newPlot('mainChart', traces, layout, {
                responsive: true,
                displayModeBar: false,
                staticPlot: false
            });
        }

    function createTechnicalChart(data) {
            const showCustomBenchmark = data.has_custom_benchmark &&
                                        document.getElementById('benchmarkSelector').value === 'custom';

            const clusterColor = data.predicted_cluster === 0 ? '#1E3A8A' : '#EA580C';
            const songColor = data.predicted_cluster === 0 ? '#1E3A8A' : '#C2410C';

            const dataLength = data.data_length;
            const validDays = [];
            const validExpectedRates = [];
            const validActualRates = [];
            const validUpperBounds = [];
            const validLowerBounds = [];

            for (let i = 0; i < dataLength; i++) {
                if (data.actual_decay_rates[i] !== null) {
                    validDays.push(data.limited_days[i]);
                    validActualRates.push(data.actual_decay_rates[i]);
                    validExpectedRates.push(data.expected_decay_rates[i] !== null ? data.expected_decay_rates[i] : null);
                    validUpperBounds.push(data.upper_bounds[i] !== null ? data.upper_bounds[i] : null);
                    validLowerBounds.push(data.lower_bounds[i] !== null ? data.lower_bounds[i] : null);
                }
            }

            const traces = [];

            if (!showCustomBenchmark) {
                const trace1 = {
                    x: validDays.slice(0, Math.min(validUpperBounds.length, validLowerBounds.length)).concat(
                    validDays.slice(0, Math.min(validUpperBounds.length, validLowerBounds.length)).reverse()),
                    y: validUpperBounds.slice(0, Math.min(validUpperBounds.length, validLowerBounds.length)).concat(
                    validLowerBounds.slice(0, Math.min(validUpperBounds.length, validLowerBounds.length)).reverse()),
                    fill: 'toself',
                    fillcolor: `${clusterColor}20`,
                    line: { color: 'transparent' },
                    name: 'Band',
                    showlegend: false,
                    hoverinfo: 'skip'
                };
                traces.push(trace1);

                const trace2 = {
                    x: validDays.slice(0, validExpectedRates.length),
                    y: validExpectedRates,
                    type: 'scatter',
                    mode: 'lines',
                    name: 'Expected',
                    line: { color: '#9CA3AF', width: 3, dash: 'dash' },
                    hovertemplate: '%{x}<br>Expected: %{y:.3f}<extra></extra>'
                };
                traces.push(trace2);
            }

            const trace3 = {
                x: validDays.slice(0, validActualRates.length),
                y: validActualRates,
                type: 'scatter',
                mode: 'lines+markers',
                name: 'Actual',
                line: { color: songColor, width: 4 },
                marker: { size: 4, color: songColor },
                hovertemplate: '%{x}<br>Actual: %{y:.3f}<extra></extra>'
            };
            traces.push(trace3);

            if (showCustomBenchmark && data.benchmark_data && data.benchmark_data.decay_rates) {
                traces.push({
                    x: data.benchmark_data.days,
                    y: data.benchmark_data.decay_rates,
                    type: 'scatter',
                    mode: 'lines',
                    name: 'Benchmark Decay',
                    line: {
                        color: 'green',
                        dash: 'dash',
                        width: 3
                    },
                    hovertemplate: '%{x}<br>Benchmark: %{y:.3f}<extra></extra>'
                });
            }

            traces.push({
                x: [data.days[0]],
                y: [0],
                type: 'scatter',
                mode: 'markers',
                name: 'Day 1',
                marker: {
                    size: 6,
                    color: '#9CA3AF',
                    opacity: 0.7
                },
                showlegend: false,
                hovertemplate: '%{x}<br>No change possible<extra></extra>'
            });

            if (validActualRates.length > 0 && validDays.length > 0) {
                traces.push({
                    x: [data.days[0], validDays[0]],
                    y: [0, validActualRates[0]],
                    type: 'scatter',
                    mode: 'lines',
                    line: {
                        color: '#9CA3AF',
                        width: 2,
                        dash: 'dot'
                    },
                    showlegend: false,
                    hoverinfo: 'skip'
                });
            }

            if (!showCustomBenchmark) {
                if (data.better_days && data.better_days.length > 0) {
                    traces.push({
                        x: data.better_days,
                        y: data.better_decay_values,
                        type: 'scatter',
                        mode: 'markers',
                        name: 'Better',
                        marker: {
                            color: '#38BDF8',
                            size: 8,
                            symbol: 'triangle-up',
                            line: {
                                color: '#38BDF8',
                                width: 2
                            }
                        },
                        hovertemplate: '%{x}<br>Better: %{y:.3f}<extra></extra>'
                    });
                }

                if (data.worse_days && data.worse_days.length > 0) {
                    traces.push({
                        x: data.worse_days,
                        y: data.worse_decay_values,
                        type: 'scatter',
                        mode: 'markers',
                        name: 'Worse',
                        marker: {
                            color: '#F97316',
                            size: 8,
                            symbol: 'triangle-down',
                            line: {
                                color: '#F97316',
                                width: 2
                            }
                        },
                        hovertemplate: '%{x}<br>Worse: %{y:.3f}<extra></extra>'
                    });
                }
            }

            if (dataLength < 35) {
                const allYValues = [...validActualRates, ...validExpectedRates, 0];
                const yMin = Math.min(...allYValues);
                const yMax = Math.max(...allYValues);
                const yPadding = Math.max(0.1, (yMax - yMin) * 0.1);

                traces.push({
                    x: [data.limited_days[dataLength-1], data.limited_days[dataLength-1]],
                    y: [yMin - yPadding, yMax + yPadding],
                    type: 'scatter',
                    mode: 'lines',
                    line: {
                        color: '#9CA3AF',
                        width: 2,
                        dash: 'dash'
                    },
                    name: 'Data End',
                    showlegend: false,
                    hovertemplate: 'Data ends<extra></extra>'
                });
            }

            traces.push({
                x: [data.days[0], data.days[34]],
                y: [0, 0],
                type: 'scatter',
                mode: 'lines',
                line: {
                    color: '#9CA3AF',
                    width: 1,
                    dash: 'solid'
                },
                opacity: 0.5,
                showlegend: false,
                hoverinfo: 'skip'
            });

            if (data.first_friday_date) {
                const allYValues = [...validActualRates, ...validExpectedRates, 0];
                const yMin = Math.min(...allYValues);
                const yMax = Math.max(...allYValues);
                const yPadding = Math.max(0.1, (yMax - yMin) * 0.1);

                traces.push({
                    x: [data.first_friday_date, data.first_friday_date],
                    y: [yMin - yPadding, yMax + yPadding * 0.45],
                    type: 'scatter',
                    mode: 'lines',
                    line: {
                        color: '#9333EA',
                        width: 2,
                        dash: 'dash'
                    },
                    name: 'First Friday',
                    showlegend: false,
                    hovertemplate: 'First Friday<extra></extra>'
                });

                traces.push({
                    x: [data.first_friday_date],
                    y: [yMax + yPadding * 1.5],
                    type: 'scatter',
                    mode: 'text',
                    text: ['First<br>Friday<br>'],
                    textfont: { color: '#9333EA', size: 10, family: 'Arial' },
                    textposition: 'bottom center',
                    showlegend: false,
                    hoverinfo: 'skip'
                });
            }

            const layout = {
                title: {
                    text: `${data.artist_name} - "${data.product_name}" - Decay Rates<br><sub>Positive = Increasing, Negative = Decreasing, ISRC: ${data.song_id}</sub>`,
                    font: { size: 16, family: 'Arial, sans-serif', color: '#1F2937' },
                    x: 0.5
                },
                xaxis: {
                    title: { text: 'Date', font: { size: 14, color: '#374151' } },
                    type: 'date',
                    range: [
                        data.days[0],
                        new Date(new Date(data.days[0]).getTime() + 34 * 24 * 60 * 60 * 1000).toISOString().split('T')[0]
                    ],
                    tickformat: '%m-%d',
                    dtick: 86400000,
                    showgrid: true,
                    gridcolor: '#F3F4F6',
                    gridwidth: 1,
                    zeroline: false,
                    tickfont: { size: 10, color: '#6B7280' },
                    tickangle: -45
                },
                yaxis: {
                    title: { text: 'Decay Rate', font: { size: 14, color: '#374151' } },
                    showgrid: true,
                    gridcolor: '#F3F4F6',
                    gridwidth: 1,
                    zeroline: true,
                    zerolinecolor: '#9CA3AF',
                    zerolinewidth: 1,
                    tickfont: { size: 12, color: '#6B7280' }
                },
                hovermode: 'x unified',
                margin: { l: 80, r: 40, t: 80, b: 80 },
                autosize: true,
                showlegend: false,
                plot_bgcolor: 'white',
                paper_bgcolor: 'white'
            };

            Plotly.newPlot('technicalChart', traces, layout, {
                responsive: true,
                displayModeBar: false,
                staticPlot: false
            });

            setTimeout(() => {
                Plotly.Plots.resize('technicalChart');
            }, 100);
    }

    function setupEventListeners() {
      const searchInput = document.getElementById('searchInput');

      searchInput.addEventListener('input', function(e) {
        searchQuery = e.target.value.trim();
        applyFilters();
      });

      document.getElementById('artistFilter').addEventListener('change', applyFilters);
      document.getElementById('clearFilters').addEventListener('click', clearFilters);

      document.getElementById('geoFilter').addEventListener('change', function() {
            pendingGeo = this.value;
            showGoBtn();
        });

        document.getElementById('domesticBtn').addEventListener('click', function() {
            pendingDomestic = !pendingDomestic;
            syncDomesticBtn();
            updateLabelTriggerState();
            showGoBtn();
        });

        document.getElementById('goBtn').addEventListener('click', function() {
            const params = new URLSearchParams(window.location.search);
            params.set('geo_country', pendingGeo);
            if (pendingDomestic) {
                params.set('domestic', '1');
            } else {
                params.delete('domestic');
            }
            if (pendingLabels.length > 0) {
                params.set('label', pendingLabels.join('|||'));
            } else {
                params.delete('label');
            }
            window.location.href = `/first_35_pro?${params.toString()}`;
        });

      // Modal event listeners
      document.getElementById('closeModal').addEventListener('click', closeSongModal);
      
      document.getElementById('songModal').addEventListener('click', (e) => {
        if (e.target.id === 'songModal') {
          closeSongModal();
        }
      });

      document.getElementById('toggleTechnical').addEventListener('click', function() {
        const technicalSection = document.getElementById('technicalSection');
        const toggleBtn = this;

        if (technicalSection.classList.contains('hidden')) {
          technicalSection.classList.remove('hidden');
          toggleBtn.textContent = 'Hide Technical';

          if (currentSongData) {
            createTechnicalChart(currentSongData);
          }
        } else {
          technicalSection.classList.add('hidden');
          toggleBtn.textContent = 'Show Technical';
        }
      });

      // Modal stream type toggles
      const modalSpotify = document.getElementById('modalSpotifyBtn');
      const modalApple = document.getElementById('modalAppleBtn');
      const modalReg = document.getElementById('modalRegularBtn');
      const modalLf = document.getElementById('modalLfBtn');
      const modalLb = document.getElementById('modalLbBtn');
      const modalTotal = document.getElementById('modalTotalBtn');

      modalTotal.addEventListener('click', function() {
        if (modalSourcePlatform !== 'total' && currentSongId) {
            modalSourcePlatform = 'total';
            this.classList.add('active');
            modalSpotify.classList.remove('active');
            modalApple.classList.remove('active');
            loadModalData(currentSongId, modalDataType, 'total');
        }
        });

      modalSpotify.addEventListener('click', function() {
        if (modalSourcePlatform !== 'spotify' && currentSongId) {
          modalSourcePlatform = 'spotify';
          this.classList.add('active');
          modalApple.classList.remove('active');
          loadModalData(currentSongId, modalDataType, 'spotify');
          modalTotal.classList.remove('active');
        }
      });

      modalApple.addEventListener('click', function() {
        if (modalSourcePlatform !== 'apple' && currentSongId) {
          modalSourcePlatform = 'apple';
          this.classList.add('active');
          modalSpotify.classList.remove('active');
          loadModalData(currentSongId, modalDataType, 'apple');
          modalTotal.classList.remove('active');
        }
      });

      modalReg.addEventListener('click', function() {
        if (modalDataType !== '' && currentSongId) {
          modalDataType = '';
          this.classList.add('active');
          modalLf.classList.remove('active');
          modalLb.classList.remove('active');
          loadModalData(currentSongId, modalDataType, modalSourcePlatform);
        }
      });

      modalLf.addEventListener('click', function() {
        if (modalDataType !== 'lf' && currentSongId) {
          modalDataType = 'lf';
          this.classList.add('active');
          modalReg.classList.remove('active');
          modalLb.classList.remove('active');
          loadModalData(currentSongId, modalDataType, modalSourcePlatform);
        }
      });

      modalLb.addEventListener('click', function() {
        if (modalDataType !== 'lb' && currentSongId) {
          modalDataType = 'lb';
          this.classList.add('active');
          modalReg.classList.remove('active');
          modalLf.classList.remove('active');
          loadModalData(currentSongId, modalDataType, modalSourcePlatform);
        }
      });


        const labelBtn   = document.getElementById('labelDropdownBtn');
        const labelPanel = document.getElementById('labelOptionsPanel');

        document.getElementById('clearLabelsBtn').addEventListener('click', function(e) {
            e.stopPropagation();
            labelPanel.querySelectorAll('input[type="checkbox"]').forEach(cb => cb.checked = false);
            pendingLabels = [];
            updateLabelDropdownUI();
            applyFilters();
        });

        labelBtn.addEventListener('click', function(e) {
            e.stopPropagation();
            labelPanel.classList.toggle('hidden');
            labelBtn.querySelector('.ms-arrow').textContent = labelPanel.classList.contains('hidden') ? '▾' : '▴';
        });

        document.addEventListener('click', function(e) {
            if (!document.getElementById('labelMultiselect').contains(e.target)) {
                if (!labelPanel.classList.contains('hidden')) {
                    labelPanel.classList.add('hidden');
                    labelBtn.querySelector('.ms-arrow').textContent = '▾';
                }
            }
        });

        labelPanel.querySelectorAll('input[type="checkbox"]').forEach(cb => {
            cb.addEventListener('change', function() {
                if (this.value === '__all_sme__') {
                    const allCheckboxes = [...labelPanel.querySelectorAll('input[type="checkbox"]')]
                        .filter(c => c.value !== '__all_sme__');
                    allCheckboxes.forEach(c => {
                        const isExcluded = c.value.toLowerCase().includes('orchard') || 
                                        c.value.toLowerCase().includes('awal');
                        c.checked = this.checked ? !isExcluded : false;
                    });
                }
                pendingLabels = [...labelPanel.querySelectorAll('input:checked')]
                    .map(c => c.value)
                    .filter(v => v !== '__all_sme__');
                updateLabelDropdownUI();
                showGoBtn();
            });
        });

      document.querySelectorAll('.pro-table th[data-sort]').forEach(th => {
        th.addEventListener('click', function() {
          const column = this.getAttribute('data-sort');
          
          const columnMap = {
            'song': 'product_name',
            'artist': 'artist_name',
            'label': 'label_parent_name',
            'streams': 'total_streams',
            'interesting': 'interesting_score',
            'spotify_lf': 'spotify_lf',
            'spotify_lb': 'spotify_lb',
            'apple_lf': 'apple_lf',
            'apple_lb': 'apple_lb',
            'total_lf': 'total_lf',
            'total_lb': 'total_lb'
          };

          const dataColumn = columnMap[column];

          if (sortColumn === dataColumn) {
            sortDirection = sortDirection === 'asc' ? 'desc' : 'asc';
          } else {
            sortColumn = dataColumn;
            sortDirection = 'desc';
          }

          document.querySelectorAll('.pro-table th').forEach(h => {
            h.classList.remove('sorted-asc', 'sorted-desc');
          });
          this.classList.add(`sorted-${sortDirection}`);

          applySorting();
          renderTable();
        });
      });
    }

    init();
    document.getElementById('benchmarkSelector')?.addEventListener('change', function() {
    console.log('Benchmark changed to:', this.value);
    if (currentSongData) {
        createMainChart(currentSongData);
        if (!document.getElementById('technicalSection').classList.contains('hidden')) {
        createTechnicalChart(currentSongData);
        }
    }
    });
  });
</script>

{% endblock %}