<script setup lang="ts">
import { computed } from 'vue'

import { useSystemStore } from '@/stores/system'
import { useDomainsStore } from '@/stores/domains'
const ds = useDomainsStore()
const sys = useSystemStore()

const props = withDefaults(defineProps<{
  operation?: 'loading' | 'resolution' | 'analysis'
  show?: boolean
}>(), {
  operation: undefined
})

const op = computed(() => {
  switch (props.operation) {
    case 'loading': return sys.loading
    case 'resolution': return sys.resolution
    case 'analysis': return sys.analysis
    default: return undefined
  }
})

// @TODO move this somewhere more sensible
const desc = computed(() => {
  switch (props.operation) {
    case 'loading': return 'Loads data from your SIEM for further processing.'
    case 'resolution': return 'Resolves external data for analysing loaded domains.'
    case 'analysis': return 'Analyzes loaded domains for suspicious activity. Results from this step are shown in the list.'
    default: return ''
  }
})

function nice(k: string) {
  return k.replace(/_/g, ' ')
}
</script>

<template>
  <div class="system-status operation-status" v-show="props.show && props.operation && !sys.anyRunning">
    <h3 class="operation-title">{{ props.operation ?? 'idklol' }}</h3>
    <p class="operation-desc">{{ desc }}</p>
    <div class="error" v-if="op?.results.last_result?.error_description && op?.results.last_result?.error_description !== ''">
      <h4>Errors</h4>
      <p class="operation-error-desc holo-variable-color-destructive">{{op.results.last_result.error_description}}</p>
    </div>
    <div class="result" v-if="op?.results.last_result">
      <h4>Last result</h4>
      <!-- Temporary disgusting solution -->
      <ul style="padding-inline-start:1em;font-size:0.9em;margin-block:0.5em">
        <li
          v-for="[k, v] in Object.entries(op.results.last_result).filter(([k,v]) => k !== 'success' && k !== 'error_description' && v != null && v !== '')"
          :key="k"
          style="text-transform:capitalize"
        >
          {{nice(k)}}: {{v}}
        </li>
      </ul>
    </div>
    <div class="nothing holo-variable-color-caution" v-else>
      No results yet. Click to trigger.
    </div>
  </div>
</template>

<style>
.operation-status {
  position: absolute;
  top: 5em;
  border: 2px solid hsl(var(--foreground));
  box-shadow: 0 3em 10em 5em hsl(var(--bg10));
  margin-block-end: 0.5em;
  flex-direction: column;
  align-items: flex-start;
  z-index: 999;
  overflow-wrap: anywhere;
}

.operation-status h4 {
  margin-block: 0;
}

.operation-title {
  text-transform: capitalize;
  margin-block: 0 0.25rem;
}

.operation-desc {
  margin-block: 0.5em;
  font-size: 0.9em;
}

.nothing {
  color: hsl(var(--caution));
}

.operation-error-desc {
  margin-block: 0.5em;
  font-size: 0.9em;
  color: hsl(var(--destructive));
}
</style>