<script setup lang="ts">
import { onMounted, onUnmounted, ref } from 'vue'
import { useI18n } from 'vue-i18n'
import type { RangeCode } from '@/types/overview'

defineProps<{ plant: string; range: RangeCode; sample: boolean; disconnected?: boolean }>()
const emit = defineEmits<{ (e: 'update:range', code: RangeCode): void }>()

const { t } = useI18n()
const RANGES: RangeCode[] = ['12h', '1d', '7d', '14d', '30d']

const clock = ref('')
let timer: ReturnType<typeof setInterval> | null = null
function tick() {
  clock.value = new Date().toLocaleTimeString('de-DE')
}
onMounted(() => {
  tick()
  timer = setInterval(tick, 1000)
})
onUnmounted(() => {
  if (timer) clearInterval(timer)
})
</script>

<template>
  <div class="bar">
    <span class="mark">{{ t('app.brand') }}</span>
    <span class="title">{{ plant }} · <b>{{ t('app.line') }}</b> · {{ t('app.subtitle') }}</span>
    <span v-if="sample" class="demo">{{ t('app.demo') }}</span>
    <span class="spacer"></span>
    <span v-if="disconnected" class="reconnect"><span class="spinner sm" aria-hidden="true"></span>{{ t('conn.reconnecting') }}</span>
    <span v-else class="live"><span class="led"></span>{{ t('app.live') }}</span>
    <span class="clock num">{{ clock }}</span>
    <span class="rangep" role="group" :aria-label="t('range.label')">
      <span class="rl">{{ t('range.label') }}</span>
      <button
        v-for="code in RANGES"
        :key="code"
        type="button"
        :aria-pressed="code === range"
        @click="emit('update:range', code)"
      >
        {{ code }}
      </button>
    </span>
  </div>
</template>

<style scoped>
.bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--panel), color-mix(in srgb, var(--panel) 70%, transparent));
  border-radius: var(--r);
  flex-wrap: wrap;
}
.mark {
  font-family: var(--mono);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.75rem;
  color: var(--ground);
  background: var(--way);
  padding: 5px 9px;
  border-radius: var(--r);
}
.title {
  font-weight: 650;
  font-size: 1rem;
}
.title b {
  color: var(--way);
}
.demo {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--oven);
  border: 1px solid color-mix(in srgb, var(--oven) 50%, transparent);
  border-radius: var(--r);
  padding: 2px 7px;
}
.spacer {
  margin-left: auto;
}
.live {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.led {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--run);
  animation: blink 2.4s ease-in-out infinite;
}
.reconnect {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--transit);
}
.clock {
  font-size: 0.95rem;
  color: var(--ink-dim);
}
.rangep {
  display: inline-flex;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  overflow: hidden;
}
.rl {
  align-self: center;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: 0 11px;
}
.rangep button {
  font-family: var(--mono);
  background: transparent;
  border: 0;
  border-left: 1px solid var(--line);
  color: var(--ink-dim);
  padding: 8px 13px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}
.rangep button:hover {
  background: var(--panel-3);
  color: var(--ink);
}
.rangep button[aria-pressed='true'] {
  background: var(--way);
  color: var(--ground);
}
</style>
