import { registerClearHandler } from './devtools.js';

function timeColor(ms, thresholds) {
  if (ms < thresholds[0]) return 'perf-green';
  if (ms < thresholds[1]) return 'perf-yellow';
  return 'perf-red';
}

function renderCard(label, value, unit, colorClass) {
  return `<div class="perf-card">
    <div class="perf-card-label">${label}</div>
    <div class="perf-card-value ${colorClass}">${value}<span style="font-size:12px;font-weight:400;margin-left:2px">${unit}</span></div>
  </div>`;
}

function render(metrics) {
  const out = document.getElementById('performance-output');
  let html = '';

  if (metrics.scriptDuration !== undefined) {
    html += renderCard('Script Execution', Math.round(metrics.scriptDuration), 'ms',
      timeColor(metrics.scriptDuration, [50, 200]));
  }
  if (metrics.domContentLoaded !== undefined) {
    html += renderCard('DOM Content Loaded', Math.round(metrics.domContentLoaded), 'ms',
      timeColor(metrics.domContentLoaded, [100, 500]));
  }
  if (metrics.loadEvent !== undefined) {
    html += renderCard('Page Load', Math.round(metrics.loadEvent), 'ms',
      timeColor(metrics.loadEvent, [200, 1000]));
  }
  if (metrics.domNodes !== undefined) {
    html += renderCard('DOM Nodes', metrics.domNodes, '',
      metrics.domNodes > 1500 ? 'perf-red' : metrics.domNodes > 800 ? 'perf-yellow' : 'perf-neutral');
  }
  if (metrics.resourceCount !== undefined) {
    html += renderCard('Resources Loaded', metrics.resourceCount, '', 'perf-neutral');
  }

  out.innerHTML = html;
}

export function clearPerformance() {
  document.getElementById('performance-output').innerHTML = '';
}

export function initPerformance() {
  registerClearHandler('performance', clearPerformance);

  window.addEventListener('message', (e) => {
    if (!e.data || e.data.type !== 'devtools' || e.data.tab !== 'performance') return;
    if (e.data.metrics) render(e.data.metrics);
  });
}