{% extends "base.html" %} {% block content %}
<link rel="stylesheet" href="/static/css/anomaly_detection_styles_v2.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/plotly.js/2.24.1/plotly.min.js"></script>

<div class="anomaly-app">
    {% if error %}
    <div class="no-results-container">
        <div class="no-results-icon">🙅</div>
        <h2 class="no-results-title">No Results Found</h2>
        <p class="no-results-msg" style="font-size: 13px; color: #9ca3af;">Your filters may not have active tracks right now, try selecting other filters!</p>
        <div style="margin-top: 8px;">
        <button class="no-results-back-btn" 
                onclick="window.location.href='/first_35?label=&geo_country={{ geo_country }}'">
            Change Filters
        </button>
    </div>
    </div>
    {% else %}
  <div class="app-header">
    <div class="header-content">
      <h1>First 35</h1>
      <p>
        Evaluating the performance of new releases through their first 35 days
        of streaming
      </p>
      <br>
      <p style="font-size: 1rem; color: #888; margin-bottom: 0.5rem;">Data updated through: {{ data_through }}</p>
    </div>

    <div class="stats-grid">
      <div class="stat-card">
        <div class="stat-value">{{ total_songs }}</div>
        <div class="stat-label">Total Songs</div>
      </div>
      <div class="stat-card urgent">
        <div class="stat-value" id="underperformingCount">-</div>
        <div class="stat-label">Underperforming</div>
      </div>
      <div class="stat-card warning">
        <div class="stat-value" id="overperformingCount">-</div>
        <div class="stat-label">Overperforming</div>
      </div>
      <div class="stat-card stable">
        <div class="stat-value" id="stableCount">-</div>
        <div class="stat-label">Stable</div>
      </div>
    </div>
  </div>

  <div class="filters-section">
    <div class="filters-row">
      <div class="filter-group">
        <label>Performance</label>
        <select id="performanceFilter" class="filter-select">
          <option value="">All Performance</option>
          <option value="underperforming">Underperforming</option>
          <option value="overperforming">Overperforming</option>
          <option value="stable">Stable</option>
        </select>
      </div>

        <div class="filter-group" style="position: relative;">
            <label>Label</label>
            <div class="custom-multiselect" id="labelMultiselect">
                <button class="filter-select multiselect-trigger" id="labelDropdownBtn" type="button">
                    <span id="labelDropdownText">All Labels</span>
                    <span class="ms-arrow">▾</span>
                </button>
                <div class="ms-options-panel hidden" id="labelOptionsPanel">
                    <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 class="ms-option" id="allSmeOption">
                        <input type="checkbox" value="__all_sme__" id="allSmeCheckbox">
                        <span style="font-weight: 600; color: #1f2937;">All SME (excl. Orchard/AWAL)</span>
                    </label>
                    <hr style="margin: 4px 0; border: none; border-top: 1px solid #e5e7eb;">
                    {% for label in available_labels %}
                    <label class="ms-option">
                        <input type="checkbox" value="{{ label }}"
                            {% if label in selected_labels %}checked{% endif %}>
                        <span>{{ label }}</span>
                    </label>
                    {% endfor %}
                </div>
            </div>
        </div>

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

      <div class="filter-group">
        <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>

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

      <button id="clearFilters" class="clear-btn hidden">Clear All</button>
      <div class="filter-group">
        <label>&nbsp;</label>
        <button id="goBtn" class="go-btn hidden" title="Apply pending filter changes">Go ↵</button>
      </div>

    </div>

    <div class="results-info">
      <div class="controls-group">
        <button id="sortByScore" class="sort-btn active" data-sort="desc">
          Sort by Score
          <span class="sort-indicator"></span>
        </button>
        <button id="sortByDays" class="sort-btn" data-sort="none">
          Sort by Days
          <span class="sort-indicator"></span>
        </button>
        <button id="sortBySize" class="sort-btn" data-sort="none">
          Sort by Size
          <span class="sort-indicator"></span>
        </button>
        <div class="view-toggle">
          <button class="toggle-btn" data-view="cards">Cards</button>
          <button class="toggle-btn active" data-view="table">Table</button>
        </div>
        <div class="stream-type-toggle">
          <button
            id="regularBtn"
            class="stream-toggle-btn"
            data-type="regular"
          >
            Total
          </button>
          <button id="lfBtn" class="stream-toggle-btn active" data-type="lf">
            Lean Forward
          </button>
          <button id="lbBtn" class="stream-toggle-btn" data-type="lb">
            Lean Back
          </button>
        </div>
      </div>
    </div>

    <div class="search-row">
      <div class="search-container">
        <input
          type="text"
          id="searchInput"
          class="search-input"
          placeholder="Search by song, artist, ISRC!"
        />
        <button id="clearSearch" class="clear-search-btn hidden">×</button>
      </div>
    </div>

    <div id="cardsGrid" class="cards-grid hidden">
      <!-- Cards will be populated by JavaScript -->
    </div>

    <div id="tableView" class="table-view">
      <div class="table-container">
        <table class="songs-table">
          <thead>
            <tr>
              <th>Song</th>
              <th>Artist</th>
              <th>Label</th>
              <th>Performance</th>
              <th>Interesting Score</th>
              <th>Avg TW Streams</th>
              <th>Total Streams</th>
              <th>vs Expected</th>
              <th>Data Length</th>
            </tr>
          </thead>
          <tbody id="tableBody">
            <!-- Table rows will be populated by JavaScript -->
          </tbody>
        </table>
      </div>
    </div>

    <!-- Pagination -->
    <div id="pagination" class="pagination">
      <!-- Pagination buttons will be populated by JavaScript -->
    </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>

    <!-- Loading Message -->
    <div id="loadingMessage" class="loading-message hidden">
      <div class="spinner"></div>
      <span>Loading...</span>
    </div>
    {% endif %}
  </div>

  <style>
    .modal-album-art {
      display: none;
    }

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

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

    .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-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;
    }

    .stat-card.active-filter {
      opacity: 1;
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
      border: 2px solid #3b82f6;
    }

    .stat-card:not(.active-filter) {
      opacity: 0.5;
    }

    .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;
    }

    .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;
    }

    .page-info {
      padding: 10px 16px;
      color: #6b7280;
      font-weight: 500;
      font-size: 14px;
    }

    /* Search Container Styles */
    .filters-row {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 10px;
    }

    .search-row {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 16px;
      margin-top: 12px;
      margin-bottom: 16px;
    }

    #resultsCount {
      color: #6b7280;
      font-weight: 500;
      font-size: 14px;
      white-space: nowrap;
    }

    .search-container {
      position: relative;
      display: inline-flex;
      align-items: center;
      width: 500px;
    }

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

    .search-input::placeholder {
      text-align: center;
    }

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

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

    .clear-search-btn {
      position: absolute;
      right: 8px;
      background: #9ca3af;
      color: white;
      border: none;
      border-radius: 50%;
      width: 20px;
      height: 20px;
      font-size: 16px;
      line-height: 1;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease;
      padding: 0;
    }

    .clear-search-btn:hover {
      background: #6b7280;
    }

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

    .results-info {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
    }

    .stats-grid {
    display: none !important;
    }

    /* Adjust filter layout to fit on one line */
    .filters-row {
    display: flex;
    justify-content: center;
    align-items: flex-end;  /* ← labels above, inputs all bottom-aligned */
    gap: 8px;
    }

    .filter-group {
    flex-shrink: 1; /* Allow shrinking if needed */
    }

    .filter-select {
    padding: 8px 6px; /* Reduced horizontal padding */
    font-size: 14px;
    min-width: 120px; /* Ensure minimum width */
    max-width: 200px; /* Prevent artist names from making it too wide */
    }

    .filter-group > label {
        font-size: 12px;
        margin-bottom: 4px;
        text-align: center;
        display: block;
    }

    .clear-btn {
    padding: 8px 12px; /* Adjust clear button padding */
    font-size: 14px;
    white-space: nowrap;
    }

    /* Info Icon Styles */
    .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 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;
    }
    
    /* Custom multiselect */
    .custom-multiselect {
        position: relative;
    }

    .multiselect-trigger {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 6px;
        cursor: pointer;
        text-align: left;
        min-width: 150px;
        max-width: 200px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        background: white;
        border: 1px solid #d1d5db;
        border-radius: 8px;
        padding: 8px 10px;
        font-size: 14px;
        color: #374151;
    }

    .multiselect-trigger:hover {
        border-color: #3b82f6;
    }

    .ms-arrow {
        flex-shrink: 0;
        font-size: 12px;
        color: #6b7280;
        transition: transform 0.15s;
    }

    .ms-options-panel {
        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: 200px;
        max-height: 260px;
        overflow-y: auto;
        padding: 6px 0;
    }

    .ms-options-panel.hidden {
        display: none;
    }

    .ms-option {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 14px;
        cursor: pointer;
        font-size: 14px;
        color: #374151;
        transition: background 0.1s;
        text-align: left;  
    }

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

    .ms-option input[type="checkbox"] {
        accent-color: #3b82f6;
        width: 14px;
        height: 14px;
        flex-shrink: 0;
    }

    .ms-option span {
        text-align: left;
        width: 100%;
    }

    .go-btn {
        padding: 8px 18px;
        background: #3b82f6;
        color: white;
        border: none;
        border-radius: 10px;
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.2s ease;
        box-shadow: 0 2px 8px rgba(59,130,246,0.35);
        white-space: nowrap;
        animation: goAppear 0.2s ease;
    }

    .go-btn:hover {
        background: #2563eb;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(59,130,246,0.45);
    }

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

    @keyframes goAppear {
        from { opacity: 0; transform: scale(0.85); }
        to   { opacity: 1; transform: scale(1); }
    }

    #labelMultiselect {
        width: 100%;
    }

    .multiselect-trigger {
        width: 100%;
        min-width: unset;
        max-width: unset;
        box-sizing: border-box;
    }

    #labelMultiselect ~ * ,
    .filter-group:has(#labelMultiselect) {
        min-width: 0;
    }

    .filter-group {
        min-width: 0;
    }

    .go-btn {
        width: 100%;
        box-sizing: border-box;
    }

    .no-results-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 40px;
    text-align: center;
    gap: 16px;
    }

    .no-results-icon {
        font-size: 48px;
    }

    .no-results-title {
        font-size: 24px;
        font-weight: 700;
        color: #1f2937;
        margin: 0;
    }

    .no-results-msg {
        font-size: 15px;
        color: #6b7280;
        margin: 0;
        max-width: 420px;
    }

    .no-results-back-btn {
        margin-top: 8px;
        padding: 10px 24px;
        background: #3b82f6;
        color: white;
        border: none;
        border-radius: 10px;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        transition: background 0.2s ease;
    }

    .no-results-back-btn:hover {
        background: #2563eb;
    }

    .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;
    }

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

  <script>

    const initialSourcePlatform = '{{ source_platform }}';
    let modalSourcePlatform = initialSourcePlatform;

    document.addEventListener('DOMContentLoaded', function() {
        let allSongs = {{ song_list|tojson|safe }};
        let filteredSongs = [...allSongs];
        let currentPage = 1;
        const songsPerPage = 12;
        let currentSongData = null;
        let currentSongId = null;
        let currentTiktokOverlay = null;
        
        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';
        }
        });

        let searchQuery = '';
        // data_type: 'lf'/'lb'/''
        const rawDataType = {{ data_type|tojson }};
        let dataType = rawDataType === 'total' ? '' : rawDataType;
        let modalDataType = dataType;
        let isLeanForward = dataType === 'lf';
        let isLeanBack = dataType === 'lb';

        function init() {
            initializeFilters();
            updateStats();
            syncDomesticBtn();

            document.querySelector('.stat-card:first-child').classList.add('active-filter');
            document.getElementById('modalSpotifyBtn').classList.toggle('active', initialSourcePlatform === 'spotify');
            document.getElementById('modalAppleBtn').classList.toggle('active', initialSourcePlatform === 'apple');
            document.getElementById('modalTotalBtn').classList.toggle('active', initialSourcePlatform === 'total');

            const urlParams = new URLSearchParams(window.location.search);
            const sortBy = urlParams.get('sort_by');
            const sortType = urlParams.get('sort_type');
            const isOrchard = (urlParams.get('label') || '').toLowerCase().includes('orchard');
            const view = isOrchard ? 'cards' : 'table';


            const scoreBtn = document.getElementById('sortByScore');
            const daysBtn = document.getElementById('sortByDays');
            const sizeBtn = document.getElementById('sortBySize');

            scoreBtn.setAttribute('data-sort', 'none');
            scoreBtn.classList.remove('active');
            scoreBtn.querySelector('span').textContent = '';

            daysBtn.setAttribute('data-sort', 'none');
            daysBtn.classList.remove('active');
            daysBtn.querySelector('span').textContent = '';

            sizeBtn.setAttribute('data-sort', 'none');
            sizeBtn.classList.remove('active');
            sizeBtn.querySelector('span').textContent = '';

            updateLabelUI();

            if (sortBy === 'score' && sortType) {
                scoreBtn.setAttribute('data-sort', sortType);
                scoreBtn.classList.add('active');
                scoreBtn.querySelector('span').textContent = sortType === 'asc' ? '↑' : '↓';

                if (sortType === 'asc') {
                    filteredSongs.sort((a, b) => a.optimization_score - b.optimization_score);
                } else {
                    filteredSongs.sort((a, b) => b.optimization_score - a.optimization_score);
                }
            } else if (sortBy === 'days' && sortType) {
                daysBtn.setAttribute('data-sort', sortType);
                daysBtn.classList.add('active');
                daysBtn.querySelector('span').textContent = sortType === 'asc' ? '↑' : '↓';

                if (sortType === 'asc') {
                    filteredSongs.sort((a, b) => a.data_length - b.data_length);
                } else {
                    filteredSongs.sort((a, b) => b.data_length - a.data_length);
                }
            } else if (sortBy === 'size' && sortType) {
                sizeBtn.setAttribute('data-sort', sortType);
                sizeBtn.classList.add('active');
                sizeBtn.querySelector('span').textContent = sortType === 'asc' ? '↑' : '↓';

                if (sortType === 'asc') {
                    filteredSongs.sort((a, b) => a.avg_tw_streams - b.avg_tw_streams);
                } else {
                    filteredSongs.sort((a, b) => b.avg_tw_streams - a.avg_tw_streams);
                }
            } else {
                filteredSongs.sort((a, b) => b.avg_tw_streams - a.avg_tw_streams);

                sizeBtn.setAttribute('data-sort', 'desc');
                sizeBtn.classList.add('active');
                sizeBtn.querySelector('span').textContent = '↓';
            }

            // Apply view based on URL params
            if (view === 'table') {
                document.querySelectorAll('.toggle-btn').forEach(btn => {
                    if (btn.getAttribute('data-view') === 'table') {
                        btn.classList.add('active');
                    } else {
                        btn.classList.remove('active');
                    }
                });

                document.getElementById('cardsGrid').classList.add('hidden');
                document.getElementById('tableView').classList.remove('hidden');
                renderTable();
                setTimeout(() => document.getElementById('tableView').classList.add('visible'), 10);
            } else {
                // Default cards view
                document.querySelectorAll('.toggle-btn').forEach(btn => {
                    btn.classList.toggle('active', btn.getAttribute('data-view') === 'cards');
                });
                document.getElementById('tableView').classList.add('hidden');
                const cardsGrid = document.getElementById('cardsGrid');
                cardsGrid.classList.remove('hidden');  // ← this was missing
                cardsGrid.style.opacity = '1';
            }

            renderCards();
            setupEventListeners();

            // Auto-open modal if URL has ?song=<ISRC>
            const songParam = new URLSearchParams(window.location.search).get('song');
            if (songParam) {
                const target = allSongs.find(
                    s => String(s.song_id) === String(songParam)
                );
                if (target) {
                    openSongModal(target.song_id, false); // no history push
                }
            }

            if (dataType === 'lf') {
                document.getElementById('lfBtn').classList.add('active');
                document.getElementById('regularBtn').classList.remove('active');
                document.getElementById('lbBtn').classList.remove('active');
            } else if (dataType === 'lb') {
                document.getElementById('lbBtn').classList.add('active');
                document.getElementById('regularBtn').classList.remove('active');
                document.getElementById('lfBtn').classList.remove('active');
            } else {
                // regular
                document.getElementById('regularBtn').classList.add('active');
                document.getElementById('lbBtn').classList.remove('active');
                document.getElementById('lfBtn').classList.remove('active');
            }
        }

        function initializeFilters() {
            // const labelFilter = document.getElementById('labelFilter');
            // const artistFilter = document.getElementById('artistFilter');

            // const uniqueLabels = [...new Set(allSongs.map(song => song.label_filter_name))].sort();

            // uniqueLabels.unshift('SME');

            // uniqueLabels.forEach(label => {
            //     const option = document.createElement('option');
            //     option.value = label;
            //     option.textContent = label;
            //     labelFilter.appendChild(option);
            // });

            // updateArtistFilter('');
            updateArtistFilter('');
        }

        function updateStats() {
            const underperforming = allSongs.filter(song => song.performance_category === 'underperforming').length;
            const overperforming = allSongs.filter(song => song.performance_category === 'overperforming').length;
            const stable = allSongs.filter(song => song.performance_category === 'stable').length;

            document.getElementById('underperformingCount').textContent = underperforming;
            document.getElementById('overperformingCount').textContent = overperforming;
            document.getElementById('stableCount').textContent = stable;
        }

        function updateArtistFilter(selectedLabel) {
            const artistFilter = document.getElementById('artistFilter');
            const currentArtist = artistFilter.value;

            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);
            });

            if (currentArtist && uniqueArtists.includes(currentArtist)) {
                artistFilter.value = currentArtist;
            }
        }

        function getCardPriority(song) {
            switch(song.performance_category) {
                case 'underperforming': return 'urgent';
                case 'overperforming': return 'warning';
                case 'stable': return 'stable';
                default: return 'stable';
            }
        }

        function getPerformanceLabel(song) {
            switch(song.performance_category) {
                case 'underperforming': return 'Underperforming';
                case 'overperforming': return 'Overperforming';
                case 'stable': return 'Stable';
                default: return 'Unknown';
            }
        }

        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 generateMiniChart(song) {
        const width = 100;
        const height = 60;
        const padding = 3;
        const chartWidth = width - (padding * 2);
        const chartHeight = height - (padding * 2);

        const actualDays = Math.min(song.data_length || 14, 14);
        const actualData = generateRealisticActualData(song, actualDays);
        const expectedData = generateRealisticExpectedData(song, actualDays);

        const allValues = [...actualData, ...expectedData];
        const maxValue = Math.max(...allValues);
        const minValue = Math.min(...allValues);
        const range = maxValue - minValue || 1;

        const actualPoints = actualData.map((value, index) => {
            const x = padding + (index / (actualDays - 1)) * chartWidth;
            const y = padding + ((maxValue - value) / range) * chartHeight;
            return `${x},${y}`;
        }).join(' ');

        const expectedPoints = expectedData.map((value, index) => {
            const x = padding + (index / (actualDays - 1)) * chartWidth;
            const y = padding + ((maxValue - value) / range) * chartHeight;
            return `${x},${y}`;
        }).join(' ');

        const priority = getCardPriority(song);
        const strokeColor = priority === 'urgent' ? '#EA580C' : priority === 'warning' ? '#2563EB' : '#64748b';
        return `
            <svg class="mini-chart" viewBox="0 0 ${width} ${height}" preserveAspectRatio="none">
                <defs>
                    <linearGradient id="gradient-${song.song_id}" x1="0%" y1="0%" x2="0%" y2="100%">
                        <stop offset="0%" style="stop-color:${strokeColor};stop-opacity:0.4"/>
                        <stop offset="100%" style="stop-color:${strokeColor};stop-opacity:0.1"/>
                    </linearGradient>
                </defs>

                <polygon points="${actualPoints} ${padding + chartWidth},${padding + chartHeight} ${padding},${padding + chartHeight}"
                         fill="url(#gradient-${song.song_id})"
                         stroke="none"/>

                <polyline points="${expectedPoints}"
                         fill="none"
                         stroke="#9ca3af"
                         stroke-width="1.5"
                         stroke-dasharray="2,1"
                         opacity="0.8"/>

                <polyline points="${actualPoints}"
                         fill="none"
                         stroke="${strokeColor}"
                         stroke-width="2"/>

            </svg>
        `;
    }

        function generateRealisticActualData(song, days) {
            const data = [];
            const performanceRatio = song.performance_ratio || 1;
            const isEarlyPeak = song.predicted_cluster === 0;

            const baseIntensity = 100;

            for (let i = 0; i < days; i++) {
                const dayRatio = i / Math.max(days - 1, 1);
                let expectedValue;

                if (isEarlyPeak) {
                    expectedValue = baseIntensity * Math.exp(-dayRatio * 2);
                } else {
                    expectedValue = baseIntensity * Math.min(1, dayRatio * 2 + 0.3);
                }

                const actualValue = expectedValue * performanceRatio * (0.85 + Math.random() * 0.3);
                data.push(Math.max(5, actualValue));
            }
            return data;
        }

        function generateRealisticExpectedData(song, days) {
            const data = [];
            const isEarlyPeak = song.predicted_cluster === 0;
            const baseIntensity = 100;

            for (let i = 0; i < days; i++) {
                const dayRatio = i / Math.max(days - 1, 1);
                let value;

                if (isEarlyPeak) {
                    value = baseIntensity * Math.exp(-dayRatio * 2);
                } else {
                    value = baseIntensity * Math.min(1, dayRatio * 2 + 0.3);
                }

                data.push(Math.max(5, value));
            }
            return data;
        }

        function renderCards() {
            const startIndex = (currentPage - 1) * songsPerPage;
            const endIndex = startIndex + songsPerPage;
            const songsToShow = filteredSongs.slice(startIndex, endIndex);

            const cardsGrid = document.getElementById('cardsGrid');
            cardsGrid.innerHTML = '';

            songsToShow.forEach((song, index) => {
                const priority = getCardPriority(song);
                const miniChart = generateMiniChart(song);

                const card = document.createElement('div');
                card.className = `song-card ${priority}`;
                card.onclick = () => openSongModal(song.song_id);

                card.innerHTML = `
                    <div class="card-left">
                        <div class="card-header">
                            <div class="card-status">
                                <span class="status-badge ${priority}">
                                    ${getPerformanceLabel(song)}
                                </span>
                                ${song.is_anomalous_cluster ? '<span class="cluster-badge cluster-1" style="background-color: #f3e8ff; color: #6b21a8; border: 1px solid #d8b4fe;">ANOMALOUS</span>' : ''}
                                ${song.is_non_friday_release ? '<span class="non-friday-badge">Non-Friday</span>' : ''}
                            </div>
                            <div class="card-meta">
                                <span class="song-id">#${song.song_id}</span>
                            </div>
                        </div>

                        <div class="card-content">
                            <h3 class="song-title" title="${song.product_name}">${truncateText(song.product_name, 30)}</h3>
                            <p class="artist-name" title="${song.artist_name}">${truncateText(song.artist_name, 25)}</p>
                            <p class="label-name" title="${song.label_parent_name}">${truncateText(song.label_parent_name, 25)}</p>
                        </div>

                        <div class="card-stats">
                            <div class="stat">
                                <span class="stat-value">${song.avg_tw_streams_display || 0}</span>
                                <span class="stat-label">Avg TW Streams</span>
                            </div>
                            <div class="stat">
                                <span class="stat-value">${song.total_streams_display || 0}</span>
                                <span class="stat-label">Total Streams</span>
                            </div>
                            <div class="stat">
                                <span class="stat-value">${(song.optimization_score || 0).toFixed(0)}</span>
                                <span class="stat-label">Interesting Score</span>
                            </div>
                        </div>
                    </div>

                    <div class="card-right">
                        <div class="card-chart">
                            ${miniChart}
                        </div>
                    </div>
                `;

                cardsGrid.appendChild(card);

                setTimeout(() => {
                    card.style.opacity = '1';
                    card.style.transform = 'translateY(0)';
                }, index * 100);
            });

            renderPagination();
            updateResultsCount();

            if (!document.getElementById('tableView').classList.contains('hidden')) {
                renderTable();
            }
        }

        function renderPagination() {
            const totalPages = Math.ceil(filteredSongs.length / songsPerPage);
            const pagination = document.getElementById('pagination');
            pagination.innerHTML = '';

            if (totalPages <= 1) return;

            if (currentPage > 1) {
                const prevBtn = document.createElement('button');
                prevBtn.className = 'page-btn';
                prevBtn.textContent = '← Previous';
                prevBtn.onclick = () => {
                    currentPage--;
                    renderCards();
                    window.scrollTo({ top: 0, behavior: 'smooth' });
                };
                pagination.appendChild(prevBtn);
            }

            const pageInfo = document.createElement('span');
            pageInfo.className = 'page-info';
            pageInfo.textContent = `Page ${currentPage} of ${totalPages}`;
            pagination.appendChild(pageInfo);

            if (currentPage < totalPages) {
                const nextBtn = document.createElement('button');
                nextBtn.className = 'page-btn';
                nextBtn.textContent = 'Next →';
                nextBtn.onclick = () => {
                    currentPage++;
                    renderCards();
                    window.scrollTo({ top: 0, behavior: 'smooth' });
                };
                pagination.appendChild(nextBtn);
            }
        }

        function renderTable() {
            const startIndex = (currentPage - 1) * songsPerPage;
            const endIndex = startIndex + songsPerPage;
            const songsToShow = filteredSongs.slice(startIndex, endIndex);

            const tableBody = document.getElementById('tableBody');
            tableBody.innerHTML = '';

            if (songsToShow.length === 0) {
                const emptyRow = document.createElement('tr');
                const hasLabels = {{ selected_labels | tojson | safe }}.length > 0;
                emptyRow.innerHTML = `
                    <td colspan="9" style="text-align:center; padding: 60px 40px; color: #6b7280; border-bottom: none;">
                        <div style="font-size: 32px; margin-bottom: 12px;">${hasLabels ? '🙅' : '🎵'}</div>
                        <div style="font-size: 15px; font-weight: 600; color: #374151; margin-bottom: 6px;">
                            ${hasLabels ? 'No data available' : 'Set your filters above to get started'}
                        </div>
                        <div style="font-size: 13px;">
                            ${hasLabels ? 'Please change your filter selections and try again.' : 'Use the filters above to load your tracks and hit Go!'}
                        </div>
                    </td>
                `;
                tableBody.appendChild(emptyRow);
                return;
            }

            songsToShow.forEach(song => {
                const priority = getCardPriority(song);
                const performanceLabel = getPerformanceLabel(song);

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

                row.innerHTML = `
                    <td>
                        <div class="table-song-title" title="${song.product_name}">
                            ${truncateText(song.product_name, 25)}
                            ${song.is_non_friday_release ? '<span class="non-friday-badge-small">Non-Fri</span>' : ''}
                        </div>
                        <div style="font-size: 12px; color: #9ca3af; margin-top: 2px;">#${song.song_id}</div>
                    </td>
                    <td>
                        <div class="table-artist-name" title="${song.artist_name}">
                            ${truncateText(song.artist_name, 20)}
                        </div>
                    </td>
                    <td>
                        <div style="max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" title="${song.label_parent_name}">
                            ${truncateText(song.label_parent_name, 20)}
                        </div>
                    </td>
                    <td>
                        <span class="table-performance-badge ${priority}">
                            ${performanceLabel}
                        </span>
                    </td>
                    <td>${(song.optimization_score || 0).toFixed(0)}</td>
                    <td>${song.avg_tw_streams_display || 0}</td>
                    <td>${song.total_streams_display || 0}</td>
                    <td>${song.performance_ratio || '1.0'}x</td>
                    <td>${song.data_length || 0} days</td>
                `;

                tableBody.appendChild(row);
            });
        }

        function updateResultsCount() {
            // im getting rid of this for now, its throwing off spacing
            /*
            const total = allSongs.length;
            const filtered = filteredSongs.length;
            const resultsCount = document.getElementById('resultsCount');

            if (filtered === total) {
                resultsCount.textContent = `Showing all ${total} songs`;
            } else {
                resultsCount.textContent = `Showing ${filtered} of ${total} songs`;
            }
            */
        }

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

            filteredSongs = allSongs.filter(song => {
                const performanceMatch = !performanceFilter || song.performance_category === performanceFilter;
                const artistMatch = !artistFilter || song.artist_name === artistFilter;
                const searchMatch = matchesSearch(song, searchQuery);
                return performanceMatch && artistMatch && searchMatch;
            });

            const hasFilters = performanceFilter || artistFilter;
            document.getElementById('clearFilters').classList.toggle('hidden', !hasFilters);

            currentPage = 1;
            updateStats();
            renderCards();
        }

        function clearFilters() {
            document.getElementById('performanceFilter').value = '';
            document.getElementById('artistFilter').value = '';
            document.getElementById('clearFilters').classList.add('hidden');

            updateArtistFilter('');
            removeActiveCardStates();
            applyFilters();
        }

    let currentGeoCountry = '{{ geo_country }}';

    // Pending filter state (for Go button)
    let pendingGeo = currentGeoCountry;
    let pendingLabels = {{ selected_labels | tojson | safe }};
    let pendingDomestic = {{ 'true' if domestic else 'false' }};
    let savedLabels = [...pendingLabels];

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

    function applyGo() {
        const params = new URLSearchParams(window.location.search);
        params.set('geo_country', pendingGeo);
        params.set('data_type', dataType === '' ? 'total' : dataType);

        const isOrchard = pendingLabels.some(l => l.toLowerCase().includes('orchard'));
        if (isOrchard) {
            params.set('include_older', '1');
        } else {
            params.delete('include_older');
        }

        if (pendingDomestic) {
            params.set('domestic', '1');
        } else {
            params.delete('domestic');
        }

        if (pendingLabels.length > 0) {
            params.set('label', pendingLabels.join('|||'));
        } else {
            params.set('label', '');
        }

        // Preserve sort state
        const scoreSortBtn = document.getElementById('sortByScore');
        const daysSortBtn  = document.getElementById('sortByDays');
        const sizeSortBtn  = document.getElementById('sortBySize');
        if (scoreSortBtn.classList.contains('active')) {
            params.set('sort_by', 'score');
            params.set('sort_type', scoreSortBtn.getAttribute('data-sort'));
        } else if (daysSortBtn.classList.contains('active')) {
            params.set('sort_by', 'days');
            params.set('sort_type', daysSortBtn.getAttribute('data-sort'));
        } else if (sizeSortBtn.classList.contains('active')) {
            params.set('sort_by', 'size');
            params.set('sort_type', sizeSortBtn.getAttribute('data-sort'));
        }

        const isTableView = !document.getElementById('tableView').classList.contains('hidden');
        if (isTableView) params.set('view', 'table');

        window.location.href = '/first_35?' + params.toString();
    }

        function reloadDataWithStreamType() {
            const loadingMessage = document.getElementById('loadingMessage');
            loadingMessage.classList.remove('hidden');

            const params = new URLSearchParams(window.location.search);
            params.set('data_type', dataType);
            params.set('geo_country', currentGeoCountry);
            params.set('source_platform', modalSourcePlatform);

            const scoreSortBtn = document.getElementById('sortByScore');
            const daysSortBtn  = document.getElementById('sortByDays');
            const sizeSortBtn  = document.getElementById('sortBySize');

            if (scoreSortBtn.classList.contains('active')) {
                params.set('sort_by', 'score');
                params.set('sort_type', scoreSortBtn.getAttribute('data-sort'));
            } else if (daysSortBtn.classList.contains('active')) {
                params.set('sort_by', 'days');
                params.set('sort_type', daysSortBtn.getAttribute('data-sort'));
            } else if (sizeSortBtn.classList.contains('active')) {
                params.set('sort_by', 'size');
                params.set('sort_type', sizeSortBtn.getAttribute('data-sort'));
            }

            const isTableView = !document.getElementById('tableView').classList.contains('hidden');
            if (isTableView) params.set('view', 'table');

            window.location.href = '/first_35?' + params.toString();
        }

        function loadModalDataWithStreamType(songId, modalType, 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: modalType, 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';
                }

                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`;
                
                // Sort and display decay rate weights in descending order
                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) => {
                    const aVal = parseFloat(a.value) || 0;
                    const bVal = parseFloat(b.value) || 0;
                    return bVal - aVal;
                });

                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 setupEventListeners() {
            const searchInput = document.getElementById('searchInput');
            const clearSearchBtn = document.getElementById('clearSearch');

            searchInput.addEventListener('input', function(e) {
                searchQuery = e.target.value.trim();
                clearSearchBtn.classList.toggle('hidden', !searchQuery);
                applyFilters();
            });

            clearSearchBtn.addEventListener('click', function() {
                searchQuery = '';
                searchInput.value = '';
                clearSearchBtn.classList.add('hidden');
                applyFilters();
            });

            const regBtn = document.getElementById('regularBtn');
            const lfBtn = document.getElementById('lfBtn');
            const lbBtn = document.getElementById('lbBtn');
            const modalSpotify = document.getElementById('modalSpotifyBtn');
            const modalApple = document.getElementById('modalAppleBtn');

            regBtn?.addEventListener('click', function() {
                if (dataType !== '') {
                    dataType = '';
                    this.classList.add('active');
                    lfBtn?.classList.remove('active');
                    lbBtn?.classList.remove('active');
                    markPending();
                }
            });

            lfBtn?.addEventListener('click', function() {
                if (dataType !== 'lf') {
                    dataType = 'lf';
                    this.classList.add('active');
                    regBtn?.classList.remove('active');
                    lbBtn?.classList.remove('active');
                    markPending();
                }
            });

            lbBtn?.addEventListener('click', function() {
                if (dataType !== 'lb') {
                    dataType = 'lb';
                    this.classList.add('active');
                    regBtn?.classList.remove('active');
                    lfBtn?.classList.remove('active');
                    markPending();
                }
            });

            modalSpotify?.addEventListener('click', function() {
                if (modalSourcePlatform !== 'spotify' && currentSongId) {
                    modalSourcePlatform = 'spotify';
                    this.classList.add('active');
                    modalApple?.classList.remove('active');
                    document.getElementById('modalTotalBtn')?.classList.remove('active');  // ← add
                    loadModalDataWithStreamType(currentSongId, modalDataType, 'spotify');
                }
            });


            document.getElementById('modalTotalBtn')?.addEventListener('click', function() {
                if (modalSourcePlatform !== 'total' && currentSongId) {
                    modalSourcePlatform = 'total';
                    this.classList.add('active');
                    modalSpotify?.classList.remove('active');
                    modalApple?.classList.remove('active');
                    loadModalDataWithStreamType(currentSongId, modalDataType, 'total');
                }
                });

            modalApple?.addEventListener('click', function() {
                if (modalSourcePlatform !== 'apple' && currentSongId) {
                    modalSourcePlatform = 'apple';
                    this.classList.add('active');
                    modalSpotify?.classList.remove('active');
                    document.getElementById('modalTotalBtn')?.classList.remove('active');  // ← add
                    loadModalDataWithStreamType(currentSongId, modalDataType, 'apple');
                }
            });

            // Modal stream type toggle (regular / lf / lb)
            const modalReg = document.getElementById('modalRegularBtn');
            const modalLf = document.getElementById('modalLfBtn');
            const modalLb = document.getElementById('modalLbBtn');

            modalReg?.addEventListener('click', function() {
                if (modalDataType !== '' && currentSongId) {
                    modalDataType = '';
                    this.classList.add('active');
                    modalLf?.classList.remove('active');
                    modalLb?.classList.remove('active');
                    loadModalDataWithStreamType(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');
                    loadModalDataWithStreamType(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');
                    loadModalDataWithStreamType(currentSongId, modalDataType, modalSourcePlatform);
                }
            });

            document.getElementById('performanceFilter').addEventListener('change', applyFilters);

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

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

            if (pendingDomestic) {
                // Domestic ON for any geo → All Labels + lock picker
                savedLabels = [...pendingLabels];
                pendingLabels = [];
                updateLabelUI();
            } else if (pendingLabels.length === 0) {
                // Domestic OFF, no labels selected for any geo → restore defaults
                pendingLabels = {{ selected_labels | tojson | safe }};
                updateLabelUI();
            } else {
                updateLabelUI(); // re-evaluate Go button state
            }

            markPending();
        });
            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';
                }
            });

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

            document.getElementById('underperformingCount').parentElement.addEventListener('click', () => {
                filterByPerformance('underperforming');
            });

            document.getElementById('overperformingCount').parentElement.addEventListener('click', () => {
                filterByPerformance('overperforming');
            });

            document.getElementById('stableCount').parentElement.addEventListener('click', () => {
                filterByPerformance('stable');
            });

            document.getElementById('domesticBtn').addEventListener('click', function() {
                const turningOn = !pendingDomestic;
                pendingDomestic = turningOn;

                if (turningOn && pendingGeo !== 'US') {
                    // Save whatever labels were selected, then open to All Labels
                    savedLabels = [...pendingLabels];
                    pendingLabels = [];
                    updateLabelUI();
                } else if (!turningOn && pendingGeo !== 'US') {
                    // Restore saved labels — but don't allow returning to "All Labels"
                    // since that crashes the site without the domestic filter narrowing rows
                    if (savedLabels.length === 0) {
                        // Fall back to the server-side default to avoid the all-labels overload
                        pendingLabels = {{ selected_labels | tojson | safe }};
                    } else {
                        pendingLabels = [...savedLabels];
                    }
                    updateLabelUI();
                }

                syncDomesticBtn();
                markPending();
            });

            document.querySelector('.stat-card:first-child').addEventListener('click', () => {
                console.log('Total Songs clicked');
                // Clear all filters
                document.getElementById('performanceFilter').value = '';
                // document.getElementById('labelFilter').value = '';
                document.getElementById('artistFilter').value = '';
                document.getElementById('clearFilters').classList.add('hidden');

                // Highlight the Total Songs card and dim others
                removeActiveCardStates();
                document.querySelector('.stat-card:first-child').classList.add('active-filter');

                // Reset filters but keep search
                applyFilters();

                // Reapply current active sort
                const scoreBtn = document.getElementById('sortByScore');
                const daysBtn = document.getElementById('sortByDays');
                const sizeBtn = document.getElementById('sortBySize');

                console.log('Active buttons:', {
                    score: scoreBtn.classList.contains('active'),
                    days: daysBtn.classList.contains('active'),
                    size: sizeBtn.classList.contains('active')
                });

                if (scoreBtn.classList.contains('active')) {
                    const sortType = scoreBtn.getAttribute('data-sort');
                    console.log('Applying score sort:', sortType);
                    if (sortType === 'asc') {
                        filteredSongs.sort((a, b) => a.optimization_score - b.optimization_score);
                    } else if (sortType === 'desc') {
                        filteredSongs.sort((a, b) => b.optimization_score - a.optimization_score);
                    }
                } else if (daysBtn.classList.contains('active')) {
                    const sortType = daysBtn.getAttribute('data-sort');
                    console.log('Applying days sort:', sortType);
                    if (sortType === 'asc') {
                        filteredSongs.sort((a, b) => a.data_length - b.data_length);
                    } else if (sortType === 'desc') {
                        filteredSongs.sort((a, b) => b.data_length - a.data_length);
                    }
                } else if (sizeBtn.classList.contains('active')) {
                    const sortType = sizeBtn.getAttribute('data-sort');
                    console.log('Applying size sort:', sortType);
                    if (sortType === 'asc') {
                        filteredSongs.sort((a, b) => a.avg_tw_streams - b.avg_tw_streams);
                    } else if (sortType === 'desc') {
                        filteredSongs.sort((a, b) => b.avg_tw_streams - a.avg_tw_streams);
                    }
                }

                currentPage = 1;
                updateStats();
                renderCards();
            });

            document.getElementById('sortBySize').addEventListener('click', function() {
                const currentSort = this.getAttribute('data-sort');
                let newSort;

                if (currentSort === 'none') {
                    newSort = 'desc';
                } else if (currentSort === 'desc') {
                    newSort = 'asc';
                } else {
                    newSort = 'none';
                }

                this.setAttribute('data-sort', newSort);

                if (newSort === 'none') {
                    this.classList.remove('active');
                    this.querySelector('span').textContent = '';
                } else {
                    this.classList.add('active');
                    this.querySelector('span').textContent = newSort === 'asc' ? '↑' : '↓';
                }

                const scoreBtn = document.getElementById('sortByScore');
                const daysBtn = document.getElementById('sortByDays');

                scoreBtn.setAttribute('data-sort', 'none');
                scoreBtn.classList.remove('active');
                scoreBtn.querySelector('span').textContent = '';

                daysBtn.setAttribute('data-sort', 'none');
                daysBtn.classList.remove('active');
                daysBtn.querySelector('span').textContent = '';

                applySortingBySize(newSort);
            });

            document.getElementById('sortByScore').addEventListener('click', function() {
                const currentSort = this.getAttribute('data-sort');
                let newSort;

                if (currentSort === 'none') {
                    newSort = 'asc';
                } else if (currentSort === 'asc') {
                    newSort = 'desc';
                } else {
                    newSort = 'none';
                }

                this.setAttribute('data-sort', newSort);

                if (newSort === 'none') {
                    this.classList.remove('active');
                    this.querySelector('span').textContent = '';
                } else {
                    this.classList.add('active');
                    this.querySelector('span').textContent = newSort === 'asc' ? '↑' : '↓';
                }

                const daysBtn = document.getElementById('sortByDays');
                daysBtn.setAttribute('data-sort', 'none');
                daysBtn.classList.remove('active');
                daysBtn.querySelector('span').textContent = '';

                applySortingByScore(newSort);
            });

            document.getElementById('sortByDays').addEventListener('click', function() {
                const currentSort = this.getAttribute('data-sort');
                let newSort;

                if (currentSort === 'none') {
                    newSort = 'asc';
                } else if (currentSort === 'asc') {
                    newSort = 'desc';
                } else {
                    newSort = 'none';
                }

                this.setAttribute('data-sort', newSort);

                if (newSort === 'none') {
                    this.classList.remove('active');
                    this.querySelector('span').textContent = '';
                } else {
                    this.classList.add('active');
                }

                applySorting(newSort);
            });

            document.querySelectorAll('.toggle-btn').forEach(btn => {
                btn.addEventListener('click', function() {
                    const view = this.getAttribute('data-view');

                    document.querySelectorAll('.toggle-btn').forEach(b => b.classList.remove('active'));
                    this.classList.add('active');

                    const cardsGrid = document.getElementById('cardsGrid');
                    const tableView = document.getElementById('tableView');

                    if (view === 'cards') {
                        tableView.classList.remove('visible');
                        setTimeout(() => {
                            tableView.classList.add('hidden');
                            cardsGrid.classList.remove('hidden');
                            setTimeout(() => cardsGrid.style.opacity = '1', 10);
                        }, 150);
                    } else if (view === 'table') {
                        cardsGrid.style.opacity = '0';
                        setTimeout(() => {
                            cardsGrid.classList.add('hidden');
                            tableView.classList.remove('hidden');
                            renderTable();
                            setTimeout(() => tableView.classList.add('visible'), 10);
                        }, 150);
                    }
                });
            });

            document.getElementById('goBtn').addEventListener('click', applyGo);

            // Custom label multiselect
            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 = [];
                updateLabelUI();
                markPending();
            });

            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)) {
                    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__');
                    updateLabelUI();
                    markPending();
                });
            });

            window.addEventListener('popstate', handlePopState);
        }

        function filterByPerformance(performance) {
            // document.getElementById('labelFilter').value = '';
            document.getElementById('artistFilter').value = '';
            document.getElementById('performanceFilter').value = performance;

            applyFilters();

            removeActiveCardStates();
            const clickedCard = document.querySelector(`.stat-card.${getCardClass(performance)}`);
            if (clickedCard) {
                clickedCard.classList.add('active-filter');
            }

            const scoreBtn = document.getElementById('sortByScore');
            const daysBtn = document.getElementById('sortByDays');
            const sizeBtn = document.getElementById('sortBySize');

            if (scoreBtn.classList.contains('active')) {
                const sortType = scoreBtn.getAttribute('data-sort');
                if (sortType === 'asc') {
                    filteredSongs.sort((a, b) => a.optimization_score - b.optimization_score);
                } else if (sortType === 'desc') {
                    filteredSongs.sort((a, b) => b.optimization_score - a.optimization_score);
                }
            } else if (daysBtn.classList.contains('active')) {
                const sortType = daysBtn.getAttribute('data-sort');
                if (sortType === 'asc') {
                    filteredSongs.sort((a, b) => a.data_length - b.data_length);
                } else if (sortType === 'desc') {
                    filteredSongs.sort((a, b) => b.data_length - a.data_length);
                }
            } else if (sizeBtn.classList.contains('active')) {
                const sortType = sizeBtn.getAttribute('data-sort');
                if (sortType === 'asc') {
                    filteredSongs.sort((a, b) => a.avg_tw_streams - b.avg_tw_streams);
                } else if (sortType === 'desc') {
                    filteredSongs.sort((a, b) => b.avg_tw_streams - a.avg_tw_streams);
                }
            }

            currentPage = 1;
            renderCards();
        }

        function getCardClass(performance) {
            switch(performance) {
                case 'underperforming': return 'urgent';
                case 'overperforming': return 'warning';
                case 'stable': return 'stable';
                default: return '';
            }
        }

        function removeActiveCardStates() {
            document.querySelectorAll('.stat-card').forEach(card => {
                card.classList.remove('active-filter');
            });
        }

        function applySorting(sortType) {
            const scoreBtn = document.getElementById('sortByScore');
            const sizeBtn = document.getElementById('sortBySize');

            scoreBtn.setAttribute('data-sort', 'none');
            scoreBtn.classList.remove('active');
            scoreBtn.querySelector('span').textContent = '';

            sizeBtn.setAttribute('data-sort', 'none');
            sizeBtn.classList.remove('active');
            sizeBtn.querySelector('span').textContent = '';

            if (sortType === 'none') {
                filteredSongs.sort((a, b) => b.optimization_score - a.optimization_score);
                scoreBtn.setAttribute('data-sort', 'desc');
                scoreBtn.classList.add('active');
                scoreBtn.querySelector('span').textContent = '↓';
            } else if (sortType === 'asc') {
                filteredSongs.sort((a, b) => a.data_length - b.data_length);
            } else if (sortType === 'desc') {
                filteredSongs.sort((a, b) => b.data_length - a.data_length);
            }

            currentPage = 1;
            renderCards();
        }

        function applySortingByScore(sortType) {
            const daysBtn = document.getElementById('sortByDays');
            const sizeBtn = document.getElementById('sortBySize');

            daysBtn.setAttribute('data-sort', 'none');
            daysBtn.classList.remove('active');
            daysBtn.querySelector('span').textContent = '';

            sizeBtn.setAttribute('data-sort', 'none');
            sizeBtn.classList.remove('active');
            sizeBtn.querySelector('span').textContent = '';

            if (sortType === 'none') {
                filteredSongs.sort((a, b) => a.optimization_score - b.optimization_score);
            } else if (sortType === 'asc') {
                filteredSongs.sort((a, b) => a.optimization_score - b.optimization_score);
            } else if (sortType === 'desc') {
                filteredSongs.sort((a, b) => b.optimization_score - a.optimization_score);
            }

            currentPage = 1;
            renderCards();
        }

        function applySortingBySize(sortType) {
            const scoreBtn = document.getElementById('sortByScore');
            const daysBtn = document.getElementById('sortByDays');

            scoreBtn.setAttribute('data-sort', 'none');
            scoreBtn.classList.remove('active');
            scoreBtn.querySelector('span').textContent = '';

            daysBtn.setAttribute('data-sort', 'none');
            daysBtn.classList.remove('active');
            daysBtn.querySelector('span').textContent = '';

            if (sortType === 'none') {
                filteredSongs.sort((a, b) => b.optimization_score - a.optimization_score);
                scoreBtn.setAttribute('data-sort', 'desc');
                scoreBtn.classList.add('active');
                scoreBtn.querySelector('span').textContent = '↓';
            } else if (sortType === 'asc') {
                filteredSongs.sort((a, b) => a.avg_tw_streams - b.avg_tw_streams);
            } else if (sortType === 'desc') {
                filteredSongs.sort((a, b) => b.avg_tw_streams - a.avg_tw_streams);
            }

            currentPage = 1;
            renderCards();
        }

        function openSongModal(songId, updateHistory = true) {
            currentSongId = songId;
            modalDataType = dataType;

            // Update URL with ?song=<ISRC> when user clicks a row/card
            if (updateHistory) {
                const url = new URL(window.location.href);
                url.searchParams.set('song', songId);
                history.pushState({ song: songId }, '', url);
            }

            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.remove('active');
            modalLfBtn.classList.remove('active');
            modalLbBtn.classList.remove('active');

            if (modalDataType === 'lf') {
                modalLfBtn.classList.add('active');
            } else if (modalDataType === 'lb') {
                modalLbBtn.classList.add('active');
            } else {
                modalRegBtn.classList.add('active');
            }

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

            modalSpotifyBtn.classList.toggle('active', modalSourcePlatform === 'spotify');
            modalAppleBtn.classList.toggle('active', modalSourcePlatform === 'apple');
            document.getElementById('modalTotalBtn').classList.toggle('active', modalSourcePlatform === 'total');

            modalBody.style.opacity = '0';

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

            modal.offsetHeight;

            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';

            loadModalDataWithStreamType(songId, modalDataType, modalSourcePlatform);
        }

        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;

                // Remove ?song=... once user clicks out without refreshing
                const url = new URL(window.location.href);
                url.searchParams.delete('song');
                history.pushState({}, '', url);

            }, 500);

            currentTiktokOverlay = null;
            const btn = document.getElementById('tiktokDropdownBtn');
            if (btn) {
                btn.classList.remove('tiktok-active');
                btn.innerHTML = `<span style="font-size:15px;">♪</span> TikTok <span>▾</span>`;
            }
        }

        function handlePopState() {
            const params = new URLSearchParams(window.location.search);
            const songParam = params.get('song');

            if (songParam) {
                // If history moved to a state with a song param, open that song
                if (songParam !== currentSongId) {
                    const target = allSongs.find(
                        s => String(s.song_id) === String(songParam)
                    );
                    if (target) {
                        openSongModal(target.song_id, false); // no history push
                    }
                }
            } else {
                // No song in URL --> close modal if it's open
                const modal = document.getElementById('songModal');
                if (!modal.classList.contains('hidden')) {
                    closeSongModal();
                }
            }
        }

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

        function updateLabelUI() {
            const panel = document.getElementById('labelOptionsPanel');
            const allEligible = [...panel.querySelectorAll('input[type="checkbox"]')]
                .filter(c => c.value !== '__all_sme__' && 
                            !c.value.toLowerCase().includes('orchard') && 
                            !c.value.toLowerCase().includes('awal'));

            const allSmeChecked = allEligible.length > 0 && allEligible.every(c => pendingLabels.includes(c.value));

            panel.querySelectorAll('input[type="checkbox"]').forEach(cb => {
                if (cb.value === '__all_sme__') {
                    cb.checked = allSmeChecked;
                } else {
                    cb.checked = pendingLabels.includes(cb.value);
                }
            });

            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`;
            }

            const trigger = document.getElementById('labelDropdownBtn');
            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 is set to All Labels while Domestic is active' : '';

            const isUnsafe = !pendingDomestic && pendingLabels.length === 0;
            const goBtn = document.getElementById('goBtn');
            goBtn.disabled = isUnsafe;
            goBtn.style.opacity = isUnsafe ? '0.4' : '';
            goBtn.style.cursor  = isUnsafe ? 'not-allowed' : 'pointer';
            goBtn.title = isUnsafe ? 'Select at least one label, or enable Domestic' : '';

            trigger.style.color = isUnsafe ? '#9ca3af' : '';
            labelText.style.color = isUnsafe ? '#ef4444' : '';  // red hint
        }

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

        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 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;
        }

        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: (() => {
                        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: '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);
        }

        init();

        document.getElementById('benchmarkSelector')?.addEventListener('change', function() {
            if (currentSongData) {
                createMainChart(currentSongData);
                if (!document.getElementById('technicalSection').classList.contains('hidden')) {
                    createTechnicalChart(currentSongData);
                }
            }
        });
    });
  </script>

  {% endblock %}
</div>