<%- include('../operationsContent/assets.ejs') %>
<%
  const safeJson = function(payload) {
    return JSON.stringify(payload || {}).replace(/</g, '\\u003c');
  };
%>
<main class="kt-ops" data-ops-page data-auction-chat aria-busy="false">
  <div class="kt-ops__stack">
    <%- include('../operationsContent/hero.ejs', {
      heading: i18n.__('auctions.chat'),
      description: (auction.productName || i18n.__('operationsContent.noData')) + ' · #' + auction.auctionNumber,
      icon: 'ti-messages',
      count: conversations.length,
      showCount: true,
      primaryUrl: null,
      primaryLabel: null,
      backUrl: referer || ('/dashboard/auctions/show/' + auction.id)
    }) %>

    <section class="kt-ops-chat">
      <header class="kt-ops-chat__identity">
        <div class="kt-ops-avatar kt-ops-avatar--person" data-ops-media-wrap>
          <% if (auction.sellerAvatar) { %><img src="<%= auction.sellerAvatar %>" alt="" data-ops-media><% } %>
          <span class="kt-ops-media__fallback" data-ops-media-fallback <%= auction.sellerAvatar ? 'hidden' : '' %>><i class="ti ti-user"></i></span>
        </div>
        <div><span><%= i18n.__('auctions.seller') %></span><strong><%= auction.sellerName || i18n.__('operationsContent.noData') %></strong><small><%= auction.productName %></small></div>
        <span class="kt-ops-status kt-ops-status--info">#<%= auction.auctionNumber %></span>
      </header>

      <div class="kt-ops-chat__conversations" data-auction-conversations role="toolbar" aria-label="<%= i18n.__('chat.chats') %>">
        <% if (conversations && conversations.length) { conversations.forEach(function(conversation) { %>
          <button type="button" data-chat-id="<%= conversation.chatId %>" aria-pressed="false">
            <span class="kt-ops-avatar" data-ops-media-wrap>
              <% if (conversation.avatar) { %><img src="<%= conversation.avatar %>" alt="" data-ops-media><% } %>
              <span class="kt-ops-media__fallback" data-ops-media-fallback <%= conversation.avatar ? 'hidden' : '' %>><i class="ti ti-user"></i></span>
            </span>
            <span><strong><%= conversation.name || i18n.__('operationsContent.noData') %></strong><small><%= conversation.lastMessage || '' %></small></span>
          </button>
        <% }) } %>
      </div>

      <div class="kt-ops-chat__messages" data-auction-messages-scroll>
        <div class="kt-ops-chat__loader" data-auction-older-loader hidden><span class="kt-ops-loading__spinner"></span><span><%= i18n.__('chat.loadingOlderMessages') %></span></div>
        <div class="kt-ops-chat__marker" data-auction-all-loaded hidden><%= i18n.__('chat.beginningOfConversation') %></div>
        <div class="kt-ops-chat__empty" data-auction-chat-empty>
          <span class="kt-ops-empty__icon"><i class="ti ti-message-off"></i></span>
          <strong><%= conversations.length ? i18n.__('chat.notChatMessages') : i18n.__('chat.noConversations') %></strong>
        </div>
        <div class="kt-ops-chat__list" data-auction-messages></div>
      </div>

      <footer class="kt-ops-chat__readonly"><i class="ti ti-eye"></i><span><%= i18n.__('auctions.chatReadOnlyNotice') %></span></footer>
    </section>
  </div>

  <script id="auction-chat-config" type="application/json"><%- safeJson({
    auctionId: auction.id,
    chatId: chatId || '',
    conversations: conversations || [],
    socketUrl: socketUrl || '',
    socketUser: {
      userId: user?._id || '',
      userType: user?.userType || 'admin',
      name: user?.name || '',
      lang: lang || 'ar',
      deviceType: 'web',
      deviceId: device?.deviceId || ('web-dashboard-' + (user?._id || 'admin'))
    },
    texts: {
      loadError: i18n.__('operationsContent.loadError'),
      media: i18n.__('operationsContent.mediaSection')
    }
  }) %></script>
</main>
<%- include('../operationsContent/scripts.ejs') %>
<script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script>
<script src="/admin/assets/js/pages/auction-operations.js"></script>
