<script lang="ts">
    import { dataRepo } from "@components/repo/data";
    import type { ExtendedEvent, ResponseTeam } from "@components/types/event";
    import EventFightChip from "./EventFightChip.svelte";
    import SheetHeader from "@components/ui/sheet/sheet-header.svelte";
    import { SheetDescription, SheetTitle } from "@components/ui/sheet";

    const { event, team }: { event: ExtendedEvent; team: ResponseTeam } = $props();

    let members = $derived.by(() => {
        return fetchMembers(team.id);
    });
    let recentFights = $derived.by(() => {
        return event.fights
            .filter((f) => f.hasFinished && (f.blueTeam.id === team.id || f.redTeam.id === team.id))
            .sort((a, b) => b.start - a.start)
            .slice(0, 5);
    });

    async function fetchMembers(teamId: number) {
        return await $dataRepo.queryPlayers(undefined, undefined, [teamId], 50, 0, false, false);
    }
</script>

<SheetHeader>
    <SheetTitle
        >{team.name}
        <span class="text-sm text-gray-400">{team.kuerzel}</span></SheetTitle
    >
    <SheetDescription>Statistiken des Teams</SheetDescription>
</SheetHeader>

<div class="mt-8 space-y-8">
    <section>
        <h3 class="text-lg font-semibold mb-4 border-b border-slate-800 pb-2 text-blue-400">Teammitglieder</h3>
        {#await members}
            <p class="text-slate-500 italic text-sm">Lade Mitglieder...</p>
        {:then member}
            <div class="grid grid-cols-2 gap-2">
                {#each member.entries as p (p.uuid)}
                    <div class="bg-slate-800/50 p-2 rounded border border-slate-700 flex items-center gap-2">
                        <div class="w-6 h-6 rounded-full bg-slate-700 flex items-center justify-center text-[10px]">
                            {p.name.charAt(0)}
                        </div>
                        <span class="truncate text-sm">{p.name}</span>
                    </div>
                {/each}
            </div>
        {/await}
    </section>

    <section>
        <h3 class="text-lg font-semibold mb-4 border-b border-slate-800 pb-2 text-green-400">Letzte 5 Kämpfe</h3>
        {#if recentFights.length > 0}
            <div class="space-y-3">
                {#each recentFights as fight}
                    <div class="scale-90 origin-left">
                        <EventFightChip
                            {event}
                            disabled={true}
                            {fight}
                            group={fight.group ?? {
                                id: -1,
                                name: "Event",
                                pointsPerWin: 0,
                                pointsPerLoss: 0,
                                pointsPerDraw: 0,
                                type: "GROUP_STAGE",
                                points: null,
                            }}
                        />
                    </div>
                {/each}
            </div>
        {:else}
            <p class="text-slate-500 italic text-sm">Keine beendeten Kämpfe in diesem Event.</p>
        {/if}
    </section>
</div>
