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

/**
 * 新建组织单元(OU)弹框
 * 填写 OU 名称 / 父级 DN / 描述后调用后端创建
 * 表单状态由页面持有(关闭不重置,仅创建成功后重置),与原页面行为一致
 */
import { FolderOpen } from 'lucide-react';
import { ModalOverlay } from '@/components/ModalOverlay';
import type { CreateOuFormState, OuItem } from '../types';

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

export function LdapCreateOuDialog({
  form,
  onFormChange,
  ouList,
  baseDn,
  creating,
  onClose,
  onConfirm,
}: LdapCreateOuDialogProps) {
  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">
            <FolderOpen className="w-4 h-4 text-blue-400" />
            <h3 className="text-sm font-semibold text-[var(--dg-text-primary)]">新建组织单元 (OU)</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">OU 名称 *</label>
            <input
              value={form.name}
              onChange={e => onFormChange({ name: 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="如: devops, engineering"
            />
          </div>
          <div>
            <label className="text-xs text-[var(--dg-text-muted)] mb-1 block">父级 DN</label>
            <select
              value={form.parent}
              onChange={e => onFormChange({ parent: 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.dn}</option>)}
            </select>
          </div>
          <div>
            <label className="text-xs text-[var(--dg-text-muted)] mb-1 block">描述</label>
            <input
              value={form.desc}
              onChange={e => onFormChange({ desc: 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 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={creating || !form.name.trim()}
            className="px-4 py-2 text-sm font-medium rounded-lg bg-blue-500 text-white hover:bg-blue-600 disabled:opacity-50 transition-colors"
          >
            {creating ? '创建中…' : '创建 OU'}
          </button>
        </div>
      </div>
    </ModalOverlay>
  );
}