@extends('layouts.app')

@section('meta_canonical')
    {{-- Canonical akan diisi dinamis oleh JS dari Yoast SEO --}}
@endsection

@push('page-styles')
    <!-- Google Fonts: Poppins for heading, Open Sans for body -->
    <link href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@@0,400..700;1,400..700&family=Open+Sans:wght@@400;600;700&family=Poppins:wght@@600;700;800&display=swap" rel="stylesheet">
    <!-- Custom Styles for Article Content -->
    <link rel="stylesheet" href="{{ asset('assets/css/style.css') }}">
    {{-- Meta tag title, description, canonical, author akan diisi dinamis oleh JS dari Yoast SEO --}}
@endpush

@section('content')
<main class="py-8 md:py-16">
    <article id="article-container" class="container mx-auto px-4 max-w-3xl">
        <div id="article-placeholder" class="animate-pulse">
            <!-- loading placeholders -->
        </div>
        <div id="article-content-main" class="hidden">
            <!-- dynamic post rendered here -->
        </div>
        <div id="error-message" class="hidden text-center text-red-500 font-semibold my-8"></div>
    </article>

    <!-- Related Articles Section -->
    <aside id="related-articles-container" class="mt-16"></aside>
</main>
@endsection

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

            const GQL_QUERY = `
                query GetPostAndRelated($slug: ID!) {
                    post(id: $slug, idType: SLUG) {
                        title
                        content
                        date
                        author { node { name } }
                        categories { nodes { name, slug } }
                        featuredImage { node { sourceUrl altText } }
                        seo {
                            title
                            metaDesc
                            canonical
                            opengraphAuthor
                        }
                    }
                    relatedPosts: posts(first: 4, where: {orderby: {field: DATE, order: DESC}}) {
                        nodes {
                            title
                            slug
                            date
                            featuredImage { node { sourceUrl altText } }
                        }
                    }
                }
            `;

            const articleContentMain = document.getElementById('article-content-main');
            const relatedArticlesContainer = document.getElementById('related-articles-container');
            const errorMessageDiv = document.getElementById('error-message');
            const articlePlaceholder = document.getElementById('article-placeholder');

            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);
            }

            async function fetchPostData() {
                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.post) throw new Error('Post not found.');

                    renderPost(json.data.post);
                    setSEOMeta(json.data.post);
                    renderRelatedPosts(json.data.relatedPosts.nodes);
                    generateBreadcrumbSchema(json.data.post);

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

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

            function generateBreadcrumbSchema(post) {
                const category = post.categories.nodes.length > 0 ? post.categories.nodes[0] : null;
                const appUrl = window.APP_URL || 'https://croloze.com';

                const itemListElement = [
                    {
                        ['@' + 'type']: "ListItem",
                        "position": 1,
                        "name": "Home",
                        "item": appUrl
                    },
                    {
                        ['@' + 'type']: "ListItem",
                        "position": 2,
                        "name": "Blog",
                        "item": `${appUrl}/blog`
                    }
                ];

                if (category) {
                    itemListElement.push({
                        ['@' + 'type']: "ListItem",
                        "position": 3,
                        "name": category.name,
                        "item": `${appUrl}/blog/category/${category.slug}`
                    });
                }

                itemListElement.push({
                    ['@' + 'type']: "ListItem",
                    "position": category ? 4 : 3,
                    "name": post.title,
                    "item": `${appUrl}/blog/${slug}`
                });

                const schema = {
                    ['@' + 'context']: "https://schema.org",
                    ['@' + 'type']: "BreadcrumbList",
                    "itemListElement": itemListElement
                };

                let scriptTag = document.querySelector('script[type="application/ld+json"]');
                if (!scriptTag) {
                    scriptTag = document.createElement('script');
                    scriptTag.type = 'application/ld+json';
                    document.head.appendChild(scriptTag);
                }
                scriptTag.textContent = JSON.stringify(schema);
            }

            function renderPost(post) {
                const category = post.categories.nodes.length > 0 ? post.categories.nodes[0] : null;
                const author = post.author.node.name || 'Anonymous';
                const postDate = new Date(post.date).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' });

                const frontendBlogUrl = (window.APP_URL || 'https://croloze.com') + '/blog';
                const processedContent = post.content.replace(/(<a\s+[^>]*href=")https:\/\/content\.croloze\.com/g, `$1${frontendBlogUrl}`);

                let breadcrumbHTML = `
                    <nav aria-label="breadcrumb" class="mb-6 text-center">
                        <ol class="inline-flex items-center space-x-1 md:space-x-2 text-sm text-gray-600">
                            <li>
                                <a href="/blog" class="hover:text-green-600">Blog</a>
                            </li>
                `;

                if (category) {
                    breadcrumbHTML += `
                        <li>
                            <div class="flex items-center">
                                <svg class="w-3 h-3 text-gray-400 mx-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/></svg>
                                <a href="/blog/category/${category.slug}" class="hover:text-green-600">${category.name}</a>
                            </div>
                        </li>
                    `;
                }

                breadcrumbHTML += `
                            <li aria-current="page">
                                <div class="flex items-center">
                                    <svg class="w-3 h-3 text-gray-400 mx-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/></svg>
                                    <span class="text-gray-500 truncate max-w-xs md:max-w-md">${post.title}</span>
                                </div>
                            </li>
                        </ol>
                    </nav>
                `;

                const html = `
                    ${breadcrumbHTML}
                    <header class="mb-8 md:mb-12 text-center">
                        ${category ? `<a href="/blog/category/${category.slug}" class="text-sm font-semibold text-green-600 uppercase tracking-wider hover:text-green-700">${category.name}</a>` : `<span class="text-sm font-semibold text-green-600 uppercase tracking-wider">Uncategorized</span>`}
                        <h1 class="text-3xl md:text-5xl font-bold text-gray-900 mt-2 mb-4 leading-tight">${post.title}</h1>
                        <p class="text-base text-gray-600">
                            By ${author} &middot; ${postDate}
                        </p>
                    </header>
                    ${post.featuredImage ? `
                    <figure class="mb-8 md:mb-12 rounded-lg overflow-hidden shadow-lg">
                        <img src="${post.featuredImage.node.sourceUrl}" alt="${post.featuredImage.node.altText || post.title}" class="w-full h-auto object-cover">
                    </figure>` : ''}
                    <div class="article-content">${processedContent}</div>
                `;
                articleContentMain.innerHTML = html;
                articlePlaceholder.style.display = 'none';
                articleContentMain.classList.remove('hidden');
            }

            function renderRelatedPosts(posts) {
                const related = posts.filter(p => p.slug !== slug).slice(0, 3);
                if (related.length === 0) return;

                const relatedHTML = `
                    <div class="pt-12 border-t border-gray-200">
                        <div class="container mx-auto px-4">
                            <h2 class="text-3xl font-bold text-center mb-8 text-gray-800">Related Articles</h2>
                            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                                ${related.map(p => {
                                    const pDate = new Date(p.date).toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' });
                                    return `
                                    <div class="bg-white rounded-lg shadow-md overflow-hidden transform hover:-translate-y-2 transition-transform duration-300">
                                        <a href="/blog/${p.slug}" class="block">
                                            ${p.featuredImage ? `<img src="${p.featuredImage.node.sourceUrl}" alt="${p.featuredImage.node.altText || p.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">${p.title}</h3>
                                                <p class="text-sm text-gray-600">${pDate}</p>
                                            </div>
                                        </a>
                                    </div>
                                    `;
                                }).join('')}
                            </div>
                        </div>
                    </div>
                `;
                relatedArticlesContainer.innerHTML = relatedHTML;
            }

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