veza/apps/web/src/components/library/playlists/AddToPlaylistModal.tsx

import React, { useState } from 'react';
import { Button } from '../../ui/button';
import { X, Search, Plus, Check } from 'lucide-react';
import { useToast } from '../../../context/ToastContext';
import { Playlist } from '../../../types';

interface AddToPlaylistModalProps {
  onClose: () => void;
  onAdd: (playlistIds: string[]) => void;
}

// Mock user playlists
const MOCK_USER_PLAYLISTS: Playlist[] = [
    { id: 'p1', title: 'Cyberpunk Essentials', creator: 'Cyber_Producer', userId: 'u1', isPublic: true, coverUrl: 'https://picsum.photos/100', trackCount: 45, likes: 120, tags: [] },
    { id: 'p2', title: 'Late Night Coding', creator: 'Cyber_Producer', userId: 'u1', isPublic: false, coverUrl: 'https://picsum.photos/101', trackCount: 22, likes: 15, tags: [] },
    { id: 'p3', title: 'Gym Phonk', creator: 'Cyber_Producer', userId: 'u1', isPublic: true, coverUrl: 'https://picsum.photos/102', trackCount: 105, likes: 300, tags: [] },
];

export const AddToPlaylistModal: React.FC<AddToPlaylistModalProps> = ({ onClose, onAdd }) => {
  const { addToast } = useToast();
  const [search, setSearch] = useState('');
  const [selectedIds, setSelectedIds] = useState<string[]>([]);

  const filteredPlaylists = MOCK_USER_PLAYLISTS.filter(p => p.title.toLowerCase().includes(search.toLowerCase()));

  const toggleSelection = (id: string) => {
      setSelectedIds(prev => prev.includes(id) ? prev.filter(pid => pid !== id) : [...prev, id]);
  };

  const handleConfirm = () => {
      if (selectedIds.length === 0) return;
      onAdd(selectedIds);
      onClose();
  };

  return (
    <div className="fixed inset-0 z-[100] flex items-center justify-center p-4">
      <div className="absolute inset-0 bg-kodo-void/90 backdrop-blur-sm" onClick={onClose}></div>
      <div className="relative w-full max-w-md bg-kodo-graphite border border-kodo-steel rounded-xl shadow-2xl animate-scaleIn overflow-hidden flex flex-col max-h-[70vh]">
        
        <div className="p-4 border-b border-kodo-steel bg-kodo-ink flex justify-between items-center">
          <h3 className="font-bold text-white">Add to Playlist</h3>
          <button onClick={onClose}><X className="w-5 h-5 text-gray-400 hover:text-white" /></button>
        </div>

        <div className="p-4">
            <div className="relative mb-4">
                <input 
                    className="w-full bg-kodo-void border border-kodo-steel rounded-lg py-2 pl-9 pr-4 text-white text-sm focus:border-kodo-cyan outline-none"
                    placeholder="Find playlist"
                    value={search}
                    onChange={(e) => setSearch(e.target.value)}
                    autoFocus
                />
                <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
            </div>

            <Button variant="ghost" className="w-full justify-start border border-dashed border-kodo-steel mb-4 hover:border-kodo-cyan hover:text-kodo-cyan group" onClick={() => addToast("New Playlist Flow")}>
                <div className="w-8 h-8 bg-kodo-steel rounded flex items-center justify-center mr-3 group-hover:bg-kodo-cyan/20">
                    <Plus className="w-4 h-4" />
                </div>
                <span className="text-sm font-bold">New Playlist</span>
            </Button>

            <div className="space-y-1 overflow-y-auto max-h-64 custom-scrollbar">
                {filteredPlaylists.map(playlist => (
                    <div 
                        key={playlist.id}
                        onClick={() => toggleSelection(playlist.id)}
                        className={`flex items-center p-2 rounded cursor-pointer group transition-colors ${selectedIds.includes(playlist.id) ? 'bg-kodo-cyan/10' : 'hover:bg-white/5'}`}
                    >
                        <img src={playlist.coverUrl} className="w-10 h-10 rounded object-cover mr-3" />
                        <div className="flex-1 min-w-0">
                            <div className={`text-sm font-bold truncate ${selectedIds.includes(playlist.id) ? 'text-kodo-cyan' : 'text-white'}`}>{playlist.title}</div>
                            <div className="text-xs text-gray-500">{playlist.trackCount} tracks</div>
                        </div>
                        <div className={`w-5 h-5 rounded-full border flex items-center justify-center ${selectedIds.includes(playlist.id) ? 'bg-kodo-cyan border-kodo-cyan' : 'border-gray-600'}`}>
                            {selectedIds.includes(playlist.id) && <Check className="w-3 h-3 text-black" />}
                        </div>
                    </div>
                ))}
            </div>
        </div>

        <div className="p-4 border-t border-kodo-steel bg-kodo-ink flex justify-end">
            <Button variant="primary" onClick={handleConfirm} disabled={selectedIds.length === 0}>
                Done
            </Button>
        </div>
      </div>
    </div>
  );
};