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

const props = defineProps<{
  data: DomainInfo[]
}>()

const emit = defineEmits<{
  (e: 'hover', name: string): void
}>()

function getBadness(evaluation: number, max: number = 10) {
  return max - Math.floor(evaluation * max)
}

const badnessColors = ['okay', 'caution', 'destructive']

function getColor(badness: number = 0, max: number = 10) {
  const colorStep = max / badnessColors.length
  const idx = Math.floor((badness - 1) / colorStep)
  return badnessColors[idx]
}

function c(ev: number) {
  return getColor(getBadness(ev))
}

function getEval(domain: DomainInfo) {
  return domain.results.find(r => r.final)?.badness ?? 0
}
</script>

<template>
  <HList>
    <HListItem
      v-for="info in data"
      :key="info.domain_name + info.ip_address"
      class="domain-box"
      :class="[`holo-variable-color-${c(getEval(info))}`]"
      href="#"
      @mouseenter="emit('hover', String(info.domain_name))"
    >
      <div class="domain-box-top">
        <div class="domain">
          <div class="name">{{ info.domain_name }}</div>
          <div class="ip">{{ info.ip_address }}</div>
        </div>
        <div class="eval">{{ new Intl.NumberFormat().format(100 - getEval(info) * 100) }}&nbsp;%</div>
      </div>
      <div class="domain-box-badges">
        <HBadge
          v-show="info.offense_count > 0"
          class="domain-badge severe" 
          color="caution"
        >
          {{ info.offense_count }} offense{{ info.offense_count > 1 ? 's' : ''}}!
        </HBadge>
        <HBadge
          v-show="info.offense_count > 0"
          class="domain-badge severe" 
          color="caution"
        >
          {{ info.event_flow_count }} flow{{ info.event_flow_count > 1 ? 's' : ''}}
        </HBadge>
        <!-- <HBadge
          v-show="getEval(info) > 0.5 && info.offense_count == 0"
          hollow
          class="domain-badge" 
          :color="c(getEval(info))"
        >
          likely safe
        </HBadge> -->
        <!-- <HBadge
          v-show="info.Lexical < 0.1"
          class="domain-badge" 
          color="background"
        >
          suspicious name
        </HBadge>
        <HBadge
          v-show="info.Data < 0.1"
          class="domain-badge" 
          color="background"
        >
          poor evaluation
        </HBadge>
        <HBadge
          v-show="info.SVM < 0.1"
          class="domain-badge" 
          color="background"
        >
          poor SVM
        </HBadge> -->
        <HBadge
          v-show="!info.ip_addresses.some(ipr => ipr.geo_data)"
          class="domain-badge" 
          hollow
          color="foreground"
        >
          no geo data
        </HBadge>
      </div>
      <HMeter
        :steps="10" 
        :value="getBadness(getEval(info))"
        :colors="c(getEval(info))"
      />
    </HListItem>
  </HList>
</template>

<style>
.domain-box {
  background-color: hsl(var(--variable-color) / 25%);
  margin-block: 0.5em;
  transition: background-color 0.5s;
  overflow-x: hidden;
}

.domain-box .holo-list-item-content {
  width: 100%;
}


.domain-box-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block: 0.25em;
}

.domain {
  margin-block-end: 0.25em;
}

.name {
  font-weight: bold;
}

.ip {
  font-weight: lighter;
  font-family: monospace;
}

.eval {
  font-size: 0.8em;
}

.domain-box-badges {
  display: flex;
  margin-block-end: 0.5em;
}

.domain-badge {
  margin-inline-end: 0.5ch;
  white-space: nowrap;
}

.severe {
  font-weight: bold;
}

.domain-badge.severe {
  margin-inline-end: 1ch;
}
</style>