<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { get_request } from '../ajax_requests'
import { store } from '../store'

const stats = ref(null)
const countdown_alarm = ref(0)
const countdown_incident = ref(0)
let poll_interval: ReturnType<typeof setInterval> | null = null
let tick_interval: ReturnType<typeof setInterval> | null = null

// FIXME: I don't know if i need this type of check in two spots? I also check in the timeline intervals. 
//          Possibly worth having in case I add a "non simulation mode"?
const fetch_status = async () => {
    try {
        const data = await get_request('/api/v1/simulator/status')
        stats.value = data
        countdown_alarm.value = Math.max(0, Math.round(data.next_alarm_cleanup_at - Date.now() / 1000))
        countdown_incident.value = Math.max(0, Math.round(data.next_incident_cleanup_at - Date.now() / 1000))
        if (store.server_unreachable) {
            store.server_unreachable = false
            store.unfreeze()
        }
    } catch (e) {
        console.error('SimulationBanner fetch failed:', e)
        store.server_unreachable = true
        store.freeze()
        if (poll_interval) { clearInterval(poll_interval); poll_interval = null }
        if (tick_interval) { clearInterval(tick_interval); tick_interval = null }
        if (!poll_interval) {
            poll_interval = setInterval(fetch_status, 10000)
        }
    }
}

const fmt = (s: number) => {
    const m = Math.floor(s / 60)
    const sec = s % 60
    return m > 0 ? `${m}m ${sec}s` : `${sec}s`
}

onMounted(async () => {
    await fetch_status()
    poll_interval = setInterval(fetch_status, 30000)
    tick_interval = setInterval(() => {
        if (countdown_alarm.value > 0) countdown_alarm.value--
        if (countdown_incident.value > 0) countdown_incident.value--
        if (countdown_alarm.value === 0 || countdown_incident.value === 0) fetch_status()
    }, 1000)

})

onUnmounted(() => {
    if (poll_interval) clearInterval(poll_interval)
    if (tick_interval) clearInterval(tick_interval)
})
</script>

<template>
    <div v-if="store.server_unreachable" class="unreachable_banner">
        SERVER UNREACHABLE — polling paused
    </div>
    <div class="sim_banner" v-if="stats">
        <span class="sim_dot">●</span>
        <span class="sim_label">SIMULATION ACTIVE</span>
        <span class="sim_stat">{{ stats.alarm_count }} alarms</span>
        <span class="sim_divider">|</span>
        <span class="sim_stat">{{ stats.incident_count }} incidents</span>
        <span class="sim_divider">|</span>
        <span class="sim_stat">alarm reset in <span class="sim_countdown">{{ fmt(countdown_alarm) }}</span></span>
        <span class="sim_divider">|</span>
        <span class="sim_stat">incident reset in <span class="sim_countdown">{{ fmt(countdown_incident) }}</span></span>
    </div>
</template>

<style scoped>
.sim_banner {
    width: 100%;
    background: rgba(10, 10, 10, 0.9);
    border-bottom: 1px solid rgba(255, 100, 0, 0.15);
    padding: 0.3rem 2rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.35);
    margin-bottom: 1rem;
}

.sim_dot {
    color: rgba(100, 220, 100, 0.8);
    font-size: 0.6rem;
}

.sim_label {
    color: rgba(100, 220, 100, 0.6);
    letter-spacing: 0.08em;
}

.sim_divider {
    opacity: 0.2;
}

.sim_countdown {
    color: rgba(255, 255, 255, 0.6);
}
.unreachable_banner {
    width: 100%;
    background: rgba(220, 30, 30, 0.15);
    border-bottom: 1px solid rgba(220, 30, 30, 0.4);
    padding: 0.3rem 2rem;
    font-size: 0.72rem;
    color: rgba(220, 30, 30, 0.9);
    text-align: center;
}
</style>
