<script lang="ts">
    import { editorStore } from "$lib/stores/editor.svelte";
    import { KvCheckbox, KvButton } from "$lib/components/kuldvillak/ui";
    import { TeamEditor } from "./index";
    import * as m from "$lib/paraglide/messages";

    interface Props {
        onShowRules?: () => void;
        onShowHowTo?: () => void;
        onEditFinalRound?: () => void;
        activeRoundIndex?: number;
        onRoundSelect?: (index: number) => void;
    }

    let {
        onShowRules,
        onShowHowTo,
        onEditFinalRound,
        activeRoundIndex = 0,
        onRoundSelect,
    }: Props = $props();

    function setRoundCount(count: 1 | 2) {
        editorStore.setRoundCount(count, m.kv_edit_r2());
    }
</script>

<section class="bg-kv-blue p-2 md:p-4 overflow-x-auto">
    <!-- Title Row -->
    <div class="flex flex-wrap items-center justify-between gap-4 mb-4 md:mb-8">
        <h2 class="kv-h3 text-kv-white m-0">{m.kv_edit_settings_teams()}</h2>
        <div class="flex flex-wrap gap-2">
            {#if onShowRules}
                <KvButton variant="secondary" onclick={onShowRules} size="md"
                    >{m.kv_edit_rules()}</KvButton
                >
            {/if}
            {#if onShowHowTo}
                <KvButton variant="secondary" onclick={onShowHowTo} size="md"
                    >{m.kv_edit_how_to()}</KvButton
                >
            {/if}
        </div>
    </div>

    <div class="flex flex-wrap gap-4 lg:gap-16 xl:gap-32">
        <!-- Left: Core Settings -->
        <div class="flex gap-8">
            <div class="flex flex-col gap-4">
                <div class="h-12 flex items-center">
                    <span class="kv-label text-kv-white"
                        >{m.kv_edit_rounds()}</span
                    >
                </div>
                <div class="h-12 flex items-center">
                    <span class="kv-label text-kv-white"
                        >{m.kv_play_timer()}</span
                    >
                </div>
                <div class="h-12 flex items-center">
                    <span class="kv-label text-kv-white"
                        >{m.kv_play_timer_reveal()}</span
                    >
                </div>
                <div class="h-12 flex items-center">
                    <span class="kv-label text-kv-white"
                        >{m.kv_edit_final_round()}</span
                    >
                </div>
                {#if editorStore.settings.numberOfRounds === 2 && onRoundSelect}
                    <div class="h-12 flex items-center">
                        <span class="kv-label text-kv-white"
                            >{m.kv_edit_edit_round()}</span
                        >
                    </div>
                {/if}
            </div>
            <div class="flex flex-col gap-4">
                <!-- Round count -->
                <div class="h-12 flex items-center">
                    <KvButton
                        variant="toggle"
                        size="square"
                        active={editorStore.settings.numberOfRounds === 1}
                        onclick={() => setRoundCount(1)}>1</KvButton
                    >
                    <KvButton
                        variant="toggle"
                        size="square"
                        active={editorStore.settings.numberOfRounds === 2}
                        onclick={() => setRoundCount(2)}>2</KvButton
                    >
                </div>
                <!-- Timer -->
                <div class="h-12 flex items-center gap-2">
                    <div
                        class="w-12 h-12 border-4 border-kv-black flex items-center justify-center"
                    >
                        <input
                            type="number"
                            bind:value={
                                editorStore.settings.defaultTimerSeconds
                            }
                            min={1}
                            max={60}
                            class="w-full h-full bg-transparent border-none outline-none font-kv-body text-xl text-kv-white text-center uppercase [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
                        />
                    </div>
                    <span
                        class="font-kv-body text-xl text-kv-white uppercase kv-shadow-text"
                        >{m.kv_play_seconds()}</span
                    >
                </div>
                <!-- Reveal time -->
                <div class="h-12 flex items-center gap-2">
                    <div
                        class="w-12 h-12 border-4 border-kv-black flex items-center justify-center"
                    >
                        <input
                            type="number"
                            bind:value={
                                editorStore.settings.answerRevealSeconds
                            }
                            min={1}
                            max={60}
                            class="w-full h-full bg-transparent border-none outline-none font-kv-body text-xl text-kv-white text-center uppercase [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
                        />
                    </div>
                    <span
                        class="font-kv-body text-xl text-kv-white uppercase kv-shadow-text"
                        >{m.kv_play_seconds()}</span
                    >
                </div>
                <!-- Final round toggle -->
                <div class="h-12 flex items-center gap-2">
                    <KvCheckbox
                        checked={editorStore.settings.enableFinalRound}
                        onclick={() =>
                            (editorStore.settings.enableFinalRound =
                                !editorStore.settings.enableFinalRound)}
                    />
                    {#if editorStore.settings.enableFinalRound && onEditFinalRound}
                        <KvButton
                            variant="secondary"
                            size="sm"
                            onclick={onEditFinalRound}
                        >
                            {m.kv_edit_question()}
                        </KvButton>
                    {/if}
                </div>
                <!-- Round selection (only show if 2 rounds) -->
                {#if editorStore.settings.numberOfRounds === 2 && onRoundSelect}
                    <div class="h-12 flex items-center">
                        <KvButton
                            variant="toggle"
                            size="hug"
                            active={activeRoundIndex === 0}
                            onclick={() => onRoundSelect(0)}
                        >
                            {m.kv_edit_r1()}
                        </KvButton>
                        <KvButton
                            variant="toggle"
                            size="hug"
                            active={activeRoundIndex === 1}
                            onclick={() => onRoundSelect(1)}
                        >
                            {m.kv_edit_r2()}
                        </KvButton>
                    </div>
                {/if}
            </div>
        </div>

        <!-- Middle: Points & Teams -->
        <div class="flex gap-8">
            <div class="flex flex-col gap-4">
                <div class="h-12 flex items-center">
                    <span
                        class="font-kv-body text-xl text-kv-white uppercase kv-shadow-text"
                        >{m.kv_edit_points()}</span
                    >
                </div>
                <div class="h-12 flex items-center">
                    <span
                        class="font-kv-body text-xl text-kv-white uppercase kv-shadow-text"
                        >{m.kv_edit_values()}</span
                    >
                </div>
                <div class="h-12 flex items-center">
                    <span
                        class="font-kv-body text-xl text-kv-white uppercase kv-shadow-text"
                        >{m.kv_edit_negative_scores()}</span
                    >
                </div>
                <div class="h-12 flex items-center">
                    <span
                        class="font-kv-body text-xl text-kv-white uppercase kv-shadow-text"
                        >{m.kv_edit_teams_label()}</span
                    >
                </div>
            </div>
            <div class="flex flex-col gap-4">
                <!-- Point preset -->
                <div class="h-12 flex items-center">
                    <KvButton
                        variant="toggle"
                        size="hug"
                        active={editorStore.settings.pointValuePreset ===
                            "round1"}
                        onclick={() => editorStore.updatePreset("round1")}
                        >{m.kv_edit_preset_normal()}</KvButton
                    >
                    <KvButton
                        variant="toggle"
                        size="hug"
                        active={editorStore.settings.pointValuePreset ===
                            "custom"}
                        onclick={() => editorStore.updatePreset("custom")}
                        >{m.kv_edit_custom()}</KvButton
                    >
                </div>
                <!-- Point values -->
                <div class="h-12 flex items-center">
                    {#each editorStore.settings.pointValues as val, i}
                        <div
                            class="w-12 h-12 border-4 border-kv-black flex items-center justify-center"
                        >
                            {#if editorStore.settings.pointValuePreset === "custom"}
                                <input
                                    type="number"
                                    bind:value={
                                        editorStore.settings.pointValues[i]
                                    }
                                    onchange={() =>
                                        editorStore.updateQuestionPoints()}
                                    min={1}
                                    max={9999}
                                    class="w-full h-full bg-transparent border-none outline-none font-kv-body text-lg text-kv-white text-center [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
                                />
                            {:else}
                                <span
                                    class="font-kv-body text-lg text-kv-white/50"
                                    >{val}</span
                                >
                            {/if}
                        </div>
                    {/each}
                </div>
                <!-- Negative scores -->
                <div class="h-12 flex items-center">
                    <KvCheckbox
                        checked={editorStore.settings.allowNegativeScores}
                        onclick={() =>
                            (editorStore.settings.allowNegativeScores =
                                !editorStore.settings.allowNegativeScores)}
                    />
                </div>
                <!-- Teams -->
                <TeamEditor />
            </div>
        </div>
    </div>
</section>
