invyone/frontend/components/admin/CodeInfoItem.tsx

"use client";

import React from "react";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Edit, Trash2 } from "lucide-react";
import { cn } from "@/lib/utils";
import { useUpdateCodeInfo } from "@/hooks/queries/useCodeInfo";
import type { CodeInfo } from "@/types/commonCode";

interface CodeInfoItemProps {
  row: CodeInfo;
  isSelected: boolean;
  onSelect: () => void;
  onEdit: () => void;
  onDelete: () => void;
}

export function CodeInfoItem({ row, isSelected, onSelect, onEdit, onDelete }: CodeInfoItemProps) {
  const updateMutation = useUpdateCodeInfo();

  const handleToggleActive = async (next: "Y" | "N") => {
    try {
      await updateMutation.mutateAsync({
        codeInfo: row.code_info,
        data: {
          code_name: row.code_name,
          code_name_eng: row.code_name_eng || "",
          description: row.description || "",
          sort_order: row.sort_order ?? 0,
          is_active: next,
        },
      });
    } catch (error) {
      console.error("그룹 활성 상태 변경 실패:", error);
    }
  };

  return (
    <div
      className={cn(
        "cursor-pointer rounded-lg border bg-card p-4 shadow-sm transition-all",
        isSelected ? "border-primary shadow-md" : "hover:shadow-md",
      )}
      onClick={onSelect}
    >
      <div className="flex items-start justify-between gap-2">
        <div className="min-w-0 flex-1">
          <div className="flex items-center gap-2">
            <h4 className="text-sm font-semibold">{row.code_name}</h4>
            <Badge
              variant={row.is_active === "Y" ? "default" : "secondary"}
              className={cn(
                "cursor-pointer text-xs transition-colors",
                updateMutation.isPending && "cursor-not-allowed opacity-50",
              )}
              onClick={(e) => {
                e.preventDefault();
                e.stopPropagation();
                if (!updateMutation.isPending) {
                  handleToggleActive(row.is_active === "Y" ? "N" : "Y");
                }
              }}
              onPointerDown={(e) => e.stopPropagation()}
              onMouseDown={(e) => e.stopPropagation()}
            >
              {row.is_active === "Y" ? "활성" : "비활성"}
            </Badge>
          </div>
          <p className="mt-1 text-xs text-muted-foreground">{row.code_info}</p>
          {row.description && (
            <p className="mt-1 text-xs text-muted-foreground">{row.description}</p>
          )}
        </div>

        {isSelected && (
          <div className="flex items-center gap-1" onClick={(e) => e.stopPropagation()}>
            <Button variant="ghost" size="sm" onClick={onEdit}>
              <Edit className="h-3 w-3" />
            </Button>
            <Button variant="ghost" size="sm" onClick={onDelete}>
              <Trash2 className="h-3 w-3" />
            </Button>
          </div>
        )}
      </div>
    </div>
  );
}