<!--
  TemperOverviewPage.vue — the whole-line temper board (design #4 "Shop-floor
  Schematic", locked). One connected line: Pressen → (per-press amber ↓ arrows,
  only under presses with a cart on the way) → Ofen → (green ↓) → Fertig. Carts
  hang under their origin press; the oven & finished bands scroll horizontally.
  The time-range picker scopes ONLY the Fertig figures.

  Data comes from the store (GET …/api/overview, polled). With no backend the
  store falls back to bundled sample data, so `npm run dev` renders the design.
-->
<script setup lang="ts">
import { onMounted, onUnmounted } from 'vue'
import { storeToRefs } from 'pinia'
import { useI18n } from 'vue-i18n'
import OverviewHeader from '@/components/OverviewHeader.vue'
import FlowLegend from '@/components/FlowLegend.vue'
import KpiStrip from '@/components/KpiStrip.vue'
import ProductionLine from '@/components/ProductionLine.vue'
import { useTemperOverviewStore } from '@/stores/temperOverview'

const { t } = useI18n()
const store = useTemperOverviewStore()
const { payload, range, loading, hasData, usingSample } = storeToRefs(store)

onMounted(async () => {
  await store.hydrate()
  store.startPolling(12000)
})
onUnmounted(() => store.stopPolling())
</script>

<template>
  <div class="wrap">
    <template v-if="hasData && payload">
      <OverviewHeader
        :plant="payload.plant"
        :range="range"
        :sample="usingSample"
        @update:range="store.setRange"
      />
      <FlowLegend />
      <KpiStrip :payload="payload" />
      <ProductionLine :payload="payload" />
    </template>

    <div v-else-if="loading" class="state">{{ t('app.live') }} …</div>
  </div>
</template>

<style scoped>
.wrap {
  max-width: 1300px;
  margin: 0 auto;
  padding: 20px 22px 80px;
}
.state {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  color: var(--ink-dim);
  font-family: var(--mono);
}
</style>
