import {
  type UseMutationResult,
  useMutation,
  useQuery,
} from "@tanstack/react-query";
import type { AxiosError } from "axios";
import {
  ChevronDown,
  ChevronRight,
  Plus,
  RefreshCw,
  Shield,
  Trash2,
  UserMinus,
  UserPlus,
  Users,
} from "lucide-react";
import type React from "react";
import { useState } from "react";
import { useParams } from "react-router-dom";
import { toast } from "sonner";
import { Badge } from "../../../components/ui/badge";
import { Button } from "../../../components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "../../../components/ui/card";
import { Input } from "../../../components/ui/input";
import { Label } from "../../../components/ui/label";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "../../../components/ui/table";
import {
  type GroupSummary,
  addGroupMember,
  createGroup,
  deleteGroup,
  fetchGroups,
  removeGroupMember,
} from "../../../lib/adminApi";
import { t } from "../../../lib/i18n";

type UserGroupNode = GroupSummary & {
  children: UserGroupNode[];
  isExpanded?: boolean;
};

function buildGroupTree(
  groups: GroupSummary[],
  parentId: string | null = null,
): UserGroupNode[] {
  const nodes: UserGroupNode[] = [];
  const childrenOf = new Map<string, UserGroupNode[]>();

  // First pass: Initialize all groups as nodes and populate childrenOf map
  for (const group of groups) {
    childrenOf.set(group.id, []);
  }

  // Second pass: Populate children
  for (const group of groups) {
    const node: UserGroupNode = {
      ...group,
      children: childrenOf.get(group.id) ?? [],
    };
    if (group.parentId === parentId) {
      nodes.push(node);
    } else {
      // Check if the parent exists before adding to children
      // This handles cases where a parent might not be in the current 'groups' list (e.g., filtered data)
      if (group.parentId && childrenOf.has(group.parentId)) {
        childrenOf.get(group.parentId)?.push(node);
      } else {
        // If parentId exists but parent not found, it's a root level group for this tree view
        nodes.push(node);
      }
    }
  }

  // Sort children for consistent rendering (optional, but good for UI)
  nodes.sort((a, b) => a.name.localeCompare(b.name));
  for (const node of nodes) {
    node.children.sort((a, b) => a.name.localeCompare(b.name));
  }

  return nodes;
}

interface UserGroupTreeNodeProps {
  node: UserGroupNode;
  level: number;
  onSelect: (groupId: string) => void;
  selectedGroupId: string | null;
  onDelete: (groupId: string) => void;
  onAddSubGroup: (parentId: string) => void;
  addMemberMutation: UseMutationResult<
    void,
    AxiosError<{ error?: string }>,
    { groupId: string; userId: string }
  >;
  removeMemberMutation: UseMutationResult<
    void,
    AxiosError<{ error?: string }>,
    { groupId: string; userId: string }
  >;
}

const UserGroupTreeNode: React.FC<UserGroupTreeNodeProps> = ({
  node,
  level,
  onSelect,
  selectedGroupId,
  onDelete,
  onAddSubGroup,
  addMemberMutation,
  removeMemberMutation,
}) => {
  const [isExpanded, setIsExpanded] = useState(true);
  const hasChildren = node.children.length > 0;

  const handleToggleExpand = (e: React.MouseEvent) => {
    e.stopPropagation();
    setIsExpanded(!isExpanded);
  };

  return (
    <>
      <TableRow
        className={`cursor-pointer ${selectedGroupId === node.id ? "bg-primary/5" : ""}`}
        onClick={() => onSelect(node.id)}
      >
        <TableCell style={{ paddingLeft: `${1 + level * 1.5}rem` }}>
          <div className="flex items-center gap-2">
            {hasChildren ? (
              <Button
                variant="ghost"
                size="sm"
                onClick={handleToggleExpand}
                className="h-6 w-6 p-0"
              >
                {isExpanded ? (
                  <ChevronDown size={16} />
                ) : (
                  <ChevronRight size={16} />
                )}
              </Button>
            ) : (
              level > 0 && (
                <span className="inline-block w-6 text-center">
                  <ChevronRight
                    size={16}
                    className="text-muted-foreground inline-block align-middle"
                  />
                </span>
              )
            )}
            <Users size={14} className="text-muted-foreground" />
            <span className="font-semibold">{node.name}</span>
            <Badge variant="secondary" className="text-[10px] font-mono">
              {node.unitType || "Team"}
            </Badge>
          </div>
        </TableCell>
        <TableCell>
          <Badge variant="secondary">
            {t("msg.admin.groups.members.count", "{{count}} 명", {
              count: node.members?.length || 0,
            })}
          </Badge>
        </TableCell>
        <TableCell className="text-right">
          <div className="flex justify-end gap-1">
            <Button
              variant="ghost"
              size="sm"
              onClick={(e) => {
                e.stopPropagation();
                onAddSubGroup(node.id);
              }}
            >
              <Plus size={14} />
            </Button>
            <Button
              variant="ghost"
              size="sm"
              onClick={(e) => {
                e.stopPropagation();
                onDelete(node.id);
              }}
            >
              <Trash2 size={14} className="text-destructive" />
            </Button>
          </div>
        </TableCell>
      </TableRow>
      {isExpanded &&
        hasChildren &&
        node.children.map((child) => (
          <UserGroupTreeNode
            key={child.id}
            node={child}
            level={level + 1}
            onSelect={onSelect}
            selectedGroupId={selectedGroupId}
            onDelete={onDelete}
            onAddSubGroup={onAddSubGroup}
            addMemberMutation={addMemberMutation}
            removeMemberMutation={removeMemberMutation}
          />
        ))}
    </>
  );
};

function TenantGroupsPage() {
  const params = useParams<{ tenantId: string }>();
  const tenantId = params.tenantId ?? "";

  const [newGroupName, setNewGroupName] = useState("");
  const [newGroupDesc, setNewGroupNameDesc] = useState("");
  const [newGroupUnitType, setNewGroupUnitType] = useState("Team");
  const [newGroupParentId, setNewGroupParentId] = useState<string | null>(null);

  const [selectedGroupId, setSelectedGroupId] = useState<string | null>(null);

  // 그룹 목록 조회
  const groupsQuery = useQuery({
    queryKey: ["groups", tenantId],
    queryFn: () => fetchGroups(tenantId),
    enabled: tenantId.length > 0,
  });

  // 그룹 생성
  const createMutation = useMutation({
    mutationFn: () =>
      createGroup(tenantId, {
        name: newGroupName,
        description: newGroupDesc,
        unitType: newGroupUnitType,
        parentId: newGroupParentId || undefined,
      }),
    onSuccess: () => {
      toast.success(
        t(
          "msg.admin.groups.list.create_success",
          "그룹이 성공적으로 생성되었습니다.",
        ),
      );
      groupsQuery.refetch();
      setNewGroupName("");
      setNewGroupNameDesc("");
      setNewGroupUnitType("Team");
      setNewGroupParentId(null);
    },
    onError: (error: AxiosError<{ error?: string }>) => {
      toast.error(t("msg.admin.groups.list.create_error", "그룹 생성 실패"), {
        description: error.response?.data?.error || error.message,
      });
    },
  });

  // 그룹 삭제
  const deleteMutation = useMutation({
    mutationFn: (id: string) => deleteGroup(tenantId, id),
    onSuccess: () => {
      toast.success(
        t("msg.admin.groups.list.delete_success", "그룹이 삭제되었습니다."),
      );
      groupsQuery.refetch();
      setSelectedGroupId(null);
    },
    onError: (error: AxiosError<{ error?: string }>) => {
      toast.error(t("msg.admin.groups.list.delete_error", "그룹 삭제 실패"), {
        description: error.response?.data?.error || error.message,
      });
    },
  });

  // 멤버 추가
  const addMemberMutation = useMutation({
    mutationFn: ({ groupId, userId }: { groupId: string; userId: string }) =>
      addGroupMember(tenantId, groupId, userId),
    onSuccess: () => {
      toast.success(
        t("msg.admin.groups.members.add_success", "멤버가 추가되었습니다."),
      );
      groupsQuery.refetch();
    },
    onError: (error: AxiosError<{ error?: string }>) => {
      toast.error(t("msg.common.error", "오류 발생"), {
        description: error.response?.data?.error || error.message,
      });
    },
  });

  // 멤버 제거
  const removeMemberMutation = useMutation({
    mutationFn: ({ groupId, userId }: { groupId: string; userId: string }) =>
      removeGroupMember(tenantId, groupId, userId),
    onSuccess: () => {
      toast.success(
        t("msg.admin.groups.members.remove_success", "멤버가 제거되었습니다."),
      );
      groupsQuery.refetch();
    },
    onError: (error: AxiosError<{ error?: string }>) => {
      toast.error(t("msg.common.error", "오류 발생"), {
        description: error.response?.data?.error || error.message,
      });
    },
  });

  const groupTree = groupsQuery.data
    ? buildGroupTree(groupsQuery.data, tenantId)
    : [];

  const handleAddSubGroup = (parentId: string) => {
    setNewGroupParentId(parentId);
    // Optionally scroll to the create form or highlight it
  };

  const handleAddMember = (groupId: string) => {
    const userId = window.prompt(
      t(
        "msg.admin.groups.prompt.user_id",
        "추가할 사용자의 UUID를 입력하세요:",
      ),
    );
    if (userId) {
      addMemberMutation.mutate({ groupId, userId });
    }
  };

  const currentGroup = groupsQuery.data?.find((g) => g.id === selectedGroupId);

  return (
    <div className="space-y-6 mt-6">
      <div className="grid gap-6 md:grid-cols-3">
        {/* 그룹 생성 폼 */}
        <Card className="bg-[var(--color-panel)] md:col-span-1 border-primary/20">
          <CardHeader>
            <CardTitle className="text-sm flex items-center gap-2">
              <Plus size={16} />{" "}
              {t("ui.admin.groups.create.title", "새 그룹 생성")}
            </CardTitle>
            <CardDescription>
              {t(
                "ui.admin.groups.create.description",
                "새로운 사용자 그룹을 생성하고 계층 구조를 설정합니다.",
              )}
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="space-y-1">
              <Label htmlFor="name">
                {t("ui.admin.groups.form.name_label", "그룹 이름")}
              </Label>
              <Input
                id="name"
                value={newGroupName}
                onChange={(e) => setNewGroupName(e.target.value)}
                placeholder={t(
                  "ui.admin.groups.form.name_placeholder",
                  "예: 개발팀, 인사팀",
                )}
              />
            </div>
            <div className="space-y-1">
              <Label htmlFor="unitType">
                {t("ui.admin.groups.form.unit_level_label", "조직 단위 레벨")}
              </Label>
              <Input
                id="unitType"
                value={newGroupUnitType}
                onChange={(e) => setNewGroupUnitType(e.target.value)}
                placeholder={t(
                  "ui.admin.groups.form.unit_level_placeholder",
                  "예: 본부, 팀, 셀",
                )}
              />
            </div>
            <div className="space-y-1">
              <Label htmlFor="parentId">
                {t("ui.admin.groups.form.parent_label", "상위 그룹 (선택)")}
              </Label>
              <select
                id="parentId"
                className="flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
                value={newGroupParentId || ""}
                onChange={(e) => setNewGroupParentId(e.target.value || null)}
              >
                <option value="">{t("ui.common.none", "없음")}</option>
                {groupsQuery.data?.map((group) => (
                  <option key={group.id} value={group.id}>
                    {group.name}
                  </option>
                ))}
              </select>
            </div>
            <div className="space-y-1">
              <Label htmlFor="desc">
                {t("ui.admin.groups.form.desc_label", "설명")}
              </Label>
              <Input
                id="desc"
                value={newGroupDesc}
                onChange={(e) => setNewGroupNameDesc(e.target.value)}
                placeholder={t(
                  "ui.admin.groups.form.desc_placeholder",
                  "그룹 용도 설명",
                )}
              />
            </div>
            <Button
              className="w-full"
              onClick={() => createMutation.mutate()}
              disabled={!newGroupName || createMutation.isPending}
            >
              {t("ui.admin.groups.form.submit", "생성하기")}
            </Button>
          </CardContent>
        </Card>

        {/* 그룹 목록 (트리 뷰) */}
        <Card className="bg-[var(--color-panel)] md:col-span-2">
          <CardHeader className="flex flex-row items-center justify-between">
            <div>
              <CardTitle>
                {t("ui.admin.groups.list.title", "User Groups")}
              </CardTitle>
              <CardDescription>
                {t(
                  "msg.admin.groups.list.subtitle",
                  "이 테넌트에 정의된 사용자 그룹 목록입니다.",
                )}
              </CardDescription>
            </div>
            <Button
              variant="ghost"
              size="sm"
              onClick={() => groupsQuery.refetch()}
            >
              <RefreshCw size={14} />
            </Button>
          </CardHeader>
          <CardContent>
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>
                    {t("ui.admin.groups.table.name", "NAME")}
                  </TableHead>
                  <TableHead>
                    {t("ui.admin.groups.table.members", "MEMBERS")}
                  </TableHead>
                  <TableHead className="text-right">
                    {t("ui.admin.groups.table.actions", "ACTIONS")}
                  </TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {groupsQuery.isLoading && (
                  <TableRow>
                    <TableCell colSpan={3}>
                      {t("msg.admin.groups.list.loading", "로딩 중...")}
                    </TableCell>
                  </TableRow>
                )}
                {!groupsQuery.isLoading && groupTree.length === 0 && (
                  <TableRow>
                    <TableCell
                      colSpan={3}
                      className="text-center py-8 text-muted-foreground"
                    >
                      {t(
                        "msg.admin.groups.list.empty",
                        "아직 등록된 그룹이 없습니다.",
                      )}
                    </TableCell>
                  </TableRow>
                )}
                {groupTree.map((node) => (
                  <UserGroupTreeNode
                    key={node.id}
                    node={node}
                    level={0}
                    onSelect={setSelectedGroupId}
                    selectedGroupId={selectedGroupId}
                    onDelete={(id) => {
                      if (
                        window.confirm(
                          t(
                            "msg.admin.groups.list.delete_confirm",
                            "그룹을 삭제하시겠습니까?",
                          ),
                        )
                      ) {
                        deleteMutation.mutate(id);
                      }
                    }}
                    onAddSubGroup={handleAddSubGroup}
                    addMemberMutation={addMemberMutation}
                    removeMemberMutation={removeMemberMutation}
                  />
                ))}
              </TableBody>
            </Table>
          </CardContent>
        </Card>
      </div>

      {/* 멤버 관리 섹션 (선택된 그룹이 있을 때) */}
      {currentGroup && (
        <Card className="bg-[var(--color-panel)] border-t-4 border-t-primary">
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Shield size={18} className="text-primary" />
              {t("msg.admin.groups.members.title", "[{{name}}] 멤버 관리", {
                name: currentGroup.name,
              })}
            </CardTitle>
            <CardDescription>
              {t(
                "ui.admin.groups.detail.members_subtitle",
                "그룹에 속한 멤버들을 확인하고 관리합니다.",
              )}
            </CardDescription>
          </CardHeader>
          <CardContent>
            <div className="flex justify-end mb-4">
              <Button
                size="sm"
                onClick={() => handleAddMember(currentGroup.id)}
                disabled={addMemberMutation.isPending}
              >
                <UserPlus size={14} className="mr-1" />
                {t("ui.common.add", "멤버 추가")}
              </Button>
            </div>
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>
                    {t("ui.admin.groups.members.table.name", "이름")}
                  </TableHead>
                  <TableHead>
                    {t("ui.admin.groups.members.table.email", "이메일")}
                  </TableHead>
                  <TableHead className="text-right">
                    {t("ui.admin.groups.members.table.remove", "제거")}
                  </TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {currentGroup.members?.length === 0 && (
                  <TableRow>
                    <TableCell
                      colSpan={3}
                      className="text-center py-4 text-muted-foreground"
                    >
                      {t("msg.admin.groups.members.empty", "멤버가 없습니다.")}
                    </TableCell>
                  </TableRow>
                )}
                {currentGroup.members?.map((user) => (
                  <TableRow key={user.id}>
                    <TableCell className="font-medium">{user.name}</TableCell>
                    <TableCell className="text-muted-foreground">
                      {user.email}
                    </TableCell>
                    <TableCell className="text-right">
                      <Button
                        variant="ghost"
                        size="sm"
                        onClick={() =>
                          removeMemberMutation.mutate({
                            groupId: currentGroup.id,
                            userId: user.id,
                          })
                        }
                        disabled={removeMemberMutation.isPending}
                      >
                        <UserMinus size={14} className="text-destructive" />
                      </Button>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </CardContent>
        </Card>
      )}
    </div>
  );
}

export default TenantGroupsPage;