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

    export interface TutorialSlide {
        image: string;
        text: string;
    }

    interface Props {
        open: boolean;
        title: string;
        slides: TutorialSlide[];
        onclose?: () => void;
    }

    let { open = $bindable(), title, slides, onclose }: Props = $props();

    let currentIndex = $state(0);

    function close() {
        open = false;
        currentIndex = 0;
        onclose?.();
    }

    function prev() {
        if (currentIndex > 0) {
            currentIndex--;
        }
    }

    function next() {
        if (currentIndex < slides.length - 1) {
            currentIndex++;
        }
    }

    function handleKeydown(e: KeyboardEvent) {
        if (!open) return;
        if (e.key === "Escape") close();
        if (e.key === "ArrowLeft") prev();
        if (e.key === "ArrowRight") next();
    }

    // Reset index when modal opens
    $effect(() => {
        if (open) {
            currentIndex = 0;
        }
    });
</script>

<svelte:window onkeydown={handleKeydown} />

{#if open}
    <!-- Backdrop -->
    <div
        class="fixed inset-0 bg-kv-background/50 z-50 flex items-center justify-center p-4"
        onclick={close}
        onkeydown={(e) => e.key === "Enter" && close()}
        role="button"
        tabindex="-1"
        aria-label="Close modal"
    >
        <!-- Modal -->
        <div
            class="bg-kv-blue border-[16px] border-kv-black w-full max-w-5xl max-h-[90vh] flex flex-col gap-6 md:gap-8 p-4 md:p-8 overflow-y-auto"
            role="dialog"
            aria-modal="true"
            tabindex="-1"
            onclick={(e) => e.stopPropagation()}
            onkeydown={(e) => e.stopPropagation()}
        >
            <!-- Header -->
            <div class="flex items-start justify-between gap-4">
                <h2
                    class="font-kv-body text-xl md:text-3xl text-kv-white uppercase kv-shadow-text"
                >
                    {title}
                </h2>
                <button
                    class="text-kv-yellow hover:opacity-80 transition-opacity cursor-pointer bg-transparent border-none p-0"
                    onclick={close}
                    aria-label="Close"
                >
                    <svg
                        class="w-6 h-6 md:w-8 md:h-8"
                        viewBox="0 0 24 24"
                        fill="currentColor"
                    >
                        <path
                            d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
                        />
                    </svg>
                </button>
            </div>

            <!-- Image Carousel -->
            {#if slides.length > 0}
                <div class="flex items-center gap-2 md:gap-4">
                    <!-- Previous Button -->
                    <button
                        class="text-kv-yellow hover:opacity-80 transition-opacity cursor-pointer bg-transparent border-none p-0 disabled:opacity-30 disabled:cursor-not-allowed shrink-0"
                        onclick={prev}
                        disabled={currentIndex === 0}
                        aria-label="Previous"
                    >
                        <svg
                            class="w-8 h-8 md:w-12 md:h-12"
                            viewBox="0 0 48 48"
                            fill="currentColor"
                        >
                            <path
                                d="M29.5334 40L13.5334 24L29.5334 8L33.2668 11.7333L21.0001 24L33.2668 36.2667L29.5334 40Z"
                            />
                        </svg>
                    </button>

                    <!-- Image -->
                    <div
                        class="flex-1 aspect-video bg-kv-black/30 overflow-hidden"
                    >
                        <img
                            src={slides[currentIndex].image}
                            alt="Tutorial step {currentIndex + 1}"
                            class="w-full h-full object-contain"
                        />
                    </div>

                    <!-- Next Button -->
                    <button
                        class="text-kv-yellow hover:opacity-80 transition-opacity cursor-pointer bg-transparent border-none p-0 disabled:opacity-30 disabled:cursor-not-allowed shrink-0"
                        onclick={next}
                        disabled={currentIndex === slides.length - 1}
                        aria-label="Next"
                    >
                        <svg
                            class="w-8 h-8 md:w-12 md:h-12"
                            viewBox="0 0 48 48"
                            fill="currentColor"
                        >
                            <path
                                d="M18.4666 8L34.4666 24L18.4666 40L14.7332 36.2667L26.9999 24L14.7332 11.7333L18.4666 8Z"
                            />
                        </svg>
                    </button>
                </div>

                <!-- Text Description -->
                <p
                    class="font-kv-body text-sm md:text-base text-kv-white uppercase kv-shadow-text text-left whitespace-pre-line"
                >
                    {slides[currentIndex].text}
                </p>

                <!-- Page Indicator -->
                <div class="flex justify-center gap-2">
                    {#each slides as _, i}
                        <button
                            class="w-3 h-3 rounded-full border-2 border-kv-yellow transition-colors cursor-pointer {i ===
                            currentIndex
                                ? 'bg-kv-yellow'
                                : 'bg-transparent'}"
                            onclick={() => (currentIndex = i)}
                            aria-label="Go to slide {i + 1}"
                        ></button>
                    {/each}
                </div>
            {/if}
        </div>
    </div>
{/if}
