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

    export let wallClock = "";
    export let playbackSeconds = 0;
    export let activeDrones = 0;
    export let isPlaying = false;
    export let tick = 0;
    export let totalSteps = 0;
    export let snapshotStatus = "";
    export let snapshot = [];
    export let desiredTime = "";

    const dispatch = createEventDispatcher();

    function formatDuration(sec) {
        const m = Math.floor(sec / 60)
            .toString()
            .padStart(2, "0");
        const s = Math.floor(sec % 60)
            .toString()
            .padStart(2, "0");
        return `${m}:${s}`;
    }
</script>

<div
    class="pointer-events-auto bg-white/70 dark:bg-slate-900/70 backdrop-blur-xl border border-slate-200 dark:border-slate-800 shadow-2xl flex flex-col gap-3 self-end row-start-2 col-start-2 m-6 ml-8 rounded-2xl p-4"
>
    <div class="flex gap-6">
        <div class="flex flex-col">
            <span class="text-xs uppercase text-slate-500 dark:text-slate-400"
                >Mission Time</span
            >
            <span
                class="font-mono text-xl font-bold text-slate-800 dark:text-slate-100"
                >{wallClock.split("T")[1].slice(0, 8)}</span
            >
        </div>
        <div class="flex flex-col">
            <span class="text-xs uppercase text-slate-500 dark:text-slate-400"
                >T+ Elapsed</span
            >
            <span
                class="font-mono text-xl font-bold text-slate-800 dark:text-slate-100"
                >{formatDuration(playbackSeconds)}</span
            >
        </div>
        <div class="flex flex-col">
            <span class="text-xs uppercase text-slate-500 dark:text-slate-400"
                >Active Drones</span
            >
            <span
                class="font-mono text-xl font-bold text-slate-800 dark:text-slate-100"
                >{snapshot.length ?? 0}</span
            >
        </div>
    </div>

    <div class="flex items-center gap-4">
        <button
            class="w-10 h-10 rounded-full flex items-center justify-center shrink-0 bg-slate-800 text-white dark:bg-slate-100 dark:text-slate-900 hover:bg-slate-900 dark:hover:bg-white transition-all disabled:opacity-50 disabled:cursor-not-allowed"
            on:click={() => dispatch('togglePlay')}
            disabled={totalSteps <= 1}
        >
            {#if isPlaying}
                <svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor"
                    ><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z" /></svg
                >
            {:else}
                <svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor"
                    ><path d="M8 5v14l11-7z" /></svg
                >
            {/if}
        </button>

        <input
            type="range"
            min="0"
            max={Math.max(totalSteps - 1, 0)}
            step="1"
            bind:value={tick}
            on:input={() => dispatch('seek')}
            class="w-full h-2 bg-slate-200 dark:bg-slate-700 rounded-full appearance-none"
            style="--thumb-color: {$theme === 'dark'
                ? '#f1f5f9'
                : '#1e293b'};"
        />

        <span
            class="font-mono text-sm min-w-[60px] text-right text-slate-600 dark:text-slate-400"
        >
            {Math.round((tick / (totalSteps - 1 || 1)) * 100)}%
        </span>
    </div>

    <div
        class="mt-2 pt-2 border-t border-slate-200 dark:border-slate-800 flex justify-between items-center"
    >
        <div
            class="text-xs text-slate-500 dark:text-slate-400 overflow-hidden whitespace-nowrap text-ellipsis max-w-[300px]"
        >
            {snapshotStatus || "Black Box Offline"}
        </div>
        <button
            class="px-3 py-1 text-xs font-semibold rounded-md transition-all text-slate-800 dark:text-slate-100 bg-slate-500/20 hover:bg-slate-500/30"
            on:click={() => dispatch('fetchSnapshot')}
        >
            FETCH SNAPSHOT
        </button>
    </div>

    <div class="flex items-center gap-3 text-xs mt-1">
        <label class="text-slate-500 dark:text-slate-400 uppercase tracking-wide"
            >Jump to Time</label
        >
        <input
            type="datetime-local"
            bind:value={desiredTime}
            class="bg-white/60 dark:bg-black/30 border border-slate-300 dark:border-slate-700 rounded-md px-2 py-1 font-mono text-xs text-slate-800 dark:text-slate-100 focus:outline-none focus:ring-2 focus:ring-sky-500/40 focus:border-sky-500"
            on:change={(e) => dispatch('setTime', e.target.value)}
        />
        <button
            class="px-3 py-1 text-xs font-semibold rounded-md transition-all text-slate-800 dark:text-slate-100 bg-sky-500/20 hover:bg-sky-500/30"
            on:click={() => dispatch('setTime', desiredTime)}
        >
            GO
        </button>
    </div>

    {#if snapshot.length > 0}
        <div class="flex flex-wrap gap-1.5 mt-2">
            {#each snapshot.slice(0, 3) as event}
                <div
                    class="text-xs px-2 py-0.5 rounded-full bg-slate-500/20 font-mono text-slate-600 dark:text-slate-300"
                >
                    Drone {event.droneId ?? event.drone_id ?? "?"} log found
                </div>
            {/each}
            {#if snapshot.length > 3}
                <div
                    class="text-xs px-2 py-0.5 rounded-full bg-slate-500/20 font-mono text-slate-600 dark:text-slate-300"
                >
                    +{snapshot.length - 3} more
                </div>
            {/if}
        </div>
    {/if}
</div>

<style>
    input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
        height: 18px;
        width: 18px;
        border-radius: 9999px;
        background-color: var(--thumb-color);
        margin-top: -7px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        cursor: pointer;
        transition: transform 0.1s;
    }
    input[type="range"]::-moz-range-thumb {
        height: 18px;
        width: 18px;
        border-radius: 9999px;
        background-color: var(--thumb-color);
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        cursor: pointer;
        transition: transform 0.1s;
    }
</style>
