// Rating history graph — canvas sparkline with interactive hover
import { createCanvas, clear } from '../../../core/canvas.js';

export function renderRatingGraph(container, history, options = {}) {
  const { width = 340, height = 140, color = '#3B82F6', bgColor = '#0f0f1e', gridColor = 'rgba(255,255,255,0.05)' } = options;

  container.innerHTML = '';
  if (!history || history.length < 2) {
    container.innerHTML = `<div style="height:${height}px;display:flex;align-items:center;justify-content:center;color:#64748b;font-size:12px;">بيانات غير كافية</div>`;
    return;
  }

  const { canvas, ctx } = createCanvas(container, width, height);
  canvas.style.width = '100%';
  canvas.style.height = height + 'px';
  canvas.style.borderRadius = '8px';

  const padding = { top: 20, right: 10, bottom: 25, left: 40 };
  const graphW = width - padding.left - padding.right;
  const graphH = height - padding.top - padding.bottom;

  const ratings = history.map(h => h.rating_after || h.rating || 1200);
  const minR = Math.min(...ratings) - 20;
  const maxR = Math.max(...ratings) + 20;
  const range = maxR - minR || 1;

  function toX(i) { return padding.left + (i / (ratings.length - 1)) * graphW; }
  function toY(r) { return padding.top + graphH - ((r - minR) / range) * graphH; }

  // Background
  ctx.fillStyle = bgColor;
  ctx.fillRect(0, 0, width, height);

  // Grid lines
  ctx.strokeStyle = gridColor;
  ctx.lineWidth = 0.5;
  const gridSteps = 4;
  for (let i = 0; i <= gridSteps; i++) {
    const y = padding.top + (graphH / gridSteps) * i;
    ctx.beginPath();
    ctx.moveTo(padding.left, y);
    ctx.lineTo(width - padding.right, y);
    ctx.stroke();

    // Y-axis labels
    const ratingVal = Math.round(maxR - (range / gridSteps) * i);
    ctx.fillStyle = '#64748b';
    ctx.font = '9px Inter, sans-serif';
    ctx.textAlign = 'right';
    ctx.textBaseline = 'middle';
    ctx.fillText(String(ratingVal), padding.left - 5, y);
  }

  // Gradient fill under line
  const gradient = ctx.createLinearGradient(0, padding.top, 0, padding.top + graphH);
  gradient.addColorStop(0, color + '40');
  gradient.addColorStop(1, color + '00');

  ctx.beginPath();
  ctx.moveTo(toX(0), toY(ratings[0]));
  for (let i = 1; i < ratings.length; i++) {
    ctx.lineTo(toX(i), toY(ratings[i]));
  }
  ctx.lineTo(toX(ratings.length - 1), padding.top + graphH);
  ctx.lineTo(toX(0), padding.top + graphH);
  ctx.closePath();
  ctx.fillStyle = gradient;
  ctx.fill();

  // Line
  ctx.beginPath();
  ctx.moveTo(toX(0), toY(ratings[0]));
  for (let i = 1; i < ratings.length; i++) {
    ctx.lineTo(toX(i), toY(ratings[i]));
  }
  ctx.strokeStyle = color;
  ctx.lineWidth = 2;
  ctx.lineJoin = 'round';
  ctx.stroke();

  // Start and end dots
  ctx.beginPath();
  ctx.arc(toX(0), toY(ratings[0]), 3, 0, Math.PI * 2);
  ctx.fillStyle = color;
  ctx.fill();

  ctx.beginPath();
  ctx.arc(toX(ratings.length - 1), toY(ratings[ratings.length - 1]), 4, 0, Math.PI * 2);
  ctx.fillStyle = color;
  ctx.fill();
  ctx.strokeStyle = '#fff';
  ctx.lineWidth = 2;
  ctx.stroke();

  // Current rating label
  const currentR = ratings[ratings.length - 1];
  ctx.fillStyle = '#f8fafc';
  ctx.font = 'bold 12px Inter, sans-serif';
  ctx.textAlign = 'center';
  ctx.fillText(String(currentR), toX(ratings.length - 1), toY(currentR) - 10);

  // Change indicator
  const change = currentR - ratings[0];
  const changeColor = change >= 0 ? '#34D399' : '#F87171';
  const changeText = (change >= 0 ? '+' : '') + change;
  ctx.fillStyle = changeColor;
  ctx.font = 'bold 10px Inter, sans-serif';
  ctx.textAlign = 'left';
  ctx.fillText(changeText, padding.left + 5, padding.top + 12);

  // Period label
  ctx.fillStyle = '#64748b';
  ctx.font = '9px Inter, sans-serif';
  ctx.textAlign = 'center';
  ctx.fillText(`${ratings.length} مباراة`, width / 2, height - 5);
}
