<script setup lang="ts">
import { ref, watch, nextTick } from "vue";

const props = withDefaults(
  defineProps<{
    show: boolean;
    title: string;
    message?: string;
    placeholder?: string;
    modelValue?: string;
    confirmText?: string;
    cancelText?: string;
  }>(),
  {
    message: "",
    placeholder: "",
    modelValue: "",
    confirmText: "确认",
    cancelText: "取消",
  },
);

const emit = defineEmits<{
  confirm: [value: string];
  cancel: [];
}>();

const inputValue = ref(props.modelValue);
const inputRef = ref<HTMLInputElement | null>(null);

// Reset and auto-focus when dialog opens
watch(
  () => props.show,
  async (visible) => {
    if (visible) {
      inputValue.value = props.modelValue;
      await nextTick();
      inputRef.value?.focus();
      inputRef.value?.select();
    }
  },
);

function onSubmit() {
  const trimmed = inputValue.value.trim();
  if (trimmed) {
    emit("confirm", trimmed);
  }
}

function onKeydown(e: KeyboardEvent) {
  if (e.key === "Enter") {
    e.preventDefault();
    onSubmit();
  } else if (e.key === "Escape") {
    emit("cancel");
  }
}
</script>

<template>
  <Teleport to="body">
    <div
      v-if="show"
      class="prompt-overlay"
      role="presentation"
      @click.self="emit('cancel')"
    >
      <section
        class="prompt-shell"
        role="dialog"
        aria-modal="true"
        :aria-label="title"
      >
        <header class="prompt-header">
          <h2>{{ title }}</h2>
        </header>

        <div class="prompt-body">
          <p v-if="message" class="prompt-message">{{ message }}</p>
          <input
            ref="inputRef"
            v-model="inputValue"
            class="prompt-input"
            type="text"
            :placeholder="placeholder"
            @keydown="onKeydown"
          />
        </div>

        <footer class="prompt-footer">
          <button
            class="prompt-btn prompt-btn-cancel"
            type="button"
            @click="emit('cancel')"
          >
            {{ cancelText }}
          </button>
          <button
            class="prompt-btn prompt-btn-primary"
            type="button"
            :disabled="!inputValue.trim()"
            @click="onSubmit"
          >
            {{ confirmText }}
          </button>
        </footer>
      </section>
    </div>
  </Teleport>
</template>

<style scoped>
.prompt-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background: var(--app-overlay);
  backdrop-filter: blur(8px);
}

.prompt-shell {
  width: min(380px, calc(100vw - 48px));
  overflow: hidden;
  border: 1px solid var(--app-border-strong);
  border-radius: 12px;
  background: var(--app-surface);
  box-shadow:
    0 24px 70px var(--app-shadow),
    0 2px 10px color-mix(in srgb, var(--app-shadow) 46%, transparent);
}

.prompt-header {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 20px;
  border-bottom: 1px solid var(--app-border);
}

.prompt-header h2 {
  margin: 0;
  color: var(--app-text);
  font-size: 14px;
  font-weight: 700;
}

.prompt-body {
  padding: 20px;
}

.prompt-message {
  margin: 0 0 14px;
  color: var(--app-text-soft);
  font-size: 13px;
  line-height: 1.6;
}

.prompt-input {
  display: block;
  width: 100%;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--app-border-strong);
  border-radius: 8px;
  background: var(--app-surface-muted);
  color: var(--app-text);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
  box-sizing: border-box;
}

.prompt-input::placeholder {
  color: var(--app-subtle);
}

.prompt-input:focus {
  border-color: var(--app-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-accent) 12%, transparent);
}

.prompt-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--app-border);
  background: var(--app-panel-bg);
}

.prompt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  height: 32px;
  padding: 0 16px;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    opacity 0.15s ease;
}

.prompt-btn-cancel {
  background: var(--app-hover);
  color: var(--app-text-soft);
}

.prompt-btn-cancel:hover {
  background: var(--app-border);
  color: var(--app-text);
}

.prompt-btn-primary {
  background: var(--app-accent);
  color: #fff;
}

.prompt-btn-primary:hover:not(:disabled) {
  opacity: 0.88;
}

.prompt-btn-primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
</style>
