{% extends "layouts/main.html" %}
{% block title %}{{ post.title }} — FuzionX{% endblock %}
{% block content %}
<div class="container">
  <div class="glass-card">
    <div class="page-header">
      <h1 class="page-title">
        {% if post.status == "processing" %}<span class="badge badge-processing">🔄 {{ t(key="board.processing", default="처리중") }}</span> {% endif %}{{ post.title }}
      </h1>
      {% if auth.user.id == post.user_id %}
      <div class="page-actions">
        <a href="/board/{{ post.id }}/edit" class="btn btn-outline">{{ t(key="btn.edit", default="수정") }}</a>
        <form action="/board/{{ post.id }}/delete" method="POST" style="display:inline">
          <button type="submit" class="btn btn-danger" onclick="return confirm('{{ t(key="board.confirm_delete", default="삭제하시겠습니까?") }}')">{{ t(key="btn.delete", default="삭제") }}</button>
        </form>
      </div>
      {% endif %}
    </div>

    <div class="post-meta">
      <span>{% if author %}{{ author.name }}{% else %}-{% endif %}</span>
      <span>{{ post.created_at }}</span>
    </div>

    <div class="post-content">{{ post.content }}</div>

    {# ── 비디오 썸네일 본문 표시 ── #}
    {% if files and files | length > 0 %}
    {% for file in files %}
    {% if file.isVideo and file.thumbUrl %}
    <div class="inline-video">
      <img src="{{ file.thumbUrl }}" alt="{{ file.original_name }}" style="width:100%;max-height:500px;object-fit:contain;border-radius:var(--radius-sm, 8px)">      
    </div>
    {% endif %}
    {% endfor %}
    {% endif %}

    {# ── 첨부파일 섹션 ── #}
    {% if files and files | length > 0 %}
    <div class="post-attachments">
      <h3>📎 {{ t(key="label.attachments", default="첨부파일") }} ({{ files | length }})</h3>
      <div class="attachment-grid">
        {% for file in files %}
        <div class="attachment-card">
          {% if file.isImage %}
          {# 이미지: 썸네일 표시, 클릭 시 원본 lightbox #}
          <a href="{{ file.url }}" class="lightbox-trigger" data-type="image" target="_blank">
            <div class="attachment-thumb">
              <img src="{{ file.thumbUrl | default(value=file.url) }}" alt="{{ file.original_name }}" loading="lazy">
            </div>
            <div class="attachment-info">
              <span class="attachment-name" title="{{ file.original_name }}">🖼️ {{ file.original_name }}</span>
            </div>
          </a>
          {% elif file.isVideo %}
          {# 비디오: 프레임 썸네일 + ▶ 오버레이 #}
          <a href="{{ file.url }}" class="lightbox-trigger" data-type="video" target="_blank">
            <div class="attachment-thumb">
              {% if file.thumbUrl %}
              <img src="{{ file.thumbUrl }}" alt="{{ file.original_name }}" loading="lazy">
              {% else %}
              <div class="thumb-placeholder">🎬</div>
              {% endif %}
              <div class="play-overlay">▶</div>
            </div>
            <div class="attachment-info">
              <span class="attachment-name" title="{{ file.original_name }}">🎬 {{ file.original_name }}</span>
            </div>
          </a>
          {% else %}
          {# 일반 파일: 다운로드 링크 #}
          <a href="{{ file.url }}" class="attachment-download" download>
            <div class="attachment-thumb">
              <div class="thumb-placeholder">📄</div>
            </div>
            <div class="attachment-info">
              <span class="attachment-name" title="{{ file.original_name }}">📄 {{ file.original_name }}</span>
            </div>
          </a>
          {% endif %}
        </div>
        {% endfor %}
      </div>
    </div>
    {% endif %}

    <div class="post-footer">
      <a href="/board" class="btn btn-outline">{{ t(key="btn.back", default="← 목록") }}</a>
    </div>
  </div>
</div>

{# processing 상태면 REST 폴링으로 상태 확인 #}
{% if post.status == "processing" %}
<script>
(function() {
  var postId = '{{ post.id }}';
  var timer = setInterval(function() {
    aspFetch('/api/board/status?ids=' + postId)
      .then(function(res) {
        if (!res || !res.statuses) return;
        if (res.statuses[postId] !== 'processing') {
          clearInterval(timer);
          location.reload();
        }
      });
  }, 5000);
})();
</script>
{% endif %}

{# ── Lightbox 모달 (이미지 원본 / 비디오 재생) ── #}
<div class="lightbox-overlay" id="lightbox" style="display:none">
  <div class="lightbox-content">
    <button class="lightbox-close" onclick="closeLightbox()">✕</button>
    <div id="lightboxBody"></div>
  </div>
</div>

<script>
/** Lightbox — 이미지 원본 보기 / 비디오 재생 모달 */
document.querySelectorAll('.lightbox-trigger').forEach(function(el) {
  el.addEventListener('click', function(e) {
    e.preventDefault();
    var url = this.getAttribute('href');
    var type = this.getAttribute('data-type');
    var body = document.getElementById('lightboxBody');

    if (type === 'video') {
      body.innerHTML = '<video controls autoplay style="max-width:100%;max-height:80vh"><source src="' + url + '"></video>';
    } else {
      body.innerHTML = '<img src="' + url + '" style="max-width:100%;max-height:80vh">';
    }

    document.getElementById('lightbox').style.display = 'flex';
  });
});

function closeLightbox() {
  document.getElementById('lightbox').style.display = 'none';
  document.getElementById('lightboxBody').innerHTML = '';
}

document.getElementById('lightbox').addEventListener('click', function(e) {
  if (e.target === this) closeLightbox();
});
</script>
{% endblock %}