// components/permissions/permission-group-assignment-manager.tsx

"use client";

import { useState, useEffect } from "react";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Input } from "@/components/ui/input";
import { Checkbox } from "@/components/ui/checkbox";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { 
  Users, 
  User, 
  Plus, 
  X, 
  Search,
  Package,
  Shield,
  Loader2,
  UserPlus,
  ChevronRight
} from "lucide-react";
import { toast } from "sonner";
import { cn } from "@/lib/utils";
import {
  getPermissionGroupAssignments,
  assignGroupToRoles,
  assignGroupToUsers,
  removeGroupFromRole,
  removeGroupFromUser,
  searchRoles,
  searchUsers,
} from "@/lib/permissions/permission-group-assignment-actions";

interface PermissionGroup {
  id: number;
  groupKey: string;
  name: string;
  description?: string;
  domain?: string;
  permissionCount: number;
  isActive: boolean;
}

interface AssignedRole {
  id: number;
  name: string;
  domain: string;
  userCount: number;
  assignedAt: Date;
  assignedBy?: string;
}

interface AssignedUser {
  id: number;
  name: string;
  email: string;
  imageUrl?: string;
  domain: string;
  companyName?: string;
  assignedAt: Date;
  assignedBy?: string;
}

export function PermissionGroupAssignmentManager() {
  const [groups, setGroups] = useState<PermissionGroup[]>([]);
  const [selectedGroup, setSelectedGroup] = useState<PermissionGroup | null>(null);
  const [assignedRoles, setAssignedRoles] = useState<AssignedRole[]>([]);
  const [assignedUsers, setAssignedUsers] = useState<AssignedUser[]>([]);
  const [searchQuery, setSearchQuery] = useState("");
  const [loading, setLoading] = useState(false);
  const [addRoleDialogOpen, setAddRoleDialogOpen] = useState(false);
  const [addUserDialogOpen, setAddUserDialogOpen] = useState(false);

  useEffect(() => {
    loadGroups();
  }, []);

  useEffect(() => {
    if (selectedGroup) {
      loadAssignments(selectedGroup.id);
    }
  }, [selectedGroup]);

  const loadGroups = async () => {
    setLoading(true);
    try {
      const data = await getPermissionGroupAssignments();
      setGroups(data.groups);
    } catch (error) {
      toast.error("권한 그룹을 불러오는데 실패했습니다.");
    } finally {
      setLoading(false);
    }
  };

  const loadAssignments = async (groupId: number) => {
    try {
      const data = await getPermissionGroupAssignments(groupId);
      setAssignedRoles(data.roles);
      setAssignedUsers(data.users);
    } catch (error) {
      toast.error("할당 정보를 불러오는데 실패했습니다.");
    }
  };

  const handleRemoveRole = async (roleId: number) => {
    if (!selectedGroup) return;
    
    try {
      await removeGroupFromRole(selectedGroup.id, roleId);
      toast.success("역할에서 권한 그룹이 제거되었습니다.");
      loadAssignments(selectedGroup.id);
    } catch (error) {
      toast.error("권한 그룹 제거에 실패했습니다.");
    }
  };

  const handleRemoveUser = async (userId: number) => {
    if (!selectedGroup) return;
    
    try {
      await removeGroupFromUser(selectedGroup.id, userId);
      toast.success("사용자에서 권한 그룹이 제거되었습니다.");
      loadAssignments(selectedGroup.id);
    } catch (error) {
      toast.error("권한 그룹 제거에 실패했습니다.");
    }
  };

  // 그룹 필터링
  const filteredGroups = groups.filter(g =>
    g.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
    g.groupKey.toLowerCase().includes(searchQuery.toLowerCase()) ||
    g.description?.toLowerCase().includes(searchQuery.toLowerCase())
  );

  return (
    <div className="grid grid-cols-2 gap-6">
      {/* 권한 그룹 목록 */}
      <Card>
        <CardHeader>
          <CardTitle>권한 그룹</CardTitle>
          <CardDescription>할당을 관리할 권한 그룹을 선택하세요.</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            {/* 검색 */}
            <div className="relative">
              <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
              <Input
                placeholder="그룹 검색..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="pl-8"
              />
            </div>

            {/* 그룹 목록 */}
            {loading ? (
              <div className="flex justify-center py-8">
                <Loader2 className="h-6 w-6 animate-spin" />
              </div>
            ) : (
              <ScrollArea className="h-[500px]">
                <div className="space-y-2">
                  {filteredGroups.map(group => (
                    <button
                      key={group.id}
                      onClick={() => setSelectedGroup(group)}
                      className={cn(
                        "w-full text-left p-4 rounded-lg border transition-colors",
                        selectedGroup?.id === group.id
                          ? "bg-primary/10 border-primary"
                          : "hover:bg-muted"
                      )}
                    >
                      <div className="space-y-2">
                        <div className="flex items-start justify-between">
                          <div>
                            <div className="font-medium">{group.name}</div>
                            <code className="text-xs bg-muted px-1 py-0.5 rounded">
                              {group.groupKey}
                            </code>
                          </div>
                          <div className="flex flex-col items-end gap-1">
                            {group.domain && (
                              <Badge variant="outline" className="text-xs">
                                {group.domain}
                              </Badge>
                            )}
                            <Badge variant="secondary" className="text-xs">
                              {group.permissionCount}개 권한
                            </Badge>
                          </div>
                        </div>
                        {group.description && (
                          <p className="text-sm text-muted-foreground">
                            {group.description}
                          </p>
                        )}
                      </div>
                    </button>
                  ))}
                </div>
              </ScrollArea>
            )}
          </div>
        </CardContent>
      </Card>

      {/* 할당 관리 */}
      {selectedGroup ? (
        <Card>
          <CardHeader>
            <div>
              <CardTitle>{selectedGroup.name}</CardTitle>
              <CardDescription className="mt-2">
                <div className="flex gap-2">
                  <Badge>{selectedGroup.groupKey}</Badge>
                  {selectedGroup.domain && (
                    <Badge variant="outline">{selectedGroup.domain}</Badge>
                  )}
                  <Badge variant="secondary">{selectedGroup.permissionCount}개 권한</Badge>
                </div>
              </CardDescription>
            </div>
          </CardHeader>
          <CardContent>
            <Tabs defaultValue="roles">
              <TabsList className="grid w-full grid-cols-2">
                <TabsTrigger value="roles">
                  <Users className="mr-2 h-4 w-4" />
                  역할 ({assignedRoles.length})
                </TabsTrigger>
                <TabsTrigger value="users">
                  <User className="mr-2 h-4 w-4" />
                  사용자 ({assignedUsers.length})
                </TabsTrigger>
              </TabsList>

              <TabsContent value="roles" className="mt-4">
                <div className="space-y-4">
                  <Button 
                    size="sm" 
                    onClick={() => setAddRoleDialogOpen(true)}
                  >
                    <Plus className="mr-2 h-4 w-4" />
                    역할 추가
                  </Button>
                  
                  <div className="space-y-2">
                    {assignedRoles.map((role) => (
                      <div key={role.id} className="flex items-center justify-between p-3 border rounded-lg">
                        <div className="flex-1">
                          <div className="font-medium">{role.name}</div>
                          <div className="text-sm text-muted-foreground">
                            {role.domain} • {role.userCount}명 사용자
                          </div>
                          <div className="text-xs text-muted-foreground mt-1">
                            {new Date(role.assignedAt).toLocaleDateString()} 할당
                            {role.assignedBy && ` • ${role.assignedBy}`}
                          </div>
                        </div>
                        <Button 
                          size="sm" 
                          variant="ghost"
                          onClick={() => handleRemoveRole(role.id)}
                        >
                          <X className="h-4 w-4" />
                        </Button>
                      </div>
                    ))}
                    
                    {assignedRoles.length === 0 && (
                      <div className="text-center py-8 text-muted-foreground">
                        <Users className="h-8 w-8 mx-auto mb-2 opacity-50" />
                        <p className="text-sm">할당된 역할이 없습니다.</p>
                      </div>
                    )}
                  </div>
                </div>
              </TabsContent>

              <TabsContent value="users" className="mt-4">
                <div className="space-y-4">
                  <Button 
                    size="sm"
                    onClick={() => setAddUserDialogOpen(true)}
                  >
                    <Plus className="mr-2 h-4 w-4" />
                    사용자 추가
                  </Button>
                  
                  <div className="space-y-2">
                    {assignedUsers.map((user) => (
                      <div key={user.id} className="flex items-center justify-between p-3 border rounded-lg">
                        <div className="flex items-center gap-3">
                          <Avatar className="h-8 w-8">
                            <AvatarImage src={user.imageUrl} />
                            <AvatarFallback>{user.name[0]}</AvatarFallback>
                          </Avatar>
                          <div>
                            <div className="font-medium">{user.name}</div>
                            <div className="text-sm text-muted-foreground">{user.email}</div>
                            <div className="flex items-center gap-2 mt-1">
                              <Badge variant="outline" className="text-xs">
                                {user.domain}
                              </Badge>
                              {user.companyName && (
                                <span className="text-xs text-muted-foreground">
                                  {user.companyName}
                                </span>
                              )}
                            </div>
                          </div>
                        </div>
                        <Button 
                          size="sm" 
                          variant="ghost"
                          onClick={() => handleRemoveUser(user.id)}
                        >
                          <X className="h-4 w-4" />
                        </Button>
                      </div>
                    ))}
                    
                    {assignedUsers.length === 0 && (
                      <div className="text-center py-8 text-muted-foreground">
                        <User className="h-8 w-8 mx-auto mb-2 opacity-50" />
                        <p className="text-sm">할당된 사용자가 없습니다.</p>
                      </div>
                    )}
                  </div>
                </div>
              </TabsContent>
            </Tabs>
          </CardContent>
        </Card>
      ) : (
        <Card className="flex items-center justify-center">
          <div className="text-center text-muted-foreground">
            <Package className="h-12 w-12 mx-auto mb-4 opacity-50" />
            <p>권한 그룹을 선택하면 할당 정보가 표시됩니다.</p>
          </div>
        </Card>
      )}

      {/* 역할 추가 다이얼로그 */}
      {selectedGroup && (
        <AddRoleDialog
          open={addRoleDialogOpen}
          onOpenChange={setAddRoleDialogOpen}
          group={selectedGroup}
          onSuccess={() => {
            setAddRoleDialogOpen(false);
            loadAssignments(selectedGroup.id);
          }}
        />
      )}

      {/* 사용자 추가 다이얼로그 */}
      {selectedGroup && (
        <AddUserDialog
          open={addUserDialogOpen}
          onOpenChange={setAddUserDialogOpen}
          group={selectedGroup}
          onSuccess={() => {
            setAddUserDialogOpen(false);
            loadAssignments(selectedGroup.id);
          }}
        />
      )}
    </div>
  );
}

// 역할 추가 다이얼로그
function AddRoleDialog({
  open,
  onOpenChange,
  group,
  onSuccess,
}: {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  group: PermissionGroup;
  onSuccess: () => void;
}) {
  const [availableRoles, setAvailableRoles] = useState<any[]>([]);
  const [selectedRoles, setSelectedRoles] = useState<number[]>([]);
  const [loading, setLoading] = useState(false);
  const [saving, setSaving] = useState(false);

  useEffect(() => {
    if (open) {
      loadAvailableRoles();
    }
  }, [open]);

  const loadAvailableRoles = async () => {
    setLoading(true);
    try {
      const data = await searchRoles(group.id);
      setAvailableRoles(data);
    } catch (error) {
      toast.error("역할 목록을 불러오는데 실패했습니다.");
    } finally {
      setLoading(false);
    }
  };

  const handleSubmit = async () => {
    if (selectedRoles.length === 0) {
      toast.error("역할을 선택해주세요.");
      return;
    }

    setSaving(true);
    try {
      await assignGroupToRoles(group.id, selectedRoles);
      toast.success("역할에 권한 그룹이 추가되었습니다.");
      onSuccess();
    } catch (error) {
      toast.error("권한 그룹 추가에 실패했습니다.");
    } finally {
      setSaving(false);
    }
  };

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>역할 추가</DialogTitle>
          <DialogDescription>
            "{group.name}" 그룹을 할당할 역할을 선택하세요.
          </DialogDescription>
        </DialogHeader>

        {loading ? (
          <div className="flex justify-center py-8">
            <Loader2 className="h-6 w-6 animate-spin" />
          </div>
        ) : (
          <div className="space-y-4">
            <ScrollArea className="h-[300px] border rounded-md p-4">
              <div className="space-y-2">
                {availableRoles.map((role) => (
                  <label
                    key={role.id}
                    className="flex items-center gap-3 p-2 hover:bg-muted rounded cursor-pointer"
                  >
                    <Checkbox
                      checked={selectedRoles.includes(role.id)}
                      onCheckedChange={(checked) => {
                        if (checked) {
                          setSelectedRoles([...selectedRoles, role.id]);
                        } else {
                          setSelectedRoles(selectedRoles.filter(id => id !== role.id));
                        }
                      }}
                    />
                    <div className="flex-1">
                      <div className="font-medium">{role.name}</div>
                      <div className="text-sm text-muted-foreground">
                        {role.domain} • {role.userCount}명 사용자
                      </div>
                    </div>
                  </label>
                ))}
              </div>
            </ScrollArea>

            <div className="text-sm text-muted-foreground">
              {selectedRoles.length}개 역할 선택됨
            </div>
          </div>
        )}

        <DialogFooter>
          <Button variant="outline" onClick={() => onOpenChange(false)}>
            취소
          </Button>
          <Button onClick={handleSubmit} disabled={saving}>
            {saving ? "추가 중..." : "추가"}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

// 사용자 추가 다이얼로그
function AddUserDialog({
  open,
  onOpenChange,
  group,
  onSuccess,
}: {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  group: PermissionGroup;
  onSuccess: () => void;
}) {
  const [searchQuery, setSearchQuery] = useState("");
  const [availableUsers, setAvailableUsers] = useState<any[]>([]);
  const [selectedUsers, setSelectedUsers] = useState<number[]>([]);
  const [loading, setLoading] = useState(false);
  const [saving, setSaving] = useState(false);

  useEffect(() => {
    const timer = setTimeout(() => {
      if (searchQuery && open) {
        searchUsersData(searchQuery);
      }
    }, 300);
    return () => clearTimeout(timer);
  }, [searchQuery, open]);

  const searchUsersData = async (query: string) => {
    setLoading(true);
    try {
      const data = await searchUsers(query, group.id);
      setAvailableUsers(data);
    } catch (error) {
      toast.error("사용자 검색에 실패했습니다.");
    } finally {
      setLoading(false);
    }
  };

  const handleSubmit = async () => {
    if (selectedUsers.length === 0) {
      toast.error("사용자를 선택해주세요.");
      return;
    }

    setSaving(true);
    try {
      await assignGroupToUsers(group.id, selectedUsers);
      toast.success("사용자에게 권한 그룹이 추가되었습니다.");
      onSuccess();
    } catch (error) {
      toast.error("권한 그룹 추가에 실패했습니다.");
    } finally {
      setSaving(false);
    }
  };

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-2xl">
        <DialogHeader>
          <DialogTitle>사용자 추가</DialogTitle>
          <DialogDescription>
            "{group.name}" 그룹을 할당할 사용자를 검색하고 선택하세요.
          </DialogDescription>
        </DialogHeader>

        <div className="space-y-4">
          {/* 검색 */}
          <div className="relative">
            <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
            <Input
              placeholder="이름, 이메일로 검색..."
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className="pl-8"
            />
          </div>

          {/* 사용자 목록 */}
          {loading ? (
            <div className="flex justify-center py-8">
              <Loader2 className="h-6 w-6 animate-spin" />
            </div>
          ) : (
            <>
              <ScrollArea className="h-[300px] border rounded-md p-4">
                <div className="space-y-2">
                  {availableUsers.map((user) => (
                    <label
                      key={user.id}
                      className="flex items-center gap-3 p-2 hover:bg-muted rounded cursor-pointer"
                    >
                      <Checkbox
                        checked={selectedUsers.includes(user.id)}
                        onCheckedChange={(checked) => {
                          if (checked) {
                            setSelectedUsers([...selectedUsers, user.id]);
                          } else {
                            setSelectedUsers(selectedUsers.filter(id => id !== user.id));
                          }
                        }}
                      />
                      <Avatar className="h-8 w-8">
                        <AvatarImage src={user.imageUrl} />
                        <AvatarFallback>{user.name[0]}</AvatarFallback>
                      </Avatar>
                      <div className="flex-1">
                        <div className="font-medium">{user.name}</div>
                        <div className="text-sm text-muted-foreground">{user.email}</div>
                        <div className="flex items-center gap-2 mt-1">
                          <Badge variant="outline" className="text-xs">
                            {user.domain}
                          </Badge>
                          {user.companyName && (
                            <span className="text-xs text-muted-foreground">
                              {user.companyName}
                            </span>
                          )}
                        </div>
                      </div>
                    </label>
                  ))}
                </div>
              </ScrollArea>

              {availableUsers.length > 0 && (
                <div className="text-sm text-muted-foreground">
                  {selectedUsers.length}명 선택됨
                </div>
              )}
            </>
          )}
        </div>

        <DialogFooter>
          <Button variant="outline" onClick={() => onOpenChange(false)}>
            취소
          </Button>
          <Button onClick={handleSubmit} disabled={saving || selectedUsers.length === 0}>
            {saving ? "추가 중..." : "추가"}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}