wace_rps/frontend/components/admin/CodeCategoryPanel.tsx

"use client";

import React, { useState } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { LoadingSpinner } from "@/components/common/LoadingSpinner";
import { CodeCategoryFormModal } from "./CodeCategoryFormModal";
import { CategoryItem } from "./CategoryItem";
import { AlertModal } from "@/components/common/AlertModal";
import { Search, Plus } from "lucide-react";
import { useDeleteCategory } from "@/hooks/queries/useCategories";
import { useCategoriesInfinite } from "@/hooks/queries/useCategoriesInfinite";

interface CodeCategoryPanelProps {
  selectedCategoryCode: string;
  onSelectCategory: (categoryCode: string) => void;
}

export function CodeCategoryPanel({ selectedCategoryCode, onSelectCategory }: CodeCategoryPanelProps) {
  // 검색 및 필터 상태 (먼저 선언)
  const [searchTerm, setSearchTerm] = useState("");
  const [showActiveOnly, setShowActiveOnly] = useState(false);

  // React Query로 카테고리 데이터 관리 (무한 스크롤)
  const {
    data: categories = [],
    isLoading,
    error,
    handleScroll,
    isFetchingNextPage,
    hasNextPage,
  } = useCategoriesInfinite({
    search: searchTerm || undefined,
    active: showActiveOnly || undefined, // isActive -> active로 수정
  });
  const deleteCategoryMutation = useDeleteCategory();

  // 모달 상태
  const [showFormModal, setShowFormModal] = useState(false);
  const [editingCategory, setEditingCategory] = useState<string>("");
  const [showDeleteModal, setShowDeleteModal] = useState(false);
  const [deletingCategory, setDeletingCategory] = useState<string>("");

  // 새 카테고리 생성
  const handleNewCategory = () => {
    setEditingCategory("");
    setShowFormModal(true);
  };

  // 카테고리 수정
  const handleEditCategory = (categoryCode: string) => {
    setEditingCategory(categoryCode);
    setShowFormModal(true);
  };

  // 카테고리 삭제 확인
  const handleDeleteCategory = (categoryCode: string) => {
    setDeletingCategory(categoryCode);
    setShowDeleteModal(true);
  };

  // 카테고리 삭제 실행
  const handleConfirmDelete = async () => {
    if (!deletingCategory) return;

    try {
      await deleteCategoryMutation.mutateAsync(deletingCategory);

      // 삭제된 카테고리가 선택된 상태라면 선택 해제
      if (selectedCategoryCode === deletingCategory) {
        onSelectCategory("");
      }

      setShowDeleteModal(false);
      setDeletingCategory("");
    } catch (error) {
      console.error("카테고리 삭제 실패:", error);
    }
  };

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

  return (
    <div className="flex h-full min-h-0 flex-col">
      {/* 검색 + 등록 + 활성 토글 — 한 줄로 컴팩트 */}
      <div className="flex flex-shrink-0 items-center gap-1.5 pb-2">
        <div className="relative flex-1">
          <Search className="pointer-events-none absolute left-2 top-1/2 h-3 w-3 -translate-y-1/2 text-muted-foreground" />
          <Input
            placeholder="카테고리 검색"
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
            className="h-7 pl-7 text-xs"
          />
        </div>
        <Button onClick={handleNewCategory} size="sm" className="h-7 gap-1 px-2 text-xs">
          <Plus className="h-3 w-3" /> 등록
        </Button>
      </div>
      <label className="flex flex-shrink-0 items-center gap-1.5 pb-2 text-[11px] text-muted-foreground">
        <input
          type="checkbox"
          checked={showActiveOnly}
          onChange={(e) => setShowActiveOnly(e.target.checked)}
          className="h-3 w-3 rounded border-input"
        />
        활성만 표시
      </label>

      {/* 카테고리 목록 (자체 스크롤 + 무한 스크롤) */}
      <div className="min-h-0 flex-1 space-y-1 overflow-y-auto pr-1" onScroll={handleScroll}>
        {isLoading ? (
          <div className="flex h-24 items-center justify-center">
            <LoadingSpinner />
          </div>
        ) : categories.length === 0 ? (
          <div className="flex h-24 items-center justify-center">
            <p className="text-xs text-muted-foreground">
              {searchTerm ? "검색 결과가 없습니다." : "카테고리가 없습니다."}
            </p>
          </div>
        ) : (
          <>
            {categories.map((category, index) => (
              <CategoryItem
                key={`${category.category_code}-${index}`}
                category={category}
                isSelected={selectedCategoryCode === category.category_code}
                onSelect={() => onSelectCategory(category.category_code)}
                onEdit={() => handleEditCategory(category.category_code)}
                onDelete={() => handleDeleteCategory(category.category_code)}
              />
            ))}

            {/* 추가 로딩 표시 */}
            {isFetchingNextPage && (
              <div className="flex items-center justify-center py-2">
                <LoadingSpinner size="sm" />
                <span className="ml-1.5 text-[11px] text-muted-foreground">로딩 중…</span>
              </div>
            )}

            {/* 더 이상 데이터가 없을 때 */}
            {!hasNextPage && categories.length > 0 && (
              <div className="py-2 text-center text-[11px] text-muted-foreground">— 끝 —</div>
            )}
          </>
        )}
      </div>

      {/* 카테고리 폼 모달 */}
      {showFormModal && (
        <CodeCategoryFormModal
          isOpen={showFormModal}
          onClose={() => setShowFormModal(false)}
          editingCategoryCode={editingCategory}
          categories={categories}
        />
      )}

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