import { Card, CardContent, CardHeader, CardTitle } from "../../ui/card";
import { Checkbox } from "../../ui/checkbox";
import { Button } from "../../ui/button";
import { Badge } from "../../ui/badge";
import { Separator } from "../../ui/separator";
import { ScrollArea } from "../../ui/scroll-area";
import { Music, Clock, CheckCircle2 } from "lucide-react";
import { motion } from "motion/react";

interface Playlist {
  id: number;
  name: string;
  trackCount: number;
  selected: boolean;
}

interface PlaylistViewProps {
  playlists: Playlist[];
  onTogglePlaylist: (id: number) => void;
  onTransfer: () => void;
}

export function PlaylistView({ playlists, onTogglePlaylist, onTransfer }: PlaylistViewProps) {
  const selectedCount = playlists.filter(p => p.selected).length;
  const totalTracks = playlists
    .filter(p => p.selected)
    .reduce((sum, p) => sum + p.trackCount, 0);

  return (
    <motion.div
      initial={{ opacity: 0, y: 30 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.5 }}
    >
      <Card className="shadow-lg border-primary/10 dark:border-primary/20">
        <CardHeader className="bg-gradient-to-r from-primary/5 to-transparent dark:from-primary/10 dark:to-transparent p-4 sm:p-6">
          <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>
            {selectedCount > 0 && (
              <motion.div
                initial={{ scale: 0 }}
                animate={{ scale: 1 }}
                transition={{ type: "spring", stiffness: 500, damping: 25 }}
                className="flex items-center gap-1.5 sm:gap-2 w-full sm:w-auto justify-end"
              >
                <Badge className="bg-primary/90 text-xs sm:text-sm">
                  {selectedCount}개 선택
                </Badge>
                <Badge variant="secondary" className="gap-1 text-xs sm:text-sm">
                  <Music className="size-2.5 sm:size-3" />
                  {totalTracks}곡
                </Badge>
              </motion.div>
            )}
          </CardTitle>
        </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) => (
                <motion.div
                  key={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 space-x-2 sm:space-x-4 p-3 sm:p-4 rounded-xl border transition-all ${
                    playlist.selected
                      ? 'bg-primary/5 dark:bg-primary/10 border-primary/20 dark:border-primary/30 shadow-sm'
                      : 'bg-white dark:bg-gray-900 hover:bg-gray-50/80 dark:hover:bg-gray-800/80 border-gray-200 dark:border-gray-700'
                  }`}
                >
                  <Checkbox
                    checked={playlist.selected}
                    onCheckedChange={() => onTogglePlaylist(playlist.id)}
                    className="data-[state=checked]:bg-primary data-[state=checked]:border-primary shrink-0"
                  />

                  <motion.div
                    className={`p-1.5 sm:p-2 rounded-lg shrink-0 ${
                      playlist.selected ? 'bg-primary/10 dark:bg-primary/20' : 'bg-gray-100 dark:bg-gray-800'
                    }`}
                    animate={playlist.selected ? { rotate: [0, -10, 10, 0] } : {}}
                    transition={{ duration: 0.5 }}
                  >
                    <Music className={`size-4 sm:size-5 ${
                      playlist.selected ? 'text-primary' : 'text-gray-500 dark:text-gray-400'
                    }`} />
                  </motion.div>

                  <div className="flex-1 min-w-0">
                    <p className={`truncate text-sm sm:text-base ${
                      playlist.selected ? 'text-primary font-medium' : 'text-foreground'
                    }`}>
                      {playlist.name}
                    </p>
                    <div className="flex items-center gap-4 mt-0.5 sm:mt-1">
                      <span className="text-xs sm:text-sm text-muted-foreground flex items-center gap-1">
                        <Music className="size-2.5 sm:size-3" />
                        {playlist.trackCount}곡
                      </span>
                    </div>
                  </div>

                  {playlist.selected && (
                    <motion.div
                      initial={{ scale: 0, rotate: -180 }}
                      animate={{ scale: 1, rotate: 0 }}
                      transition={{ type: "spring", stiffness: 400, damping: 20 }}
                      className="shrink-0"
                    >
                      <CheckCircle2 className="size-4 sm:size-5 text-primary" />
                    </motion.div>
                  )}
                </motion.div>
              ))}
            </div>
          </ScrollArea>
          
          {playlists.length > 0 && (
            <>
              <Separator className="my-4 sm:my-6" />
              <motion.div
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                transition={{ delay: playlists.length * 0.05 + 0.2 }}
                className="space-y-2 sm:space-y-3"
              >
                {selectedCount > 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">{selectedCount}개</span>
                    </div>
                    <div className="flex items-center justify-between text-xs sm:text-sm mt-1">
                      <span className="text-muted-foreground">총 트랙 수</span>
                      <span className="font-medium">{totalTracks}곡</span>
                    </div>
                  </div>
                )}
                <Button
                  onClick={onTransfer}
                  className="w-full h-11 sm:h-12 text-sm sm:text-base shadow-lg hover:shadow-xl transition-shadow"
                  disabled={selectedCount === 0}
                  size="lg"
                >
                  {selectedCount > 0 ? (
                    <>
                      <CheckCircle2 className="size-4 sm:size-5 mr-1.5 sm:mr-2" />
                      <span className="hidden xs:inline">선택한 플레이리스트 이전하기 ({selectedCount})</span>
                      <span className="xs:hidden">이전하기 ({selectedCount})</span>
                    </>
                  ) : (
                    '플레이리스트를 선택하세요'
                  )}
                </Button>
              </motion.div>
            </>
          )}
        </CardContent>
      </Card>
    </motion.div>
  );
}