{% 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 a highlight, a new strat, or look for a group</label>
                                <textarea name="content" class="form-control border-0 bg-transparent" placeholder="What's on your mind? LFG, highlight, or meta discussion..." 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:"Player" }}</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">Win 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 %}
<!-- 1) HERO SECTION -->
<section class="hero-gaming py-5">
    <div class="container py-5 text-center position-relative" style="z-index: 2;">
        <div class="row justify-content-center py-5">
            <div class="col-lg-10">
                <h1 class="hero-title mb-3">Stop Solo Queueing.<br>Build Your Squad.</h1>
                <p class="lead text-silver-dim mb-5 px-lg-5 mx-auto" style="max-width: 800px; font-size: 1.25rem;">Roster matches you with teammates based on game, rank, role, schedule, and vibe — so you never drop into a match alone again.</p>
                <div class="d-flex justify-content-center gap-3 flex-wrap">
                    <a href="{% url 'signup' %}" class="btn btn-neon px-5">Find My Squad</a>
                    <a href="#how-it-works" class="btn btn-outline-cg px-5">See How It Works</a>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- 2) PAIN SECTION -->
<section class="pain-section py-5">
    <div class="container py-5">
        <div class="row align-items-center g-5">
            <div class="col-lg-5">
                <h2 class="text-metallic h1 mb-4">Random teammates ruin ranked.</h2>
                <p class="text-muted lead mb-0">The solo queue experience is broken. We've all been there:</p>
            </div>
            <div class="col-lg-7">
                <div class="row g-4">
                    <div class="col-md-6">
                        <div class="pain-point h-100">
                            <h5 class="text-white mb-2">No comms</h5>
                            <p class="small text-muted mb-0">Silence in the lobby leads to chaos in the match.</p>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="pain-point h-100">
                            <h5 class="text-white mb-2">Role chaos</h5>
                            <p class="small text-muted mb-0">Three main DPS and no support? Every single time.</p>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="pain-point h-100">
                            <h5 class="text-white mb-2">Rank mismatch</h5>
                            <p class="small text-muted mb-0">Getting paired with players who aren't on your level.</p>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="pain-point h-100">
                            <h5 class="text-white mb-2">Toxic lobbies</h5>
                            <p class="small text-muted mb-0">Dealing with griefers and throwers instead of playing.</p>
                        </div>
                    </div>
                </div>
                <div class="mt-5 text-center text-lg-start">
                    <h3 class="text-neon-green h4 mb-0">Roster fixes that.</h3>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- 3) HOW IT WORKS -->
<section id="how-it-works" class="py-5">
    <div class="container py-5">
        <div class="text-center mb-5">
            <h2 class="text-metallic h1 mb-3">How it works</h2>
            <p class="text-muted">Simple, automated, and effective.</p>
        </div>
        <div class="row g-4">
            <div class="col-lg-4">
                <div class="step-card">
                    <div class="step-number">01</div>
                    <h4 class="text-white mb-3">Build your player profile</h4>
                    <p class="text-muted mb-0">Tell us your game, rank, role, schedule, and playstyle. It takes 2 minutes.</p>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="step-card">
                    <div class="step-number">02</div>
                    <h4 class="text-white mb-3">Get matched intelligently</h4>
                    <p class="text-muted mb-0">Our algorithm finds players with overlapping schedules and compatible skill levels.</p>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="step-card">
                    <div class="step-number">03</div>
                    <h4 class="text-white mb-3">Lock in your squad</h4>
                    <p class="text-muted mb-0">Message your matches, schedule sessions, and start climbing the ranks together.</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- 4) DIFFERENTIATION GRID -->
<section class="py-5 bg-glass border-glass border-start-0 border-end-0">
    <div class="container py-5">
        <div class="text-center mb-5">
            <h2 class="text-metallic h1 mb-3">The Roster Edge</h2>
            <p class="text-muted">Why settling for standard matchmaking is losing you Elo.</p>
        </div>
        
        <div class="diff-grid mx-auto" style="max-width: 900px;">
            <div class="diff-header d-none d-md-grid" style="grid-template-columns: 2fr 1fr 1fr 1.2fr; align-items: center;">
                <div>Feature</div>
                <div class="text-center">Discord</div>
                <div class="text-center">In-Game</div>
                <div class="text-center text-neon-green">Roster</div>
            </div>
            
            <div class="diff-row">
                <div class="diff-label">Compatibility Matching</div>
                <div class="diff-value text-muted"><i class="bi bi-dash"></i></div>
                <div class="diff-value text-muted"><i class="bi bi-dash"></i></div>
                <div class="diff-value diff-roster"><i class="bi bi-check2"></i></div>
            </div>
            
            <div class="diff-row">
                <div class="diff-label">Role Balancing</div>
                <div class="diff-value text-muted"><i class="bi bi-dash"></i></div>
                <div class="diff-value text-danger small">Limited</div>
                <div class="diff-value diff-roster"><i class="bi bi-check2"></i></div>
            </div>
            
            <div class="diff-row">
                <div class="diff-label">Schedule Overlap</div>
                <div class="diff-value text-muted small">Manual</div>
                <div class="diff-value text-muted"><i class="bi bi-dash"></i></div>
                <div class="diff-value diff-roster"><i class="bi bi-check2"></i></div>
            </div>
            
            <div class="diff-row">
                <div class="diff-label">Squad Building</div>
                <div class="diff-value text-muted small">Chaotic</div>
                <div class="diff-value text-muted"><i class="bi bi-dash"></i></div>
                <div class="diff-value diff-roster"><i class="bi bi-check2"></i></div>
            </div>
            
            <div class="diff-row">
                <div class="diff-label">Structured Sessions</div>
                <div class="diff-value text-muted"><i class="bi bi-dash"></i></div>
                <div class="diff-value text-muted"><i class="bi bi-dash"></i></div>
                <div class="diff-value diff-roster"><i class="bi bi-check2"></i></div>
            </div>
        </div>
    </div>
</section>

<!-- 5) FINAL CTA SECTION -->
<section class="cta-final text-center">
    <div class="container">
        <h2 class="hero-title mb-4" style="font-size: 4rem;">Your next win starts with<br>the right squad.</h2>
        <div class="mt-5">
            <a href="{% url 'signup' %}" class="btn btn-neon btn-lg px-5 py-3 shadow-lg" style="font-size: 1.5rem;">Find My Squad</a>
        </div>
    </div>
</section>
{% endif %}
{% endblock %}
