import { MusicFilled, MessageFilled } from '../icons/FilledIcons';
import { MUSIC_TRACKS, type SoundSettings, type MusicGenre, type NarrationLanguage, type NarrationVoice } from '../../types/studio';

interface Props {
  sound: SoundSettings;
  onGenreChange: (genre: MusicGenre) => void;
  onTrackChange: (trackId: string | null) => void;
  onNarrationToggle: (enabled: boolean) => void;
  onLanguageChange: (lang: NarrationLanguage) => void;
  onVoiceChange: (voice: NarrationVoice) => void;
  onSubtitleToggle: (enabled: boolean) => void;
}

const GENRES: { key: MusicGenre; label: string }[] = [
  { key: 'calm', label: 'Calm' },
  { key: 'upbeat', label: 'Upbeat' },
  { key: 'cinematic', label: 'Cinematic' },
  { key: 'corporate', label: 'Corporate' },
  { key: 'none', label: 'No Music' },
];

const LANGUAGES: { key: NarrationLanguage; label: string }[] = [
  { key: 'ko', label: '한국어' },
  { key: 'en', label: 'English' },
  { key: 'ja', label: '日本語' },
  { key: 'zh', label: '中文' },
];

export default function SoundStudioStep({ sound, onGenreChange, onTrackChange, onNarrationToggle, onLanguageChange, onVoiceChange, onSubtitleToggle }: Props) {
  const filteredTracks = MUSIC_TRACKS.filter(t => t.genre === sound.genre);

  return (
    <div className="space-y-10">
      {/* Music Genre */}
      <div>
        <h3 className="font-serif font-bold text-2xl text-[#0A1128] mb-2">배경 음악</h3>
        <p className="text-sm text-slate-500 mb-6">콘텐츠에 어울리는 음악 장르를 선택하세요</p>

        <div className="flex flex-wrap gap-2 mb-6">
          {GENRES.map(g => (
            <button
              key={g.key}
              onClick={() => onGenreChange(g.key)}
              className={`px-5 py-3 rounded-full text-sm font-medium transition-all ${
                sound.genre === g.key
                  ? 'bg-gradient-to-r from-[#4F1DA1] to-[#021341] text-white shadow-md'
                  : 'bg-white border border-slate-200 text-slate-600 hover:bg-slate-50 shadow-[2px_3px_6px_rgba(0,0,0,0.04)]'
              }`}
            >
              {g.label}
            </button>
          ))}
        </div>

        {/* Track List */}
        {sound.genre !== 'none' && (
          <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
            {filteredTracks.map(track => {
              const isSelected = sound.trackId === track.id;
              return (
                <button
                  key={track.id}
                  onClick={() => onTrackChange(isSelected ? null : track.id)}
                  className={`flex items-center gap-3 p-4 rounded-2xl border-2 transition-all text-left ${
                    isSelected
                      ? 'border-[#6C5CE7] bg-[#F3F0FF]/30 shadow-[3px_4px_12px_rgba(108,92,231,0.12)]'
                      : 'border-slate-100 bg-white shadow-[3px_4px_12px_rgba(0,0,0,0.06)] hover:border-[#D5CDF5]'
                  }`}
                >
                  <div className={`w-10 h-10 rounded-xl flex items-center justify-center shrink-0 ${
                    isSelected ? 'bg-[#F3F0FF]' : 'bg-slate-50'
                  }`}>
                    <MusicFilled size={18} className={isSelected ? 'text-[#6C5CE7]' : 'text-[#9B8AD4]'} />
                  </div>
                  <div className="min-w-0">
                    <p className={`text-sm font-semibold truncate ${isSelected ? 'text-[#0A1128]' : 'text-slate-700'}`}>
                      {track.name}
                    </p>
                    <p className="text-xs text-slate-400">{track.duration}</p>
                  </div>
                </button>
              );
            })}
          </div>
        )}
      </div>

      {/* Narration */}
      <div>
        <div className="flex items-center gap-4 mb-6">
          <h3 className="font-serif font-bold text-2xl text-[#0A1128]">나레이션</h3>
          <button
            onClick={() => onNarrationToggle(!sound.narrationEnabled)}
            className={`relative w-12 h-6 rounded-full transition-colors ${
              sound.narrationEnabled ? 'bg-[#6C5CE7]' : 'bg-slate-200'
            }`}
          >
            <div className={`absolute top-1 w-5 h-5 rounded-full bg-white shadow transition-transform ${
              sound.narrationEnabled ? 'translate-x-6' : 'translate-x-1'
            }`} />
          </button>
        </div>

        {sound.narrationEnabled && (
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
            {/* Language */}
            <div>
              <p className="text-sm font-medium text-slate-600 mb-3">언어</p>
              <div className="flex flex-wrap gap-2">
                {LANGUAGES.map(lang => (
                  <button
                    key={lang.key}
                    onClick={() => onLanguageChange(lang.key)}
                    className={`px-4 py-2 rounded-full text-sm font-medium transition-all ${
                      sound.narrationLanguage === lang.key
                        ? 'bg-gradient-to-r from-[#4F1DA1] to-[#021341] text-white shadow-md'
                        : 'bg-white border border-slate-200 text-slate-600 hover:bg-slate-50'
                    }`}
                  >
                    {lang.label}
                  </button>
                ))}
              </div>
            </div>

            {/* Voice */}
            <div>
              <p className="text-sm font-medium text-slate-600 mb-3">보이스</p>
              <div className="flex gap-3">
                {(['female', 'male'] as NarrationVoice[]).map(voice => (
                  <button
                    key={voice}
                    onClick={() => onVoiceChange(voice)}
                    className={`flex items-center gap-2 px-5 py-3 rounded-2xl border-2 transition-all ${
                      sound.narrationVoice === voice
                        ? 'border-[#6C5CE7] bg-[#F3F0FF]/30 shadow-[3px_4px_12px_rgba(108,92,231,0.12)]'
                        : 'border-slate-100 bg-white shadow-[3px_4px_12px_rgba(0,0,0,0.06)] hover:border-[#D5CDF5]'
                    }`}
                  >
                    <MessageFilled size={18} className={sound.narrationVoice === voice ? 'text-[#6C5CE7]' : 'text-[#9B8AD4]'} />
                    <span className="text-sm font-medium">{voice === 'female' ? 'Female' : 'Male'}</span>
                  </button>
                ))}
              </div>
            </div>
          </div>
        )}
      </div>

      {/* Subtitle */}
      <div>
        <div className="flex items-center gap-4">
          <h3 className="font-serif font-bold text-2xl text-[#0A1128]">자막</h3>
          <button
            onClick={() => onSubtitleToggle(!sound.subtitleEnabled)}
            className={`relative w-12 h-6 rounded-full transition-colors ${
              sound.subtitleEnabled ? 'bg-[#6C5CE7]' : 'bg-slate-200'
            }`}
          >
            <div className={`absolute top-1 w-5 h-5 rounded-full bg-white shadow transition-transform ${
              sound.subtitleEnabled ? 'translate-x-6' : 'translate-x-1'
            }`} />
          </button>
          <span className="text-sm text-slate-500">
            {sound.subtitleEnabled ? '자막이 영상에 포함됩니다' : '자막 없음'}
          </span>
        </div>
      </div>
    </div>
  );
}
