{% extends "layouts/app.twig" %}

{% block content %}
<div class="p-6">
    <!-- Back button -->
    <div class="mb-6">
        <a href="{{ path_for('music.index') }}" class="inline-flex items-center text-sm text-blue-600 hover:text-blue-800">
            <svg class="w-4 h-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
            </svg>
            Back to Music
        </a>
    </div>

    <!-- Album Header -->
    <div class="bg-white rounded-lg shadow-md border border-gray-200 overflow-hidden mb-6">
        <div class="md:flex">
            <!-- Album Cover -->
            <div class="md:w-1/3 lg:w-1/4 p-6 flex justify-center">
                {% if album.cover_url %}
                <img src="/images/{{ album.cover_url }}" alt="{{ album.title }}" class="w-full max-w-sm rounded-lg shadow-lg">
                {% else %}
                <div class="w-full max-w-sm aspect-square bg-gradient-to-br from-gray-100 to-gray-200 rounded-lg flex items-center justify-center">
                    <svg class="text-gray-400 w-24 h-24" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3"/>
                    </svg>
                </div>
                {% endif %}
            </div>

            <!-- Album Info -->
            <div class="md:w-2/3 lg:w-3/4 p-6">
                <div class="flex items-start justify-between mb-4">
                    <div class="flex-1">
                        <h1 class="text-3xl font-bold text-gray-900 mb-2">{{ album.title }}</h1>
                        {% if artist %}
                        <h2 class="text-xl text-gray-600 mb-2">
                            <a href="#" class="hover:text-blue-600">{{ artist.name }}</a>
                        </h2>
                        {% else %}
                        <h2 class="text-xl text-gray-600 mb-2">{{ album.artist_name }}</h2>
                        {% endif %}
                    </div>
                    {% if album.is_favorite %}
                    <div class="ml-4">
                        <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-red-100 text-red-800">
                            <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"/>
                            </svg>
                            Favorite
                        </span>
                    </div>
                    {% endif %}
                </div>

                <!-- Album Details -->
                <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-4">
                    {% if album.release_date %}
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Release Date</dt>
                        <dd class="text-sm text-gray-900">{{ album.release_date|date('M j, Y') }}</dd>
                    </div>
                    {% endif %}
                    {% if album.track_count %}
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Tracks</dt>
                        <dd class="text-sm text-gray-900">{{ album.track_count }}</dd>
                    </div>
                    {% endif %}
                    {% if album.total_duration_seconds %}
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Duration</dt>
                        <dd class="text-sm text-gray-900">{{ (album.total_duration_seconds / 60)|round(0) }} min</dd>
                    </div>
                    {% endif %}
                    {% if album.genre %}
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Genre</dt>
                        <dd class="text-sm text-gray-900">{{ album.genre }}</dd>
                    </div>
                    {% endif %}
                </div>

                <!-- Source Info -->
                <div class="flex items-center text-sm text-gray-600 mb-4">
                    <span>Source: {{ album.source_name }}</span>
                </div>

                <!-- Action Buttons -->
                <div class="flex gap-3">
                    <button class="inline-flex items-center px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
                        <svg class="w-4 h-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h1.586a1 1 0 01.707.293l.707.707A1 1 0 0012.414 11H15m-3 7.5A9.5 9.5 0 1121.5 12 9.5 9.5 0 0112 2.5z"/>
                        </svg>
                        Play Album
                    </button>
                    <button class="inline-flex items-center px-4 py-2 bg-gray-100 text-gray-700 text-sm font-medium rounded-md hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2">
                        <svg class="w-4 h-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
                        </svg>
                        Add to Playlist
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Tracks Section -->
    {% if tracks %}
    <div class="bg-white rounded-lg shadow-md border border-gray-200 overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-200">
            <h3 class="text-lg font-medium text-gray-900">Tracks</h3>
        </div>
        <div class="divide-y divide-gray-200">
            {% for track in tracks %}
            <div class="px-6 py-4 hover:bg-gray-50 transition-colors">
                <div class="flex items-center justify-between">
                    <div class="flex items-center flex-1 min-w-0">
                        <!-- Track Number -->
                        <div class="flex-shrink-0 w-8 text-sm text-gray-500 text-center">
                            {{ track.track_number }}
                        </div>

                        <!-- Play Button -->
                        <button class="flex-shrink-0 w-8 h-8 flex items-center justify-center text-gray-400 hover:text-blue-600 mr-3">
                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"/>
                            </svg>
                        </button>

                        <!-- Track Info -->
                        <div class="flex-1 min-w-0">
                            <div class="text-sm font-medium text-gray-900 truncate">{{ track.title }}</div>
                            {% if track.artist_name and track.artist_name != album.artist_name %}
                            <div class="text-sm text-gray-500 truncate">{{ track.artist_name }}</div>
                            {% endif %}
                        </div>
                    </div>

                    <!-- Track Duration -->
                    <div class="flex-shrink-0 text-sm text-gray-500 ml-4">
                        {% if track.duration_seconds %}
                        {{ '%02d'|format((track.duration_seconds / 60)|round(0)) }}:{{ '%02d'|format(track.duration_seconds % 60) }}
                        {% endif %}
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
    {% endif %}

    <!-- Additional Information -->
    {% if metadata %}
    <div class="mt-6 bg-white rounded-lg shadow-md border border-gray-200 overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-200">
            <h3 class="text-lg font-medium text-gray-900">Additional Information</h3>
        </div>
        <div class="px-6 py-4">
            <dl class="grid grid-cols-1 md:grid-cols-2 gap-4">
                {% if metadata.label %}
                <div>
                    <dt class="text-sm font-medium text-gray-500">Label</dt>
                    <dd class="text-sm text-gray-900">{{ metadata.label }}</dd>
                </div>
                {% endif %}
                {% if metadata.popularity %}
                <div>
                    <dt class="text-sm font-medium text-gray-500">Popularity</dt>
                    <dd class="text-sm text-gray-900">{{ metadata.popularity }}/100</dd>
                </div>
                {% endif %}
                {% if metadata.spotify_id %}
                <div>
                    <dt class="text-sm font-medium text-gray-500">Spotify ID</dt>
                    <dd class="text-sm text-gray-900 font-mono">{{ metadata.spotify_id }}</dd>
                </div>
                {% endif %}
                {% if metadata.musicbrainz_id %}
                <div>
                    <dt class="text-sm font-medium text-gray-500">MusicBrainz ID</dt>
                    <dd class="text-sm text-gray-900 font-mono">{{ metadata.musicbrainz_id }}</dd>
                </div>
                {% endif %}
            </dl>
        </div>
    </div>
    {% endif %}
</div>
{% endblock %}