<template>
  <div class="report-card">
    <div v-if="statEntries.length" class="report-stats">
      <div v-for="item in statEntries" :key="item.key" class="report-stat">
        <div class="report-stat-value">{{ item.value }}</div>
        <div class="report-stat-label">{{ item.label }}</div>
      </div>
    </div>

    <ul v-if="activeUserLines.length && !plainBody" class="report-active-users">
      <li v-for="(line, idx) in activeUserLines" :key="idx">{{ line }}</li>
    </ul>

    <div v-if="htmlContent" class="report-body-html" v-html="htmlContent" />

    <pre v-else-if="plainBody" class="report-body-plain">{{ plainBody }}</pre>

    <p v-else-if="summary && summary !== 'Отчёт за сутки'" class="report-fallback">{{ summary }}</p>

    <p v-else class="report-empty">
      Полный текст отчёта не сохранён (старая версия агента). Обновите агент и дождитесь следующего
      ежедневного отчёта.
    </p>
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";
import {
  reportActiveUserLines,
  normalizeReportPlainText,
  reportBodyFromDetails,
  reportHtmlFromDetails,
  reportStatEntries,
  reportStatsFromDetails,
  sanitizeAgentHtml,
} from "../utils/reportDisplay";

const props = defineProps<{
  type: string;
  summary: string;
  details: Record<string, unknown> | null;
}>();

const stats = computed(() => reportStatsFromDetails(props.details, props.type));
const statEntries = computed(() => reportStatEntries(stats.value, props.type));
const activeUserLines = computed(() => reportActiveUserLines(stats.value, props.type));

const htmlContent = computed(() => {
  const raw = reportHtmlFromDetails(props.details);
  return raw ? sanitizeAgentHtml(raw) : null;
});

const plainBody = computed(() => {
  const raw = reportBodyFromDetails(props.details);
  return raw ? normalizeReportPlainText(raw) : null;
});
</script>
