{% extends 'base.html' %}

{% block title %}Spotify Client Test{% endblock %}

{% block content %}
<div class="max-w-7xl mx-auto px-4 py-8">
    <h1 class="text-3xl font-bold mb-2 text-navy-800 font-montserrat">Spotify Client Comparison</h1>
    <p class="text-gray-600 mb-6">Comparing spotipy library vs direct API implementation.</p>

    <!-- Account Selection -->
    <div class="bg-white shadow-md rounded-lg p-6 mb-8">
        <form method="GET" action="{{ url_for('import.test_spotify_client') }}" class="space-y-4">
            <div>
                <label for="account" class="block text-sm font-medium text-gray-700 mb-1">Spotify Account</label>
                <select name="account" id="account" 
                        class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-teal-500 focus:border-teal-500">
                    <option value="spotify" {% if account == 'spotify' %}selected{% endif %}>spotify</option>
                    <option value="spotifycharts" {% if account == 'spotifycharts' %}selected{% endif %}>spotifycharts</option>
                    <option value="spotifymaps" {% if account == 'spotifymaps' %}selected{% endif %}>spotifymaps</option>
                    <option value="spotifyuk" {% if account == 'spotifyuk' %}selected{% endif %}>spotifyuk</option>
                    <option value="spotifyusa" {% if account == 'spotifyusa' %}selected{% endif %}>spotifyusa</option>
                    <option value="spotify_germany" {% if account == 'spotify_germany' %}selected{% endif %}>spotify_germany</option>
                </select>
            </div>
            
            <div>
                <button type="submit" class="bg-orange-500 hover:bg-orange-600 text-white py-2 px-4 rounded-md shadow-sm transition-colors">
                    Test Account
                </button>
            </div>
        </form>
    </div>

    <!-- Results Summary -->
    <div class="bg-white shadow-md rounded-lg p-6 mb-8">
        <h2 class="text-xl font-bold mb-4">Results Summary</h2>
        
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <!-- Spotipy Results -->
            <div class="border border-gray-200 rounded-lg p-4">
                <h3 class="text-lg font-semibold mb-2">Spotipy Implementation</h3>
                <div class="space-y-2">
                    <div class="flex justify-between border-b border-gray-100 pb-1">
                        <span class="text-gray-700">Playlists Retrieved:</span>
                        <span class="font-medium">{{ results.spotipy.count }}</span>
                    </div>
                    <div class="flex justify-between border-b border-gray-100 pb-1">
                        <span class="text-gray-700">Expected Total:</span>
                        <span class="font-medium">{{ results.spotipy.total }}</span>
                    </div>
                    <div class="flex justify-between border-b border-gray-100 pb-1">
                        <span class="text-gray-700">Execution Time:</span>
                        <span class="font-medium">{{ results.spotipy.time_ms }} ms</span>
                    </div>
                    {% if results.spotipy.error %}
                    <div class="mt-2 p-2 bg-red-50 text-red-700 rounded">
                        <strong>Error:</strong> {{ results.spotipy.error }}
                    </div>
                    {% endif %}
                </div>
            </div>
            
            <!-- Direct API Results -->
            <div class="border border-gray-200 rounded-lg p-4">
                <h3 class="text-lg font-semibold mb-2">Direct API Implementation</h3>
                <div class="space-y-2">
                    <div class="flex justify-between border-b border-gray-100 pb-1">
                        <span class="text-gray-700">Playlists Retrieved:</span>
                        <span class="font-medium">{{ results.direct.count }}</span>
                    </div>
                    <div class="flex justify-between border-b border-gray-100 pb-1">
                        <span class="text-gray-700">Expected Total:</span>
                        <span class="font-medium">{{ results.direct.total }}</span>
                    </div>
                    <div class="flex justify-between border-b border-gray-100 pb-1">
                        <span class="text-gray-700">Execution Time:</span>
                        <span class="font-medium">{{ results.direct.time_ms }} ms</span>
                    </div>
                    {% if results.direct.error %}
                    <div class="mt-2 p-2 bg-red-50 text-red-700 rounded">
                        <strong>Error:</strong> {{ results.direct.error }}
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    <!-- Comparison -->
    <div class="bg-white shadow-md rounded-lg p-6 mb-8">
        <h2 class="text-xl font-bold mb-4">Implementation Comparison</h2>
        
        <div class="space-y-4">
            <div class="flex items-center">
                <div class="w-1/3 font-medium">Playlists in both implementations:</div>
                <div class="w-2/3">{{ comparison.in_both|length }}</div>
            </div>
            
            <div class="flex items-center">
                <div class="w-1/3 font-medium">Only in spotipy:</div>
                <div class="w-2/3">{{ comparison.only_in_spotipy|length }}</div>
            </div>
            
            <div class="flex items-center">
                <div class="w-1/3 font-medium">Only in direct API:</div>
                <div class="w-2/3">{{ comparison.only_in_direct|length }}</div>
            </div>
        </div>
    </div>
    
    <!-- Playlist Details -->
    <div class="flex flex-col md:flex-row gap-6">
        <!-- Spotipy Playlists -->
        <div class="w-full md:w-1/2">
            <div class="bg-white shadow-md rounded-lg p-6">
                <h3 class="text-lg font-semibold mb-4">Spotipy Playlists ({{ results.spotipy.count }})</h3>
                {% if results.spotipy.playlists %}
                <div class="overflow-y-auto max-h-96">
                    <table class="min-w-full">
                        <thead>
                            <tr>
                                <th class="px-4 py-2 border-b text-left">#</th>
                                <th class="px-4 py-2 border-b text-left">Name</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for playlist in results.spotipy.playlists %}
                            <tr>
                                <td class="px-4 py-2 border-b">{{ loop.index }}</td>
                                <td class="px-4 py-2 border-b">{{ playlist.name }}</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                {% else %}
                <p class="text-gray-500">No playlists retrieved.</p>
                {% endif %}
            </div>
        </div>
        
        <!-- Direct API Playlists -->
        <div class="w-full md:w-1/2">
            <div class="bg-white shadow-md rounded-lg p-6">
                <h3 class="text-lg font-semibold mb-4">Direct API Playlists ({{ results.direct.count }})</h3>
                {% if results.direct.playlists %}
                <div class="overflow-y-auto max-h-96">
                    <table class="min-w-full">
                        <thead>
                            <tr>
                                <th class="px-4 py-2 border-b text-left">#</th>
                                <th class="px-4 py-2 border-b text-left">Name</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for playlist in results.direct.playlists %}
                            <tr>
                                <td class="px-4 py-2 border-b">{{ loop.index }}</td>
                                <td class="px-4 py-2 border-b">{{ playlist.name }}</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                {% else %}
                <p class="text-gray-500">No playlists retrieved.</p>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}