ERP-node/frontend/components/admin/SortableCodeItem.tsx

"use client";

import React from "react";
import { useSortable } from "@dnd-kit/sortable";
import { CSS } from "@dnd-kit/utilities";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Edit, Trash2, CornerDownRight, Plus, ChevronRight, ChevronDown } from "lucide-react";
import { cn } from "@/lib/utils";
import { useUpdateCode } from "@/hooks/queries/useCodes";
import type { CodeInfo } from "@/types/commonCode";

interface SortableCodeItemProps {
  code: CodeInfo;
  categoryCode: string;
  onEdit: () => void;
  onDelete: () => void;
  onAddChild: () => void; // 하위 코드 추가
  isDragOverlay?: boolean;
  maxDepth?: number; // 최대 깊이 (기본값 3)
  hasChildren?: boolean; // 자식이 있는지 여부
  childCount?: number; // 자식 개수
  isExpanded?: boolean; // 펼쳐진 상태
  onToggleExpand?: () => void; // 접기/펼치기 토글
}

export function SortableCodeItem({
  code,
  categoryCode,
  onEdit,
  onDelete,
  onAddChild,
  isDragOverlay = false,
  maxDepth = 3,
  hasChildren = false,
  childCount = 0,
  isExpanded = true,
  onToggleExpand,
}: SortableCodeItemProps) {
  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
    id: code.codeValue || code.code_value || "",
    disabled: isDragOverlay,
  });
  const updateCodeMutation = useUpdateCode();

  const style = {
    transform: CSS.Transform.toString(transform),
    transition,
  };

  // 활성/비활성 토글 핸들러
  const handleToggleActive = async (checked: boolean) => {
    try {
      const codeValue = code.codeValue || code.code_value;
      if (!codeValue) {
        return;
      }

      await updateCodeMutation.mutateAsync({
        categoryCode,
        codeValue: codeValue,
        data: {
          codeName: code.codeName || code.code_name,
          codeNameEng: code.codeNameEng || code.code_name_eng || "",
          description: code.description || "",
          sortOrder: code.sortOrder || code.sort_order,
          isActive: checked ? "Y" : "N",
        },
      });
    } catch (error) {
      console.error("코드 활성 상태 변경 실패:", error);
    }
  };

  // 계층구조 깊이에 따른 들여쓰기
  const depth = code.depth || 1;
  const indentLevel = (depth - 1) * 28; // 28px per level
  const hasParent = !!(code.parentCodeValue || code.parent_code_value);

  return (
    <div className="flex items-stretch">
      {/* 계층구조 들여쓰기 영역 */}
      {depth > 1 && (
        <div
          className="flex items-center justify-end pr-2"
          style={{ width: `${indentLevel}px`, minWidth: `${indentLevel}px` }}
        >
          <CornerDownRight className="text-muted-foreground/50 h-4 w-4" />
        </div>
      )}

      <div
        ref={setNodeRef}
        style={style}
        {...attributes}
        {...listeners}
        className={cn(
          "group bg-card flex-1 cursor-grab rounded-lg border p-4 shadow-sm transition-all hover:shadow-md",
          isDragging && "cursor-grabbing opacity-50",
          depth === 1 && "border-l-primary border-l-4",
          depth === 2 && "border-l-4 border-l-blue-400",
          depth === 3 && "border-l-4 border-l-green-400",
        )}
      >
        <div className="flex items-start justify-between gap-2">
          <div className="min-w-0 flex-1">
            <div className="flex flex-wrap items-center gap-2">
              {/* 접기/펼치기 버튼 (자식이 있을 때만 표시) */}
              {hasChildren && onToggleExpand && (
                <button
                  type="button"
                  onClick={(e) => {
                    e.preventDefault();
                    e.stopPropagation();
                    onToggleExpand();
                  }}
                  onPointerDown={(e) => e.stopPropagation()}
                  onMouseDown={(e) => e.stopPropagation()}
                  className="text-muted-foreground hover:text-foreground -ml-1 flex h-5 w-5 items-center justify-center rounded transition-colors hover:bg-gray-100"
                  title={isExpanded ? "접기" : "펼치기"}
                >
                  {isExpanded ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
                </button>
              )}
              <h4 className="text-sm font-semibold">{code.codeName || code.code_name}</h4>
              {/* 접힌 상태에서 자식 개수 표시 */}
              {hasChildren && !isExpanded && <span className="text-muted-foreground text-[10px]">({childCount})</span>}
              {/* 깊이 표시 배지 */}
              {depth === 1 && (
                <Badge
                  variant="outline"
                  className="border-primary/30 bg-primary/10 text-primary px-1.5 py-0 text-[10px]"
                >
                  대분류
                </Badge>
              )}
              {depth === 2 && (
                <Badge variant="outline" className="bg-blue-50 px-1.5 py-0 text-[10px] text-blue-600">
                  중분류
                </Badge>
              )}
              {depth === 3 && (
                <Badge variant="outline" className="bg-green-50 px-1.5 py-0 text-[10px] text-green-600">
                  소분류
                </Badge>
              )}
              {depth > 3 && (
                <Badge variant="outline" className="bg-muted px-1.5 py-0 text-[10px]">
                  {depth}단계
                </Badge>
              )}
              <Badge
                variant={code.isActive === "Y" || code.is_active === "Y" ? "default" : "secondary"}
                className={cn(
                  "cursor-pointer text-xs transition-colors",
                  updateCodeMutation.isPending && "cursor-not-allowed opacity-50",
                )}
                onClick={(e) => {
                  e.preventDefault();
                  e.stopPropagation();
                  if (!updateCodeMutation.isPending) {
                    const isActive = code.isActive === "Y" || code.is_active === "Y";
                    handleToggleActive(!isActive);
                  }
                }}
                onPointerDown={(e) => e.stopPropagation()}
                onMouseDown={(e) => e.stopPropagation()}
              >
                {code.isActive === "Y" || code.is_active === "Y" ? "활성" : "비활성"}
              </Badge>
            </div>
            <p className="text-muted-foreground mt-1 text-xs">{code.codeValue || code.code_value}</p>
            {/* 부모 코드 표시 */}
            {hasParent && (
              <p className="text-muted-foreground mt-0.5 text-[10px]">
                상위: {code.parentCodeValue || code.parent_code_value}
              </p>
            )}
            {code.description && <p className="text-muted-foreground mt-1 text-xs">{code.description}</p>}
          </div>

          {/* 액션 버튼 */}
          <div
            className="flex items-center gap-1"
            onPointerDown={(e) => e.stopPropagation()}
            onMouseDown={(e) => e.stopPropagation()}
          >
            {/* 하위 코드 추가 버튼 (최대 깊이 미만일 때만 표시) */}
            {depth < maxDepth && (
              <Button
                variant="ghost"
                size="sm"
                onClick={(e) => {
                  e.preventDefault();
                  e.stopPropagation();
                  onAddChild();
                }}
                title="하위 코드 추가"
                className="text-blue-600 hover:bg-blue-50 hover:text-blue-700"
              >
                <Plus className="h-3 w-3" />
              </Button>
            )}
            <Button
              variant="ghost"
              size="sm"
              onClick={(e) => {
                e.preventDefault();
                e.stopPropagation();
                onEdit();
              }}
            >
              <Edit className="h-3 w-3" />
            </Button>
            <Button
              variant="ghost"
              size="sm"
              onClick={(e) => {
                e.preventDefault();
                e.stopPropagation();
                onDelete();
              }}
            >
              <Trash2 className="h-3 w-3" />
            </Button>
          </div>
        </div>
      </div>
    </div>
  );
}