<?php
$pageTitle = $articleData['meta_title'] ?: $articleData['title'];
include 'header.php';
?>

<div class="container py-5">
    <div class="row">
        <div class="col-lg-8">
            <article class="mb-5">
                <!-- Article Header -->
                <header class="mb-4">
                    <div class="mb-3">
                        <span class="badge <?= $articleData['type'] === 'internal' ? 'badge-internal' : 'badge-external' ?>">
                            <?= $articleData['type'] === 'internal' ? __('internal_blog') : __('external_blog') ?>
                        </span>
                        <?php if ($articleData['is_ai_generated']): ?>
                            <span class="badge bg-info">
                                <i class="fas fa-robot"></i> AI <?= __('generated') ?? 'Generated' ?>
                            </span>
                        <?php endif; ?>
                        <?php if ($articleData['category_name']): ?>
                            <span class="badge bg-secondary">
                                <?= htmlspecialchars($articleData['category_name']) ?>
                            </span>
                        <?php endif; ?>
                    </div>

                    <h1 class="display-4 fw-bold mb-4">
                        <?= htmlspecialchars($articleData['title']) ?>
                    </h1>

                    <?php if ($articleData['excerpt']): ?>
                        <p class="lead text-muted mb-4">
                            <?= htmlspecialchars($articleData['excerpt']) ?>
                        </p>
                    <?php endif; ?>

                    <div class="row align-items-center mb-4">
                        <div class="col-md-6">
                            <div class="d-flex align-items-center">
                                <div class="avatar-circle me-3">
                                    <i class="fas fa-<?= $articleData['is_ai_generated'] ? 'robot' : 'user' ?> fa-lg"></i>
                                </div>
                                <div>
                                    <div class="fw-semibold">
                                        <?= htmlspecialchars($articleData['author_name'] ?: ($articleData['is_ai_generated'] ? 'AI Assistant' : 'Anonymous')) ?>
                                    </div>
                                    <small class="text-muted">
                                        <i class="fas fa-calendar me-1"></i>
                                        <?= format_date($articleData['published_at'], 'F j, Y') ?>
                                    </small>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 text-md-end">
                            <div class="d-flex justify-content-md-end align-items-center gap-3">
                                <span class="text-muted small">
                                    <i class="fas fa-eye me-1"></i>
                                    <?= number_format($articleData['views']) ?> <?= __('views') ?>
                                </span>
                                <button class="btn btn-outline-danger btn-sm" onclick="likeArticle(<?= $articleData['id'] ?>)">
                                    <i class="fas fa-heart me-1"></i>
                                    <span id="likeCount"><?= number_format($articleData['likes']) ?></span>
                                </button>
                                <div class="dropdown">
                                    <button class="btn btn-outline-secondary btn-sm dropdown-toggle" data-bs-toggle="dropdown">
                                        <i class="fas fa-share"></i>
                                    </button>
                                    <ul class="dropdown-menu">
                                        <li><a class="dropdown-item" href="#" onclick="shareArticle('facebook')">
                                            <i class="fab fa-facebook me-2"></i>Facebook
                                        </a></li>
                                        <li><a class="dropdown-item" href="#" onclick="shareArticle('twitter')">
                                            <i class="fab fa-twitter me-2"></i>Twitter
                                        </a></li>
                                        <li><a class="dropdown-item" href="#" onclick="shareArticle('linkedin')">
                                            <i class="fab fa-linkedin me-2"></i>LinkedIn
                                        </a></li>
                                        <li><hr class="dropdown-divider"></li>
                                        <li><a class="dropdown-item" href="#" onclick="copyArticleLink()">
                                            <i class="fas fa-link me-2"></i><?= __('copy_link') ?? 'Copy Link' ?>
                                        </a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </header>

                <!-- Featured Image -->
                <?php if ($articleData['featured_image']): ?>
                    <div class="mb-4">
                        <img src="<?= htmlspecialchars($articleData['featured_image']) ?>"
                             class="img-fluid rounded shadow"
                             alt="<?= htmlspecialchars($articleData['title']) ?>">
                    </div>
                <?php endif; ?>

                <!-- Article Content -->
                <div class="article-content">
                    <?= $articleData['content'] ?>
                </div>

                <!-- Article Footer -->
                <footer class="mt-5 pt-4 border-top">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="d-flex align-items-center gap-3">
                                <button class="btn btn-outline-danger" onclick="likeArticle(<?= $articleData['id'] ?>)">
                                    <i class="fas fa-heart me-1"></i>
                                    <span id="likeCountFooter"><?= number_format($articleData['likes']) ?></span> <?= __('likes') ?>
                                </button>
                                <span class="text-muted">
                                    <i class="fas fa-eye me-1"></i>
                                    <?= number_format($articleData['views']) ?> <?= __('views') ?>
                                </span>
                            </div>
                        </div>
                        <div class="col-md-6 text-md-end">
                            <?php if ($articleData['source_url']): ?>
                                <a href="<?= htmlspecialchars($articleData['source_url']) ?>"
                                   target="_blank"
                                   class="btn btn-outline-info btn-sm">
                                    <i class="fas fa-external-link-alt me-1"></i>
                                    <?= __('original_source') ?? 'Original Source' ?>
                                </a>
                            <?php endif; ?>
                        </div>
                    </div>
                </footer>
            </article>

            <!-- Language Versions -->
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-language me-2"></i>
                        <?= __('available_languages') ?? 'Available in Other Languages' ?>
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row g-2">
                        <?php foreach (SUPPORTED_LANGUAGES as $code => $name): ?>
                            <div class="col-md-4 col-6">
                                <a href="?lang=<?= $code ?>"
                                   class="btn btn-sm <?= $code === $currentLang ? 'btn-primary' : 'btn-outline-primary' ?> w-100">
                                    <?= $name ?>
                                </a>
                            </div>
                        <?php endforeach; ?>
                    </div>
                </div>
            </div>

            <!-- Comments Section (Placeholder) -->
            <div class="card border-0 shadow-sm">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-comments me-2"></i>
                        <?= __('comments') ?? 'Comments' ?>
                    </h5>
                </div>
                <div class="card-body text-center py-5">
                    <i class="fas fa-comments fa-3x text-muted mb-3"></i>
                    <h6 class="text-muted"><?= __('comments_coming_soon') ?? 'Comments feature coming soon!' ?></h6>
                    <p class="text-muted small">
                        <?= __('use_chat_for_questions') ?? 'In the meantime, use our chat feature for questions and feedback.' ?>
                    </p>
                    <button class="btn btn-primary" onclick="toggleChat()">
                        <i class="fas fa-comment-dots me-2"></i><?= __('start_chat') ?? 'Start Chat' ?>
                    </button>
                </div>
            </div>
        </div>

        <!-- Sidebar -->
        <div class="col-lg-4">
            <div class="sticky-top" style="top: 100px;">
                <!-- Article Navigation -->
                <div class="card border-0 shadow-sm mb-4">
                    <div class="card-header">
                        <h6 class="mb-0">
                            <i class="fas fa-list me-2"></i><?= __('in_this_article') ?? 'In This Article' ?>
                        </h6>
                    </div>
                    <div class="card-body">
                        <div id="tableOfContents">
                            <p class="text-muted small">
                                <i class="fas fa-spinner fa-spin me-2"></i>
                                <?= __('generating_toc') ?? 'Generating table of contents...' ?>
                            </p>
                        </div>
                    </div>
                </div>

                <!-- Related Articles -->
                <div class="card border-0 shadow-sm mb-4">
                    <div class="card-header">
                        <h6 class="mb-0">
                            <i class="fas fa-bookmark me-2"></i><?= __('related_articles') ?>
                        </h6>
                    </div>
                    <div class="list-group list-group-flush">
                        <!-- This would be populated with related articles -->
                        <div class="list-group-item">
                            <p class="text-muted small text-center py-3">
                                <?= __('related_articles_coming_soon') ?? 'Related articles feature coming soon!' ?>
                            </p>
                        </div>
                    </div>
                </div>

                <!-- Share Widget -->
                <div class="card border-0 shadow-sm mb-4">
                    <div class="card-header">
                        <h6 class="mb-0">
                            <i class="fas fa-share me-2"></i><?= __('share_article') ?? 'Share This Article' ?>
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="d-grid gap-2">
                            <button class="btn btn-primary btn-sm" onclick="shareArticle('facebook')">
                                <i class="fab fa-facebook me-2"></i>Facebook
                            </button>
                            <button class="btn btn-info btn-sm" onclick="shareArticle('twitter')">
                                <i class="fab fa-twitter me-2"></i>Twitter
                            </button>
                            <button class="btn btn-primary btn-sm" onclick="shareArticle('linkedin')">
                                <i class="fab fa-linkedin me-2"></i>LinkedIn
                            </button>
                            <button class="btn btn-secondary btn-sm" onclick="copyArticleLink()">
                                <i class="fas fa-link me-2"></i><?= __('copy_link') ?? 'Copy Link' ?>
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Back to Blog -->
                <div class="card border-0 shadow-sm">
                    <div class="card-body text-center">
                        <a href="/?route=<?= $articleData['type'] ?>" class="btn btn-outline-primary">
                            <i class="fas fa-arrow-left me-2"></i>
                            <?= __('back_to') ?> <?= $articleData['type'] === 'internal' ? __('internal_blog') : __('external_blog') ?>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.avatar-circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.article-content {
    font-size: 1.1rem;
    line-height: 1.8;
}

.article-content h1,
.article-content h2,
.article-content h3,
.article-content h4,
.article-content h5,
.article-content h6 {
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: var(--text-dark);
}

.article-content p {
    margin-bottom: 1.5rem;
}

.article-content blockquote {
    border-left: 4px solid var(--primary-color);
    padding-left: 1.5rem;
    margin: 2rem 0;
    font-style: italic;
    color: var(--text-light);
}

.article-content img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    margin: 2rem 0;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.article-content code {
    background: var(--bg-light);
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    font-size: 0.9em;
}

.article-content pre {
    background: var(--bg-light);
    padding: 1.5rem;
    border-radius: 10px;
    overflow-x: auto;
    margin: 2rem 0;
}
</style>

<script>
function likeArticle(articleId) {
    // In a real implementation, this would make an AJAX call to like the article
    const likeCount = document.getElementById('likeCount');
    const likeCountFooter = document.getElementById('likeCountFooter');
    const currentCount = parseInt(likeCount.textContent.replace(/,/g, ''));
    const newCount = currentCount + 1;

    likeCount.textContent = newCount.toLocaleString();
    likeCountFooter.textContent = newCount.toLocaleString();

    // Show success message
    showToast('<?= __("article_liked") ?? "Article liked!" ?>', 'success');
}

function shareArticle(platform) {
    const url = encodeURIComponent(window.location.href);
    const title = encodeURIComponent('<?= htmlspecialchars($articleData['title'], ENT_QUOTES) ?>');

    let shareUrl;
    switch (platform) {
        case 'facebook':
            shareUrl = `https://www.facebook.com/sharer/sharer.php?u=${url}`;
            break;
        case 'twitter':
            shareUrl = `https://twitter.com/intent/tweet?url=${url}&text=${title}`;
            break;
        case 'linkedin':
            shareUrl = `https://www.linkedin.com/sharing/share-offsite/?url=${url}`;
            break;
    }

    if (shareUrl) {
        window.open(shareUrl, '_blank', 'width=600,height=400');
    }
}

function copyArticleLink() {
    navigator.clipboard.writeText(window.location.href).then(() => {
        showToast('<?= __("link_copied") ?? "Link copied to clipboard!" ?>', 'success');
    });
}

function showToast(message, type = 'info') {
    // Simple toast notification
    const toast = document.createElement('div');
    toast.className = `alert alert-${type === 'success' ? 'success' : 'info'} position-fixed`;
    toast.style.cssText = 'top: 20px; right: 20px; z-index: 1060; min-width: 250px;';
    toast.innerHTML = `
        <i class="fas fa-${type === 'success' ? 'check' : 'info'}-circle me-2"></i>
        ${message}
    `;

    document.body.appendChild(toast);

    setTimeout(() => {
        toast.remove();
    }, 3000);
}

// Generate table of contents
document.addEventListener('DOMContentLoaded', function() {
    const headings = document.querySelectorAll('.article-content h1, .article-content h2, .article-content h3');
    const toc = document.getElementById('tableOfContents');

    if (headings.length > 0) {
        let tocHTML = '<ul class="list-unstyled">';
        headings.forEach((heading, index) => {
            const id = `heading-${index}`;
            heading.id = id;
            const level = heading.tagName.substring(1);
            const indent = level > 2 ? 'ms-3' : '';
            tocHTML += `
                <li class="${indent} mb-1">
                    <a href="#${id}" class="text-decoration-none small">
                        ${heading.textContent}
                    </a>
                </li>
            `;
        });
        tocHTML += '</ul>';
        toc.innerHTML = tocHTML;
    } else {
        toc.innerHTML = '<p class="text-muted small"><?= __("no_headings_found") ?? "No headings found in this article." ?></p>';
    }
});
</script>

<?php include 'footer.php'; ?>