{% extends "admin/base.html" %}
{% load i18n static %}

{% block title %}{% if subtitle %}{{ subtitle }} | {% endif %}{{ title }} |
  {{ site_title|default:_('Account site') }}{% endblock %}

{% block nav-global %}{% endblock %}

{% block extrastyle %}{{ block.super }}
  <link rel="stylesheet" href="{% static 'admin/css/dashboard.css' %}">
  <link rel="stylesheet" href="{% static 'admin/css/forms.css' %}">
  <link rel="stylesheet" href="{% static 'django_socketio_chat/css/main.css' %}">
  <script src="{% static 'django_socketio_chat/js/letter_avatar.js' %}"></script>
  <script src="https://cdn.socket.io/4.6.0/socket.io.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <script>
    const token = "{{token}}";
    const userLoginId = "{{user.id}}";
    const auth = {
      "token": token
    };
    const socket = io(window.location.host, {auth: auth}, {transports: ["websocket"]});
    socket.on("user_status", function (data) {
      updateUserStatus(data, userLoginId)
    })
    socket.on("users", function (data) {
      updateUsers(data, userLoginId)
    })
    socket.on("chat_history", function (data) {
      chatHistories(data, userLoginId)
    })
    socket.on("messages", function (data) {
      showMessage(data, userLoginId)
    })

    document.addEventListener('DOMContentLoaded', function () {
      const search = document.getElementById('searchUser');
      if (search) {
        search.addEventListener('keypress', function (e) {
          if (e.key === 'Enter') {
            e.preventDefault(); // Prevent the default action (new line)
            searchUser();
          }
        });
        search.addEventListener('input', function () {
          searchUser();
        });
      }

      const users = document.getElementById('users');
      if (users) {
        const childDivs = document.querySelectorAll('.list-group-item-action');
        childDivs.forEach(div => {
          div.addEventListener('click', function () {
            childDivs.forEach(div => div.classList.remove('chat-active'));
            this.classList.add('chat-active');
          });
        });
      }
    });

    const ONLINE = 1;

    const baseUser = `
      <div id="{userId}" href="#" class="list-group-item list-group-item-action border-0" onclick="getChatHistory({userId})">
      <div id="unread{userId}" class="{unreadClass} badge bg-success float-right">{totalUnread}</div>
      <div class="d-flex align-items-start">
        <img class="rounded-circle mr-1" alt="{username}" width="40" height="40" avatar="{username}">
        <div class="flex-grow-1 ml-3">
          {username}
          <div id="user_status{userId}" class="small">
            {userStatus}
          </div>
        </div>
      </div>
    </div>
    `

    function initUser(data) {
      const newElement = document.createElement("div");
      let content = baseUser.replace(/{userId}/g, data.user.id).replace("{totalUnread}", data.total_unread).replace(/{username}/g, data.user.username);
      if (data.total_unread === 0) {
        content = content.replace("{unreadClass}", "hidden")
      }
      if (data.user.status === ONLINE) {
        content = content.replace("{userStatus}", '<span class="fas fa-circle chat-online">Online</span>')
      } else {
        content = content.replace("{userStatus}", '<span class="fas fa-circle chat-offline">Offline</span>')
      }
      newElement.innerHTML = content;
      return newElement;
    }

    let baseMessage = `
      <div class="chat-message-{isOwn} pb-4">
        <div>
          <img class="rounded-circle mr-1" alt="{name}" avatar="{name}" width="40" height="40">
          <div class="text-muted small text-nowrap mt-2">{createdAt}</div>
        </div>
        <div class="flex-shrink-1 bg-light rounded py-2 px-3 mr-3">
          <div class="font-weight-bold mb-1">{username}</div>
          {content}
        </div>
      </div>
    `;

    function initMessage(message, userId) {
      let isOwn;
      let name = message.sender_name;
      let username = message.sender_name;
      let createdAt = formatChatTimestamp(message.created_at);
      if (message.sender_id == userId) {
        isOwn = "right";
        username = "You";
      } else {
        isOwn = "left";
      }
      const htmlContent = baseMessage.replace("{isOwn}", isOwn).replace("{createdAt}", createdAt).replace(/{name}/g, name).replace("{username}", username).replace("{content}", message.content);
      const newElement = document.createElement("div");
      newElement.innerHTML = htmlContent;
      return newElement;
    }

    function updateUserStatus(data, userID) {
      const userStatusElement = document.getElementById(`user_status${data.user_id}`);
      if (data.status === ONLINE) {
        userStatusElement.innerHTML = '<span class="fas fa-circle chat-online">Online</span>';
      } else {
        userStatusElement.innerHTML = '<span class="fas fa-circle chat-offline">Offline</span>';
      }
    }

    function searchUser() {
      const search = document.getElementById("searchUser").value;
      const socket_data = {
        "token": token,
        "search": search
      };
      socket.emit("search_users", socket_data);
    }

    function updateUsers(data, userId) {
      const htmlContent = document.getElementById("users");
      htmlContent.innerHTML = "";
      for (let item of data) {
        htmlContent.appendChild(initUser(item));
      }
      LetterAvatar.transform();
    }

    function formatChatTimestamp(timestamp) {
      const date = new Date(timestamp * 1000);
      const now = new Date();
      const diffInSeconds = Math.floor((now - date) / 1000);
      const diffInMinutes = Math.floor(diffInSeconds / 60);
      const diffInHours = Math.floor(diffInMinutes / 60);
      const diffInDays = Math.floor(diffInHours / 24);

      if (diffInSeconds < 60) {
        return "Just now";
      } else if (diffInMinutes < 60) {
        return `${diffInMinutes} ${diffInMinutes === 1 ? 'minute' : 'minutes'} ago`;
      } else if (diffInHours < 24) {
        return `${diffInHours} ${diffInHours === 1 ? 'hour' : 'hours'} ago`;
      } else if (diffInDays < 7) {
        return `${diffInDays} ${diffInDays === 1 ? 'day' : 'days'} ago`;
      } else {
        const options = {
          year: 'numeric',
          month: 'short',
          day: 'numeric',
          hour: '2-digit',
          minute: '2-digit',
          hour12: true
        };
        return date.toLocaleString(undefined, options);
      }
    }

    function getChatHistory(partner_id) {
      const socket_data = {"token": token, "partner_id": partner_id};
      socket.emit("get_chat_history", socket_data);
    }

    function chatHistories(data, userId) {
      const partner = data.partner;
      const partner_username = partner.username;

      document.getElementById("chatHistory").classList.remove("hidden");
      document.getElementById("headerUsername").innerHTML = partner_username;
      document.getElementById("headerAvatar").innerHTML = `<img class="rounded-circle mr-1" alt="${partner_username}" width="40" height="40" avatar="${partner_username}">`;
      const chatContent = document.getElementById("chatContent");
      chatContent.innerHTML = "";

      let displayNewMessage = false;
      if (data.messages.length > 0) {
        for (let message of data.messages) {
          if (!message.is_read && !displayNewMessage && message.sender_id !== userId) {
            chatContent.appendChild(notification("New messages"));
            displayNewMessage = true;
          }
          chatContent.appendChild(initMessage(message, userId));
        }
      } else {
        chatContent.appendChild(notification("Empty"));
      }
      LetterAvatar.transform();

      scrollToBottom()
      hiddenUnreadCount(partner.id);
      focusMessageInput()

      document.getElementById("partnerID").value = partner.id;

      const messageInput = document.getElementById('messageContent');
      messageInput.addEventListener('keypress', function (e) {
        if (e.key === 'Enter') {
          e.preventDefault(); // Prevent the default action (new line)
          sendMessage();
        }
      });
    }

    function scrollToBottom() {
      const chatMessages = document.querySelector('.chat-messages');
      chatMessages.scrollTop = chatMessages.scrollHeight;
    }

    function focusMessageInput() {
      const messageInput = document.getElementById('messageContent');
      if (messageInput) {
        messageInput.focus();
      }
    }

    function sendMessage() {
      const partner_id = parseInt(document.getElementById("partnerID").value);
      const content = document.getElementById("messageContent").value.trim();
      if (content && partner_id) {
        const socket_data = {
          "token": token,
          "partner_id": partner_id,
          "content": content
        };
        socket.emit("send_message", socket_data);
      }
      document.getElementById("messageContent").value = '';
    }

    function getUnreadPartner(partnerID) {
      return parseInt(document.getElementById('unread' + partnerID).textContent);
    }

    function increaseUnreadCount(partnerID) {
      const unreadElement = document.getElementById('unread' + partnerID);
      const currentCount = parseInt(unreadElement.textContent);
      if (currentCount === 0) {
        unreadElement.classList.remove('hidden');
      }
      unreadElement.textContent = currentCount + 1 + "";
    }

    function hiddenUnreadCount(partnerID) {
      const unreadElement = document.getElementById("unread" + partnerID);
      unreadElement.classList.add("hidden");
      unreadElement.textContent = "0";
    }

    function notification(notification) {
      const newElement = document.createElement("div");
      newElement.innerHTML = notification;
      newElement.classList.add("text-center");
      return newElement;
    }

    function is_belong_current_chat(userId, message) {
      return userId == message.sender_id || userId == message.receiver_id;
    }

    function showMessage(data, userId) {
      const message = data.message;
      const userIsReceiver = message.receiver_id == userId;
      userIsReceiver && increaseUnreadCount(message.sender_id);

      const current_partner_id = parseInt(document.getElementById("partnerID").value);
      const chatContent = document.getElementById("chatContent");
      if (is_belong_current_chat(current_partner_id, message)) {
        if (userIsReceiver && getUnreadPartner(message.sender_id) === 1) {
          chatContent.appendChild(notification("New messages"));
        }
        chatContent.appendChild(initMessage(message, userId));
        LetterAvatar.transform();
        scrollToBottom()
      }
    }
  </script>
{% endblock %}

{% block usertools %}
  <div id="user-tools">

    {% if user.is_authenticated %}
      {% block welcome-msg %}
        {% translate 'Welcome,' %}
        <strong>{% firstof user.get_short_name user.get_username %}</strong>.
      {% endblock %}
    {% endif %}

    {% block userlinks %}
      {% if site_url %}
        <a href="{{ site_url }}" target="_blank">{% translate 'View site' %}</a> /
      {% endif %}

      {% if user.is_authenticated %}
        <a href="{% url 'account_profile' pk=user.pk %}">{% translate 'Profile' %}</a> /
        {% url 'two-factor-setup' as 2fa %}
        {% if 2fa %}
          <a href="{{ 2fa }}">{% trans "Setup 2fa" %}</a> /
        {% endif %}
        {% if user.has_usable_password %}
          <a href="{% url 'account_change_password' %}">{% trans "Change Password" %}</a> /
        {% endif %}
        <a href="{% url 'account_logout' %}">{% trans 'Sign Out' %}</a>
      {% else %}
        <a href="{% url 'account_login' %}">{% trans 'Sign In' %}</a> /
        <a href="{% url 'account_signup' %}">{% trans 'Sign Up' %}</a>
      {% endif %}
      <button class="theme-toggle">
        <div class="visually-hidden theme-label-when-auto">Toggle theme (current theme: auto)</div>
        <div class="visually-hidden theme-label-when-light">Toggle theme (current theme: light)</div>
        <div class="visually-hidden theme-label-when-dark">Toggle theme (current theme: dark)</div>
        <svg class="theme-icon-when-auto" xmlns="http://www.w3.org/2000/svg" width="32" height="32"
             viewBox="0 0 256 256">
          <path fill="currentColor"
                d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24ZM40 128a88.1 88.1 0 0 1 88-88v176a88.1 88.1 0 0 1-88-88Z"></path>
        </svg>
        <svg class="theme-icon-when-dark" xmlns="http://www.w3.org/2000/svg" width="32" height="32"
             viewBox="0 0 256 256">
          <path fill="currentColor"
                d="M232.13 143.64a6 6 0 0 0-6-1.49a90.07 90.07 0 0 1-112.27-112.3a6 6 0 0 0-7.49-7.48a102.88 102.88 0 0 0-51.89 36.31a102 102 0 0 0 142.84 142.84a102.88 102.88 0 0 0 36.31-51.89a6 6 0 0 0-1.5-5.99Zm-42 48.29a90 90 0 0 1-126-126a90.9 90.9 0 0 1 35.52-28.27a102.06 102.06 0 0 0 118.69 118.69a90.9 90.9 0 0 1-28.24 35.58Z"></path>
        </svg>
        <svg class="theme-icon-when-light" xmlns="http://www.w3.org/2000/svg" width="32" height="32"
             viewBox="0 0 16 16">
          <path fill="currentColor"
                d="M8 11a3 3 0 1 1 0-6a3 3 0 0 1 0 6zm0 1a4 4 0 1 0 0-8a4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"></path>
        </svg>
      </button>
    {% endblock %}
  </div>
{% endblock %}

{% block nav-breadcrumbs %}
  <nav aria-label="{% translate 'Breadcrumbs' %}">
    <div class="breadcrumbs">
      <a href="{% url 'account_home' %}">{% translate 'Home' %}</a>
      &rsaquo; {% translate 'Chat' %} &rsaquo; {{ user }}
    </div>
  </nav>
{% endblock %}

{% block content %}
  <main class="content">
    <div class="container p-0">
      <div class="card">
        <div class="row g-0">
          <div id="chatList" class="col-12 col-lg-5 col-xl-3 border-right">
            <div class="px-4 d-none d-md-block">
              <div class="d-flex align-items-center">
                <div class="flex-grow-1">
                  <input id="searchUser" type="text" class="form-control my-3" placeholder="Search...">
                </div>
              </div>
            </div>
            <div id="users">
              {% for item in users %}
                <div id="user{{ item.user.id }}" href="#" class="list-group-item list-group-item-action border-0"
                     onclick="getChatHistory({{ item.user.id }})">
                  <div id="unread{{ item.user.id }}"
                       class="{% if item.total_unread == 0 %}hidden{% endif %} badge bg-success float-right">
                    {{ item.total_unread }}
                  </div>
                  <div class="d-flex align-items-start">
                    <img class="rounded-circle mr-1" alt="{{ item.user.username }}" width="40" height="40"
                         avatar="{{ item.user.username }}">
                    <div class="flex-grow-1 ml-3">
                      {{ item.user.username }}
                      <div id="user_status{{ item.user.id }}" class="small">
                        {% if item.user.status and item.user.status == 1 %}
                          <span class="fas fa-circle chat-online">Online</span>
                        {% else %}
                          <span class="fas fa-circle chat-offline">Offline</span>
                        {% endif %}
                      </div>
                    </div>
                  </div>
                </div>
              {% endfor %}
              <hr class="d-block d-lg-none mt-1 mb-0">
            </div>
          </div>
          <div id="chatHistory" class="hidden col-12 col-lg-7 col-xl-9">
            <div class="py-2 px-4 border-bottom d-none d-lg-block">
              <div class="d-flex align-items-center py-1">
                <div id="headerAvatar" class="position-relative">
                  <img class="rounded-circle mr-1" alt="Anonymous" width="40" height="40" avatar="Anonymous">
                </div>
                <div class="flex-grow-1 pl-3">
                  <strong id="headerUsername">Anonymous</strong>
                  {# <div class="text-muted small"><em>Typing...</em></div> #}
                </div>
                <div class="hidden">
                  <button class="btn btn-primary btn-lg mr-1 px-3">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                         stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                         class="feather feather-phone feather-lg">
                      <path
                          d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path>
                    </svg>
                  </button>
                  <button class="btn btn-info btn-lg mr-1 px-3 d-none d-md-inline-block">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                         stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                         class="feather feather-video feather-lg">
                      <polygon points="23 7 16 12 23 17 23 7"></polygon>
                      <rect x="1" y="5" width="15" height="14" rx="2" ry="2"></rect>
                    </svg>
                  </button>
                  <button class="btn btn-light border btn-lg px-3">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                         stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                         class="feather feather-more-horizontal feather-lg">
                      <circle cx="12" cy="12" r="1"></circle>
                      <circle cx="19" cy="12" r="1"></circle>
                      <circle cx="5" cy="12" r="1"></circle>
                    </svg>
                  </button>
                </div>
              </div>
            </div>
            <div class="position-relative">
              <div id="chatContent" class="chat-messages p-4">
              </div>
            </div>
            <div class="flex-grow-0 py-3 px-4 border-top">
              <div class="input-group">
                <input id="messageContent" type="text" class="form-control" placeholder="Type your message">
                <input id="partnerID" class="hidden" type="number">
                <button class="btn btn-primary" onclick="sendMessage()">Send</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>
{% endblock %}

{% block sidebar %}{% endblock %}