<script setup lang="ts">
import { computed, ref } from 'vue'
import type { KbxSuggestionCategory, KbxSuggestionContext, KbxSuggestionRequest } from '@kbx/contracts'

const props = defineProps<{
  context: KbxSuggestionContext
  submitting?: boolean
}>()

const emit = defineEmits<{
  submit: [request: KbxSuggestionRequest]
}>()

const category = ref<KbxSuggestionCategory>('inconvenience')
const message = ref('')
const includeScreenContext = ref(true)
const canSubmit = computed(() => message.value.trim().length >= 3 && !props.submitting)

function submit() {
  if (!canSubmit.value) return
  emit('submit', {
    category: category.value,
    message: message.value.trim(),
    includeScreenContext: includeScreenContext.value,
    context: props.context,
  })
}
</script>

<template>
  <section class="kbx-suggestion" aria-labelledby="kbx-suggestion-title">
    <h2 id="kbx-suggestion-title">이 화면에 의견 보내기</h2>
    <fieldset>
      <legend>의견 유형</legend>
      <label><input v-model="category" type="radio" value="inconvenience"> 불편해요</label>
      <label><input v-model="category" type="radio" value="bug"> 오류 같아요</label>
      <label><input v-model="category" type="radio" value="improvement"> 개선 제안</label>
    </fieldset>
    <label class="kbx-suggestion__message">
      <span>내용</span>
      <textarea v-model="message" rows="6" maxlength="2000" placeholder="어떤 작업에서 무엇이 불편했는지 적어주세요." />
    </label>
    <label class="kbx-suggestion__context">
      <input v-model="includeScreenContext" type="checkbox">
      현재 화면 정보 포함
    </label>
    <p class="kbx-suggestion__note">화면 ID·버전·역할·필터 같은 진단 정보만 포함하고 업무 원문 데이터는 기본 첨부하지 않습니다.</p>
    <button type="button" :disabled="!canSubmit" @click="submit">
      {{ submitting ? '보내는 중...' : '보내기' }}
    </button>
  </section>
</template>

<style scoped>
.kbx-suggestion { display:grid; gap:14px; padding:16px; font-size:14px; }
h2 { margin:0; font-size:18px; }
fieldset { display:flex; gap:16px; border:0; padding:0; margin:0; }
legend { margin-bottom:8px; font-weight:600; }
.kbx-suggestion__message { display:grid; gap:6px; }
textarea { resize:vertical; min-height:120px; padding:10px; border:1px solid var(--kbx-color-border); border-radius:var(--kbx-radius-sm); font:inherit; }
.kbx-suggestion__context { display:flex; gap:8px; align-items:center; }
.kbx-suggestion__note { margin:0; color:var(--kbx-color-text-muted); font-size:12px; line-height:1.45; }
button { justify-self:end; min-height:34px; padding:0 16px; border:1px solid var(--kbx-color-primary); border-radius:var(--kbx-radius-sm); background:var(--kbx-color-primary); color:white; font-weight:600; }
button:disabled { opacity:.45; cursor:not-allowed; }
</style>
