<template>
  <div>
    <button
      @click="open = true"
      class="fixed bottom-6 right-6 w-12 h-12 rounded-full bg-accent text-white shadow-lg flex items-center justify-center text-xl hover:bg-blue-400 transition-colors z-50"
      aria-label="Quick diagnose"
      title="Quick diagnose"
    >⚡</button>

    <Teleport to="body">
      <div
        v-if="open"
        class="fixed inset-0 z-40 flex items-end justify-end pb-24 pr-6"
        @click.self="open = false"
      >
        <div class="bg-surface border border-surface-border rounded-xl shadow-xl p-4 w-80 space-y-3">
          <p class="text-text-dim text-xs">Describe what broke:</p>
          <input
            ref="inputRef"
            v-model="query"
            type="text"
            placeholder='e.g. "plex audio dropped around 2pm"'
            class="w-full bg-surface-raised border border-surface-border rounded px-3 py-2 text-sm text-text-primary placeholder-text-dim focus:outline-none focus:border-accent"
            @keydown.enter="submit"
            @keydown.esc="open = false"
          />
          <div class="flex gap-2 justify-end">
            <button @click="open = false" class="px-3 py-1.5 text-xs text-text-dim hover:text-text-primary">Cancel</button>
            <button
              :disabled="!query.trim()"
              @click="submit"
              class="px-4 py-1.5 rounded bg-accent text-white text-xs font-semibold hover:bg-blue-400 disabled:opacity-50"
            >Go</button>
          </div>
        </div>
      </div>
    </Teleport>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, nextTick } from 'vue'
import { useRouter } from 'vue-router'

const router   = useRouter()
const open     = ref(false)
const query    = ref('')
const inputRef = ref<HTMLInputElement | null>(null)

watch(open, (val) => {
  if (val) nextTick(() => inputRef.value?.focus())
})

function submit() {
  if (!query.value.trim()) return
  router.push({ path: '/diagnose', query: { q: query.value, tab: 'quick' } })
  query.value = ''
  open.value  = false
}
</script>
