opsxsql/frontend/src/features/system/ldap/components/LdapAddUserDialog.tsx

/**
 * 添加 LDAP 用户弹框
 * 填写用户名 / 密码 / 显示名称 / 邮箱与目标 OU 后创建 LDAP 用户
 * 表单状态由页面持有(关闭不重置,仅创建成功后重置),与原页面行为一致
 */
import { UserPlus } from 'lucide-react';
import { ModalOverlay } from '@/components/ModalOverlay';
import type { AddUserFormState, OuItem } from '../types';

interface LdapAddUserDialogProps {
  form: AddUserFormState;
  onFormChange: (patch: Partial<AddUserFormState>) => void;
  ouList: OuItem[];
  baseDn: string;
  adding: boolean;
  onClose: () => void;
  onConfirm: () => void;
}

export function LdapAddUserDialog({
  form,
  onFormChange,
  ouList,
  baseDn,
  adding,
  onClose,
  onConfirm,
}: LdapAddUserDialogProps) {
  return (
    <ModalOverlay open={true} onClose={onClose} width="max-w-md">
      <div className="w-full bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] rounded-xl p-5 shadow-xl">
        <div className="flex items-center justify-between mb-4">
          <div className="flex items-center gap-2">
            <UserPlus className="w-4 h-4 text-emerald-400" />
            <h3 className="text-sm font-semibold text-[var(--dg-text-primary)]">添加用户到 LDAP</h3>
          </div>
          <button onClick={onClose} className="text-[var(--dg-text-muted)] hover:text-[var(--dg-text-primary)] transition-colors">✕</button>
        </div>
        <div className="space-y-3 mb-4">
          <div>
            <label className="text-xs text-[var(--dg-text-muted)] mb-1 block">用户名 *</label>
            <input
              value={form.username}
              onChange={e => onFormChange({ username: e.target.value })}
              className="w-full px-3 py-2 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm focus:outline-none focus:border-blue-400 transition-colors"
              placeholder="登录名，如 zhangsan"
            />
          </div>
          <div>
            <label className="text-xs text-[var(--dg-text-muted)] mb-1 block">密码 *</label>
            <input
              type="password"
              value={form.password}
              onChange={e => onFormChange({ password: e.target.value })}
              className="w-full px-3 py-2 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm focus:outline-none focus:border-blue-400 transition-colors"
              placeholder="初始密码"
            />
          </div>
          <div className="grid grid-cols-2 gap-3">
            <div>
              <label className="text-xs text-[var(--dg-text-muted)] mb-1 block">显示名称</label>
              <input
                value={form.displayName}
                onChange={e => onFormChange({ displayName: e.target.value })}
                className="w-full px-3 py-2 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm focus:outline-none focus:border-blue-400 transition-colors"
                placeholder="如: 张三"
              />
            </div>
            <div>
              <label className="text-xs text-[var(--dg-text-muted)] mb-1 block">邮箱</label>
              <input
                value={form.email}
                onChange={e => onFormChange({ email: e.target.value })}
                className="w-full px-3 py-2 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm focus:outline-none focus:border-blue-400 transition-colors"
                placeholder="可选"
              />
            </div>
          </div>
          <div>
            <label className="text-xs text-[var(--dg-text-muted)] mb-1 block">目标 OU</label>
            <select
              value={form.ouDn}
              onChange={e => onFormChange({ ouDn: e.target.value })}
              className="w-full px-3 py-2 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm focus:outline-none focus:border-blue-400 transition-colors"
            >
              <option value="">根: {baseDn}</option>
              {ouList.map(ou => <option key={ou.dn} value={ou.dn}>{ou.name} ({ou.dn})</option>)}
            </select>
          </div>
        </div>
        <div className="flex justify-end gap-2">
          <button onClick={onClose} className="px-4 py-2 text-sm text-[var(--dg-text-muted)] hover:text-[var(--dg-text-primary)] transition-colors">取消</button>
          <button
            onClick={onConfirm}
            disabled={adding || !form.username.trim() || !form.password.trim()}
            className="flex items-center gap-1.5 px-4 py-2 text-sm font-medium rounded-lg bg-emerald-500 text-white hover:bg-emerald-600 disabled:opacity-50 transition-colors"
          >
            <UserPlus className="w-3.5 h-3.5" />
            {adding ? '创建中…' : '创建用户'}
          </button>
        </div>
      </div>
    </ModalOverlay>
  );
}