/**
 * 이미지 업로드 컴포넌트
 * - 다중 이미지 업로드 및 드래그 앤 드롭 정렬
 */
import { useState, memo } from 'react';
import { Image, Plus, X } from 'lucide-react';

/**
 * @param {Object} props
 * @param {Array} props.previews - 이미지 미리보기 URL 배열
 * @param {Function} props.onUpload - 파일 업로드 핸들러 (files)
 * @param {Function} props.onDelete - 이미지 삭제 핸들러 (index)
 * @param {Function} props.onReorder - 이미지 순서 변경 핸들러 (fromIndex, toIndex)
 * @param {Function} props.onOpenLightbox - 라이트박스 열기 핸들러 (index)
 */
const ImageUploader = memo(function ImageUploader({
  previews,
  onUpload,
  onDelete,
  onReorder,
  onOpenLightbox,
}) {
  const [draggedIndex, setDraggedIndex] = useState(null);
  const [dragOverIndex, setDragOverIndex] = useState(null);

  // 파일 선택
  const handleFileChange = (e) => {
    const files = Array.from(e.target.files);
    if (files.length > 0) {
      onUpload(files);
    }
    // input 초기화 (같은 파일 다시 선택 가능하도록)
    e.target.value = '';
  };

  // 드래그 시작
  const handleDragStart = (e, index) => {
    setDraggedIndex(index);
    e.dataTransfer.effectAllowed = 'move';
    e.dataTransfer.setData('text/plain', index);
  };

  // 드래그 오버
  const handleDragOver = (e, index) => {
    e.preventDefault();
    e.dataTransfer.dropEffect = 'move';
    if (dragOverIndex !== index) {
      setDragOverIndex(index);
    }
  };

  // 드래그 종료
  const handleDragEnd = () => {
    setDraggedIndex(null);
    setDragOverIndex(null);
  };

  // 드롭 - 이미지 순서 변경
  const handleDrop = (e, dropIndex) => {
    e.preventDefault();
    if (draggedIndex === null || draggedIndex === dropIndex) {
      handleDragEnd();
      return;
    }
    onReorder(draggedIndex, dropIndex);
    handleDragEnd();
  };

  return (
    <div className="bg-white rounded-2xl shadow-sm p-8">
      <div className="flex items-center gap-2 mb-6">
        <Image size={20} className="text-primary" />
        <h2 className="text-lg font-bold text-gray-900">일정 이미지</h2>
        <span className="text-sm text-gray-400 ml-2">여러 장 업로드 가능</span>
      </div>

      {/* 이미지 그리드 */}
      <div className="grid grid-cols-4 gap-4">
        {/* 이미지 추가 버튼 - 항상 첫번째 */}
        <label className="aspect-square border-2 border-dashed border-gray-200 rounded-xl cursor-pointer hover:border-primary/50 hover:bg-primary/5 transition-colors flex flex-col items-center justify-center">
          <input
            type="file"
            accept="image/*"
            multiple
            onChange={handleFileChange}
            className="hidden"
          />
          <Plus size={24} className="text-gray-400 mb-2" />
          <p className="text-sm text-gray-500">이미지 추가</p>
        </label>

        {/* 이미지 목록 - 드래그 앤 드롭 가능 */}
        {previews.map((preview, index) => (
          <div
            key={index}
            className={`relative aspect-square rounded-xl overflow-hidden group cursor-grab active:cursor-grabbing transition-all duration-200 ${
              draggedIndex === index ? 'opacity-50 scale-95' : ''
            } ${
              dragOverIndex === index && draggedIndex !== index
                ? 'ring-2 ring-primary ring-offset-2'
                : ''
            }`}
            draggable
            onDragStart={(e) => handleDragStart(e, index)}
            onDragOver={(e) => handleDragOver(e, index)}
            onDragEnd={handleDragEnd}
            onDrop={(e) => handleDrop(e, index)}
          >
            {/* 이미지 클릭시 라이트박스 열기 */}
            <img
              src={preview}
              alt={`업로드 ${index + 1}`}
              className="w-full h-full object-cover"
              onClick={() => onOpenLightbox(index)}
              draggable={false}
            />
            {/* 호버시 어두운 오버레이 */}
            <div className="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors pointer-events-none" />
            {/* 순서 표시 */}
            <div className="absolute bottom-2 left-2 px-2 py-0.5 bg-black/50 rounded-full text-white text-xs font-medium">
              {index + 1}
            </div>
            {/* 삭제 버튼 */}
            <button
              type="button"
              onClick={(e) => {
                e.stopPropagation();
                onDelete(index);
              }}
              className="absolute top-2 right-2 w-7 h-7 bg-black/50 hover:bg-red-500 rounded-full flex items-center justify-center transition-all shadow-lg"
            >
              <X size={14} className="text-white" />
            </button>
          </div>
        ))}
      </div>
    </div>
  );
});

export default ImageUploader;
