LokiStack/frontend/src/pages/users/components/LdapImportDialog.tsx

import { memo, useCallback, useEffect, useMemo, useState } from 'react'
import { Link } from 'react-router'
import { Users, RefreshCw } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { Checkbox } from '@/components/ui/checkbox'
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog'
import { ScrollArea } from '@/components/ui/scroll-area'
import { ldapApi, type LdapUserPreview, type LdapImportResult } from '@/api/ldap'
import { toast } from 'sonner'
import type { User } from '@/types'

interface LdapImportDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  /** 本地用户列表(用于标记已导入,禁选) */
  localUsers: User[]
  onImported: () => void
}

/**
 * 从 LDAP 导入用户弹窗 — 打开即拉取 LDAP 用户列表;
 * 已导入(LDAP 来源)置灰禁选;本地同名用户标注「将转为 LDAP」。
 */
export const LdapImportDialog = memo(function LdapImportDialog({
  open,
  onOpenChange,
  localUsers,
  onImported,
}: LdapImportDialogProps) {
  const [loading, setLoading] = useState(false)
  const [importing, setImporting] = useState(false)
  const [users, setUsers] = useState<LdapUserPreview[]>([])
  const [selected, setSelected] = useState<Set<string>>(new Set())
  const [result, setResult] = useState<LdapImportResult | null>(null)
  const [error, setError] = useState('')

  const localMap = useMemo(() => {
    const m = new Map<string, User>()
    localUsers.forEach((u) => m.set(u.username, u))
    return m
  }, [localUsers])

  const loadUsers = useCallback(async () => {
    setLoading(true)
    setError('')
    setResult(null)
    try {
      const list = await ldapApi.listUsers()
      setUsers(list)
      setSelected(new Set())
    } catch (err) {
      setError(err instanceof Error ? err.message : '加载 LDAP 用户失败')
    } finally {
      setLoading(false)
    }
  }, [])

  useEffect(() => {
    if (open) void loadUsers()
  }, [open, loadUsers])

  const toggle = (username: string, disabled: boolean) => {
    if (disabled) return
    setSelected((prev) => {
      const next = new Set(prev)
      if (next.has(username)) next.delete(username)
      else next.add(username)
      return next
    })
  }

  const handleImport = async () => {
    const picked = users.filter((u) => selected.has(u.username))
    if (picked.length === 0) return
    setImporting(true)
    try {
      const r = await ldapApi.batchImport(
        picked.map((u) => ({
          dn: u.dn, username: u.username, nickname: u.displayName, email: u.email,
        }))
      )
      setResult(r)
      onImported()
    } catch (err) {
      toast.error(err instanceof Error ? err.message : '导入失败')
    } finally {
      setImporting(false)
    }
  }

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-2xl">
        <DialogHeader>
          <DialogTitle>从 LDAP 导入用户</DialogTitle>
          <DialogDescription>
            来自 LDAP 目录的用户;导入后使用 LDAP 密码登录,角色为普通用户
          </DialogDescription>
        </DialogHeader>

        {result ? (
          <div className="space-y-3">
            <div className="flex items-center gap-4 text-sm">
              {result.successCount > 0 && (
                <span className="text-success">新增 {result.successCount}</span>
              )}
              {result.updatedCount > 0 && <span className="text-info">转为 LDAP {result.updatedCount}</span>}
              {result.skippedCount > 0 && <span className="text-muted-foreground">跳过 {result.skippedCount}</span>}
              {result.failedCount > 0 && <span className="text-destructive">失败 {result.failedCount}</span>}
            </div>
            {result.failedUsers.length > 0 && (
              <div className="text-xs text-destructive space-y-1 max-h-32 overflow-y-auto">
                {result.failedUsers.map((f) => (
                  <p key={f.username}>{f.username}:{f.error}</p>
                ))}
              </div>
            )}
            <div className="flex justify-end gap-2">
              <Button variant="outline" onClick={() => void loadUsers()}>继续导入</Button>
              <Button onClick={() => onOpenChange(false)}>完成</Button>
            </div>
          </div>
        ) : (
          <>
            <div className="flex items-center justify-between">
              <p className="text-xs text-muted-foreground">
                {loading ? '加载 LDAP 用户…' : `共 ${users.length} 个用户,已选 ${selected.size} 个`}
              </p>
              <Button variant="ghost" size="sm" onClick={() => void loadUsers()} disabled={loading}>
                <RefreshCw className={`w-3.5 h-3.5 ${loading ? 'animate-spin' : ''}`} />
              </Button>
            </div>
            {error ? (
              <div className="space-y-3">
                <p className="text-sm text-destructive">{error}</p>
                <p className="text-xs text-muted-foreground">
                  请到
                  <Link to="/settings" className="text-primary mx-1">系统设置</Link>
                  检查 LDAP 配置与启用状态
                </p>
              </div>
            ) : (
              <ScrollArea className="h-72 rounded-lg border border-border">
                <div className="divide-y divide-border">
                  {users.map((u) => {
                    const local = localMap.get(u.username)
                    const isLdapAlready = local?.['authSource'] === 'ldap'
                    const willConvert = !!local && !isLdapAlready
                    const disabled = isLdapAlready
                    const checked = selected.has(u.username)
                    return (
                      <label
                        key={u.dn}
                        className={`flex items-center gap-3 px-3 py-2.5 ${disabled ? 'opacity-50' : 'cursor-pointer hover:bg-muted/50'}`}
                      >
                        <Checkbox
                          checked={checked}
                          disabled={disabled}
                          onCheckedChange={() => toggle(u.username, disabled)}
                        />
                        <div className="flex-1 min-w-0">
                          <div className="flex items-center gap-2">
                            <span className="text-sm font-medium">{u.username}</span>
                            {isLdapAlready && (
                              <span className="text-xs text-muted-foreground">已导入</span>
                            )}
                            {willConvert && (
                              <span className="text-xs text-info">本地同名,将转为 LDAP</span>
                            )}
                          </div>
                          <p className="text-xs text-muted-foreground truncate">
                            {u.displayName || '无姓名'} · {u.email || '无邮箱'}
                          </p>
                        </div>
                      </label>
                    )
                  })}
                  {!loading && users.length === 0 && (
                    <div className="flex items-center justify-center gap-2 py-10 text-muted-foreground text-sm">
                      <Users className="w-4 h-4" /> 目录下没有用户
                    </div>
                  )}
                </div>
              </ScrollArea>
            )}
            <div className="flex justify-end gap-2">
              <Button variant="outline" onClick={() => onOpenChange(false)}>取消</Button>
              <Button onClick={handleImport} disabled={importing || selected.size === 0}>
                {importing ? '导入中...' : `导入 ${selected.size} 个用户`}
              </Button>
            </div>
          </>
        )}
      </DialogContent>
    </Dialog>
  )
})