<script setup>
import { computed, ref } from 'vue'
import Card from '@/components/ui/Card.vue'
import Button from '@/components/ui/Button.vue'
import { formatDepartment } from '@/composables/sepsisFormat'
import {
  formatMonitoringDuration,
  tagChipClass,
  isControlTag,
  isRealDataTag,
} from '@/composables/simulationFormat'

const props = defineProps({
  scenario: { type: Object, required: true },
  atConcurrencyLimit: { type: Boolean, default: false },
  maxConcurrentRuns: { type: Number, default: 0 },
  selected: { type: Boolean, default: false },
  starting: { type: Boolean, default: false },
})

const emit = defineEmits(['start', 'select'])

const expanded = ref(false)

const description = computed(() => props.scenario.description?.trim() || '')
const canExpand = computed(() => description.value.length > 140)

const durationLabel = computed(() =>
  formatMonitoringDuration(props.scenario.durationMinutes),
)

const departmentLabel = computed(() =>
  formatDepartment(props.scenario.department),
)

const eventLabel = computed(() => {
  const n = props.scenario.eventCount ?? 0
  return `${n} event${n === 1 ? '' : 's'}`
})

const tags = computed(() => props.scenario.tags ?? [])

const showControlNote = computed(() => tags.value.some(isControlTag))
const showRealDataNote = computed(() => tags.value.some(isRealDataTag))

const startDisabled = computed(() =>
  props.atConcurrencyLimit || props.starting,
)

const disabledReason = computed(() => {
  if (props.atConcurrencyLimit) {
    const n = props.maxConcurrentRuns
    return n > 0
      ? `Concurrency limit reached (${n} run${n === 1 ? '' : 's'} max). Stop an active run first.`
      : 'Concurrency limit reached. Stop an active run first.'
  }
  return undefined
})

function onStart() {
  if (startDisabled.value) return
  emit('start', props.scenario.id)
}

function onSelect() {
  emit('select', props.scenario.id)
}
</script>

<template>
  <Card
    padding="md"
    class="flex h-full flex-col transition"
    :class="selected
      ? 'ring-2 ring-blue-500 dark:ring-blue-400'
      : 'hover:border-gray-300 dark:hover:border-gray-600'"
  >
    <div
      class="flex-1 cursor-pointer"
      role="button"
      tabindex="0"
      :aria-pressed="selected"
      @click="onSelect"
      @keydown.enter.prevent="onSelect"
      @keydown.space.prevent="onSelect"
    >
      <h3 class="text-base font-semibold text-gray-900 dark:text-white">
        {{ scenario.name }}
      </h3>

      <p
        v-if="description"
        class="mt-2 text-sm text-gray-600 dark:text-gray-400"
        :class="expanded ? '' : 'line-clamp-3'"
      >
        {{ description }}
      </p>
    </div>

    <button
      v-if="canExpand"
      type="button"
      class="mt-1 self-start text-xs font-medium text-blue-600 hover:underline dark:text-blue-400"
      @click="expanded = !expanded"
    >
      {{ expanded ? 'Show less' : 'Show more' }}
    </button>

    <div class="mt-3 flex flex-wrap gap-2">
      <span
        class="inline-flex items-center rounded-full bg-gray-100 px-2 py-1 text-xs font-medium text-gray-700 dark:bg-gray-800 dark:text-gray-300"
      >
        {{ durationLabel }}
      </span>
      <span
        class="inline-flex items-center rounded-full bg-gray-100 px-2 py-1 text-xs font-medium text-gray-700 dark:bg-gray-800 dark:text-gray-300"
      >
        {{ departmentLabel }}
      </span>
      <span
        class="inline-flex items-center rounded-full bg-gray-100 px-2 py-1 text-xs font-medium text-gray-700 dark:bg-gray-800 dark:text-gray-300"
      >
        {{ eventLabel }}
      </span>
    </div>

    <div v-if="tags.length" class="mt-3 flex flex-wrap gap-1.5">
      <span
        v-for="tag in tags"
        :key="tag"
        class="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium"
        :class="tagChipClass(tag)"
      >
        {{ tag }}
      </span>
    </div>

    <p
      v-if="showControlNote"
      class="mt-3 text-xs font-medium text-emerald-700 dark:text-emerald-300"
    >
      Control scenario — should stay quiet
    </p>
    <p
      v-if="showRealDataNote"
      class="mt-1 text-xs font-medium text-violet-700 dark:text-violet-300"
    >
      Real de-identified ICU record
    </p>

    <div class="mt-4 border-t border-gray-100 pt-4 dark:border-gray-800">
      <Button
        class="w-full"
        size="sm"
        :disabled="startDisabled"
        :title="disabledReason"
        @click="onStart"
      >
        Start
      </Button>
    </div>
  </Card>
</template>
