{% extends 'mysite/base.html' %}

{% block title %}Мой профиль{% endblock %}

{% block content %}
<h2>👤 Мой профиль</h2>

<div class="row">
    <div class="col-md-4">
        <div class="card shadow mb-4">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0">Личная информация</h5>
            </div>
            <div class="card-body">
                <p><strong>ФИО:</strong> {{ meloman.full_name }}</p>
                <p><strong>Пол:</strong> {{ meloman.get_gender_display|default:"—" }}</p>
                <p><strong>Город:</strong> {{ meloman.city|default:"—" }}</p>
                <p><strong>Год рождения:</strong> {{ meloman.birth_year|default:"—" }}</p>
                <p><strong>Возраст:</strong> {{ age|default:"—" }} лет</p>
            </div>
        </div>
    </div>
    
    <div class="col-md-4">
        <div class="card shadow mb-4">
            <div class="card-header bg-success text-white">
                <h5 class="mb-0">Статистика оценок</h5>
            </div>
            <div class="card-body text-center">
                <h1 class="display-4">{{ total_ratings }}</h1>
                <p>всего оценок</p>
                <hr>
                <h3>
                    {% if avg_user_rating %}
                        <span class="
                            {% if avg_user_rating >= 8 %}avg-rating-high
                            {% elif avg_user_rating >= 5 %}avg-rating-medium
                            {% else %}avg-rating-low{% endif %}
                        ">
                            {{ avg_user_rating|floatformat:1 }}
                        </span>
                    {% else %}
                        —
                    {% endif %}
                </h3>
                <p>средний балл пользователя</p>
            </div>
        </div>
    </div>
    
    <div class="col-md-4">
        <div class="card shadow mb-4">
            <div class="card-header bg-warning text-dark">
                <h5 class="mb-0">Любимые жанры</h5>
            </div>
            <div class="card-body">
                {% if favorite_genres %}
                    <ul class="list-group">
                        {% for pref in favorite_genres %}
                            <li class="list-group-item">🎸 {{ pref.genre.genre_name }}</li>
                        {% endfor %}
                    </ul>
                {% else %}
                    <p class="text-muted text-center">Нет выбранных жанров</p>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<div class="card shadow">
    <div class="card-header bg-info text-white">
        <h5 class="mb-0">📝 Последние оценки</h5>
    </div>
    <div class="card-body">
        {% if recent_ratings %}
            <div class="table-responsive">
                <table class="table table-sm">
                    <thead>
                        <tr>
                            <th>Песня</th>
                            <th>Исполнитель</th>
                            <th>Оценка</th>
                            <th>Дата</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for rating in recent_ratings %}
                        <tr>
                            <td>{{ rating.song.title }}</td>
                            <td>{{ rating.song.album.musician.name }}</td>
                            <td>
                                <span class="
                                    {% if rating.score >= 8 %}avg-rating-high
                                    {% elif rating.score >= 5 %}avg-rating-medium
                                    {% else %}avg-rating-low{% endif %}
                                ">
                                    {{ rating.score }} / 10
                                </span>
                            </td>
                            <td>{{ rating.rating_date }}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        {% else %}
            <p class="text-muted text-center">Вы еще не поставили ни одной оценки</p>
        {% endif %}
    </div>
</div>
{% endblock %}