import { useState } from "react";
import { useNavigate } from "react-router-dom";
import { Button } from "../components/ui/button";
import { Input } from "../components/ui/input";
import { Label } from "../components/ui/label";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../components/ui/card";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "../components/ui/tabs";
import { ArrowLeft, LogIn, Link as LinkIcon, Loader2, AlertCircle, Music, CheckCircle2, ArrowRight, ChevronRight, ChevronDown } from "lucide-react";
import { motion, AnimatePresence } from "motion/react";
import Alert from "../utils/alert";
import vibeService from "../services/vibeService";
import spotifyService from "../services/spotifyService";
import type { VibePlaylist, VibeTrack } from "../types/api";
import { Alert as AlertUI, AlertDescription } from "../components/ui/alert";
import { Checkbox } from "../components/ui/checkbox";
import { ScrollArea } from "../components/ui/scroll-area";
import { Badge } from "../components/ui/badge";
import { Separator } from "../components/ui/separator";
import { ServiceCard } from "../components/features/service/ServiceCard";
import { streamingServices } from "../constants/streamingServices";

enum TransferStep {
  LOGIN = "login",
  SELECT_TRACKS_TREE = "select_tracks_tree",
  SELECT_TARGET_SERVICE = "select_target_service",
}

// 확장된 플레이리스트 타입
interface ExpandedPlaylist extends VibePlaylist {
  expanded: boolean;
  tracks: VibeTrack[];
  isLoadingTracks: boolean;
}

export function VibePage() {
  const navigate = useNavigate();

  // Step 관리
  const [currentStep, setCurrentStep] = useState<TransferStep>(TransferStep.LOGIN);

  // 로그인 관련
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [url, setUrl] = useState("");
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  // 플레이리스트 관련 (트리 구조)
  const [playlists, setPlaylists] = useState<ExpandedPlaylist[]>([]);

  // 선택된 플레이리스트 및 트랙
  const [selectedPlaylistIds, setSelectedPlaylistIds] = useState<Set<string>>(new Set());
  const [selectedTrackIds, setSelectedTrackIds] = useState<Set<number>>(new Set());

  // 대상 서비스
  const [targetService, setTargetService] = useState<string | null>(null);

  const handleLogin = async () => {
    if (!email || !password) {
      setError("이메일과 비밀번호를 입력해주세요.");
      return;
    }

    setError(null);
    setIsLoading(true);

    try {
      const response = await vibeService.login({ id: email, password });

      if (response.success && response.data?.success) {
        const playlistsData = response.data.playlists.map(p => ({
          ...p,
          expanded: false,
          tracks: [],
          isLoadingTracks: false,
        }));
        setPlaylists(playlistsData);
        setCurrentStep(TransferStep.SELECT_TRACKS_TREE);
        Alert.success(`${playlistsData.length}개의 플레이리스트를 찾았습니다!`);
      } else {
        const errorMsg = response.data?.message || response.error || "로그인에 실패했습니다.";
        setError(errorMsg);
        Alert.error(errorMsg);
      }
    } catch (err) {
      const errorMessage = err instanceof Error ? err.message : "로그인 중 오류가 발생했습니다.";
      setError(errorMessage);
      Alert.error(errorMessage);
    } finally {
      setIsLoading(false);
    }
  };

  const handleUrlSubmit = async () => {
    if (!url) {
      setError("플레이리스트 URL을 입력해주세요.");
      return;
    }

    setError(null);
    setIsLoading(true);

    try {
      const response = await vibeService.getPlaylistByUrl({ url });

      if (response.success && response.data) {
        const playlistData = {
          ...response.data,
          expanded: false,
          tracks: [],
          isLoadingTracks: false,
        };
        setPlaylists([playlistData]);
        setCurrentStep(TransferStep.SELECT_TRACKS_TREE);
        Alert.success("플레이리스트를 성공적으로 가져왔습니다!");
      } else {
        setError(response.error || "플레이리스트를 가져오는데 실패했습니다.");
        Alert.error(response.error || "플레이리스트를 가져오는데 실패했습니다.");
      }
    } catch (err) {
      const errorMessage = err instanceof Error ? err.message : "URL 처리 중 오류가 발생했습니다.";
      setError(errorMessage);
      Alert.error(errorMessage);
    } finally {
      setIsLoading(false);
    }
  };

  // 플레이리스트 확장/축소 및 트랙 로드
  const handlePlaylistToggle = async (playlistId: string) => {
    const playlist = playlists.find(p => p.playlist_id === playlistId);
    if (!playlist) return;

    // 이미 확장된 경우 축소
    if (playlist.expanded) {
      setPlaylists(prev => prev.map(p =>
        p.playlist_id === playlistId ? { ...p, expanded: false } : p
      ));
      return;
    }

    // 트랙이 이미 로드된 경우 확장만
    if (playlist.tracks.length > 0) {
      setPlaylists(prev => prev.map(p =>
        p.playlist_id === playlistId ? { ...p, expanded: true } : p
      ));
      return;
    }

    // 트랙 로드
    setPlaylists(prev => prev.map(p =>
      p.playlist_id === playlistId ? { ...p, isLoadingTracks: true } : p
    ));

    try {
      const response = await vibeService.getPlaylistTracks(playlistId);

      if (response.success && response.data?.success) {
        setPlaylists(prev => prev.map(p =>
          p.playlist_id === playlistId
            ? { ...p, tracks: response.data!.tracks, expanded: true, isLoadingTracks: false }
            : p
        ));
      } else {
        const errorMsg = response.data?.message || response.error || "트랙을 가져오는데 실패했습니다.";
        Alert.error(errorMsg);
        setPlaylists(prev => prev.map(p =>
          p.playlist_id === playlistId ? { ...p, isLoadingTracks: false } : p
        ));
      }
    } catch (err) {
      const errorMessage = err instanceof Error ? err.message : "트랙 조회 중 오류가 발생했습니다.";
      Alert.error(errorMessage);
      setPlaylists(prev => prev.map(p =>
        p.playlist_id === playlistId ? { ...p, isLoadingTracks: false } : p
      ));
    }
  };

  // 플레이리스트 체크/해제
  const handlePlaylistCheck = (playlistId: string) => {
    const playlist = playlists.find(p => p.playlist_id === playlistId);
    if (!playlist) return;

    const isChecked = selectedPlaylistIds.has(playlistId);

    if (isChecked) {
      // 플레이리스트 체크 해제 - 모든 하위 트랙도 해제
      setSelectedPlaylistIds(prev => {
        const newSet = new Set(prev);
        newSet.delete(playlistId);
        return newSet;
      });
      setSelectedTrackIds(prev => {
        const newSet = new Set(prev);
        playlist.tracks.forEach(track => newSet.delete(track.track_id));
        return newSet;
      });
    } else {
      // 플레이리스트 체크 - 모든 하위 트랙도 체크
      setSelectedPlaylistIds(prev => new Set(prev).add(playlistId));
      setSelectedTrackIds(prev => {
        const newSet = new Set(prev);
        playlist.tracks.forEach(track => newSet.add(track.track_id));
        return newSet;
      });
    }
  };

  // 트랙 체크/해제
  const handleTrackCheck = (playlistId: string, trackId: number) => {
    const playlist = playlists.find(p => p.playlist_id === playlistId);
    if (!playlist) return;

    setSelectedTrackIds(prev => {
      const newSet = new Set(prev);
      if (newSet.has(trackId)) {
        newSet.delete(trackId);
      } else {
        newSet.add(trackId);
      }

      // 플레이리스트의 모든 트랙이 선택되었는지 확인
      const allTracksSelected = playlist.tracks.every(t => newSet.has(t.track_id));

      setSelectedPlaylistIds(prevPlaylists => {
        const newPlaylistSet = new Set(prevPlaylists);
        if (allTracksSelected) {
          newPlaylistSet.add(playlistId);
        } else {
          newPlaylistSet.delete(playlistId);
        }
        return newPlaylistSet;
      });

      return newSet;
    });
  };

  const handleGoToServiceSelection = () => {
    if (selectedTrackIds.size === 0) {
      Alert.error("최소 1곡 이상 선택해주세요.");
      return;
    }
    setCurrentStep(TransferStep.SELECT_TARGET_SERVICE);
  };

  const handleServiceClick = async (serviceName: string) => {
    setTargetService(serviceName);

    if (serviceName === "Spotify") {
      try {
        setIsLoading(true);
        const authResponse = await spotifyService.login();

        if (authResponse) {
          Alert.success("Spotify에 로그인되었습니다!");

          // 플레이리스트 가져오기
          const playlistsResponse = await spotifyService.getUserPlaylists();
          console.log("Spotify 플레이리스트:", playlistsResponse);

          Alert.success("다음 단계를 준비 중입니다.");
          // TODO: Spotify로 트랙 전송 로직 구현
        }
      } catch (err) {
        const errorMessage = err instanceof Error ? err.message : "Spotify 로그인에 실패했습니다.";
        Alert.error(errorMessage);
      } finally {
        setIsLoading(false);
      }
    } else {
      Alert.info(`${serviceName} 연동은 준비 중입니다.`);
    }
  };

  const selectedPlaylist = playlists.find(p => p.playlist_id === selectedPlaylistId);
  const availableServices = streamingServices.filter(s => s.name !== "VIBE");

  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-purple-50/30 dark:from-gray-900 dark:via-gray-950 dark:to-blue-950/30">
      {/* Header */}
      <header className="bg-white/80 dark:bg-gray-900/80 backdrop-blur-lg border-b dark:border-gray-800 sticky top-0 z-10 shadow-sm">
        <div className="container mx-auto px-3 sm:px-4 py-3 sm:py-4">
          <Button
            variant="ghost"
            onClick={() => navigate("/")}
            className="gap-1.5 sm:gap-2 text-sm sm:text-base px-2 sm:px-4"
          >
            <ArrowLeft className="size-3.5 sm:size-4" />
            뒤로 가기
          </Button>
        </div>
      </header>

      {/* Main Content */}
      <main className="container mx-auto px-3 sm:px-4 py-6 sm:py-12">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5 }}
          className="max-w-2xl mx-auto"
        >
          <div className="text-center mb-6 sm:mb-8">
            <div className="flex justify-center mb-3 sm:mb-4">
              <div className="p-3 sm:p-4 bg-[#FC3C44]/10 rounded-2xl">
                <img
                  src="https://vibe.naver.com/favicon.ico"
                  alt="VIBE"
                  className="size-12 sm:size-16"
                />
              </div>
            </div>
            <h1 className="text-2xl sm:text-3xl font-bold mb-2">VIBE 플레이리스트 이전</h1>
            <p className="text-muted-foreground text-sm sm:text-base px-4">
              {currentStep === TransferStep.LOGIN && "VIBE 플레이리스트를 가져오기 위해 로그인하거나 URL을 입력하세요"}
              {currentStep === TransferStep.SELECT_TRACKS_TREE && "이전할 플레이리스트와 곡을 선택하세요"}
              {currentStep === TransferStep.SELECT_TARGET_SERVICE && "이전할 스트리밍 서비스를 선택하세요"}
            </p>
          </div>

          {/* 에러 메시지 */}
          <AnimatePresence>
            {error && (
              <motion.div
                initial={{ opacity: 0, y: -10 }}
                animate={{ opacity: 1, y: 0 }}
                exit={{ opacity: 0, y: -10 }}
                className="mb-4"
              >
                <AlertUI variant="destructive">
                  <AlertCircle className="size-4" />
                  <AlertDescription>{error}</AlertDescription>
                </AlertUI>
              </motion.div>
            )}
          </AnimatePresence>

          {/* Step 1: 로그인 카드 */}
          <AnimatePresence>
            {currentStep === TransferStep.LOGIN && (
              <motion.div
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                exit={{ opacity: 0, y: -20 }}
                transition={{ duration: 0.3 }}
              >
                <Card>
                  <CardHeader className="p-4 sm:p-6">
                    <CardTitle className="text-lg sm:text-xl">VIBE 플레이리스트 가져오기</CardTitle>
                    <CardDescription className="text-xs sm:text-sm">
                      로그인 또는 플레이리스트 URL을 통해 연결할 수 있습니다
                    </CardDescription>
                  </CardHeader>
                  <CardContent className="p-4 sm:p-6">
                    <Tabs defaultValue="login" className="w-full">
                      <TabsList className="grid w-full grid-cols-2 h-10 sm:h-11">
                        <TabsTrigger value="login" className="gap-1.5 sm:gap-2 text-xs sm:text-sm">
                          <LogIn className="size-3.5 sm:size-4" />
                          로그인
                        </TabsTrigger>
                        <TabsTrigger value="url" className="gap-1.5 sm:gap-2 text-xs sm:text-sm">
                          <LinkIcon className="size-3.5 sm:size-4" />
                          URL 입력
                        </TabsTrigger>
                      </TabsList>

                      <TabsContent value="login" className="space-y-3 sm:space-y-4 mt-4 sm:mt-6">
                        <div className="space-y-1.5 sm:space-y-2">
                          <Label htmlFor="email" className="text-sm">이메일</Label>
                          <Input
                            id="email"
                            type="email"
                            placeholder="example@email.com"
                            value={email}
                            onChange={(e) => setEmail(e.target.value)}
                            onKeyDown={(e) => e.key === "Enter" && handleLogin()}
                            className="h-10 sm:h-11 text-sm sm:text-base"
                          />
                        </div>
                        <div className="space-y-1.5 sm:space-y-2">
                          <Label htmlFor="password" className="text-sm">비밀번호</Label>
                          <Input
                            id="password"
                            type="password"
                            value={password}
                            onChange={(e) => setPassword(e.target.value)}
                            onKeyDown={(e) => e.key === "Enter" && handleLogin()}
                            className="h-10 sm:h-11 text-sm sm:text-base"
                          />
                        </div>
                        <Button
                          onClick={handleLogin}
                          className="w-full h-11 sm:h-12 text-sm sm:text-base"
                          size="lg"
                          disabled={isLoading}
                        >
                          {isLoading ? (
                            <>
                              <Loader2 className="size-3.5 sm:size-4 mr-1.5 sm:mr-2 animate-spin" />
                              처리 중...
                            </>
                          ) : (
                            <>
                              <LogIn className="size-3.5 sm:size-4 mr-1.5 sm:mr-2" />
                              <span className="hidden xs:inline">로그인하고 플레이리스트 가져오기</span>
                              <span className="xs:hidden">로그인 & 가져오기</span>
                            </>
                          )}
                        </Button>
                      </TabsContent>

                      <TabsContent value="url" className="space-y-3 sm:space-y-4 mt-4 sm:mt-6">
                        <div className="space-y-1.5 sm:space-y-2">
                          <Label htmlFor="url" className="text-sm">플레이리스트 URL</Label>
                          <Input
                            id="url"
                            type="url"
                            placeholder="https://vibe.naver.com/..."
                            value={url}
                            onChange={(e) => setUrl(e.target.value)}
                            onKeyDown={(e) => e.key === "Enter" && handleUrlSubmit()}
                            className="h-10 sm:h-11 text-sm sm:text-base"
                          />
                        </div>
                        <Button
                          onClick={handleUrlSubmit}
                          className="w-full h-11 sm:h-12 text-sm sm:text-base"
                          size="lg"
                          disabled={isLoading}
                        >
                          {isLoading ? (
                            <>
                              <Loader2 className="size-3.5 sm:size-4 mr-1.5 sm:mr-2 animate-spin" />
                              처리 중...
                            </>
                          ) : (
                            <>
                              <LinkIcon className="size-3.5 sm:size-4 mr-1.5 sm:mr-2" />
                              <span className="hidden xs:inline">URL로 플레이리스트 가져오기</span>
                              <span className="xs:hidden">URL로 가져오기</span>
                            </>
                          )}
                        </Button>
                      </TabsContent>
                    </Tabs>
                  </CardContent>
                </Card>
              </motion.div>
            )}
          </AnimatePresence>

          {/* Step 2: 플레이리스트 선택 (단일 선택) */}
          <AnimatePresence>
            {currentStep === TransferStep.SELECT_PLAYLIST && playlists.length > 0 && (
              <motion.div
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                exit={{ opacity: 0, y: -20 }}
                transition={{ duration: 0.3 }}
              >
                <Card className="shadow-lg border-primary/10 dark:border-primary/20">
                  <CardHeader className="p-4 sm:p-6 bg-gradient-to-r from-[#FC3C44]/5 to-transparent dark:from-[#FC3C44]/10 dark:to-transparent">
                    <div className="flex items-center justify-between gap-3 mb-3">
                      <div className="flex items-center gap-2 sm:gap-3">
                        <div className="p-1.5 sm:p-2 bg-[#FC3C44]/10 rounded-lg">
                          <Music className="size-4 sm:size-5 text-[#FC3C44]" />
                        </div>
                        <span className="text-base sm:text-lg font-semibold">플레이리스트 선택</span>
                      </div>
                      {selectedPlaylistId && selectedPlaylist && (
                        <Button
                          onClick={handleFetchTracks}
                          className="h-9 sm:h-10 text-xs sm:text-sm shadow-md bg-[#FC3C44] hover:bg-[#FC3C44]/90 text-white"
                          disabled={isLoading}
                        >
                          {isLoading ? (
                            <>
                              <Loader2 className="size-3.5 sm:size-4 mr-1.5 animate-spin" />
                              로딩 중...
                            </>
                          ) : (
                            <>
                              <ArrowRight className="size-3.5 sm:size-4 mr-1.5" />
                              다음
                            </>
                          )}
                        </Button>
                      )}
                    </div>
                    {selectedPlaylistId && selectedPlaylist && (
                      <div className="bg-[#FC3C44]/5 dark:bg-[#FC3C44]/10 rounded-lg p-2.5 sm:p-3 border border-[#FC3C44]/10 dark:border-[#FC3C44]/20">
                        <div className="text-xs text-muted-foreground mb-1">선택된 플레이리스트</div>
                        <div className="flex items-center gap-2">
                          <p className="font-medium text-sm sm:text-base truncate flex-1">{selectedPlaylist.playlist_name}</p>
                          <Badge variant="secondary" className="text-xs shrink-0">{selectedPlaylist.track_count}곡</Badge>
                        </div>
                      </div>
                    )}
                  </CardHeader>
                  <CardContent className="p-3 sm:p-6">
                    <ScrollArea className="h-[350px] sm:h-[400px] pr-2 sm:pr-4">
                      <div className="space-y-1.5 sm:space-y-2">
                        {playlists.map((playlist, index) => {
                          const isSelected = selectedPlaylistId === playlist.playlist_id;

                          return (
                            <motion.div
                              key={playlist.playlist_id}
                              initial={{ opacity: 0, x: -20 }}
                              animate={{ opacity: 1, x: 0 }}
                              transition={{
                                duration: 0.3,
                                delay: index * 0.05,
                                ease: "easeOut"
                              }}
                              whileHover={{
                                x: 4,
                                transition: { duration: 0.2 }
                              }}
                              className={`flex items-center gap-3 sm:gap-4 p-3 sm:p-4 rounded-xl border transition-all cursor-pointer ${
                                isSelected
                                  ? 'bg-[#FC3C44]/10 dark:bg-[#FC3C44]/15 border-[#FC3C44]/30 dark:border-[#FC3C44]/40 shadow-md'
                                  : 'bg-white dark:bg-gray-900 hover:bg-gray-50/80 dark:hover:bg-gray-800/80 border-gray-200 dark:border-gray-700'
                              }`}
                              onClick={() => handlePlaylistSelect(playlist.playlist_id)}
                            >
                              {/* 라디오 버튼 */}
                              <div className={`size-4 sm:size-5 rounded-full border-2 flex items-center justify-center shrink-0 transition-all ${
                                isSelected
                                  ? 'border-[#FC3C44] bg-[#FC3C44]'
                                  : 'border-gray-300 dark:border-gray-600'
                              }`}>
                                {isSelected && (
                                  <motion.div
                                    initial={{ scale: 0 }}
                                    animate={{ scale: 1 }}
                                    className="size-2 bg-white rounded-full"
                                  />
                                )}
                              </div>

                              {/* 플레이리스트 이미지 */}
                              <div className="size-12 sm:size-14 rounded-lg overflow-hidden shrink-0 bg-gray-100 dark:bg-gray-800 flex items-center justify-center">
                                {playlist.image_url ? (
                                  <img
                                    src={playlist.image_url}
                                    alt={playlist.playlist_name}
                                    className="size-full object-cover"
                                    onError={(e) => {
                                      e.currentTarget.style.display = 'none';
                                      e.currentTarget.nextElementSibling?.classList.remove('hidden');
                                    }}
                                  />
                                ) : null}
                                <Music className={`size-6 sm:size-7 ${playlist.image_url ? 'hidden' : ''} ${
                                  isSelected ? 'text-[#FC3C44]' : 'text-gray-400 dark:text-gray-500'
                                }`} />
                              </div>

                              {/* 플레이리스트 정보 */}
                              <div className="flex-1 min-w-0">
                                <p className={`truncate text-sm sm:text-base font-medium ${
                                  isSelected ? 'text-[#FC3C44]' : 'text-foreground'
                                }`}>
                                  {playlist.playlist_name}
                                </p>
                                <div className="flex items-center gap-2 mt-1">
                                  <span className="text-xs text-muted-foreground flex items-center gap-1">
                                    <Music className="size-3" />
                                    {playlist.track_count}곡
                                  </span>
                                </div>
                              </div>

                            </motion.div>
                          );
                        })}
                      </div>
                    </ScrollArea>
                  </CardContent>
                </Card>
              </motion.div>
            )}
          </AnimatePresence>

          {/* Step 3: 트랙 선택 (멀티 선택) */}
          <AnimatePresence>
            {currentStep === TransferStep.SELECT_TRACKS && tracks.length > 0 && (
              <motion.div
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                exit={{ opacity: 0, y: -20 }}
                transition={{ duration: 0.3 }}
              >
                <Card className="shadow-lg border-primary/10 dark:border-primary/20">
                  <CardHeader className="p-4 sm:p-6 bg-gradient-to-r from-primary/5 to-transparent dark:from-primary/10 dark:to-transparent">
                    <CardTitle className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3">
                      <div className="flex items-center gap-2 sm:gap-3">
                        <div className="p-1.5 sm:p-2 bg-primary/10 rounded-lg">
                          <Music className="size-4 sm:size-5 text-primary" />
                        </div>
                        <span className="text-base sm:text-lg">트랙 목록</span>
                      </div>
                      <div className="flex gap-2">
                        <Badge variant="outline" className="text-xs sm:text-sm">
                          총 {tracks.length}곡
                        </Badge>
                        {selectedTrackIds.size > 0 && (
                          <Badge className="bg-primary/90 text-xs sm:text-sm">
                            {selectedTrackIds.size}곡 선택
                          </Badge>
                        )}
                      </div>
                    </CardTitle>
                  </CardHeader>
                  <CardContent className="p-3 sm:p-6">
                    <div className="mb-3 sm:mb-4 flex justify-between items-center">
                      <Button
                        variant="outline"
                        size="sm"
                        onClick={() => {
                          if (selectedTrackIds.size === tracks.length) {
                            setSelectedTrackIds(new Set());
                          } else {
                            setSelectedTrackIds(new Set(tracks.map(t => t.track_id)));
                          }
                        }}
                        className="text-xs sm:text-sm"
                      >
                        {selectedTrackIds.size === tracks.length ? "전체 해제" : "전체 선택"}
                      </Button>
                    </div>

                    <ScrollArea className="h-[400px] sm:h-[500px] pr-2 sm:pr-4">
                      <div className="space-y-1.5 sm:space-y-2">
                        {tracks.map((track, index) => {
                          const isSelected = selectedTrackIds.has(track.track_id);

                          return (
                            <motion.div
                              key={track.track_id}
                              initial={{ opacity: 0, x: -20 }}
                              animate={{ opacity: 1, x: 0 }}
                              transition={{
                                duration: 0.3,
                                delay: index * 0.02,
                                ease: "easeOut"
                              }}
                              className={`flex items-center space-x-2 sm:space-x-4 p-3 sm:p-4 rounded-xl border transition-all cursor-pointer ${
                                isSelected
                                  ? 'bg-primary/5 dark:bg-primary/10 border-primary/20 dark:border-primary/30'
                                  : 'bg-white dark:bg-gray-900 hover:bg-gray-50/80 dark:hover:bg-gray-800/80 border-gray-200 dark:border-gray-700'
                              }`}
                              onClick={() => toggleTrackSelection(track.track_id)}
                            >
                              <Checkbox
                                checked={isSelected}
                                onCheckedChange={() => toggleTrackSelection(track.track_id)}
                                className="data-[state=checked]:bg-primary data-[state=checked]:border-primary shrink-0"
                                onClick={(e) => e.stopPropagation()}
                              />

                              {/* 앨범 이미지 */}
                              <div className="size-10 sm:size-12 rounded-lg overflow-hidden shrink-0 bg-gray-100 dark:bg-gray-800 flex items-center justify-center">
                                {track.album.image_url ? (
                                  <img
                                    src={track.album.image_url}
                                    alt={track.album.album_title}
                                    className="size-full object-cover"
                                    onError={(e) => {
                                      e.currentTarget.style.display = 'none';
                                      e.currentTarget.nextElementSibling?.classList.remove('hidden');
                                    }}
                                  />
                                ) : null}
                                <Music className={`size-5 sm:size-6 ${track.album.image_url ? 'hidden' : ''} text-gray-400 dark:text-gray-500`} />
                              </div>

                              {/* 트랙 정보 */}
                              <div className="flex-1 min-w-0">
                                <p className="truncate text-sm sm:text-base font-medium text-foreground">
                                  {track.track_title}
                                </p>
                                <p className="truncate text-xs sm:text-sm text-muted-foreground mt-0.5">
                                  {track.artists.map(a => a.artist_name).join(', ')}
                                  {track.album.album_title && ` • ${track.album.album_title}`}
                                </p>
                              </div>

                              {/* 재생 시간 */}
                              <div className="text-xs sm:text-sm text-muted-foreground shrink-0">
                                {track.play_time}
                              </div>
                            </motion.div>
                          );
                        })}
                      </div>
                    </ScrollArea>

                    <Separator className="my-4 sm:my-6" />

                    <div className="space-y-2 sm:space-y-3">
                      {selectedTrackIds.size > 0 && (
                        <div className="bg-primary/5 dark:bg-primary/10 rounded-lg p-3 sm:p-4 border border-primary/10 dark:border-primary/20">
                          <div className="flex items-center justify-between text-xs sm:text-sm">
                            <span className="text-muted-foreground">선택된 트랙</span>
                            <span className="font-medium">{selectedTrackIds.size}곡</span>
                          </div>
                        </div>
                      )}

                      <Button
                        onClick={handleGoToServiceSelection}
                        className="w-full h-11 sm:h-12 text-sm sm:text-base shadow-lg hover:shadow-xl transition-shadow"
                        disabled={selectedTrackIds.size === 0}
                        size="lg"
                      >
                        <ArrowRight className="size-4 sm:size-5 mr-1.5 sm:mr-2" />
                        다음: 서비스 선택
                      </Button>

                      <Button
                        onClick={() => {
                          setCurrentStep(TransferStep.SELECT_PLAYLIST);
                          setTracks([]);
                          setSelectedTrackIds(new Set());
                        }}
                        variant="outline"
                        className="w-full h-10 sm:h-11 text-sm"
                        size="lg"
                      >
                        <ArrowLeft className="size-3.5 sm:size-4 mr-1.5 sm:mr-2" />
                        플레이리스트 선택으로 돌아가기
                      </Button>
                    </div>
                  </CardContent>
                </Card>
              </motion.div>
            )}
          </AnimatePresence>

          {/* Step 4: 대상 스트리밍 서비스 선택 */}
          <AnimatePresence>
            {currentStep === TransferStep.SELECT_TARGET_SERVICE && (
              <motion.div
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                exit={{ opacity: 0, y: -20 }}
                transition={{ duration: 0.3 }}
              >
                <Card className="shadow-lg">
                  <CardHeader className="p-4 sm:p-6">
                    <CardTitle className="text-lg sm:text-xl">이전할 서비스 선택</CardTitle>
                    <CardDescription className="text-xs sm:text-sm">
                      선택한 {selectedTrackIds.size}곡을 이전할 스트리밍 서비스를 선택하세요
                    </CardDescription>
                  </CardHeader>
                  <CardContent className="p-4 sm:p-6">
                    <div className="grid grid-cols-2 md:grid-cols-3 gap-4 sm:gap-6">
                      {availableServices.map((service, index) => (
                        <ServiceCard
                          key={service.name}
                          name={service.name}
                          icon={service.icon || ""}
                          color={service.color}
                          imageUrl={service.imageUrl}
                          onClick={() => handleServiceClick(service.name)}
                          index={index}
                        />
                      ))}
                    </div>

                    <Separator className="my-4 sm:my-6" />

                    <Button
                      onClick={() => {
                        setCurrentStep(TransferStep.SELECT_TRACKS);
                      }}
                      variant="outline"
                      className="w-full h-10 sm:h-11 text-sm"
                      size="lg"
                    >
                      <ArrowLeft className="size-3.5 sm:size-4 mr-1.5 sm:mr-2" />
                      트랙 선택으로 돌아가기
                    </Button>
                  </CardContent>
                </Card>
              </motion.div>
            )}
          </AnimatePresence>
        </motion.div>
      </main>
    </div>
  );
}
