<%- include('../operationsContent/assets.ejs') %>
<%
  const auction = data.auction;
  const buttons = data.btns || {};
  const statusTone = auction.statusWithoutTranslate === 'finished'
    ? 'success'
    : auction.statusWithoutTranslate === 'cancelled'
      ? 'danger'
      : auction.statusWithoutTranslate === 'current'
        ? 'info'
        : auction.approvalStatusWithoutTranslate === 'wait'
          ? 'warning'
          : 'info';
  const hasLiveViewer = auction.statusWithoutTranslate === 'current'
    && auction.isLive
    && auction.liveStatus === 'LIVE_ACTIVE';
  const safeJson = function(payload) {
    return JSON.stringify(payload || {}).replace(/</g, '\\u003c');
  };
%>
<main class="kt-ops" data-ops-page data-auction-show data-ops-csrf-token="<%= csrfToken %>"
  data-ops-required-message="<%= i18n.__('operationsContent.validationRequired') %>"
  data-ops-action-success="<%= i18n.__('operationsContent.actionSuccess') %>"
  data-ops-action-error="<%= i18n.__('operationsContent.actionError') %>">
  <div class="kt-ops__stack">
    <%- include('../operationsContent/hero.ejs', {
      heading: auction.productName || i18n.__('auctions.auctionDetails'),
      description: i18n.__('auctions.auctionNumber') + ' #' + auction.auctionNumber,
      icon: 'ti-gavel',
      count: 0,
      showCount: false,
      primaryUrl: buttons.edit ? '#auction-edit' : null,
      primaryLabel: buttons.edit ? i18n.__('operationsContent.edit') : null,
      primaryIcon: 'ti-edit',
      backUrl: '/dashboard/auctions/' + currentMenu
    }) %>

    <section class="kt-ops-toolbar kt-ops-toolbar--auction">
      <div class="kt-ops-toolbar__main">
        <span class="kt-ops-status kt-ops-status--<%= statusTone %>"><%= auction.status %></span>
        <span class="kt-ops-status kt-ops-status--<%= auction.approvalStatusWithoutTranslate === 'accept' ? 'success' : auction.approvalStatusWithoutTranslate === 'reject' ? 'danger' : 'warning' %>"><%= auction.approvalStatus %></span>
        <% if (auction.isLive) { %><span class="kt-ops-status kt-ops-status--danger"><i class="ti ti-broadcast"></i><%= i18n.__('auctions.live') %></span><% } %>
      </div>
      <div class="kt-ops-toolbar__actions">
        <% if (buttons.approve) { %><button class="kt-ops-btn kt-ops-btn--success" type="button" data-ops-modal-target="#auction-approve-modal"><i class="ti ti-check"></i><span><%= i18n.__('auctions.approve') %></span></button><% } %>
        <% if (buttons.reject) { %><button class="kt-ops-btn kt-ops-btn--danger" type="button" data-ops-modal-target="#auction-reject-modal"><i class="ti ti-x"></i><span><%= i18n.__('auctions.reject') %></span></button><% } %>
        <% if (buttons.cancel) { %><button class="kt-ops-btn kt-ops-btn--warning" type="button" data-ops-modal-target="#auction-cancel-modal"><i class="ti ti-ban"></i><span><%= i18n.__('auctions.cancel') %></span></button><% } %>
        <a class="kt-ops-btn" href="/dashboard/auctions/chat/<%= auction.id %>"><i class="ti ti-messages"></i><span><%= i18n.__('auctions.viewChat') %></span></a>
      </div>
    </section>

    <% if (buttons.reject && !buttons.approve) { %>
      <div class="kt-ops-notice kt-ops-notice--warning"><i class="ti ti-alert-triangle"></i><span><%= i18n.__('auctions.approveBlockedStartInPast') %></span></div>
    <% } %>

    <section class="kt-ops-section">
      <header class="kt-ops-section__header"><span class="kt-ops-section-icon"><i class="ti ti-chart-bar"></i></span><div><h2><%= i18n.__('auctions.auctionInfo') %></h2><p><%= i18n.__('operationsContent.detailsDescription') %></p></div></header>
      <div class="kt-ops-section__body">
        <div class="kt-ops-kpi-grid">
          <div class="kt-ops-kpi"><span><%= i18n.__('auctions.currentPrice') %></span><strong data-auction-current-price><%= auction.currentPrice ?? 0 %></strong><small><%= i18n.__('common.currency') %></small></div>
          <div class="kt-ops-kpi"><span><%= i18n.__('auctions.totalBids') %></span><strong data-auction-total-bids><%= auction.totalBids ?? 0 %></strong><small><%= i18n.__('auctions.bidValue') %></small></div>
          <div class="kt-ops-kpi"><span><%= i18n.__('auctions.subscribersCount') %></span><strong><%= auction.subscribersCount ?? 0 %></strong><small><%= i18n.__('auctions.auction') %></small></div>
          <div class="kt-ops-kpi"><span><%= i18n.__('auctions.depositAmount') %></span><strong><%= auction.depositAmount ?? 0 %></strong><small><%= i18n.__('common.currency') %></small></div>
        </div>
        <div class="kt-ops-details-grid kt-ops-details-grid--spaced">
          <div class="kt-ops-detail"><span class="kt-ops-detail__label"><%= i18n.__('auctions.startAt') %></span><strong class="kt-ops-detail__value"><%= auction.startAt %></strong></div>
          <div class="kt-ops-detail"><span class="kt-ops-detail__label"><%= i18n.__('auctions.endAt') %></span><strong class="kt-ops-detail__value"><%= auction.endAt %></strong></div>
          <div class="kt-ops-detail"><span class="kt-ops-detail__label"><%= i18n.__('auctions.subDepartment') %></span><strong class="kt-ops-detail__value"><%= auction.subDepartment || i18n.__('operationsContent.noData') %></strong></div>
          <div class="kt-ops-detail"><span class="kt-ops-detail__label"><%= i18n.__('operationsContent.createdAt') %></span><strong class="kt-ops-detail__value"><%= auction.createdAt || i18n.__('operationsContent.noData') %></strong></div>
          <div class="kt-ops-detail"><span class="kt-ops-detail__label"><%= i18n.__('operationsContent.updatedAt') %></span><strong class="kt-ops-detail__value"><%= auction.updatedAt || i18n.__('operationsContent.noData') %></strong></div>
          <div class="kt-ops-detail"><span class="kt-ops-detail__label"><%= i18n.__('auctions.initialBidValue') %></span><strong class="kt-ops-detail__value"><%= auction.initialBidValue ?? 0 %> <%= i18n.__('common.currency') %></strong></div>
          <div class="kt-ops-detail"><span class="kt-ops-detail__label"><%= i18n.__('auctions.minimumBidValue') %></span><strong class="kt-ops-detail__value"><%= auction.minimumBidValue ?? 0 %> <%= i18n.__('common.currency') %></strong></div>
        </div>
      </div>
    </section>

    <section class="kt-ops-section">
      <header class="kt-ops-section__header"><span class="kt-ops-section-icon"><i class="ti ti-settings"></i></span><div><h2><%= i18n.__('auctions.auctionSettings') %></h2><p><%= i18n.__('operationsContent.detailsDescription') %></p></div></header>
      <div class="kt-ops-section__body"><div class="kt-ops-details-grid">
        <div class="kt-ops-detail"><span class="kt-ops-detail__label"><%= i18n.__('auctions.auctionPaymentOverview') %></span><strong class="kt-ops-detail__value"><%= auction.auctionPaymentStatusLabel || i18n.__('operationsContent.noData') %></strong></div>
        <div class="kt-ops-detail"><span class="kt-ops-detail__label"><%= i18n.__('auctions.auctionPaymentDeadline') %></span><strong class="kt-ops-detail__value"><%= auction.auctionPaymentDeadlineTime ?? i18n.__('operationsContent.noData') %> <%= auction.auctionPaymentDeadlineTimeUnit ? i18n.__(`auctions.${auction.auctionPaymentDeadlineTimeUnit}`) : '' %></strong></div>
        <div class="kt-ops-detail"><span class="kt-ops-detail__label"><%= i18n.__('auctions.reactivationCount') %></span><strong class="kt-ops-detail__value"><%= auction.reactivationCount ?? 0 %> / <%= auction.maxReactivationCount ?? 0 %></strong></div>
        <div class="kt-ops-detail"><span class="kt-ops-detail__label"><%= i18n.__('auctions.bidValues') %></span><strong class="kt-ops-detail__value"><%= auction.bidValues && auction.bidValues.length ? auction.bidValues.join(' · ') : i18n.__('operationsContent.noData') %></strong></div>
        <div class="kt-ops-detail"><span class="kt-ops-detail__label"><%= i18n.__('auctions.vatPrice') %></span><strong class="kt-ops-detail__value"><%= auction.vatPrice == null ? i18n.__('auctions.vatPricePending') : `${auction.vatPrice} ${i18n.__('common.currency')}` %></strong></div>
        <div class="kt-ops-detail"><span class="kt-ops-detail__label"><%= i18n.__('auctions.appCommissionRule') %></span><strong class="kt-ops-detail__value"><%= auction.appPercentage ?? 0 %><%= auction.typeAppPercentage === 'ratio' ? '%' : ` ${i18n.__('common.currency')}` %></strong></div>
        <div class="kt-ops-detail"><span class="kt-ops-detail__label"><%= i18n.__('auctions.appCommission') %></span><strong class="kt-ops-detail__value"><%= auction.appCommission == null ? i18n.__('auctions.appCommissionPending') : `${auction.appCommission} ${i18n.__('common.currency')}` %></strong></div>
        <% if (auction.isLive) { %>
          <div class="kt-ops-detail"><span class="kt-ops-detail__label"><%= i18n.__('auctions.liveStatus') %></span><strong class="kt-ops-detail__value"><%= auction.liveStatus || i18n.__('operationsContent.noData') %></strong></div>
          <div class="kt-ops-detail"><span class="kt-ops-detail__label"><%= i18n.__('auctions.harajCommissionPercentage') %></span><strong class="kt-ops-detail__value"><%= auction.harajCommissionPercentage ?? 0 %>%</strong></div>
          <div class="kt-ops-detail"><span class="kt-ops-detail__label"><%= i18n.__('auctions.broadcastFee') %></span><strong class="kt-ops-detail__value"><%= auction.broadcastFee ?? 0 %> <%= i18n.__('common.currency') %></strong></div>
          <div class="kt-ops-detail"><span class="kt-ops-detail__label"><%= i18n.__('auctions.nonSubscriberMaxViewers') %></span><strong class="kt-ops-detail__value"><%= auction.nonSubscriberMaxViewers ?? i18n.__('operationsContent.noData') %></strong></div>
        <% } %>
      </div></div>
    </section>

    <section class="kt-ops-section">
      <header class="kt-ops-section__header"><span class="kt-ops-section-icon"><i class="ti ti-users"></i></span><div><h2><%= i18n.__('auctions.sellerInfo') %></h2><p><%= i18n.__('operationsContent.identitySection') %></p></div></header>
      <div class="kt-ops-section__body">
        <div class="kt-ops-people-grid">
          <% [
            [i18n.__('auctions.seller'), data.seller],
            [i18n.__('auctions.assignedHaraj'), data.assignedHaraj],
            [i18n.__('auctions.selectedHaraj'), data.selectedHaraj],
            [i18n.__('auctions.winner'), data.winner]
          ].forEach(function(person) { %>
            <article class="kt-ops-person">
              <div class="kt-ops-avatar kt-ops-avatar--person" data-ops-media-wrap>
                <% if (person[1] && person[1].avatar) { %><img src="<%= person[1].avatar %>" alt="" data-ops-media><% } %>
                <span class="kt-ops-media__fallback" data-ops-media-fallback <%= person[1] && person[1].avatar ? 'hidden' : '' %>><i class="ti ti-user"></i></span>
              </div>
              <div><span><%= person[0] %></span><strong><%= person[1]?.name || i18n.__('operationsContent.noData') %></strong><small dir="ltr"><%= person[1]?.phone || '' %></small></div>
            </article>
          <% }) %>
        </div>
      </div>
    </section>

    <section class="kt-ops-section">
      <header class="kt-ops-section__header"><span class="kt-ops-section-icon"><i class="ti ti-align-box-left-middle"></i></span><div><h2><%= i18n.__('operationsContent.contentSection') %></h2><p><%= i18n.__('auctions.productInfo') %></p></div></header>
      <div class="kt-ops-section__body">
        <div class="kt-ops-details-grid">
          <div class="kt-ops-detail kt-ops-detail--wide"><span class="kt-ops-detail__label"><%= i18n.__('auctions.description') %></span><div class="kt-ops-content-block"><%= auction.description || i18n.__('operationsContent.noData') %></div></div>
          <div class="kt-ops-detail kt-ops-detail--wide"><span class="kt-ops-detail__label"><%= i18n.__('auctions.specialConditions') %></span><div class="kt-ops-content-block"><%= auction.specialConditions || i18n.__('operationsContent.noData') %></div></div>
          <% if (auction.rejectReason || auction.adminReason || auction.harajReason) { %><div class="kt-ops-detail kt-ops-detail--wide"><span class="kt-ops-detail__label"><%= i18n.__('auctions.reason') %></span><div class="kt-ops-content-block kt-ops-content-block--danger"><%= auction.rejectReason || auction.adminReason || auction.harajReason %></div></div><% } %>
        </div>
      </div>
    </section>

    <section class="kt-ops-section">
      <header class="kt-ops-section__header"><span class="kt-ops-section-icon"><i class="ti ti-photo"></i></span><div><h2><%= i18n.__('auctions.images') %></h2><p><%= (auction.images || []).length %></p></div></header>
      <div class="kt-ops-section__body">
        <% if (auction.images && auction.images.length) { %>
          <div class="kt-ops-gallery"><% auction.images.forEach(function(image, index) { %><a class="kt-ops-media kt-ops-media--gallery" href="<%= image %>" target="_blank" rel="noopener" data-ops-media-wrap><img src="<%= image %>" alt="<%= auction.productName %> <%= index + 1 %>" data-ops-media><span class="kt-ops-media__fallback" data-ops-media-fallback hidden><i class="ti ti-photo-off"></i><span><%= i18n.__('operationsContent.imageUnavailable') %></span></span></a><% }) %></div>
        <% } else { %>
          <div class="kt-ops-inline-empty"><i class="ti ti-photo-off"></i><span><%= i18n.__('operationsContent.imageUnavailable') %></span></div>
        <% } %>
      </div>
    </section>

    <section class="kt-ops-section">
      <header class="kt-ops-section__header"><span class="kt-ops-section-icon"><i class="ti ti-currency-riyal"></i></span><div><h2><%= i18n.__('auctions.totalBids') %></h2><p><span id="bids-total-count"><%= (bidsList || []).length %></span> <%= i18n.__('auctions.bidValue') %></p></div></header>
      <div class="kt-ops-section__body">
        <div class="kt-ops-activity-list" id="bids-list">
          <% if (bidsList && bidsList.length) { bidsList.forEach(function(bid) { %><article class="kt-ops-activity"><span class="kt-ops-activity__icon"><i class="ti ti-trending-up"></i></span><div><strong><%= bid.clientName %></strong><span><%= bid.price %> <%= bid.currency %></span></div></article><% }) } else { %><div class="kt-ops-inline-empty" id="bids-empty-state"><i class="ti ti-chart-bar-off"></i><span><%= i18n.__('auctions.noBid') %></span></div><% } %>
        </div>
      </div>
    </section>

    <% if (data.hasWinnersQueue || data.finalWinner) { %>
      <section class="kt-ops-section">
        <header class="kt-ops-section__header"><span class="kt-ops-section-icon"><i class="ti ti-trophy"></i></span><div><h2><%= i18n.__('auctions.winnersQueueTitle') %></h2><p><%= auction.auctionPaymentStatusLabel %></p></div></header>
        <div class="kt-ops-section__body"><div class="kt-ops-activity-list">
          <% (data.winnersQueue || []).forEach(function(entry) { %><article class="kt-ops-activity"><span class="kt-ops-rank"><%= entry.rank %></span><div><strong><%= entry.name %></strong><span><%= entry.price %> <%= entry.currency %> · <%= entry.paymentStatusLabel %></span></div><% if (entry.isCurrentResponsible) { %><span class="kt-ops-status kt-ops-status--warning"><%= i18n.__('auctions.currentTurnBadge') %></span><% } %></article><% }) %>
        </div></div>
      </section>
    <% } %>

    <% if (data.reactivatedFrom || (data.reactivationAuctions && data.reactivationAuctions.length)) { %>
      <section class="kt-ops-section">
        <header class="kt-ops-section__header"><span class="kt-ops-section-icon"><i class="ti ti-history"></i></span><div><h2><%= i18n.__('auctions.reactivationAuctionsTitle') %></h2><p><%= i18n.__('operationsContent.detailsDescription') %></p></div></header>
        <div class="kt-ops-section__body"><div class="kt-ops-link-list">
          <% if (data.reactivatedFrom) { %><a href="<%= data.reactivatedFrom.showUrl %>"><span><%= i18n.__('auctions.reactivatedFromTitle') %></span><strong>#<%= data.reactivatedFrom.auctionNumber %></strong><i class="ti ti-arrow-up-right"></i></a><% } %>
          <% (data.reactivationAuctions || []).forEach(function(item) { %><a href="<%= item.showUrl %>"><span>#<%= item.auctionNumber %></span><strong><%= item.status %></strong><i class="ti ti-arrow-up-right"></i></a><% }) %>
        </div></div>
      </section>
    <% } %>

    <% if (data.hasRatings) { %>
      <section class="kt-ops-section">
        <header class="kt-ops-section__header"><span class="kt-ops-section-icon"><i class="ti ti-stars"></i></span><div><h2><%= i18n.__('auctions.ratingsSection') %></h2><p><%= i18n.__('operationsContent.detailsDescription') %></p></div></header>
        <div class="kt-ops-section__body"><div class="kt-ops-details-grid">
          <div class="kt-ops-detail"><span class="kt-ops-detail__label"><%= i18n.__('auctions.winnerRatedSeller') %></span><strong class="kt-ops-detail__value"><%= data.ratings.sellerRate ?? i18n.__('auctions.notRatedYet') %></strong><p><%= data.ratings.sellerRateComment || '' %></p></div>
          <div class="kt-ops-detail"><span class="kt-ops-detail__label"><%= i18n.__('auctions.sellerRatedWinner') %></span><strong class="kt-ops-detail__value"><%= data.ratings.winnerRate ?? i18n.__('auctions.notRatedYet') %></strong><p><%= data.ratings.winnerRateComment || '' %></p></div>
        </div></div>
      </section>
    <% } %>

    <% if (hasLiveViewer) { %>
      <section class="kt-ops-section kt-ops-live" data-auction-live>
        <header class="kt-ops-section__header"><span class="kt-ops-section-icon"><i class="ti ti-broadcast"></i></span><div><h2><%= i18n.__('auctions.liveStream') %></h2><p data-auction-live-status><%= i18n.__('auctions.liveReadyToConnect') %></p></div><span class="kt-ops-status kt-ops-status--danger" data-auction-live-badge><%= i18n.__('auctions.live') %></span></header>
        <div class="kt-ops-section__body"><div class="kt-ops-live-grid">
          <div class="kt-ops-live-stage"><div class="kt-ops-live-placeholder" data-auction-live-placeholder><i class="ti ti-video-off"></i><strong><%= i18n.__('auctions.liveNotConnectedYet') %></strong><span><%= i18n.__('auctions.joinOrWaitForBroadcast') %></span></div><div data-auction-remote-player></div><div class="kt-ops-live-actions"><button class="kt-ops-btn kt-ops-btn--primary" type="button" data-auction-live-join><i class="ti ti-player-play"></i><span><%= i18n.__('auctions.joinStream') %></span></button><button class="kt-ops-btn" type="button" data-auction-live-leave disabled><i class="ti ti-player-stop"></i><span><%= i18n.__('auctions.leaveStream') %></span></button></div></div>
          <aside class="kt-ops-live-comments"><h3><%= i18n.__('auctions.liveComments') %></h3><div data-auction-live-comments><% (liveComments || []).forEach(function(comment) { %><article><strong><%= comment.user?.name || '' %></strong><p><%= comment.message || '' %></p><time><%= comment.createdAt || '' %></time></article><% }) %></div></aside>
        </div></div>
      </section>
    <% } %>

    <% if (buttons.edit) { %><%- include('./editForm.ejs', { data, subDepartments, harajs, csrfToken, i18n, lang, currentMenu }) %><% } %>
  </div>

  <%- include('./models.ejs', {
    id: auction.id,
    minimumBidValue: auction.minimumBidValue,
    bidValues: auction.bidValues || [],
    csrfToken,
    i18n
  }) %>

  <script id="auction-page-config" type="application/json"><%- safeJson({
    auctionId: auction.id,
    currentStatus: auction.statusWithoutTranslate,
    liveStatus: auction.liveStatus || '',
    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'))
    },
    liveStreamCredential: hasLiveViewer ? liveStreamCredential : null,
    texts: {
      validation: i18n.__('common.validationError'),
      firstBidInvalid: i18n.__('auctions.bidValue1GreaterThanMinimum'),
      secondBidInvalid: i18n.__('auctions.bidValue2GreaterThanBidValue1'),
      thirdBidInvalid: i18n.__('auctions.bidValue3GreaterThanBidValue2'),
      startInvalid: i18n.__('auctions.startAtInvalid'),
      endInvalid: i18n.__('auctions.endAtInvalid'),
      rangeInvalid: i18n.__('auctions.endAtBeforeStartAt'),
      sdkMissing: i18n.__('auctions.liveSdkNotLoaded'),
      credentialsMissing: i18n.__('auctions.liveMissingCredentials'),
      connecting: i18n.__('auctions.liveConnectingStream'),
      watching: i18n.__('auctions.liveWatchingStream'),
      failed: i18n.__('auctions.liveFailedToConnect'),
      disconnected: i18n.__('auctions.liveDisconnectedStream'),
      waiting: i18n.__('auctions.liveWaitingStart'),
      currency: i18n.__('common.currency'),
      auctionTitle: i18n.__('auctions.auction')
    }
  }) %></script>
</main>
<%- include('../operationsContent/scripts.ejs') %>
<% if (hasLiveViewer) { %><script src="https://download.agora.io/sdk/release/AgoraRTC_N-4.24.0.js"></script><% } %>
<script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script>
<script src="/admin/assets/js/pages/auction-operations.js"></script>
