<a href="/member/bulletin" style="display:inline-flex;align-items:center;gap:6px;font-size:.85rem;color:#6b7280;text-decoration:none;margin-bottom:20px"><i class="bi bi-arrow-left"></i> Back to Bulletin Board</a>

<div style="max-width:760px">

  <!-- Post -->
  <div class="form-card" style="margin-bottom:20px">
    <!-- Header -->
    <div style="display:flex;align-items:center;gap:12px;margin-bottom:16px">
      <% if (post.org_logo) { %>
      <img src="<%= post.org_logo %>" alt="<%= post.org_name %>" style="width:42px;height:42px;border-radius:8px;object-fit:contain;border:1px solid #e5e7eb">
      <% } else { %>
      <div style="width:42px;height:42px;border-radius:8px;background:#eff6ff;display:flex;align-items:center;justify-content:center;font-weight:700;color:#1a56db;font-size:1rem;flex-shrink:0"><%= post.org_name[0] %></div>
      <% } %>
      <div style="flex:1">
        <a href="/member/directory/<%= post.org_slug %>" style="font-weight:700;color:#111827;text-decoration:none;font-size:.9rem"><%= post.org_name %></a>
        <div style="font-size:.75rem;color:#9ca3af"><%= post.first_name %> <%= post.last_name %> &nbsp;·&nbsp; <time class="local-ts" data-ts="<%= new Date(post.created_at).toISOString() %>"><%= new Date(post.created_at).toLocaleString() %></time></div>
      </div>
      <span class="pill-<%= post.category %>" style="font-size:.72rem;font-weight:600;padding:3px 10px;border-radius:10px"><%= post.category.charAt(0).toUpperCase() + post.category.slice(1) %></span>
    </div>

    <!-- Content -->
    <% if (post.is_pinned) { %><div style="font-size:.75rem;color:#f59e0b;font-weight:600;margin-bottom:6px"><i class="bi bi-pin-fill"></i> Pinned</div><% } %>
    <h2 style="margin:0 0 14px;font-size:1.2rem;color:#111827"><%= post.title %></h2>
    <div style="font-size:.9rem;color:#374151;line-height:1.8;white-space:pre-wrap"><%= post.content %></div>

    <!-- Attachment -->
    <% if (post.attachments) { %>
    <% const atts = typeof post.attachments === 'string' ? JSON.parse(post.attachments) : post.attachments; %>
    <% if (atts && atts.length) { %>
    <div style="margin-top:16px;padding-top:14px;border-top:1px solid #f3f4f6">
      <% atts.forEach(a => { %>
      <a href="<%= a.path %>" target="_blank" style="display:inline-flex;align-items:center;gap:6px;font-size:.82rem;color:#1a56db;padding:6px 12px;border:1.5px solid #bfdbfe;border-radius:8px;text-decoration:none;background:#eff6ff">
        <i class="bi bi-paperclip"></i> <%= a.name %>
      </a>
      <% }) %>
    </div>
    <% } %>
    <% } %>

    <!-- Stats + Actions -->
    <div style="display:flex;align-items:center;gap:16px;margin-top:18px;padding-top:14px;border-top:1px solid #f3f4f6">
      <button id="likeBtn" onclick="toggleLike(<%= post.id %>)" style="background:none;border:none;cursor:pointer;display:flex;align-items:center;gap:5px;font-size:.85rem;font-weight:600;color:<%= isLiked ? '#dc2626' : '#6b7280' %>;padding:0">
        <i class="bi bi-heart<%= isLiked ? '-fill' : '' %>"></i>
        <span id="likeCount"><%= post.likes_count %></span>
      </button>
      <span style="display:flex;align-items:center;gap:5px;font-size:.85rem;color:#6b7280">
        <i class="bi bi-chat"></i> <span id="commentCount"><%= post.comments_count %></span>
      </span>
      <span style="display:flex;align-items:center;gap:5px;font-size:.85rem;color:#6b7280">
        <i class="bi bi-eye"></i> <%= post.views %>
      </span>
      <% if (post.user_id === currentUser?.id || post.org_id === currentUser?.org_id) { %>
      <button onclick="deletePost(<%= post.id %>)" style="margin-left:auto;background:none;border:none;cursor:pointer;color:#9ca3af;font-size:.82rem;padding:0"><i class="bi bi-trash"></i> Delete</button>
      <% } %>
    </div>
  </div>

  <!-- Comments -->
  <div class="form-card" style="margin-bottom:16px">
    <h3 style="margin:0 0 16px;font-size:.875rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#6b7280">
      <i class="bi bi-chat-fill"></i> Comments (<span id="commentCountLabel"><%= comments.length %></span>)
    </h3>

    <div id="commentsList">
      <% if (comments && comments.length) { %>
      <% comments.forEach(c => { %>
      <div class="comment-item" style="display:flex;gap:10px;margin-bottom:16px">
        <div style="width:34px;height:34px;border-radius:50%;background:#eff6ff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.8rem;color:#1a56db;flex-shrink:0;overflow:hidden">
          <% if (c.avatar) { %><img src="<%= c.avatar %>" style="width:34px;height:34px;border-radius:50%;object-fit:cover"><% } else { %><%= c.first_name[0] %><% } %>
        </div>
        <div style="flex:1;background:#f9fafb;border-radius:10px;padding:10px 14px">
          <div style="display:flex;align-items:baseline;gap:8px;margin-bottom:4px">
            <strong style="font-size:.85rem"><%= c.first_name %> <%= c.last_name %></strong>
            <% if (c.org_name) { %><span style="font-size:.72rem;color:#9ca3af"><%= c.org_name %></span><% } %>
            <time class="local-ts" data-ts="<%= new Date(c.created_at).toISOString() %>" style="font-size:.7rem;color:#d1d5db;margin-left:auto"><%= new Date(c.created_at).toLocaleString() %></time>
          </div>
          <p style="margin:0;font-size:.85rem;color:#374151;line-height:1.5"><%= c.content %></p>
        </div>
      </div>
      <% }) %>
      <% } else { %>
      <p style="color:#9ca3af;font-size:.85rem;text-align:center;padding:12px 0">No comments yet. Be the first to reply!</p>
      <% } %>
    </div>
  </div>

  <!-- Add comment -->
  <div class="form-card">
    <h3 style="margin:0 0 12px;font-size:.875rem;font-weight:700;color:#374151">Leave a Reply</h3>
    <textarea id="commentContent" rows="3" placeholder="Share your thoughts..." style="width:100%;padding:10px 12px;border:1.5px solid #e5e7eb;border-radius:8px;font-size:.875rem;resize:vertical;box-sizing:border-box;font-family:inherit"></textarea>
    <div id="commentError" style="display:none;color:#dc2626;font-size:.8rem;margin-top:6px"></div>
    <button class="btn btn-primary" style="margin-top:10px" onclick="postComment(<%= post.id %>)"><i class="bi bi-send-fill"></i> Post Reply</button>
  </div>

</div>

<script>
async function toggleLike(postId) {
  const btn   = document.getElementById('likeBtn');
  const count = document.getElementById('likeCount');
  const res   = await fetch(`/member/bulletin/${postId}/like`, { method: 'POST' });
  const data  = await res.json();
  const icon  = btn.querySelector('i');
  if (data.liked) {
    icon.className = 'bi bi-heart-fill'; btn.style.color = '#dc2626';
    count.textContent = parseInt(count.textContent) + 1;
  } else {
    icon.className = 'bi bi-heart'; btn.style.color = '#6b7280';
    count.textContent = Math.max(0, parseInt(count.textContent) - 1);
  }
}

async function postComment(postId) {
  const content = document.getElementById('commentContent').value.trim();
  const errEl   = document.getElementById('commentError');
  errEl.style.display = 'none';
  if (!content) { errEl.textContent = 'Please write something.'; errEl.style.display = 'block'; return; }

  const btn = event.target;
  btn.disabled = true; btn.innerHTML = '<i class="bi bi-hourglass-split"></i> Posting…';

  const res  = await fetch(`/member/bulletin/${postId}/comment`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ content }) });
  const data = await res.json();
  btn.disabled = false; btn.innerHTML = '<i class="bi bi-send-fill"></i> Post Reply';

  if (data.success) {
    document.getElementById('commentContent').value = '';
    // Add comment to list without reload
    const list = document.getElementById('commentsList');
    const emptyMsg = list.querySelector('p');
    if (emptyMsg) emptyMsg.remove();
    const div = document.createElement('div');
    div.className = 'comment-item';
    div.style.cssText = 'display:flex;gap:10px;margin-bottom:16px';
    div.innerHTML = `<div style="width:34px;height:34px;border-radius:50%;background:#eff6ff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.8rem;color:#1a56db;flex-shrink:0"><%= currentUser?.first_name?.[0] || 'U' %></div><div style="flex:1;background:#f9fafb;border-radius:10px;padding:10px 14px"><div style="display:flex;align-items:baseline;gap:8px;margin-bottom:4px"><strong style="font-size:.85rem"><%= (currentUser?.first_name || '') + ' ' + (currentUser?.last_name || '') %></strong><span style="font-size:.7rem;color:#d1d5db;margin-left:auto">just now</span></div><p style="margin:0;font-size:.85rem;color:#374151;line-height:1.5">${content.replace(/</g,'&lt;')}</p></div>`;
    list.appendChild(div);
    // Update counts
    const cc = document.getElementById('commentCount');
    const cl = document.getElementById('commentCountLabel');
    if (cc) cc.textContent = parseInt(cc.textContent) + 1;
    if (cl) cl.textContent = parseInt(cl.textContent) + 1;
  } else {
    errEl.textContent = data.error || 'Failed to post.'; errEl.style.display = 'block';
  }
}

async function deletePost(postId) {
  if (!confirm('Delete this post?')) return;
  const res = await fetch(`/member/bulletin/${postId}`, { method: 'DELETE' });
  if ((await res.json()).success) window.location.href = '/member/bulletin';
}

(function () {
  const rtf = new Intl.RelativeTimeFormat('en', { numeric: 'auto' });
  function relativeTime(date) {
    const diff = (date - Date.now()) / 1000;
    const abs = Math.abs(diff);
    if (abs < 60)   return rtf.format(Math.round(diff), 'second');
    if (abs < 3600) return rtf.format(Math.round(diff / 60), 'minute');
    if (abs < 86400) return rtf.format(Math.round(diff / 3600), 'hour');
    if (abs < 2592000) return rtf.format(Math.round(diff / 86400), 'day');
    if (abs < 31536000) return rtf.format(Math.round(diff / 2592000), 'month');
    return rtf.format(Math.round(diff / 31536000), 'year');
  }
  document.querySelectorAll('time.local-ts[data-ts]').forEach(el => {
    const d = new Date(el.dataset.ts);
    el.textContent = relativeTime(d);
    el.title = d.toLocaleString(undefined, { dateStyle: 'medium', timeStyle: 'short' });
  });
})();
</script>
