import React, { useState, useEffect, useRef } from 'react';
import { Upload, Trash2, Play, Pause, Music, Download, Loader2, CheckCircle, XCircle } from 'lucide-react';
import { bgmApi } from '../api/client';

// 무료 BGM 카테고리
const BGM_CATEGORIES = [
  { id: 'upbeat', name: '신나는', keywords: ['upbeat', 'energetic', 'happy'] },
  { id: 'chill', name: '차분한', keywords: ['chill', 'calm', 'relaxing'] },
  { id: 'cinematic', name: '시네마틱', keywords: ['cinematic', 'epic', 'dramatic'] },
  { id: 'acoustic', name: '어쿠스틱', keywords: ['acoustic', 'guitar', 'folk'] },
  { id: 'electronic', name: '일렉트로닉', keywords: ['electronic', 'edm', 'dance'] },
  { id: 'lofi', name: '로파이', keywords: ['lofi', 'hip hop', 'beats'] },
];

export default function BGMPage() {
  const [bgmList, setBgmList] = useState([]);
  const [isLoading, setIsLoading] = useState(true);
  const [uploading, setUploading] = useState(false);
  const [playingId, setPlayingId] = useState(null);
  const [downloading, setDownloading] = useState(null); // 현재 다운로드 중인 카테고리 ID
  const [downloadStatus, setDownloadStatus] = useState({}); // 각 카테고리별 다운로드 상태
  const audioRef = useRef(null);
  const fileInputRef = useRef(null);

  const fetchBgmList = async () => {
    setIsLoading(true);
    try {
      const res = await bgmApi.list();
      setBgmList(res.data);
    } catch (err) {
      console.error('Failed to fetch BGM list:', err);
    } finally {
      setIsLoading(false);
    }
  };

  useEffect(() => {
    fetchBgmList();
  }, []);

  const handleUpload = async (e) => {
    const file = e.target.files?.[0];
    if (!file) return;

    setUploading(true);
    try {
      await bgmApi.upload(file);
      await fetchBgmList();
    } catch (err) {
      console.error('Failed to upload BGM:', err);
      alert('업로드 실패: ' + (err.response?.data?.detail || err.message));
    } finally {
      setUploading(false);
      if (fileInputRef.current) {
        fileInputRef.current.value = '';
      }
    }
  };

  const handleDelete = async (bgmId) => {
    if (!confirm('이 BGM을 삭제하시겠습니까?')) return;

    try {
      await bgmApi.delete(bgmId);
      setBgmList(bgmList.filter((b) => b.id !== bgmId));
      if (playingId === bgmId) {
        setPlayingId(null);
        if (audioRef.current) {
          audioRef.current.pause();
        }
      }
    } catch (err) {
      console.error('Failed to delete BGM:', err);
    }
  };

  const handlePlay = (bgm) => {
    if (playingId === bgm.id) {
      // Stop playing
      if (audioRef.current) {
        audioRef.current.pause();
      }
      setPlayingId(null);
    } else {
      // Start playing
      if (audioRef.current) {
        audioRef.current.src = bgm.path;
        audioRef.current.play();
      }
      setPlayingId(bgm.id);
    }
  };

  const formatDuration = (seconds) => {
    const mins = Math.floor(seconds / 60);
    const secs = Math.floor(seconds % 60);
    return `${mins}:${String(secs).padStart(2, '0')}`;
  };

  // 무료 BGM 다운로드
  const handleDownloadBgm = async (category) => {
    if (downloading) return; // 이미 다운로드 중이면 무시

    setDownloading(category.id);
    setDownloadStatus(prev => ({ ...prev, [category.id]: 'downloading' }));

    try {
      const res = await bgmApi.autoDownload(category.keywords, 120);
      if (res.data.success) {
        setDownloadStatus(prev => ({ ...prev, [category.id]: 'success' }));
        // BGM 리스트 새로고침
        await fetchBgmList();
      } else {
        setDownloadStatus(prev => ({ ...prev, [category.id]: 'error' }));
      }
    } catch (err) {
      console.error('BGM download failed:', err);
      setDownloadStatus(prev => ({ ...prev, [category.id]: 'error' }));
    } finally {
      setDownloading(null);
      // 3초 후 상태 초기화
      setTimeout(() => {
        setDownloadStatus(prev => ({ ...prev, [category.id]: null }));
      }, 3000);
    }
  };

  // 전체 카테고리 다운로드
  const handleDownloadAll = async () => {
    if (downloading) return;

    for (const category of BGM_CATEGORIES) {
      setDownloading(category.id);
      setDownloadStatus(prev => ({ ...prev, [category.id]: 'downloading' }));

      try {
        const res = await bgmApi.autoDownload(category.keywords, 120);
        if (res.data.success) {
          setDownloadStatus(prev => ({ ...prev, [category.id]: 'success' }));
        } else {
          setDownloadStatus(prev => ({ ...prev, [category.id]: 'error' }));
        }
      } catch (err) {
        console.error(`BGM download failed for ${category.name}:`, err);
        setDownloadStatus(prev => ({ ...prev, [category.id]: 'error' }));
      }

      // 잠시 대기 (API 제한 방지)
      await new Promise(resolve => setTimeout(resolve, 1000));
    }

    setDownloading(null);
    await fetchBgmList();

    // 5초 후 상태 초기화
    setTimeout(() => {
      setDownloadStatus({});
    }, 5000);
  };

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <h2 className="text-2xl font-bold">BGM 관리</h2>
        <label className="btn-primary flex items-center gap-2 cursor-pointer">
          <Upload size={18} />
          {uploading ? '업로드 중...' : 'BGM 업로드'}
          <input
            ref={fileInputRef}
            type="file"
            accept=".mp3,.wav,.m4a,.ogg"
            onChange={handleUpload}
            className="hidden"
            disabled={uploading}
          />
        </label>
      </div>

      <audio
        ref={audioRef}
        onEnded={() => setPlayingId(null)}
        className="hidden"
      />

      {/* 무료 BGM 다운로드 섹션 */}
      <div className="card">
        <div className="flex items-center justify-between mb-4">
          <div>
            <h3 className="font-medium flex items-center gap-2">
              <Download size={18} />
              무료 BGM 다운로드
            </h3>
            <p className="text-sm text-gray-500 mt-1">
              Freesound.org에서 CC0 라이선스 BGM을 다운로드합니다 (상업용 가능)
            </p>
          </div>
          <button
            onClick={handleDownloadAll}
            disabled={!!downloading}
            className="btn-secondary text-sm flex items-center gap-2"
          >
            {downloading ? (
              <>
                <Loader2 size={14} className="animate-spin" />
                다운로드 중...
              </>
            ) : (
              <>
                <Download size={14} />
                전체 다운로드
              </>
            )}
          </button>
        </div>

        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-3">
          {BGM_CATEGORIES.map((category) => {
            const status = downloadStatus[category.id];
            const isDownloading = downloading === category.id;

            return (
              <button
                key={category.id}
                onClick={() => handleDownloadBgm(category)}
                disabled={!!downloading}
                className={`p-3 rounded-lg border text-center transition-all ${
                  status === 'success'
                    ? 'bg-green-900/30 border-green-600 text-green-400'
                    : status === 'error'
                    ? 'bg-red-900/30 border-red-600 text-red-400'
                    : isDownloading
                    ? 'bg-blue-900/30 border-blue-600 text-blue-400'
                    : 'bg-gray-800 border-gray-700 hover:border-gray-600 text-gray-300'
                } ${downloading && !isDownloading ? 'opacity-50' : ''}`}
              >
                <div className="flex items-center justify-center gap-2">
                  {isDownloading ? (
                    <Loader2 size={16} className="animate-spin" />
                  ) : status === 'success' ? (
                    <CheckCircle size={16} />
                  ) : status === 'error' ? (
                    <XCircle size={16} />
                  ) : (
                    <Music size={16} />
                  )}
                  <span className="font-medium">{category.name}</span>
                </div>
              </button>
            );
          })}
        </div>
      </div>

      {isLoading ? (
        <div className="card text-center py-12 text-gray-500">
          로딩 중...
        </div>
      ) : bgmList.length === 0 ? (
        <div className="card text-center py-12 text-gray-500">
          <Music size={48} className="mx-auto mb-4 opacity-50" />
          <p>등록된 BGM이 없습니다.</p>
          <p className="text-sm mt-2">MP3, WAV 파일을 업로드하세요.</p>
        </div>
      ) : (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          {bgmList.map((bgm) => (
            <div
              key={bgm.id}
              className="card flex items-center gap-4 hover:border-gray-700 transition-colors"
            >
              <button
                onClick={() => handlePlay(bgm)}
                className={`w-12 h-12 rounded-full flex items-center justify-center transition-colors ${
                  playingId === bgm.id
                    ? 'bg-red-600 text-white'
                    : 'bg-gray-800 text-gray-400 hover:text-white'
                }`}
              >
                {playingId === bgm.id ? (
                  <Pause size={20} />
                ) : (
                  <Play size={20} className="ml-1" />
                )}
              </button>

              <div className="flex-1 min-w-0">
                <h3 className="font-medium truncate">{bgm.name}</h3>
                <p className="text-sm text-gray-500">
                  {formatDuration(bgm.duration)}
                </p>
              </div>

              <button
                onClick={() => handleDelete(bgm.id)}
                className="p-2 text-gray-500 hover:text-red-500 transition-colors"
                title="삭제"
              >
                <Trash2 size={18} />
              </button>
            </div>
          ))}
        </div>
      )}

      <div className="card bg-gray-800/50">
        <h3 className="font-medium mb-2">지원 형식</h3>
        <p className="text-sm text-gray-400">
          MP3, WAV, M4A, OGG 형식의 오디오 파일을 업로드할 수 있습니다.
          저작권에 유의하여 사용하세요.
        </p>
      </div>
    </div>
  );
}
