{{template "base/header" .}}
<style>
  /* 自定义灯箱样式 */
  .custom-lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.85);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  .custom-lightbox.active {
    display: flex;
  }
  .custom-lightbox img {
    max-width: 90%;
    max-height: 80%;
    border-radius: 8px;
    box-shadow: 0 0 30px rgba(0,0,0,0.5);
  }
  .custom-lightbox .close-btn {
    position: absolute;
    top: 20px;
    right: 30px;
    color: #fff;
    font-size: 40px;
    cursor: pointer;
    font-weight: bold;
  }
  .custom-lightbox .caption {
    color: #ccc;
    margin-top: 10px;
    font-size: 14px;
  }
</style>

<div class="uk-container uk-container-small uk-margin-top">
  <h2 class="uk-text-center">
    {{ if .IsOwner }}{{t .LangCode "chat.withAsker"}}{{ else }}{{t .LangCode "chat.withUser" .PageUser.Name}}{{ end }}
  </h2>
  <p class="uk-text-center uk-text-meta">
    {{ if .Conversation.IsClosed }}
      <span class="uk-label uk-label-danger">{{t .LangCode "chat.closed"}}</span>
    {{ else }}
      {{t .LangCode "chat.remaining" (sub .Conversation.MaxMessages .Conversation.MessageCount) .Conversation.MaxMessages}}
    {{ end }}
  </p>

  <div class="uk-card uk-card-default uk-card-body uk-margin uk-padding-small">
    <ul class="uk-list uk-list-divider">
      {{ range .Messages }}
      {{ $isMyMessage := eq .SenderID $.LoggedUser.ID }}
      <li class="uk-margin-small-bottom">
        <div class="uk-flex {{ if $isMyMessage }}uk-flex-right{{ else }}uk-flex-left{{ end }}">
          <div class="uk-card uk-card-hover uk-card-body uk-padding-small uk-margin-small-left uk-margin-small-right" 
               style="max-width: 75%; border-radius: 12px; background-color: {{ if $isMyMessage }}#e6ffe6{{ else }}#f0f8ff{{ end }};">
            <div class="uk-flex uk-flex-middle uk-margin-small-bottom">
              <span class="uk-icon" uk-icon="user"></span>
              <strong class="uk-margin-small-left">
                {{ if $isMyMessage }}{{t $.LangCode "chat.me"}}{{ else }}{{t $.LangCode "chat.other"}}{{ end }}
              </strong>
              <span class="uk-text-meta uk-margin-small-left" style="font-size: 0.75rem;">
                {{ .CreatedAt.Format "01-02 15:04" }}
              </span>
            </div>
            {{ if and $.IsOwner $.IsBlocked (eq .SenderID $.Conversation.AskerID) }}
              <p class="uk-margin-remove"><span class="uk-text-muted uk-text-italic">{{t $.LangCode "chat.userBlocked"}}</span></p>
            {{ else }}
              {{ if .Content }}
              <p class="uk-margin-remove">{{ .Content }}</p>
              {{ end }}
              {{ range (index $.MessageImages .ID) }}
              <div class="uk-margin-small-top">
                <img src="{{ .URL }}" alt="{{ .FileName }}" 
                     style="max-width: 200px; max-height: 200px; border-radius: 8px; cursor: pointer;" 
                     onclick="openLightbox('{{ .URL }}', '{{ .FileName }}')" />
              </div>
              {{ end }}
            {{ end }}
          </div>
        </div>
      </li>
      {{ end }}
    </ul>
  </div>

  {{ if .CanSend }}
  <div class="uk-card uk-card-default uk-card-body uk-margin-top">
    <form method="post" action="/_/{{.PageUser.Domain}}/chat/{{.Conversation.Token}}/send" enctype="multipart/form-data">
      {{ .CSRFTokenHTML }}
      <textarea name="content" class="uk-textarea" rows="3" placeholder="{{t .LangCode "chat.input"}}" maxlength="{{ .ChatMessageLimit }}"></textarea>
      
      <div class="uk-margin-small-top" style="display: flex; align-items: center; gap: 10px;">
        <div uk-form-custom>
          <a href="#" class="uk-icon-link" uk-icon="image"></a>
          <span style="font-size: 13px; color: #666;">{{t .LangCode "chat.addImage"}}</span>
          <input type="file" name="image" accept="image/*">
        </div>
        <span class="uk-text-meta" id="file-name"></span>
      </div>

      <div class="uk-margin-small-top uk-text-right">
        <button type="submit" class="uk-button uk-button-primary">{{t .LangCode "chat.send"}}</button>
      </div>
    </form>
  </div>
  {{ else }}
  <div class="uk-text-center uk-margin-top">
    <p class="uk-text-warning">{{t .LangCode "chat.closedNoSend"}}</p>
    <a href="/_/{{.PageUser.Domain}}" class="uk-button uk-button-default">{{t .LangCode "common.backHome"}}</a>
  </div>
  {{ end }}

  {{ if .IsOwner }}
  <div class="uk-margin-top uk-text-center">
      <a class="uk-button uk-button-{{ if .IsBlocked }}default{{ else }}warning{{ end }} uk-button-small" href="#">
          {{ if .IsBlocked }}{{t .LangCode "chat.unblock"}}{{ else }}{{t .LangCode "chat.block"}}{{ end }}
      </a>
      <div class="uk-dropbar uk-dropbar-top" uk-drop="stretch: x; mode: click">
          <div class="uk-card uk-card-default uk-card-body">
              <h3 class="uk-card-title">{{ if .IsBlocked }}{{t .LangCode "chat.unblock"}}{{ else }}{{t .LangCode "chat.block"}}{{ end }}？</h3>
              <p>{{ if .IsBlocked }}{{t .LangCode "chat.confirmUnblock"}}{{ else }}{{t .LangCode "chat.confirmBlock"}}{{ end }}</p>
              <form method="post" action="/_/{{.PageUser.Domain}}/chat/{{.Conversation.Token}}/block">
                  {{ .CSRFTokenHTML }}
                  <button type="submit" class="uk-button uk-button-{{ if .IsBlocked }}primary{{ else }}danger{{ end }}">
                      {{t .LangCode "chat.confirm"}}{{ if .IsBlocked }}{{t .LangCode "chat.unblock"}}{{ else }}{{t .LangCode "chat.block"}}{{ end }}
                  </button>
              </form>
          </div>
      </div>

      <a class="uk-button uk-button-danger uk-button-small" href="#">{{t .LangCode "chat.delete"}}</a>
      <div class="uk-dropbar uk-dropbar-top" uk-drop="stretch: x; mode: click">
          <div class="uk-card uk-card-default uk-card-body">
              <h3 class="uk-card-title">{{t .LangCode "qitem.danger"}}</h3>
              <p>{{t .LangCode "chat.deleteConfirm"}}</p>
              <form method="post" action="/_/{{.PageUser.Domain}}/chat/{{.Conversation.Token}}/delete">
                  {{ .CSRFTokenHTML }}
                  <button type="submit" class="uk-button uk-button-danger">{{t .LangCode "qitem.deleteConfirmBtn"}}</button>
              </form>
          </div>
      </div>
  </div>
  {{ end }}

</div>

<!-- 自定义灯箱结构 -->
<div id="customLightbox" class="custom-lightbox" onclick="closeLightbox()">
  <span class="close-btn" onclick="closeLightbox()">&times;</span>
  <img id="lightboxImg" src="" alt="" />
  <div id="lightboxCaption" class="caption"></div>
</div>

<script>
  // 显示已选文件名
  var fileInput = document.querySelector('input[name="image"]');
  var fileNameSpan = document.getElementById('file-name');
  if (fileInput && fileNameSpan) {
    fileInput.addEventListener('change', function() {
      if (fileInput.files.length > 0) {
        fileNameSpan.textContent = fileInput.files[0].name;
      } else {
        fileNameSpan.textContent = '';
      }
    });
  }

  // 自定义灯箱函数
  function openLightbox(src, caption) {
    document.getElementById('lightboxImg').src = src;
    document.getElementById('lightboxCaption').textContent = caption || '';
    document.getElementById('customLightbox').classList.add('active');
  }

  function closeLightbox() {
    document.getElementById('customLightbox').classList.remove('active');
    // 清空图片避免后台加载消耗
    document.getElementById('lightboxImg').src = '';
  }

  // ESC 关闭
  document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') {
      closeLightbox();
    }
  });
</script>

{{template "base/footer" .}}