/**
 * 앨범 트랙 입력 컴포넌트
 */
import { memo } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { Trash2, Star, ChevronDown } from 'lucide-react';
import { CustomSelect } from '../common';

const VIDEO_TYPE_OPTIONS = [
  { value: '', label: '선택' },
  { value: 'music_video', label: '뮤직비디오' },
  { value: 'special', label: '스페셜 영상' },
];

/**
 * @param {Object} props
 * @param {Object} props.track - 트랙 데이터
 * @param {number} props.index - 트랙 인덱스
 * @param {Function} props.onUpdate - 트랙 업데이트 핸들러 (index, field, value)
 * @param {Function} props.onRemove - 트랙 삭제 핸들러 ()
 */
const TrackItem = memo(function TrackItem({ track, index, onUpdate, onRemove }) {
  return (
    <div className="border border-gray-200 rounded-xl p-4">
      <div className="flex items-center justify-between mb-4">
        <div className="flex items-center gap-3">
          <span className="w-8 h-8 bg-gray-100 rounded-lg flex items-center justify-center text-sm font-medium text-gray-600">
            {String(track.track_number).padStart(2, '0')}
          </span>
          <button
            type="button"
            onClick={() => onUpdate(index, 'is_title_track', !track.is_title_track)}
            className={`flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-medium transition-colors ${
              track.is_title_track
                ? 'bg-primary text-white'
                : 'bg-gray-100 text-gray-500 hover:bg-gray-200'
            }`}
          >
            <Star size={12} fill={track.is_title_track ? 'currentColor' : 'none'} />
            타이틀
          </button>
        </div>
        <button
          type="button"
          onClick={onRemove}
          className="p-1.5 text-gray-400 hover:text-red-500 hover:bg-red-50 rounded-lg transition-colors"
        >
          <Trash2 size={16} />
        </button>
      </div>

      <div className="grid grid-cols-4 gap-4">
        <div className="col-span-3">
          <input
            type="text"
            value={track.title}
            onChange={(e) => onUpdate(index, 'title', e.target.value)}
            className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
            placeholder="곡 제목"
          />
        </div>
        <div>
          <input
            type="text"
            value={track.duration || ''}
            onChange={(e) => onUpdate(index, 'duration', e.target.value)}
            className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent text-center"
            placeholder="0:00"
          />
        </div>
      </div>

      {/* 상세 정보 토글 */}
      <div className="mt-3">
        <button
          type="button"
          onClick={() => onUpdate(index, 'showDetails', !track.showDetails)}
          className="text-sm text-gray-500 hover:text-gray-700 flex items-center gap-1 transition-colors"
        >
          <ChevronDown
            size={14}
            className={`transition-transform ${track.showDetails ? 'rotate-180' : ''}`}
          />
          상세 정보 {track.showDetails ? '접기' : '펼치기'}
        </button>
      </div>

      <AnimatePresence>
        {track.showDetails && (
          <motion.div
            initial={{ height: 0, opacity: 0 }}
            animate={{ height: 'auto', opacity: 1 }}
            exit={{ height: 0, opacity: 0 }}
            transition={{ duration: 0.2 }}
          >
            {/* 작사/작곡/편곡 */}
            <div className="space-y-3 mt-3">
              <div>
                <label className="block text-xs text-gray-500 mb-1">작사</label>
                <input
                  type="text"
                  value={track.lyricist || ''}
                  onChange={(e) => onUpdate(index, 'lyricist', e.target.value)}
                  className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
                  placeholder="여러 명일 경우 쉼표로 구분"
                />
              </div>
              <div>
                <label className="block text-xs text-gray-500 mb-1">작곡</label>
                <input
                  type="text"
                  value={track.composer || ''}
                  onChange={(e) => onUpdate(index, 'composer', e.target.value)}
                  className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
                  placeholder="여러 명일 경우 쉼표로 구분"
                />
              </div>
              <div>
                <label className="block text-xs text-gray-500 mb-1">편곡</label>
                <input
                  type="text"
                  value={track.arranger || ''}
                  onChange={(e) => onUpdate(index, 'arranger', e.target.value)}
                  className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
                  placeholder="여러 명일 경우 쉼표로 구분"
                />
              </div>
            </div>

            {/* 비디오 URL */}
            <div className="mt-3">
              <label className="block text-xs text-gray-500 mb-1">영상 URL</label>
              <div className="flex gap-2">
                <input
                  type="text"
                  value={track.video_url || ''}
                  onChange={(e) => onUpdate(index, 'video_url', e.target.value)}
                  className="flex-1 px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
                  placeholder="https://youtube.com/watch?v=..."
                />
                <CustomSelect
                  value={track.video_type || ''}
                  onChange={(value) => onUpdate(index, 'video_type', value)}
                  options={VIDEO_TYPE_OPTIONS}
                  placeholder="선택"
                  size="sm"
                  className="w-32"
                />
              </div>
            </div>

            {/* 가사 */}
            <div className="mt-3">
              <label className="block text-xs text-gray-500 mb-1">가사</label>
              <textarea
                value={track.lyrics || ''}
                onChange={(e) => onUpdate(index, 'lyrics', e.target.value)}
                rows={12}
                className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent resize-none min-h-[200px]"
                placeholder="가사를 입력하세요..."
              />
            </div>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
});

export default TrackItem;
