<script setup>
import { usePipelineStore } from "@/stores/pipeline";

const store = usePipelineStore();

function localizedHealth(value) {
  if (value === "OK") return "ОК";
  if (value === "Warning") return "Предупреждение";
  if (value === "Risk") return "Риск";
  return value || "-";
}
</script>

<template>
  <section class="panel metrics-strip">
    <h3>Сводка</h3>
    <div class="row">
      <strong>Состояние: {{ localizedHealth(store.chainHealth) }}</strong>
      <span>Треугольники: {{ store.metrics.triangles }}</span>
      <span>Реконструкция, мс: {{ store.metrics.reconstructMs }}</span>
    </div>
    <p class="recommendation">{{ store.recommendation }}</p>
    <ul v-if="store.warningsList.length" class="warnings">
      <li v-for="(warning, index) in store.warningsList" :key="index">{{ warning }}</li>
    </ul>
    <table v-if="store.stageMetrics.length" class="metrics-table">
      <thead>
        <tr>
          <th>Этап</th>
          <th>Вход</th>
          <th>Выход</th>
          <th>Удалено</th>
          <th>мс</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="row in store.stageMetrics" :key="row.stageId">
          <td>{{ row.stageId }}</td>
          <td>{{ row.inputPoints }}</td>
          <td>{{ row.outputPoints }}</td>
          <td>{{ row.removedPoints }}</td>
          <td>{{ row.elapsedMs }}</td>
        </tr>
      </tbody>
    </table>
    <div class="summary-grid">
      <div>Вход: {{ store.metrics.inputPoints }}</div>
      <div>После preprocess: {{ store.metrics.afterPreprocess }}</div>
      <div>Кластеры: {{ store.metrics.clusters }}</div>
      <div>Удалено: {{ store.metrics.removedPoints }}</div>
    </div>
  </section>
</template>

<style scoped>
.metrics-strip h3 { margin: 0 0 8px; }
.row { display: flex; gap: 12px; flex-wrap: wrap; font-size: 13px; }
.recommendation { color: var(--summary-recommendation); font-size: 13px; }
.warnings { margin: 8px 0; padding-left: 18px; color: var(--warning-text); font-size: 13px; }
.metrics-table { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 8px; }
.metrics-table th, .metrics-table td { border-bottom: 1px solid var(--card-border); padding: 4px; text-align: left; }
.summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; font-size: 13px; color: var(--summary-secondary); }
</style>
