flnxi-Wu/components/ui/PromptDialog.tsx

'use client'

import { useState, useEffect, useRef } from 'react'
import Modal from './Modal'
import { useThemeStyles } from '@/lib/ui-styles'

interface PromptDialogProps {
  isOpen: boolean
  onClose: () => void
  onConfirm: (value: string) => void
  title: string
  message: string
  defaultValue?: string
  placeholder?: string
  confirmText?: string
  cancelText?: string
}

export default function PromptDialog({
  isOpen,
  onClose,
  onConfirm,
  title,
  message,
  defaultValue = '',
  placeholder = '',
  confirmText = '确认',
  cancelText = '取消',
}: PromptDialogProps) {
  const styles = useThemeStyles()
  const [value, setValue] = useState(defaultValue)
  const inputRef = useRef<HTMLInputElement>(null)

  useEffect(() => {
    if (isOpen) {
      setValue(defaultValue)
      // 延迟聚焦，确保弹窗已渲染
      setTimeout(() => {
        inputRef.current?.focus()
        inputRef.current?.select()
      }, 100)
    }
  }, [isOpen, defaultValue])

  const handleConfirm = () => {
    if (value.trim()) {
      onConfirm(value.trim())
      onClose()
    }
  }

  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter') {
      handleConfirm()
    } else if (e.key === 'Escape') {
      onClose()
    }
  }

  return (
    <Modal
      isOpen={isOpen}
      onClose={onClose}
      title={title}
      size="small"
      footer={
        <>
          <button
            type="button"
            onClick={onClose}
            className={`${styles.buttonStyles.secondary} ${styles.buttonModifiers.compact}`}
          >
            {cancelText}
          </button>
          <button
            type="button"
            onClick={handleConfirm}
            disabled={!value.trim()}
            className={`${styles.buttonStyles.primary} ${styles.buttonModifiers.compact}`}
          >
            {confirmText}
          </button>
        </>
      }
    >
      <div className="py-2 space-y-3">
        <p className="text-slate-700 dark:text-slate-200 whitespace-pre-line">{message}</p>
        <input
          ref={inputRef}
          type="text"
          value={value}
          onChange={(e) => setValue(e.target.value)}
          onKeyDown={handleKeyDown}
          placeholder={placeholder}
          className={styles.inputStyles.base}
        />
      </div>
    </Modal>
  )
}