<script lang="ts">
  import { STATISTICS_INTERVAL } from 'astro:env/server';
  import { statistics } from '@app/website/index/liveStats.ts';

  function transformPlaytimeMinutes(playtimeMinutes: number) {
    if (playtimeMinutes < 60 * 24) return `${Math.floor(playtimeMinutes / 60)} Stunden`;
    else if (playtimeMinutes < 60 * 24 * 2) return `1 Tag`;
    return `${Math.floor(playtimeMinutes / 60 / 24)} Tage`;
  }

  function transformMobKills(mobKills: number) {
    if (mobKills < 1000) return `${mobKills}`;
    else if (mobKills < 1_000_000) return `${(mobKills / 1000).toFixed(2)}K`;
    else return `${(mobKills / 1000 / 1000).toFixed(2)}M`;
  }
</script>

<div class="flex flex-col items-center">
  <div class="flex flex-row items-start mb-6">
    <div class="tooltip" data-tip="* Die Statistiken werden alle {STATISTICS_INTERVAL / 60} Minuten aktualisiert">
      <h3 class="text-2xl">Live<span class="font-geist text-[18px]">*</span> Statistiken</h3>
    </div>
    <div class="inline-grid *:[grid-area:1/1] mt-1 ml-0.5">
      <div class="status status-info animate-ping"></div>
      <div class="status status-info"></div>
    </div>
  </div>
  <div class="flex flex-col lg:flex-row gap-4">
    <div class="bg-base-200 stats stats-vertical xl:stats-horizontal shadow h-min xl:h-[initial]">
      <div class="stat">
        <div class="stat-figure">
          <span class="iconify iconify-[heroicons--clock-solid] size-[1.5em]"></span>
        </div>
        <div class="stat-title">Gesamtspielzeit</div>
        <div class="stat-value">
          {statistics != null ? transformPlaytimeMinutes(statistics.playtimeMinutes) : 'n/a'}
        </div>
        <div class="stat-desc">&#8203;</div>
      </div>
    </div>
    <div class="bg-base-200 stats stats-vertical xl:stats-horizontal shadow">
      <div class="stat">
        <div class="stat-figure">
          <span class="iconify iconify-[local--crosshairs] size-[1.5em]"></span>
        </div>
        <div class="stat-title">Getötete Monster</div>
        <div class="stat-value">{statistics != null ? transformMobKills(statistics.mobKills) : 'n/a'}</div>
        <div class="stat-desc">&#8203;</div>
      </div>
      <div class="stat">
        <div class="stat-figure">
          <span class="iconify iconify-[local--skull] size-[1.5em]"></span>
        </div>
        <div class="stat-title">Spieler Tode</div>
        <div class="stat-value">{statistics?.playerDeaths ?? 'n/a'}</div>
        <div class="stat-desc">
          <span class="underline">{statistics?.playerKills ?? 'n/a'}</span> davon durch andere Spieler
        </div>
      </div>
    </div>
  </div>
</div>
