{% extends 'layouts/base.html' %}
{% load static i18n %}

{% block title %}{% trans "Chat" %}{% endblock title %}

{% block extrastyle %}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/emoji-button@4.6.0/dist/index.min.css">
<link rel="stylesheet" href="{% static 'css/websocket-chat.css' %}">
{% endblock extrastyle %}

{% block extrahead %}
<style>
  @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@600&display=swap');

  .chat-container {
    background: radial-gradient(ellipse at center, #1a1a2e 0%, #121220 100%);
    min-height: 100vh;
    padding: 2rem 0;
  }

  .chat-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 0 15px rgba(111, 66, 193, 0.5), 0 0 25px rgba(13, 202, 240, 0.3);
    border: 2px solid #6f42c1;
    overflow: hidden;
    height: 80vh;
  }

  .chat-header {
    background: linear-gradient(135deg, #6f42c1, #e83e8c);
    color: white;
    padding: 1.5rem 2rem;
    text-align: center;
    position: relative;
  }

  .chat-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="white" opacity="0.1"/><circle cx="75" cy="75" r="1" fill="white" opacity="0.1"/><circle cx="50" cy="10" r="0.5" fill="white" opacity="0.1"/><circle cx="10" cy="60" r="0.5" fill="white" opacity="0.1"/><circle cx="90" cy="40" r="0.5" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
    opacity: 0.3;
  }

  .chat-header h2 {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    margin: 0;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 1;
  }

  .chat-header p {
    font-size: 1rem;
    margin: 0.5rem 0 0 0;
    opacity: 0.9;
    position: relative;
    z-index: 1;
  }

  .chat-body {
    display: flex;
    height: calc(100% - 120px);
  }

  .friends-sidebar {
    width: 300px;
    border-right: 2px solid #e9ecef;
    background: #f8f9fa;
    display: flex;
    flex-direction: column;
  }

  .friends-header {
    padding: 1rem;
    border-bottom: 2px solid #e9ecef;
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
  }

  .friends-header h4 {
    color: #6f42c1;
    font-weight: 600;
    margin: 0;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .search-container {
    padding: 1rem;
    border-bottom: 1px solid #e9ecef;
  }

  .search-input {
    border: 2px solid #e9ecef;
    border-radius: 12px;
    padding: 0.75rem 1rem;
    width: 100%;
    transition: all 0.3s ease;
  }

  .search-input:focus {
    border-color: #6f42c1;
    box-shadow: 0 0 0 0.2rem rgba(111, 66, 193, 0.25);
    outline: none;
  }

  .friends-list {
    flex: 1;
    overflow-y: auto;
    padding: 0;
  }

  .friend-item {
    display: flex;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid #e9ecef;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    color: inherit;
  }

  .friend-item:hover {
    background: linear-gradient(135deg, #e3f2fd, #f3e5f5);
    border-left: 4px solid #6f42c1;
  }

  .friend-item.active {
    background: linear-gradient(135deg, #6f42c1, #e83e8c);
    color: white;
    border-left: 4px solid #fff;
  }

  .friend-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    margin-right: 1rem;
    flex-shrink: 0;
  }

  .friend-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .friend-info {
    flex: 1;
    min-width: 0;
  }

  .friend-name {
    font-weight: 600;
    margin: 0 0 0.25rem 0;
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .friend-status {
    font-size: 0.85rem;
    margin: 0;
    opacity: 0.8;
  }

  .friend-item.active .friend-status {
    opacity: 0.9;
  }

  .unread-badge {
    background: #dc3545;
    color: white;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    margin-left: 0.5rem;
    flex-shrink: 0;
  }

  .chat-main {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
    background: linear-gradient(135deg, #f8f9fa, #ffffff);
  }

  .message {
    margin-bottom: 1.5rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
  }

  .message.own {
    flex-direction: row-reverse;
  }

  .message-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(111, 66, 193, 0.2);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
  }

  .message-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .message-content {
    max-width: 70%;
    background: white;
    border-radius: 18px;
    padding: 1rem 1.5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border: 2px solid #e9ecef;
    position: relative;
  }

  .message.own .message-content {
    background: linear-gradient(135deg, #6f42c1, #e83e8c);
    color: white;
    border-color: #6f42c1;
  }

  .message-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
  }

  .message-sender {
    font-weight: 600;
    font-size: 0.9rem;
  }

  .message-time {
    font-size: 0.8rem;
    opacity: 0.7;
  }

  .message-text {
    margin: 0;
    line-height: 1.5;
    word-break: break-word;
    white-space: pre-wrap;
  }

  .chat-input-container {
    padding: 1.5rem;
    border-top: 2px solid #e9ecef;
    background: white;
  }

  .input-group {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
  }

  .message-input {
    flex: 1;
    border: 2px solid #e9ecef;
    border-radius: 12px;
    padding: 1rem;
    resize: none;
    min-height: 50px;
    max-height: 120px;
    transition: all 0.3s ease;
  }

  .message-input:focus {
    border-color: #6f42c1;
    box-shadow: 0 0 0 0.2rem rgba(111, 66, 193, 0.25);
    outline: none;
  }

  .emoji-btn {
    background: #f8f9fa;
    border: 2px solid #e9ecef;
    border-radius: 12px;
    padding: 0.75rem;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1.2rem;
  }

  .emoji-btn:hover {
    border-color: #6f42c1;
    background: #e3f2fd;
  }

  .send-btn {
    background: linear-gradient(135deg, #6f42c1, #e83e8c);
    border: none;
    border-radius: 12px;
    padding: 0.75rem 1.5rem;
    color: white;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .send-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(111, 66, 193, 0.3);
  }

  .send-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
  }

  .no-friends {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 2rem;
    text-align: center;
  }

  .no-friends-icon {
    font-size: 4rem;
    color: #6f42c1;
    margin-bottom: 1rem;
  }

  .no-friends-text {
    color: #6c757d;
    margin-bottom: 1.5rem;
  }

  .manage-friends-btn {
    background: linear-gradient(135deg, #6f42c1, #e83e8c);
    border: none;
    border-radius: 12px;
    padding: 0.75rem 1.5rem;
    color: white;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
  }

  .manage-friends-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(111, 66, 193, 0.3);
    color: white;
    text-decoration: none;
  }

  .chat-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 2rem;
    text-align: center;
    color: #6c757d;
  }

  .chat-placeholder-icon {
    font-size: 4rem;
    color: #6f42c1;
    margin-bottom: 1rem;
  }

  @media (max-width: 768px) {
    .chat-body {
      flex-direction: column;
    }
    
    .friends-sidebar {
      width: 100%;
      height: 200px;
      border-right: none;
      border-bottom: 2px solid #e9ecef;
    }
    
    .chat-main {
      height: calc(100% - 200px);
    }
  }
</style>
{% endblock extrahead %}

{% block content %}
<div class="chat-container">
  <div class="container-fluid">
    <div class="row justify-content-center">
      <div class="col-12">
        <div class="chat-card">
          <div class="chat-header">
            <h2>{% trans "Chat" %}</h2>
            <p>{% trans "Converse com seus amigos de forma rápida e prática." %}</p>
          </div>

          <div class="chat-body">
            <!-- Sidebar de Amigos -->
            <div class="friends-sidebar">
              <div class="friends-header">
                <h4>
                  <i class="fas fa-users"></i>
                  {% trans "Amigos" %}
                </h4>
              </div>

              {% if accepted_friendships %}
                <div class="search-container">
                  <input type="text" id="friend-search" class="search-input" 
                         placeholder="{% trans 'Procurar amigo...' %}" oninput="filterFriends()">
                </div>

                <div class="friends-list" id="friends-list">
                  {% for friendship in accepted_friendships %}
                    <div class="friend-item" data-friend-id="{{ friendship.friend.id }}">
                      <div class="friend-avatar">
                        {% if friendship.friend.avatar %}
                          <img src="{% url 'serve_files:serve_decrypted_file_with_timestamp' 'home' 'user' 'avatar' friendship.friend.uuid timestamp %}" 
                               alt="{{ friendship.friend.username }}">
                        {% else %}
                          <img src="{% static 'assets/img/team/generic_user.png' %}" 
                               alt="{{ friendship.friend.username }}">
                        {% endif %}
                      </div>
                      <div class="friend-info">
                        <div class="friend-name">{{ friendship.friend.username }}</div>
                        <div class="friend-status" id="status-{{ friendship.friend.id }}">
                        <span class="text-muted"><i class="fas fa-circle"></i> Carregando...</span>
                    </div>
                      </div>
                      <div class="unread-badge" id="unread-{{ friendship.friend.id }}" style="display: none;"></div>
                    </div>
                  {% endfor %}
                </div>
              {% else %}
                <div class="no-friends">
                  <div class="no-friends-icon">
                    <i class="fas fa-user-plus"></i>
                  </div>
                  <div class="no-friends-text">
                    {% trans "Você ainda não tem amigos para conversar." %}
                  </div>
                  <a href="{% url 'message:friends_list' %}" class="manage-friends-btn">
                    {% trans "Gerenciar Amigos" %}
                  </a>
                </div>
              {% endif %}
            </div>

            <!-- Área Principal do Chat -->
            <div class="chat-main">
              <div class="chat-messages" id="chat-messages">
                <div class="chat-placeholder">
                  <div class="chat-placeholder-icon">
                    <i class="fas fa-comments"></i>
                  </div>
                  <h4>{% trans "Selecione um amigo para iniciar o chat" %}</h4>
                  <p>{% trans "Escolha um amigo da lista ao lado para começar a conversar." %}</p>
                </div>
              </div>

              <div class="chat-input-container" id="chat-input-container" style="display: none;">
                <div class="input-group">
                  <textarea id="message-input" class="message-input" 
                           placeholder="{% trans 'Digite sua mensagem...' %}" rows="1"></textarea>
                  <button id="emoji-btn" class="emoji-btn" type="button">😊</button>
                  <button id="send-btn" class="send-btn" type="button" disabled>
                    {% trans "Enviar" %}
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock content %}

{% block extra_js %}
<!-- Emoji Button Script -->
<script src="https://cdn.jsdelivr.net/npm/@joeattardi/emoji-button@3.0.2/dist/index.min.js"></script>

<script>
  const currentUser = '{{ username }}';
  const currentUserId = {{ request.user.id }};
  const avatarUrl = '{% if user_uuid %}{% url 'serve_files:serve_decrypted_file_with_timestamp' 'home' 'user' 'avatar' user_uuid timestamp %}{% else %}{% static 'assets/img/team/generic_user.png' %}{% endif %}';
</script>

<script src="{% static 'js/websocket-chat.js' %}"></script>
{% endblock extra_js %}