@extends('layouts.app')

@push('page-styles')
    <!-- Google Fonts -->
    {{-- Escape @ characters so Blade doesn't treat them as directives --}}
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@@400;600;700&family=Poppins:wght@@600;700;800&display=swap" rel="stylesheet">
    {{-- Meta tags dinamis akan diisi oleh JavaScript --}}
    <script id="breadcrumb-schema" type="application/ld+json">{}</script>
@endpush

@section('content')
<main class="py-8 md:py-16">
    <div class="container mx-auto px-4">
        <nav class="text-sm mb-8" aria-label="Breadcrumb">
            <ol class="list-none p-0 inline-flex">
                <li class="flex items-center">
                    <a href="{{ url('/') }}" class="text-gray-500 hover:text-gray-700">Home</a>
                    <svg class="fill-current w-3 h-3 mx-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"/></svg>
                </li>
                <li class="flex items-center">
                    <a href="{{ url('/blog') }}" class="text-gray-500 hover:text-gray-700">Blog</a>
                    <svg class="fill-current w-3 h-3 mx-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"/></svg>
                </li>
                <li class="flex items-center">
                    <span id="breadcrumb-category" class="text-gray-800 font-semibold"></span>
                </li>
            </ol>
        </nav>
        <div id="category-header" class="mb-12">
            <!-- Judul dan deskripsi kategori akan dirender di sini -->
        </div>
        <div id="posts-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            <!-- Postingan akan dirender di sini -->
        </div>
        <div id="loading-placeholder" class="text-center py-16">
            <p class="text-lg font-semibold">Loading articles...</p>
        </div>
        <div id="error-message" class="hidden text-center text-red-500 font-semibold my-8"></div>
    </div>
</main>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', () => {
    const GQL_ENDPOINT = 'https://content.croloze.com/graphql';
    const slug = '{{ $slug }}'; // Slug kategori dari route

    const GQL_QUERY = `
        query GetCategoryPosts($slug: ID!) {
            category(id: $slug, idType: SLUG) {
                name
                description
                seo {
                    title
                    metaDesc
                    canonical
                }
                posts(first: 100) {
                    nodes {
                        title
                        slug
                        date
                        excerpt
                        seo {
                            metaDesc
                        }
                        featuredImage {
                            node {
                                sourceUrl
                                altText
                            }
                        }
                    }
                }
            }
        }
    `;

    const categoryHeader = document.getElementById('category-header');
    const postsContainer = document.getElementById('posts-container');
    const loadingPlaceholder = document.getElementById('loading-placeholder');
    const errorMessageDiv = document.getElementById('error-message');

    function setMetaTag(name, content) {
        let tag = document.querySelector(`meta[name='${name}']`);
        if (!tag && content) {
            tag = document.createElement('meta');
            tag.setAttribute('name', name);
            document.head.appendChild(tag);
        }
        if (tag) tag.setAttribute('content', content || '');
    }

    function setCanonical(url) {
        let link = document.querySelector("link[rel='canonical']");
        if (!link && url) {
            link = document.createElement('link');
            link.setAttribute('rel', 'canonical');
            document.head.appendChild(link);
        }
        if (link) link.setAttribute('href', url || window.location.href);
    }

    function setSEOMeta(category) {
        document.title = category.seo?.title || category.name;
        setMetaTag('description', category.seo?.metaDesc || category.description || '');
        const canonical = category.seo?.canonical
            ? category.seo.canonical.replace('https://content.croloze.com', (window.APP_URL || 'https://croloze.com') + '/blog/category')
            : (window.APP_URL || 'https://croloze.com') + '/blog/category/' + slug;
        setCanonical(canonical);
    }

    async function fetchCategoryData() {
        try {
            const response = await fetch(GQL_ENDPOINT, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ query: GQL_QUERY, variables: { slug } })
            });

            if (!response.ok) throw new Error('Network response was not ok.');
            const json = await response.json();

            if (json.errors) throw new Error(json.errors.map(e => e.message).join('\n'));
            if (!json.data.category) throw new Error('Category not found.');

            const category = json.data.category;
            setSEOMeta(category);
            renderCategoryHeader(category);
            renderPosts(category.posts.nodes);
            renderBreadcrumbs(category);

        } catch (error) {
            console.error('Error fetching data:', error);
            errorMessageDiv.textContent = 'Failed to load articles. ' + error.message;
            errorMessageDiv.classList.remove('hidden');
        } finally {
            loadingPlaceholder.style.display = 'none';
        }
    }

    function renderBreadcrumbs(category) {
        const breadcrumbCategoryEl = document.getElementById('breadcrumb-category');
        if (breadcrumbCategoryEl) {
            breadcrumbCategoryEl.textContent = category.name;
        }

        const schema = {
            ['@' + 'context']: "https://schema.org",
            ['@' + 'type']: "BreadcrumbList",
            "itemListElement": [
                {
                    ['@' + 'type']: "ListItem",
                    "position": 1,
                    "name": "Home",
                    "item": "{{ url('/') }}"
                },
                {
                    ['@' + 'type']: "ListItem",
                    "position": 2,
                    "name": "Blog",
                    "item": "{{ url('/blog') }}"
                },
                {
                    ['@' + 'type']: "ListItem",
                    "position": 3,
                    "name": category.name,
                    "item": (window.APP_URL || 'https://croloze.com') + '/blog/category/' + slug
                }
            ]
        };

        const schemaScript = document.getElementById('breadcrumb-schema');
        if (schemaScript) {
            schemaScript.textContent = JSON.stringify(schema, null, 2);
        }
    }

    function renderCategoryHeader(category) {
        const headerHTML = `
            <h1 class="text-4xl md:text-5xl font-bold text-gray-900 text-center mb-4">${category.name}</h1>
            ${category.description ? `<p class="text-lg text-gray-600 text-center max-w-3xl mx-auto">${category.description}</p>` : ''}
        `;
        categoryHeader.innerHTML = headerHTML;
    }

    function renderPosts(posts) {
        if (posts.length === 0) {
            postsContainer.innerHTML = '<p class="text-center col-span-full">No articles found in this category.</p>';
            return;
        }

        const postsHTML = posts.map(post => {
            const postDate = new Date(post.date).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' });
            const excerpt = post.seo?.metaDesc || post.excerpt.replace(/<a\b[^>]*>.*<\/a>/i, "") || '';

            return `
                <div class="bg-white rounded-lg shadow-md overflow-hidden transform hover:-translate-y-2 transition-transform duration-300">
                    <a href="/blog/${post.slug}" class="block">
                        ${post.featuredImage ? `<img src="${post.featuredImage.node.sourceUrl}" alt="${post.featuredImage.node.altText || post.title}" class="w-full h-48 object-cover">` : ''}
                        <div class="p-6">
                            <h3 class="text-xl font-semibold text-gray-900 mb-2 leading-snug">${post.title}</h3>
                            <div class="text-sm text-gray-600 mb-4">${postDate}</div>
                            <div class="text-gray-700 text-sm">${excerpt}</div>
                        </div>
                    </a>
                </div>
            `;
        }).join('');
        postsContainer.innerHTML = postsHTML;
    }

    fetchCategoryData();
});
</script>
@endpush