{% extends "base.html" %}
{% from "_custom_select.html" import custom_select %}

{% block title %}Feed - {{ brand_name }}{% endblock %}

{% block header_actions %}
{# New post uses the shared + button (new-btn) - left of notif, opens create-post-modal on feed #}
{% endblock %}

{% block main_content %}
<style>
@keyframes reaction-pop {
    0% { transform: scale(1); }
    40% { transform: scale(1.35); }
    70% { transform: scale(0.95); }
    100% { transform: scale(1); }
}
@keyframes reaction-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-2px); }
    75% { transform: translateX(2px); }
}
.reaction-add-anim {
    animation: reaction-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.reaction-remove-anim {
    animation: reaction-shake 0.3s ease-out forwards;
}
</style>
<div class="page-header-glass flex-shrink-0">
    <div class="flex items-center">
        <div class="p-2.5 bg-blue-500/10 rounded-xl border border-blue-500/20 mr-4 shadow-sm">
            <i data-lucide="layout-grid" class="h-6 w-6 text-blue-400"></i>
        </div>
        <h2 class="text-3xl font-bold text-white">Feed</h2>
    </div>
    <p class="mt-2 text-zinc-500 text-sm ml-14">Activity from people and trending.</p>
</div>
{% if feed_initial_state %}
<script type="application/json" id="feed-initial-state">{{ feed_initial_state | tojson }}</script>
{% endif %}

{# Search Info Bar #}
<div id="feed-search-info-bar"
    class="px-6 py-3 flex items-center justify-between border-b border-zinc-800/80 flex-shrink-0 text-sm hidden bg-zinc-900">
    <span class="text-zinc-400">Search results for "<strong><span id="feed-search-query-display" class="text-white"></span></strong>"</span>
    <a href="/home/feed" data-spa-link id="feed-clear-search-btn" class="text-zinc-400 hover:text-white font-semibold transition-colors">Clear</a>
</div>

<div id="feed-container" class="flex-1 overflow-y-auto p-6 lg:p-8">
    <div id="feed-items" class="space-y-6 hidden">
        {# Populated by JS #}
    </div>
    <div id="feed-empty" class="text-center py-16 text-zinc-600 hidden">
        <i data-lucide="inbox" class="h-16 w-16 mx-auto"></i>
        <p class="mt-4 text-lg">No activity yet</p>
        <p class="text-sm">Follow users and create posts to see them here.</p>
    </div>
    {# Search results (users + repos) - shown when search param present #}
    <div id="feed-search-results" class="hidden space-y-8">
        <div id="feed-search-users" class="hidden">
            <h3 class="text-lg font-bold text-white mb-4 flex items-center gap-2">
                <i data-lucide="user" class="h-5 w-5 text-blue-400"></i>
                Users
            </h3>
            <div id="feed-search-users-grid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4"></div>
        </div>
        <div id="feed-search-repos" class="hidden">
            <h3 class="text-lg font-bold text-white mb-4 flex items-center gap-2">
                <i data-lucide="folder-git" class="h-5 w-5 text-blue-400"></i>
                Repositories
            </h3>
            <div id="feed-search-repos-grid" class="grid grid-cols-1 gap-6"></div>
        </div>
        <div id="feed-search-no-results" class="hidden text-center py-16 text-zinc-600">
            <i data-lucide="search-x" class="h-16 w-16 mx-auto"></i>
            <p class="mt-4 text-lg">No users or repositories found</p>
        </div>
    </div>
</div>

<div id="feed-pagination" class="app-pagination-bar mt-8 border-t border-white/5 pt-5 pb-3 px-4 lg:px-8 hidden">
    <div class="mx-auto max-w-5xl w-full grid grid-cols-1 md:grid-cols-3 gap-4 md:gap-6 items-center">
        <div class="flex justify-center md:justify-start order-1 md:order-1 min-w-0">
            <p class="text-[10px] font-black uppercase tracking-widest text-zinc-500 text-center md:text-left leading-relaxed">
                Total <span id="feed-total-count" class="text-zinc-300 tabular-nums">0</span>
                <span class="font-semibold normal-case text-zinc-400"> items</span>
            </p>
        </div>
        <div class="flex justify-center order-2 md:order-2">
            <div id="feed-pagination-controls"
                class="inline-flex items-center flex-wrap justify-center gap-1.5 p-1 bg-white/5 rounded-xl border border-white/5 shadow-sm min-h-[2.75rem]">
            </div>
        </div>
        <div class="flex justify-center md:justify-end order-3 md:order-3 min-w-0">
            {{ custom_select(id="feed-per-page", options=[
                {"value": "5", "label": "5"},
                {"value": "10", "label": "10"},
                {"value": "25", "label": "25"},
                {"value": "50", "label": "50"}
            ], selected_value=(feed_per_page|string), selected_label=(feed_per_page|string), mode="form", picker_title="Items per page", show_chevron=false, compact=true) }}
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
(function initFeedPage() {
const EMOJIS = ['👍', '👀', '❤️', '🔥', '🎉'];
const currentUsername = '{{ g.user["username"] if g.user else "" }}';
const isAdmin = {{ "true" if (g.user and g.user["is_admin"]) else "false" }};

function getSearchFromUrl() {
    const params = new URLSearchParams(window.location.search);
    return params.get('search') || '';
}

async function loadFeed(page = 1, perPage = 10) {
    const searchQuery = getSearchFromUrl();
    let url = `/api/home/feed?page=${page}&per_page=${perPage}`;
    if (searchQuery) url += `&search=${encodeURIComponent(searchQuery)}`;
    try {
        const r = await fetch(url);
        const data = await r.json();
        if (!data || !data.success) return null;
        return data;
    } catch (e) {
        return null;
    }
}

function readFeedInitialState() {
    const el = document.getElementById('feed-initial-state');
    if (!el) return null;
    const raw = (el.textContent || '').trim();
    if (!raw) return null;
    try {
        return JSON.parse(raw);
    } catch (e) {
        return null;
    }
}

function scrollFeedToTop() {
    const container = document.getElementById('feed-container');
    const mainArea = document.getElementById('dynamic-content-area');
    if (container) container.scrollTop = 0;
    if (mainArea) mainArea.scrollTop = 0;
}

function formatTime(iso) {
    if (!iso) return '';
    let dateStr = typeof iso === 'string' ? iso : (iso.toISOString ? iso.toISOString() : String(iso));
    if (dateStr && !dateStr.endsWith('Z') && dateStr.indexOf('+') === -1 && dateStr.indexOf('-', 10) === -1) {
        dateStr = dateStr.replace(' ', 'T') + 'Z';
    }
    const d = new Date(dateStr);
    if (isNaN(d.getTime())) return '';
    const now = new Date();
    const diff = (now - d) / 1000;
    if (diff < 60) return 'just now';
    if (diff < 3600) return Math.floor(diff / 60) + 'm ago';
    if (diff < 86400) return Math.floor(diff / 3600) + 'h ago';
    if (diff < 604800) return Math.floor(diff / 86400) + 'd ago';
    return d.toLocaleDateString();
}

function eventLabel(et) {
    const labels = {
        star_your_repo: 'starred your repo',
        fork_your_repo: 'forked your repo',
        create_issue_on_your_repo: 'opened an issue on your repo',
        create_pr_on_your_repo: 'opened a pull request on your repo',
        pr_merged: 'merged your pull request',
        pr_closed: 'closed your pull request',
        create_repo: 'created a repo',
        fork_repo: 'forked a repo',
        star_repo: 'starred a repo',
        commit: 'committed',
        contribute: 'contributed to',
        follow_you: 'started following you'
    };
    return labels[et] || et;
}

function renderReactions(item, targetType) {
    const reacts = item.reactions || [];
    return EMOJIS.map(emoji => {
        const r = reacts.find(x => x.emoji === emoji);
        const cnt = r ? r.count : 0;
        const reacted = r ? r.reacted : false;
        return `<button type="button" class="reaction-btn px-2.5 py-1.5 rounded-xl text-sm transition-all duration-200 ${reacted ? 'bg-blue-500/20 text-blue-400 ring-1 ring-blue-500/30' : 'hover:bg-white/5 text-zinc-500'}"
            data-target-type="${targetType}" data-target-id="${item.id}" data-emoji="${emoji}">${emoji}<span class="reaction-count ml-1">${cnt > 0 ? cnt : ''}</span></button>`;
    }).join('');
}

function updateReactionsUI(container, reactions, options = {}) {
    if (!container || !reactions) return;
    const countsOnly = options.countsOnly || false;  // broadcast updates: only change counts, preserve local "reacted" state
    const targetType = container.dataset.targetType;
    const targetId = container.dataset.targetId;
    EMOJIS.forEach(emoji => {
        const btn = container.querySelector(`.reaction-btn[data-emoji="${emoji}"]`);
        if (!btn) return;
        const r = reactions.find(x => x.emoji === emoji);
        const cnt = r ? r.count : 0;
        const reacted = countsOnly ? btn.classList.contains('bg-blue-500/20') : (r ? r.reacted : false);
        const countEl = btn.querySelector('.reaction-count');
        if (countEl) countEl.textContent = cnt > 0 ? cnt : '';
        btn.classList.toggle('bg-blue-500/20', reacted);
        btn.classList.toggle('text-blue-400', reacted);
        btn.classList.toggle('ring-1', reacted);
        btn.classList.toggle('ring-blue-500/30', reacted);
        btn.classList.toggle('text-zinc-500', !reacted);
    });
}

function playReactionAnimation(btn, added) {
    btn.classList.add(added ? 'reaction-add-anim' : 'reaction-remove-anim');
    const handler = () => {
        btn.classList.remove('reaction-add-anim', 'reaction-remove-anim');
        btn.removeEventListener('animationend', handler);
    };
    btn.addEventListener('animationend', handler);
}

function renderFeedItem(item) {
    if (item.type === 'post') {
        return `
        <div class="feed-post glass-panel rounded-3xl p-6" data-id="${item.id}" data-type="post">
            <div class="flex items-start justify-between gap-4">
                <div class="flex items-center gap-3">
                    <a href="/user/${item.author_username}" class="flex-shrink-0">
                        <img src="/static/${item.author_pfp}" class="w-10 h-10 min-w-10 min-h-10 rounded-xl object-cover" alt="">
                    </a>
                    <div>
                        <a href="/user/${item.author_username}" class="font-bold text-white hover:text-blue-400">${item.author_username}</a>
                        <p class="text-[10px] text-zinc-500">${formatTime(item.created_at)}</p>
                    </div>
                </div>
                <div class="flex gap-1">
                    ${currentUsername === item.author_username ? `<button type="button" class="edit-post-btn text-zinc-500 hover:text-blue-400 p-1" data-id="${item.id}" title="Edit"><i data-lucide="pencil" class="h-4 w-4"></i></button>` : ''}
                    ${(currentUsername === item.author_username || isAdmin) ? `<button type="button" class="delete-post-btn text-zinc-500 hover:text-red-400 p-1" data-id="${item.id}" title="Delete"><i data-lucide="trash-2" class="h-4 w-4"></i></button>` : ''}
                </div>
            </div>
            <h3 class="mt-4 text-lg font-bold text-white">${item.title || ''}</h3>
            <p class="mt-2 text-zinc-300 text-sm whitespace-pre-wrap">${item.description || ''}</p>
            <div class="mt-4 flex flex-wrap items-center gap-2">
                <div class="reactions-container flex gap-2" data-target-type="post" data-target-id="${item.id}">
                    ${renderReactions(item, 'post')}
                </div>
                ${currentUsername !== item.author_username ? `<button type="button" class="report-feed-btn ml-auto text-zinc-500 hover:text-orange-400 text-xs" data-type="post" data-id="${item.id}" title="Report"><i data-lucide="flag" class="h-3.5 w-3.5"></i></button>` : ''}
            </div>
        </div>`;
    }
    if (item.type === 'activity') {
        const esc = s => { const d = document.createElement('div'); d.textContent = s || ''; return d.innerHTML; };
        const meta = item.metadata || {};
        const prId = meta.pr_id;
        const prTitle = meta.title || '';
        const prRepoOwner = meta.repo_owner || item.repo_owner;
        const prRepoName = meta.repo_name || item.repo_name;
        const hasPrLink = (item.event_type === 'create_pr_on_your_repo' || item.event_type === 'pr_merged' || item.event_type === 'pr_closed') && prId && (prRepoOwner && prRepoName);
        const repoLink = hasPrLink
            ? `<a href="/${prRepoOwner}/${prRepoName}/pulls/${prId}" class="text-blue-400 hover:underline">#${prId} ${prRepoOwner}/${prRepoName}</a>`
            : (item.repo_name && item.repo_owner ? `<a href="/${item.repo_owner}/${item.repo_name}" class="text-blue-400 hover:underline">${item.repo_owner}/${item.repo_name}</a>` : '');
        const prLabel = item.event_type === 'create_pr_on_your_repo'
            ? 'created a pull request'
            : eventLabel(item.event_type);
        const noReactionsTypes = ['follow_you', 'star_your_repo', 'fork_your_repo', 'star_repo', 'fork_repo', 'create_repo', 'create_pr_on_your_repo', 'pr_merged', 'pr_closed'];
        const showReactions = !noReactionsTypes.includes(item.event_type);
        const isPrWithLink = (item.event_type === 'create_pr_on_your_repo' || item.event_type === 'pr_merged' || item.event_type === 'pr_closed') && hasPrLink;
        const activityBody = isPrWithLink
            ? `<a href="/user/${item.actor_username}" class="font-bold text-white hover:text-blue-400 hover:underline">${item.actor_username}</a><span class="text-zinc-400"> ${prLabel}</span><br><span class="text-sm block mt-0.5">${repoLink}</span>${prTitle ? `<span class="text-sm text-zinc-300 block mt-0.5">${esc(prTitle)}</span>` : ''}<p class="text-[10px] text-zinc-500">${formatTime(item.created_at)}</p>`
            : `<a href="/user/${item.actor_username}" class="font-bold text-white hover:text-blue-400 hover:underline">${item.actor_username}</a>
                    <span class="text-zinc-400"> ${prLabel}${repoLink ? ` ${repoLink}` : ''}</span>
                    ${prTitle ? `<p class="text-sm text-zinc-300 mt-0.5">${esc(prTitle)}</p>` : ''}
                    <p class="text-[10px] text-zinc-500">${formatTime(item.created_at)}</p>`;
        return `
        <div class="feed-activity glass-panel rounded-3xl p-6" data-id="${item.id}" data-type="activity">
            <div class="flex items-start gap-3">
                <a href="/user/${item.actor_username}" class="flex-shrink-0"><img src="/static/${item.actor_pfp}" class="w-10 h-10 min-w-10 min-h-10 rounded-xl object-cover" alt=""></a>
                <div class="min-w-0 flex-1">
                    ${activityBody}
                </div>
            </div>
            ${showReactions ? `<div class="mt-4 flex flex-wrap gap-2 reactions-container" data-target-type="activity" data-target-id="${item.id}">
                ${renderReactions(item, 'activity')}
            </div>` : ''}
        </div>`;
    }
    if (item.type === 'trending') {
        const repos = item.repos || [];
        const hasRepos = repos.length > 0;
        return `
        <div class="feed-trending glass-panel rounded-3xl p-6">
            <h3 class="text-lg font-bold text-white mb-4 flex items-center gap-2">
                <i data-lucide="trending-up" class="h-5 w-5 text-blue-400"></i>
                Trending Repositories
            </h3>
            ${hasRepos ? `<div class="space-y-3">
                ${repos.map(r => `<a href="/${r.owner}/${r.repo_name}" class="block p-3 rounded-xl hover:bg-white/5 transition-all">
                    <div class="font-bold text-zinc-200">${r.owner}/${r.repo_name}</div>
                    <p class="text-sm text-zinc-500 line-clamp-1">${r.description || ''}</p>
                    <div class="flex gap-4 mt-1 text-xs text-zinc-600">
                        <span>${r.stars || 0} stars</span>
                        <span>${r.language || ''}</span>
                    </div>
                </a>`).join('')}
            </div>` : `<p class="text-zinc-500 text-sm py-4">Nothing trending right now. Repos need at least 5 unique visitors to appear here.</p>`}
        </div>`;
    }
    return '';
}

async function runFeedInit() {
    const feedItems = document.getElementById('feed-items');
    const feedEmpty = document.getElementById('feed-empty');
    if (!feedItems) return;

    const perPageEl = document.getElementById('feed-per-page');
    const feedPagination = document.getElementById('feed-pagination');
    let currentPage = 1;
    let currentPerPage = perPageEl ? parseInt(perPageEl.value, 10) || 10 : 10;

    function renderFeedPaginationControls(page, totalPages, onNavigate) {
        const container = document.getElementById('feed-pagination-controls');
        if (!container) return;
        container.innerHTML = '';
        const eff = Math.max(1, totalPages);
        const mk = (html, enabled, fn, active = false) => {
            const btn = document.createElement('button');
            btn.type = 'button';
            btn.innerHTML = html;
            if (active) {
                btn.className = 'w-10 h-10 flex items-center justify-center rounded-xl text-xs font-bold text-white relative z-10 scale-105 shadow-lg';
                btn.style.background = 'rgb(var(--theme-r), var(--theme-g), var(--theme-b))';
                btn.style.boxShadow = '0 0 12px rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.35)';
            } else {
                btn.className = `w-10 h-10 flex items-center justify-center rounded-xl text-xs font-bold transition-all duration-300 ${enabled ? 'text-zinc-400 hover:text-white hover:bg-white/10' : 'text-zinc-700 cursor-not-allowed'}`;
                if (enabled && !active) btn.addEventListener('click', fn);
            }
            return btn;
        };
        container.appendChild(mk('<i data-lucide="chevrons-left" class="h-4 w-4"></i>', page > 1, () => onNavigate(1)));
        container.appendChild(mk('<i data-lucide="chevron-left" class="h-4 w-4"></i>', page > 1, () => onNavigate(page - 1)));
        container.appendChild(mk(String(page), true, null, true));
        container.appendChild(mk('<i data-lucide="chevron-right" class="h-4 w-4"></i>', page < eff, () => onNavigate(page + 1)));
        container.appendChild(mk('<i data-lucide="chevrons-right" class="h-4 w-4"></i>', page < eff, () => onNavigate(eff)));
        if (window.lucide) window.lucide.createIcons({ root: container });
    }

    async function goToFeedPage(p) {
        const eff = Math.max(1, Number.isFinite(p) ? p : 1);
        currentPage = eff;
        scrollFeedToTop();
        const d = await loadFeed(currentPage, currentPerPage);
        if (d && !d.search_mode) finalizeNormalFeed(d);
        if (window.lucide) window.lucide.createIcons();
        bindFeedItemListeners();
    }

    function finalizeNormalFeed(d) {
        if (!d || d.search_mode) return;
        currentPage = d.page || 1;
        currentPerPage = d.per_page || currentPerPage;
        const effPages = Math.max(1, d.total_pages || 1);
        const tc = document.getElementById('feed-total-count');
        if (tc) tc.textContent = d.total_count != null ? String(d.total_count) : '0';
        if (d.items && d.items.length) {
            feedItems.classList.remove('hidden');
            feedItems.innerHTML = d.items.map(renderFeedItem).join('');
            if (feedEmpty) feedEmpty.classList.add('hidden');
        } else {
            feedItems.classList.add('hidden');
            if (feedEmpty) feedEmpty.classList.remove('hidden');
        }
        if (feedPagination) {
            feedPagination.classList.remove('hidden');
            renderFeedPaginationControls(currentPage, effPages, (np) => { goToFeedPage(np); });
        }
    }

    // Real-time: join feed room and listen for updates
    if (typeof io === 'function') {
        const feedSocket = window._feedSocket || io({ transports: ['polling'] });  // websocket triggers 500 with Werkzeug dev server
        window._feedSocket = feedSocket;
        feedSocket.emit('join_feed');
        feedSocket.off('feed_update');
        feedSocket.on('feed_update', (payload) => {
            if (payload.type === 'new_post') {
                const pp = document.getElementById('feed-per-page');
                const lim = pp ? parseInt(pp.value, 10) || 10 : 10;
                currentPage = 1;
                currentPerPage = lim;
                loadFeed(1, lim).then(data => {
                    if (data && !data.search_mode) finalizeNormalFeed(data);
                    if (window.lucide) window.lucide.createIcons();
                    bindFeedItemListeners();
                });
            } else if (payload.type === 'reaction_update') {
                const container = document.querySelector(`.reactions-container[data-target-type="${payload.target_type}"][data-target-id="${payload.target_id}"]`);
                if (container && payload.reactions) updateReactionsUI(container, payload.reactions, { countsOnly: true });
            }
        });
    }

    const searchQuery = getSearchFromUrl();
    if (searchQuery) {
        const searchInput = document.getElementById('search-input');
        if (searchInput) searchInput.value = searchQuery;
    }

    let hydratedFromServer = false;
    if (!searchQuery) {
        const embedded = readFeedInitialState();
        if (embedded && embedded.success && !embedded.search_mode) {
            finalizeNormalFeed(embedded);
            hydratedFromServer = true;
        }
    }

    const data = hydratedFromServer ? null : await loadFeed(currentPage, currentPerPage);

    const searchInfoBar = document.getElementById('feed-search-info-bar');
    const searchQueryDisplay = document.getElementById('feed-search-query-display');
    const feedSearchResults = document.getElementById('feed-search-results');
    const feedSearchUsers = document.getElementById('feed-search-users');
    const feedSearchUsersGrid = document.getElementById('feed-search-users-grid');
    const feedSearchRepos = document.getElementById('feed-search-repos');
    const feedSearchReposGrid = document.getElementById('feed-search-repos-grid');

    if (data && data.search_mode) {
        if (feedItems) feedItems.classList.add('hidden');
        if (feedEmpty) feedEmpty.classList.add('hidden');
        if (feedPagination) feedPagination.classList.add('hidden');
        if (searchInfoBar) {
            searchInfoBar.classList.remove('hidden');
            if (searchQueryDisplay) searchQueryDisplay.textContent = data.search_query || '';
        }
        if (feedSearchResults) feedSearchResults.classList.remove('hidden');
        const users = data.users || [];
        const repos = data.repos || [];
        if (users.length) {
            if (feedSearchUsers) feedSearchUsers.classList.remove('hidden');
            if (feedSearchUsersGrid) {
                const esc = s => { const d = document.createElement('div'); d.textContent = s; return d.innerHTML; };
                feedSearchUsersGrid.innerHTML = users.map(u => `
                    <a href="/user/${esc(u.username)}" data-spa-link class="glass-panel block p-4 rounded-2xl hover:bg-white/10 transition-all">
                        <div class="flex items-center gap-3">
                            <img src="/static/${esc(u.profile_picture)}" class="h-12 w-12 rounded-xl object-cover" onerror="this.src='/static/default_avatar.png'">
                            <span class="font-bold text-white">${esc(u.username)}</span>
                        </div>
                    </a>
                `).join('');
            }
        } else if (feedSearchUsers) feedSearchUsers.classList.add('hidden');
        if (repos.length) {
            if (feedSearchRepos) feedSearchRepos.classList.remove('hidden');
            if (feedSearchReposGrid) {
                const esc = s => { const d = document.createElement('div'); d.textContent = s || ''; return d.innerHTML; };
                feedSearchReposGrid.innerHTML = repos.map(r => `
                    <a href="/${esc(r.owner)}/${esc(r.name)}/" data-spa-link class="repo-card glass-panel block p-6 rounded-3xl border border-white/5 text-left transition-colors hover:bg-white/5 relative group overflow-hidden cursor-pointer">
                        <div class="absolute top-0 right-0 w-32 h-32 bg-blue-500/5 blur-3xl -z-10 group-hover:bg-blue-500/10 transition-all"></div>
                        <div class="flex items-center justify-between">
                            <h3 class="text-xl font-bold text-white group-hover:text-blue-400 transition-colors truncate">${esc(r.name)}</h3>
                            <span class="text-[10px] font-black uppercase tracking-widest px-2.5 py-1 rounded-full border border-emerald-500/30 text-emerald-400 bg-emerald-500/5">public</span>
                        </div>
                        <p class="mt-1 text-sm text-zinc-400">by ${esc(r.owner)}</p>
                        <p class="mt-3 text-zinc-300 text-sm line-clamp-2">${(r.description && esc(r.description)) || 'No description provided.'}</p>
                        <div class="mt-4 flex items-center space-x-4 text-sm text-zinc-500">
                            <span><i data-lucide="code" class="h-4 w-4 mr-1.5 inline"></i>${r.language || '---'}</span>
                            <span><i data-lucide="star" class="h-4 w-4 mr-1.5 inline"></i>${r.stars || 0}</span>
                            ${r.branches_count != null ? `<span><i data-lucide="git-branch" class="h-4 w-4 mr-1.5 inline"></i>${r.branches_count}</span>` : ''}
                            ${r.commit_count != null ? `<span><i data-lucide="git-commit" class="h-4 w-4 mr-1.5 inline"></i>${r.commit_count}</span>` : ''}
                        </div>
                    </a>
                `).join('');
            }
        } else if (feedSearchRepos) feedSearchRepos.classList.add('hidden');
        const feedSearchNoResults = document.getElementById('feed-search-no-results');
        if (users.length === 0 && repos.length === 0 && feedSearchNoResults) {
            feedSearchNoResults.classList.remove('hidden');
        } else if (feedSearchNoResults) feedSearchNoResults.classList.add('hidden');
    } else if (data && !data.search_mode) {
        if (searchInfoBar) searchInfoBar.classList.add('hidden');
        if (feedSearchResults) feedSearchResults.classList.add('hidden');
        finalizeNormalFeed(data);
    } else if (!hydratedFromServer && !data) {
        if (searchInfoBar) searchInfoBar.classList.add('hidden');
        if (feedSearchResults) feedSearchResults.classList.add('hidden');
        feedItems.classList.add('hidden');
        if (feedEmpty) feedEmpty.classList.remove('hidden');
        if (feedPagination) feedPagination.classList.add('hidden');
    }

    if (perPageEl) {
        perPageEl.addEventListener('change', async () => {
            currentPerPage = parseInt(perPageEl.value, 10) || 10;
            currentPage = 1;
            scrollFeedToTop();
            const d = await loadFeed(currentPage, currentPerPage);
            if (d && !d.search_mode) finalizeNormalFeed(d);
            if (window.lucide) window.lucide.createIcons();
            bindFeedItemListeners();
        });
    }

    if (window.lucide) window.lucide.createIcons();

    // Reusable binding for feed item buttons (after render or real-time replace)
    const reportModal = document.getElementById('report-modal');
    const createModal = document.getElementById('create-post-modal');
    const postForm = createModal?.querySelector('#post-form');
    const postModalTitle = createModal?.querySelector('#post-modal-title');
    const deleteConfirmModal = document.getElementById('delete-post-confirm-modal');
    let deletePostIdToRemove = null;
    function bindFeedItemListeners() {
        document.querySelectorAll('.reaction-btn').forEach(btn => {
        btn.addEventListener('click', async () => {
            const container = btn.closest('.reactions-container');
            const targetType = btn.dataset.targetType;
            const targetId = btn.dataset.targetId;
            const emoji = btn.dataset.emoji;
            const reacted = btn.classList.contains('bg-blue-500/20');
            const wasAdding = !reacted;
            let r;
            if (reacted) {
                r = await fetch('/api/feed/reactions', {
                    method: 'DELETE',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ target_type: targetType, target_id: parseInt(targetId), emoji })
                });
            } else {
                r = await fetch('/api/feed/reactions', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ target_type: targetType, target_id: parseInt(targetId), emoji })
                });
            }
            if (r.ok) {
                const data = await r.json();
                if (data.reactions) {
                    updateReactionsUI(container, data.reactions);
                    playReactionAnimation(btn, wasAdding);
                }
            }
        });
        });
        document.querySelectorAll('.report-feed-btn').forEach(btn => {
            btn.addEventListener('click', () => {
                const type = btn.dataset.type;
                const id = btn.dataset.id;
                reportModal.dataset.contentType = type;
                reportModal.dataset.contentId = id;
                reportModal.querySelector('#report-reason').value = 'other';
                reportModal.querySelector('#report-custom-reason').value = '';
                if (window.openModalAnimation) window.openModalAnimation(reportModal);
                else reportModal.classList.remove('hidden');
            });
        });
        document.querySelectorAll('.edit-post-btn').forEach(btn => {
            btn.addEventListener('click', async () => {
                if (!createModal || !postForm) return;
                const id = btn.dataset.id;
                const r = await fetch(`/api/feed/posts/${id}`);
                const d = await r.json();
                if (d.success && d.post) {
                    postModalTitle.textContent = 'Edit Post';
                    postForm.querySelector('[name=title]').value = d.post.title || '';
                    postForm.querySelector('[name=description]').value = d.post.description || '';
                    postForm.dataset.editId = id;
                    if (window.openModalAnimation) window.openModalAnimation(createModal);
                    else createModal.classList.remove('hidden');
                }
            });
        });
        document.querySelectorAll('.delete-post-btn').forEach(btn => {
            btn.addEventListener('click', () => {
                deletePostIdToRemove = btn.dataset.id;
                if (deleteConfirmModal) {
                    if (window.openModalAnimation) window.openModalAnimation(deleteConfirmModal);
                    else deleteConfirmModal.classList.remove('hidden');
                    if (window.lucide) window.lucide.createIcons({ root: deleteConfirmModal });
                }
            });
        });
    }

    // Report modal - bind once
    document.getElementById('report-modal-close')?.addEventListener('click', () => {
        if (window.closeModalAnimation) window.closeModalAnimation(reportModal);
        else reportModal.classList.add('hidden');
    });
    document.getElementById('report-modal-backdrop')?.addEventListener('click', () => {
        if (window.closeModalAnimation) window.closeModalAnimation(reportModal);
        else reportModal.classList.add('hidden');
    });
    document.getElementById('report-submit-btn')?.addEventListener('click', async () => {
        const modal = document.getElementById('report-modal');
        const type = modal.dataset.contentType;
        const id = modal.dataset.contentId;
        const reason = modal.querySelector('#report-reason').value || 'other';
        const customReason = modal.querySelector('#report-custom-reason').value.trim();
        const r = await fetch('/api/report', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ content_type: type, content_id: parseInt(id), reason, custom_reason: customReason })
        });
        const d = await r.json();
        if (d.success) {
            if (window.closeModalAnimation) window.closeModalAnimation(reportModal);
            else reportModal.classList.add('hidden');
            if (window.createToast) window.createToast('report-' + Date.now(), 'Report Submitted', 'Thank you. Our team will review it.', true);
            else alert('Report submitted. Thank you.');
        } else if (d.report_banned && d.days_remaining) {
            if (window.closeModalAnimation) window.closeModalAnimation(reportModal);
            else reportModal.classList.add('hidden');
            if (window.createToast) window.createToast('report-banned-' + Date.now(), 'Feature Unavailable', 'Your report privileges will be restored in ' + d.days_remaining + ' day' + (d.days_remaining === 1 ? '.' : 's.'), false);
            else alert(d.error);
        } else if (d.error) alert(d.error);
    });

    // Create / Edit post modal (opened by header + button on feed; edit opens via edit-post-btn)
    if (createModal) {
        createModal.querySelector('#create-post-close')?.addEventListener('click', () => {
            if (window.closeModalAnimation) window.closeModalAnimation(createModal);
            else createModal.classList.add('hidden');
        });
        createModal.querySelector('#create-post-backdrop')?.addEventListener('click', () => {
            if (window.closeModalAnimation) window.closeModalAnimation(createModal);
            else createModal.classList.add('hidden');
        });
        postForm?.addEventListener('submit', async (e) => {
            e.preventDefault();
            const fd = new FormData(e.target);
            const editId = postForm.dataset.editId;
            if (editId) {
                const r = await fetch(`/api/feed/posts/${editId}`, {
                    method: 'PUT',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ title: fd.get('title'), description: fd.get('description') })
                });
                if (r.ok) {
                    if (window.closeModalAnimation) window.closeModalAnimation(createModal);
                    else createModal.classList.add('hidden');
                    postForm.dataset.editId = '';
                    postModalTitle.textContent = 'New Post';
                    postForm.querySelector('[name=title]').value = '';
                    postForm.querySelector('[name=description]').value = '';
                    const getR = await fetch(`/api/feed/posts/${editId}`);
                    const getD = await getR.json();
                    if (getD.success && getD.post) {
                        const p = getD.post;
                        const item = { type: 'post', id: p.id, title: p.title, description: p.description || '', author_username: p.username, author_pfp: p.profile_picture || 'default_avatar.png', created_at: p.created_at, reactions: p.reactions || [] };
                        const card = document.querySelector(`.feed-post[data-id="${editId}"]`);
                        if (card) {
                            const parent = card.parentElement;
                            card.outerHTML = renderFeedItem(item);
                            if (window.lucide && parent) window.lucide.createIcons({ root: parent });
                            bindFeedItemListeners();
                        }
                    }
                    if (window.createToast) window.createToast('post-edited-' + Date.now(), 'Post Updated', '', true);
                }
            } else {
                const r = await fetch('/api/feed/posts', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ title: fd.get('title'), description: fd.get('description') })
                });
                const d = r.ok ? await r.json() : null;
                if (d && d.success && d.post) {
                    if (window.closeModalAnimation) window.closeModalAnimation(createModal);
                    else createModal.classList.add('hidden');
                    e.target.reset();
                    const item = { type: 'post', id: d.post.id, title: d.post.title, description: d.post.description || '', author_username: d.post.author_username || d.post.username, author_pfp: d.post.author_pfp || 'default_avatar.png', created_at: d.post.created_at, reactions: [] };
                    const feedItems = document.getElementById('feed-items');
                    const feedEmpty = document.getElementById('feed-empty');
                    if (feedEmpty && !feedEmpty.classList.contains('hidden')) feedEmpty.classList.add('hidden');
                    if (feedItems) {
                        feedItems.classList.remove('hidden');
                        feedItems.insertAdjacentHTML('afterbegin', renderFeedItem(item));
                        if (window.lucide) window.lucide.createIcons({ root: feedItems });
                        bindFeedItemListeners();
                    }
                    if (window.createToast) window.createToast('post-created-' + Date.now(), 'Post Created', '', true);
                }
            }
        });
    }
    bindFeedItemListeners();

    // Delete post - custom confirm modal (bind once)
    const deletePostConfirmBtn = document.getElementById('delete-post-confirm-btn');
    const deletePostCancelBtn = document.getElementById('delete-post-cancel-btn');
    if (deletePostConfirmBtn) deletePostConfirmBtn.addEventListener('click', async () => {
        if (!deletePostIdToRemove) return;
        const r = await fetch(`/api/feed/posts/${deletePostIdToRemove}`, { method: 'DELETE' });
        if (r.ok) {
            if (deleteConfirmModal && window.closeModalAnimation) window.closeModalAnimation(deleteConfirmModal);
            else if (deleteConfirmModal) deleteConfirmModal.classList.add('hidden');
            const card = document.querySelector(`.feed-post[data-id="${deletePostIdToRemove}"]`);
            if (card) card.remove();
            deletePostIdToRemove = null;
            if (window.createToast) window.createToast('post-deleted-' + Date.now(), 'Post Deleted', '', true);
        }
    });
    if (deletePostCancelBtn) deletePostCancelBtn.addEventListener('click', () => {
        if (deleteConfirmModal && window.closeModalAnimation) window.closeModalAnimation(deleteConfirmModal);
        else if (deleteConfirmModal) deleteConfirmModal.classList.add('hidden');
        deletePostIdToRemove = null;
    });
    deleteConfirmModal?.querySelector('.modal-backdrop')?.addEventListener('click', () => {
        if (window.closeModalAnimation) window.closeModalAnimation(deleteConfirmModal);
        else deleteConfirmModal.classList.add('hidden');
        deletePostIdToRemove = null;
    });
}
if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', runFeedInit);
} else {
    runFeedInit();
}
})();
</script>
{% endblock %}

{% block portals %}
{# Create Post Modal #}
{% if g.user %}
<div id="create-post-modal" class="hidden modal-hidden fixed inset-0 z-[100] p-4 grid place-items-center">
    <div id="create-post-backdrop" class="modal-backdrop fixed inset-0 bg-black/60 modal-transition z-[99]"></div>
    <div class="modal-content glass-modal rounded-3xl p-6 w-full max-w-lg relative z-[100] border border-white/10 modal-content-transition">
        <div class="flex items-center justify-between mb-6">
            <h3 id="post-modal-title" class="text-xl font-bold text-white">New Post</h3>
            <button id="create-post-close" type="button" class="p-2 rounded-xl hover:bg-white/10 text-zinc-400">
                <i data-lucide="x" class="h-5 w-5"></i>
            </button>
        </div>
        <form id="post-form" class="space-y-4" autocomplete="off">
            <div>
                <label class="block text-xs font-bold text-zinc-500 uppercase mb-2">Title</label>
                <input type="text" name="title" required maxlength="500" autocomplete="off"
                    class="w-full bg-zinc-950/50 border border-white/10 rounded-xl py-3 px-4 text-zinc-200 focus:border-blue-500/50 outline-none"
                    placeholder="What's on your mind?">
            </div>
            <div>
                <label class="block text-xs font-bold text-zinc-500 uppercase mb-2">Description (optional)</label>
                <textarea name="description" rows="4" maxlength="5000" autocomplete="off"
                    class="w-full bg-zinc-950/50 border border-white/10 rounded-xl py-3 px-4 text-zinc-200 focus:border-blue-500/50 outline-none resize-none"
                    placeholder="Add more details..."></textarea>
            </div>
            <button type="submit" class="w-full py-3 bg-blue-600 hover:bg-blue-500 text-white font-bold uppercase tracking-widest rounded-xl">
                Post
            </button>
        </form>
    </div>
</div>

{# Delete Post Confirm Modal #}
<div id="delete-post-confirm-modal" class="hidden modal-hidden fixed inset-0 z-[100] p-4 grid place-items-center">
    <div class="modal-backdrop fixed inset-0 bg-black/60 modal-transition z-[99]"></div>
    <div class="modal-content glass-modal modal-radius-lg shadow-3xl p-8 w-full max-w-sm border border-white/10 modal-content-transition relative z-[100]">
        <div class="flex flex-col items-center text-center">
            <div class="p-4 bg-red-500/10 rounded-2xl border border-red-500/20 mb-6">
                <i data-lucide="trash-2" class="h-8 w-8 text-red-500"></i>
            </div>
            <h3 class="text-xl font-bold mb-3 text-white">Delete Post</h3>
            <p class="text-sm text-zinc-500 leading-relaxed">Are you sure you want to delete this post? This cannot be undone.</p>
        </div>
        <div class="mt-8 flex gap-3">
            <button id="delete-post-cancel-btn" type="button"
                class="flex-1 glass-button py-3 rounded-xl text-[10px] font-black uppercase tracking-widest text-zinc-400">Cancel</button>
            <button id="delete-post-confirm-btn" type="button"
                class="flex-1 bg-red-600 hover:bg-red-500 text-white py-3 rounded-xl text-[10px] font-black uppercase tracking-widest transition-all">Delete</button>
        </div>
    </div>
</div>
{% endif %}

{# Report Modal #}
<div id="report-modal" class="hidden modal-hidden fixed inset-0 z-[100] p-4 grid place-items-center">
    <div id="report-modal-backdrop" class="modal-backdrop fixed inset-0 bg-black/60 modal-transition z-[99]"></div>
    <div class="modal-content glass-modal rounded-3xl p-6 w-full max-w-md relative z-[100] border border-white/10 modal-content-transition">
        <div class="flex items-center justify-between mb-6">
            <h3 class="text-xl font-bold text-white">Report Content</h3>
            <button id="report-modal-close" type="button" class="p-2 rounded-xl hover:bg-white/10 text-zinc-400">
                <i data-lucide="x" class="h-5 w-5"></i>
            </button>
        </div>
        <div class="space-y-4">
            <div>
                <label class="block text-xs font-bold text-zinc-500 uppercase mb-2">Reason</label>
                {{ custom_select(id="report-reason", options=[{"value": "spam", "label": "Spam"}, {"value": "harassment", "label": "Harassment"}, {"value": "hate_speech", "label": "Hate speech"}, {"value": "violence", "label": "Violence"}, {"value": "self_harm", "label": "Self-harm"}, {"value": "nsfw", "label": "NSFW"}, {"value": "copyright", "label": "Copyright"}, {"value": "other", "label": "Other"}], selected_value="other", selected_label="Other", mode="form", class="w-full") }}
            </div>
            <div>
                <label class="block text-xs font-bold text-zinc-500 uppercase mb-2">Additional details (optional)</label>
                <textarea id="report-custom-reason" rows="3" maxlength="1000"
                    class="w-full bg-zinc-950/50 border border-white/10 rounded-xl py-3 px-4 text-zinc-200 focus:border-blue-500/50 outline-none resize-none"
                    placeholder="Provide more context..."></textarea>
            </div>
            <button id="report-submit-btn" type="button" class="w-full py-3 bg-orange-600 hover:bg-orange-500 text-white font-bold uppercase tracking-widest rounded-xl">
                Submit Report
            </button>
        </div>
    </div>
</div>
{% endblock %}