<script setup lang="ts">
import { computed } from 'vue'
import { ModelResult } from '@/types/api/domain'

import BadnessMeter from './BadnessMeter.vue'

const props = withDefaults(defineProps<{
  result: ModelResult
  decimals?: number
}>(), {
  decimals: 2
})

const badness = computed(() => {
  const result = props.result
  return (result?.badness ?? 0) * 100
})

const accuracy = computed(() => {
  const result = props.result
  return (result?.accuracy ?? 0) * 100
})

const date = computed(() => {
  const result = props.result
  return new Date(result?.created).toLocaleString()
})

function round(value: number) {
  return Math.round(value * 10 ** props.decimals) / 10 ** props.decimals
}
</script>

<template>
  <div
    class="classifier-result"
    :class="{ errored: result.error_description.length > 0, final: result.final }"
  >
    <div class="fsb">
      <div class="model-name">
        {{ result.classifier_name }}
      </div>
      <div class="result-date">on {{ date }}</div>
    </div>
    <ul class="explanation" v-if="result.explanation.length > 0">
      <li v-for="expl in result.explanation">{{ expl }}</li>
    </ul>
    <p class="error" v-if="result.error_description.length > 0">{{ result.error_description }}</p>
    <div class="result-visual">
      <BadnessMeter :key="result.badness" :badness="badness" />
      <div class="fsb result-stats">
        <div class="badness-stat">Badness coeff. <strong>{{ round(badness) }}%</strong></div>
        <div class="confidence-stat">{{ round(accuracy) }}% confident</div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.classifier-result {
  position: relative;
  background-color: hsl(var(--bg10));
  padding: 1em;
  margin-block-end: 1em;
}

.classifier-result.final {
  background-color: hsl(var(--bg20));
}

.classifier-result:not(.final)::after,
.classifier-result:not(.final)::before {
  content: '';
  position: absolute;
  display: block;
  height: 1em;
  width: 1em;
  border-radius: 1em;
}
.classifier-result:first-of-type::before {
  display: none;
}
.classifier-result:not(.final)::before {
  background-color: hsl(var(--bg0));
  top: -0.6em;
}
.classifier-result:not(.final)::after {
  background-color: hsl(var(--bg10));
  bottom: -0.4em;
}
.classifier-result:nth-last-of-type(2)::after {
  display: none;
}

.model-name {
  font-size: 1.25em;
  font-weight: bold;
  text-transform: capitalize;
}

.result-date {
  font-size: 0.8em;
}

.result-visual {
  margin-block-start: 0.5em;
}

.result-stats {
  margin-block-start: 0.25em;
}

.confidence-stat {
  font-size: 0.9em;
}
</style>
