{% extends 'base.html' %}
{% block content %}
<div class="page-toolbar">
  <div>
    <h1 class="h3 mb-1">Chat</h1>
    <p class="text-muted mb-0">Mensajería privada, grupos y archivos entre administración, recepción y profesionales.</p>
  </div>
</div>
<div class="row g-4">
  <div class="col-lg-4">
    <div class="card table-panel mb-4"><div class="card-header"><strong>Nuevo chat privado</strong></div><div class="card-body"><form method="post" class="row g-3"><input type="hidden" name="action" value="start_private"><div class="col-12"><label class="form-label">Usuario</label><select class="form-select searchable-select" name="target_user_id" data-placeholder="Seleccionar usuario" required><option value="">Seleccionar</option>{% for user in available_users %}<option value="{{ user.id }}">{{ user.full_name }} · {{ user.role }}</option>{% endfor %}</select></div><div class="col-12 d-grid"><button class="btn btn-primary">Abrir chat</button></div></form></div></div>
    <div class="card table-panel mb-4"><div class="card-header"><strong>Nuevo grupo</strong></div><div class="card-body"><form method="post" class="row g-3"><input type="hidden" name="action" value="create_group"><div class="col-12"><label class="form-label">Nombre del grupo</label><input class="form-control" name="title" placeholder="Ej. Guardia mañana" required></div><div class="col-12"><label class="form-label">Integrantes</label><select class="form-select searchable-select" name="member_ids" data-placeholder="Seleccionar integrantes" multiple>{% for user in available_users %}<option value="{{ user.id }}">{{ user.full_name }} · {{ user.role }}</option>{% endfor %}</select></div><div class="col-12 d-grid"><button class="btn btn-outline-primary">Crear grupo</button></div></form></div></div>
    <div class="card table-panel"><div class="card-header"><strong>Conversaciones</strong></div><div class="list-group list-group-flush">
      {% for item in conversations %}
      <a class="list-group-item list-group-item-action {% if active_conversation and active_conversation.id == item.conversation.id %}active{% endif %}" href="{{ url_for('admin_chat', conversation_id=item.conversation.id) }}">
        <div class="d-flex justify-content-between align-items-start gap-3">
          <div>
            <div class="fw-semibold">{{ item.display_name }}</div>
            <div class="small {% if active_conversation and active_conversation.id == item.conversation.id %}text-white-50{% else %}text-muted{% endif %}">{{ item.last_message.body if item.last_message and item.last_message.body else 'Sin mensajes' }}</div>
          </div>
          {% if item.unread %}<span class="badge text-bg-danger">{{ item.unread }}</span>{% endif %}
        </div>
      </a>
      {% else %}
      <div class="p-4 text-muted text-center">Todavía no hay conversaciones.</div>
      {% endfor %}
    </div></div>
  </div>
  <div class="col-lg-8">
    <div class="card table-panel h-100 d-flex flex-column">
      <div class="card-header d-flex justify-content-between align-items-center">
        <div>
          <strong>{{ active_chat_title if active_conversation else 'Seleccioná una conversación' }}</strong>
          {% if active_conversation %}<div class="small text-muted">{{ active_conversation.members|length }} integrante(s)</div>{% endif %}
        </div>
      </div>
      <div class="card-body d-flex flex-column" style="min-height: 520px;">
        {% if active_conversation %}
        <div class="flex-grow-1 overflow-auto pe-1" style="max-height: 420px;">
          {% for message in active_messages %}
          <div class="mb-3 {% if message.sender_id == current_user.id %}text-end{% endif %}">
            <div class="d-inline-block p-3 rounded-4 shadow-sm {% if message.sender_id == current_user.id %}bg-primary text-white{% else %}bg-light{% endif %}" style="max-width: 85%; text-align: left;">
              <div class="small fw-semibold mb-1">{{ message.sender.full_name if message.sender else 'Sistema' }}</div>
              {% if message.body %}<div>{{ message.body|replace('\n','<br>')|safe }}</div>{% endif %}
              {% for att in message.attachments %}
              <div class="mt-2"><a href="{{ url_for('static', filename=att.file_path) }}" target="_blank" class="btn btn-sm {% if message.sender_id == current_user.id %}btn-light{% else %}btn-outline-secondary{% endif %}"><i class="bi bi-paperclip"></i> {{ att.filename }}</a></div>
              {% endfor %}
              <div class="small mt-2 {% if message.sender_id == current_user.id %}text-white-50{% else %}text-muted{% endif %}">{{ message.created_at.strftime('%d/%m/%Y %H:%M') if message.created_at else '' }}</div>
            </div>
          </div>
          {% endfor %}
        </div>
        <form method="post" enctype="multipart/form-data" class="row g-3 pt-3 border-top mt-3">
          <input type="hidden" name="action" value="send_message">
          <input type="hidden" name="conversation_id" value="{{ active_conversation.id }}">
          <div class="col-12"><label class="form-label">Mensaje</label><textarea class="form-control" name="body" rows="4" placeholder="Escribí tu mensaje..."></textarea></div>
          <div class="col-md-8"><label class="form-label">Archivo</label><input type="file" class="form-control" name="chat_file"></div>
          <div class="col-md-4 d-grid align-items-end"><button class="btn btn-primary mt-md-4"><i class="bi bi-send"></i> Enviar</button></div>
        </form>
        {% else %}
        <div class="empty-state my-auto"><i class="bi bi-chat-dots"></i><h3>Seleccioná una conversación</h3><p>Podés abrir un chat privado o crear un grupo desde el panel lateral.</p></div>
        {% endif %}
      </div>
    </div>
  </div>
</div>
{% endblock %}