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

{% block title %}Dashboard | CommonGround{% 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 active"><i class="bi bi-compass"></i> Discover</a>
                    <a href="#" class="nav-link"><i class="bi bi-people"></i> My Matches</a>
                    <a href="{% url 'inbox' %}" class="nav-link"><i class="bi bi-chat-dots"></i> Messages</a>
                    <a href="#" class="nav-link"><i class="bi bi-calendar-event"></i> Events</a>
                    <a href="#" class="nav-link"><i class="bi bi-grid"></i> Groups</a>
                    <a href="{% url 'my_profile' %}" 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-7 col-md-12">
            <!-- Welcome Header -->
            <div class="mb-4 pt-2">
                <h2 class="h3 fw-bold mb-1">Welcome back, {{ user.first_name|default:user.username }}</h2>
                <div class="d-flex align-items-center gap-2">
                    <span class="badge rounded-pill bg-dark extra-small">{{ user.profile.get_transition_status_display }}</span>
                    <span class="text-muted extra-small"><i class="bi bi-geo-alt me-1"></i> {{ user.profile.location_city|default:"Location not set" }}</span>
                </div>
            </div>

            <!-- Post Composer -->
            <div class="card border-0 shadow-sm mb-4 rounded-4">
                <div class="card-body p-4">
                    <form action="{% url 'create_post' %}" method="POST" enctype="multipart/form-data">
                        {% csrf_token %}
                        <div class="d-flex gap-3 mb-3">
                            <img src="{{ user.profile.get_avatar_url }}" class="rounded-circle" width="48" height="48" style="object-fit: cover;">
                            <div class="flex-grow-1">
                                <label class="small fw-bold text-muted mb-1">What are you building this week?</label>
                                <textarea name="content" class="form-control border-0 bg-light rounded-3" placeholder="Share a progress update, ask for help, or offer a skill..." rows="2"></textarea>
                            </div>
                        </div>
                        <div class="d-flex justify-content-between align-items-center">
                            <div class="d-flex gap-2">
                                <select name="post_type" class="form-select form-select-sm border-0 bg-light rounded-pill px-3" style="width: auto; font-size: 0.75rem;">
                                    {% for code, label in post_types %}
                                    <option value="{{ code }}">{{ label }}</option>
                                    {% endfor %}
                                </select>
                                <div class="upload-btn-wrapper">
                                    <button type="button" class="btn btn-light btn-sm rounded-pill text-muted">
                                        <i class="bi bi-image"></i>
                                    </button>
                                    <input type="file" name="image" accept="image/*" />
                                </div>
                            </div>
                            <button type="submit" class="btn btn-primary-cg rounded-pill px-4 btn-sm">Post</button>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Suggested Members (Horizontal Scroll) -->
            <div class="mb-4">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h5 class="fw-bold mb-0 h6">Suggested Members</h5>
                    <a href="{% url 'home' %}" class="extra-small text-decoration-none fw-bold">View All</a>
                </div>
                <div class="horizontal-scroll">
                    {% for profile in suggested_members %}
                    <div class="suggestion-card shadow-sm">
                        <a href="{% url 'profile_detail' profile.user.username %}" class="text-decoration-none text-dark">
                            <img src="{{ profile.get_avatar_url }}" class="rounded-circle mb-2" width="50" height="50" style="object-fit: cover;">
                            <h6 class="mb-0 extra-small fw-bold text-truncate">{{ profile.user.first_name }} {{ profile.user.last_name|slice:":1" }}.</h6>
                            <p class="extra-small text-muted mb-2 text-truncate">{{ profile.professional_headline|default:"Member" }}</p>
                        </a>
                        {% if profile.user.id in following_ids %}
                            <a href="{% url 'toggle_follow' profile.user.username %}" class="btn btn-outline-primary btn-sm py-1 w-100 extra-small">Following</a>
                        {% else %}
                            <a href="{% url 'toggle_follow' profile.user.username %}" class="btn btn-primary-cg btn-sm py-1 w-100 extra-small">Follow</a>
                        {% endif %}
                    </div>
                    {% endfor %}
                </div>
            </div>

            <!-- Activity Feed -->
            <div class="feed mt-4">
                <h5 class="fw-bold mb-3 h6">Activity Feed</h5>
                {% for post in posts %}
                <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="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>
                            <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 extra-small" href="{% url 'hide_post' post.id %}"><i class="bi bi-eye-slash me-2"></i> Hide post</a></li>
                                    {% if post.author == user %}
                                    <li><hr class="dropdown-divider"></li>
                                    <li><a class="dropdown-item text-danger extra-small" href="{% url 'delete_post' post.id %}"><i class="bi bi-trash me-2"></i> Delete</a></li>
                                    {% endif %}
                                </ul>
                            </div>
                        </div>
                        <p class="mb-3 small">{{ post.content }}</p>
                        {% if post.image %}
                        <img src="{{ post.image.url }}" class="img-fluid rounded-3 mb-3 w-100" style="max-height: 350px; object-fit: cover;">
                        {% endif %}
                        
                        <!-- Post Actions -->
                        <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 %} extra-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 extra-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>

                        <!-- Comments Section -->
                        <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-2">
                                    <img src="{{ comment.author.profile.get_avatar_url }}" class="rounded-circle" width="28" height="28" style="object-fit: cover;">
                                    <div class="flex-grow-1">
                                        <div class="bg-white p-2 rounded-3 shadow-sm">
                                            <p class="extra-small fw-bold mb-0">{{ comment.author.username }}</p>
                                            <p class="extra-small mb-0">{{ comment.content }}</p>
                                        </div>
                                    </div>
                                </div>
                                {% endfor %}
                                
                                <form action="{% url 'add_comment' post.id %}" method="POST" class="mt-2">
                                    {% csrf_token %}
                                    <div class="input-group input-group-sm">
                                        <input type="text" name="content" class="form-control border-0 rounded-start-pill px-3 bg-white" placeholder="Write a comment...">
                                        <button class="btn btn-primary-cg rounded-end-pill px-3" type="submit">Send</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                {% empty %}
                <div class="text-center py-5 bg-white rounded-4 shadow-sm">
                    <p class="text-muted small">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">
                <!-- Quick Stats -->
                <div class="stat-widget shadow-sm mb-4">
                    <h6 class="fw-bold mb-3 border-bottom pb-2 h6">Your Momentum</h6>
                    <div class="stat-item">
                        <span class="extra-small text-muted">Unread Messages</span>
                        <span class="badge bg-danger rounded-pill extra-small">{{ stats.unread_messages }}</span>
                    </div>
                    <div class="stat-item">
                        <span class="extra-small text-muted">Accountability Streak</span>
                        <span class="fw-bold text-success extra-small">{{ stats.streak }} 🔥</span>
                    </div>
                    <div class="stat-item">
                        <span class="extra-small text-muted">Followers</span>
                        <span class="fw-bold extra-small text-info">{{ stats.followers_count }}</span>
                    </div>
                    <div class="stat-item">
                        <span class="extra-small text-muted">Following</span>
                        <span class="fw-bold extra-small text-primary">{{ stats.following_count }}</span>
                    </div>
                    <div class="stat-item">
                        <span class="extra-small text-muted">Upcoming Events</span>
                        <span class="fw-bold extra-small">{{ stats.upcoming_events_count }}</span>
                    </div>
                    <div class="mt-3">
                        <div class="d-flex justify-content-between extra-small mb-1">
                            <span class="text-muted">Profile Completion</span>
                            <span class="fw-bold">{{ stats.completion_percentage }}%</span>
                        </div>
                        <div class="progress" style="height: 6px;">
                            <div class="progress-bar bg-primary" style="width: {{ stats.completion_percentage }}%"></div>
                        </div>
                    </div>
                </div>

                <!-- Quick Actions -->
                <div class="stat-widget shadow-sm mb-4">
                    <h6 class="fw-bold mb-3 border-bottom pb-2 h6">Quick Actions</h6>
                    <div class="d-grid gap-2">
                        <button class="btn btn-outline-cg btn-sm text-start extra-small"><i class="bi bi-calendar-plus me-2"></i> Create Event</button>
                        <button class="btn btn-outline-cg btn-sm text-start extra-small"><i class="bi bi-person-plus me-2"></i> Find Partner</button>
                        <button class="btn btn-outline-cg btn-sm text-start extra-small"><i class="bi bi-plus-circle me-2"></i> Start Group</button>
                    </div>
                </div>

                <!-- Suggested Events -->
                <div class="stat-widget shadow-sm">
                    <h6 class="fw-bold mb-3 border-bottom pb-2 h6">Upcoming Events</h6>
                    {% for event in suggested_events %}
                    <div class="mb-3 pb-2 border-bottom">
                        <p class="extra-small fw-bold mb-0 text-truncate">{{ event.title }}</p>
                        <p class="extra-small text-muted mb-0">{{ event.start_time|date:"M d, P" }}</p>
                    </div>
                    {% empty %}
                    <p class="extra-small text-muted text-center py-2">No upcoming events found.</p>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
</div>

{% else %}
<!-- Anonymous Landing Page -->
<section class="hero-section">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <h1 class="display-4 fw-bold mb-3">Intentional connections for life's transitions.</h1>
                <p class="lead text-muted mb-4">CommonGround helps professionals build high-trust, platonic relationships based on shared values and life goals.</p>
                <div class="d-flex justify-content-center gap-3">
                    <a href="{% url 'get_started' %}" class="btn btn-primary-cg px-4 py-2">Get Started</a>
                    <a href="{% url 'about' %}" class="btn btn-outline-secondary rounded-3 px-4 py-2">Learn More</a>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="py-5 bg-white">
    <div class="container">
        <div class="d-flex justify-content-between align-items-end mb-4 flex-wrap gap-3">
            <div>
                <h2 class="h3 mb-1">Discovery Feed</h2>
                <p class="text-muted small mb-0">Members aligned with current goals and locations.</p>
            </div>
            <div class="d-flex overflow-auto pb-2">
                <a href="{% url 'home' %}" class="filter-pill {% if not current_intent %}active{% endif %} text-decoration-none small">All Aligned</a>
                {% for intent in intents %}
                <a href="?intent={{ intent.name }}" class="filter-pill {% if current_intent == intent.name %}active{% endif %} text-decoration-none small">{{ intent.name }}</a>
                {% endfor %}
            </div>
        </div>

        <div class="row g-4">
            {% for profile in profiles %}
            <div class="col-md-6 col-lg-4">
                <div class="profile-card p-4 h-100 d-flex flex-column shadow-sm border-0">
                    <div class="d-flex align-items-start mb-3">
                        <img src="{{ profile.get_avatar_url }}" alt="{{ profile.user.get_full_name }}" class="profile-avatar me-3" style="width: 60px; height: 60px;">
                        <div class="pt-1">
                            <span class="transition-tag extra-small">{{ profile.get_transition_status_display }}</span>
                            <h3 class="h6 mb-1 fw-bold">{{ profile.user.first_name }} {{ profile.user.last_name|slice:":1" }}.</h3>
                            <p class="text-muted extra-small mb-0"><i class="bi bi-geo-alt me-1"></i> {{ profile.location_city }}</p>
                        </div>
                    </div>
                    <p class="fw-bold small text-cg-slate mb-2">{{ profile.professional_headline }}</p>
                    <p class="text-muted small mb-3 line-clamp-3">{{ profile.bio }}</p>
                    
                    <div class="mb-4 d-flex flex-wrap gap-2 mt-auto">
                        {% for intent in profile.intents.all %}
                        <span class="intent-badge extra-small">{{ intent.name }}</span>
                        {% endfor %}
                    </div>
                    
                    <div class="d-grid">
                        <a href="{% url 'signup' %}" class="btn btn-outline-dark rounded-3 btn-sm py-2">Connect to View</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 %}
