{% extends 'base.html' %}
{% load social_filters %}

{% block content %}
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-md-9">
            <!-- Profile Header Card -->
            <div class="card border-0 shadow-soft rounded-cg overflow-hidden mb-5">
                <div class="bg-secondary-section py-5 text-center position-relative" style="height: 160px;">
                    <div class="position-absolute top-100 start-50 translate-middle">
                        <img src="{{ target_user.profile.get_avatar_url }}" 
                             class="rounded-circle border border-4 border-white shadow-soft" 
                             style="width: 160px; height: 160px; object-fit: cover;"
                             alt="{{ target_user.username }}">
                    </div>
                </div>
                
                <div class="card-body pt-5 mt-5 text-center px-lg-5">
                    <h1 class="mb-1">{{ target_user.first_name }} {{ target_user.last_name }}</h1>
                    <p class="text-muted mb-4 small">@{{ target_user.username }}</p>
                    
                    {% if target_user.profile.professional_headline %}
                        <h5 class="text-slate mb-4 opacity-75">{{ target_user.profile.professional_headline }}</h5>
                    {% endif %}
                    
                    <div class="d-flex justify-content-center gap-3 mb-5">
                        <span class="intent-badge bg-secondary-section border-0 px-3">
                            <i class="bi bi-geo-alt me-2"></i> {{ target_user.profile.location_city|default:"Location not set" }}
                        </span>
                        {% if target_user.profile.primary_game %}
                        <span class="intent-badge px-3">
                            <i class="bi bi-controller me-2"></i> {{ target_user.profile.primary_game.name }}
                        </span>
                        {% endif %}
                        {% if target_user.profile.platform %}
                        <span class="intent-badge px-3">
                            <i class="bi bi-display me-2"></i> {{ target_user.profile.get_platform_display }}
                        </span>
                        {% endif %}
                    </div>

                    <div class="px-md-5 mb-5 text-slate opacity-75 lead" style="font-size: 1.1rem; line-height: 1.8;">
                        {{ target_user.profile.bio|linebreaks }}
                    </div>

                    {% if request.user == target_user %}
                        <div class="d-flex justify-content-center gap-3 mb-4">
                            <a href="{% url 'edit_profile' %}" class="btn btn-primary-cg px-5">
                                <i class="bi bi-pencil me-2"></i>Edit Profile
                            </a>
                            <a href="{% url 'settings' %}" class="btn btn-outline-cg px-5">
                                <i class="bi bi-gear me-2"></i>Settings
                            </a>
                        </div>
                    {% else %}
                        <div class="d-flex justify-content-center gap-3 mb-4">
                            {% if is_following %}
                                <a href="{% url 'toggle_follow' target_user.username %}" class="btn btn-outline-cg px-5">
                                    <i class="bi bi-person-check-fill me-2"></i>Following
                                </a>
                            {% else %}
                                <a href="{% url 'toggle_follow' target_user.username %}" class="btn btn-primary-cg px-5">
                                    <i class="bi bi-person-plus me-2"></i>Follow
                                </a>
                            {% endif %}
                            <a href="{% url 'chat_detail' target_user.username %}" class="btn btn-outline-cg px-5">
                                <i class="bi bi-chat-dots me-2"></i>Message
                            </a>
                        </div>
                    {% endif %}
                </div>
                
                <div class="card-footer bg-white border-top-0 py-5 px-lg-5 border-top">
                    <div class="row g-4 text-center">
                        <div class="col-md-4 border-end border-light">
                            <h6 class="text-muted text-uppercase extra-small fw-bold mb-3 ls-1">Looking For</h6>
                            <div class="d-flex flex-wrap justify-content-center gap-2">
                                {% for intent in target_user.profile.intents.all %}
                                    <span class="intent-badge border-0" style="background: var(--cg-sand-primary);">
                                        {{ intent.name }}
                                    </span>
                                {% empty %}
                                    <small class="text-muted small">No intents shared</small>
                                {% endfor %}
                            </div>
                        </div>
                        <div class="col-md-4 border-end border-light">
                            <h6 class="text-muted text-uppercase extra-small fw-bold mb-3 ls-1">Traits</h6>
                            <div class="d-flex flex-wrap justify-content-center gap-2">
                                {% for tag in target_user.profile.value_tags.all %}
                                    <span class="intent-badge border-0" style="background: var(--cg-sand-secondary);">
                                        #{{ tag.name }}
                                    </span>
                                {% empty %}
                                    <small class="text-muted small">No traits shared</small>
                                {% endfor %}
                            </div>
                        </div>
                        <div class="col-md-4">
                            <h6 class="text-muted text-uppercase extra-small fw-bold mb-3 ls-1">Gamer Stats</h6>
                            <div class="d-flex flex-wrap justify-content-center gap-2">
                                {% if target_user.profile.rank %}
                                <span class="intent-badge border-0" style="background: var(--cg-sand-primary);">
                                    Rank: {{ target_user.profile.rank }}
                                </span>
                                {% endif %}
                                {% if target_user.profile.preferred_role %}
                                <span class="intent-badge border-0" style="background: var(--cg-sand-secondary);">
                                    Role: {{ target_user.profile.preferred_role }}
                                </span>
                                {% endif %}
                                <span class="intent-badge border-0 text-sage" style="background: var(--cg-sand-primary);">
                                    {{ target_user.profile.win_streak }} 🔥 Win Streak
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Activity Feed -->
            <div class="feed-section">
                <h3 class="mb-4">Recent Activity</h3>
                {% for post in target_user.posts.all %}
                    <div class="card border-0 shadow-soft mb-5 rounded-cg">
                        <div class="card-body p-4">
                            <div class="d-flex justify-content-between align-items-center mb-4">
                                <div class="d-flex align-items-center">
                                    <img src="{{ post.author.profile.get_avatar_url }}" class="rounded-circle me-3" width="44" height="44" style="object-fit: cover;">
                                    <div>
                                        <h4 class="h6 mb-0 fw-bold">{{ post.author.get_full_name|default:post.author.username }}</h4>
                                        <p class="text-muted extra-small mb-0">{{ post.timestamp|timesince }} ago</p>
                                    </div>
                                </div>
                                <span class="post-badge">{{ post.get_post_type_display }}</span>
                            </div>
                            <p class="mb-4">{{ post.content }}</p>
                            {% if post.image %}
                            <img src="{{ post.image.url }}" class="img-fluid rounded-cg mb-4 w-100" style="max-height: 400px; object-fit: cover;">
                            {% endif %}
                            
                            <div class="d-flex gap-4 border-top pt-4">
                                <a href="{% url 'toggle_reaction' post.id %}?type=heart" class="text-decoration-none {% if post|reacted_by:user %}text-danger{% else %}text-muted{% endif %} small fw-bold">
                                    <i class="bi bi-heart{% if post|reacted_by:user %}-fill{% endif %} me-2"></i> {{ post.reactions.count }}
                                </a>
                                <button class="btn btn-link p-0 text-muted text-decoration-none small fw-bold" type="button" data-bs-toggle="collapse" data-bs-target="#comments-{{ post.id }}">
                                    <i class="bi bi-chat me-2"></i> {{ post.comments.count }}
                                </button>
                            </div>
                        </div>
                    </div>
                {% empty %}
                    <div class="text-center py-5 bg-white rounded-cg shadow-soft">
                        <p class="text-muted mb-0">No posts yet.</p>
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>
</div>
{% endblock %}
