<template>
  <div
    v-if="show"
    class="rounded-input border p-4 text-sm"
    :class="blocked
      ? 'border-[#FECDCA] bg-clinical-danger-bg'
      : 'border-primary-100 bg-primary-50'"
    role="status"
    data-testid="sod-banner"
  >
    <template v-if="blocked">
      <p class="font-semibold text-clinical-danger">
        You cannot verify a batch you entered.
      </p>
      <p class="mt-1 text-ink-secondary">
        Separation of Duties requires a different verifier. Select another batch or ask a colleague to continue.
      </p>
    </template>
    <template v-else>
      <p class="font-semibold text-primary-800">Separation of Duties Enforced</p>
      <dl class="mt-2 grid gap-1 text-ink sm:grid-cols-2">
        <div>
          <dt class="text-xs text-ink-secondary">Entered by</dt>
          <dd class="font-medium">{{ enteredDisplay }}</dd>
        </div>
        <div>
          <dt class="text-xs text-ink-secondary">Current verifier</dt>
          <dd class="font-medium">{{ currentDisplay }}</dd>
        </div>
      </dl>
    </template>
  </div>
</template>

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

const props = defineProps<{
  enteredByUserId?: string | null
  enteredByUserName?: string | null
  currentUserId?: string | null
  currentUserName?: string | null
}>()

const emit = defineEmits<{
  (e: 'update:blocked', value: boolean): void
}>()

const show = computed(
  () => !!(props.enteredByUserId && props.currentUserId)
)

const blocked = computed(
  () =>
    show.value &&
    props.enteredByUserId === props.currentUserId
)

watch(
  blocked,
  (value) => emit('update:blocked', value),
  { immediate: true }
)

function displayUser(id: string | null | undefined, name?: string | null): string {
  if (name?.trim()) return name.trim()
  if (!id) return 'Unknown'
  return id.length > 8 ? `${id.substring(0, 8)}…` : id
}

const enteredDisplay = computed(() =>
  displayUser(props.enteredByUserId, props.enteredByUserName)
)
const currentDisplay = computed(() =>
  displayUser(props.currentUserId, props.currentUserName)
)
</script>
