<script lang="ts">
    import * as m from "$lib/paraglide/messages";
    import KvNumberInput from "./KvNumberInput.svelte";
    import KvButton from "./KvButton.svelte";

    interface Props {
        name: string;
        score: number;
        scoreAdjustment?: number;
        answering?: boolean;
        selectable?: boolean;
        // Final round mode
        finalMode?: boolean;
        finalJudged?: boolean;
        finalActive?: boolean;
        onFinalJudge?: (correct: boolean, wager: number) => void;
        // Event handlers
        onSelect?: () => void;
        onAdd?: () => void;
        onRemove?: () => void;
        onCorrect?: () => void;
        onWrong?: () => void;
    }

    let {
        name,
        score,
        scoreAdjustment = 100,
        answering = false,
        selectable = false,
        finalMode = false,
        finalJudged = false,
        finalActive = false,
        onFinalJudge,
        onSelect,
        onAdd,
        onRemove,
        onCorrect,
        onWrong,
    }: Props = $props();

    // Final round state
    let finalAnswerCorrect = $state<boolean | null>(null);
    let finalWagerInput = $state(0);
</script>

<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
<div
    class="group relative bg-kv-blue flex flex-col gap-4 items-center justify-center p-4 flex-1 min-w-0 box-border
    {answering || finalActive
        ? 'border-8 border-kv-yellow'
        : 'border-8 border-transparent'}
    {selectable && !finalJudged ? 'cursor-pointer' : ''}
    {finalJudged ? 'opacity-60' : ''}"
    onclick={selectable && !finalJudged ? onSelect : undefined}
    onkeydown={selectable && !finalJudged
        ? (e) => e.key === "Enter" && onSelect?.()
        : undefined}
    role={selectable && !finalJudged ? "button" : "presentation"}
    tabindex={selectable && !finalJudged ? 0 : -1}
>
    <!-- Hover overlay - darkens background only, extends to cover border -->
    {#if selectable && !finalJudged}
        <div
            class="absolute -inset-2 bg-black opacity-0 group-hover:opacity-20 transition-opacity pointer-events-none z-0"
        ></div>
    {/if}

    <!-- Name and Score -->
    <div
        class="relative z-10 flex flex-col gap-4 items-center font-kv-body text-kv-white text-center uppercase w-full
        {selectable && !finalJudged
            ? 'group-hover:text-kv-yellow transition-colors'
            : ''}"
    >
        <span class="text-2xl md:text-4xl kv-shadow-text">{name}</span>
        <span
            class="text-2xl md:text-4xl kv-shadow-text {score < 0
                ? 'text-kv-red'
                : ''}">{score}€</span
        >
        {#if finalJudged}
            <span
                class="text-lg md:text-xl text-kv-green uppercase kv-shadow-text"
                >✓ {m.kv_play_judged()}</span
            >
        {/if}
    </div>

    <!-- Action Buttons -->
    <div class="relative z-10 flex flex-col gap-2 items-center justify-center">
        {#if finalMode && finalActive}
            <!-- Final round judging UI -->
            {#if finalAnswerCorrect === null}
                <div class="flex gap-2">
                    <KvButton
                        variant="success"
                        size="md"
                        onclick={() => (finalAnswerCorrect = true)}
                    >
                        {m.kv_play_correct()}
                    </KvButton>
                    <KvButton
                        variant="danger"
                        size="md"
                        onclick={() => (finalAnswerCorrect = false)}
                    >
                        {m.kv_play_wrong()}
                    </KvButton>
                </div>
            {:else}
                <!-- Wager input and confirm -->
                <div class="flex items-center gap-2">
                    <KvNumberInput
                        bind:value={finalWagerInput}
                        min={0}
                        max={Math.max(score, 0)}
                        step={100}
                    />
                    <span class="font-kv-body text-lg text-kv-white">€</span>
                </div>
                <KvButton
                    variant="secondary"
                    size="sm"
                    onclick={() => {
                        onFinalJudge?.(finalAnswerCorrect!, finalWagerInput);
                        finalAnswerCorrect = null;
                        finalWagerInput = 0;
                    }}
                >
                    {m.kv_play_confirm()}
                </KvButton>
            {/if}
        {:else if finalMode && !finalJudged && !finalActive}
            <!-- Final mode but not active - show score adjustment buttons -->
            <div class="flex gap-4">
                <KvButton variant="success" size="md" onclick={onAdd}>
                    +{scoreAdjustment}
                </KvButton>
                <KvButton variant="danger" size="md" onclick={onRemove}>
                    -{scoreAdjustment}
                </KvButton>
            </div>
        {:else if answering}
            <!-- Correct/Wrong buttons when answering -->
            <div class="flex gap-4">
                <KvButton variant="success" size="md" onclick={onCorrect}>
                    {m.kv_play_correct()}
                </KvButton>
                <KvButton variant="danger" size="md" onclick={onWrong}>
                    {m.kv_play_wrong()}
                </KvButton>
            </div>
        {:else if !finalMode}
            <!-- Add/Remove score buttons in normal mode -->
            <div class="flex gap-4">
                <KvButton variant="success" size="md" onclick={onAdd}>
                    +{scoreAdjustment}
                </KvButton>
                <KvButton variant="danger" size="md" onclick={onRemove}>
                    -{scoreAdjustment}
                </KvButton>
            </div>
        {/if}
    </div>
</div>
