'use client'

import type { User } from '../types'
import { buttonStyles, cn, inputStyles } from '@/lib/ui-styles'

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) {
  if (!isOpen || !targetUser) return null

  return (
    <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
      <div className="bg-white dark:bg-slate-800 rounded-2xl shadow-2xl max-w-md w-full border border-slate-200/70 dark:border-slate-700/80">
        <div className="px-6 py-4 border-b border-slate-200 dark:border-slate-700">
          <h3 className="text-lg font-semibold text-slate-900 dark:text-white">转移最高权限</h3>
          <p className="text-sm text-slate-500 dark:text-slate-400 mt-1">请输入您的密码以确认此操作</p>
        </div>
        <div className="p-6 space-y-4">
          <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={inputStyles.base}
              placeholder="请输入您的密码"
            />
          </div>
        </div>
        <div className="px-6 py-4 border-t border-slate-200 dark:border-slate-700 flex justify-end gap-3">
          <button type="button" onClick={onClose} className={cn(buttonStyles.ghost)}>
            取消
          </button>
          <button type="button" onClick={onConfirm} className={cn(buttonStyles.primary)}>
            确认转移
          </button>
        </div>
      </div>
    </div>
  )
}