import { useRef } from "react";
import { Image, Users, Check } from "lucide-react";

/**
 * 콘서트 정보 섹션
 * - 공연명
 * - 포스터
 * - 참여 멤버
 */
function ConcertInfoSection({
  title,
  setTitle,
  posterPreview,
  onPosterChange,
  onPosterRemove,
  members,
  selectedMemberIds,
  onToggleMember,
  onToggleAllMembers,
}) {
  const posterInputRef = useRef(null);

  const handlePosterChange = (e) => {
    const file = e.target.files[0];
    if (file) {
      onPosterChange(file);
    }
  };

  const isAllSelected = members.length > 0 && selectedMemberIds.length === members.length;

  return (
    <div className="bg-white rounded-2xl border border-gray-100 shadow-sm p-6">
      <h2 className="text-lg font-bold text-gray-900 mb-6">공연 정보</h2>

      <div className="space-y-6">
        {/* 공연명 */}
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">
            공연명 *
          </label>
          <input
            type="text"
            value={title}
            onChange={(e) => setTitle(e.target.value)}
            placeholder="예: fromis_9 WORLD TOUR NOW TOMORROW."
            className="w-full px-4 py-2.5 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
          />
        </div>

        {/* 포스터 */}
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">
            포스터
          </label>
          <div className="flex items-start gap-6">
            <div
              onClick={() => posterInputRef.current?.click()}
              className="w-40 h-56 rounded-xl border-2 border-dashed border-gray-200 flex items-center justify-center cursor-pointer hover:border-primary hover:bg-primary/5 transition-colors overflow-hidden"
            >
              {posterPreview ? (
                <img
                  src={posterPreview}
                  alt="포스터 미리보기"
                  className="w-full h-full object-cover"
                />
              ) : (
                <div className="text-center text-gray-400">
                  <Image size={32} className="mx-auto mb-2" />
                  <p className="text-xs">클릭하여 업로드</p>
                </div>
              )}
            </div>
            <input
              ref={posterInputRef}
              type="file"
              accept="image/*"
              onChange={handlePosterChange}
              className="hidden"
            />
            <div className="flex-1">
              <p className="text-sm text-gray-500 mb-2">
                권장 크기: 세로형 포스터 (예: 700x1000px)
              </p>
              <p className="text-sm text-gray-500">지원 형식: JPG, PNG, WebP</p>
              {posterPreview && (
                <button
                  type="button"
                  onClick={onPosterRemove}
                  className="mt-3 text-sm text-red-500 hover:text-red-600"
                >
                  이미지 제거
                </button>
              )}
            </div>
          </div>
        </div>

        {/* 참여 멤버 */}
        <div>
          <div className="flex items-center justify-between mb-3">
            <label className="flex items-center gap-2 text-sm font-medium text-gray-700">
              <Users size={16} />
              참여 멤버
            </label>
            <button
              type="button"
              onClick={onToggleAllMembers}
              className="text-sm text-primary hover:underline"
            >
              {isAllSelected ? "전체 해제" : "전체 선택"}
            </button>
          </div>

          <div className="grid grid-cols-5 gap-3">
            {members.map((member) => {
              const isSelected = selectedMemberIds.includes(member.id);
              return (
                <button
                  key={member.id}
                  type="button"
                  onClick={() => onToggleMember(member.id)}
                  className={`relative rounded-xl overflow-hidden transition-all ${
                    isSelected
                      ? "ring-2 ring-primary ring-offset-2"
                      : "hover:opacity-80"
                  }`}
                >
                  <div className="aspect-[3/4] bg-gray-100">
                    {member.image_url ? (
                      <img
                        src={member.image_url}
                        alt={member.name}
                        className="w-full h-full object-cover"
                      />
                    ) : (
                      <div className="w-full h-full flex items-center justify-center bg-gray-200">
                        <Users size={24} className="text-gray-400" />
                      </div>
                    )}
                  </div>
                  <div className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/70 to-transparent p-2">
                    <p className="text-white text-xs font-medium">{member.name}</p>
                  </div>
                  {isSelected && (
                    <div className="absolute top-2 right-2 w-5 h-5 bg-primary rounded-full flex items-center justify-center">
                      <Check size={12} className="text-white" />
                    </div>
                  )}
                </button>
              );
            })}
          </div>
        </div>
      </div>
    </div>
  );
}

export default ConcertInfoSection;
