<% const match = data; %>
<%
function generateLevelCircle(xp) {
  const XP_LEVELS = dotaconstants.xp_level;
  let level = XP_LEVELS.findIndex(l => xp < l) - 1;
  if (level < 0) level = XP_LEVELS.length - 1;
  const currentXP = xp - XP_LEVELS[level];
  const nextXP = XP_LEVELS[level+1] - XP_LEVELS[level];
  const percentage = currentXP / nextXP * 100;
  // return { level, progress: currentXP / nextXP };
  const config = {
    radius: 12,
    strokeColor: '#ffd700',
    bgColor: '#eee',
    strokeWidth: 2,
    svgSize: 32,
    showBackground: true,
    // 新增文字配置
    showText: true,             // 是否显示文字
    textColor: '#333',          // 文字颜色
    fontSize: 12 * 0.8,
    fontWeight: 'bold',         // 字体粗细
    // ...options
  };

  const center = config.svgSize / 2;
  const circumference = 2 * Math.PI * config.radius;
  const progress = circumference * (percentage / 100);
  const gap = circumference - progress;

  return `
<svg width="${config.svgSize}" height="${config.svgSize}" viewBox="0 0 ${config.svgSize} ${config.svgSize}">
  ${config.showBackground ? `
  <circle cx="${center}" cy="${center}" r="${config.radius}"
          fill="none" stroke="${config.bgColor}"
          stroke-width="${config.strokeWidth}"/>
  ` : ''}

  <circle cx="${center}" cy="${center}" r="${config.radius}"
          fill="none" stroke="${config.strokeColor}"
          stroke-width="${config.strokeWidth}"
          stroke-dasharray="${progress} ${gap}"
          stroke-linecap="round"
          transform="rotate(-90 ${center} ${center})"/>

  ${config.showText ? `
  <!-- 居中文字 -->
  <text x="${center}" y="${center}"
        text-anchor="middle"    // 水平居中
        dominant-baseline="middle" // 垂直居中
        fill="${config.textColor}"
        font-size="${config.fontSize}px"
        font-weight="${config.fontWeight}"
        font-family="Arial, sans-serif">
    ${level}
  </text>
  ` : ''}
</svg>`;
}

function generateDetails(rivals) {
  const svgHeight = 32;

  rivals.sort((a, b) => b.isRadiant - a.isRadiant);
  const gold = { radiant: rivals[0].stats.networthPerMinute.at(Math.min(10, rivals[0].stats.networthPerMinute.length - 1)), dire: rivals[1].stats.networthPerMinute.at(Math.min(10, rivals[1].stats.networthPerMinute.length - 1)) };
  const kills = { radiant: rivals[0].stats.killEvents?.filter(e => e.time <= 600).length || 0, dire: rivals[1].stats.killEvents?.filter(e => e.time <= 600).length || 0 }
  const deaths = { radiant: rivals[0].stats.deathEvents?.filter(e => e.time <= 600).length || 0, dire: rivals[1].stats.deathEvents?.filter(e => e.time <= 600).length || 0 }
  const assists = { radiant: rivals[0].stats.assistEvents?.filter(e => e.time <= 600).length || 0, dire: rivals[1].stats.assistEvents?.filter(e => e.time <= 600).length || 0 }
  const goldSplit = gold.radiant / (gold.radiant + gold.dire);
  return `
<div class="details">
<img src="${utils.getImageUrl(rivals[0].hero.shortName, ImageType.HeroIcons)}" class="hero radiant" />
${generateLevelCircle(rivals[0].stats.experiencePerMinute.slice(0, Math.min(11, rivals[0].stats.experiencePerMinute.length - 1)).reduce((a, b) => a + b, 0))}
<p class="kda">${kills.radiant}/${deaths.radiant}/${assists.radiant}</p>
<div class="graph">
  <svg width="100%" height="${svgHeight}" viewBox="0 0 180 ${svgHeight}">

    <!-- 经济差 -->
    <g transform="translate(0,0)">
      <rect y="9" width="180" height="14" fill="#9c3628"/>
      <rect y="9" width="${180 * goldSplit}" height="14" fill="#3c9028"/>
      <line x1="${180 * goldSplit}" y1="9" x2="${180 * goldSplit}" y2="25"
          stroke="#fff" stroke-width="1"/>

      <!-- 左侧数值（天辉） -->
      <text x="5" y="50%"
      dominant-baseline="middle"
          fill="#fff"
          font-size="10"
          text-anchor="start">${gold.radiant}</text>

      <!-- 右侧数值（夜魇） -->
      <text x="175" y="50%"
      dominant-baseline="middle"
          fill="#fff"
          font-size="10"
          text-anchor="end">${gold.dire}</text>

      <!-- 差值（上方） -->
      <text x="${180 * goldSplit}"
          y="5px"
          dominant-baseline="middle"
          fill="${gold.radiant > gold.dire ? "#3c9028" : "#9c3628"}"
          font-size="10"
          text-anchor="middle">+${Math.abs(gold.dire - gold.radiant)}</text>
    </g>
  </svg>
</div>
<p class="kda">${kills.dire}/${deaths.dire}/${assists.dire}</p>
${generateLevelCircle(rivals[1].stats.experiencePerMinute.slice(0, Math.min(11, rivals[1].stats.experiencePerMinute.length - 1)).reduce((a, b) => a + b, 0))}
<img src="${utils.getImageUrl(rivals[1].hero.shortName, ImageType.HeroIcons)}" class="hero dire" />
</div>
`
}
%>
<div class="lane_outcome">
  <h4 class="title"><%= $t("dota2tracker.template.lane") %></h4>
  <div class="panel">
    <div class="lane">
      <div class="title">
        <p><%= $t("dota2tracker.template.lane_top") %></p>
        <p class="<%= match.topLaneOutcome.split("_")[0].toLowerCase() %>"><%= $t("dota2tracker.template.OUTCOME_MAP."+match.topLaneOutcome) %></p>
      </div>
      <%- generateDetails(match.players.filter(p => (p.position.slice(-1) == 3 && p.isRadiant) || (p.position.slice(-1) == 1 && !p.isRadiant))) %>
      <%- generateDetails(match.players.filter(p => (p.position.slice(-1) == 4 && p.isRadiant) || (p.position.slice(-1) == 5 && !p.isRadiant))) %>
    </div>
    <div class="lane">
      <div class="title">
        <p><%= $t("dota2tracker.template.lane_mid") %></p>
        <p class="<%= match.midLaneOutcome.split("_")[0].toLowerCase() %>"><%= $t("dota2tracker.template.OUTCOME_MAP."+match.midLaneOutcome) %></p>
      </div>
      <%- generateDetails(match.players.filter(p => p.position.slice(-1) == 2)) %>
    </div>
    <div class="lane">
      <div class="title">
        <p><%= $t("dota2tracker.template.lane_bottom") %></p>
        <p class="<%= match.bottomLaneOutcome.split("_")[0].toLowerCase() %>"><%= $t("dota2tracker.template.OUTCOME_MAP."+match.bottomLaneOutcome) %></p>
      </div>
      <%- generateDetails(match.players.filter(p => (p.position.slice(-1) == 1 && p.isRadiant) || (p.position.slice(-1) == 3 && !p.isRadiant))) %>
      <%- generateDetails(match.players.filter(p => (p.position.slice(-1) == 5 && p.isRadiant) || (p.position.slice(-1) == 4 && !p.isRadiant))) %>
    </div>
  </div>
</div>
