<script setup>
import { ref, computed } from 'vue'
import { useFeedbackStore } from '@/stores/feedback'

const props = defineProps({
  alertId: { type: String, required: true },
  alertType: { type: String, required: true },
  severity: { type: String, required: true },
})

const feedbackStore = useFeedbackStore()
const showNotes = ref(false)
const notes = ref('')

const existing = computed(() => feedbackStore.getFeedback(props.alertId))
const selectedRating = computed(() => existing.value?.rating ?? null)

const ratings = [
  { value: 'useful',           label: 'Useful',          color: 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300' },
  { value: 'too-early',        label: 'Too early',       color: 'bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-300' },
  { value: 'too-late',         label: 'Too late',        color: 'bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-300' },
  { value: 'false-positive',   label: 'False positive',  color: 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300' },
  { value: 'missing-context',  label: 'Missing context', color: 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300' },
  { value: 'would-act',        label: 'Would act',       color: 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300' },
]

function select(rating) {
  feedbackStore.addFeedback(props.alertId, props.alertType, props.severity, rating, notes.value)
}

function submitNotes() {
  if (selectedRating.value) {
    feedbackStore.addFeedback(props.alertId, props.alertType, props.severity, selectedRating.value, notes.value)
  }
  showNotes.value = false
}
</script>

<template>
  <div class="space-y-4">
    <div class="flex flex-wrap gap-2" role="radiogroup" aria-label="Rate this alert">
      <button
        v-for="r in ratings"
        :key="r.value"
        role="radio"
        :aria-checked="selectedRating === r.value"
        class="rounded-full px-4 py-2 text-xs font-medium transition duration-150 focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
        :class="[
          selectedRating === r.value ? r.color : 'bg-gray-100 text-gray-500 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700',
          selectedRating === r.value ? 'ring-2 ring-current' : '',
        ]"
        @click.stop="select(r.value)"
      >
        {{ r.label }}
      </button>

      <button
        v-if="selectedRating && !showNotes"
        class="rounded-full px-4 py-2 text-xs text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
        @click.stop="showNotes = true"
      >
        + Note
      </button>
    </div>

    <Transition name="slide">
      <div v-if="showNotes" class="flex flex-col gap-2 sm:flex-row">
        <input
          v-model.trim="notes"
          type="text"
          placeholder="Optional note..."
          class="min-w-0 flex-1 rounded border border-gray-300 px-4 py-2 text-xs dark:border-gray-600 dark:bg-gray-800 dark:text-white"
          @keydown.enter="submitNotes"
        />
        <button
          class="rounded bg-blue-500 px-4 py-2 text-xs text-white hover:bg-blue-600"
          @click.stop="submitNotes"
        >
          Save
        </button>
      </div>
    </Transition>
  </div>
</template>

<style scoped>
.slide-enter-active,
.slide-leave-active { transition: all 0.15s ease; }
.slide-enter-from,
.slide-leave-to { opacity: 0; transform: translateY(-8px); }
</style>