'use client'

import type { User } from '../types'
import { useThemeStyles, cn } from '@/lib/ui-styles'
import Modal from '@/components/ui/Modal'

interface TransferSuperAdminModalProps {
  isOpen: boolean
  targetUser: User | null
  password: string
  onClose: () => void
  onChangePassword: (value: string) => void
  onConfirm: () => void
}

export default function TransferSuperAdminModal({
  isOpen,
  targetUser,
  password,
  onClose,
  onChangePassword,
  onConfirm,
}: TransferSuperAdminModalProps) {
  const styles = useThemeStyles()
  if (!isOpen || !targetUser) return null

  return (
    <Modal
      isOpen={isOpen}
      onClose={onClose}
      title="转移最高权限"
      size="small"
      footer={
        <div className="flex justify-end gap-3">
          <button
            type="button"
            onClick={onClose}
            className={cn(
              styles.buttonStyles.secondary,
              'bg-white dark:bg-slate-800 border-slate-300 dark:border-slate-600 text-slate-700 dark:text-slate-200'
            )}
          >
            取消
          </button>
          <button
            type="button"
            onClick={onConfirm}
            className={cn(styles.buttonStyles.primary)}
          >
            确认转移
          </button>
        </div>
      }
    >
      <div className="space-y-4">
        <p className="text-sm text-slate-500 dark:text-slate-400">请输入您的密码以确认此操作</p>
        <div className="bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg p-3 text-sm text-amber-800 dark:text-amber-100">
          <strong>警告：</strong>转移给 <strong>{targetUser.username}</strong>（{targetUser.email}）后，当前账号将失去最高权限。
        </div>
        <div className="space-y-2">
          <label className="text-sm font-medium text-slate-700 dark:text-slate-300">密码</label>
          <input
            type="password"
            value={password}
            onChange={(e) => onChangePassword(e.target.value)}
            onKeyDown={(e) => {
              if (e.key === 'Enter') {
                onConfirm()
              }
            }}
            className={styles.inputStyles.base}
            placeholder="请输入您的密码"
          />
        </div>
      </div>
    </Modal>
  )
}