"use client";

import React from "react";
import { useSortable } from "@dnd-kit/sortable";
import { CSS } from "@dnd-kit/utilities";
import { GripVertical, Settings, X } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { cn } from "@/lib/utils";
import type { ColumnConfig } from "../types";

interface SortableColumnItemProps {
  id: string;
  column: ColumnConfig;
  index: number;
  onSettingsClick: () => void;
  onRemove: () => void;
  showGroupingSettings?: boolean;
}

export const SortableColumnItem: React.FC<SortableColumnItemProps> = ({
  id,
  column,
  index,
  onSettingsClick,
  onRemove,
  showGroupingSettings = false,
}) => {
  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id });

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

  return (
    <div
      ref={setNodeRef}
      style={style}
      className={cn(
        "flex items-center gap-2 rounded-md border bg-card p-2",
        isDragging && "opacity-50 shadow-lg"
      )}
    >
      {/* 드래그 핸들 */}
      <div
        {...attributes}
        {...listeners}
        className="cursor-grab touch-none text-muted-foreground hover:text-foreground"
      >
        <GripVertical className="h-4 w-4" />
      </div>

      {/* 컬럼 정보 */}
      <div className="flex-1 min-w-0">
        <div className="flex items-center gap-2">
          <span className="text-sm font-medium truncate">
            {column.label || column.name || `컬럼 ${index + 1}`}
          </span>
          {column.name && column.label && (
            <span className="text-xs text-muted-foreground truncate">
              ({column.name})
            </span>
          )}
        </div>

        {/* 설정 요약 뱃지 */}
        <div className="flex flex-wrap gap-1 mt-1">
          {column.displayRow && (
            <Badge variant="outline" className="text-[10px] h-4">
              {column.displayRow === "name" ? "이름행" : "정보행"}
            </Badge>
          )}
          {showGroupingSettings && column.displayConfig?.displayType === "badge" && (
            <Badge variant="secondary" className="text-[10px] h-4">
              배지
            </Badge>
          )}
          {showGroupingSettings && column.displayConfig?.aggregate?.enabled && (
            <Badge variant="secondary" className="text-[10px] h-4">
              {column.displayConfig.aggregate.function === "DISTINCT" ? "중복제거" : "개수"}
            </Badge>
          )}
          {column.sourceTable && (
            <Badge variant="outline" className="text-[10px] h-4">
              {column.sourceTable}
            </Badge>
          )}
        </div>
      </div>

      {/* 액션 버튼들 */}
      <div className="flex items-center gap-1 shrink-0">
        <Button
          size="sm"
          variant="ghost"
          className="h-7 w-7 p-0"
          onClick={onSettingsClick}
          title="세부설정"
        >
          <Settings className="h-3.5 w-3.5" />
        </Button>
        <Button
          size="sm"
          variant="ghost"
          className="h-7 w-7 p-0 text-destructive hover:text-destructive"
          onClick={onRemove}
          title="삭제"
        >
          <X className="h-3.5 w-3.5" />
        </Button>
      </div>
    </div>
  );
};

export default SortableColumnItem;


