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

const props = defineProps({
  alertId: { type: String, required: true },
  alertType: { type: String, required: true },
  severity: { type: String, required: true },
  /** Feedback only allowed after acknowledgement (backend enforces). */
  canSubmit: { type: Boolean, default: true },
})

const alertQuality = useAlertQualityStore()
const showNotes = ref(false)
const notes = ref('')
const submitting = ref(false)
const submitError = ref(null)

const existing = computed(() => alertQuality.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' },
]

async function select(rating) {
  if (!props.canSubmit || submitting.value || selectedRating.value) return
  submitting.value = true
  submitError.value = null
  try {
    await alertQuality.submitFeedback(props.alertId, rating, notes.value)
  } catch (e) {
    submitError.value = e.message
  } finally {
    submitting.value = false
  }
}

async function submitNotes() {
  if (!selectedRating.value) return
  submitting.value = true
  submitError.value = null
  try {
    await alertQuality.submitFeedback(props.alertId, selectedRating.value, notes.value)
    showNotes.value = false
  } catch (e) {
    submitError.value = e.message
  } finally {
    submitting.value = false
  }
}
</script>

<template>
  <div class="space-y-4">
    <p v-if="!canSubmit" class="text-xs text-gray-400 dark:text-gray-500">
      Acknowledge this alert to rate it.
    </p>

    <div v-else 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"
        :disabled="submitting || !!selectedRating"
        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 disabled:opacity-50"
        :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>

    <p v-if="submitError" class="text-xs text-red-600 dark:text-red-400">{{ submitError }}</p>

    <Transition name="slide">
      <div v-if="showNotes && canSubmit" 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 disabled:opacity-50"
          :disabled="submitting"
          @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>