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

"use client";

import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Badge } from "@/components/ui/badge";
import { LoadingSpinner } from "@/components/common/LoadingSpinner";
import { CodeFormModal } from "./CodeFormModal";
import { SortableCodeItem } from "./SortableCodeItem";
import { AlertModal } from "@/components/common/AlertModal";
import { Search, Plus } from "lucide-react";
import { cn } from "@/lib/utils";
import { useCodes, useDeleteCode, useReorderCodes } from "@/hooks/queries/useCodes";
import type { CodeInfo } from "@/types/commonCode";

// Drag and Drop
import {
  DndContext,
  closestCenter,
  KeyboardSensor,
  PointerSensor,
  useSensor,
  useSensors,
  DragOverlay,
  type DragStartEvent,
  type DragEndEvent,
} from "@dnd-kit/core";
import {
  arrayMove,
  SortableContext,
  sortableKeyboardCoordinates,
  verticalListSortingStrategy,
} from "@dnd-kit/sortable";

interface CodeDetailPanelProps {
  categoryCode: string;
}

export function CodeDetailPanel({ categoryCode }: CodeDetailPanelProps) {
  // React Query로 코드 데이터 관리
  const { data: codes = [], isLoading, error } = useCodes(categoryCode);
  const deleteCodeMutation = useDeleteCode();
  const reorderCodesMutation = useReorderCodes();

  // 로컬 상태
  const [searchTerm, setSearchTerm] = useState("");
  const [showActiveOnly, setShowActiveOnly] = useState(false);

  const [showFormModal, setShowFormModal] = useState(false);
  const [editingCode, setEditingCode] = useState<CodeInfo | null>(null);
  const [showDeleteModal, setShowDeleteModal] = useState(false);
  const [deletingCode, setDeletingCode] = useState<CodeInfo | null>(null);

  // 드래그 상태
  const [activeId, setActiveId] = useState<string | null>(null);

  // Drag and Drop 센서
  const sensors = useSensors(
    useSensor(PointerSensor),
    useSensor(KeyboardSensor, {
      coordinateGetter: sortableKeyboardCoordinates,
    }),
  );

  // 필터링된 코드 목록
  const filteredCodes = codes.filter((code) => {
    const matchesSearch =
      code.code_name.toLowerCase().includes(searchTerm.toLowerCase()) ||
      code.code_value.toLowerCase().includes(searchTerm.toLowerCase());

    const matchesActive = !showActiveOnly || code.is_active === "Y";

    return matchesSearch && matchesActive;
  });

  // 새 코드 생성
  const handleNewCode = () => {
    setEditingCode(null);
    setShowFormModal(true);
  };

  // 코드 수정
  const handleEditCode = (code: CodeInfo) => {
    setEditingCode(code);
    setShowFormModal(true);
  };

  // 코드 삭제 확인
  const handleDeleteCode = (code: CodeInfo) => {
    setDeletingCode(code);
    setShowDeleteModal(true);
  };

  // 코드 삭제 실행
  const handleConfirmDelete = async () => {
    if (!deletingCode) return;

    try {
      await deleteCodeMutation.mutateAsync({
        categoryCode,
        codeValue: deletingCode.code_value,
      });

      setShowDeleteModal(false);
      setDeletingCode(null);
    } catch (error) {
      console.error("코드 삭제 실패:", error);
    }
  };

  // 드래그 시작 핸들러
  const handleDragStart = (event: DragStartEvent) => {
    setActiveId(event.active.id as string);
  };

  // 드래그 앤 드롭 처리
  const handleDragEnd = async (event: DragEndEvent) => {
    setActiveId(null);
    const { active, over } = event;

    if (over && active.id !== over.id) {
      const oldIndex = filteredCodes.findIndex((code) => code.code_value === active.id);
      const newIndex = filteredCodes.findIndex((code) => code.code_value === over.id);

      const newOrder = arrayMove(filteredCodes, oldIndex, newIndex);

      // 순서 업데이트를 위한 데이터 준비
      const reorderData = newOrder.map((code, index) => ({
        codeValue: code.code_value,
        sortOrder: index + 1,
      }));

      try {
        await reorderCodesMutation.mutateAsync({
          categoryCode,
          codes: reorderData,
        });
      } catch (error) {
        console.error("코드 순서 변경 실패:", error);
      }
    }
  };

  if (!categoryCode) {
    return (
      <div className="flex h-full items-center justify-center">
        <div className="text-center text-gray-500">
          <p>카테고리를 선택하세요</p>
        </div>
      </div>
    );
  }

  if (error) {
    return (
      <div className="flex h-full items-center justify-center">
        <div className="text-center">
          <p className="text-red-600">코드를 불러오는 중 오류가 발생했습니다.</p>
          <Button variant="outline" onClick={() => window.location.reload()} className="mt-2">
            다시 시도
          </Button>
        </div>
      </div>
    );
  }

  return (
    <div className="flex h-full flex-col">
      {/* 검색 및 필터 */}
      <div className="border-b p-4">
        <div className="space-y-3">
          {/* 검색 */}
          <div className="relative">
            <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-gray-400" />
            <Input
              placeholder="코드 검색..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="pl-10"
            />
          </div>

          {/* 활성 필터 */}
          <div className="flex items-center space-x-2">
            <input
              type="checkbox"
              id="activeOnlyCodes"
              checked={showActiveOnly}
              onChange={(e) => setShowActiveOnly(e.target.checked)}
              className="rounded border-gray-300"
            />
            <label htmlFor="activeOnlyCodes" className="text-sm text-gray-600">
              활성 코드만 표시
            </label>
          </div>

          {/* 새 코드 버튼 */}
          <Button onClick={handleNewCode} className="w-full" size="sm">
            <Plus className="mr-2 h-4 w-4" />새 코드
          </Button>
        </div>
      </div>

      {/* 코드 목록 */}
      <div className="flex-1 overflow-y-auto">
        {isLoading ? (
          <div className="flex h-32 items-center justify-center">
            <LoadingSpinner />
          </div>
        ) : filteredCodes.length === 0 ? (
          <div className="p-4 text-center text-gray-500">
            {searchTerm ? "검색 결과가 없습니다." : "코드가 없습니다."}
          </div>
        ) : (
          <div className="p-2">
            <DndContext
              sensors={sensors}
              collisionDetection={closestCenter}
              onDragStart={handleDragStart}
              onDragEnd={handleDragEnd}
            >
              <SortableContext
                items={filteredCodes.map((code) => code.code_value)}
                strategy={verticalListSortingStrategy}
              >
                <div className="space-y-1">
                  {filteredCodes.map((code) => (
                    <SortableCodeItem
                      key={code.code_value}
                      code={code}
                      categoryCode={categoryCode}
                      onEdit={() => handleEditCode(code)}
                      onDelete={() => handleDeleteCode(code)}
                    />
                  ))}
                </div>
              </SortableContext>

              <DragOverlay>
                {activeId ? (
                  <div className="cursor-grabbing rounded-lg border border-gray-300 bg-white p-3 shadow-lg">
                    {(() => {
                      const activeCode = filteredCodes.find((code) => code.code_value === activeId);
                      if (!activeCode) return null;
                      return (
                        <div className="flex items-start justify-between">
                          <div className="min-w-0 flex-1">
                            <div className="flex items-center gap-2">
                              <h3 className="font-medium text-gray-900">{activeCode.code_name}</h3>
                              <Badge
                                variant={activeCode.is_active === "Y" ? "default" : "secondary"}
                                className={cn(
                                  "transition-colors",
                                  activeCode.is_active === "Y"
                                    ? "bg-green-100 text-green-800"
                                    : "bg-gray-100 text-gray-600",
                                )}
                              >
                                {activeCode.is_active === "Y" ? "활성" : "비활성"}
                              </Badge>
                            </div>
                            <p className="mt-1 text-sm text-gray-600">{activeCode.code_value}</p>
                            {activeCode.description && (
                              <p className="mt-1 text-sm text-gray-500">{activeCode.description}</p>
                            )}
                          </div>
                        </div>
                      );
                    })()}
                  </div>
                ) : null}
              </DragOverlay>
            </DndContext>
          </div>
        )}
      </div>

      {/* 코드 폼 모달 */}
      {showFormModal && (
        <CodeFormModal
          isOpen={showFormModal}
          onClose={() => {
            setShowFormModal(false);
            setEditingCode(null);
          }}
          categoryCode={categoryCode}
          editingCode={editingCode}
        />
      )}

      {/* 삭제 확인 모달 */}
      {showDeleteModal && (
        <AlertModal
          isOpen={showDeleteModal}
          onClose={() => setShowDeleteModal(false)}
          type="error"
          title="코드 삭제"
          message="정말로 이 코드를 삭제하시겠습니까? 이 작업은 되돌릴 수 없습니다."
          confirmText="삭제"
          onConfirm={handleConfirmDelete}
        />
      )}
    </div>
  );
}