/* judgemark-v2.js */

const leaderboardDataV2 = `
gpt-4.1,76.31,0.727,0.819,0.576,$10.43
claude-sonnet-4,81.99,0.726,0.844,0.818,$18.73
gemini-2.5-pro,72.06,0.675,0.747,0.662,$52.90
mistralai/Mistral-Small-3.2-24B-Instruct-2506,50.21,0.396,0.578,0.306,$0.49
qwen/qwen3-235b-a22b-2507,59.69,0.437,0.61,0.704,$0.94
z-ai/glm-4.5,63.41,0.53,0.664,0.619,$4.40
gemini-2.5-flash,62.97,0.532,0.66,0.605,$1.87
o3,75.1,0.699,0.779,0.69,$16.16
gpt-5-mini-2025-08-07:minimal-reasoning,74.49,0.694,0.778,0.662,$1.49
gpt-5-nano-2025-08-07:minimal-reasoning,52.2,0.411,0.536,0.576,$0.29
openai/gpt-oss-120b,54.78,0.332,0.57,0.676,$1.14
openai/gpt-oss-20b,42.8,0.331,0.476,0.334,$0.45
gpt-5-2025-08-07:minimal-reasoning,81.2,0.8,0.838,0.719,$7.43
gpt-5-nano-2025-08-07__5x-ensemble,61.08,0.579,0.635,0.548,$1.45
moonshotai/Kimi-K2-Instruct,73.09,0.66,0.752,0.719,$3.70
qwen/qwen3-30b-a3b-instruct-2507,34.58,0.153,0.343,0.548,$0.98
gemini-2.5-flash-lite,55.99,0.483,0.607,0.448,$0.50
gpt-4.1-mini,57.26,0.395,0.623,0.548,$2.09
mistral-medium-3,58.53,0.496,0.621,0.533,$2.31
qwen/qwen3-235b-a22b,56.18,0.318,0.616,0.59,$1.00
o4-mini,56.1,0.455,0.594,0.533,$11.81
meta-llama/llama-3.1-8b-instruct,19.18,0.0,0.286,0.006,$0.11
claude-sonnet-4.5,84.56,0.817,0.867,0.79,$18.02
claude-haiku-4.5,79.72,0.781,0.814,0.747,$6.05
gemini-3-pro-preview,86.58,0.808,0.867,0.918,$10.96
grok-4.1-fast,75.82,0.608,0.816,0.676,$1.65
deepseek-ai/DeepSeek-V3.2,66.28,0.514,0.679,0.747,$1.25
mistralai/Mistral-Large-3-675B-Instruct-2512,68.2,0.661,0.696,0.647,$2.51
gpt-5.2,82.01,0.74,0.862,0.733,$10.28,
gemini-3-flash-preview,85.38,0.78,0.895,0.761,$2.74
zai-org/GLM-4.7-Flash,66.18,0.5,0.699,0.676,$1.95
zai-org/GLM-4.7,77.48,0.731,0.8,0.719,$10.30
claude-sonnet-4-6,94.08,0.866,0.965,0.918,$18.04
claude-opus-4-6,92.93,0.883,0.958,0.861,$29.69
zai-org/GLM-5,85.58,0.667,0.916,0.804,$3.45
*Qwen/Qwen3.5-397B-A17B,85.45,0.707,0.902,0.814,$3.39
*minimax/minimax-m2.5,64.46,0.521,0.653,0.733,$3.50
*Qwen/Qwen3.5-27B,84.31,0.721,0.869,0.861,$1.63
*Qwen/Qwen3.5-122B-A10B,81.03,0.721,0.827,0.833,$1.96
*Qwen/Qwen3.5-35B-A3B,81.39,0.784,0.831,0.776,$1.07
*gemini-3.1-flash-lite-preview,80.92,0.674,0.859,0.747,$1.37
*gpt-5.4,84.98,0.705,0.898,0.804,$13.54
*qwen3.5-flash-02-23,81.85,0.767,0.838,0.79,$0.51
*Qwen/Qwen3.5-9B,74.99,0.679,0.779,0.704,$0.25
*mistralai/Mistral-Small-4-119B-2603,51.6,0.297,0.552,0.59,$0.79
*gpt-5.4-nano,64.47,0.468,0.692,0.633,$1.10
*gpt-5.4-mini,81.14,0.714,0.834,0.818,$4.06
`

const csv_header = [
  "model",
  "judgemark_score",
  "stability",
  "separability",
  "human_corr",
  "cost"
]

/**
 * Dark mode toggling
 */
function setupDarkModeToggle() {
  var toggle = document.getElementById('darkModeToggle');
  var label = document.getElementById('toggleLabel');

  // Check if preference is saved in localStorage
  const savedMode = localStorage.getItem('darkModeEnabled');
  if (savedMode) {
    document.body.classList.toggle('dark-mode', savedMode === 'true');
    toggle.checked = (savedMode === 'true');
    label.textContent = (savedMode === 'true') ? 'Dark' : 'Light';
  }

  toggle.addEventListener('change', function() {
    document.body.classList.toggle('dark-mode', this.checked);
    label.textContent = this.checked ? 'Dark' : 'Light';
    localStorage.setItem('darkModeEnabled', this.checked); // Save preference
  });
}

function applySystemTheme() {
  // Only apply system theme if no saved preference
  if (localStorage.getItem('darkModeEnabled') === null) {
    const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
    const toggle = document.getElementById('darkModeToggle');
    const label = document.getElementById('toggleLabel');
    document.body.classList.toggle('dark-mode', prefersDarkMode);
    toggle.checked = prefersDarkMode;
    label.textContent = prefersDarkMode ? 'Dark' : 'Light';
  }
}

/**
 * Display an encoded email to avoid spam
 */
function displayEncodedEmail() {
  var encodedUser = 'contact';
  var encodedDomain = 'eqbench.com';
  var emailElement = document.getElementById('email');
  emailElement.innerHTML = decodeHtmlEntities(encodedUser + '@' + encodedDomain);
  var emailAddress = emailElement.innerText;
  emailElement.innerHTML = `<a href="mailto:${emailAddress}">Contact</a>`;
}

function decodeHtmlEntities(encodedString) {
  var textArea = document.createElement('textarea');
  textArea.innerHTML = encodedString;
  return textArea.value;
}

/**
 * Optional sorting plugin if needed
 */
$.fn.dataTable.ext.type.order['params-pre'] = function (data) {
  if (!data || data === '-') {
    return 9999; // Sort missing or null last
  }
  if (data.includes('x')) {
    const parts = data.split('x').map(Number);
    return parts.reduce((acc, val) => acc * val, 1); 
  }
  return parseFloat(data) || 0;
};

/**
 * Utility to sanitize model names for filenames:
 * Replaces '/' with '__' then removes all non-[A-Za-z0-9_-]
 */
function sanitizeModelName(modelName) {
  // Remove leading * and !
  let sanitized = modelName.replace(/^[*!]+/, '');
  sanitized = sanitized.replace(/\//g, '__');
  sanitized = sanitized.replace(/[^\w\-]/g, '-');
  return sanitized;
}

/**
 * Parse the CSV data, build rows, and initialize DataTable
 */
function loadLeaderboardDataV2() {
  // Split on newlines, filter out empty lines
  const lines = leaderboardDataV2.trim().split('\n').filter(l => l.trim() !== '');

  // We'll collect scores to find a maximum for the bar widths
  let scores = [];

  // Prepare row data
  const rowData = lines.map(line => {
    const parts = line.split(',');
    // Indices based on csv_header:
    //  0: model
    //  1: judgemark_score
    //  2: stability
    //  3: separability
    //  4: human_corr
    //  5: cost

    const model = parts[0] || '';
    const judgemarkScore = parts[1] || '';
    const stability = parts[2] || '';
    const separability = parts[3] || '';
    const humanCorr = parts[4] || '';
    const cost = parts[5] || '';

    // Convert strings to numbers for sorting & bar scaling
    let parsedScore = parseFloat(judgemarkScore);
    if (!isNaN(parsedScore)) {
      scores.push(parsedScore);
    }

    const sanitized = sanitizeModelName(model);    
    const chart3Link = `results/judgemark-v2/charts/judgemark_3chart_${sanitized}.png`;
    const scatterLink = `results/judgemark-v2/charts/judgemark_scattergrid_${sanitized}.png`;

    return {
      model,
      judgemarkScore,
      stability,
      separability,
      humanCorr,
      cost,
      chart3Link,
      scatterLink
    };
  });

  const maxScore = scores.length > 0
    ? Math.max(...scores)
    : 1;

  // Build final HTML rows
  const rowsHtml = rowData.map(item => {
    let {
      model,
      judgemarkScore,
      stability,
      separability,
      humanCorr,
      cost,
      statsLink,
      chart3Link,
      scatterLink
    } = item;

    const isNewModel = model.startsWith('*');
    model = model.replace(/^\*/, '');

    let displayModel = model;
    if (model.includes('/') && model != "openrouter/polaris-alpha") {
      // Strip “:…” so the link points to the base repo
      const hfRepoPath = model.split(':')[0]; // keep text before first colon
      displayModel = `<a href="https://huggingface.co/${hfRepoPath}" target="_blank" rel="noopener noreferrer">${model}</a>`;
    }

    if (isNewModel) {
      displayModel = '🆕' + displayModel
    }

    // Score bar for judgemark score
    let numericScore = parseFloat(judgemarkScore);
    let barHtml = '-';
    let dataOrder = 0;
    if (!isNaN(numericScore)) {
      const pct = (numericScore / maxScore) * 100;
      dataOrder = numericScore; // for sorting
      barHtml = `
        <div class="score-bar-container">
          <div class="judgemark-score-bar" style="width: ${pct}%;"></div>
          <span class="score-text">${judgemarkScore}</span>
        </div>`;
    }

    const chartLinksHtml = `
      <span style="white-space: nowrap">
        <a href="${chart3Link}">📊Scoring</a>
      </span>
      <br>
      <span style="white-space: nowrap">
        <a href="${scatterLink}">📊Scatter</a>
      </span>
    `;

    return `
      <tr>
        <td>${displayModel}</td>
        <td class="calibrated-score-col" data-order="${dataOrder}">${barHtml}</td>
        <td class="middle-stats">${stability || '-'}</td>
        <td class="middle-stats">${separability || '-'}</td>
        <td class="middle-stats">${humanCorr || '-'}</td>
        <td class="middle-stats">${cost || '-'}</td>
        <td>${chartLinksHtml}</td>
      </tr>
    `;
  }).join('');

  // Insert into DOM
  document.getElementById('leaderboardBodyV2').innerHTML = rowsHtml;

  // Now initialize DataTable
  initializeDataTableV2();
}

/**
 * Initializes DataTable with column definitions and mobile-friendly toggling
 */
function initializeDataTableV2() {
  const table = $('#judgemark-leaderboard-v2').DataTable({
    order: [[1, 'desc']],    // Sort by the Judgemark Score column descending
    paging: false,           // Show all
    searching: false,        // No search bar
    lengthMenu: [50, 100, 200, 1000],
    language: {
      lengthMenu: "Show _MENU_"
    },
    columnDefs: [
      // Stability = col 2, Separability = col 3, Human Corr = col 4, Cost = col 5
      { targets: [2,3,4], className: 'middle-stats' },
      // Judgemark Score desc by default; if user clicks, toggle asc
      { targets: [1,2,3,4], orderSequence: ['desc','asc'] }
    ],
    dom: "<'d-flex flex-column flex-md-row justify-content-between'<'#toggleMiddleStatsDummy.d-block.d-sm-none'><'dataTables_length'l><'dataTables_filter'f>>" +
         "<'row'<'col-12'tr>>" +
         "<'row'<'col-md-5'i><'col-md-7'p>>",
    drawCallback: function(settings) {
      // Show the score bars after each table draw
      this.api().rows({ page: 'current' }).nodes().to$()
        .find('.judgemark-score-bar').css('display', 'block');
    }
  });

  // Expand/Collapse columns (Stability, Separability, Human Corr, Cost) on mobile
  let middleStatsExpanded = false;
  function collapseMiddleColumns() {
    if (window.innerWidth < 992 && !middleStatsExpanded) {
      // Wrap columns 2..5 in a collapsible <div> on small screens if not expanded
      $('#judgemark-leaderboard-v2 tr').each(function () {
        $(this).find('th, td').slice(2, 5).wrapAll('<div class="collapsed-columns"></div>');
      });
      $('#toggleMiddleStats').text('Expand Details');
    } else {
      // Otherwise unwrap them
      $('#judgemark-leaderboard-v2 tr').each(function () {
        $(this).find('.collapsed-columns').children().unwrap();
      });
      $('#toggleMiddleStats').text('Hide Details');
    }
  }
  function toggleMiddleStats() {
    middleStatsExpanded = !middleStatsExpanded;
    collapseMiddleColumns();
  }

  $(window).on('resize', collapseMiddleColumns);
  $('#toggleMiddleStats').on('click', toggleMiddleStats);
  collapseMiddleColumns();
}

// On DOM load
document.addEventListener('DOMContentLoaded', function() {
  // Always run
  displayEncodedEmail();
  applySystemTheme();
  setupDarkModeToggle();

  // Load data for Judgemark v2 table
  if (document.getElementById('judgemark-leaderboard-v2')) {
    loadLeaderboardDataV2();
  }
});