<div class="max-w-7xl mx-auto px-4 py-20">

    <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
        <% if (blogs && blogs.length> 0) { %>
            <% blogs.forEach(blog=> { %>
                <div
                    class="bg-white dark:bg-black rounded-3xl p-6 md:p-8 shadow-lg border border-gray-100 dark:border-gray-900 flex flex-col h-full hover:shadow-xl transition-shadow group">
                    <div class="flex items-center mb-6">
                        <img src="<%= readLocalized(portfolio.profile_image, lang, '/img/profile-placeholder.png') %>"
                            class="w-12 h-12 rounded-full mr-4 border-2 border-blue-500 p-0.5 object-cover">
                        <div>
                            <p class="font-bold text-gray-900 dark:text-white text-lg">Nabaraj Budha</p>
                            <p class="text-gray-500 dark:text-gray-400 text-sm"><%= t('blogs.postedOn') %> <%= formatDate(blog.created_at) %>
                            </p>
                        </div>
                    </div>
                    <h2
                        class="text-2xl md:text-3xl font-black text-gray-900 dark:text-white mb-6 tracking-tight leading-none">
                        <%= blog.title %>
                    </h2>

                    <% if (blog.image_url) { %>
                        <div
                            class="rounded-2xl overflow-hidden shadow-md mb-6 bg-gray-50 dark:bg-gray-900 aspect-video">
                            <img src="<%= blog.image_url %>"
                                class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                        </div>
                        <% } %>

                            <div
                                class="prose prose-lg dark:prose-invert max-w-none text-gray-700 dark:text-gray-300 leading-relaxed mb-8 line-clamp-3">
                                <%- blog.content.replace(/\n/g, '<br>' ) %>
                            </div>

                            <a href="/blogs/<%= blog.id %>"
                                class="inline-flex items-center text-blue-600 dark:text-blue-400 font-bold hover:underline mb-8 mt-auto w-max">
                                <%= t('common.readMore') %> <i class="fas fa-arrow-right ml-2 text-xs"></i>
                            </a>

                            <div class="border-t border-gray-100 dark:border-gray-800 pt-6 flex justify-around">
                                <button onclick="likeBlog('<%= blog.id %>')" id="like-btn-<%= blog.id %>"
                                    class="text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 font-bold flex items-center transition-colors">
                                    <i class="far fa-heart mr-2"></i> <span id="like-count-<%= blog.id %>">
                                        <%= blog.likes || 0 %>
                                    </span>
                                </button>

                                <div class="relative">
                                    <button onclick="toggleShareDropdown('<%= blog.id %>')"
                                        class="text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 font-bold flex items-center transition-colors">
                                        <i class="far fa-share-square mr-2"></i> <%= t('common.share') %>
                                    </button>
                                    <!-- Share Dropdown -->
                                    <div id="share-dropdown-<%= blog.id %>"
                                        class="absolute bottom-full mb-3 left-1/2 -translate-x-1/2 hidden bg-white dark:bg-black shadow-2xl rounded-2xl border border-gray-100 dark:border-gray-900 p-3 space-x-3 animate-bounce-in z-20">
                                        <a href="https://www.facebook.com/sharer/sharer.php?u=<%= encodeURIComponent('http://' + host + '/blogs/' + blog.id) %>"
                                            target="_blank"
                                            class="w-12 h-12 rounded-full bg-[#1877F2] text-white flex items-center justify-center hover:scale-110 transition-transform shadow-lg shadow-blue-500/20">
                                            <i class="fab fa-facebook-f text-lg"></i>
                                        </a>
                                        <a href="https://twitter.com/intent/tweet?url=<%= encodeURIComponent('http://' + host + '/blogs/' + blog.id) %>"
                                            target="_blank"
                                            class="w-12 h-12 rounded-full bg-black text-white flex items-center justify-center hover:scale-110 transition-transform shadow-lg shadow-gray-500/20">
                                            <i class="fab fa-x-twitter text-lg"></i>
                                        </a>
                                        <button type="button" onclick="shareToInstagram('<%= blog.id %>')"
                                            class="w-12 h-12 rounded-full bg-gradient-to-tr from-[#F58529] via-[#D62976] to-[#962FBF] text-white flex items-center justify-center hover:scale-110 transition-transform shadow-lg shadow-pink-500/20">
                                            <i class="fab fa-instagram text-lg"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                </div>
                <% }) %>
                    <% } else { %>
                        <div class="py-20 text-center">
                            <p class="text-gray-500 italic"><%= t('blogs.empty') %></p>
                        </div>
                        <% } %>
    </div>
</div>

<script>
    const i18nText = {
        sharePrefix: "<%= t('blogs.sharePrefix') %>",
        copyPrompt: "<%= t('share.copyPrompt') %>",
        postLinkCopied: "<%= t('share.postLinkCopied') %>"
    };

    function toggleShareDropdown(id) {
        const dropdown = document.getElementById(`share-dropdown-${id}`);
        const allDropdowns = document.querySelectorAll('[id^="share-dropdown-"]');
        allDropdowns.forEach(d => { if (d !== dropdown) d.classList.add('hidden'); d.classList.remove('flex'); });

        dropdown.classList.toggle('hidden');
        if (!dropdown.classList.contains('hidden')) {
            dropdown.classList.add('flex');
        } else {
            dropdown.classList.remove('flex');
        }
    }

    // Close on click outside
    window.addEventListener('click', (e) => {
        if (!e.target.closest('.relative')) {
            document.querySelectorAll('[id^="share-dropdown-"]').forEach(d => {
                d.classList.add('hidden');
                d.classList.remove('flex');
            });
        }
    });

    async function likeBlog(id) {
        try {
            const response = await fetch(`/api/blogs/${id}/like`, { method: 'POST' });
            if (response.ok) {
                const countSpan = document.getElementById(`like-count-${id}`);
                const btn = document.getElementById(`like-btn-${id}`);
                countSpan.innerText = parseInt(countSpan.innerText) + 1;
                btn.classList.add('text-red-500');
                btn.querySelector('i').classList.replace('far', 'fas');
                btn.querySelector('i').classList.add('animate-ping');
                setTimeout(() => btn.querySelector('i').classList.remove('animate-ping'), 500);
            }
        } catch (err) {
            console.error('Like failed:', err);
        }
    }

    function shareToInstagram(id) {
        const url = `${window.location.origin}/blogs/${id}`;
        const text = `${i18nText.sharePrefix} ${url}`;
        const openInstagram = () => window.open('https://www.instagram.com/', '_blank', 'noopener');

        if (navigator.clipboard && navigator.clipboard.writeText) {
            navigator.clipboard.writeText(text)
                .then(() => {
                    openInstagram();
                    alert(i18nText.postLinkCopied);
                })
                .catch(() => {
                    openInstagram();
                    window.prompt(i18nText.copyPrompt, text);
                });
        } else {
            openInstagram();
            window.prompt(i18nText.copyPrompt, text);
        }
    }
</script>

<style>
    @keyframes bounceIn {
        0% {
            transform: translate(-50%, 10px) scale(0.9);
            opacity: 0;
        }

        50% {
            transform: translate(-50%, -5px) scale(1.05);
        }

        100% {
            transform: translate(-50%, 0) scale(1);
            opacity: 1;
        }
    }

    .animate-bounce-in {
        animation: bounceIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    }
</style>
