import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@/components/ui/dialog';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import {
  ChevronDown,
  Users,
  Key,
  RefreshCw,
  Plus,
  UserPlus,
  Download,
  Edit,
  Trash2,
  Loader2,
} from 'lucide-react';

interface LdapManagementSectionProps {
  ldapConfig: any;
  ldapMgmtOpen: boolean;
  setLdapMgmtOpen: (v: boolean) => void;
  ldapOUs: any[];
  selectedOUDN: string;
  setSelectedOUDN: (v: string) => void;
  ldapUsers: any[];
  selectedLDAPUsers: string[];
  setSelectedLDAPUsers: (v: string[]) => void;
  loadLdapOUs: () => void;
  loadLdapOUUsers: (ouDn?: string) => void;
  handleLdapImport: () => void;
  importing: boolean;
  importFeedback: string | null;
  importResultOpen: boolean;
  setImportResultOpen: (v: boolean) => void;
  // Create OU
  createOUOpen: boolean;
  setCreateOUOpen: (v: boolean) => void;
  ouForm: { ou_name: string; parent_dn: string; description: string };
  setOuForm: React.Dispatch<React.SetStateAction<{ ou_name: string; parent_dn: string; description: string }>>;
  handleCreateOU: () => void;
  ldapSaving: boolean;
  // Create LDAP user
  createUserOpen: boolean;
  setCreateUserOpen: (v: boolean) => void;
  newUser: { username: string; password: string; display_name: string; email: string; ou_dn: string };
  setNewUser: React.Dispatch<React.SetStateAction<{ username: string; password: string; display_name: string; email: string; ou_dn: string }>>;
  handleCreateLDAPUser: () => void;
  // LDAP user test
  ldapUserTestOpen: boolean;
  setLdapUserTestOpen: (v: boolean) => void;
  ldapTestUser: string;
  setLdapTestUser: (v: string) => void;
  ldapTestPass: string;
  setLdapTestPass: (v: string) => void;
  ldapUserTesting: boolean;
  ldapUserTestResult: any;
  handleLdapUserTest: () => void;
  // Edit LDAP user
  editLdapUser: any | null;
  setEditLdapUser: (u: any | null) => void;
  editLdapForm: { cn: string; mail: string; phone: string; title: string };
  setEditLdapForm: React.Dispatch<React.SetStateAction<{ cn: string; mail: string; phone: string; title: string }>>;
  handleUpdateLdapUser: () => void;
  handleDeleteLDAPEntry: (dn: string, silent?: boolean) => void;
  openEditLdapUser: (user: any) => void;
}

export function LdapManagementSection(props: LdapManagementSectionProps) {
  const {
    ldapConfig,
    ldapMgmtOpen,
    setLdapMgmtOpen,
    ldapOUs,
    selectedOUDN,
    setSelectedOUDN,
    ldapUsers,
    selectedLDAPUsers,
    setSelectedLDAPUsers,
    loadLdapOUs,
    loadLdapOUUsers,
    handleLdapImport,
    importing,
    importFeedback,
    importResultOpen,
    setImportResultOpen,
    createOUOpen,
    setCreateOUOpen,
    ouForm,
    setOuForm,
    handleCreateOU,
    ldapSaving,
    createUserOpen,
    setCreateUserOpen,
    newUser,
    setNewUser,
    handleCreateLDAPUser,
    ldapUserTestOpen,
    setLdapUserTestOpen,
    ldapTestUser,
    setLdapTestUser,
    ldapTestPass,
    setLdapTestPass,
    ldapUserTesting,
    ldapUserTestResult,
    handleLdapUserTest,
    editLdapUser,
    setEditLdapUser,
    editLdapForm,
    setEditLdapForm,
    handleUpdateLdapUser,
    handleDeleteLDAPEntry,
    openEditLdapUser,
  } = props;

  return (
    <>
      {/* 折叠/展开按钮 */}
      <button
        onClick={() => {
          const open = !ldapMgmtOpen;
          setLdapMgmtOpen(open);
          if (open && ldapOUs.length === 0) loadLdapOUs();
        }}
        className="w-full flex items-center gap-2 px-4 py-2.5 bg-slate-900/50 hover:bg-slate-800/50 text-slate-400 text-sm transition-colors"
      >
        <ChevronDown className={`h-4 w-4 transition-transform ${ldapMgmtOpen ? '' : '-rotate-90'}`} />
        <Users className="h-4 w-4 text-amber-400" />
        <span className="text-slate-300">LDAP 账号管理</span>
      </button>

      {ldapMgmtOpen && (
        <div className="bg-slate-900/30 border-t border-slate-800/50 px-4 py-4 space-y-4">
          <div className="flex items-center gap-3 flex-wrap">
            {/* 账号验证测试 */}
            <Dialog open={ldapUserTestOpen} onOpenChange={setLdapUserTestOpen}>
              <DialogTrigger asChild>
                <Button variant="ghost" size="sm" className="text-slate-400 hover:text-slate-200">
                  <Key className="h-3.5 w-3.5 mr-1" />
                  账号验证
                </Button>
              </DialogTrigger>
              <DialogContent className="max-w-md bg-slate-900 border-slate-800">
                <DialogHeader>
                  <DialogTitle className="text-slate-100">LDAP 账号验证测试</DialogTitle>
                  <DialogDescription className="text-slate-500">输入 LDAP 用户凭据进行认证测试</DialogDescription>
                </DialogHeader>
                <div className="space-y-3 py-2">
                  <div>
                    <label className="text-xs text-slate-500 mb-1 block">用户名</label>
                    <Input
                      value={ldapTestUser}
                      onChange={(e) => setLdapTestUser(e.target.value)}
                      placeholder="zhangsan"
                      className="bg-slate-800/50 border-slate-700 text-slate-200 placeholder:text-slate-600"
                    />
                  </div>
                  <div>
                    <label className="text-xs text-slate-500 mb-1 block">密码</label>
                    <Input
                      type="password"
                      value={ldapTestPass}
                      onChange={(e) => setLdapTestPass(e.target.value)}
                      onKeyDown={(e) => e.key === 'Enter' && handleLdapUserTest()}
                      placeholder="••••••"
                      className="bg-slate-800/50 border-slate-700 text-slate-200 placeholder:text-slate-600"
                    />
                  </div>
                  {ldapUserTestResult && (
                    <div className={`p-3 rounded-lg text-sm ${ldapUserTestResult.success ? 'bg-emerald-500/10 text-emerald-300' : 'bg-red-500/10 text-red-300'}`}>
                      {ldapUserTestResult.message}
                      {ldapUserTestResult.user_info && (
                        <pre className="mt-2 text-xs whitespace-pre-wrap">{JSON.stringify(ldapUserTestResult.user_info, null, 2)}</pre>
                      )}
                    </div>
                  )}
                  <Button
                    className="w-full bg-blue-600 hover:bg-blue-700 text-white"
                    onClick={handleLdapUserTest}
                    disabled={ldapUserTesting || !ldapTestUser}
                  >
                    {ldapUserTesting ? <Loader2 className="h-4 w-4 mr-1.5 animate-spin" /> : null}
                    验证
                  </Button>
                </div>
              </DialogContent>
            </Dialog>

            <Button variant="ghost" size="sm" className="text-slate-400 hover:text-slate-200" onClick={loadLdapOUs}>
              <RefreshCw className="h-3.5 w-3.5 mr-1" />
              刷新
            </Button>

            {/* OU 选择 */}
            <Select value={selectedOUDN} onValueChange={(v) => { setSelectedOUDN(v); loadLdapOUUsers(v); }}>
              <SelectTrigger className="w-60 h-7 bg-slate-800 border-slate-700 text-slate-200 text-xs">
                <SelectValue placeholder="选择组织单元" />
              </SelectTrigger>
              <SelectContent className="bg-slate-800 border-slate-700">
                <SelectItem value={ldapConfig.base_dn}>根 ({ldapConfig.base_dn})</SelectItem>
                {ldapOUs.map((ou: any) => (
                  <SelectItem key={ou.dn} value={ou.dn}>
                    {ou.description ? `${ou.name} (${ou.description})` : ou.name}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>

            {/* 新建 OU */}
            <Dialog open={createOUOpen} onOpenChange={setCreateOUOpen}>
              <DialogTrigger asChild>
                <Button variant="ghost" size="sm" className="text-slate-400 hover:text-slate-200">
                  <Plus className="h-3.5 w-3.5 mr-1" />
                  新建 OU
                </Button>
              </DialogTrigger>
              <DialogContent className="max-w-md bg-slate-900 border-slate-800">
                <DialogHeader>
                  <DialogTitle className="text-slate-100">新建组织单元</DialogTitle>
                  <DialogDescription className="text-slate-500">在 LDAP 目录中创建新的组织单元 (OU)</DialogDescription>
                </DialogHeader>
                <div className="space-y-3 py-2">
                  <div>
                    <label className="text-xs text-slate-500 mb-1 block">OU 名称 *</label>
                    <Input value={ouForm.ou_name} onChange={(e) => setOuForm({ ...ouForm, ou_name: e.target.value })} placeholder="dev" className="bg-slate-800/50 border-slate-700 text-slate-200" />
                  </div>
                  <div>
                    <label className="text-xs text-slate-500 mb-1 block">父级 DN</label>
                    <Input value={ouForm.parent_dn} onChange={(e) => setOuForm({ ...ouForm, parent_dn: e.target.value })} placeholder={ldapConfig.base_dn} className="bg-slate-800/50 border-slate-700 text-slate-200" />
                  </div>
                  <div>
                    <label className="text-xs text-slate-500 mb-1 block">描述</label>
                    <Input value={ouForm.description} onChange={(e) => setOuForm({ ...ouForm, description: e.target.value })} placeholder="开发团队" className="bg-slate-800/50 border-slate-700 text-slate-200" />
                  </div>
                  <Button className="w-full bg-blue-600 hover:bg-blue-700 text-white" onClick={handleCreateOU} disabled={!ouForm.ou_name || ldapSaving}>
                    {ldapSaving ? <Loader2 className="h-4 w-4 mr-1.5 animate-spin" /> : null}
                    创建
                  </Button>
                </div>
              </DialogContent>
            </Dialog>

            {/* 添加用户 */}
            <Dialog open={createUserOpen} onOpenChange={setCreateUserOpen}>
              <DialogTrigger asChild>
                <Button variant="ghost" size="sm" className="text-slate-400 hover:text-slate-200">
                  <UserPlus className="h-3.5 w-3.5 mr-1" />
                  添加用户
                </Button>
              </DialogTrigger>
              <DialogContent className="max-w-md bg-slate-900 border-slate-800">
                <DialogHeader>
                  <DialogTitle className="text-slate-100">添加 LDAP 用户</DialogTitle>
                  <DialogDescription className="text-slate-500">在 LDAP 目录中创建新的用户账号</DialogDescription>
                </DialogHeader>
                <div className="space-y-3 py-2">
                  <div>
                    <label className="text-xs text-slate-500 mb-1 block">用户名 *</label>
                    <Input value={newUser.username} onChange={(e) => setNewUser({ ...newUser, username: e.target.value })} placeholder="zhangsan" className="bg-slate-800/50 border-slate-700 text-slate-200" />
                  </div>
                  <div>
                    <label className="text-xs text-slate-500 mb-1 block">密码 *</label>
                    <Input type="password" value={newUser.password} onChange={(e) => setNewUser({ ...newUser, password: e.target.value })} placeholder="••••••" className="bg-slate-800/50 border-slate-700 text-slate-200" />
                  </div>
                  <div>
                    <label className="text-xs text-slate-500 mb-1 block">显示名称</label>
                    <Input value={newUser.display_name} onChange={(e) => setNewUser({ ...newUser, display_name: e.target.value })} placeholder="张三" className="bg-slate-800/50 border-slate-700 text-slate-200" />
                  </div>
                  <div>
                    <label className="text-xs text-slate-500 mb-1 block">邮箱</label>
                    <Input value={newUser.email} onChange={(e) => setNewUser({ ...newUser, email: e.target.value })} placeholder="zs@example.com" className="bg-slate-800/50 border-slate-700 text-slate-200" />
                  </div>
                  <div>
                    <label className="text-xs text-slate-500 mb-1 block">目标 OU</label>
                    <Input value={newUser.ou_dn || selectedOUDN || ldapConfig.base_dn} onChange={(e) => setNewUser({ ...newUser, ou_dn: e.target.value })} className="bg-slate-800/50 border-slate-700 text-slate-200" />
                  </div>
                  <Button className="w-full bg-blue-600 hover:bg-blue-700 text-white" onClick={handleCreateLDAPUser} disabled={!newUser.username || !newUser.password || ldapSaving}>
                    {ldapSaving ? <Loader2 className="h-4 w-4 mr-1.5 animate-spin" /> : null}
                    创建
                  </Button>
                </div>
              </DialogContent>
            </Dialog>

            {/* 导入到本地 */}
            <Button
              variant="outline"
              size="sm"
              className="border-blue-600/50 text-blue-400 hover:bg-blue-600/10 ml-auto"
              onClick={handleLdapImport}
              disabled={ldapUsers.length === 0 || importing}
            >
              {importing ? <Loader2 className="h-3.5 w-3.5 mr-1 animate-spin" /> : <Download className="h-3.5 w-3.5 mr-1" />}
              {selectedLDAPUsers.length > 0 ? `导入 (${selectedLDAPUsers.length})` : `导入全部 (${ldapUsers.length})`}
            </Button>
          </div>

          {importFeedback && (
            <Dialog open={importResultOpen} onOpenChange={setImportResultOpen}>
              <DialogContent className="max-w-sm bg-slate-900 border-slate-800">
                <DialogHeader>
                  <DialogTitle className="text-slate-100">导入结果</DialogTitle>
                  <DialogDescription className="text-slate-500">LDAP 用户导入到本地用户库的执行结果</DialogDescription>
                </DialogHeader>
                <div className="py-3 text-sm text-slate-300">
                  {importFeedback}
                </div>
                <Button className="w-full bg-blue-600 hover:bg-blue-700 text-white" onClick={() => setImportResultOpen(false)}>
                  确定
                </Button>
              </DialogContent>
            </Dialog>
          )}

          {/* 用户表格 */}
          <div className="border border-slate-800 rounded-lg overflow-hidden">
            <Table>
              <TableHeader>
                <TableRow className="border-slate-800 hover:bg-transparent">
                  <TableHead className="text-slate-400 w-8">
                    <input
                      type="checkbox"
                      className="rounded bg-slate-800 border-slate-600"
                      checked={selectedLDAPUsers.length > 0 && selectedLDAPUsers.length === ldapUsers.length}
                      onChange={(e) => setSelectedLDAPUsers(e.target.checked ? ldapUsers.map((u: any) => u.dn) : [])}
                    />
                  </TableHead>
                  <TableHead className="text-slate-400">用户名</TableHead>
                  <TableHead className="text-slate-400">显示名称</TableHead>
                  <TableHead className="text-slate-400">邮箱</TableHead>
                  <TableHead className="text-slate-400">DN</TableHead>
                  <TableHead className="text-slate-400 w-12">操作</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {ldapUsers.length === 0 ? (
                  <TableRow className="border-slate-800">
                    <TableCell colSpan={6} className="text-center text-slate-500 py-8">
                      点击「刷新」加载 LDAP 用户
                    </TableCell>
                  </TableRow>
                ) : (
                  ldapUsers.map((user: any) => (
                    <TableRow key={user.dn} className="border-slate-800 hover:bg-slate-800/50">
                      <TableCell>
                        <input
                          type="checkbox"
                          className="rounded bg-slate-800 border-slate-600"
                          checked={selectedLDAPUsers.includes(user.dn)}
                          onChange={(e) => {
                            if (e.target.checked) setSelectedLDAPUsers([...selectedLDAPUsers, user.dn]);
                            else setSelectedLDAPUsers(selectedLDAPUsers.filter((d: string) => d !== user.dn));
                          }}
                        />
                      </TableCell>
                      <TableCell>
                        <span className="text-sm text-slate-200 font-medium">{user.uid}</span>
                      </TableCell>
                      <TableCell>
                        <span className="text-sm text-slate-300">{user.cn}</span>
                      </TableCell>
                      <TableCell>
                        <span className="text-sm text-slate-400">{user.mail || '-'}</span>
                      </TableCell>
                      <TableCell>
                        <code className="text-xs text-slate-500">{user.dn}</code>
                      </TableCell>
                      <TableCell>
                        <div className="flex items-center gap-1">
                          <Button
                            variant="ghost"
                            size="icon"
                            className="h-6 w-6 text-slate-400 hover:text-blue-400 hover:bg-blue-500/10"
                            onClick={() => openEditLdapUser(user)}
                          >
                            <Edit className="h-3 w-3" />
                          </Button>
                          <Button
                            variant="ghost"
                            size="icon"
                            className="h-6 w-6 text-red-400 hover:text-red-300 hover:bg-red-500/10"
                            onClick={() => handleDeleteLDAPEntry(user.dn)}
                          >
                            <Trash2 className="h-3 w-3" />
                          </Button>
                        </div>
                      </TableCell>
                    </TableRow>
                  ))
                )}
              </TableBody>
            </Table>
          </div>
        </div>
      )}

      {/* 编辑 LDAP 用户 Dialog */}
      <Dialog open={!!editLdapUser} onOpenChange={(v) => !v && setEditLdapUser(null)}>
        <DialogContent className="max-w-md bg-slate-900 border-slate-800">
          <DialogHeader>
            <DialogTitle className="text-slate-100 flex items-center gap-2">
              <Edit className="h-5 w-5 text-blue-400" />
              编辑 LDAP 用户
            </DialogTitle>
            <DialogDescription className="text-slate-500">
              修改 {editLdapUser?.uid} 的属性
            </DialogDescription>
          </DialogHeader>
          {editLdapUser && (
            <div className="space-y-3 py-2">
              <div>
                <label className="text-xs text-slate-500 mb-1 block">用户名（只读）</label>
                <Input value={editLdapUser.uid || ''} disabled className="bg-slate-800/50 border-slate-700 text-slate-500" />
              </div>
              <div>
                <label className="text-xs text-slate-500 mb-1 block">显示名称 (cn)</label>
                <Input value={editLdapForm.cn} onChange={(e) => setEditLdapForm({ ...editLdapForm, cn: e.target.value })} className="bg-slate-800/50 border-slate-700 text-slate-200" />
              </div>
              <div>
                <label className="text-xs text-slate-500 mb-1 block">邮箱</label>
                <Input value={editLdapForm.mail} onChange={(e) => setEditLdapForm({ ...editLdapForm, mail: e.target.value })} placeholder="user@example.com" className="bg-slate-800/50 border-slate-700 text-slate-200" />
              </div>
              <div>
                <label className="text-xs text-slate-500 mb-1 block">电话</label>
                <Input value={editLdapForm.phone} onChange={(e) => setEditLdapForm({ ...editLdapForm, phone: e.target.value })} placeholder="13800138000" className="bg-slate-800/50 border-slate-700 text-slate-200" />
              </div>
              <div>
                <label className="text-xs text-slate-500 mb-1 block">职位/头衔</label>
                <Input value={editLdapForm.title} onChange={(e) => setEditLdapForm({ ...editLdapForm, title: e.target.value })} placeholder="运维工程师" className="bg-slate-800/50 border-slate-700 text-slate-200" />
              </div>
            </div>
          )}
          <DialogFooter>
            <Button variant="outline" className="border-slate-700 text-slate-300" onClick={() => setEditLdapUser(null)}>取消</Button>
            <Button className="bg-blue-600 hover:bg-blue-700 text-white" onClick={handleUpdateLdapUser}>保存</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </>
  );
}