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

{% block title %}Chat with {{ chat_partner.user.username }} - Gatsby{% endblock %}

{% block extra_css %}
<style>
    .chat-container {
        height: calc(100vh - 400px);
        min-height: 400px;
        overflow-y: auto;
        padding-right: 15px;
    }
    .message-bubble {
        max-width: 75%;
        border-radius: 20px;
        padding: 12px 18px;
        margin-bottom: 12px;
        font-size: 0.95rem;
        position: relative;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    }
    .message-sent {
        background: linear-gradient(135deg, var(--primary-accent), #3d5afe);
        color: white;
        margin-left: auto;
        border-bottom-right-radius: 5px;
    }
    .message-received {
        background-color: rgba(255, 255, 255, 0.05);
        color: #e0e0e0;
        margin-right: auto;
        border-bottom-left-radius: 5px;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }
    .message-time {
        font-size: 0.75rem;
        color: rgba(255,255,255,0.5);
        margin-top: 5px;
        display: block;
    }
    .chat-container::-webkit-scrollbar {
        width: 6px;
    }
    .chat-container::-webkit-scrollbar-thumb {
        background: rgba(255,255,255,0.1);
        border-radius: 10px;
    }
    .glass-input {
        background: rgba(0, 0, 0, 0.3) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        color: white !important;
        border-radius: 30px !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    .glass-input:focus {
        background: rgba(0, 0, 0, 0.5) !important;
        border-color: var(--primary-accent) !important;
        box-shadow: 0 0 15px rgba(0, 163, 255, 0.2) !important;
    }
</style>
{% endblock %}

{% block content %}
<div class="row">
    <div class="col-md-10 offset-md-1">
        <div class="card glass-card p-0 overflow-hidden shadow-lg border-0">
            <!-- Chat Header -->
            <div class="card-header p-4 border-bottom border-secondary-subtle d-flex align-items-center">
                <a href="{% url 'messages' %}" class="btn btn-link text-white p-0 me-3">
                    <i class="bi bi-arrow-left" style="font-size: 1.25rem;"></i>
                </a>
                <div class="rounded-circle bg-dark p-2 text-white fw-bold me-3 shadow-sm border border-secondary" style="width: 45px; height: 45px; display: flex; align-items: center; justify-content: center;">
                    {{ chat_partner.user.username|first|upper }}
                </div>
                <div>
                    <h5 class="mb-0 text-white fw-bold">{{ chat_partner.user.username }}</h5>
                    <p class="mb-0 text-secondary small">{{ chat_partner.university }} · {{ chat_partner.role|title }}</p>
                </div>
            </div>

            <!-- Chat Body -->
            <div class="card-body p-4 chat-container" id="chat-box">
                {% for message in messages %}
                <div class="message-bubble {% if message.sender == user.profile %}message-sent{% else %}message-received{% endif %}">
                    {{ message.content }}
                    <span class="message-time">
                        {% if message.sender == user.profile %}You{% else %}{{ message.sender.user.username }}{% endif %} · {{ message.timestamp|date:"H:i" }}
                    </span>
                </div>
                {% empty %}
                <div class="text-center py-5">
                    <p class="text-secondary small">This is the beginning of your conversation with {{ chat_partner.user.username }}.</p>
                </div>
                {% endfor %}
            </div>

            <!-- Chat Footer -->
            <div class="card-footer p-4 border-top border-secondary-subtle">
                <form method="post" id="message-form">
                    {% csrf_token %}
                    <div class="input-group">
                        <textarea name="content" class="form-control glass-input" placeholder="Type a message..." rows="1" required id="id_content" style="resize: none;"></textarea>
                        <button class="btn btn-primary rounded-pill px-4 py-2 ms-2 fw-bold" type="submit">
                            <i class="bi bi-send-fill"></i>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
    // Scroll to bottom of chat
    const chatBox = document.getElementById('chat-box');
    chatBox.scrollTop = chatBox.scrollHeight;
    
    // Auto-expand textarea
    const textarea = document.getElementById('id_content');
    textarea.addEventListener('input', function() {
        this.style.height = 'auto';
        this.style.height = (this.scrollHeight) + 'px';
        if (this.scrollHeight > 150) {
            this.style.overflowY = 'scroll';
            this.style.height = '150px';
        } else {
            this.style.overflowY = 'hidden';
        }
    });
    
    // Handle enter key
    textarea.addEventListener('keydown', function(e) {
        if (e.key === 'Enter' && !e.shiftKey) {
            e.preventDefault();
            document.getElementById('message-form').submit();
        }
    });
</script>
{% endblock %}