<script lang="ts">
  import * as dateFns from "date-fns";
  import { liga, loadRiege } from "../stores/LigaStore";
  import { type Turnier, type TurnierTeilnehmer } from "../model/models";
  import { onMount } from "svelte";
  import ErgebnisZelle from "../components/ErgebnisZelle.svelte";
  import ErgebnisPopup from "../components/ErgebnisPopup.svelte";
  import TeamListe from "../components/TeamListe.svelte";
  import TurnierInfos from "../components/TurnierInfos.svelte";
  import RangsSymbol from "../components/RangsSymbol.svelte";
  import RundenLegende from "../components/RundenLegende.svelte";
  import Spinner from "../components/Spinner.svelte";
  import BackButton from "../components/BackButton.svelte";
  import { removeEv } from "../components/removeEv";

  const { selection } = $props<{
    selection: {
      riege?: number;
      turnier?: number;
    };
  }>();

  const teamsSortiert = $derived(
    [...($liga?.teams ?? [])].sort(
      (a, b) =>
        (a.platz || 999) - (b.platz || 999) ||
        (a.platzSkating || 999) - (b.platzSkating || 999) ||
        (a.startnummer ?? 99999) - (b.startnummer ?? 99999)
    ) || []
  );

  onMount(() => {
    loadRiege(selection);
  });

  const popupErgebnis = $state<{
    teilnehmer: TurnierTeilnehmer | null;
    turnier: Turnier | null;
  }>({
    teilnehmer: null,
    turnier: null,
  });

  function showErgebnis(ergebnis: TurnierTeilnehmer, turnier: Turnier) {
    popupErgebnis.teilnehmer = ergebnis;
    popupErgebnis.turnier = turnier;
  }

  const bezeichnung = $derived(
    $liga
      ? $liga.bezeichnung.indexOf($liga.jahr.toString()) >= 0
        ? $liga.bezeichnung
        : `${$liga.bezeichnung} ${$liga.jahr}`
      : ""
  );
</script>

{#if $liga}
  <h2>{bezeichnung}</h2>

  <BackButton
    onclick={() =>
      (location.href = location.href.split("/").slice(0, -1).join("/"))}
  />

  {#if $liga.turniere.length > 0 && $liga.teams.length > 0}
    <h3>Ergebnisse</h3>
    {#if $liga.turniere.length < $liga.turniereSoll}
      <p>
        (insgesamt {$liga.turniereSoll} Turniere, {$liga.turniereSoll - $liga.turniere.length} Turniere sind noch nicht gemeldet)
      </p>
    {/if}
    <div class="liga-scroll-container">
      <table class="liga-tabelle">
        <thead>
          <tr>
            <th style="width: 4.5em">Rang</th>
            {#each $liga.turniere as turnier}
              <th
                >{dateFns.format(
                  new Date(turnier.datum),
                  $liga.turniere.length == 1 ? "dd.MM.yyyy" : "dd.MM."
                )}{#if turnier.vorbehalt}<span class="vorbehalt">&nbsp;*</span
                  >{/if}<br />{turnier.ort}</th
              >
            {/each}
            <th style="width: 3em">&sum;</th>
          </tr>
        </thead>
        <tbody>
          {#each teamsSortiert as team, tidx}
            <tr>
              <th><RangsSymbol {team} /></th>
              <th colspan={1 + $liga.turniere.length}
                >{removeEv(team.bezeichnung)}</th
              >
            </tr>
            <tr class="border-bottom">
              <th></th>
              {#each $liga.turniere as turnier, idx}
                {@const ergebnis = turnier.teilnehmer?.find(
                  (i) => i.nr == team.startnummer
                )}
                {#if ergebnis}
                  <ErgebnisZelle
                    {ergebnis}
                    onClick={() => showErgebnis(ergebnis, turnier)}
                    index={tidx + teamsSortiert.length * idx}
                  />
                {:else}
                  <td></td>
                {/if}
              {/each}
              <td>{team.summe || ""}</td>
            </tr>
          {/each}
        </tbody>
        <tfoot>
          <tr>
            <td colspan={2 + $liga.turniere.length}>
              <RundenLegende turniere={$liga.turniere} />
            </td>
          </tr>
        </tfoot>
      </table>
    </div>
    <ErgebnisPopup
      teilnehmer={popupErgebnis.teilnehmer}
      turnier={popupErgebnis.turnier}
      teams={teamsSortiert}
      show={!!popupErgebnis.teilnehmer}
      onClose={() => {
        popupErgebnis.teilnehmer = null;
      }}
    />
  {/if}
  {#if $liga.teams.length > 0}
    <TeamListe teams={$liga.teams} />
  {/if}
  {#if $liga.turniere.length > 0}
    <TurnierInfos turniere={$liga.turniere} />
  {/if}
{:else}
  <Spinner />
{/if}

<style lang="scss">
  div.liga-scroll-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .liga-tabelle {
    width: 100%;
    min-width: min-content;

    :global(th),
    :global(td) {
      border: none;
      padding: 2px 5px;
      text-align: left;
    }

    tfoot {
      td {
        padding-top: 1em;
        vertical-align: top;
      }
    }

    border-collapse: collapse;
    tbody tr {
      th {
        text-align: left;
      }
      td {
        text-align: left;
        border-right: 1px solid #fff;
      }
    }

    thead {
      background-color: #d8d8d8;
      th {
        text-align: left;
        border-right: 1px solid #fff;
        vertical-align: bottom;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 8em;
      }
    }

    tbody tr {
      :global(td),
      :global(th) {
        background-color: #fff;
      }
    }

    tbody tr:nth-child(4n),
    tbody tr:nth-child(4n + 3) {
      :global(td),
      :global(th) {
        background-color: #f9f9f9;
      }
    }

    tbody tr.border-bottom {
      border-bottom: 1px solid #d8d8d8;
    }
  }
</style>
