<script>
    import { createEventDispatcher } from "svelte";
    import { theme } from "../stores.js";

    export let open = true;
    export let status = "";
    export let loading = false;

    // Configuration Bindings
    export let apiBase = "";
    export let blackBoxBase = "";
    export let startTime = "";
    export let dispatchBody = "";
    export let stepSeconds = 1;

    let configOpen = false;

    const dispatch = createEventDispatcher();

    function toggleTheme() {
        theme.update((t) => (t === "dark" ? "light" : "dark"));
    }
</script>

<aside
    class="absolute top-0 left-0 bottom-0 w-[380px] pointer-events-auto bg-white/80 dark:bg-slate-900/80 backdrop-blur-xl border border-slate-200 dark:border-slate-800 shadow-2xl flex flex-col m-4 rounded-2xl p-5 gap-5 transition-transform duration-500 ease-in-out {open
        ? 'translate-x-0'
        : '-translate-x-[120%]'}"
>
    <div class="flex items-center justify-between">
        <h1
            class="text-xl font-bold text-slate-800 dark:text-slate-100 flex items-center gap-2"
        >
            <span
                class="block w-2 h-2 bg-sky-500 rounded-full shadow-[0_0_10px_theme(colors.sky.500)]"
            ></span>
            Drone Explorer
        </h1>
        <div class="flex items-center gap-1">
            <button
                on:click={toggleTheme}
                class="p-2 rounded-lg text-slate-500 hover:text-sky-500 hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors"
                aria-label="Toggle Theme"
            >
                {#if $theme === "dark"}
                    <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="20"
                        height="20"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="2"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        ><path
                            d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"
                        ></path></svg
                    >
                {:else}
                    <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="20"
                        height="20"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="2"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        ><circle cx="12" cy="12" r="5"></circle><line
                            x1="12"
                            y1="1"
                            x2="12"
                            y2="3"
                        ></line><line x1="12" y1="21" x2="12" y2="23"
                        ></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"
                        ></line><line
                            x1="18.36"
                            y1="18.36"
                            x2="19.78"
                            y2="19.78"
                        ></line><line x1="1" y1="12" x2="3" y2="12"></line><line
                            x1="21"
                            y1="12"
                            x2="23"
                            y2="12"
                        ></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"
                        ></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"
                        ></line></svg
                    >
                {/if}
            </button>
            <button
                on:click={() => dispatch("close")}
                class="p-2 rounded-lg text-slate-500 hover:text-sky-500 hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors"
                aria-label="Close Sidebar"
            >
                <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="20"
                    height="20"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    ><line x1="18" y1="6" x2="6" y2="18"></line><line
                        x1="6"
                        y1="6"
                        x2="18"
                        y2="18"
                    ></line></svg
                >
            </button>
        </div>
    </div>

    <div
        class="space-y-3 overflow-y-auto pr-1 custom-scrollbar flex-1 flex flex-col"
    >
        <div class="border-b border-slate-200 dark:border-slate-800 pb-2">
            <button
                class="w-full flex items-center justify-between text-sm font-semibold tracking-wider uppercase text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200 transition-colors focus:outline-none"
                on:click={() => (configOpen = !configOpen)}
            >
                <span>Configuration</span>
                <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    class="transform transition-transform duration-300 {configOpen
                        ? 'rotate-180'
                        : ''}"
                    ><polyline points="6 9 12 15 18 9"></polyline></svg
                >
            </button>

            {#if configOpen}
                <div class="mt-3 space-y-3">
                    <div>
                        <label
                            for="stepSeconds"
                            class="block text-xs text-slate-600 dark:text-slate-400 mb-1"
                            >Seconds per Step</label
                        >
                        <input
                            id="stepSeconds"
                            type="number"
                            min="1"
                            step="1"
                            bind:value={stepSeconds}
                            class="w-full bg-white/50 dark:bg-black/30 border border-slate-300 dark:border-slate-700 text-slate-800 dark:text-slate-100 p-2 rounded-lg font-mono text-xs transition-all focus:outline-none focus:border-sky-500 focus:bg-white dark:focus:bg-black/50 focus:ring-2 focus:ring-sky-500/20"
                        />
                    </div>
                    <div>
                        <label
                            for="api"
                            class="block text-xs text-slate-600 dark:text-slate-400 mb-1"
                            >Planner API Endpoint (Debug Only)</label
                        >
                        <input
                            id="api"
                            type="text"
                            bind:value={apiBase}
                            placeholder="/api"
                            class="w-full bg-white/50 dark:bg-black/30 border border-slate-300 dark:border-slate-700 text-slate-800 dark:text-slate-100 p-2 rounded-lg font-mono text-xs transition-all focus:outline-none focus:border-sky-500 focus:bg-white dark:focus:bg-black/50 focus:ring-2 focus:ring-sky-500/20"
                        />
                    </div>

                    <div>
                        <label
                            for="bb"
                            class="block text-xs text-slate-600 dark:text-slate-400 mb-1"
                            >Black Box API Endpoint</label
                        >
                        <input
                            id="bb"
                            type="text"
                            bind:value={blackBoxBase}
                            placeholder="/snapshot"
                            class="w-full bg-white/50 dark:bg-black/30 border border-slate-300 dark:border-slate-700 text-slate-800 dark:text-slate-100 p-2 rounded-lg font-mono text-xs transition-all focus:outline-none focus:border-sky-500 focus:bg-white dark:focus:bg-black/50 focus:ring-2 focus:ring-sky-500/20"
                        />
                    </div>

                    <div>
                        <label
                            for="startTime"
                            class="block text-xs text-slate-600 dark:text-slate-400 mb-1"
                            >Mission Start Time</label
                        >
                        <input
                            id="startTime"
                            type="datetime-local"
                            bind:value={startTime}
                            class="w-full bg-white/50 dark:bg-black/30 border border-slate-300 dark:border-slate-700 text-slate-800 dark:text-slate-100 p-2 rounded-lg font-mono text-xs transition-all focus:outline-none focus:border-sky-500 focus:bg-white dark:focus:bg-black/50 focus:ring-2 focus:ring-sky-500/20"
                        />
                    </div>
                </div>
            {/if}
        </div>

    </div>
</aside>
