"use client";

import { useDrag } from "react-dnd";
import { cn } from "@/lib/utils";
import { PopComponentType } from "../types/pop-layout";
import { Square } from "lucide-react";

// DnD 타입 상수
const DND_ITEM_TYPES = {
  COMPONENT: "component",
} as const;

// 컴포넌트 정의
interface PaletteItem {
  type: PopComponentType;
  label: string;
  icon: React.ElementType;
  description: string;
}

const PALETTE_ITEMS: PaletteItem[] = [
  {
    type: "pop-sample",
    label: "샘플 박스",
    icon: Square,
    description: "크기 조정 테스트용",
  },
];

// 드래그 가능한 컴포넌트 아이템
function DraggablePaletteItem({ item }: { item: PaletteItem }) {
  const [{ isDragging }, drag] = useDrag(
    () => ({
      type: DND_ITEM_TYPES.COMPONENT,
      item: { type: DND_ITEM_TYPES.COMPONENT, componentType: item.type },
      collect: (monitor) => ({
        isDragging: monitor.isDragging(),
      }),
    }),
    [item.type]
  );

  const Icon = item.icon;

  return (
    <div
      ref={drag}
      className={cn(
        "flex cursor-grab items-center gap-3 rounded-md border bg-white p-3",
        "transition-all hover:border-primary hover:shadow-sm",
        isDragging && "opacity-50 cursor-grabbing"
      )}
    >
      <div className="flex h-9 w-9 items-center justify-center rounded bg-muted">
        <Icon className="h-4 w-4 text-muted-foreground" />
      </div>
      <div className="flex-1 min-w-0">
        <div className="text-sm font-medium">{item.label}</div>
        <div className="text-xs text-muted-foreground truncate">
          {item.description}
        </div>
      </div>
    </div>
  );
}

// 컴포넌트 팔레트 패널
export default function ComponentPalette() {
  return (
    <div className="flex h-full flex-col bg-gray-50">
      {/* 헤더 */}
      <div className="border-b bg-white px-4 py-3">
        <h3 className="text-sm font-semibold">컴포넌트</h3>
        <p className="text-xs text-muted-foreground">
          드래그하여 캔버스에 배치
        </p>
      </div>

      {/* 컴포넌트 목록 */}
      <div className="flex-1 overflow-y-auto p-3">
        <div className="space-y-2">
          {PALETTE_ITEMS.map((item) => (
            <DraggablePaletteItem key={item.type} item={item} />
          ))}
        </div>
      </div>

      {/* 하단 안내 */}
      <div className="border-t bg-white px-4 py-3">
        <p className="text-xs text-muted-foreground">
          Tip: 캔버스의 그리드 칸에 드롭하세요
        </p>
      </div>
    </div>
  );
}