<script lang="ts">
    import { editorStore } from "$lib/stores/editor.svelte";
    import * as m from "$lib/paraglide/messages";

    interface Props {
        activeRoundIndex?: number;
        onQuestionClick?: (
            roundIndex: number,
            catIndex: number,
            qIndex: number,
        ) => void;
    }

    let { activeRoundIndex = $bindable(0), onQuestionClick }: Props = $props();

    // Ensure activeRoundIndex stays in bounds when rounds change
    $effect(() => {
        if (activeRoundIndex >= editorStore.rounds.length) {
            activeRoundIndex = Math.max(0, editorStore.rounds.length - 1);
        }
    });

    // Get round display name
    function getRoundName(index: number): string {
        if (index === 0) return m.kv_edit_r1();
        if (index === 1) return m.kv_edit_r2();
        return `Round ${index + 1}`;
    }

    // Handle question slot click
    function handleQuestionClick(catIndex: number, qIndex: number) {
        onQuestionClick?.(activeRoundIndex, catIndex, qIndex);
    }
</script>

<div class="flex flex-col gap-2 md:gap-4 flex-1">
    <!-- Active Round Content -->
    {#each editorStore.rounds as round, ri}
        {#if ri === activeRoundIndex}
            <section class="flex-1 flex flex-col bg-kv-black">
                <!-- Round Header -->
                <div class="bg-kv-blue p-4">
                    <h2
                        class="font-kv-body text-[28px] uppercase kv-shadow-text m-0"
                    >
                        <span class="text-kv-white">{getRoundName(ri)}</span>
                        <span class="text-kv-yellow text-xl ml-2">
                            ({m.kv_edit_dd_count()}
                            {editorStore.countDailyDoubles(ri)}/{editorStore
                                .settings.dailyDoublesPerRound[ri] ?? 1})
                        </span>
                    </h2>
                </div>

                <!-- Categories Row -->
                <div
                    class="grid grid-cols-3 md:grid-cols-6 gap-1 md:gap-2 bg-kv-black py-2"
                >
                    {#each round.categories as cat, ci}
                        <div class="bg-kv-blue py-2">
                            <input
                                type="text"
                                value={cat.name}
                                oninput={(e) =>
                                    editorStore.updateCategoryName(
                                        ri,
                                        ci,
                                        e.currentTarget.value,
                                    )}
                                placeholder={m.kv_edit_category()}
                                class="w-full bg-transparent border-none outline-none font-kv-body text-sm text-kv-white text-center uppercase kv-shadow-text placeholder:text-kv-white/50"
                            />
                        </div>
                    {/each}
                </div>

                <!-- Questions Grid -->
                <div
                    class="grid grid-cols-3 md:grid-cols-6 gap-1 md:gap-2 bg-kv-black flex-1"
                >
                    {#each { length: editorStore.settings.questionsPerCategory } as _, qi}
                        {#each round.categories as cat, ci}
                            {@const q = cat.questions[qi]}
                            {#if q}
                                <button
                                    onclick={() => handleQuestionClick(ci, qi)}
                                    class="bg-kv-blue flex items-center justify-center cursor-pointer border-none transition-opacity relative min-h-[60px] md:min-h-[80px]
                                        {q.question.trim()
                                        ? 'opacity-100'
                                        : 'opacity-50'}
                                        {q.isDailyDouble
                                        ? 'ring-4 ring-inset ring-kv-yellow'
                                        : ''}"
                                >
                                    <span
                                        class="font-kv-price text-kv-yellow text-2xl md:text-4xl kv-shadow-price kv-shadow-text"
                                    >
                                        {q.points}€
                                    </span>
                                    <!-- Daily Double indicator: black star with yellow box -->
                                    {#if q.isDailyDouble}
                                        <div
                                            class="absolute -top-0 right-1 bg-kv-yellow px-1 py-0.5 flex items-center justify-center"
                                        >
                                            <span class="text-kv-black text-sm"
                                                >★</span
                                            >
                                        </div>
                                    {/if}
                                </button>
                            {/if}
                        {/each}
                    {/each}
                </div>
            </section>
        {/if}
    {/each}
</div>
