<script lang="ts">
  import Skeleton from '@assets/img/steve.png';
  import type { GetDeathsRes } from '@db/schema/death.ts';
  import { type ActionReturnType, actions } from 'astro:actions';

  interface Props {
    teams: Exclude<ActionReturnType<typeof actions.team.teams>['data'], undefined>['teams'];
    deaths: GetDeathsRes;
  }

  const { teams, deaths }: Props = $props();

  const entries = teams.map((team) => ({
    ...team,
    memberOne: Object.assign(team.memberOne, {
      dead: team.memberOne.id != null ? deaths.findIndex((d) => d.deadUserId === team.memberOne.id) !== -1 : null,
    }),
    memberTwo: Object.assign(team.memberTwo, {
      dead: team.memberTwo.id != null ? deaths.findIndex((d) => d.deadUserId === team.memberTwo.id) !== -1 : null,
    }),
    kills: deaths.filter((d) => d.killerUserId === team.memberOne.id || d.killerUserId === team.memberTwo.id).length
  }));
  entries.sort((a, b) => {
    const aAllowed = !!a.memberOne.id && !!a.memberTwo.id && !(a.memberOne.dead && a.memberTwo.dead);
    const bAllowed = !!b.memberOne.id && !!b.memberTwo.id && !(b.memberOne.dead && b.memberTwo.dead);
    if (!aAllowed && !bAllowed) {
      return 0;
    } else if (!aAllowed || !bAllowed) {
      return (bAllowed as unknown as number) - (aAllowed as unknown as number);
    }

    return b.kills - a.kills;
  });
</script>

<div class="card bg-base-300 shadow-sm w-full md:w-5/7 xl:w-4/7 sm:p-5 md:p-10">
  <table class="table table-fixed">
    <thead>
      <tr>
        <th style="width: 30%">Team</th>
        <th style="width: 30%">Spieler 1</th>
        <th style="width: 30%">Spieler 2</th>
        <th style="width: 10%">Kills</th>
      </tr>
    </thead>
    <tbody>
      {#each entries as team (team.id)}
        <tr>
          <td>
            <div class="flex items-center gap-x-2">
              <div class="rounded-sm w-3 h-3" style="background-color: {team.color}"></div>
              <h3 class="text-xs sm:text-xl" class:text-red-200={!team.memberOne}>
                {team.name}
              </h3>
            </div>
            {#if !team.memberOne.id || !team.memberTwo.id}
              <span>Team unvollständig</span>
            {/if}
          </td>
          <td class="max-w-9 overflow-ellipsis">
            <div class="flex items-center gap-x-2">
              {#if team.memberOne.id != null}
                <img
                  class="h-4 pixelated"
                  src={team.memberOne.dead ? Skeleton.src : `https://mc-heads.net/head/${team.memberOne.username}/8`}
                  alt="head"
                />
              {/if}
              <span class="text-xs sm:text-md" class:line-through={team.memberOne.dead} class:text-gray-500={team.memberOne.id == null}
                >{team.memberOne.username}</span
              >
            </div>
          </td>
          <td>
            <div class="flex items-center gap-x-2">
              {#if team.memberTwo.id != null}
                <img
                  class="h-4 pixelated"
                  src={team.memberTwo.dead ? Skeleton.src : `https://mc-heads.net/head/${team.memberTwo.username}/8`}
                  alt="head"
                />
              {/if}
              <span class="text-xs sm:text-md" class:line-through={team.memberTwo.dead} class:text-gray-500={team.memberTwo.id == null}
                >{team.memberTwo.username}</span
              >
            </div>
          </td>
          <td>
            <span class="text-xs sm:text-md">0</span>
          </td>
        </tr>
      {/each}
    </tbody>
  </table>
</div>
