{% extends "base.html" %}
{% load static %}
{% load social_filters %}

{% block title %}Teammates | Roster{% endblock %}

{% block content %}
<div class="container-fluid dashboard-container px-lg-5">
    <div class="row">
        <!-- LEFT SIDEBAR -->
        <div class="col-lg-2 d-none d-lg-block">
            <div class="sticky-sidebar">
                <nav class="sidebar-nav">
                    <a href="{% url 'home' %}" class="nav-link {% if request.resolver_match.url_name == 'home' %}active{% endif %}"><i class="bi bi-compass"></i> Teammates</a>
                    <a href="{% url 'matches' %}" class="nav-link {% if 'matches' in request.path %}active{% endif %}"><i class="bi bi-people"></i> My Teammates</a>
                    <a href="{% url 'inbox' %}" class="nav-link"><i class="bi bi-chat-dots"></i> Messages</a>
                    <a href="{% url 'events' %}" class="nav-link"><i class="bi bi-calendar-event"></i> Sessions</a>
                    <a href="{% url 'groups:hub' %}" class="nav-link"><i class="bi bi-grid"></i> Squads</a>
                    <a href="{% url 'my_posts' %}" class="nav-link"><i class="bi bi-journal-text"></i> My Posts</a>
                    <a href="{% url 'my_profile' %}" class="nav-link"><i class="bi bi-person"></i> Profile</a>
                    <a href="{% url 'settings' %}" class="nav-link"><i class="bi bi-gear"></i> Settings</a>
                </nav>
            </div>
        </div>

        <!-- CENTER COLUMN -->
        <div class="col-lg-10 col-md-12">
            <div class="mb-5 pt-2">
                <h1 class="h2 mb-2">My Teammates</h1>
                <p class="text-muted mb-0">Manage your gaming teammates and squads.</p>
            </div>

            <!-- Tab Navigation & Filters -->
            <div class="card border-0 shadow-soft rounded-cg mb-5">
                <div class="card-body p-4">
                    <div class="d-flex justify-content-between align-items-center flex-wrap gap-4">
                        <div class="d-flex overflow-auto pb-1 gap-3">
                            <a href="{% url 'match_mutual' %}" class="btn btn-sm {% if current_tab == 'mutual' %}btn-primary-cg{% else %}btn-outline-cg border-0 bg-secondary-section{% endif %} rounded-pill px-4">Mutual</a>
                            <a href="{% url 'match_requests' %}" class="btn btn-sm {% if current_tab == 'requests' %}btn-primary-cg{% else %}btn-outline-cg border-0 bg-secondary-section{% endif %} rounded-pill px-4">
                                Requests
                                {% if stats.pending_connections > 0 %}
                                <span class="badge bg-white text-slate rounded-pill ms-2" style="font-size: 0.7rem;">{{ stats.pending_connections }}</span>
                                {% endif %}
                            </a>
                            <a href="{% url 'matches' %}?tab=sent" class="btn btn-sm {% if current_tab == 'sent' %}btn-primary-cg{% else %}btn-outline-cg border-0 bg-secondary-section{% endif %} rounded-pill px-4">Sent</a>
                            <a href="{% url 'match_liked' %}" class="btn btn-sm {% if current_tab == 'liked' %}btn-primary-cg{% else %}btn-outline-cg border-0 bg-secondary-section{% endif %} rounded-pill px-4">Liked</a>
                        </div>

                        <!-- Search & Filter -->
                        <form class="d-flex gap-3 flex-grow-1 flex-lg-grow-0" method="GET" style="min-width: 300px;">
                            <input type="hidden" name="tab" value="{{ current_tab }}">
                            <div class="input-group">
                                <input type="text" name="q" class="form-control border-0 bg-secondary-section rounded-start-cg px-4" placeholder="Search..." value="{{ search_query }}">
                                <button class="btn btn-outline-cg border-0 bg-secondary-section rounded-end-cg px-3" type="submit"><i class="bi bi-search text-muted"></i></button>
                            </div>
                            <select name="intent" class="form-select border-0 bg-secondary-section rounded-cg px-4" style="width: auto;" onchange="this.form.submit()">
                                <option value="">Intents</option>
                                {% for intent in intents %}
                                <option value="{{ intent.name }}" {% if current_intent == intent.name %}selected{% endif %}>{{ intent.name }}</option>
                                {% endfor %}
                            </select>
                        </form>
                    </div>
                </div>
            </div>

            <!-- Match Grid -->
            <div class="row g-5">
                {% for match_user in matches_list %}
                <div class="col-md-6 col-lg-4 col-xl-3">
                    <div class="profile-card p-5 border-0 shadow-soft d-flex flex-column h-100">
                        <div class="d-flex align-items-start mb-4">
                            <img src="{{ match_user.profile.get_avatar_url }}" alt="{{ match_user.get_full_name }}" class="rounded-circle me-3" style="width: 56px; height: 56px; object-fit: cover;">
                            <div class="pt-1 overflow-hidden">
                                {% if match_user.profile.primary_game %}
                                <span class="intent-badge mb-1 d-inline-block" style="font-size: 0.65rem;">{{ match_user.profile.primary_game.name }}</span>
                                {% endif %}
                                <h3 class="h6 mb-0 fw-bold text-truncate">{{ match_user.get_full_name|default:match_user.username }}</h3>
                                <p class="text-muted small mb-0 text-truncate"><i class="bi bi-geo-alt me-1"></i> {{ match_user.profile.location_city|default:"No Location" }}</p>
                            </div>
                        </div>
                        <p class="fw-bold small text-slate mb-2 text-truncate">{{ match_user.profile.platform|upper|default:"GAMER" }} • {{ match_user.profile.rank|default:"Casual" }}</p>
                        <p class="text-muted small mb-4 line-clamp-3" style="font-size: 0.8rem;">{{ match_user.profile.bio|default:"No bio yet." }}</p>
                        
                        <div class="mb-5 d-flex flex-wrap gap-2 mt-auto">
                            {% for intent in match_user.profile.intents.all %}
                            <span class="intent-badge" style="font-size: 0.65rem; padding: 2px 10px;">{{ intent.name }}</span>
                            {% endfor %}
                        </div>
                        
                        <div class="d-grid gap-3">
                            {% if current_tab == 'mutual' %}
                                <a href="{% url 'chat_detail' match_user.username %}" class="btn btn-primary-cg btn-sm">Message</a>
                                <div class="dropdown d-grid">
                                    <button class="btn btn-outline-cg btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown">Manage</button>
                                    <ul class="dropdown-menu dropdown-menu-end shadow-soft border-0 rounded-cg p-2">
                                        <li><a class="dropdown-item small rounded-cg py-2" href="{% url 'profile_detail' match_user.username %}">View Profile</a></li>
                                        <li><hr class="dropdown-divider opacity-50"></li>
                                        <li><a class="dropdown-item text-danger small rounded-cg py-2" href="{% url 'block_user' match_user.username %}" onclick="return confirm('Block this user?')">Block & Report</a></li>
                                    </ul>
                                </div>
                            {% elif current_tab == 'requests' %}
                                {% with request_id=request_map|get_item:match_user.id %}
                                <div class="d-flex gap-3">
                                    <a href="{% url 'handle_match_request' request_id %}?action=accept" class="btn btn-primary-cg btn-sm flex-grow-1">Accept</a>
                                    <a href="{% url 'handle_match_request' request_id %}?action=decline" class="btn btn-outline-cg btn-sm flex-grow-1">Decline</a>
                                </div>
                                {% endwith %}
                            {% elif current_tab == 'sent' %}
                                <a href="{% url 'cancel_match_request' match_user.username %}" class="btn btn-outline-cg btn-sm border-0 bg-secondary-section">Cancel Request</a>
                            {% elif current_tab == 'liked' %}
                                <a href="{% url 'send_match_request' match_user.username %}" class="btn btn-primary-cg btn-sm">Send Request</a>
                                <a href="{% url 'toggle_like' match_user.username %}" class="btn btn-outline-cg btn-sm">Unlike</a>
                            {% elif current_tab == 'blocked' %}
                                <a href="#" class="btn btn-outline-cg btn-sm disabled opacity-50">Blocked</a>
                            {% endif %}
                        </div>
                    </div>
                </div>
                {% empty %}
                <div class="col-12 text-center py-5 bg-white rounded-cg shadow-soft">
                    <i class="bi bi-people text-muted opacity-25 display-1 mb-4 d-block"></i>
                    <h4 class="fw-bold">No {{ current_tab }} found.</h4>
                    <p class="text-muted">Try adjusting your filters or search query.</p>
                    {% if current_tab == 'mutual' %}
                    <a href="{% url 'home' %}" class="btn btn-primary-cg mt-4">Find Teammates</a>
                    {% endif %}
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
</div>
{% endblock %}
