{% extends 'base.html.twig' %}

{% trans_default_domain "Social" %}

{% block title %}{{ 'social.feed'|trans }}{% endblock %}

{% block stylesheets %}
{{ parent() }}
<style>
    :root {
        --primary-color: #00A550;
        --primary-hover: #008844;
        --accent-color: #ff8600;
        --text-color: #333;
        --text-muted: #666;
        --border-color: #e0e0e0;
        --bg-light: #f8f9fa;
        --shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
        --shadow-md: 0 4px 16px rgba(0,0,0,0.12);
        --radius: 12px;
    }

    .feed-page { padding: 20px 0 40px; background: var(--bg-light); min-height: 100vh; }

    /* Composer */
    .composer-card { background: white; border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 20px; margin-bottom: 24px; }
    .composer-top { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
    .composer-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid var(--border-color); }
    .composer-input { flex: 1; background: var(--bg-light); border: 1px solid var(--border-color); border-radius: 20px; padding: 12px 20px; font-size: 14px; color: var(--text-muted); cursor: pointer; outline: none; transition: all 0.3s; }
    .composer-input:hover { border-color: var(--primary-color); }
    .composer-actions { display: flex; gap: 12px; padding-top: 12px; border-top: 1px solid var(--border-color); }
    .composer-action { display: flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 8px; font-size: 13px; color: var(--text-muted); background: none; border: none; cursor: pointer; transition: all 0.3s; }
    .composer-action:hover { background: var(--bg-light); color: var(--text-color); }
    .composer-action i { font-size: 16px; }
    .composer-action.share-paper i { color: var(--primary-color); }
    .composer-action.add-image i { color: var(--accent-color); }

    /* Main Composer Modal */
    .compose-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 1050; justify-content: center; align-items: center; }
    .compose-overlay.active { display: flex; }
    .compose-modal { background: white; border-radius: var(--radius); width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-md); }
    .compose-modal-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--border-color); }
    .compose-modal-header h3 { margin: 0; font-size: 16px; color: var(--text-color); }
    .compose-modal-close { background: none; border: none; font-size: 20px; color: var(--text-muted); cursor: pointer; padding: 4px 8px; border-radius: 50%; }
    .compose-modal-close:hover { background: var(--bg-light); }
    .compose-modal-body { padding: 20px; }
    .compose-textarea { width: 100%; min-height: 120px; border: 1px solid var(--border-color); border-radius: 8px; padding: 12px; font-size: 14px; line-height: 1.6; resize: vertical; outline: none; font-family: inherit; }
    .compose-textarea:focus { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(0, 165, 80, 0.1); }
    .compose-visibility { margin-top: 12px; display: flex; gap: 8px; }
    .compose-visibility select { padding: 8px 12px; border: 1px solid var(--border-color); border-radius: 6px; font-size: 13px; outline: none; }
    .compose-modal-footer { display: flex; justify-content: flex-end; gap: 12px; padding: 16px 20px; border-top: 1px solid var(--border-color); }
    .btn-cancel { padding: 8px 20px; border-radius: 8px; border: 1px solid var(--border-color); background: white; color: var(--text-muted); cursor: pointer; font-size: 14px; }
    .btn-publish { padding: 8px 24px; border-radius: 8px; border: none; background: var(--primary-color); color: white; cursor: pointer; font-size: 14px; font-weight: 500; transition: background 0.3s; }
    .btn-publish:hover { background: var(--primary-hover); }
    .btn-publish:disabled { background: #ccc; cursor: default; }

    /* Image preview */
    .image-preview { margin-top: 12px; position: relative; display: none; }
    .image-preview img { max-width: 100%; border-radius: 8px; max-height: 300px; object-fit: contain; }
    .image-preview .remove-image { position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,0.6); color: white; border: none; border-radius: 50%; width: 28px; height: 28px; font-size: 14px; cursor: pointer; }

    /* Tabs */
    .tabs-container { background: white; border-radius: var(--radius); box-shadow: var(--shadow-sm); margin-bottom: 24px; overflow: hidden; }
    .tabs-nav { display: flex; border-bottom: 1px solid var(--border-color); overflow-x: auto; }
    .tab-btn { padding: 14px 24px; font-size: 14px; font-weight: 500; color: var(--text-muted); text-decoration: none; border-bottom: 3px solid transparent; transition: all 0.3s; white-space: nowrap; display: flex; align-items: center; gap: 8px; cursor: pointer; background: none; border-top: none; border-left: none; border-right: none; }
    .tab-btn:hover { color: var(--primary-color); background: #f9f9f9; text-decoration: none; }
    .tab-btn.active { color: var(--primary-color); border-bottom-color: var(--primary-color); background: #f0fff5; }

    /* Post Card */
    .post-card { background: white; border-radius: var(--radius); box-shadow: var(--shadow-sm); margin-bottom: 16px; border: 1px solid transparent; transition: all 0.3s; }
    .post-card:hover { box-shadow: var(--shadow-md); border-color: #e8f5e9; }
    .post-card-header { display: flex; align-items: center; gap: 12px; padding: 16px 20px 0; }
    .post-author-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid var(--border-color); }
    .post-author-info { flex: 1; }
    .post-author-info a { color: var(--text-color); font-weight: 600; font-size: 14px; text-decoration: none; }
    .post-author-info a:hover { color: var(--primary-color); }
    .post-author-info .post-time { font-size: 12px; color: var(--text-muted); }
    .post-card-badge { font-size: 11px; padding: 3px 10px; border-radius: 12px; font-weight: 500; }
    .post-card-badge.paper-share { background: #e8f5e9; color: var(--primary-color); }
    .post-card-badge.space-post { background: #fff3e0; color: var(--accent-color); }
    .post-card-badge.pinned { background: #fce4ec; color: #e91e63; }

    /* Post Menu Dropdown */
    .post-menu { position: relative; margin-inline-start: auto; }
    .post-menu-btn { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 4px 8px; border-radius: 50%; font-size: 16px; transition: all 0.2s; }
    .post-menu-btn:hover { background: var(--bg-light); color: var(--text-color); }
    .post-menu-dropdown { display: none; position: absolute; top: 100%; right: 0; background: white; border-radius: 8px; box-shadow: var(--shadow-md); border: 1px solid var(--border-color); min-width: 160px; z-index: 100; overflow: hidden; }
    html[dir="rtl"] .post-menu-dropdown { left: auto; right: 0; }
    .post-menu-dropdown.show { display: block; }
    .post-menu-dropdown a, .post-menu-dropdown button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 16px; font-size: 13px; color: var(--text-color); background: none; border: none; cursor: pointer; text-decoration: none; transition: background 0.15s; }
    .post-menu-dropdown a:hover, .post-menu-dropdown button:hover { background: var(--bg-light); text-decoration: none; }
    .post-menu-dropdown .menu-delete { color: #d32f2f; }
    .post-menu-dropdown .menu-delete:hover { background: #ffebee; }

    /* Edit Modal */
    .edit-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 1000; justify-content: center; align-items: center; }
    .edit-overlay.active { display: flex; }
    .edit-modal { background: white; border-radius: var(--radius); width: 90%; max-width: 560px; box-shadow: var(--shadow-md); overflow: hidden; }
    .edit-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border-color); }
    .edit-modal-header h4 { margin: 0; font-size: 16px; }
    .edit-modal-close { background: none; border: none; font-size: 20px; color: var(--text-muted); cursor: pointer; }
    .edit-modal-body { padding: 20px; }
    .edit-modal-body textarea { width: 100%; min-height: 120px; border: 1px solid var(--border-color); border-radius: 8px; padding: 12px; font-size: 14px; resize: vertical; outline: none; font-family: inherit; }
    .edit-modal-body textarea:focus { border-color: var(--primary-color); }
    .edit-modal-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--border-color); }
    .edit-modal-footer button { padding: 8px 20px; border-radius: 6px; font-size: 14px; font-weight: 500; cursor: pointer; border: none; }
    .edit-cancel-btn { background: var(--bg-light); color: var(--text-color); }
    .edit-save-btn { background: var(--primary-color); color: white; }
    .edit-save-btn:hover { background: var(--primary-hover); }

    .post-card-body { padding: 12px 20px; }
    .post-content { font-size: 14px; line-height: 1.7; color: var(--text-color); white-space: pre-wrap; word-break: break-word; }
    .post-content.truncated { max-height: 200px; overflow: hidden; position: relative; }
    .post-content.truncated::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 60px; background: linear-gradient(transparent, white); pointer-events: none; }
    .see-more-btn { background: none; border: none; color: var(--primary-color); font-size: 13px; font-weight: 600; cursor: pointer; padding: 4px 0; display: block; }
    .see-more-btn:hover { text-decoration: underline; }
    .post-image { width: 100%; max-height: 500px; object-fit: cover; margin-top: 12px; border-radius: 8px; }

    /* Shared Research Card */
    .shared-research { display: flex; gap: 12px; padding: 12px; margin-top: 12px; background: var(--bg-light); border-radius: 8px; border: 1px solid var(--border-color); text-decoration: none; transition: all 0.3s; }
    .shared-research:hover { border-color: var(--primary-color); text-decoration: none; }
    .shared-research-icon { width: 48px; height: 48px; background: #e8f5e9; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .shared-research-icon i { font-size: 20px; color: var(--primary-color); }
    .shared-research-info { flex: 1; min-width: 0; }
    .shared-research-info h5 { margin: 0 0 4px; font-size: 14px; color: var(--text-color); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .shared-research-info span { font-size: 12px; color: var(--text-muted); }

    /* Link Preview Card (Facebook/Twitter-style) */
    .link-preview-card { display: block; margin-top: 12px; border: 1px solid var(--border-color); border-radius: 8px; overflow: hidden; text-decoration: none; transition: all 0.3s; background: white; }
    .link-preview-card:hover { border-color: var(--primary-color); box-shadow: 0 2px 8px rgba(0,0,0,0.08); text-decoration: none; }
    .link-preview-image { width: 100%; max-height: 280px; object-fit: cover; display: block; background: var(--bg-light); }
    .link-preview-body { padding: 12px 16px; }
    .link-preview-domain { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; display: flex; align-items: center; gap: 4px; }
    .link-preview-domain i { font-size: 10px; }
    .link-preview-title { font-size: 15px; font-weight: 600; color: var(--text-color); line-height: 1.4; margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .link-preview-desc { font-size: 13px; color: var(--text-muted); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

    /* Composer Link Preview */
    .composer-link-preview { margin-top: 12px; border: 1px solid var(--border-color); border-radius: 8px; overflow: hidden; position: relative; display: none; background: white; }
    .composer-link-preview.active { display: block; }
    .composer-link-preview .link-preview-image { max-height: 180px; }
    .composer-link-preview .remove-preview { position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,0.6); color: white; border: none; border-radius: 50%; width: 28px; height: 28px; font-size: 14px; cursor: pointer; z-index: 2; display: flex; align-items: center; justify-content: center; }
    .composer-link-preview .remove-preview:hover { background: rgba(0,0,0,0.8); }
    .composer-link-preview .preview-loading { padding: 20px; text-align: center; color: var(--text-muted); font-size: 13px; }
    .composer-link-preview .preview-loading i { animation: spin 1s linear infinite; margin-right: 6px; }

    /* Post Actions */
    .post-card-actions { display: flex; gap: 4px; padding: 8px 12px; border-top: 1px solid var(--border-color); }
    .post-action-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px; border-radius: 6px; font-size: 13px; color: var(--text-muted); background: none; border: none; cursor: pointer; transition: all 0.3s; text-decoration: none; }
    .post-action-btn:hover { background: var(--bg-light); color: var(--text-color); text-decoration: none; }
    .post-action-btn.liked { color: #e91e63; }
    .post-action-btn.liked i { color: #e91e63; }

    /* Sidebar */
    .sidebar-section { background: white; border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 20px; margin-bottom: 20px; }
    .sidebar-section h4 { margin: 0 0 16px; font-size: 15px; color: var(--text-color); display: flex; align-items: center; gap: 8px; }
    .sidebar-section h4 i { color: var(--primary-color); }

    .suggested-user { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #f5f5f5; }
    .suggested-user:last-child { border-bottom: none; }
    .suggested-user img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
    .suggested-user-info { flex: 1; min-width: 0; }
    .suggested-user-info a { font-size: 13px; font-weight: 500; color: var(--text-color); text-decoration: none; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .suggested-user-info a:hover { color: var(--primary-color); }
    .suggested-user-info span { font-size: 11px; color: var(--text-muted); }
    .follow-btn-sm { padding: 4px 14px; border-radius: 16px; font-size: 12px; border: 1px solid var(--primary-color); background: var(--primary-color); color: white; cursor: pointer; transition: all 0.3s; }
    .follow-btn-sm:hover { background: var(--primary-hover); }
    .follow-btn-sm.following { background: white; color: var(--primary-color); }

    /* Loading */
    .feed-loading { text-align: center; padding: 40px; color: var(--text-muted); }
    .feed-loading i { font-size: 24px; animation: spin 1s linear infinite; }
    @keyframes spin { to { transform: rotate(360deg); } }

    .empty-state { text-align: center; padding: 60px 20px; color: var(--text-muted); }
    .empty-state i { font-size: 48px; color: #ddd; margin-bottom: 16px; display: block; }

    @media (max-width: 991px) {
        .sidebar-col { order: -1; margin-bottom: 16px; }
    }
    @media (max-width: 767px) {
        .post-card-header { padding: 12px 16px 0; }
        .post-card-body { padding: 10px 16px; }
    }

    /* Active Now */
    .active-dot-header { display: inline-block; width: 10px; height: 10px; background: #4caf50; border-radius: 50%; margin-inline-end: 6px; animation: pulse-dot 2s infinite; }
    .active-dot { position: absolute; bottom: 1px; right: 1px; width: 10px; height: 10px; background: #4caf50; border-radius: 50%; border: 2px solid white; }
    .suggested-user-avatar { position: relative; flex-shrink: 0; }
    @keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
    .online-indicator { position: relative; }
    .online-indicator .active-dot { bottom: 0; right: 0; }

    /* Last seen recency labels */
    .last-seen { font-size: 10px; display: flex; align-items: center; gap: 3px; margin-top: 2px; }
    .last-seen .seen-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
    .last-seen.level-online .seen-dot { background: #4caf50; }
    .last-seen.level-online { color: #4caf50; }
    .last-seen.level-today .seen-dot { background: #8bc34a; }
    .last-seen.level-today { color: #689f38; }
    .last-seen.level-week .seen-dot { background: #ff9800; }
    .last-seen.level-week { color: #f57c00; }
    .last-seen.level-month .seen-dot { background: #bdbdbd; }
    .last-seen.level-month { color: #9e9e9e; }
    .last-seen.level-old .seen-dot { background: #e0e0e0; }
    .last-seen.level-old { color: #bdbdbd; }

    /* Dismiss button — pill style like follow btn */
    .suggested-user { position: relative; }
    .dismiss-btn { padding: 4px 12px; border-radius: 16px; font-size: 12px; border: 1px solid #ddd; background: #f5f5f5; color: #999; cursor: pointer; transition: all 0.2s; flex-shrink: 0; }
    .dismiss-btn:hover { background: #ffe0e0; color: #d32f2f; border-color: #d32f2f; }
    .suggested-user-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
    .suggested-user.dismissing { opacity: 0; transform: translateX(20px); transition: all 0.3s; }
    html[dir="rtl"] .suggested-user.dismissing { transform: translateX(-20px); }
</style>
{% endblock %}

{% block body %}
<div class="feed-page">
    <div class="container">
        <div class="row">
            {# Main Feed Column #}
            <div class="col-md-8">
                {% if isAuthenticated %}
                {# Post Composer — only for logged-in users #}
                <div class="composer-card">
                    <div class="composer-top">
                        <img src="{{ currentUser.webPath }}" alt="" class="composer-avatar">
                        <div class="composer-input" onclick="openComposer()">
                            {{ 'social.whats_on_your_mind'|trans }}
                        </div>
                    </div>
                    <div class="composer-actions">
                        <button class="composer-action share-paper" onclick="openComposer('paper')">
                            <i class="fa fa-file-text"></i> {{ 'social.share_paper'|trans }}
                        </button>
                        <button class="composer-action add-image" onclick="openComposer('image')">
                            <i class="fa fa-image"></i> {{ 'social.add_image'|trans }}
                        </button>
                    </div>
                </div>
                {% endif %}

                {# Tabs #}
                <div class="tabs-container">
                    <div class="tabs-nav">
                        {% if isAuthenticated %}
                        <button class="tab-btn {{ activeTab == 'all' ? 'active' : '' }}" data-tab="all">
                            <i class="fa fa-globe"></i> {{ 'social.tab_all'|trans }}
                        </button>
                        <button class="tab-btn {{ activeTab == 'researchers' ? 'active' : '' }}" data-tab="researchers">
                            <i class="fa fa-users"></i> {{ 'social.tab_researchers'|trans }}
                        </button>
                        <button class="tab-btn {{ activeTab == 'spaces' ? 'active' : '' }}" data-tab="spaces">
                            <i class="fa fa-comments"></i> {{ 'social.tab_spaces'|trans }}
                        </button>
                        {% endif %}
                        <button class="tab-btn {{ activeTab == 'discover' ? 'active' : '' }}" data-tab="discover">
                            <i class="fa fa-compass"></i> {{ 'social.tab_discover'|trans }}
                        </button>
                    </div>
                </div>

                {# Feed Items Container #}
                <div id="feed-items"></div>

                {# Loading Indicator #}
                <div id="feed-loading" class="feed-loading" style="display: none;">
                    <i class="fa fa-spinner"></i>
                    <p>{{ 'social.loading'|trans }}</p>
                </div>

                {# Empty State #}
                <div id="feed-empty" class="empty-state" style="display: none;">
                    <i class="fa fa-newspaper-o"></i>
                    <h4>{{ 'social.feed_empty'|trans }}</h4>
                    <p>{{ 'social.feed_empty_hint'|trans }}</p>
                </div>
            </div>

            {# Sidebar #}
            <div class="col-md-4 sidebar-col">
                {# Suggested Researchers #}
                {% if isAuthenticated %}
                <div class="sidebar-section" id="sidebar-suggestions">
                    <h4><i class="fa fa-user-plus"></i> {{ 'social.suggested_researchers'|trans }}</h4>
                    <div id="suggestions-list">
                        <div class="feed-loading"><i class="fa fa-spinner"></i></div>
                    </div>
                </div>

                {# Active Now #}
                <div class="sidebar-section" id="sidebar-active-now" style="display: none;">
                    <h4><span class="active-dot-header"></span> {{ 'social.active_now'|trans }}</h4>
                    <div id="active-now-list"></div>
                </div>
                {% endif %}

                {# Join Community CTA for guests #}
                {% if not isAuthenticated %}
                <div class="sidebar-section" style="text-align: center;">
                    <h4><i class="fa fa-sign-in"></i> {{ 'social.join_community'|trans }}</h4>
                    <p style="font-size: 13px; color: var(--text-muted); margin-bottom: 16px;">{{ 'social.join_community_hint'|trans }}</p>
                    <a href="{{ path('app_login') }}" style="display: inline-block; padding: 10px 28px; background: var(--primary-color); color: white; border-radius: 20px; text-decoration: none; font-weight: 600; font-size: 14px;">{{ 'social.login'|trans }}</a>
                    <a href="{{ path('app_register') }}" style="display: inline-block; padding: 10px 28px; background: white; color: var(--primary-color); border: 2px solid var(--primary-color); border-radius: 20px; text-decoration: none; font-weight: 600; font-size: 14px; margin-top: 8px;">{{ 'social.register'|trans }}</a>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

{# Compose Post Modal — only for authenticated users #}
{% if isAuthenticated %}
<div class="compose-overlay" id="composeOverlay">
    <div class="compose-modal">
        <div class="compose-modal-header">
            <h3>{{ 'social.create_post'|trans }}</h3>
            <button class="compose-modal-close" onclick="closeComposer()">&times;</button>
        </div>
        <div class="compose-modal-body">
            <textarea class="compose-textarea" id="composeContent" placeholder="{{ 'social.whats_on_your_mind'|trans }}" dir="auto"></textarea>

            <div class="compose-visibility">
                <select id="composeVisibility">
                    <option value="public">🌍 {{ 'social.visibility_public'|trans }}</option>
                    <option value="followers">👥 {{ 'social.visibility_followers'|trans }}</option>
                    <option value="private">🔒 {{ 'social.visibility_private'|trans }}</option>
                </select>
            </div>

            <div class="image-preview" id="imagePreview">
                <img id="imagePreviewImg" src="" alt="">
                <button class="remove-image" onclick="removeImage()">&times;</button>
            </div>

            <div class="composer-link-preview" id="composerLinkPreview">
                <button class="remove-preview" onclick="removeLinkPreview()">&times;</button>
                <div class="preview-loading" id="previewLoading">
                    <i class="fa fa-spinner"></i> {{ 'social.fetching_preview'|trans({}, 'Social')|default('Fetching preview...') }}
                </div>
                <div id="previewContent" style="display:none;">
                    <img id="previewImage" class="link-preview-image" src="" alt="" style="display:none;">
                    <div class="link-preview-body">
                        <div class="link-preview-domain" id="previewDomain"></div>
                        <div class="link-preview-title" id="previewTitle"></div>
                        <div class="link-preview-desc" id="previewDesc"></div>
                    </div>
                </div>
            </div>

            <input type="file" id="imageInput" accept="image/*" style="display:none" onchange="previewImage(this)">
        </div>
        <div class="compose-modal-footer">
            <button class="composer-action add-image" onclick="document.getElementById('imageInput').click()">
                <i class="fa fa-image"></i> {{ 'social.add_image'|trans }}
            </button>
            <div style="flex: 1;"></div>
            <button class="btn-cancel" onclick="closeComposer()">{{ 'social.cancel'|trans }}</button>
            <button class="btn-publish" id="publishBtn" onclick="publishPost()" disabled>{{ 'social.publish'|trans }}</button>
        </div>
    </div>
</div>
{% endif %}

{# Edit Post Modal #}
{% if isAuthenticated %}
<div class="edit-overlay" id="editPostOverlay" data-slug="">
    <div class="edit-modal">
        <div class="edit-modal-header">
            <h4>{{ 'social.edit_post'|trans }}</h4>
            <button class="edit-modal-close" onclick="closeEditPost()">&times;</button>
        </div>
        <div class="edit-modal-body">
            <textarea id="editPostContent" placeholder="{{ 'social.whats_on_your_mind'|trans }}"></textarea>
        </div>
        <div class="edit-modal-footer">
            <button class="edit-cancel-btn" onclick="closeEditPost()">{{ 'social.cancel'|trans }}</button>
            <button class="edit-save-btn" id="editSaveBtn" onclick="saveEditPost()">{{ 'social.save'|trans }}</button>
        </div>
    </div>
</div>
{% endif %}
{% endblock %}

{% block javascripts %}
{{ parent() }}
<script>
(function() {
    var currentTab = '{{ activeTab }}';
    var feedPage = 1;
    var isLoading = false;
    var hasMore = true;

    // ========== Tab Switching ==========
    document.querySelectorAll('.tab-btn').forEach(function(btn) {
        btn.addEventListener('click', function() {
            document.querySelectorAll('.tab-btn').forEach(function(b) { b.classList.remove('active'); });
            this.classList.add('active');
            currentTab = this.getAttribute('data-tab');
            feedPage = 1;
            hasMore = true;
            document.getElementById('feed-items').innerHTML = '';
            loadFeed();
            // Update URL without reload
            history.replaceState(null, '', '/feed?tab=' + currentTab);
        });
    });

    // ========== Feed Loading ==========
    function loadFeed() {
        if (isLoading || !hasMore) return;
        isLoading = true;
        document.getElementById('feed-loading').style.display = 'block';
        document.getElementById('feed-empty').style.display = 'none';

        fetch('/api/feed?tab=' + currentTab + '&page=' + feedPage, {
            headers: { 'X-Requested-With': 'XMLHttpRequest' }
        })
        .then(function(r) { return r.json(); })
        .then(function(data) {
            isLoading = false;
            document.getElementById('feed-loading').style.display = 'none';

            if (data.items && data.items.length > 0) {
                data.items.forEach(function(item) {
                    document.getElementById('feed-items').insertAdjacentHTML('beforeend', renderFeedItem(item));
                });
                applyTruncation();
                feedPage++;
                hasMore = data.hasMore;
            } else if (feedPage === 1) {
                document.getElementById('feed-empty').style.display = 'block';
            }
        })
        .catch(function(err) {
            isLoading = false;
            document.getElementById('feed-loading').style.display = 'none';
            console.error('Feed error:', err);
        });
    }

    function renderFeedItem(item) {
        var authorImg = getAvatarUrl(item.author ? item.author.image : '');
        var authorName = item.author ? (item.author.firstName + ' ' + item.author.lastName) : '';
        var authorUrl = item.author ? ('/users/' + item.author.username) : '#';
        var timeAgo = item.createdAt ? moment(item.createdAt).fromNow() : '';

        var badge = '';
        if (item.type === 'paper_share') {
            badge = '<span class="post-card-badge paper-share"><i class="fa fa-file-text"></i> {{ "social.paper_shared"|trans }}</span>';
        } else if (item.type === 'space_post') {
            badge = '<span class="post-card-badge space-post"><i class="fa fa-comments"></i> ' + (item.space ? item.space.title : '') + '</span>';
        }

        var pinBadge = '';
        if (item.post && item.post.isPinned) {
            pinBadge = '<span class="post-card-badge pinned"><i class="fa fa-thumb-tack"></i></span>';
        }

        var content = '';
        if (item.type === 'space_post') {
            content = '<strong>' + escapeHtml(item.post.title || '') + '</strong><br>' + escapeHtml(item.post.content || '');
        } else if (item.post && item.post.content && item.post.content.indexOf('<div class="research-chat-post">') === 0) {
            // Research chat posts already contain safe HTML - render as-is
            content = item.post.content;
        } else {
            content = escapeHtml(item.post ? (item.post.content || item.post.contentPreview || '') : '');
        }

        var sharedResearchHtml = '';
        if (item.sharedResearch) {
            var resTitle = item.sharedResearch.arabicTitle || item.sharedResearch.englishTitle || '';
            var resSlug = item.sharedResearch.slug || '';
            var resAbstract = item.sharedResearch.abstract || '';
            var resLink = resSlug ? '/show/' + resSlug : '#';
            var abstractHtml = resAbstract ? '<p style="margin:4px 0 0;font-size:12px;color:var(--text-muted);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;">' + escapeHtml(resAbstract) + '</p>' : '';
            sharedResearchHtml = '<a href="' + resLink + '" class="shared-research">' +
                '<div class="shared-research-icon"><i class="fa fa-file-text-o"></i></div>' +
                '<div class="shared-research-info"><h5>' + escapeHtml(resTitle) + '</h5>' +
                abstractHtml +
                '<span><i class="fa fa-book"></i> {{ "social.research"|trans }}</span></div></a>';
        } else if (item.linkPreview) {
            // Rich link preview card (Facebook/Twitter style)
            var lp = item.linkPreview;
            var lpImageHtml = lp.image ? '<img src="' + escapeHtml(lp.image) + '" class="link-preview-image" alt="" onerror="this.style.display=\'none\'">' : '';
            var lpDomain = lp.domain ? '<div class="link-preview-domain"><i class="fa fa-globe"></i> ' + escapeHtml(lp.domain) + '</div>' : '';
            var lpTitle = lp.title ? '<div class="link-preview-title">' + escapeHtml(lp.title) + '</div>' : '';
            var lpDesc = lp.description ? '<div class="link-preview-desc">' + escapeHtml(lp.description) + '</div>' : '';
            sharedResearchHtml = '<a href="' + escapeHtml(lp.url || item.post.sharedUrl) + '" target="_blank" rel="noopener" class="link-preview-card">' +
                lpImageHtml +
                '<div class="link-preview-body">' + lpDomain + lpTitle + lpDesc + '</div></a>';
        } else if (item.post && item.post.sharedUrl) {
            sharedResearchHtml = '<a href="' + escapeHtml(item.post.sharedUrl) + '" target="_blank" rel="noopener" class="shared-research">' +
                '<div class="shared-research-icon"><i class="fa fa-file-text-o"></i></div>' +
                '<div class="shared-research-info"><h5>' + escapeHtml(item.post.sharedUrl.replace(/^https?:\/\/[^\/]+/, '')) + '</h5>' +
                '<span><i class="fa fa-link"></i> {{ "social.shared_link"|trans({}, "Social")|default("Shared link") }}</span></div></a>';
        }

        var imageHtml = '';
        if (item.post && item.post.image) {
            imageHtml = '<img src="/uploads/posts/' + item.post.image + '" class="post-image" alt="">';
        }

        var postUrl = '#';
        if (item.type === 'space_post' && item.postUrl) {
            postUrl = item.postUrl;
        } else if (item.post && item.post.slug) {
            postUrl = '/post/' + item.post.slug;
        }

        var likeCount = (item.post && item.post.likesCount) ? item.post.likesCount : 0;
        var likedByMe = (item.post && item.post.likedByMe) ? true : false;
        var commentCount = (item.post && item.post.commentsCount) ? item.post.commentsCount : 0;

        var menuHtml = '';
        if (item.isOwner && item.post && item.post.slug) {
            menuHtml = '<div class="post-menu">' +
                '<button class="post-menu-btn" onclick="togglePostMenu(event, this)"><i class="fa fa-ellipsis-h"></i></button>' +
                '<div class="post-menu-dropdown">' +
                    '<button onclick="openEditPost(\'' + item.post.slug + '\', this)"><i class="fa fa-pencil"></i> {{ "social.edit_post"|trans }}</button>' +
                    '<button class="menu-delete" onclick="deletePost(\'' + item.post.slug + '\', this)"><i class="fa fa-trash"></i> {{ "social.delete_post"|trans }}</button>' +
                '</div>' +
            '</div>';
        }

        return '<div class="post-card" data-slug="' + (item.post ? item.post.slug : '') + '">' +
            '<div class="post-card-header">' +
                '<img src="' + authorImg + '" class="post-author-avatar" alt="">' +
                '<div class="post-author-info">' +
                    '<a href="' + authorUrl + '">' + escapeHtml(authorName) + '</a>' +
                    '<div class="post-time">' + timeAgo + '</div>' +
                '</div>' +
                pinBadge + badge + menuHtml +
            '</div>' +
            '<div class="post-card-body">' +
                '<div class="post-content">' + nl2br(content) + '</div>' +
                '<button class="see-more-btn" style="display:none" onclick="toggleSeeMore(this)">{{ "social.see_more"|trans }}</button>' +
                imageHtml +
                sharedResearchHtml +
            '</div>' +
            '<div class="post-card-actions">' +
                (item.type !== 'space_post' ? '<button class="post-action-btn' + (likedByMe ? ' liked' : '') + '" onclick="toggleLikePost(\'' + (item.post ? item.post.slug : '') + '\', this)">' +
                    '<i class="fa ' + (likedByMe ? 'fa-heart' : 'fa-heart-o') + '"></i> <span>' + likeCount + '</span></button>' : '') +
                '<a href="' + postUrl + '" class="post-action-btn">' +
                    '<i class="fa fa-comment-o"></i> <span>' + commentCount + '</span></a>' +
                '<button class="post-action-btn" onclick="sharePost(\'' + postUrl + '\')">' +
                    '<i class="fa fa-share"></i></button>' +
            '</div>' +
        '</div>';
    }

    // ========== Infinite Scroll ==========
    window.addEventListener('scroll', function() {
        if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight - 500) {
            loadFeed();
        }
    });

    // ========== Suggested Researchers ==========
    function loadSuggestions() {
        fetch('/api/suggested-researchers', { headers: { 'X-Requested-With': 'XMLHttpRequest' } })
            .then(function(r) { return r.json(); })
            .then(function(data) {
                var container = document.getElementById('suggestions-list');
                if (!data.suggestions || data.suggestions.length === 0) {
                    container.innerHTML = '<p style="font-size: 13px; color: var(--text-muted);">{{ "social.no_suggestions"|trans }}</p>';
                    return;
                }
                var html = '';
                data.suggestions.forEach(function(u) {
                    var img = getAvatarUrl(u.image);
                    var seenHtml = getLastSeenHtml(u);
                    html += '<div class="suggested-user" id="suggestion-' + u.id + '">' +
                        '<div class="suggested-user-avatar">' +
                            '<img src="' + img + '" alt="" style="width:36px;height:36px;border-radius:50%;object-fit:cover;">' +
                            (u.isOnline ? '<span class="active-dot"></span>' : '') +
                        '</div>' +
                        '<div class="suggested-user-info">' +
                            '<a href="' + u.profileUrl + '">' + escapeHtml(u.firstName + ' ' + u.lastName) + '</a>' +
                            (u.studyField ? '<span>' + escapeHtml(u.studyField) + '</span>' : '') +
                            seenHtml +
                        '</div>' +
                        '<div class="suggested-user-actions">' +
                            '<button class="follow-btn-sm" data-user-id="' + u.id + '" onclick="toggleFollowSidebar(this)">' +
                                '{{ "social.follow"|trans }}' +
                            '</button>' +
                            '<button class="dismiss-btn" onclick="dismissSuggestion(' + u.id + ')" title="{{ "social.dismiss"|trans }}">&times;</button>' +
                        '</div>' +
                    '</div>';
                });
                container.innerHTML = html;
            })
            .catch(function() {
                document.getElementById('suggestions-list').innerHTML = '';
            });
    }

    // ========== Active Now ==========
    function loadActiveNow() {
        fetch('/api/active-researchers', { headers: { 'X-Requested-With': 'XMLHttpRequest' } })
            .then(function(r) { return r.json(); })
            .then(function(data) {
                var section = document.getElementById('sidebar-active-now');
                var container = document.getElementById('active-now-list');
                if (!data.active || data.active.length === 0) {
                    section.style.display = 'none';
                    return;
                }
                section.style.display = 'block';
                var html = '';
                data.active.forEach(function(u) {
                    var img = getAvatarUrl(u.image);
                    html += '<div class="suggested-user">' +
                        '<div class="suggested-user-avatar">' +
                            '<img src="' + img + '" alt="" style="width:36px;height:36px;border-radius:50%;object-fit:cover;">' +
                            '<span class="active-dot"></span>' +
                        '</div>' +
                        '<div class="suggested-user-info">' +
                            '<a href="' + u.profileUrl + '">' + escapeHtml(u.firstName + ' ' + u.lastName) + '</a>' +
                            (u.studyField ? '<span>' + escapeHtml(u.studyField) + '</span>' : '') +
                        '</div>' +
                        '<button class="follow-btn-sm" data-user-id="' + u.id + '" onclick="toggleFollowSidebar(this)">' +
                            '{{ "social.follow"|trans }}' +
                        '</button>' +
                    '</div>';
                });
                container.innerHTML = html;
            })
            .catch(function() {
                var section = document.getElementById('sidebar-active-now');
                if (section) section.style.display = 'none';
            });
    }

    var isAuthenticated = {{ isAuthenticated ? 'true' : 'false' }};

    // ========== Init ==========
    loadFeed();
    if (isAuthenticated) {
        loadSuggestions();
        loadActiveNow();
        // Refresh active-now every 60 seconds
        setInterval(loadActiveNow, 60000);
    }

    // ========== Helpers ==========
    var lastSeenLabels = {
        'active_today': '{{ "social.active_today"|trans }}',
        'active_this_week': '{{ "social.active_this_week"|trans }}',
        'active_this_month': '{{ "social.active_this_month"|trans }}',
        'active_a_while_ago': '{{ "social.active_a_while_ago"|trans }}',
        'active_long_ago': '{{ "social.active_long_ago"|trans }}'
    };

    function getLastSeenHtml(u) {
        if (u.isOnline) return ''; // green dot already shown
        if (!u.lastSeenLabel || !u.lastSeenLevel) return '';
        var label = lastSeenLabels[u.lastSeenLabel] || '';
        if (!label) return '';
        return '<div class="last-seen level-' + u.lastSeenLevel + '">' +
            '<span class="seen-dot"></span>' + escapeHtml(label) +
        '</div>';
    }

    window.dismissSuggestion = function(userId) {
        var card = document.getElementById('suggestion-' + userId);
        if (card) {
            card.classList.add('dismissing');
        }
        fetch('/api/dismiss-suggestion/' + userId, {
            method: 'POST',
            headers: { 'X-Requested-With': 'XMLHttpRequest' }
        }).then(function() {
            setTimeout(function() {
                if (card) card.remove();
                // Reload suggestions to fill the gap
                loadSuggestions();
            }, 300);
        });
    }

    function getAvatarUrl(image) {
        if (!image || image.indexOf('default_profile_pic') === 0) {
            return '/bundles/user/img/' + (image || 'default_profile_pic_m.png');
        }
        return '/uploads/profile/img/' + image;
    }

    function applyTruncation() {
        var contents = document.querySelectorAll('.post-content:not([data-truncation-checked])');
        contents.forEach(function(el) {
            el.setAttribute('data-truncation-checked', '1');
            if (el.scrollHeight > 220) {
                el.classList.add('truncated');
                var btn = el.parentElement.querySelector('.see-more-btn');
                if (btn) btn.style.display = 'block';
            }
        });
    }

    window.toggleSeeMore = function(btn) {
        var content = btn.previousElementSibling;
        if (content.classList.contains('truncated')) {
            content.classList.remove('truncated');
            btn.textContent = '{{ "social.see_less"|trans }}';
        } else {
            content.classList.add('truncated');
            btn.textContent = '{{ "social.see_more"|trans }}';
        }
    };

    function escapeHtml(text) {
        if (!text) return '';
        var div = document.createElement('div');
        div.appendChild(document.createTextNode(text));
        return div.innerHTML;
    }

    function nl2br(str) {
        if (!str) return '';
        return str.replace(/\n/g, '<br>');
    }

    // ========== Expose globals ==========
    window.toggleLikePost = function(slug, btn) {
        if (!slug) return;
        fetch('/api/profile-post/' + slug + '/like', {
            method: 'POST',
            headers: { 'X-Requested-With': 'XMLHttpRequest' }
        })
        .then(function(r) { return r.json(); })
        .then(function(data) {
            var icon = btn.querySelector('i');
            var span = btn.querySelector('span');
            if (data.status === 'liked') {
                btn.classList.add('liked');
                icon.className = 'fa fa-heart';
            } else {
                btn.classList.remove('liked');
                icon.className = 'fa fa-heart-o';
            }
            span.textContent = data.likesCount;
        });
    };

    window.toggleFollowSidebar = function(btn) {
        var userId = btn.getAttribute('data-user-id');
        var isFollowing = btn.classList.contains('following');
        var url = isFollowing ? '/api/unfollow/' + userId : '/api/follow/' + userId;

        fetch(url, { method: 'POST', headers: { 'X-Requested-With': 'XMLHttpRequest' } })
            .then(function(r) { return r.json(); })
            .then(function(data) {
                if (data.status === 'followed') {
                    btn.classList.add('following');
                    btn.textContent = '{{ "social.following"|trans }}';
                } else {
                    btn.classList.remove('following');
                    btn.textContent = '{{ "social.follow"|trans }}';
                }
            });
    };

    // ========== Post Menu ==========
    window.togglePostMenu = function(event, btn) {
        event.stopPropagation();
        var dropdown = btn.nextElementSibling;
        // Close all other open menus
        document.querySelectorAll('.post-menu-dropdown.show').forEach(function(el) {
            if (el !== dropdown) el.classList.remove('show');
        });
        dropdown.classList.toggle('show');
    };

    // Close menus when clicking elsewhere
    document.addEventListener('click', function() {
        document.querySelectorAll('.post-menu-dropdown.show').forEach(function(el) {
            el.classList.remove('show');
        });
    });

    window.openEditPost = function(slug, btn) {
        // Close menu
        var menu = btn.closest('.post-menu-dropdown');
        if (menu) menu.classList.remove('show');

        // Get current content from the post card
        var card = btn.closest('.post-card');
        var contentEl = card ? card.querySelector('.post-content') : null;
        var currentContent = contentEl ? contentEl.textContent.trim() : '';

        // Show edit modal
        var overlay = document.getElementById('editPostOverlay');
        var textarea = document.getElementById('editPostContent');
        overlay.setAttribute('data-slug', slug);
        textarea.value = currentContent;
        overlay.classList.add('active');
        textarea.focus();
    };

    window.closeEditPost = function() {
        document.getElementById('editPostOverlay').classList.remove('active');
    };

    window.saveEditPost = function() {
        var overlay = document.getElementById('editPostOverlay');
        var slug = overlay.getAttribute('data-slug');
        var content = document.getElementById('editPostContent').value.trim();
        if (!content) return;

        var saveBtn = document.getElementById('editSaveBtn');
        saveBtn.disabled = true;
        saveBtn.textContent = '{{ "social.publishing"|trans }}';

        var formData = new FormData();
        formData.append('content', content);

        fetch('/api/profile-post/' + slug, {
            method: 'POST',
            headers: { 'X-Requested-With': 'XMLHttpRequest' },
            body: formData
        })
        .then(function(r) { return r.json(); })
        .then(function(data) {
            if (data.status === 'updated') {
                // Update the card content inline
                var card = document.querySelector('.post-card[data-slug="' + slug + '"]');
                if (card) {
                    var contentEl = card.querySelector('.post-content');
                    if (contentEl) contentEl.innerHTML = nl2br(escapeHtml(content));
                }
                closeEditPost();
            } else {
                alert(data.error || '{{ "social.error_occurred"|trans }}');
            }
            saveBtn.disabled = false;
            saveBtn.textContent = '{{ "social.save"|trans }}';
        })
        .catch(function() {
            alert('{{ "social.error_occurred"|trans }}');
            saveBtn.disabled = false;
            saveBtn.textContent = '{{ "social.save"|trans }}';
        });
    };

    window.deletePost = function(slug, btn) {
        // Close menu
        var menu = btn.closest('.post-menu-dropdown');
        if (menu) menu.classList.remove('show');

        if (!confirm('{{ "social.confirm_delete"|trans }}')) return;

        fetch('/api/profile-post/' + slug + '/delete', {
            method: 'POST',
            headers: { 'X-Requested-With': 'XMLHttpRequest' }
        })
        .then(function(r) { return r.json(); })
        .then(function(data) {
            if (data.status === 'deleted') {
                var card = document.querySelector('.post-card[data-slug="' + slug + '"]');
                if (card) {
                    card.style.transition = 'opacity 0.3s, transform 0.3s';
                    card.style.opacity = '0';
                    card.style.transform = 'scale(0.95)';
                    setTimeout(function() { card.remove(); }, 300);
                }
            } else {
                alert(data.error || '{{ "social.error_occurred"|trans }}');
            }
        })
        .catch(function() {
            alert('{{ "social.error_occurred"|trans }}');
        });
    };

    window.sharePost = function(url) {
        if (navigator.share) {
            navigator.share({ url: window.location.origin + url });
        } else {
            var temp = document.createElement('input');
            document.body.appendChild(temp);
            temp.value = window.location.origin + url;
            temp.select();
            document.execCommand('copy');
            document.body.removeChild(temp);
            alert('{{ "social.link_copied"|trans }}');
        }
    };
})();

// ========== Composer Modal (auth only) ==========
{% if isAuthenticated %}
function openComposer(mode) {
    linkPreviewRemoved = false;
    document.getElementById('composeOverlay').classList.add('active');
    document.getElementById('composeContent').focus();
    if (mode === 'image') {
        document.getElementById('imageInput').click();
    }
}

function closeComposer() {
    document.getElementById('composeOverlay').classList.remove('active');
    document.getElementById('composeContent').value = '';
    removeImage();
    removeLinkPreview();
}

// ========== Link Preview in Composer ==========
var linkPreviewData = null;
var linkPreviewTimer = null;
var lastDetectedUrl = null;
var linkPreviewRemoved = false;

function detectUrlInText(text) {
    // Match http(s):// URLs
    var match = text.match(/(https?:\/\/[^\s<>")\]]+)/i);
    if (match) return match[1];
    // Match www. URLs
    match = text.match(/(www\.[^\s<>")\]]+\.[a-z]{2,})/i);
    if (match) return 'https://' + match[1];
    return null;
}

function fetchLinkPreview(url) {
    if (linkPreviewRemoved) return;
    var container = document.getElementById('composerLinkPreview');
    var loading = document.getElementById('previewLoading');
    var content = document.getElementById('previewContent');

    container.classList.add('active');
    loading.style.display = 'block';
    content.style.display = 'none';

    fetch('/api/link-preview?url=' + encodeURIComponent(url), {
        headers: { 'X-Requested-With': 'XMLHttpRequest' }
    })
    .then(function(r) { return r.json(); })
    .then(function(data) {
        if (data.error || linkPreviewRemoved) {
            container.classList.remove('active');
            return;
        }
        linkPreviewData = data;
        loading.style.display = 'none';
        content.style.display = 'block';

        var imgEl = document.getElementById('previewImage');
        if (data.image) {
            imgEl.src = data.image;
            imgEl.style.display = 'block';
            imgEl.onerror = function() { this.style.display = 'none'; };
        } else {
            imgEl.style.display = 'none';
        }
        document.getElementById('previewDomain').innerHTML = data.domain ? '<i class="fa fa-globe"></i> ' + escapeHtml(data.domain) : '';
        document.getElementById('previewTitle').textContent = data.title || '';
        document.getElementById('previewDesc').textContent = data.description || '';

        checkPublishBtn();
    })
    .catch(function() {
        container.classList.remove('active');
    });
}

function removeLinkPreview() {
    linkPreviewData = null;
    lastDetectedUrl = null;
    linkPreviewRemoved = true;
    var container = document.getElementById('composerLinkPreview');
    container.classList.remove('active');
    document.getElementById('previewLoading').style.display = 'none';
    document.getElementById('previewContent').style.display = 'none';
    document.getElementById('previewImage').src = '';
    document.getElementById('previewTitle').textContent = '';
    document.getElementById('previewDesc').textContent = '';
    document.getElementById('previewDomain').textContent = '';
}
window.removeLinkPreview = removeLinkPreview;

function onComposeInput() {
    checkPublishBtn();
    var text = document.getElementById('composeContent').value;
    var url = detectUrlInText(text);
    if (url && url !== lastDetectedUrl && !linkPreviewRemoved) {
        lastDetectedUrl = url;
        clearTimeout(linkPreviewTimer);
        linkPreviewTimer = setTimeout(function() { fetchLinkPreview(url); }, 600);
    } else if (!url) {
        lastDetectedUrl = null;
        // Don't auto-remove if user already has a preview showing
    }
}

function previewImage(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function(e) {
            document.getElementById('imagePreviewImg').src = e.target.result;
            document.getElementById('imagePreview').style.display = 'block';
        };
        reader.readAsDataURL(input.files[0]);
    }
    checkPublishBtn();
}

function removeImage() {
    document.getElementById('imageInput').value = '';
    document.getElementById('imagePreview').style.display = 'none';
    document.getElementById('imagePreviewImg').src = '';
    checkPublishBtn();
}

document.getElementById('composeContent').addEventListener('input', onComposeInput);
document.getElementById('composeContent').addEventListener('paste', function() {
    // Delay to let paste content appear in the textarea
    setTimeout(onComposeInput, 100);
});

function checkPublishBtn() {
    var content = document.getElementById('composeContent').value.trim();
    var hasImage = document.getElementById('imageInput').files.length > 0;
    document.getElementById('publishBtn').disabled = !(content || hasImage);
}

function publishPost() {
    var content = document.getElementById('composeContent').value.trim();
    var visibility = document.getElementById('composeVisibility').value;
    var imageInput = document.getElementById('imageInput');

    var formData = new FormData();
    formData.append('content', content);
    formData.append('visibility', visibility);
    if (imageInput.files.length > 0) {
        formData.append('image', imageInput.files[0]);
    }

    // Include link preview data if available
    if (linkPreviewData && linkPreviewData.url) {
        formData.append('sharedUrl', linkPreviewData.url);
        if (linkPreviewData.title) formData.append('linkPreviewTitle', linkPreviewData.title);
        if (linkPreviewData.description) formData.append('linkPreviewDescription', linkPreviewData.description);
        if (linkPreviewData.image) formData.append('linkPreviewImage', linkPreviewData.image);
        if (linkPreviewData.domain) formData.append('linkPreviewDomain', linkPreviewData.domain);
    }

    document.getElementById('publishBtn').disabled = true;
    document.getElementById('publishBtn').textContent = '{{ "social.publishing"|trans }}';

    fetch('/api/profile-post', {
        method: 'POST',
        headers: { 'X-Requested-With': 'XMLHttpRequest' },
        body: formData
    })
    .then(function(r) { return r.json(); })
    .then(function(data) {
        if (data.status === 'created' || data.slug || (data.post && data.post.slug)) {
            closeComposer();
            // Reload feed
            document.getElementById('feed-items').innerHTML = '';
            window.location.reload();
        } else {
            alert(data.error || '{{ "social.error_occurred"|trans }}');
        }
        document.getElementById('publishBtn').disabled = false;
        document.getElementById('publishBtn').textContent = '{{ "social.publish"|trans }}';
    })
    .catch(function(err) {
        alert('{{ "social.error_occurred"|trans }}');
        document.getElementById('publishBtn').disabled = false;
        document.getElementById('publishBtn').textContent = '{{ "social.publish"|trans }}';
    });
}
{% endif %}
</script>
{% endblock %}