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

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

{% block content %}
{% if user.is_authenticated %}
<div class="container-fluid dashboard-container px-lg-5">
    <div class="row">
        <!-- LEFT SIDEBAR (Sticky) -->
        <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> Explore</a>
                    <a href="{% url 'matches' %}" class="nav-link {% if request.resolver_match.url_name == 'matches' %}active{% endif %}"><i class="bi bi-shield-check"></i> My Roster</a>
                    <a href="{% url 'inbox' %}" class="nav-link {% if request.resolver_match.url_name == 'inbox' or request.resolver_match.url_name == 'chat_detail' %}active{% endif %}"><i class="bi bi-chat-left-text"></i> Messages</a>
                    <a href="{% url 'events' %}" class="nav-link {% if request.resolver_match.url_name == 'events' %}active{% endif %}"><i class="bi bi-lightning-charge"></i> Sessions</a>
                    <a href="{% url 'groups:hub' %}" class="nav-link {% if 'groups' in request.path %}active{% endif %}"><i class="bi bi-grid-1x2"></i> Squads</a>
                    <a href="{% url 'my_posts' %}" class="nav-link {% if request.resolver_match.url_name == 'my_posts' %}active{% endif %}"><i class="bi bi-journal-text"></i> My Posts</a>
                    <a href="{% url 'my_profile' %}" class="nav-link {% if request.resolver_match.url_name == 'my_profile' or request.resolver_match.url_name == 'profile_detail' %}active{% endif %}"><i class="bi bi-person-badge"></i> Profile</a>
                    <a href="{% url 'settings' %}" class="nav-link {% if request.resolver_match.url_name == 'settings' %}active{% endif %}"><i class="bi bi-gear"></i> Settings</a>
                </nav>
            </div>
        </div>

        <!-- CENTER COLUMN -->
        <div class="col-lg-7 col-md-12">
            <!-- Welcome Header -->
            <div class="dashboard-section pt-2">
                <h1 class="welcome-header mb-1">Welcome back, {{ user.first_name|default:user.username }}</h1>
                <div class="d-flex align-items-center gap-3">
                    <span class="text-muted small"><i class="bi bi-geo-alt me-1"></i> {{ user.profile.location_city|default:"Location not set" }}</span>
                    {% if user.profile.primary_game %}
                    <span class="intent-badge">{{ user.profile.primary_game.name }}</span>
                    {% endif %}
                </div>
            </div>

            <!-- Post Composer -->
            <div class="dashboard-section">
                <div class="card p-4">
                    <form action="{% url 'create_post' %}" method="POST" enctype="multipart/form-data">
                        {% csrf_token %}
                        <div class="d-flex gap-4 mb-4">
                            <img src="{{ user.profile.get_avatar_url }}" class="rounded-circle" width="48" height="48" style="object-fit: cover; opacity: 0.9; border: 2px solid var(--r-cyan);">
                            <div class="flex-grow-1">
                                <label class="small fw-bold text-muted mb-2">Share your latest beauty breakthrough or find your ritual squad</label>
                                <textarea name="content" class="form-control border-0 bg-transparent" placeholder="What's your ritual today? Sharing a discovery or looking for advice..." rows="2" style="resize: none;"></textarea>
                            </div>
                        </div>
                        <div class="d-flex justify-content-between align-items-center pt-2">
                            <div class="d-flex gap-3">
                                <select name="post_type" class="form-select form-select-sm border-0 px-3" style="width: auto; font-size: 0.8rem;">
                                    {% for code, label in post_types %}
                                    <option value="{{ code }}">{{ label }}</option>
                                    {% endfor %}
                                </select>
                                <div class="upload-btn-wrapper">
                                    <button type="button" class="btn btn-outline-cg border-0 btn-sm px-3">
                                        <i class="bi bi-image text-muted"></i>
                                    </button>
                                    <input type="file" name="image" accept="image/*" />
                                </div>
                            </div>
                            <button type="submit" class="btn btn-primary-cg btn-sm px-4">Post</button>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Suggested Roster -->
            <div class="dashboard-section">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <h2 class="section-header mb-0">Suggested Roster</h2>
                    <a href="{% url 'home' %}" class="small text-decoration-none fw-bold text-cyan">View All</a>
                </div>
                <div class="horizontal-scroll">
                    {% for profile in suggested_members %}
                    <div class="suggestion-card text-center">
                        <a href="{% url 'profile_detail' profile.user.username %}" class="text-decoration-none">
                            <img src="{{ profile.get_avatar_url }}" class="rounded-circle mb-3" width="56" height="56" style="object-fit: cover; border: 2px solid var(--r-cyan);">
                            <h6 class="mb-1 small fw-bold text-truncate text-white">{{ profile.user.first_name }} {{ profile.user.last_name|slice:":1" }}.</h6>
                            <p class="small text-muted mb-3 text-truncate">{{ profile.primary_game.name|default:"Beauty Enthusiast" }}</p>
                        </a>
                        <div class="d-grid">
                            {% if profile.user.id in following_ids %}
                                <a href="{% url 'toggle_follow' profile.user.username %}" class="btn btn-outline-cg btn-sm py-1">Following</a>
                            {% else %}
                                <a href="{% url 'toggle_follow' profile.user.username %}" class="btn btn-primary-cg btn-sm py-1">Follow</a>
                            {% endif %}
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>

            <!-- Activity Feed -->
            <div class="feed dashboard-section">
                <h2 class="section-header mb-4">Activity Feed</h2>
                {% for post in posts %}
                <div class="card mb-5">
                    <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 %}
                        
                        <!-- Post Actions -->
                        <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>

                        <!-- Comments Section -->
                        <div class="collapse mt-4" id="comments-{{ post.id }}">
                            <div class="bg-secondary-section p-4 rounded-cg">
                                {% for comment in post.comments.all %}
                                <div class="d-flex gap-3 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-3 rounded-cg shadow-soft">
                                            <p class="small fw-bold mb-1">{{ comment.author.username }}</p>
                                            <p class="small mb-0 text-muted">{{ comment.content }}</p>
                                        </div>
                                    </div>
                                </div>
                                {% endfor %}
                                
                                <form action="{% url 'add_comment' post.id %}" method="POST" class="mt-3">
                                    {% csrf_token %}
                                    <div class="input-group">
                                        <input type="text" name="content" class="form-control border-0 rounded-start-cg px-4 bg-white" placeholder="Write a comment...">
                                        <button class="btn btn-primary-cg rounded-end-cg px-4" type="submit">Send</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                {% empty %}
                <div class="text-center py-5 bg-white rounded-cg shadow-soft">
                    <p class="text-muted">No posts yet. Start the conversation!</p>
                </div>
                {% endfor %}
            </div>
        </div>

        <!-- RIGHT SIDEBAR (Sticky) -->
        <div class="col-lg-3 d-none d-lg-block">
            <div class="sticky-sidebar pt-2">
                <!-- Quick Stats -->
                <div class="dashboard-section">
                    <div class="stat-widget">
                        <h2 class="section-header mb-4" style="font-size: 1.1rem;">Your Momentum</h2>
                        <div class="stat-item border-0 mb-2 d-flex justify-content-between">
                            <span class="small text-muted">Unread Messages</span>
                            <span class="badge bg-light text-dark rounded-pill small">{{ stats.unread_messages }}</span>
                        </div>
                        <div class="stat-item border-0 mb-2 d-flex justify-content-between">
                            <span class="small text-muted">Accountability Streak</span>
                            <span class="fw-bold text-sage small">{{ stats.streak }} 🔥</span>
                        </div>
                        <div class="stat-item border-0 mb-3 d-flex justify-content-between">
                            <span class="small text-muted">Upcoming Events</span>
                            <span class="fw-bold small">{{ stats.upcoming_events_count }}</span>
                        </div>
                        <div class="mt-4 pt-3 border-top">
                            <div class="d-flex justify-content-between small mb-2">
                                <span class="text-muted">Profile Completion</span>
                                <span class="fw-bold">{{ stats.completion_percentage }}%</span>
                            </div>
                            <div class="progress" style="height: 4px; background-color: rgba(0,0,0,0.05);">
                                <div class="progress-bar" style="width: {{ stats.completion_percentage }}%; background-color: var(--cg-slate);"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Quick Actions -->
                <div class="dashboard-section">
                    <div class="stat-widget">
                        <h2 class="section-header mb-4" style="font-size: 1.1rem;">Quick Actions</h2>
                        <div class="d-grid gap-3">
                            <a href="{% url 'event_create' %}" class="btn btn-outline-cg btn-sm text-start py-2"><i class="bi bi-calendar-plus me-3"></i> Create Session</a>
                            <a href="{% url 'matches' %}" class="btn btn-outline-cg btn-sm text-start py-2"><i class="bi bi-person-plus me-3"></i> Find Teammate</a>
                            <a href="{% url 'groups:create' %}" class="btn btn-outline-cg btn-sm text-start py-2"><i class="bi bi-plus-circle me-3"></i> Start Squad</a>
                        </div>
                    </div>
                </div>

                <!-- Suggested Events -->
                <div class="dashboard-section">
                    <div class="stat-widget">
                        <h2 class="section-header mb-3 border-bottom pb-2" style="font-size: 1.1rem;">Upcoming Sessions</h2>
                        {% for event in suggested_events %}
                        <div class="mb-3 pb-2 border-bottom">
                            <p class="small fw-bold mb-0 text-truncate">{{ event.title }}</p>
                            <p class="extra-small text-muted mb-0">{{ event.start_datetime|date:"M d, P" }}</p>
                        </div>
                        {% empty %}
                        <p class="extra-small text-muted text-center py-2">No upcoming sessions found.</p>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{% else %}
<!-- Anonymous Landing Page -->
<section class="hero-section py-5">
    <div class="container py-5">
        <div class="row justify-content-center">
            <div class="col-lg-10 text-center">
                <h1 class="hero-title">Build your ultimate Roster.</h1>
                <p class="lead text-muted mb-5 px-lg-5" style="font-size: 1.5rem;">Connect with the best in personalized beauty. Find your ritual, share your journey, and build your squad.</p>
                <div class="d-flex justify-content-center gap-4">
                    <a href="{% url 'signup' %}" class="btn btn-neon">Join Roster</a>
                    <a href="{% url 'about' %}" class="btn btn-outline-cg">Learn More</a>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="py-5">
    <div class="container py-5">
        <div class="d-flex justify-content-between align-items-end mb-5 flex-wrap gap-4">
            <div>
                <h2 class="text-metallic h1 mb-2">Discover Experts & Enthusiasts</h2>
                <p class="text-muted mb-0">Personalities aligned with your beauty goals and interests.</p>
            </div>
            <div class="d-flex overflow-auto pb-2 gap-3">
                <a href="{% url 'home' %}" class="btn btn-sm {% if not current_intent %}btn-neon{% else %}btn-outline-cg border-0{% endif %} rounded-pill px-4">All Profiles</a>
                {% for intent in intents %}
                <a href="?intent={{ intent.name }}" class="btn btn-sm {% if current_intent == intent.name %}btn-neon{% else %}btn-outline-cg border-0{% endif %} rounded-pill px-4">{{ intent.name }}</a>
                {% endfor %}
            </div>
        </div>

        <div class="row g-5">
            {% for profile in profiles %}
            <div class="col-md-6 col-lg-4">
                <div class="card p-5 h-100 d-flex flex-column border-0">
                    <div class="d-flex align-items-start mb-4">
                        <img src="{{ profile.get_avatar_url }}" alt="{{ profile.user.get_full_name }}" class="profile-avatar me-4" style="width: 64px; height: 64px; border: 2px solid var(--r-cyan);">
                        <div class="pt-1">
                            {% if profile.primary_game %}
                            <span class="intent-badge mb-2 d-inline-block">{{ profile.primary_game.name }}</span>
                            {% endif %}
                            <h3 class="h5 mb-1 fw-bold text-white">{{ profile.user.first_name }} {{ profile.user.last_name|slice:":1" }}.</h3>
                            <p class="text-muted small mb-0"><i class="bi bi-geo-alt me-2"></i> {{ profile.location_city }}</p>
                        </div>
                    </div>
                    <p class="fw-bold text-cyan mb-3">{{ profile.platform|upper|default:"BEAUTY" }} • {{ profile.rank|default:"Enthusiast" }}</p>
                    <p class="text-muted small mb-4 line-clamp-3">{{ profile.bio }}</p>
                    
                    <div class="mb-5 d-flex flex-wrap gap-2 mt-auto">
                        {% for intent in profile.intents.all %}
                        <span class="intent-badge">{{ intent.name }}</span>
                        {% endfor %}
                    </div>
                    
                    <div class="d-grid mt-2">
                        <a href="{% url 'signup' %}" class="btn btn-outline-cg">View Full Roster</a>
                    </div>
                </div>
            </div>
            {% empty %}
            <div class="col-12 text-center py-5">
                <p class="text-muted">No profiles found yet.</p>
            </div>
            {% endfor %}
        </div>
    </div>
</section>
{% endif %}
{% endblock %}
