<% layout('main.eta') %>

<%
  const division_to_class = {
    'Unranked': 'unranked',
    'Cardboard': 'cardboard',
    'Wood': 'wood',
    'Wood+': 'wood',
    'Wood++': 'wood',
    'Bronze': 'bronze',
    'Bronze+': 'bronze',
    'Bronze++': 'bronze',
    'Silver': 'silver',
    'Silver+': 'silver',
    'Silver++': 'silver',
    'Gold': 'gold',
    'Gold+': 'gold',
    'Gold++': 'gold',
    'Platinum': 'platinum',
    'Platinum+': 'platinum',
    'Platinum++': 'platinum',
    'Diamond': 'diamond',
    'Diamond+': 'diamond',
    'Diamond++': 'diamond',
    'Legendary': 'legendary',
    'The One': 'the-one',
  };

  function gen_chart(elos) {
    if(elos.length == 0) elos.push(1500);
    if(elos.length == 1) elos.push(elos[0]);

    let min = elos.reduce((acc, val) => Math.min(acc, val));
    let max = elos.reduce((acc, val) => Math.max(acc, val));
    let norm = elos.map(x => Math.round((x - min) / (max - min) * 150));
    let imod = (640 / elos.length);

    let d = 'M 0 ' + (175 - norm[0]) + ' S';
    for(let i = 1; i < norm.length; i++) {
      d += ` ${Math.round(i * imod)} ${175 - norm[i]}`;
    }

    return `
      <svg viewBox="0 0 600 200">
        <defs>
          <linearGradient id="gradient" gradientTransform="rotate(90)">
            <stop offset="5%" stop-color="yellow" />
            <stop offset="95%" stop-color="orange" />
          </linearGradient>
        </defs>
        <path fill="none" stroke="url('#gradient')" d="${d}" stroke-width="4" />
      </svg>`;
  }

  let rankup_percent = (it.rank.elo - it.rank.rankup?.floor_elo) / (it.rank.rankup?.ceil_elo - it.rank.rankup?.floor_elo);
  rankup_percent = Math.round(rankup_percent * 100);
%>

<div class="flex flex-wrap gap-6 justify-center">
  <div class="w-80">
    <div class="flex">
      <img class="block h-24 rounded-full" src="https://s.ppy.sh/a/<%= it.user.user_id %>" />
      <div class="ml-6 mt-3">
        <h1><%= it.user.username %></h1>
        <h3 class="text-lg"><%~ it.flag + ' ' + it.country_name %></h3>
      </div>
    </div>
    <% if(it.rank.is_ranked) { %>
    <div class="text-center mt-4">
      <span class="text-xl <%= division_to_class[it.rank.text] %>"><%= it.rank.text %></span>
      <% if(it.rank.rankup.floor_name != 'The One') { %>
      <div class="progress bg-gray-300" style="width:100%">
        <div class="bar bg-orange-600" style="width: <%= rankup_percent %>%; height: 20px"></div>
      </div>
      <%= Math.ceil(it.rank.rankup.ceil_elo - it.rank.elo) + ' elo to ' + it.rank.rankup.ceil_name %>
      <% } %>
    </div>
    <div class="p-2">
      <%~ gen_chart(it.elo_evolution) %>
    </div>
    <% } %>
    <div class="mt-4">
      <ul>
        <li><span class="text-lg">Rank #<%= it.rank.rank_nb %></span></li>
        <li><span class="text-lg"><%= it.rank.fancy_elo + ' ' %>elo</span></li>
        <li><span class="text-lg"><%= it.rank.total_scores + ' ' %>games played</span></li>
        <% if(it.rank.s2_division) { %><li><span class="text-lg">Season 2: <span class="<%= division_to_class[it.rank.s2_division] %>"><%= it.rank.s2_division %></span></span></li><% } %>
        <% if(it.rank.s1_division) { %><li><span class="text-lg">Season 1: <span class="<%= division_to_class[it.rank.s1_division] %>"><%= it.rank.s1_division %></span></span></li><% } %>
        <li><span class="text-lg"><a target="_blank" href="https://osu.ppy.sh/users/<%= it.user.user_id %>">osu! profile</a></span></li>
      </ul>
    </div>
  </div>

  <div class="max-w-5xl">
    <h2 class="text-center">Match History</h2>
    <table class="match-history block my-4">
      <thead class="flex flex-col">
        <tr class="inline-flex justify-between">
          <td class="map grow w-40 p-1.5 text-center font-bold">Map</td>
          <td class="w-40 p-1.5 text-center font-bold">Placement</td>
          <td class="w-40 p-1.5 text-center font-bold">Elo change</td>
          <td class="w-40 p-1.5 text-center font-bold">Time</td>
        </tr>
      </thead>
      <tbody class="flex flex-col map-list">
        <% it.matches.matches.forEach((match) => {
          let match_elo = Math.round(match.elo_diff);
          if(match_elo > 0) match_elo = '+' + match_elo;
        %>
        <tr class="inline-flex justify-between">
          <td class="map grow">
            <a href="https://osu.ppy.sh/beatmapsets/<%= match.map.set_id %>#<%= it.osu_ruleset %>/<%= match.map.map_id %>"><%= match.map.name %></a>
          </td>
          <td><%= match.placement %>/<%= match.nb_players %></td>
          <td class="<%= match.elo_diff >= 0 ? 'text-green-500' : 'text-red-500' %>"><%= match_elo %></td>
          <td data-tms="<%= match.tms %>"><%= match.time %></td>
        </tr>
        <% }) %>
      </tbody>
    </table>

    <%~
      include('pagination.eta', {
        page_num: it.matches.page,
        max_pages: it.matches.max_pages,
        url_formatter: (num) => `/u/${it.user.user_id}/page-${num}/`
      })
    %>
  </div>

</div>