Спотіфай Вініл Вайб

export let features;

const dispatch = createEventDispatcher();

// Map keys to pretty names and icons
            const config = {
                danceability: { icon: 'fa-shoe-prints', label: 'Танцювальність' },
                energy: { icon: 'fa-bolt', label: 'Енергійність' },
                loudness: { icon: 'fa-volume-up', label: 'Гучність' },
                speechiness: { icon: 'fa-comment', label: 'Мова (speechiness)' },
                acousticness: { icon: 'fa-guitar', label: 'Акустичність' },
                instrumentalness: { icon: 'fa-drum', label: 'Інструментальність' },
                liveness: { icon: 'fa-users', label: 'Живе виконання' },
                valence: { icon: 'fa-smile', label: 'Настрій (Валентність)' }
            };

function updateValue(key, e) {
                features[key].value = parseFloat(e.target.value);
            }

function toggleFeature(key) {
                features[key].enabled = !features[key].enabled;
            }
        </script>

<div class="max-w-md mx-auto w-full p-6 pb-24 overflow-y-auto h-full scrollbar-hide" in:fade>
            <div class="text-center mb-8">
                <h1 class="text-3xl font-bold mb-2">Фільтри</h1>
            </div>

<div class="space-y-6">
                {#each Object.entries(features) as [key, data]}
                    <div class="bg-white p-4 rounded-xl shadow-sm border border-gray-100 {data.enabled ? '' : 'opacity-60 grayscale'} transition-all">
                        <div class="flex items-center justify-between mb-2">
                            <div class="flex items-center gap-2 text-gray-700 font-medium">
                                <button 
                                    on:click={() => toggleFeature(key)}
                                    class="w-6 h-6 rounded flex items-center justify-center border transition-colors {data.enabled ? 'bg-black border-black text-white' : 'bg-gray-100 border-gray-300 text-transparent'}"
                                >
                                    <i class="fas fa-check text-xs"></i>
                                </button>
                                <i class={`fas ${config[key].icon} w-5 text-center`}></i>
                                {config[key].label}
                            </div>
                            <span class="text-xs font-mono bg-gray-100 px-2 py-1 rounded text-gray-600">
                                {data.enabled ? (data.value * 100).toFixed(0) + '%' : 'OFF'}
                            </span>
                        </div>
                        <input 
                            type="range" 
                            min="0" 
                            max="1" 
                            step="0.01" 
                            value={data.value} 
                            disabled={!data.enabled}
                            on:input={(e) => updateValue(key, e)}
                            class="w-full accent-black disabled:cursor-not-allowed"
                        />
                    </div>
                {/each}
            </div>

<div class="sticky bottom-4 mt-8">
                <button 
                    on:click={() => dispatch('generate')}
                    class="w-full bg-black text-white py-4 rounded-full font-bold text-lg shadow-lg active:scale-95 transition-transform flex items-center justify-center gap-2 hover:bg-gray-900"
                >
                    <i class="fas fa-magic"></i>
                    Знайти свої вайб-треки
                </button>
            </div>
        </div>

export let tracks = [];

const dispatch = createEventDispatcher();
        </script>

<div class="max-w-md mx-auto w-full p-6 h-full flex flex-col" in:fade>
            <div class="flex items-center justify-between mb-6">
                <div>
                    <h2 class="text-2xl font-bold">Результати</h2>
                    <p class="text-gray-500 text-sm">Знайдено {tracks.length} треків</p>
                </div>
                
                <button 
                    on:click={() => dispatch('back')} 
                    class="w-10 h-10 rounded-full border border-gray-200 flex items-center justify-center hover:bg-gray-50 transition-colors"
                >
                    <i class="fas fa-sliders-h"></i>
                </button>
            </div>

<div class="flex-grow overflow-y-auto space-y-3 pb-24 scrollbar-hide">
                {#each tracks as track, i}
                    <button 
                        on:click={() => dispatch('play', { track, index: i })}
                        class="w-full flex items-center gap-4 p-3 bg-white hover:bg-gray-50 rounded-xl transition-all border border-transparent hover:border-gray-200 group text-left"
                    >
                        <div class="relative w-16 h-16 rounded shadow-sm overflow-hidden flex-shrink-0 bg-gray-200">
                            <img src={track.cover} alt="Cover" class="w-full h-full object-cover" />
                            <div class="absolute inset-0 bg-black/30 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
                                <i class="fas fa-play text-white"></i>
                            </div>
                        </div>
                        <div class="flex-grow min-w-0">
                            <h3 class="font-bold truncate text-gray-900">{track.name}</h3>
                            <p class="text-sm text-gray-500 truncate">{track.artist}</p>
                        </div>
                    </button>
                {/each}
            </div>
        </div>

export let track;
            export let isPlaying = false;

const dispatch = createEventDispatcher();

let audio;
            let currentTime = 0;
            let duration = 0;

// Sync isPlaying prop with audio element
            $: if (audio && track) {
                if (isPlaying) {
                    setTimeout(() => {
                        if (isPlaying) audio.play().catch(e => console.log('Playback prevented:', e));
                        // Set duration
                        duration = audio.duration;
                    }, 0);
                }
                else audio.pause();
            }

// Format helper
            function formatTime(seconds) {
                if (!seconds || isNaN(seconds)) return '0:00';
                const m = Math.floor(seconds / 60);
                const s = Math.floor(seconds % 60);
                return `${m}:${s.toString().padStart(2, '0')}`;
            }

function togglePlay() {
                dispatch(isPlaying ? 'pause' : 'resume');
            }
        </script>

<audio 
            bind:this={audio}
            src={track.url}
            bind:currentTime
            bind:duration
            on:ended={() => dispatch('next')}
            on:pause={() => { if(isPlaying) dispatch('pause'); }}
            on:play={() => { if(!isPlaying) dispatch('resume'); }}
        ></audio>

<div class="fixed inset-0 z-50 bg-gray-100/95 backdrop-blur-md flex flex-col safe-area-inset-bottom" transition:fly={{ y: 1000, duration: 500, opacity: 1 }}>
            
            <div class="px-6 py-4 flex justify-between items-center z-10">
                <button on:click={() => dispatch('close')} class="w-10 h-10 rounded-full bg-white/50 backdrop-blur shadow-sm flex items-center justify-center text-gray-700 hover:bg-white transition-colors">
                    <i class="fas fa-chevron-down"></i>
                </button>
                <span class="text-xs font-mono uppercase tracking-widest text-gray-500">Зараз Грає</span>
                <div class="w-10"></div> 
            </div>

<div class="flex-grow flex items-center justify-center relative overflow-hidden w-full">
                
                <div class="relative w-[300px] h-[300px] md:w-[400px] md:h-[400px] flex items-center justify-center">
                    
                    
                    
                    <div 
                        class="absolute inset-0 rounded-full bg-black shadow-2xl flex items-center justify-center {isPlaying ? 'vinyl-spin' : 'vinyl-spin vinyl-spin-paused'}"
                        style="box-shadow: 0 10px 30px -10px rgba(0,0,0,0.5), inset 0 0 0 4px #1a1a1a;"
                    >
                        
                        <div class="w-[98%] h-[98%] absolute rounded-full border-2 border-gray-800 opacity-50 relative">
                            <div class="absolute inset-[10%] rounded-full border border-gray-800"></div>
                            <div class="absolute inset-[20%] rounded-full border border-gray-800"></div>
                            <div class="absolute inset-[30%] rounded-full border border-gray-800"></div>
                            <div class="absolute inset-[40%] rounded-full border border-gray-800"></div>
                        </div>

<div class="w-[35%] h-[35%] absolute rounded-full overflow-hidden absolute shadow-inner z-10 bg-gray-200">
                             <img src={track.cover} alt="Label" class="w-full h-full object-cover opacity-90 mix-blend-multiply" />
                             
                             <div class="absolute top-1/2 left-1/2 w-3 h-3 bg-gray-100 rounded-full -translate-x-1/2 -translate-y-1/2 shadow-inner border border-gray-300"></div>
                        </div>
                        
                        
                         <div class="absolute inset-0 rounded-full bg-gradient-to-br from-white/10 to-transparent pointer-events-none"></div>
                    </div>

<div 
                        class="absolute -top-10 -right-[190px] w-48 h-64 pointer-events-none transition-transform duration-700 ease-in-out origin-[70%_15%] z-20 md:w-64 md:h-80"
                        style="transform: rotate({isPlaying ? '24deg' : '-6deg'});"
                    >
                        <svg viewBox="0 0 200 300" class="w-full h-full drop-shadow-xl">
                            
                            <circle cx="140" cy="40" r="25" fill="#f3f4f6" stroke="#d1d5db" stroke-width="2" />
                            <circle cx="140" cy="40" r="15" fill="#e5e7eb" stroke="#9ca3af" stroke-width="1" />
                            
                            
                            <path d="M140 40 L 130 180 q -5 30 -35 40 l -40 15" fill="none" stroke="#d1d5db" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" />
                            <path d="M140 40 L 130 180 q -5 30 -35 40 l -40 15" fill="none" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
                            
                            
                            <g transform="translate(55, 235) rotate(15)">
                                <rect x="0" y="0" width="30" height="45" rx="4" fill="#e5e7eb" stroke="#9ca3af" stroke-width="1" />
                                <rect x="5" y="35" width="20" height="2" fill="#999" />
                                
                                <line x1="15" y1="45" x2="15" y2="55" stroke="#333" stroke-width="1" />
                            </g>
                        </svg>
                    </div>

</div>
            </div>

<div class="bg-white pb-8 pt-6 px-8 rounded-t-[2.5rem] shadow-[0_-10px_40px_rgba(0,0,0,0.05)] relative z-30">
                <div class="flex flex-col items-center text-center mb-8">
                    <h2 class="text-2xl font-bold text-gray-900 mb-1">{track.name}</h2>
                    <p class="text-gray-500 font-medium">{track.artist}</p>
                </div>

<div class="mb-8 group">
                    <div class="h-1.5 bg-gray-100 rounded-full overflow-hidden cursor-pointer" on:click={(e) => {
                        const rect = e.currentTarget.getBoundingClientRect();
                        const p = (e.clientX - rect.left) / rect.width;
                        currentTime = p * duration;
                    }}>
                        <div class="h-full bg-black/80 rounded-full relative" style="width: {(currentTime / duration) * 100}%"></div>
                    </div>
                    <div class="flex justify-between text-xs font-mono text-gray-400 mt-2">
                        <span>{formatTime(currentTime)}</span>
                        <span>{formatTime(duration)}</span>
                    </div>
                </div>

<div class="flex items-center justify-between max-w-xs mx-auto w-full">
                    <button 
                        on:click={() => dispatch('prev')}
                        class="text-gray-400 hover:text-black transition-colors transform active:scale-95"
                    >
                        <i class="fas fa-step-backward fa-lg"></i>
                    </button>

<button 
                        on:click={togglePlay}
                        class="w-16 h-16 flex items-center justify-center bg-black text-white rounded-full shadow-lg hover:scale-105 active:scale-95 transition-all text-xl"
                    >
                         {#if isPlaying}
                            <i class="fas fa-pause"></i>
                        {:else}
                            <i class="fas fa-play pl-1"></i>
                        {/if}
                    </button>

<button 
                        on:click={() => dispatch('next')}
                        class="text-gray-400 hover:text-black transition-colors transform active:scale-95"
                    >
                        <i class="fas fa-step-forward fa-lg"></i>
                    </button>
                </div>
            </div>
        </div>

// --- State ---
            let view = 'input'; // 'input' | 'list' | 'player'
            let features = {
                danceability: { value: Math.random(), enabled: true },
                energy: { value: Math.random(), enabled: true },
                loudness: { value: Math.random(), enabled: true },
                speechiness: { value: Math.random(), enabled: true },
                acousticness: { value: Math.random(), enabled: true },
                instrumentalness: { value: Math.random(), enabled: true },
                liveness: { value: Math.random(), enabled: true },
                valence: { value: Math.random(), enabled: true },
            };

let recommendedTracks = [];
            let currentTrackIndex = 0;
            let isPlaying = false;

// --- Handlers ---

function handleGenerate() {
                recommendedTracks = generateRecommendations(features);
                view = 'list';
            }

function nextTrack() {
                isPlaying = false; // pause for transition
                setTimeout(() => {
                    currentTrackIndex = (currentTrackIndex + 1) % recommendedTracks.length;
                    isPlaying = true;
                }, 300);
            }

function prevTrack() {
                isPlaying = false;
                setTimeout(() => {
                    currentTrackIndex = (currentTrackIndex - 1 + recommendedTracks.length) % recommendedTracks.length;
                    isPlaying = true;
                }, 300);
            }

// Real Logic with Euclidean Distance
            function generateRecommendations(targetFeatures) {
                const db = window.TRACK_DB || [];
                if (db.length === 0) {
                    console.error("No track data loaded");
                    return [];
                }

console.log('Generating recommendations with features:', JSON.parse(JSON.stringify(targetFeatures)));

// 1. Identify active features and their target values
                const activeCriteria = Object.entries(targetFeatures)
                    .filter(([_, data]) => data.enabled)
                    .map(([key, data]) => ({ key, target: data.value }));

if (activeCriteria.length === 0) {
                    // Random if nothing selected
                    return db.sort(() => 0.5 - Math.random()).slice(0, 10).map(mapTrack);
                }

// 2. Score every track
                // Lower score = better match (closer distance)
                const scoredTracks = db.map((track, originalIndex) => {
                    let totalSquaredDiff = 0;

for (const { key, target } of activeCriteria) {
                        let trackValue = 0;
                        // Map internal key to JSON key

const jsonKey = `af_${key}`;
                        let rawValue = track[jsonKey];

if (key === 'loudness') {
                            // af.loudness is usually -60 to 0. 
                            // We normalize it to 0-1. (-60 -> 0, 0 -> 1)
                            // val = (raw + 60) / 60
                            rawValue = (rawValue + 60) / 60;
                            if (rawValue < 0) rawValue = 0;
                            if (rawValue > 1) rawValue = 1;
                        }

// Standard 0-1 features: danceability, energy, speechiness, acousticness, instrumentalness, liveness, valence

trackValue = rawValue || 0;
                        totalSquaredDiff += Math.pow(trackValue - target, 2);
                    }

return {
                        track,
                        score: Math.sqrt(totalSquaredDiff) // Euclidean distance
                    };
                });

// 3. Sort by score ascending
                scoredTracks.sort((a, b) => a.score - b.score);

// 4. Take top 10
                const top10 = scoredTracks.slice(0, 10).map(item => item.track);

return top10.map(mapTrack);
            }

// Mapper to internal format
            function mapTrack(t, i) {
                // Generate a consistent cover if missing (though JSON seems to have them)
                // or use a placeholder
                return {
                    id: i,
                    artist: t.artists_str || "Невідомий Виконавець",
                    name: t.track_name || "Трек без назви",
                    duration: "Preview",
                    cover: t.album_image_url || `https://picsum.photos/seed/${i}/400/400`,
                    url: t.preview_url
                };
            }

</script>

<main class="w-full h-full relative">
            {#if view === 'input'}
                <Inputs {features} on:generate={handleGenerate} />
            {:else if view === 'list'}
                <TrackList 
                    tracks={recommendedTracks} 
                    on:back={() => view = 'input'} 
                    on:play={handlePlay}
                />
            {/if}

{#if view === 'player'}
                <VinylPlayer 
                    track={recommendedTracks[currentTrackIndex]} 
                    isPlaying={isPlaying}
                    on:close={() => { view = 'list'; isPlaying = false; }}
                    on:pause={() => isPlaying = false}
                    on:resume={() => isPlaying = true}
                    on:next={nextTrack}
                    on:prev={prevTrack}
                />
            {/if}
        </main>