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

<div class="container py-5">
    <div class="row">
        <div class="col-lg-8">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <div>
                    <h1 class="display-5 fw-bold"><?= htmlspecialchars($pageTitle) ?></h1>
                    <?php if (isset($categoryData)): ?>
                        <p class="lead text-muted"><?= htmlspecialchars($categoryData['description']) ?></p>
                    <?php endif; ?>
                </div>
                <?php if (isset($_GET['q'])): ?>
                    <div class="text-muted">
                        <small><?= count($articles) ?> <?= __('results_found') ?? 'results found' ?></small>
                    </div>
                <?php endif; ?>
            </div>

            <?php if (!empty($articles)): ?>
                <div class="row g-4">
                    <?php foreach ($articles as $article): ?>
                        <div class="col-12">
                            <article class="card border-0 shadow-sm">
                                <div class="row g-0">
                                    <?php if ($article['featured_image']): ?>
                                        <div class="col-md-4">
                                            <img src="<?= htmlspecialchars($article['featured_image']) ?>"
                                                 class="img-fluid h-100 object-fit-cover rounded-start"
                                                 alt="<?= htmlspecialchars($article['title']) ?>">
                                        </div>
                                        <div class="col-md-8">
                                    <?php else: ?>
                                        <div class="col-12">
                                    <?php endif; ?>
                                        <div class="card-body p-4">
                                            <div class="mb-2">
                                                <span class="badge <?= $article['type'] === 'internal' ? 'badge-internal' : 'badge-external' ?>">
                                                    <?= $article['type'] === 'internal' ? __('internal_blog') : __('external_blog') ?>
                                                </span>
                                                <?php if ($article['is_ai_generated']): ?>
                                                    <span class="badge bg-info">
                                                        <i class="fas fa-robot"></i> AI
                                                    </span>
                                                <?php endif; ?>
                                                <?php if ($article['category_name']): ?>
                                                    <span class="badge bg-secondary">
                                                        <?= htmlspecialchars($article['category_name']) ?>
                                                    </span>
                                                <?php endif; ?>
                                            </div>

                                            <h3 class="card-title h4 mb-3">
                                                <a href="/?route=article&slug=<?= htmlspecialchars($article['slug']) ?>"
                                                   class="text-decoration-none text-dark">
                                                    <?= htmlspecialchars($article['title']) ?>
                                                </a>
                                            </h3>

                                            <p class="card-text text-muted mb-3">
                                                <?= htmlspecialchars(substr($article['excerpt'] ?: strip_tags($article['content']), 0, 200)) ?>...
                                            </p>

                                            <div class="d-flex justify-content-between align-items-center">
                                                <div class="text-muted small">
                                                    <i class="fas fa-user me-1"></i>
                                                    <?= htmlspecialchars($article['author_name'] ?: 'AI') ?>
                                                    <span class="mx-2">•</span>
                                                    <i class="fas fa-calendar me-1"></i>
                                                    <?= format_date($article['published_at'], 'M d, Y') ?>
                                                </div>
                                                <div class="text-muted small">
                                                    <i class="fas fa-eye me-1"></i>
                                                    <?= number_format($article['views']) ?>
                                                    <span class="mx-2">•</span>
                                                    <i class="fas fa-heart me-1"></i>
                                                    <?= number_format($article['likes']) ?>
                                                </div>
                                            </div>

                                            <div class="mt-3">
                                                <a href="/?route=article&slug=<?= htmlspecialchars($article['slug']) ?>"
                                                   class="btn btn-primary">
                                                    <?= __('read_more') ?>
                                                    <i class="fas fa-arrow-right ms-1"></i>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </article>
                        </div>
                    <?php endforeach; ?>
                </div>

                <!-- Pagination would go here -->
                <nav aria-label="Articles pagination" class="mt-5">
                    <ul class="pagination justify-content-center">
                        <li class="page-item disabled">
                            <span class="page-link"><?= __('previous') ?></span>
                        </li>
                        <li class="page-item active">
                            <span class="page-link">1</span>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="#">2</a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="#">3</a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="#"><?= __('next') ?></a>
                        </li>
                    </ul>
                </nav>

            <?php else: ?>
                <div class="text-center py-5">
                    <i class="fas fa-inbox fa-4x text-muted mb-3"></i>
                    <h4 class="text-muted">
                        <?php if (isset($_GET['q'])): ?>
                            <?= __('no_search_results') ?? 'No articles found for your search' ?>
                        <?php else: ?>
                            <?= __('no_articles_yet') ?? 'No articles available yet' ?>
                        <?php endif; ?>
                    </h4>
                    <p class="text-muted">
                        <?php if (isset($_GET['q'])): ?>
                            <?= __('try_different_search') ?? 'Try searching with different keywords' ?>
                        <?php else: ?>
                            <?= __('check_back_later') ?? 'Please check back later for new content' ?>
                        <?php endif; ?>
                    </p>
                    <a href="/" class="btn btn-primary">
                        <i class="fas fa-home me-2"></i><?= __('back_to_home') ?? 'Back to Home' ?>
                    </a>
                </div>
            <?php endif; ?>
        </div>

        <!-- Sidebar -->
        <div class="col-lg-4">
            <div class="sticky-top" style="top: 100px;">
                <!-- Search Widget -->
                <div class="card border-0 shadow-sm mb-4">
                    <div class="card-header bg-primary text-white">
                        <h6 class="mb-0">
                            <i class="fas fa-search me-2"></i><?= __('search') ?>
                        </h6>
                    </div>
                    <div class="card-body">
                        <form method="GET">
                            <input type="hidden" name="route" value="search">
                            <div class="input-group">
                                <input type="text" name="q" class="form-control"
                                       placeholder="<?= __('search_articles') ?? 'Search articles...' ?>"
                                       value="<?= htmlspecialchars($_GET['q'] ?? '') ?>">
                                <button class="btn btn-outline-primary" type="submit">
                                    <i class="fas fa-search"></i>
                                </button>
                            </div>
                        </form>
                    </div>
                </div>

                <!-- Categories Widget -->
                <?php if (!empty($categories)): ?>
                    <div class="card border-0 shadow-sm mb-4">
                        <div class="card-header bg-primary text-white">
                            <h6 class="mb-0">
                                <i class="fas fa-tags me-2"></i><?= __('categories') ?>
                            </h6>
                        </div>
                        <div class="list-group list-group-flush">
                            <?php foreach ($categories as $cat): ?>
                                <a href="/?route=category&id=<?= $cat['id'] ?>"
                                   class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
                                    <span style="color: <?= htmlspecialchars($cat['color']) ?>;">
                                        <i class="fas fa-tag me-2"></i><?= htmlspecialchars($cat['name']) ?>
                                    </span>
                                    <span class="badge bg-light text-dark"><?= $article->getCount() ?></span>
                                </a>
                            <?php endforeach; ?>
                        </div>
                    </div>
                <?php endif; ?>

                <!-- Language Switch Widget -->
                <div class="card border-0 shadow-sm mb-4">
                    <div class="card-header bg-primary text-white">
                        <h6 class="mb-0">
                            <i class="fas fa-language me-2"></i><?= __('language') ?>
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="row g-2">
                            <?php foreach (SUPPORTED_LANGUAGES as $code => $name): ?>
                                <div class="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>

                <!-- Help Widget -->
                <div class="card border-0 shadow-sm">
                    <div class="card-header bg-primary text-white">
                        <h6 class="mb-0">
                            <i class="fas fa-question-circle me-2"></i><?= __('need_help') ?? 'Need Help?' ?>
                        </h6>
                    </div>
                    <div class="card-body text-center">
                        <p class="card-text small text-muted mb-3">
                            <?= __('help_description') ?? 'Have questions? Our AI assistant is here to help!' ?>
                        </p>
                        <button class="btn btn-primary btn-sm" onclick="toggleChat()">
                            <i class="fas fa-comments me-2"></i><?= __('start_chat') ?? 'Start Chat' ?>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

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