{% extends "base.html" %}

{% block title %}Admin Chat Center{% endblock %}

{% block content %}
<section class="panel">
    <h1>Admin Chat Center</h1>
    <p>Unterhaltungen mit Nutzern einsehen und beantworten.</p>
</section>

<section class="layout">
    <aside class="users">
        <h3>Unterhaltungen</h3>
        {% for username in conversations %}
            <a class="user-link {{ 'active' if username == selected_user else '' }}" href="{{ url_for('admin_chats', username=username) }}">{{ username }}</a>
        {% else %}
            <p>Keine aktiven Unterhaltungen.</p>
        {% endfor %}
    </aside>

    <div class="chat-panel">
        <div class="messages">
            {% for msg in messages %}
            <div class="message {{ msg.sender_role }}">
                <strong>{{ msg.sender }}</strong>
                <p>{{ msg.message }}</p>
                <small>{{ msg.created_at }}</small>
            </div>
            {% else %}
            <p>Keine Nachrichten vorhanden.</p>
            {% endfor %}
        </div>
        {% if selected_user %}
        <form method="post" class="composer">
            <input type="hidden" name="username" value="{{ selected_user }}">
            <textarea name="message" rows="3" required placeholder="Antwort an {{ selected_user }}..."></textarea>
            <button type="submit">Antwort senden</button>
        </form>
        {% endif %}
    </div>
</section>

<style>
.panel { margin-bottom: 1rem; }
.layout { display: grid; grid-template-columns: 260px 1fr; gap: 1rem; }
.users, .chat-panel { background: #fff; border: 1px solid #d8e1e8; border-radius: 14px; padding: 1rem; }
.chat-panel { background: #efeae2; display: flex; flex-direction: column; }
.user-link { display: block; padding: 0.5rem; border-radius: 10px; border: 1px solid transparent; margin-bottom: 0.45rem; }
.user-link:hover, .user-link.active { border-color: #bcd0de; background: #f4f9fd; }
.messages { display: flex; flex-direction: column; gap: 0.8rem; margin-bottom: 0.8rem; height: 100%; min-height: 300px; max-height: 460px; overflow-y: auto; padding: 1rem 0; }
.message { max-width: 75%; padding: 0.5rem 0.75rem; border-radius: 10px; position: relative; box-shadow: 0 1px 1px rgba(0,0,0,0.1); word-wrap: break-word; }
.message.user { align-self: flex-start; background: #ffffff; border-top-left-radius: 0; }
.message.admin { align-self: flex-end; background: #dcf8c6; border-top-right-radius: 0; }
.message strong { display: block; font-size: 0.85rem; color: #075e54; margin-bottom: 0.2rem; }
.message p { margin: 0; font-size: 0.95rem; line-height: 1.4; }
.message small { display: block; text-align: right; font-size: 0.7rem; color: #888; margin-top: 0.3rem; }
.composer { display: flex; gap: 0.6rem; align-items: flex-end; background: transparent; }
textarea { flex-grow: 1; border: 1px solid #c9d8e3; border-radius: 20px; padding: 0.7rem 1rem; font: inherit; resize: none; background: #ffffff; }
button { flex-shrink: 0; width: fit-content; border: 1px solid #0a4c74; background: linear-gradient(120deg, #0c5a86 0%, #08486c 100%); color: #fff; padding: 0.6rem 1.2rem; border-radius: 999px; font-weight: 700; height: fit-content; margin-bottom: 0.2rem; }
@media (max-width: 960px) { .layout { grid-template-columns: 1fr; } }
</style>
{% endblock %}