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

{% block content %}
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card shadow-sm border-0 overflow-hidden">
                <div class="bg-primary py-5 text-center position-relative">
                    <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" 
                             style="width: 150px; height: 150px; object-fit: cover;"
                             alt="{{ target_user.username }}">
                    </div>
                </div>
                
                <div class="card-body pt-5 mt-4 text-center">
                    <h2 class="fw-bold mb-0">{{ target_user.first_name }} {{ target_user.last_name }}</h2>
                    <p class="text-muted mb-3">@{{ target_user.username }}</p>
                    
                    {% if target_user.profile.professional_headline %}
                        <h5 class="text-primary mb-3">{{ target_user.profile.professional_headline }}</h5>
                    {% endif %}
                    
                    <div class="d-flex justify-content-center gap-2 mb-4">
                        <span class="badge bg-light text-dark border">
                            <i class="bi bi-geo-alt me-1"></i> {{ target_user.profile.location_city|default:"Location not set" }}
                        </span>
                        <span class="badge bg-info-subtle text-info border border-info-subtle">
                            {{ target_user.profile.get_transition_status_display }}
                        </span>
                    </div>

                    <div class="px-md-5 mb-4 text-secondary">
                        {{ target_user.profile.bio|linebreaks }}
                    </div>

                    {% if request.user == target_user %}
                        <div class="d-grid gap-2 d-md-flex justify-content-md-center">
                            <a href="{% url 'edit_profile' %}" class="btn btn-primary px-4">
                                <i class="bi bi-pencil me-2"></i>Edit Profile
                            </a>
                            <a href="{% url 'settings' %}" class="btn btn-outline-secondary px-4">
                                <i class="bi bi-gear me-2"></i>Account Settings
                            </a>
                        </div>
                    {% else %}
                        <div class="d-grid gap-2 d-md-flex justify-content-md-center">
                            {% if is_following %}
                                <a href="{% url 'toggle_follow' target_user.username %}" class="btn btn-outline-primary px-4">
                                    <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 px-4">
                                    <i class="bi bi-person-plus me-2"></i>Follow
                                </a>
                            {% endif %}
                            <a href="{% url 'chat_detail' target_user.username %}" class="btn btn-outline-secondary px-4">
                                <i class="bi bi-chat-dots me-2"></i>Message
                            </a>
                        </div>
                    {% endif %}
                </div>
                
                <div class="card-footer bg-white border-top-0 py-4 px-md-5">
                    <div class="row text-center">
                        <div class="col border-end">
                            <h6 class="text-muted text-uppercase small fw-bold">Intents</h6>
                            <div class="mt-2">
                                {% for intent in target_user.profile.intents.all %}
                                    <span class="badge bg-secondary-subtle text-secondary rounded-pill px-3 mb-1 extra-small">
                                        <i class="bi {{ intent.icon }} me-1"></i>{{ intent.name }}
                                    </span>
                                {% empty %}
                                    <small class="text-muted extra-small">No intents shared</small>
                                {% endfor %}
                            </div>
                        </div>
                        <div class="col border-end">
                            <h6 class="text-muted text-uppercase small fw-bold">Values</h6>
                            <div class="mt-2">
                                {% for tag in target_user.profile.value_tags.all %}
                                    <span class="badge bg-dark-subtle text-dark rounded-pill px-3 mb-1 extra-small">
                                        #{{ tag.name }}
                                    </span>
                                {% empty %}
                                    <small class="text-muted extra-small">No values shared</small>
                                {% endfor %}
                            </div>
                        </div>
                        <div class="col">
                            <h6 class="text-muted text-uppercase small fw-bold">Momentum</h6>
                            <div class="mt-2">
                                <span class="badge bg-success-subtle text-success rounded-pill px-3 mb-1 extra-small">
                                    {{ target_user.profile.accountability_streak }} 🔥 Streak
                                </span>
                                <span class="badge bg-info-subtle text-info rounded-pill px-3 mb-1 extra-small">
                                    {{ target_user.profile.followers_count }} Followers
                                </span>
                                <span class="badge bg-primary-subtle text-primary rounded-pill px-3 mb-1 extra-small">
                                    {{ target_user.profile.following_count }} Following
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    <div class="row justify-content-center mt-4">
        <div class="col-md-8">
            <h3 class="h5 mb-4 px-2 fw-bold">Recent Activity</h3>
            {% for post in target_user.posts.all %}
                <div class="card border-0 shadow-sm mb-4 rounded-4 overflow-hidden">
                    <div class="card-body p-4">
                        <span class="post-badge badge-{{ post.post_type }}">{{ post.get_post_type_display }}</span>
                        <div class="d-flex justify-content-between align-items-start mb-3">
                            <div class="d-flex align-items-center">
                                <img src="{{ post.author.profile.get_avatar_url }}" class="rounded-circle me-3" width="48" height="48" 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>
                            {% if post.author == user %}
                            <div class="dropdown">
                                <button class="btn btn-link text-muted p-0" data-bs-toggle="dropdown">
                                    <i class="bi bi-three-dots"></i>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-end shadow-sm border-0">
                                    <li><a class="dropdown-item text-danger small" href="{% url 'delete_post' post.id %}"><i class="bi bi-trash me-2"></i> Delete post</a></li>
                                </ul>
                            </div>
                            {% endif %}
                        </div>
                        <p class="mb-3">{{ post.content }}</p>
                        {% if post.image %}
                        <img src="{{ post.image.url }}" class="img-fluid rounded-3 mb-3 w-100" style="max-height: 400px; object-fit: cover;">
                        {% endif %}
                        
                        <div class="d-flex gap-4 border-top pt-3 mt-3">
                            <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 text-danger{% endif %} me-1"></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-1"></i> {{ post.comments.count }}
                            </button>
                        </div>

                        <div class="collapse mt-3" id="comments-{{ post.id }}">
                            <div class="bg-light p-3 rounded-3">
                                {% for comment in post.comments.all %}
                                <div class="d-flex gap-2 mb-3">
                                    <img src="{{ comment.author.profile.get_avatar_url }}" class="rounded-circle" width="32" height="32" style="object-fit: cover;">
                                    <div class="flex-grow-1">
                                        <div class="bg-white p-2 rounded-3 shadow-sm">
                                            <p class="small fw-bold mb-1">{{ comment.author.username }}</p>
                                            <p class="small mb-0">{{ comment.content }}</p>
                                        </div>
                                    </div>
                                </div>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                </div>
            {% empty %}
                <div class="text-center py-5 bg-white rounded-3 shadow-sm">
                    <p class="text-muted mb-0">No posts yet.</p>
                </div>
            {% endfor %}
        </div>
    </div>
</div>
{% endblock %}
