{% extends 'base.html' %}

{% block title %}{{ code }} — Workspace · BackTestingMarket{% endblock %}

{% block extra_head %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/styles-workspace.css') }}">
<style>
#file-modal {
  display: none; position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,.78); backdrop-filter: blur(6px);
  align-items: center; justify-content: center;
}
#file-modal.open { display: flex; }
#file-modal-box {
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 14px; max-width: min(92vw, 860px); max-height: 92vh;
  width: 100%; display: flex; flex-direction: column;
  overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.55);
}
#file-modal-header {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 18px; border-bottom: 1px solid var(--border); min-width: 0;
}
#file-modal-name {
  flex: 1; font-size: 13px; font-family: var(--mono); color: var(--text-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#file-modal-body {
  flex: 1; overflow: auto; display: flex;
  align-items: center; justify-content: center; padding: 20px; min-height: 180px;
}
#file-modal-body img { max-width: 100%; max-height: 66vh; border-radius: 8px; object-fit: contain; }
#file-modal-body video { max-width: 100%; max-height: 66vh; border-radius: 8px; }
#file-modal-body pre {
  width: 100%; max-height: 66vh; overflow: auto; margin: 0; padding: 16px 18px;
  background: var(--bg-1, #0d0d0d); border: 1px solid var(--border); border-radius: 8px;
  font-family: var(--mono); font-size: 12px; line-height: 1.65;
  color: var(--text-1); white-space: pre; text-align: left;
}
.file-modal-generic { display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--text-2); }
.file-modal-generic .fm-icon { font-size: 52px; }
.file-modal-generic .fm-label { font-size: 14px; font-family: var(--mono); }
#file-modal-footer {
  display: flex; gap: 10px; padding: 13px 18px;
  border-top: 1px solid var(--border); justify-content: flex-end;
}
.fm-btn-close {
  background: transparent; border: 1px solid var(--border); color: var(--text-2);
  padding: 7px 18px; border-radius: 8px; cursor: pointer; font-size: 13px; transition: background .15s;
}
.fm-btn-close:hover { background: var(--bg-3); }
.fm-btn-download {
  background: var(--accent, #00c98d); border: none; color: #000; font-weight: 600;
  padding: 7px 18px; border-radius: 8px; cursor: pointer; font-size: 13px;
  text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: opacity .15s;
}
.fm-btn-download:hover { opacity: .85; }
/* Spinner */
.fm-spinner {
  display: flex; flex-direction: column; align-items: center; gap: 14px; color: var(--text-3);
}
.fm-spinner-ring {
  width: 40px; height: 40px; border-radius: 50%;
  border: 3px solid var(--border);
  border-top-color: var(--accent, #00c98d);
  animation: fm-spin .7s linear infinite;
}
@keyframes fm-spin { to { transform: rotate(360deg); } }
.fm-spinner-label { font-size: 13px; font-family: var(--mono); }
/* ── Upload overlay ── */
#upload-overlay {
  display: none; position: fixed; inset: 0; z-index: 2000;
  background: rgba(0,0,0,.55);
  align-items: center; justify-content: center;
}
#upload-overlay.open { display: flex; }
#upload-overlay-box {
  background: #1c1e24; border: 1px solid #2e3040;
  border-radius: 16px; padding: 36px 44px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  box-shadow: 0 24px 60px rgba(0,0,0,.6); min-width: 280px;
}
.up-ring {
  width: 46px; height: 46px; border-radius: 50%;
  border: 3px solid #2e3040; border-top-color: #00c98d;
  animation: fm-spin .7s linear infinite;
}
.up-label { font-size: 15px; font-weight: 600; color: #e8e8e8; }
.up-sub   { font-size: 12px; color: #666; margin-top: -4px; }
.up-cancel {
  margin-top: 8px; background: transparent;
  border: 1px solid #3a3a3a; color: #888;
  padding: 7px 22px; border-radius: 8px; cursor: pointer;
  font-size: 13px; transition: border-color .15s, color .15s;
}
.up-cancel:hover { border-color: #cc2233; color: #cc2233; }
/* ── Thread wrapper (post + replies) ── */
.msg-thread {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.msg-thread-body {
  padding: 0 8px 6px calc(36px + 10px + 8px); /* alineado con msg-body */
}
/* ── Replies ── */
.msg-replies {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-left: 2px solid var(--border);
  padding-left: 12px;
  margin-bottom: 4px;
}
.msg-reply {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.msg-reply-avatar {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--bg-3);
  color: var(--accent);
  font-size: 10px; font-weight: 700;
  font-family: var(--mono);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  text-transform: uppercase;
}
.msg-reply-body { flex: 1; min-width: 0; }
.msg-reply-meta {
  display: flex; gap: 6px; align-items: baseline;
  font-size: 11px; margin-bottom: 1px;
}
.msg-reply-author { font-weight: 700; color: var(--text-1); }
.msg-reply-time   { color: var(--text-3); font-family: var(--mono); }
.msg-reply-content {
  font-size: 13px; color: var(--text-2); line-height: 1.5;
  word-break: break-word; white-space: pre-wrap;
}
/* ── Reply toggle button ── */
.reply-toggle-btn {
  background: transparent; border: none;
  color: var(--text-3); font-size: 11px; font-family: var(--sans);
  cursor: pointer; padding: 2px 0;
  display: inline-flex; align-items: center; gap: 3px;
  transition: color .15s;
}
.reply-toggle-btn:hover { color: var(--accent); }
/* ── Reply composer ── */
.reply-composer {
  display: none;
  margin-top: 6px;
  border-left: 2px solid var(--accent);
  padding-left: 12px;
}
.reply-composer.open { display: block; }
.reply-textarea {
  width: 100%; box-sizing: border-box;
  background: var(--bg-3); border: 1px solid var(--border);
  border-radius: 8px; color: var(--text-1);
  font-size: 13px; padding: 7px 10px; resize: none;
  font-family: var(--sans); line-height: 1.5;
  transition: border-color .15s; outline: none;
}
.reply-textarea:focus { border-color: var(--accent); }
.reply-actions {
  display: flex; gap: 6px; margin-top: 5px; justify-content: flex-end;
}
.reply-cancel-btn {
  background: transparent; border: 1px solid var(--border);
  color: var(--text-2); padding: 4px 12px;
  border-radius: 6px; font-size: 12px; cursor: pointer; transition: background .15s;
}
.reply-cancel-btn:hover { background: var(--bg-3); }
.reply-send-btn {
  background: var(--accent); border: none;
  color: #fff; font-weight: 600;
  padding: 4px 14px; border-radius: 6px;
  font-size: 12px; cursor: pointer;
  opacity: .45; transition: opacity .15s;
}
.reply-send-btn:not([disabled]) { opacity: 1; }
/* ── Imagen inline en mensaje ── */
.msg-img-inline {
  margin-top: 8px;
}
.msg-img-inline img {
  max-width: 380px;
  max-height: 280px;
  width: 100%;
  object-fit: contain;
  border-radius: 10px;
  border: 1px solid var(--border);
  cursor: zoom-in;
  display: block;
  transition: opacity 0.15s;
}
.msg-img-inline img:hover { opacity: 0.88; }
</style>
{% endblock %}

{% block content %}
<div class="ws-layout">

  <!-- TOPBAR -->
  <header class="ws-topbar">
    <button class="ws-menu-btn" onclick="toggleSidebar()" aria-label="Menu">☰</button>
    <a href="{{ url_for('portfolio') }}" class="back-btn">← BTM Hub</a>
    <div class="sep"></div>
    <span class="s-code">{{ code }}</span>
    <span class="s-name">Workspace</span>
    <div class="online-dot">
      <span class="dot"></span>
      <span>{{ posts | map(attribute='user_id') | list | unique | list | length }} {{ _('participante(s)') }}</span>
    </div>
  </header>

  <!-- Overlay para cerrar sidebar en móvil -->
  <div class="ws-sidebar-overlay" id="sidebar-overlay" onclick="toggleSidebar()"></div>

  <!-- SIDEBAR -->
  <nav class="ws-sidebar">
    <div class="sidebar-label">{{ _('Canales') }}</div>
    <button class="nav-tab active" data-panel="feed">
      <span class="tab-icon">#</span> {{ _('Publicaciones y Mensajes') }}
      <span class="badge">{{ posts | length }}</span>
    </button>

    <div class="sidebar-divider"></div>
    <div class="sidebar-label">{{ _('Participantes') }}</div>
    {% set seen = namespace(ids=[]) %}
    {% for post in posts %}
    {% if post.user_id not in seen.ids %}
    {% set _ = seen.ids.append(post.user_id) %}
    <div class="member">
      <div class="member-av">{{ post.user.username[0] }}</div>
      <span class="member-name">@{{ post.user.username }}</span>
    </div>
    {% endif %}
    {% endfor %}
  </nav>

  <!-- MAIN -->
  <main class="ws-main">

    <!-- FEED -->
    <div class="panel active" id="panel-feed">
      <div class="panel-header">
        <h2># {{ _('Publicaciones y Mensajes') }} <span class="count">{{ posts | length }} {{ _('mensajes') }}</span></h2>
      </div>

      <div class="feed-messages" id="feed-messages">
        {% set pinned = posts | selectattr('is_pinned') | list %}
        {% if pinned %}
        <div class="date-divider">📌 {{ _('Mensajes fijados') }}</div>
        {% for p in pinned %}
        <div class="msg is-pinned" id="msg-{{ p.id }}">
          <div class="msg-avatar">{{ p.user.username[0] }}</div>
          <div class="msg-body">
            <div class="msg-meta">
              <span class="msg-author">@{{ p.user.username }}</span>
              <span class="msg-time">{{ p.created_at.strftime('%H:%M · %d %b') }}</span>
              <span class="msg-type-badge">📌 {{ _('fijado') }}</span>
            </div>
            <div class="msg-content" id="content-{{ p.id }}">{{ p.content }}</div>
            <div class="msg-edit-box" id="edit-box-{{ p.id }}">
              <textarea class="msg-edit-textarea" id="edit-ta-{{ p.id }}">{{ p.content }}</textarea>
              <div id="edit-files-{{ p.id }}">
                {% for f in p.files %}
                <div class="edit-file-row" id="edit-file-{{ f.id }}" style="display:flex;align-items:center;gap:6px;margin-top:4px;">
                  <span style="font-size:12px;color:var(--text-2);">📎 {{ f.original_name }}</span>
                  <button type="button" onclick="removeAttachment({{ f.id }},'{{ code }}')"
                    style="background:transparent;border:1px solid rgba(255,77,106,.3);color:var(--danger);padding:2px 8px;border-radius:5px;font-size:11px;cursor:pointer;">✕</button>
                </div>
                {% endfor %}
              </div>
              <div id="edit-new-files-{{ p.id }}" style="display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;"></div>
              <label class="attach-btn" style="margin-top:8px;display:inline-flex;cursor:pointer;">
                📎 {{ _('Añadir archivo') }}
                <input type="file" id="edit-file-input-{{ p.id }}" style="display:none"
                  accept=".csv,.xlsx,.pdf,.png,.jpg,.jpeg,.gif,.webp,.mp4,.webm,.mov,.txt,.zip,.py,.json,.html"
                  onchange="addEditFile(this, {{ p.id }})">
              </label>
              <div class="msg-edit-actions">
                <button class="edit-cancel-btn" onclick="cancelEdit({{ p.id }})">{{ _('Cancelar') }}</button>
                <button class="edit-save" onclick="saveEdit({{ p.id }},'{{ code }}')">{{ _('Guardar') }}</button>
              </div>
            </div>
            {% set IMG_EXTS = ['png','jpg','jpeg','gif','webp','svg'] %}
            {% for f in p.files %}
              {% set fext = f.original_name.rsplit('.',1)[-1].lower() %}
              {% if fext in IMG_EXTS %}
            <div class="msg-img-inline">
              <img src="{{ url_for('strategy.download_file', code=code, filename=f.filename) }}"
                   alt="{{ f.original_name }}" loading="lazy"
                   onclick="openFileModal(event, '{{ url_for('strategy.download_file', code=code, filename=f.filename) }}', '{{ f.original_name }}')"
                   title="{{ f.original_name }}">
            </div>
              {% else %}
            <a class="msg-attachment" id="attach-link-{{ f.id }}"
               href="{{ url_for('strategy.download_file', code=code, filename=f.filename) }}"
               onclick="openFileModal(event, this, '{{ f.original_name }}')">
              📎 {{ f.original_name }}
              <span style="color:var(--text-3);font-size:11px;font-family:var(--mono)">({{ (f.file_size/1024)|round(1) }} KB)</span>
            </a>
              {% endif %}
            {% endfor %}
          </div>
          {% if p.user_id == current_user.id or is_admin %}
          <div class="msg-actions">
            {% if p.user_id == current_user.id %}<button class="msg-action-btn edit" onclick="startEdit({{ p.id }})">✏️</button>{% endif %}
            <button class="msg-action-btn delete" onclick="confirmDelete({{ p.id }},'{{ code }}')">🗑</button>
          </div>
          {% endif %}
        </div>
        {% endfor %}
        <div class="date-divider">{{ _('Todos los mensajes') }}</div>
        {% endif %}

        {% if not posts %}
        <div class="empty-state">
          <div class="e-icon">💬</div>
          <p>{{ _('Sé el primero en escribir en este canal') }}</p>
        </div>
        {% else %}
        {% set current_date = namespace(val=None) %}
        {% for p in posts %}
        {% set msg_date = p.created_at.strftime('%d %b %Y') %}
        {% if msg_date != current_date.val %}
        <div class="date-divider">{{ msg_date }}</div>
        {% set current_date.val = msg_date %}
        {% endif %}
        {# ── Wrapper post + thread ── #}
        {% if p.parent_id is none %}
        <div class="msg-thread" id="thread-{{ p.id }}">
          <div class="msg {% if p.is_pinned %}is-pinned{% endif %}" id="msg-{{ p.id }}">
            <div class="msg-avatar">{{ p.user.username[0] }}</div>
            <div class="msg-body">
              <div class="msg-meta">
                <span class="msg-author">@{{ p.user.username }}</span>
                <span class="msg-time">{{ p.created_at.strftime('%H:%M') }}</span>
                {% if p.updated_at and (p.updated_at - p.created_at).total_seconds() > 2 %}<span class="edited-tag">({{ _('editado') }})</span>{% endif %}
              </div>
              <div class="msg-content" id="content-{{ p.id }}">{{ p.content }}</div>
              <div class="msg-edit-box" id="edit-box-{{ p.id }}">
                <textarea class="msg-edit-textarea" id="edit-ta-{{ p.id }}">{{ p.content }}</textarea>
                <div id="edit-files-{{ p.id }}">
                  {% for f in p.files %}
                  <div class="edit-file-row" id="edit-file-{{ f.id }}" style="display:flex;align-items:center;gap:6px;margin-top:4px;">
                    <span style="font-size:12px;color:var(--text-2);">📎 {{ f.original_name }}</span>
                    <button type="button" onclick="removeAttachment({{ f.id }},'{{ code }}')"
                      style="background:transparent;border:1px solid rgba(255,77,106,.3);color:var(--danger);padding:2px 8px;border-radius:5px;font-size:11px;cursor:pointer;">✕</button>
                  </div>
                  {% endfor %}
                </div>
                <div id="edit-new-files-{{ p.id }}" style="display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;"></div>
                <label class="attach-btn" style="margin-top:8px;display:inline-flex;cursor:pointer;">
                  📎 {{ _('Añadir archivo') }}
                  <input type="file" id="edit-file-input-{{ p.id }}" style="display:none"
                    accept=".csv,.xlsx,.pdf,.png,.jpg,.jpeg,.gif,.webp,.mp4,.webm,.mov,.txt,.zip,.py,.json,.html"
                    onchange="addEditFile(this, {{ p.id }})">
                </label>
                <div class="msg-edit-actions">
                  <button class="edit-cancel-btn" onclick="cancelEdit({{ p.id }})">{{ _('Cancelar') }}</button>
                  <button class="edit-save" onclick="saveEdit({{ p.id }},'{{ code }}')">{{ _('Guardar') }}</button>
                </div>
              </div>
              {% set IMG_EXTS = ['png','jpg','jpeg','gif','webp','svg'] %}
              {% for f in p.files %}
                {% set fext = f.original_name.rsplit('.',1)[-1].lower() %}
                {% if fext in IMG_EXTS %}
              <div class="msg-img-inline">
                <img src="{{ url_for('strategy.download_file', code=code, filename=f.filename) }}"
                     alt="{{ f.original_name }}" loading="lazy"
                     onclick="openFileModal(event, '{{ url_for('strategy.download_file', code=code, filename=f.filename) }}', '{{ f.original_name }}')"
                     title="{{ f.original_name }}">
              </div>
                {% else %}
              <a class="msg-attachment" id="attach-link-{{ f.id }}"
                 href="{{ url_for('strategy.download_file', code=code, filename=f.filename) }}"
                 onclick="openFileModal(event, this, '{{ f.original_name }}')">
                📎 {{ f.original_name }}
                <span style="color:var(--text-3);font-size:11px;font-family:var(--mono)">({{ (f.file_size/1024)|round(1) }} KB)</span>
              </a>
                {% endif %}
              {% endfor %}
            </div>
            {% if p.user_id == current_user.id or is_admin %}
            <div class="msg-actions">
              {% if p.user_id == current_user.id %}<button class="msg-action-btn edit"
                  onclick="startEdit({{ p.id }})">✏️</button>{% endif %}
              <button class="msg-action-btn delete" onclick="confirmDelete({{ p.id }}, '{{ code }}')">🗑</button>
            </div>
            {% endif %}
          </div>

          {# ── Thread: replies + composer ── #}
          {% set post_replies = p.replies.order_by('created_at').all() %}
          <div class="msg-thread-body{% if post_replies %} has-replies{% endif %}">
            {# Replies existentes #}
            {% set post_replies = p.replies.order_by('created_at').all() %}
            <div class="msg-replies" id="replies-{{ p.id }}"{% if not post_replies %} style="display:none;"{% endif %}>
              {% for r in post_replies %}
              <div class="msg-reply" id="msg-{{ r.id }}">
                <div class="msg-reply-avatar">{{ r.user.username[0] }}</div>
                <div class="msg-reply-body">
                  <div class="msg-reply-meta" id="meta-{{ r.id }}">
                    <span class="msg-reply-author">@{{ r.user.username }}</span>
                    <span class="msg-reply-time">{{ r.created_at.strftime('%H:%M') }}</span>
                  </div>
                  <div class="msg-reply-content" id="content-{{ r.id }}">{{ r.content }}</div>
                  <div class="msg-edit-box" id="edit-box-{{ r.id }}">
                    <textarea class="msg-edit-textarea" id="edit-ta-{{ r.id }}">{{ r.content }}</textarea>
                    <div id="edit-new-files-{{ r.id }}" style="display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;"></div>
                    <div class="msg-edit-actions">
                      <button class="edit-cancel-btn" onclick="cancelEdit({{ r.id }})">{{ _('Cancelar') }}</button>
                      <button class="edit-save" onclick="saveEdit({{ r.id }},'{{ code }}')">{{ _('Guardar') }}</button>
                    </div>
                  </div>
                </div>
                {% if r.user_id == current_user.id or is_admin %}
                <div class="msg-actions" style="align-self:center;">
                  {% if r.user_id == current_user.id %}
                  <button class="msg-action-btn edit" onclick="startEdit({{ r.id }})">✏️</button>
                  {% endif %}
                  <button class="msg-action-btn delete" onclick="confirmDelete({{ r.id }},'{{ code }}')">🗑</button>
                </div>
                {% endif %}
              </div>
              {% endfor %}
            </div>
            {# Botón + composer #}
            <button class="reply-toggle-btn" onclick="toggleReply({{ p.id }})">↩ {{ _('Responder') }}</button>
            <div class="reply-composer" id="reply-composer-{{ p.id }}">
              <textarea class="reply-textarea" id="reply-ta-{{ p.id }}"
                placeholder="{{ _('Escribe una respuesta…') }}" rows="2"
                oninput="updateReplyBtn({{ p.id }})"></textarea>
              <div class="reply-actions">
                <button class="reply-cancel-btn" onclick="toggleReply({{ p.id }})">{{ _('Cancelar') }}</button>
                <button class="reply-send-btn" id="reply-btn-{{ p.id }}" disabled
                  onclick="sendReply({{ p.id }}, '{{ code }}')">↩ {{ _('Responder') }}</button>
              </div>
            </div>
          </div>
        </div>
        {% endif %}
        {% endfor %}
        {% endif %}
      </div>

      <div class="feed-composer">
        <form id="feed-form" action="{{ url_for('strategy.add_post', code=code) }}" method="POST"
            enctype="multipart/form-data">
          <div class="composer-box">
            <textarea class="composer-textarea" name="content" id="feed-input"
                placeholder="{{ 'Escribe un mensaje en el Foro BTM…' if code == 'GENERAL' else (_('Escribe un mensaje sobre la estrategia') ~ ' ' ~ code ~ '…') }}" rows="2"></textarea>
            <!-- Lista de archivos en cola -->
            <div id="composer-file-list" style="display:none;padding:6px 14px 0;display:flex;flex-wrap:wrap;gap:6px;"></div>
            <div class="composer-footer">
              <label class="attach-btn" style="cursor:pointer;">
                📎 {{ _('Adjuntar archivo') }}
                <input type="file" id="attach-input" style="display:none"
                    accept=".csv,.xlsx,.pdf,.png,.jpg,.jpeg,.gif,.webp,.mp4,.webm,.mov,.txt,.zip,.py,.json,.html">
              </label>
              <button type="submit" disabled class="send-btn" id="send-btn">{{ _('Enviar →') }}</button>
            </div>
          </div>
        </form>
      </div>
    </div>


  </main>
</div>

<!-- Upload overlay -->
<div id="upload-overlay">
  <div id="upload-overlay-box">
    <div class="up-ring"></div>
    <span class="up-label">{{ _('Subiendo archivo…') }}</span>
    <span class="up-sub">{{ _('Esto puede tardar unos segundos') }}</span>
    <button class="up-cancel" onclick="cancelUpload()">✕ {{ _('Cancelar') }}</button>
  </div>
</div>

<!-- Modal visor de archivos -->
<div id="file-modal">
  <div id="file-modal-box">
    <div id="file-modal-header">
      <span id="file-modal-name">{{ _('archivo') }}</span>
    </div>
    <div id="file-modal-body"></div>
    <div id="file-modal-footer">
      <button class="fm-btn-close" onclick="closeFileModal()">✕ {{ _('Cerrar') }}</button>
      <a id="file-modal-download" class="fm-btn-download" href="#" download>⬇ {{ _('Descargar') }}</a>
    </div>
  </div>
</div>

<!-- Modal confirmación -->
<div class="confirm-modal" id="confirm-modal">
  <div class="confirm-box">
    <p id="confirm-msg">{{ _('¿Estás seguro?') }}</p>
    <div class="confirm-actions">
      <button class="confirm-no" onclick="closeConfirm()">{{ _('Cancelar') }}</button>
      <button class="confirm-yes" id="confirm-yes-btn">{{ _('Borrar') }}</button>
    </div>
  </div>
</div>

<!-- Modal preview imagen pegada -->
<div id="paste-modal" style="display:none;position:fixed;inset:0;z-index:3000;background:rgba(0,0,0,.75);backdrop-filter:blur(6px);align-items:center;justify-content:center;">
  <div style="background:var(--bg-2);border:1px solid var(--border);border-radius:14px;max-width:min(92vw,600px);width:100%;box-shadow:0 24px 60px rgba(0,0,0,.55);overflow:hidden;">
    <div style="display:flex;align-items:center;justify-content:space-between;padding:13px 18px;border-bottom:1px solid var(--border);">
      <span style="font-size:13px;font-family:var(--mono);color:var(--text-2);" id="paste-modal-name">screenshot.png</span>
      <button onclick="cancelPasteModal()" style="background:transparent;border:none;color:var(--text-3);font-size:18px;cursor:pointer;line-height:1;">✕</button>
    </div>
    <div style="padding:20px;display:flex;align-items:center;justify-content:center;max-height:60vh;overflow:auto;">
      <img id="paste-modal-img" src="" style="max-width:100%;max-height:55vh;border-radius:8px;object-fit:contain;">
    </div>
    <div style="display:flex;gap:10px;padding:13px 18px;border-top:1px solid var(--border);justify-content:flex-end;">
      <button onclick="cancelPasteModal()" class="fm-btn-close">{{ _('Cancelar') }}</button>
      <button onclick="confirmPasteModal()" class="fm-btn-download" style="border:none;cursor:pointer;">📎 {{ _('Adjuntar') }}</button>
    </div>
  </div>
</div>

<div id="toast"></div>
{% endblock %}

{% block scripts %}
{{ super() }}
<script>
  // ── Traducciones para strings JS generados en runtime ──
  const T = {
    archivoQuitado:       "{{ _('Archivo quitado') }}",
    errorQuitarArchivo:   "{{ _('Error al quitar archivo') }}",
    mensajeEditado:       "{{ _('Mensaje editado') }}",
    errorEditar:          "{{ _('Error al editar') }}",
    envioCancelado:       "{{ _('Envío cancelado') }}",
    errorEnviar:          "{{ _('Error al enviar') }}",
    mensajeBorrado:       "{{ _('Mensaje borrado') }}",
    errorBorrar:          "{{ _('Error al borrar') }}",
    confirmarBorrar:      "{{ _('¿Estás seguro de que quieres borrar este mensaje?') }}",
    cargandoImagen:       "{{ _('Cargando imagen…') }}",
    cargandoVideo:        "{{ _('Cargando video…') }}",
    cargandoArchivo:      "{{ _('Cargando archivo…') }}",
    errorAlCargar:        "{{ _('Error al cargar') }}",
    errorAlCargarArchivo: "{{ _('Error al cargar el archivo.') }}",
    sinVistaPrevia:       "{{ _('Sin vista previa disponible') }}",
    superaLimite:         "{{ _('supera el límite de') }}",
  };

  // ── Linkify: convierte URLs en <a> clickeables ─────────────
  function linkify(text) {
    const urlRegex = /(https?:\/\/[^\s<>"{}|\\^`\[\]]+)/g;
    return text.replace(urlRegex, url =>
      `<a href="${url}" target="_blank" rel="noopener noreferrer"
          style="color:var(--accent);text-decoration:underline;word-break:break-all;"
          onclick="event.stopPropagation()">${url}</a>`
    );
  }

  function linkifyElement(el) {
    // Solo procesar nodos de texto para no romper HTML existente
    el.innerHTML = linkify(el.textContent);
  }

  // Aplicar linkify a todos los mensajes al cargar
  document.querySelectorAll('.msg-content').forEach(linkifyElement);

  // ── Scroll al fondo del feed ────────────────────
  const feedMsgs = document.getElementById('feed-messages');
  // ── Scroll al fondo del feed ────────────────────
  // Los posts se muestran del más nuevo al más viejo — no hace falta scroll

  // ── Botón Enviar: habilitar solo con texto ──────
  const feedInput = document.getElementById('feed-input');
  const sendBtn   = document.getElementById('send-btn');
  if (feedInput && sendBtn) {
    feedInput.addEventListener('input', () => {
      sendBtn.disabled = feedInput.value.trim() === '';
    });
  }

  // ── Enter para enviar (sin Shift) ──────────────
  feedInput?.addEventListener('keydown', e => {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault();
      if (!sendBtn.disabled) submitComposer();
    }
  });

  // ── Multi-archivo en composer ───────────────────
  const composerFiles = new Map(); // tempId → File
  let _tempId = 0;

  document.getElementById('attach-input')?.addEventListener('change', function() {
    Array.from(this.files).forEach(file => {
      if (!checkFileSize(file)) return;
      const tid = ++_tempId;
      composerFiles.set(tid, file);
      renderComposerFile(tid, file.name);
    });
    this.value = '';
  });

  // ── Pegar imagen desde clipboard ───────────────────────────
  let _pasteFile = null; // archivo pendiente de confirmar

  document.getElementById('feed-input')?.addEventListener('paste', function(e) {
    const items = e.clipboardData?.items;
    if (!items) return;
    Array.from(items).forEach(item => {
      if (!item.type.startsWith('image/')) return;
      const file = item.getAsFile();
      if (!file) return;
      const ext  = item.type.split('/')[1] || 'png';
      const now  = new Date();
      const ts   = `${now.getFullYear()}-${String(now.getMonth()+1).padStart(2,'0')}-${String(now.getDate()).padStart(2,'0')}-${String(now.getHours()).padStart(2,'0')}h${String(now.getMinutes()).padStart(2,'0')}`;
      const name = `screenshot-${ts}.${ext}`;
      const named = new File([file], name, { type: item.type });
      if (!checkFileSize(named)) return;
      // Mostrar modal de preview
      _pasteFile = named;
      document.getElementById('paste-modal-name').textContent = name;
      document.getElementById('paste-modal-img').src = URL.createObjectURL(named);
      document.getElementById('paste-modal').style.display = 'flex';
    });
  });

  function confirmPasteModal() {
    if (!_pasteFile) return;
    const tid = ++_tempId;
    composerFiles.set(tid, _pasteFile);
    renderComposerFile(tid, _pasteFile.name);
    cancelPasteModal();
  }

  function cancelPasteModal() {
    const img = document.getElementById('paste-modal-img');
    URL.revokeObjectURL(img.src); // liberar memoria
    img.src = '';
    _pasteFile = null;
    document.getElementById('paste-modal').style.display = 'none';
  }

  document.getElementById('paste-modal')?.addEventListener('click', function(e) {
    if (e.target === this) cancelPasteModal();
  });
  // ──────────────────────────────────────────────────────────

  function renderComposerFile(tid, name) {
    const list = document.getElementById('composer-file-list');
    list.style.display = 'flex';
    const tag = document.createElement('span');
    tag.id = `cf-${tid}`;
    tag.style.cssText = 'display:inline-flex;align-items:center;gap:4px;background:var(--bg-3);border:1px solid var(--border);border-radius:6px;padding:3px 8px;font-size:12px;color:var(--text-2);';
    tag.innerHTML = `📎 ${name} <button type="button" onclick="removeComposerFile(${tid})"
      style="background:none;border:none;color:var(--danger);cursor:pointer;font-size:13px;line-height:1;padding:0 2px;">✕</button>`;
    list.appendChild(tag);
  }

  function removeComposerFile(tid) {
    composerFiles.delete(tid);
    document.getElementById(`cf-${tid}`)?.remove();
    if (composerFiles.size === 0) document.getElementById('composer-file-list').style.display = 'none';
  }

  let _uploadController = null;

  function submitComposer() {
    const content = feedInput.value.trim();
    if (!content) return;
    const form   = document.getElementById('feed-form');
    const action = form.action;
    const fd     = new FormData();
    fd.append('content', content);
    composerFiles.forEach(file => fd.append('attachments', file));

    sendBtn.disabled   = true;
    feedInput.disabled = true;
    _uploadController  = new AbortController();
    document.getElementById('upload-overlay').classList.add('open');

    fetch(action, { method: 'POST', body: fd, signal: _uploadController.signal })
      .then(r => { if (r.ok || r.redirected) window.location.href = r.url; })
      .catch(err => {
        document.getElementById('upload-overlay').classList.remove('open');
        sendBtn.disabled   = false;
        feedInput.disabled = false;
        if (err.name !== 'AbortError') showToast(`❌ ${T.errorEnviar}`);
      });
  }

  function cancelUpload() {
    if (_uploadController) _uploadController.abort();
    document.getElementById('upload-overlay').classList.remove('open');
    sendBtn.disabled   = false;
    feedInput.disabled = false;
    showToast(`⚠️ ${T.envioCancelado}`);
  }

  // Interceptar submit del form para usar submitComposer
  document.getElementById('feed-form')?.addEventListener('submit', e => {
    e.preventDefault();
    submitComposer();
  });

  // ── BORRAR MENSAJE ──────────────────────────────
  let _dId, _dCode;
  function confirmDelete(id, code) {
    _dId = id; _dCode = code;
    document.getElementById('confirm-msg').textContent = T.confirmarBorrar;
    document.getElementById('confirm-modal').classList.add('open');
    document.getElementById('confirm-yes-btn').onclick = executeDelete;
  }
  function closeConfirm() {
    document.getElementById('confirm-modal').classList.remove('open');
  }
  async function executeDelete() {
    closeConfirm();
    const res = await fetch(`/strategy/${_dCode}/post/${_dId}`, { method: 'DELETE' });
    if (res.ok) {
      // Si tiene thread wrapper (post principal), borrar el thread completo
      const threadEl = document.getElementById(`thread-${_dId}`);
      if (threadEl) threadEl.remove();
      else document.getElementById(`msg-${_dId}`)?.remove(); // reply
      showToast(`🗑 ${T.mensajeBorrado}`);
    }
    else showToast(`❌ ${T.errorBorrar}`);
  }
  document.addEventListener('keydown', e => { if (e.key === 'Escape') closeConfirm(); });

  // ── EDITAR MENSAJE ──────────────────────────────
  const editFilesMap = {};

  function startEdit(id) {
    if (!editFilesMap[id]) editFilesMap[id] = new Map();
    document.getElementById(`edit-box-${id}`).classList.add('open');
    document.getElementById(`content-${id}`).style.display = 'none';
    document.querySelectorAll(`#msg-${id} .msg-attachment`).forEach(a => a.style.display = 'none');
    document.querySelectorAll(`#msg-${id} .msg-img-inline`).forEach(a => a.style.display = 'none');
    const metaById = document.getElementById(`meta-${id}`);
    const metaEl = metaById || document.querySelector(`#msg-${id} .msg-meta`);
    if (metaEl) metaEl.style.display = 'none';
    // Ocultar botones edit/delete mientras se edita
    const actionsEl = document.querySelector(`#msg-${id} .msg-actions`);
    if (actionsEl) actionsEl.style.display = 'none';
    document.querySelector('.feed-composer').style.display = 'none';
    const ta = document.getElementById(`edit-ta-${id}`);
    ta.style.height = 'auto';
    ta.style.height = Math.max(ta.scrollHeight, 80) + 'px';
    ta.addEventListener('input', function() {
      this.style.height = 'auto';
      this.style.height = Math.max(this.scrollHeight, 80) + 'px';
    });
    ta.focus();
    document.getElementById(`msg-${id}`).scrollIntoView({ behavior: 'smooth', block: 'start' });
  }
  function cancelEdit(id) {
    if (editFilesMap[id]) { editFilesMap[id].clear(); }
    document.getElementById(`edit-new-files-${id}`).innerHTML = '';
    document.getElementById(`edit-box-${id}`).classList.remove('open');
    document.getElementById(`content-${id}`).style.display = '';
    document.querySelectorAll(`#msg-${id} .msg-attachment`).forEach(a => a.style.display = '');
    document.querySelectorAll(`#msg-${id} .msg-img-inline`).forEach(a => a.style.display = '');
    const metaById = document.getElementById(`meta-${id}`);
    const metaEl = metaById || document.querySelector(`#msg-${id} .msg-meta`);
    if (metaEl) metaEl.style.display = '';
    // Restaurar botones (dejar que el hover los controle de nuevo)
    const actionsEl = document.querySelector(`#msg-${id} .msg-actions`);
    if (actionsEl) actionsEl.style.display = '';
    document.querySelector('.feed-composer').style.display = '';
  }

  function addEditFile(input, postId) {
    if (!editFilesMap[postId]) editFilesMap[postId] = new Map();
    Array.from(input.files).forEach(file => {
      if (!checkFileSize(file)) return;
      const tid = ++_tempId;
      editFilesMap[postId].set(tid, file);
      const container = document.getElementById(`edit-new-files-${postId}`);
      const tag = document.createElement('span');
      tag.id = `enf-${postId}-${tid}`;
      tag.style.cssText = 'display:inline-flex;align-items:center;gap:4px;background:var(--bg-3);border:1px solid var(--border);border-radius:6px;padding:3px 8px;font-size:12px;color:var(--text-2);';
      tag.innerHTML = `📎 ${file.name} <button type="button" onclick="removeEditNewFile(${postId},${tid})"
        style="background:none;border:none;color:var(--danger);cursor:pointer;font-size:13px;line-height:1;padding:0 2px;">✕</button>`;
      container.appendChild(tag);
    });
    input.value = '';
  }

  function removeEditNewFile(postId, tid) {
    if (editFilesMap[postId]) editFilesMap[postId].delete(tid);
    document.getElementById(`enf-${postId}-${tid}`)?.remove();
  }

  async function removeAttachment(fileId, code) {
    const res = await fetch(`/strategy/${code}/file/${fileId}`, { method: 'DELETE' });
    if (res.ok) {
      document.getElementById(`edit-file-${fileId}`)?.remove();
      document.getElementById(`attach-link-${fileId}`)?.remove();
      showToast(`📎 ${T.archivoQuitado}`);
    } else {
      showToast(`❌ ${T.errorQuitarArchivo}`);
    }
  }

  async function saveEdit(id, code) {
    const content  = document.getElementById(`edit-ta-${id}`).value.trim();
    if (!content) return;
    const newFiles = editFilesMap[id] ? [...editFilesMap[id].values()] : [];

    if (newFiles.length > 0) {
      const fd = new FormData();
      fd.append('content', content);
      newFiles.forEach(f => fd.append('attachments', f));

      _uploadController = new AbortController();
      document.getElementById('upload-overlay').classList.add('open');

      try {
        const res = await fetch(`/strategy/${code}/post/${id}/edit`, {
          method: 'POST', body: fd, signal: _uploadController.signal
        });
        document.getElementById('upload-overlay').classList.remove('open');
        if (res.ok) { window.location.reload(); }
        else { showToast(`❌ ${T.errorEditar}`); }
      } catch(err) {
        document.getElementById('upload-overlay').classList.remove('open');
        if (err.name !== 'AbortError') showToast(`❌ ${T.errorEditar}`);
      }
    } else {
      const res = await fetch(`/strategy/${code}/post/${id}/edit`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ content })
      });
      if (res.ok) {
        const data = await res.json();
        const contentEl = document.getElementById(`content-${id}`);
        contentEl.textContent = data.content;
        linkifyElement(contentEl);
        cancelEdit(id);
        showToast(`✓ ${T.mensajeEditado}`);
      } else {
        showToast(`❌ ${T.errorEditar}`);
      }
    }
  }

  // ── Validación de tamaño de archivos ───────────
  const VIDEO_EXTS_SET   = new Set(['mp4','webm','mov']);
  const MAX_VIDEO_BYTES  = 20  * 1024 * 1024;   // 20 MB
  const MAX_DEFAULT_BYTES= 10  * 1024 * 1024;   // 10 MB

  function checkFileSize(file) {
    const ext   = file.name.split('.').pop().toLowerCase();
    const limit = VIDEO_EXTS_SET.has(ext) ? MAX_VIDEO_BYTES : MAX_DEFAULT_BYTES;
    if (file.size > limit) {
      const mb = limit / (1024 * 1024);
      showToast(`❌ "${file.name}" ${T.superaLimite} ${mb} MB`);
      return false;
    }
    return true;
  }

  // ── Modal visor de archivos ─────────────────────
  const IMG_EXTS  = ['png','jpg','jpeg','gif','webp','svg'];
  const VID_EXTS  = ['mp4','webm','mov'];
  const TEXT_EXTS = ['txt','json','py','csv','js','css','md'];
  const FILE_ICONS = { pdf:'📄', csv:'📊', xlsx:'📊', zip:'🗜', py:'🐍',
                       json:'📋', txt:'📝', js:'📋', html:'📋', md:'📝' };

  function _showSpinner(label) {
    const body = document.getElementById('file-modal-body');
    body.innerHTML = `
      <div class="fm-spinner">
        <div class="fm-spinner-ring"></div>
        <span class="fm-spinner-label">${label}</span>
      </div>`;
  }

  async function openFileModal(e, anchor, originalName) {
    e.preventDefault();
    const url  = (typeof anchor === 'string') ? anchor : anchor.href;
    const ext  = originalName.split('.').pop().toLowerCase();
    const body = document.getElementById('file-modal-body');
    body.innerHTML = '';
    body.style.padding    = '20px';
    body.style.alignItems = 'center';

    document.getElementById('file-modal-name').textContent = originalName;
    document.getElementById('file-modal-download').href     = url;
    document.getElementById('file-modal-download').download = originalName;
    document.getElementById('file-modal').classList.add('open');

    if (IMG_EXTS.includes(ext)) {
      _showSpinner(T.cargandoImagen);
      const img = new Image();
      img.onload = () => { body.innerHTML = ''; body.appendChild(img); };
      img.onerror = () => { body.innerHTML = `<div class="file-modal-generic"><span class="fm-icon">⚠️</span><span class="fm-label">${T.errorAlCargar}</span></div>`; };
      img.src = url;
      img.style.cssText = 'max-width:100%;max-height:66vh;border-radius:8px;object-fit:contain;';

    } else if (VID_EXTS.includes(ext)) {
      _showSpinner(T.cargandoVideo);
      const vid = document.createElement('video');
      vid.controls = true; vid.preload = 'metadata';
      vid.style.cssText = 'max-width:100%;max-height:66vh;border-radius:8px;';
      vid.onloadedmetadata = () => { body.innerHTML = ''; body.appendChild(vid); };
      vid.onerror = () => { body.innerHTML = `<div class="file-modal-generic"><span class="fm-icon">⚠️</span><span class="fm-label">${T.errorAlCargar}</span></div>`; };
      vid.innerHTML = `<source src="${url}">`;

    } else if (TEXT_EXTS.includes(ext)) {
      _showSpinner(T.cargandoArchivo);
      try {
        const res  = await fetch(url);
        const text = await res.text();
        const pre  = document.createElement('pre');
        pre.textContent = text;
        body.innerHTML  = '';
        body.style.alignItems = 'flex-start';
        body.appendChild(pre);
      } catch { body.innerHTML = `<pre>${T.errorAlCargarArchivo}</pre>`; }

    } else if (ext === 'html') {
      const previewUrl = anchor.href.replace('/files/', '/preview/');
      const wrapper = document.createElement('div');
      wrapper.style.cssText = 'position:relative;width:100%;height:72vh;';
      const spinner = document.createElement('div');
      spinner.className = 'fm-spinner';
      spinner.style.cssText = 'position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;';
      spinner.innerHTML = `<div class="fm-spinner-ring"></div><span class="fm-spinner-label">${T.cargandoArchivo}</span>`;
      const iframe = document.createElement('iframe');
      iframe.src = previewUrl;
      iframe.style.cssText = 'width:100%;height:100%;border:none;border-radius:8px;background:#fff;opacity:0;transition:opacity .2s;';
      iframe.onload = () => { spinner.remove(); iframe.style.opacity = '1'; };
      iframe.onerror = () => { wrapper.innerHTML = `<div class="file-modal-generic"><span class="fm-icon">⚠️</span><span class="fm-label">${T.errorAlCargar}</span></div>`; };
      wrapper.appendChild(spinner);
      wrapper.appendChild(iframe);
      body.innerHTML = '';
      body.style.padding = '0';
      body.style.alignItems = 'stretch';
      body.appendChild(wrapper);

    } else {
      const icon = FILE_ICONS[ext] || '📎';
      body.innerHTML = `
        <div class="file-modal-generic">
          <span class="fm-icon">${icon}</span>
          <span class="fm-label">${originalName}</span>
          <span style="font-size:12px;color:var(--text-3)">${T.sinVistaPrevia}</span>
        </div>`;
    }
  }

  function closeFileModal() {
    document.getElementById('file-modal').classList.remove('open');
    const body = document.getElementById('file-modal-body');
    body.innerHTML = '';
    body.style.padding    = '20px';
    body.style.alignItems = 'center';
  }

  document.getElementById('file-modal')?.addEventListener('click', function(e) {
    if (e.target === this) closeFileModal();
  });
  document.addEventListener('keydown', e => {
    if (e.key === 'Escape' && document.getElementById('file-modal').classList.contains('open'))
      closeFileModal();
  });

  // ── Sidebar drawer (móvil) ─────────────────────────────────
  function toggleSidebar() {
    const sidebar = document.querySelector('.ws-sidebar');
    const overlay = document.getElementById('sidebar-overlay');
    sidebar.classList.toggle('open');
    overlay.classList.toggle('open');
  }
  document.querySelectorAll('.nav-tab').forEach(tab => {
    tab.addEventListener('click', () => {
      if (window.innerWidth <= 768) toggleSidebar();
    });
  });
  // ──────────────────────────────────────────────────────────

  // ── Toast ───────────────────────────────────────
  function showToast(msg, duration = 3000) {
    const t = document.getElementById('toast');
    t.textContent = msg; t.classList.add('show');
    setTimeout(() => t.classList.remove('show'), duration);
  }
  // ── Reply system ──────────────────────────────────────────
  function toggleReply(postId) {
    const composer = document.getElementById(`reply-composer-${postId}`);
    composer.classList.toggle('open');
    if (composer.classList.contains('open')) {
      document.getElementById(`reply-ta-${postId}`).focus();
    }
  }

  function updateReplyBtn(postId) {
    const ta  = document.getElementById(`reply-ta-${postId}`);
    const btn = document.getElementById(`reply-btn-${postId}`);
    btn.disabled = ta.value.trim() === '';
  }

  async function sendReply(postId, code) {
    const ta      = document.getElementById(`reply-ta-${postId}`);
    const content = ta.value.trim();
    if (!content) return;

    const btn = document.getElementById(`reply-btn-${postId}`);
    btn.disabled = true;

    const fd = new FormData();
    fd.append('content', content);

    try {
      const res  = await fetch(`/strategy/${code}/post/${postId}/reply`, {
        method: 'POST', body: fd
      });
      const data = await res.json();
      if (!res.ok) { showToast(`❌ ${data.error}`); btn.disabled = false; return; }

      // Insertar reply en el DOM sin recargar
      const repliesBox = document.getElementById(`replies-${postId}`);
      repliesBox.style.display = '';
      // Marcar thread-body para que quede visible permanentemente
      repliesBox.closest('.msg-thread-body')?.classList.add('has-replies');
      const div = document.createElement('div');
      div.className = 'msg-reply';
      div.id = `msg-${data.reply.id}`;
      div.innerHTML = `
        <div class="msg-reply-avatar">${data.reply.author[0].toUpperCase()}</div>
        <div class="msg-reply-body">
          <div class="msg-reply-meta" id="meta-${data.reply.id}">
            <span class="msg-reply-author">@${data.reply.author}</span>
            <span class="msg-reply-time">${data.reply.time}</span>
          </div>
          <div class="msg-reply-content" id="content-${data.reply.id}">${linkify(data.reply.content)}</div>
          <div class="msg-edit-box" id="edit-box-${data.reply.id}">
            <textarea class="msg-edit-textarea" id="edit-ta-${data.reply.id}">${data.reply.content}</textarea>
            <div id="edit-new-files-${data.reply.id}" style="display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;"></div>
            <div class="msg-edit-actions">
              <button class="edit-cancel-btn" onclick="cancelEdit(${data.reply.id})">Cancelar</button>
              <button class="edit-save" onclick="saveEdit(${data.reply.id},'${code}')">Guardar</button>
            </div>
          </div>
        </div>
        <div class="msg-actions" style="align-self:center;">
          <button class="msg-action-btn edit" onclick="startEdit(${data.reply.id})">✏️</button>
          <button class="msg-action-btn delete" onclick="confirmDelete(${data.reply.id},'${code}')">🗑</button>
        </div>`;
      repliesBox.appendChild(div);

      ta.value = '';
      updateReplyBtn(postId);
      toggleReply(postId);
      showToast('↩ Respuesta enviada');
    } catch(e) {
      showToast(`❌ ${T.errorEnviar}`);
      btn.disabled = false;
    }
  }
  // ──────────────────────────────────────────────────────────

  {% with messages = get_flashed_messages(with_categories=true) %}
  {% for cat, msg in messages %}
  showToast("{{ msg }}");
  {% endfor %}
  {% endwith %}
</script>
{% endblock %}