<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";
  import { Rundentyp } from "../model/models";

  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)
      )
      .filter((t) => !t.zurueckgezogen) || []
  );

  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}`
      : ""
  );

  // Click counter for tournament headers
  const turnierClicks = $state<Map<number, number>>(new Map());

  function handleTurnierClick(turnier: Turnier) {
    const currentClicks = (turnierClicks.get(turnier.id) || 0) + 1;
    turnierClicks.set(turnier.id, currentClicks);

    if (currentClicks === 5) {
      copyTurnierResults(turnier);
      turnierClicks.set(turnier.id, 0); // Reset counter
    }
  }

  function copyTurnierResults(turnier: Turnier) {
    if (!$liga) return;

    const lines: string[] = [];
    let lastRunde: Rundentyp | undefined = undefined;

    teamsSortiert.forEach((team, index) => {
      const ergebnis = turnier.teilnehmer?.find(
        (t) => t.nr === team.startnummer
      );
      
      if (!ergebnis) {
        return;
      }

      // Add separator line when runde changes
      if (index > 0 && lastRunde !== undefined && ergebnis.runde !== lastRunde) {
        lines.push("-----");
      }
      lastRunde = ergebnis.runde;

      const platzStr = `${team.platz || ""}.`;
      const teamName = removeEv(team.bezeichnung);
      
      let resultsStr = "";
      
      // Check if team only reached Vorrunde or Zwischenrunde
      if (ergebnis.runde === Rundentyp.VORRUNDE) {
        resultsStr = "Vorrunde";
      } else if (ergebnis.runde === Rundentyp.ZWISCHENRUNDE || ergebnis.runde === Rundentyp.ZWISCHENRUNDE2) {
        resultsStr = "Zwischenrunde";
      } else if (ergebnis.platzwertung && ergebnis.platzwertung.length > 0) {
        // Get all placement numbers from all dances, maintaining WR order
        const allPlacements: number[] = [];
        ergebnis.platzwertung.forEach((pw) => {
          if (pw.wertungen) {
            // Group by unten/oben/andere to match table display order
            const unten = pw.wertungen.filter((w) => w.unten === true);
            const oben = pw.wertungen.filter((w) => w.unten === false);
            const andere = pw.wertungen.filter((w) => typeof w.unten !== "boolean");
            
            // Add placements in the same order as displayed in table
            unten.forEach((w) => allPlacements.push(w.platz));
            oben.forEach((w) => allPlacements.push(w.platz));
            andere.forEach((w) => allPlacements.push(w.platz));
          }
        });
        resultsStr = allPlacements.join(" ");
      }

      // Format: "Platz.\tTeamName\tResults" (3 columns separated by tabs)
      const line = `${platzStr}\t${teamName}\t${resultsStr}`;
      lines.push(line);
    });

    const textToCopy = lines.join("\n");
    
    // Copy to clipboard
    navigator.clipboard.writeText(textToCopy).then(
      () => {
        console.log("Tournament results copied to clipboard");
      },
      (err) => {
        console.error("Failed to copy to clipboard:", err);
      }
    );
  }
</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
                onclick={() => handleTurnierClick(turnier)}
                >{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>
