import { Card, CardContent } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Badge } from '@/components/ui/badge';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import {
  Search,
  Plus,
  Upload,
  Network,
  Mail,
  Phone,
  CheckCircle,
  XCircle,
  Eye,
  Edit,
  Trash2,
  Download,
  Key,
  Loader2,
  RefreshCw,
  User as UserIcon,
} from 'lucide-react';
import { userApi } from '@/services/api';
import { UserFormDialog, type UserFormData } from './UserFormDialog';

interface SystemUserTabProps {
  // Search
  searchQuery: string;
  setSearchQuery: (v: string) => void;
  // Users
  filteredUsers: any[];
  loading: boolean;
  selectedUser: any | null;
  setSelectedUser: (u: any | null) => void;
  getUserStatusBadge: (status: 'active' | 'inactive') => React.ReactNode;
  // Create / Edit
  dialogOpen: boolean;
  setDialogOpen: (open: boolean) => void;
  editingUser: any | null;
  form: UserFormData;
  setForm: React.Dispatch<React.SetStateAction<UserFormData>>;
  saving: boolean;
  handleSubmit: () => void;
  openCreate: () => void;
  openEdit: (user: any) => void;
  handleDelete: (user: any) => void;
  // CSV import
  importDialogOpen: 'csv' | 'ldap' | null;
  setImportDialogOpen: (v: 'csv' | 'ldap' | null) => void;
  importPreview: any[];
  setImportPreview: (p: any[]) => void;
  importing: boolean;
  importResult: any;
  setImportResult: (r: any) => void;
  handleCsvUpload: (e: React.ChangeEvent<HTMLInputElement>) => void;
  handleBatchImport: () => void;
  // LDAP import
  ldapUsers: any[];
  ldapSelected: Set<string>;
  setLdapSelected: (s: Set<string>) => void;
  ldapLoading: boolean;
  ldapImportOUs: any[];
  ldapImportOUDN: string;
  setLdapImportOUDN: (v: string) => void;
  loadLdapUsers: (ouDn?: string) => void;
  handleLdapImport: () => void;
  setLdapUsers: (u: any[]) => void;
}

export function SystemUserTab({
  searchQuery,
  setSearchQuery,
  filteredUsers,
  loading,
  selectedUser,
  setSelectedUser,
  getUserStatusBadge,
  dialogOpen,
  setDialogOpen,
  editingUser,
  form,
  setForm,
  saving,
  handleSubmit,
  openCreate,
  openEdit,
  handleDelete,
  importDialogOpen,
  setImportDialogOpen,
  importPreview,
  setImportPreview,
  importing,
  importResult,
  setImportResult,
  handleCsvUpload,
  handleBatchImport,
  ldapUsers,
  ldapSelected,
  setLdapSelected,
  ldapLoading,
  ldapImportOUs,
  ldapImportOUDN,
  setLdapImportOUDN,
  loadLdapUsers,
  handleLdapImport,
  setLdapUsers,
}: SystemUserTabProps) {
  return (
    <>
      {/* Filters */}
      <div className="flex items-center justify-between">
        <div className="relative w-64">
          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-500" />
          <Input
            placeholder="搜索用户..."
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
            className="pl-9 h-9 bg-slate-800/50 border-slate-700 text-slate-200 placeholder:text-slate-500"
          />
        </div>
        <div className="flex items-center gap-2">
          <Button variant="outline" className="border-slate-700 text-slate-300 hover:text-slate-100 hover:bg-slate-800" onClick={() => setImportDialogOpen('csv')}>
            <Upload className="h-4 w-4 mr-2" />
            批量导入
          </Button>
          <Button variant="outline" className="border-slate-700 text-slate-300 hover:text-slate-100 hover:bg-slate-800" onClick={() => setImportDialogOpen('ldap')}>
            <Network className="h-4 w-4 mr-2" />
            LDAP 导入
          </Button>
          <Button className="bg-blue-600 hover:bg-blue-700 text-white" onClick={openCreate}>
            <Plus className="h-4 w-4 mr-2" />
            新建用户
          </Button>
        </div>
      </div>

      {/* Users Table */}
      <Card className="bg-slate-900 border-slate-800">
        <CardContent className="p-0">
          <div className="border-t border-slate-800">
            <Table>
              <TableHeader>
                <TableRow className="border-slate-800 hover:bg-transparent">
                  <TableHead className="text-slate-400">用户信息</TableHead>
                  <TableHead className="text-slate-400">联系方式</TableHead>
                  <TableHead className="text-slate-400">角色</TableHead>
                  <TableHead className="text-slate-400">来源</TableHead>
                  <TableHead className="text-slate-400">状态</TableHead>
                  <TableHead className="text-slate-400">最后登录</TableHead>
                  <TableHead className="text-slate-400 text-right">操作</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {loading ? (
                  <TableRow className="border-slate-800">
                    <TableCell colSpan={7} className="text-center py-12">
                      <div className="flex items-center justify-center">
                        <div className="h-6 w-6 border-2 border-slate-700 border-t-blue-500 rounded-full animate-spin" />
                      </div>
                    </TableCell>
                  </TableRow>
                ) : filteredUsers.length === 0 ? (
                  <TableRow className="border-slate-800">
                    <TableCell colSpan={7} className="text-center py-12 text-sm text-slate-500">
                      暂无用户数据
                    </TableCell>
                  </TableRow>
                ) : (
                  filteredUsers.map((user) => (
                    <TableRow key={user.id} className="border-slate-800 hover:bg-slate-800/50">
                      <TableCell>
                        <div className="flex items-center gap-3">
                          <div className="w-8 h-8 rounded-full bg-blue-600 flex items-center justify-center text-white text-sm font-medium">
                            {(user.nickname || user.username || '?').charAt(0)}
                          </div>
                          <div>
                            <p className="text-sm font-medium text-slate-200">{user.nickname || user.username}</p>
                            <p className="text-xs text-slate-500">@{user.username}</p>
                          </div>
                        </div>
                      </TableCell>
                      <TableCell>
                        <div className="space-y-1">
                          <div className="flex items-center gap-1 text-sm text-slate-400">
                            <Mail className="h-3.5 w-3.5" />
                            {user.email || '--'}
                          </div>
                          {user.phone && (
                            <div className="flex items-center gap-1 text-sm text-slate-400">
                              <Phone className="h-3.5 w-3.5" />
                              {user.phone}
                            </div>
                          )}
                        </div>
                      </TableCell>
                      <TableCell>
                        <div className="flex flex-wrap gap-1">
                          {(user.roles || []).map((role: string) => (
                            <Badge key={role} variant="outline" className="border-slate-700 text-slate-400">
                              {role}
                            </Badge>
                          ))}
                        </div>
                      </TableCell>
                      <TableCell>
                        {user.authSource === 'ldap' ? (
                          <Badge variant="outline" className="border-cyan-500/30 text-cyan-400 bg-cyan-500/10">
                            LDAP
                          </Badge>
                        ) : (
                          <Badge variant="outline" className="border-slate-600/30 text-slate-400 bg-slate-600/10">
                            本地
                          </Badge>
                        )}
                      </TableCell>
                      <TableCell>{getUserStatusBadge(user.status)}</TableCell>
                      <TableCell>
                        <span className="text-sm text-slate-400">
                          {user.lastLoginAt ? new Date(user.lastLoginAt).toLocaleString() : '--'}
                        </span>
                      </TableCell>
                      <TableCell className="text-right">
                        <div className="flex items-center justify-end gap-1">
                          <Button
                            variant="ghost"
                            size="icon"
                            className="h-8 w-8 text-slate-400 hover:text-slate-100"
                            onClick={() => setSelectedUser(user)}
                          >
                            <Eye className="h-4 w-4" />
                          </Button>
                          <Button
                            variant="ghost"
                            size="icon"
                            className="h-8 w-8 text-slate-400 hover:text-slate-100"
                            onClick={() => openEdit(user)}
                          >
                            <Edit className="h-4 w-4" />
                          </Button>
                          <Button
                            variant="ghost"
                            size="icon"
                            className="h-8 w-8 text-slate-400 hover:text-red-400"
                            onClick={() => handleDelete(user)}
                          >
                            <Trash2 className="h-4 w-4" />
                          </Button>
                        </div>
                      </TableCell>
                    </TableRow>
                  ))
                )}
              </TableBody>
            </Table>
          </div>
        </CardContent>
      </Card>

      {/* User Detail Dialog */}
      <Dialog open={!!selectedUser} onOpenChange={() => setSelectedUser(null)}>
        <DialogContent className="bg-slate-900 border-slate-800">
          <DialogHeader>
            <DialogTitle className="text-slate-100 flex items-center gap-2">
              <UserIcon className="h-5 w-5 text-blue-400" />
              {selectedUser?.nickname}
            </DialogTitle>
            <DialogDescription className="text-slate-500">
              @{selectedUser?.username} · {selectedUser?.email}
            </DialogDescription>
          </DialogHeader>

          <div className="space-y-4">
            <div className="grid grid-cols-2 gap-4 p-4 rounded-lg bg-slate-800/50">
              <div>
                <p className="text-xs text-slate-500 mb-1">用户名</p>
                <p className="text-sm text-slate-200">{selectedUser?.username}</p>
              </div>
              <div>
                <p className="text-xs text-slate-500 mb-1">昵称</p>
                <p className="text-sm text-slate-200">{selectedUser?.nickname}</p>
              </div>
              <div>
                <p className="text-xs text-slate-500 mb-1">邮箱</p>
                <p className="text-sm text-slate-200">{selectedUser?.email}</p>
              </div>
              <div>
                <p className="text-xs text-slate-500 mb-1">手机号</p>
                <p className="text-sm text-slate-200">{selectedUser?.phone || '--'}</p>
              </div>
              <div>
                <p className="text-xs text-slate-500 mb-1">状态</p>
                <p className="text-sm text-slate-200">{selectedUser && getUserStatusBadge(selectedUser.status)}</p>
              </div>
              <div>
                <p className="text-xs text-slate-500 mb-1">创建时间</p>
                <p className="text-sm text-slate-200">
                  {selectedUser && selectedUser.createdAt ? new Date(selectedUser.createdAt).toLocaleDateString() : '--'}
                </p>
              </div>
            </div>

            <div>
              <h4 className="text-sm font-medium text-slate-300 mb-2">角色</h4>
              <div className="flex flex-wrap gap-2">
                {selectedUser?.roles.map((role: string) => (
                  <Badge key={role} variant="outline" className="border-slate-700 text-slate-400">
                    {role}
                  </Badge>
                ))}
              </div>
            </div>
          </div>

          <DialogFooter>
            <Button variant="outline" className="border-slate-700 text-slate-300">
              <Key className="h-4 w-4 mr-2" />
              重置密码
            </Button>
            <Button
              className="bg-blue-600 hover:bg-blue-700 text-white"
              onClick={() => {
                if (selectedUser) {
                  setSelectedUser(null);
                  openEdit(selectedUser);
                }
              }}
            >
              <Edit className="h-4 w-4 mr-2" />
              编辑
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* Create / Edit User Dialog */}
      <UserFormDialog
        open={dialogOpen}
        onOpenChange={setDialogOpen}
        editingUser={editingUser}
        form={form}
        setForm={setForm}
        saving={saving}
        onSubmit={handleSubmit}
      />

      {/* CSV 批量导入 Dialog */}
      <Dialog open={importDialogOpen === 'csv'} onOpenChange={(v) => !v && setImportDialogOpen(null)}>
        <DialogContent className="bg-slate-900 border-slate-800 max-w-2xl">
          <DialogHeader>
            <DialogTitle className="text-slate-100 flex items-center gap-2">
              <Upload className="h-5 w-5 text-blue-400" />
              批量导入用户（CSV）
            </DialogTitle>
            <DialogDescription className="text-slate-500">
              上传 CSV 文件批量创建用户。请先下载模板，按格式填写后上传。
            </DialogDescription>
          </DialogHeader>

          {!importResult ? (
            <>
              <div className="space-y-3">
                <div className="flex items-center gap-2">
                  <Button variant="outline" size="sm" className="border-slate-700 text-slate-300" onClick={() => userApi.downloadTemplate()}>
                    <Download className="h-4 w-4 mr-1.5" />
                    下载模板
                  </Button>
                  <label className="inline-flex items-center px-3 py-1.5 rounded-md text-sm bg-slate-800 border border-slate-700 text-slate-200 cursor-pointer hover:bg-slate-700 transition-colors">
                    <Upload className="h-4 w-4 mr-1.5" />
                    选择 CSV 文件
                    <input type="file" accept=".csv" className="hidden" onChange={handleCsvUpload} />
                  </label>
                </div>

                {importPreview.length > 0 && (
                  <div className="rounded-lg border border-slate-800 overflow-hidden">
                    <div className="px-3 py-2 bg-slate-800/50 text-xs text-slate-400">
                      预览：{importPreview.length} 条数据
                    </div>
                    <Table>
                      <TableHeader>
                        <TableRow className="border-slate-800">
                          <TableHead className="text-slate-400 text-xs">用户名</TableHead>
                          <TableHead className="text-slate-400 text-xs">昵称</TableHead>
                          <TableHead className="text-slate-400 text-xs">邮箱</TableHead>
                          <TableHead className="text-slate-400 text-xs">手机</TableHead>
                        </TableRow>
                      </TableHeader>
                      <TableBody>
                        {importPreview.slice(0, 5).map((u, i) => (
                          <TableRow key={i} className="border-slate-800">
                            <TableCell className="text-slate-200 text-xs">{u.username}</TableCell>
                            <TableCell className="text-slate-300 text-xs">{u.nickname}</TableCell>
                            <TableCell className="text-slate-400 text-xs">{u.email}</TableCell>
                            <TableCell className="text-slate-400 text-xs">{u.phone}</TableCell>
                          </TableRow>
                        ))}
                        {importPreview.length > 5 && (
                          <TableRow className="border-slate-800">
                            <TableCell colSpan={4} className="text-slate-500 text-xs text-center">
                              还有 {importPreview.length - 5} 条...
                            </TableCell>
                          </TableRow>
                        )}
                      </TableBody>
                    </Table>
                  </div>
                )}
              </div>

              <DialogFooter>
                <Button variant="outline" className="border-slate-700 text-slate-300" onClick={() => { setImportDialogOpen(null); setImportPreview([]); }}>
                  取消
                </Button>
                <Button className="bg-blue-600 hover:bg-blue-700 text-white" onClick={handleBatchImport} disabled={importing || importPreview.length === 0}>
                  {importing ? '导入中...' : `确认导入 (${importPreview.length})`}
                </Button>
              </DialogFooter>
            </>
          ) : (
            <div className="space-y-4 py-2">
              <div className={`flex items-center gap-3 p-4 rounded-lg ${importResult.code === 200 ? 'bg-emerald-500/10' : 'bg-red-500/10'}`}>
                {importResult.code === 200 ? (
                  <CheckCircle className="h-6 w-6 text-emerald-400 shrink-0" />
                ) : (
                  <XCircle className="h-6 w-6 text-red-400 shrink-0" />
                )}
                <span className="text-sm text-slate-200">{importResult.message}</span>
              </div>
              {importResult.errors?.length > 0 && (
                <div className="max-h-32 overflow-auto rounded-lg bg-slate-800/50 p-3 space-y-1">
                  {importResult.errors.map((err: string, i: number) => (
                    <div key={i} className="text-xs text-red-400">{err}</div>
                  ))}
                </div>
              )}
              <DialogFooter>
                <Button className="bg-blue-600 hover:bg-blue-700 text-white" onClick={() => { setImportDialogOpen(null); setImportPreview([]); setImportResult(null); }}>
                  完成
                </Button>
              </DialogFooter>
            </div>
          )}
        </DialogContent>
      </Dialog>

      {/* LDAP 导入 Dialog */}
      <Dialog open={importDialogOpen === 'ldap'} onOpenChange={(v) => !v && setImportDialogOpen(null)}>
        <DialogContent className="bg-slate-900 border-slate-800 max-w-2xl">
          <DialogHeader>
            <DialogTitle className="text-slate-100 flex items-center gap-2">
              <Network className="h-5 w-5 text-cyan-400" />
              从 LDAP 导入用户
            </DialogTitle>
            <DialogDescription className="text-slate-500">
              从 LDAP 服务器检索用户列表，选择需要导入的用户
            </DialogDescription>
          </DialogHeader>

          {!importResult ? (
            <>
              <div className="space-y-3">
                <div className="flex items-center gap-3">
                  <div className="flex items-center gap-2">
                    <span className="text-xs text-slate-500 whitespace-nowrap">选择 OU</span>
                    <select
                      className="bg-slate-800 border border-slate-700 text-slate-200 text-xs rounded-md px-2 py-1.5 focus:outline-none focus:ring-1 focus:ring-blue-500"
                      value={ldapImportOUDN}
                      onChange={(e) => {
                        setLdapImportOUDN(e.target.value);
                        loadLdapUsers(e.target.value);
                      }}
                    >
                      <option value="">根 (全部)</option>
                      {ldapImportOUs.map((ou) => (
                        <option key={ou.dn} value={ou.dn}>{ou.name}</option>
                      ))}
                    </select>
                  </div>
                  <Button variant="outline" size="sm" className="border-slate-700 text-slate-300 ml-auto" onClick={() => loadLdapUsers(ldapImportOUDN)} disabled={ldapLoading}>
                    {ldapLoading ? <Loader2 className="h-4 w-4 mr-1.5 animate-spin" /> : <RefreshCw className="h-4 w-4 mr-1.5" />}
                    刷新
                  </Button>
                </div>

                <p className="text-xs text-slate-500">
                  {ldapUsers.length > 0 ? `找到 ${ldapUsers.length} 个用户` : '选择 OU 或点击刷新获取用户列表'}
                </p>

                {ldapUsers.length > 0 && (
                  <div className="max-h-80 overflow-auto rounded-lg border border-slate-800">
                    <Table>
                      <TableHeader>
                        <TableRow className="border-slate-800 sticky top-0 bg-slate-900">
                          <TableHead className="w-10 text-slate-400 text-xs">
                            <input
                              type="checkbox"
                              className="accent-blue-600"
                              checked={ldapSelected.size === ldapUsers.length && ldapUsers.length > 0}
                              onChange={(e) => {
                                if (e.target.checked) {
                                  setLdapSelected(new Set(ldapUsers.map((u) => u.dn)));
                                } else {
                                  setLdapSelected(new Set());
                                }
                              }}
                            />
                          </TableHead>
                          <TableHead className="text-slate-400 text-xs">用户名</TableHead>
                          <TableHead className="text-slate-400 text-xs">显示名</TableHead>
                          <TableHead className="text-slate-400 text-xs">邮箱</TableHead>
                          <TableHead className="text-slate-400 text-xs">DN</TableHead>
                        </TableRow>
                      </TableHeader>
                      <TableBody>
                        {ldapUsers.map((u) => (
                          <TableRow key={u.dn} className="border-slate-800 hover:bg-slate-800/50">
                            <TableCell>
                              <input
                                type="checkbox"
                                className="accent-blue-600"
                                checked={ldapSelected.has(u.dn)}
                                onChange={(e) => {
                                  const next = new Set(ldapSelected);
                                  if (e.target.checked) next.add(u.dn);
                                  else next.delete(u.dn);
                                  setLdapSelected(next);
                                }}
                              />
                            </TableCell>
                            <TableCell className="text-slate-200 text-xs">{u.uid}</TableCell>
                            <TableCell className="text-slate-300 text-xs">{u.cn}</TableCell>
                            <TableCell className="text-slate-400 text-xs">{u.mail}</TableCell>
                            <TableCell className="text-slate-500 text-xs font-mono truncate max-w-[200px]">{u.dn}</TableCell>
                          </TableRow>
                        ))}
                      </TableBody>
                    </Table>
                  </div>
                )}
              </div>

              <DialogFooter>
                <Button variant="outline" className="border-slate-700 text-slate-300" onClick={() => { setImportDialogOpen(null); setLdapUsers([]); }}>
                  取消
                </Button>
                <Button className="bg-blue-600 hover:bg-blue-700 text-white" onClick={handleLdapImport} disabled={importing || ldapSelected.size === 0}>
                  {importing ? '导入中...' : `导入选中 (${ldapSelected.size})`}
                </Button>
              </DialogFooter>
            </>
          ) : (
            <div className="space-y-4 py-2">
              <div className={`flex items-center gap-3 p-4 rounded-lg ${importResult.code === 200 ? 'bg-emerald-500/10' : 'bg-red-500/10'}`}>
                {importResult.code === 200 ? (
                  <CheckCircle className="h-6 w-6 text-emerald-400 shrink-0" />
                ) : (
                  <XCircle className="h-6 w-6 text-red-400 shrink-0" />
                )}
                <span className="text-sm text-slate-200">{importResult.message}</span>
              </div>
              <DialogFooter>
                <Button className="bg-blue-600 hover:bg-blue-700 text-white" onClick={() => { setImportDialogOpen(null); setLdapUsers([]); setImportResult(null); }}>
                  完成
                </Button>
              </DialogFooter>
            </div>
          )}
        </DialogContent>
      </Dialog>
    </>
  );
}