/**
 * 관리자 앨범 추가/수정 페이지
 */
import { useState, useRef, useEffect } from 'react';
import { useNavigate, useParams, Link } from 'react-router-dom';
import { useQuery, useQueryClient } from '@tanstack/react-query';
import { motion } from 'framer-motion';
import { Save, Home, ChevronRight, Music, Plus, Image } from 'lucide-react';
import { Toast } from '@/components/common';
import { AdminLayout, DatePicker, CustomSelect, TrackItem } from '@/components/pc/admin';
import { useAdminAuth } from '@/hooks/pc/admin';
import { useToast } from '@/hooks/common';
import { adminAlbumApi } from '@/api/admin';
import { fetchFormData } from '@/api/client';

function AdminAlbumForm() {
  const navigate = useNavigate();
  const queryClient = useQueryClient();
  const { id } = useParams();
  const isEditMode = !!id;
  const coverInputRef = useRef(null);
  const { user, isAuthenticated } = useAdminAuth();

  const [saving, setSaving] = useState(false);
  const [coverPreview, setCoverPreview] = useState(null);
  const [coverFile, setCoverFile] = useState(null);
  const { toast, setToast } = useToast();

  const [formData, setFormData] = useState({
    title: '',
    album_type: '',
    album_type_short: '',
    release_date: '',
    cover_original_url: '',
    cover_medium_url: '',
    cover_thumb_url: '',
    folder_name: '',
    description: '',
  });

  const [tracks, setTracks] = useState([]);

  // 수정 모드일 때 앨범 데이터 로드
  const {
    data: albumData,
    isLoading: loading,
    error: albumError,
  } = useQuery({
    queryKey: ['admin', 'album', id],
    queryFn: () => adminAlbumApi.getAlbum(id),
    enabled: isAuthenticated && isEditMode && !!id,
    staleTime: 0,
  });

  // 앨범 데이터 로드 시 폼에 반영
  useEffect(() => {
    if (albumData) {
      setFormData({
        title: albumData.title || '',
        album_type: albumData.album_type || '',
        album_type_short: albumData.album_type_short || '',
        release_date: albumData.release_date ? albumData.release_date.split('T')[0] : '',
        cover_original_url: albumData.cover_original_url || '',
        cover_medium_url: albumData.cover_medium_url || '',
        cover_thumb_url: albumData.cover_thumb_url || '',
        folder_name: albumData.folder_name || '',
        description: albumData.description || '',
      });
      if (albumData.cover_medium_url || albumData.cover_original_url) {
        setCoverPreview(albumData.cover_medium_url || albumData.cover_original_url);
      }
      setTracks(albumData.tracks || []);
    }
  }, [albumData]);

  // 에러 처리
  useEffect(() => {
    if (albumError) {
      console.error('앨범 로드 오류:', albumError);
      setToast({ message: '앨범 로드 중 오류가 발생했습니다.', type: 'error' });
    }
  }, [albumError, setToast]);

  const handleInputChange = (e) => {
    const { name, value } = e.target;

    // 앨범명 변경 시 RustFS 폴더명 자동 생성
    if (name === 'title') {
      const folderName = value
        .toLowerCase()
        .replace(/[\s.]+/g, '-')
        .replace(/[^a-z0-9가-힣-]/g, '')
        .replace(/-+/g, '-')
        .replace(/^-|-$/g, '');
      setFormData((prev) => ({ ...prev, title: value, folder_name: folderName }));
    } else {
      setFormData((prev) => ({ ...prev, [name]: value }));
    }
  };

  const handleCoverChange = (e) => {
    const file = e.target.files[0];
    if (file) {
      setCoverFile(file);
      const reader = new FileReader();
      reader.onloadend = () => {
        setCoverPreview(reader.result);
      };
      reader.readAsDataURL(file);
    }
  };

  const addTrack = () => {
    setTracks((prev) => [
      ...prev,
      {
        track_number: prev.length + 1,
        title: '',
        is_title_track: false,
        duration: '',
      },
    ]);
  };

  const removeTrack = (index) => {
    setTracks((prev) =>
      prev
        .filter((_, i) => i !== index)
        .map((track, i) => ({
          ...track,
          track_number: i + 1,
        }))
    );
  };

  const updateTrack = (index, field, value) => {
    // 작사/작곡/편곡 필드에서 '｜' (전각 세로 막대)를 ', '로 자동 변환
    let processedValue = value;
    if (['lyricist', 'composer', 'arranger'].includes(field)) {
      processedValue = value.replace(/[｜|]/g, ', ');
    }

    setTracks((prev) =>
      prev.map((track, i) => (i === index ? { ...track, [field]: processedValue } : track))
    );
  };

  const handleSubmit = async (e) => {
    e.preventDefault();

    // 커스텀 검증
    if (!formData.title.trim()) {
      setToast({ message: '앨범명을 입력해주세요.', type: 'warning' });
      return;
    }
    if (!formData.folder_name.trim()) {
      setToast({ message: 'RustFS 폴더명을 입력해주세요.', type: 'warning' });
      return;
    }
    if (!formData.album_type_short) {
      setToast({ message: '앨범 타입을 선택해주세요.', type: 'warning' });
      return;
    }
    if (!formData.release_date) {
      setToast({ message: '발매일을 선택해주세요.', type: 'warning' });
      return;
    }
    if (!formData.album_type.trim()) {
      setToast({ message: '앨범 유형을 입력해주세요.', type: 'warning' });
      return;
    }

    setSaving(true);

    try {
      const form = new FormData();
      form.append('data', JSON.stringify({ ...formData, tracks }));
      if (coverFile) {
        form.append('cover', coverFile);
      }

      const url = isEditMode ? `/albums/${id}` : '/albums';
      const method = isEditMode ? 'PUT' : 'POST';

      await fetchFormData(url, form, method);

      // 앨범 목록 캐시 무효화
      queryClient.invalidateQueries({ queryKey: ['admin', 'albums'] });
      navigate('/admin/albums');
    } catch (error) {
      console.error('저장 오류:', error);
      setToast({ message: '저장 중 오류가 발생했습니다.', type: 'error' });
    } finally {
      setSaving(false);
    }
  };

  const albumTypes = ['정규', '미니', '싱글'];

  return (
    <AdminLayout user={user}>
      <Toast toast={toast} onClose={() => setToast(null)} />

      <div className="max-w-4xl mx-auto px-6 py-8">
        {/* 브레드크럼 */}
        <div className="flex items-center gap-2 text-sm text-gray-400 mb-8">
          <Link to="/admin/dashboard" className="hover:text-primary transition-colors">
            <Home size={16} />
          </Link>
          <ChevronRight size={14} />
          <Link to="/admin/albums" className="hover:text-primary transition-colors">
            앨범 관리
          </Link>
          <ChevronRight size={14} />
          <span className="text-gray-700">{isEditMode ? '앨범 수정' : '새 앨범 추가'}</span>
        </div>

        {/* 타이틀 */}
        <div className="mb-8">
          <h1 className="text-3xl font-bold text-gray-900 mb-2">
            {isEditMode ? '앨범 수정' : '새 앨범 추가'}
          </h1>
          <p className="text-gray-500">앨범 정보와 트랙을 입력하세요</p>
        </div>

        {loading ? (
          <div className="min-h-[600px]" />
        ) : (
          <motion.form
            initial={{ opacity: 0, y: 12 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{
              duration: 0.4,
              ease: [0.25, 0.1, 0.25, 1],
              delay: 0.15,
            }}
            onSubmit={handleSubmit}
            className="space-y-8"
          >
            {/* 앨범 기본 정보 */}
            <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="grid grid-cols-2 gap-6">
                {/* 커버 이미지 */}
                <div className="col-span-2">
                  <label className="block text-sm font-medium text-gray-700 mb-2">
                    커버 이미지
                  </label>
                  <div className="flex items-start gap-6">
                    <div
                      onClick={() => coverInputRef.current?.click()}
                      className="w-40 h-40 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"
                    >
                      {coverPreview ? (
                        <img
                          src={coverPreview}
                          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={coverInputRef}
                      type="file"
                      accept="image/*"
                      onChange={handleCoverChange}
                      className="hidden"
                    />
                    <div className="flex-1">
                      <p className="text-sm text-gray-500 mb-2">권장 크기: 1000x1000px</p>
                      <p className="text-sm text-gray-500">지원 형식: JPG, PNG, WebP</p>
                      {coverPreview && (
                        <button
                          type="button"
                          onClick={() => {
                            setCoverPreview(null);
                            setCoverFile(null);
                          }}
                          className="mt-3 text-sm text-red-500 hover:text-red-600"
                        >
                          이미지 제거
                        </button>
                      )}
                    </div>
                  </div>
                </div>

                {/* 앨범명 */}
                <div className="col-span-2">
                  <label className="block text-sm font-medium text-gray-700 mb-2">앨범명 *</label>
                  <input
                    type="text"
                    name="title"
                    value={formData.title}
                    onChange={handleInputChange}
                    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"
                    placeholder="예: 하얀 그리움"
                  />
                </div>

                {/* 폴더명 */}
                <div className="col-span-2">
                  <label className="block text-sm font-medium text-gray-700 mb-2">
                    RustFS 폴더명 *
                  </label>
                  <div className="flex items-center gap-2">
                    <span className="text-gray-400 text-sm">fromis-9/album/</span>
                    <input
                      type="text"
                      name="folder_name"
                      value={formData.folder_name}
                      onChange={handleInputChange}
                      className="flex-1 px-4 py-2.5 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
                      placeholder="예: white-memories"
                    />
                  </div>
                  <p className="text-xs text-gray-400 mt-1">영문 소문자, 숫자, 하이픈만 사용</p>
                </div>

                {/* 앨범 타입 */}
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-2">앨범 타입 *</label>
                  <CustomSelect
                    value={formData.album_type_short}
                    onChange={(val) => setFormData((prev) => ({ ...prev, album_type_short: val }))}
                    options={albumTypes}
                    placeholder="타입 선택"
                  />
                </div>

                {/* 앨범 유형 */}
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-2">앨범 유형 *</label>
                  <input
                    type="text"
                    name="album_type"
                    value={formData.album_type}
                    onChange={handleInputChange}
                    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"
                    placeholder="예: 미니 6집"
                  />
                </div>

                {/* 발매일 */}
                <div className="col-span-2">
                  <label className="block text-sm font-medium text-gray-700 mb-2">발매일 *</label>
                  <DatePicker
                    value={formData.release_date}
                    onChange={(val) => setFormData((prev) => ({ ...prev, release_date: val }))}
                    minYear={2017}
                  />
                </div>

                {/* 설명 */}
                <div className="col-span-2">
                  <label className="block text-sm font-medium text-gray-700 mb-2">앨범 설명</label>
                  <textarea
                    name="description"
                    value={formData.description}
                    onChange={handleInputChange}
                    rows={8}
                    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 resize-none"
                    placeholder="앨범에 대한 설명을 입력하세요..."
                  />
                </div>
              </div>
            </div>

            {/* 트랙 목록 */}
            <div className="bg-white rounded-2xl border border-gray-100 shadow-sm p-6">
              <div className="flex items-center justify-between mb-6">
                <h2 className="text-lg font-bold text-gray-900">트랙 목록</h2>
                <button
                  type="button"
                  onClick={addTrack}
                  className="flex items-center gap-2 px-3 py-1.5 text-sm bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors"
                >
                  <Plus size={16} />
                  트랙 추가
                </button>
              </div>

              {tracks.length === 0 ? (
                <div className="text-center py-8 text-gray-500">
                  <Music size={40} className="mx-auto mb-3 text-gray-300" />
                  <p>트랙을 추가하세요</p>
                </div>
              ) : (
                <div className="space-y-4">
                  {tracks.map((track, index) => (
                    <TrackItem
                      key={index}
                      track={track}
                      index={index}
                      onUpdate={updateTrack}
                      onRemove={() => removeTrack(index)}
                    />
                  ))}
                </div>
              )}
            </div>

            {/* 버튼 */}
            <div className="flex items-center justify-end gap-4">
              <button
                type="button"
                onClick={() => navigate('/admin/albums')}
                className="px-6 py-2.5 text-gray-600 hover:text-gray-900 transition-colors"
              >
                취소
              </button>
              <button
                type="submit"
                disabled={saving}
                className="flex items-center gap-2 px-6 py-2.5 bg-primary text-white rounded-lg hover:bg-primary-dark transition-colors disabled:opacity-50"
              >
                {saving ? (
                  <>
                    <span className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
                    저장 중...
                  </>
                ) : (
                  <>
                    <Save size={18} />
                    저장
                  </>
                )}
              </button>
            </div>
          </motion.form>
        )}
      </div>
    </AdminLayout>
  );
}

export default AdminAlbumForm;
