<script setup lang="ts">
import { store } from '../store'

const emit = defineEmits<{
    refresh: []
    freeze: []
    snap_to_live: []
}>()
</script>

<template>
    <div class="timeline_row" :class="{ frozen: store.is_frozen, historical: store.is_historical && !store.is_frozen }">
        <!-- NOTE: @input="store.timeline_position = Number(($event.target as HTMLInputElement).value)" is used for timeline position scrolling + link w/ map and data filters, it fires after a brief debounce -->
        <input
            type="range"
            class="timeline_slider"
            :min="store.timeline_min"
            :max="store.timeline_max"
            :value="store.timeline_position"
            @input="store.timeline_position = Number(($event.target as HTMLInputElement).value)"
            @change="store.is_live ? store.timeline_position = store.timeline_max : null"
            :disabled="store.is_frozen"
            :style="{ '--slider-color': store.is_frozen ? 'rgba(150, 220, 255, 1)' : store.is_historical ? 'rgba(200, 160, 100, 1)' : 'rgba(255, 100, 0, 1)' }"
        />

        <div class="interval_select" :class="{ frozen: store.is_frozen, historical: store.is_historical && !store.is_frozen }">
            <button class="tab_btn" :class="{ active: store.refresh_interval_seconds === 5 }" :disabled="store.is_frozen || store.is_historical" @click="store.refresh_interval_seconds = 5">5s</button>
            <button class="tab_btn" :class="{ active: store.refresh_interval_seconds === 30 }" :disabled="store.is_frozen || store.is_historical" @click="store.refresh_interval_seconds = 30">30s</button>
            <button class="tab_btn" :class="{ active: store.refresh_interval_seconds === 60 }" :disabled="store.is_frozen || store.is_historical" @click="store.refresh_interval_seconds = 60">60s</button>
        </div>

        <span class="timeline_label"
            :class="{ live: store.is_live && !store.is_frozen, frozen: store.is_frozen, historical: store.is_historical && !store.is_frozen }"
            @click="store.is_frozen ? emit('snap_to_live') : store.is_live ? emit('freeze') : emit('snap_to_live')"
        >
        {{ store.is_frozen ? 'FROZEN' : store.is_live ? `LIVE  ${store.live_countdown}s` : new Date(store.timeline_position).toLocaleString() }}
        <span v-if="store.is_frozen && store.frozen_at" class="frozen_since">
                since {{ new Date(store.frozen_at).toLocaleTimeString() }}
        </span>
            <span class="live_hint">{{ store.is_frozen ? 'LIVE' : store.is_live ? 'FREEZE' : 'LIVE' }}</span>
        </span>


        <button class="tab_btn refresh_btn" @click="emit('refresh')">↺</button>
    </div>
</template>

<style scoped>
.timeline_row {
    position: fixed;
    bottom: 10vh;
    left: 50%;
    transform: translateX(-50%);
    width: min(1280px, 100vw - 4rem);
    z-index: 1000;
    background: rgba(10, 10, 10, 0.85);
    padding: 0.6rem 1rem;
    border: 1px solid rgba(255, 100, 0, 0.2);
    border-radius: 6px;
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    gap: 1rem;
}

.frozen_since {
    display: block;
    font-size: 0.65rem;
    opacity: 0.6;
    margin-top: 0.1rem;
}


.timeline_row.historical { border-color: rgba(200, 160, 100, 0.2); }
.timeline_row.frozen { border-color: rgba(150, 220, 255, 0.2); }

.timeline_slider {
    flex: 1;
    accent-color: var(--slider-color, rgba(255, 100, 0, 1));
    cursor: pointer;
}

.timeline_slider:disabled {
    cursor: not-allowed;
    opacity: 0.7;
}

.interval_select {
    display: flex;
    gap: 0.3rem;
}

.interval_select.frozen .tab_btn,
.interval_select.historical .tab_btn {
    cursor: not-allowed;
    pointer-events: none;
}

.interval_select.frozen .tab_btn {
    border-color: rgba(150, 220, 255, 0.3);
    color: rgba(150, 220, 255, 0.4);
}

.interval_select.frozen .tab_btn.active {
    background-color: rgba(150, 220, 255, 0.08);
    border-color: rgba(150, 220, 255, 0.5);
    color: rgba(150, 220, 255, 0.6);
    box-shadow: 0 0 6px rgba(150, 220, 255, 0.2);
}

.interval_select.historical .tab_btn {
    border-color: rgba(200, 160, 100, 0.3);
    color: rgba(200, 160, 100, 0.4);
}

.interval_select.historical .tab_btn.active {
    background-color: rgba(200, 160, 100, 0.08);
    border-color: rgba(200, 160, 100, 0.5);
    color: rgba(200, 160, 100, 0.6);
    box-shadow: 0 0 6px rgba(200, 160, 100, 0.2);
}

.timeline_label {
    font-size: 0.8rem;
    color: rgba(255, 100, 0, 0.6);
    white-space: nowrap;
    min-width: 160px;
    min-height: 2.4rem;
    text-align: center;
    position: relative;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
}

.timeline_label.live {
    color: rgba(255, 100, 0, 1);
    text-shadow: 0 0 6px rgba(255, 100, 0, 0.6);
}

.timeline_label.frozen {
    color: rgba(150, 220, 255, 1);
    text-shadow: 0 0 8px rgba(150, 220, 255, 0.7), 0 0 20px rgba(100, 180, 255, 0.3);
}

.timeline_label.historical {
    color: rgba(200, 160, 100, 0.8);
}

.live_hint {
    opacity: 0;
    pointer-events: none;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease;
}

.timeline_label:not(.live):not(.frozen):hover .live_hint {
    opacity: 1;
    color: rgba(255, 255, 255, 0.25);
}

.timeline_label:not(.live):not(.frozen):hover {
    display: flex;
    color: transparent;
}

.timeline_label.live:hover .live_hint {
    opacity: 1;
    color: rgba(150, 220, 255, 0.6);
}

.timeline_label.live:hover {
    color: transparent;
    text-shadow: none;
}

.timeline_label.frozen:hover .live_hint {
    opacity: 1;
    color: rgba(255, 100, 0, 0.8);
}

.timeline_label.frozen:hover {
    color: transparent;
    text-shadow: none;
}

.refresh_btn {
    padding: 0.4rem 0.6rem;
    font-size: 1rem;
    line-height: 1;
}

.refresh_btn:hover {
    color: rgba(255, 100, 0, 1);
    border-color: rgba(255, 100, 0, 1);
    box-shadow: 0 0 6px rgba(255, 100, 0, 0.4);
}
</style>
