<template>
  <div v-if="dialogState.visible" class="dialog-overlay">
    <div class="dialog-box">
      <div class="dialog-msg">{{ dialogState.message }}</div>
      <input
        v-if="dialogState.type === 'prompt'"
        v-model="inputValue"
        type="text"
        style="width:100%;padding:10px 14px;border:1.5px solid #d4cfc7;border-radius:10px;font-size:14px;margin-bottom:16px;outline:none;font-family:inherit;box-sizing:border-box"
        @keydown.enter="submitPrompt"
        @compositionstart="isComposing = true"
        @compositionend="onCompositionEnd"
        ref="promptInput"
      />
      <div class="dialog-btn-row">
        <button v-if="dialogState.type !== 'alert'" class="dialog-btn-outline" @click="cancel">{{ dialogState.cancelText || '取消' }}</button>
        <button class="dialog-btn-primary" @click="ok">{{ dialogState.okText || '确定' }}</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, nextTick, shallowRef } from 'vue'
import { dialogState, closeDialog } from '../composables/useDialog'

const inputValue = ref('')
const promptInput = ref(null)
const isComposing = shallowRef(false)

watch(() => dialogState.visible, (v) => {
  if (v && dialogState.type === 'prompt') {
    inputValue.value = dialogState.defaultValue || ''
    nextTick(() => {
      promptInput.value?.focus()
      promptInput.value?.select()
    })
  }
})

function ok() {
  if (dialogState.type === 'alert') closeDialog()
  else if (dialogState.type === 'confirm') closeDialog(true)
  else closeDialog(inputValue.value)
}

function cancel() {
  if (dialogState.type === 'confirm') closeDialog(false)
  else closeDialog(null)
}

function onCompositionEnd(e) {
  isComposing.value = false
  // After compositionend, update the model value with the committed text
  inputValue.value = e.target.value
}

function submitPrompt(e) {
  // Ignore Enter during IME composition (e.g. Chinese input method confirming a character)
  if (e.isComposing || isComposing.value) return
  closeDialog(inputValue.value)
}
</script>

<style scoped>
.dialog-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dialog-box {
  background: #fff;
  border-radius: 16px;
  padding: 28px 24px 20px;
  min-width: 280px;
  max-width: 360px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
  text-align: center;
}

.dialog-msg {
  font-size: 15px;
  color: #3e3a44;
  margin-bottom: 18px;
  line-height: 1.6;
  white-space: pre-wrap;
}

.dialog-btn-row {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.dialog-btn-primary {
  background: linear-gradient(135deg, #7ec6a4 0%, #4a9d7e 100%);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 9px 28px;
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
}

.dialog-btn-primary:hover {
  opacity: 0.9;
}

.dialog-btn-outline {
  background: #fff;
  color: #6b6375;
  border: 1.5px solid #d4cfc7;
  border-radius: 10px;
  padding: 9px 28px;
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
}

.dialog-btn-outline:hover {
  background: #f8f7f5;
}
</style>
