{{-- resources/views/components/api.blade.php --}}
@csrf

<div id="ig-widget" class="max-w-6xl mx-auto py-8">
    <div id="ig-carousel" class="owl-carousel owl-theme"></div>
</div>

<script>
    async function loadInstagram() {
        const userId = {{env('INSTAGRAM_USER_ID')}};
        try {
            const resp = await fetch("{{ url('/api/instagram/media') }}", {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-API-KEY': '{{ config("services.internal_api_key") }}',
                    'X-CSRF-TOKEN': document.querySelector('input[name="_token"]').value
                },
                body: JSON.stringify({ user_id: userId, limit: 6 })
            });

            const json = await resp.json();
            const posts = json.data || [];
            const carousel = $('#ig-carousel');

            // Reinicia o carousel
            if (carousel.hasClass('owl-loaded')) {
                carousel.trigger('destroy.owl.carousel');
                carousel.removeClass('owl-loaded');
                carousel.find('.owl-stage-outer').children().unwrap();
            }
            carousel.html('');

            // Adiciona os itens
            posts.forEach(post => {
                const caption = post.caption
                    ? (post.caption.length > 100 ? post.caption.substring(0, 100) + '…' : post.caption)
                    : '';
                const date = post.timestamp
                    ? new Date(post.timestamp).toLocaleDateString('pt-BR')
                    : '';
                const card = `
                    <div class="item">
                        <a href="${post.permalink}" target="_blank" rel="noopener noreferrer">
                            <img src="${post.media_url}" alt="Instagram Post"
                                 class="w-full h-56 object-cover">
                        </a>
                        <div class="p-4 pt-4" style="padding: 1rem;">
                            <h3 class="text-lg font-semibold text-gray-800">${caption}</h3>
                        </div>
                    </div>
                `;
                carousel.append(card);
            });

            if (posts.length > 0) {
                carousel.owlCarousel({
                    loop: true,
                    margin: 16,
                    nav: false,
                    dots: false,
                    autoplay: true,
                    autoplayTimeout: 1500,
                    autoplayHoverPause: false,
                    responsive: {
                        0: { items: 1 },
                        640: { items: 2 },
                        1024: { items: 3 },
                        1280: { items: 4 }
                    }
                });
            } else {
                carousel.html('<p class="text-center text-gray-500">Nenhum post encontrado.</p>');
            }
        } catch (err) {
            $('#ig-carousel').html(`<p class="text-red-600 text-center">Erro ao carregar Instagram: ${err.message}</p>`);
        }
    }

    $(document).ready(function() {
        loadInstagram();
    });
</script>

<style>
    #ig-widget {
      padding: 1rem;
      background-color: var(--primary_color);
    }
    #ig-widget .item {
        background: white;
        border-radius: 0.5rem;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }
    #ig-widget .item img {
        width: 100%;
        object-fit: cover;
    }
    #ig-widget .item div {
        flex: 1;
    }
</style>