<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"
        ref="promptInput"
      />
      <div class="dialog-btn-row">
        <button v-if="dialogState.type !== 'alert'" class="dialog-btn-outline" @click="cancel">取消</button>
        <button class="dialog-btn-primary" @click="ok">确定</button>
      </div>
    </div>
  </div>
</template>

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

const inputValue = ref('')
const promptInput = ref(null)

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 submitPrompt() {
  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>
