<?php

/**
 * @var \News\Models\NewsArticle $article
 * @var \News\Models\NewsSection $current_section
 */

$this->layout('system::layout/default');

$tags = [];
if (! empty($article->tags)) {
    foreach ($article->tags as $k => $tag) {
        $tags[] = '<a href="/news/search_tags/?tag=' . urlencode($tag) . '" class="text-blue-600 hover:text-blue-800 transition-colors duration-200">' . $tag . '</a>';
    }
}

$author = $article->author;

?>
<div id="blog" class="max-w-4xl mx-auto">
    <!-- Article Content -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 mb-6">
        <div class="prose prose-lg max-w-none">
            <?= $article->text_safe ?>
        </div>
    </div>

    <!-- Article Meta Information -->
    <div class="bg-gray-50 rounded-xl p-6 mb-6">
        <div class="space-y-2 text-sm text-gray-600">
            <div class="flex items-center">
                <svg class="w-4 h-4 mr-2 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                </svg>
                <span><?= __('Published:') ?> <strong class="text-gray-800"><?= $article->display_date ?></strong></span>
            </div>

            <?php if($author): ?>
                <div class="flex items-center">
                    <svg class="w-4 h-4 mr-2 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                    </svg>
                    <span><?= __('Author:') ?> <a href="<?= $author->profile_url ?>" rel="nofollow" class="text-blue-600 hover:text-blue-800 font-medium transition-colors duration-200"><?= $author->name ?></a></span>
                </div>
            <?php endif; ?>

            <?php if (! empty($tags)): ?>
                <div class="flex items-start">
                    <svg class="w-4 h-4 mr-2 text-gray-400 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"/>
                    </svg>
                    <div>
                        <span class="mr-2"><?= __('Tags:') ?></span>
                        <div class="inline-flex flex-wrap gap-1">
                            <?= implode('', array_map(function($tag) {
                                return '<span class="inline-block">' . $tag . '</span>';
                            }, $tags)) ?>
                        </div>
                    </div>
                </div>
            <?php endif; ?>
        </div>
    </div>

    <!-- Article Statistics -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 mb-6">
        <div class="flex items-center justify-between">
            <!-- Rating Component -->
            <div class="flex items-center">
                <span class="text-gray-600 mr-3 font-medium"><?= __('Rating:') ?></span>
                <div class="vue_app">
                    <likes-component
                        :article_id="<?= $article->id ?>"
                        :rating="<?= $article->rating ?>"
                        :can_vote="<?= $user->isValid() ? 'true' : 'false' ?>"
                        :voted="<?= $article->current_vote ?>"
                    ></likes-component>
                </div>
            </div>

            <!-- View Count -->
            <?php if ($article->view_count): ?>
                <div class="flex items-center text-gray-500">
                    <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
                    </svg>
                    <span class="font-medium"><?= $article->view_count ?></span>
                </div>
            <?php endif ?>
        </div>
    </div>

    <!-- Comments Section -->
    <?php
    $messages = [
        'write_comment' => __('Write a comment'),
        'send'          => __('Send'),
        'delete'        => __('Delete'),
        'quote'         => __('Quote'),
        'reply'         => __('Reply'),
        'comments'      => __('Comments'),
        'empty_list'    => __('The list is empty'),
    ];
    if ($locale !== 'en') {
        try {
            echo '<script src="' . $this->asset('ckeditor5/translations/' . $locale . '.js', true) . '"></script>';
        } catch (Exception $exception) {
        }
    }
    ?>
    <script src="<?= $this->asset('ckeditor5/ckeditor.js', true) ?>"></script>
    
    <div class="vue_app" id="article-comments">
        <comments-component
            upload_url="/news/comments/upload_file/"
            :article_id="<?= $article->id ?>"
            :can_write="<?= $user->isValid() && empty($user->ban) ? 'true' : 'false' ?>"
            :i18n='<?= json_encode($messages) ?>'
            language="<?= $locale ?>"
        ></comments-component>
    </div>

    <!-- Login Warning -->
    <?php if (! $user->isValid()): ?>
        <div class="bg-yellow-50 border border-yellow-200 rounded-xl p-4 mb-6">
            <div class="flex items-center">
                <svg class="w-5 h-5 text-yellow-600 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
                </svg>
                <div class="text-yellow-800">
                    <?= __('You are not logged in. You must be <a href="/login/" class="text-yellow-700 hover:text-yellow-900 underline font-medium">logged in</a> to comment.') ?>
                </div>
            </div>
        </div>
    <?php endif; ?>

    <!-- Back Button -->
    <div class="mt-6">
        <a href="<?= ($current_section !== null ? $current_section->url : '/news/') ?>" 
           class="inline-flex items-center px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition-colors duration-200 font-medium">
            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
            </svg>
            <?= __('Back') ?>
        </a>
    </div>
</div>

<style>
.prose {
    color: #374151;
    line-height: 1.75;
}

.prose h1, .prose h2, .prose h3, .prose h4 {
    color: #111827;
    font-weight: 600;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}

.prose p {
    margin-bottom: 1em;
}

.prose ul, .prose ol {
    margin-bottom: 1em;
    padding-left: 1.5em;
}

.prose li {
    margin-bottom: 0.5em;
}

.prose a {
    color: #2563eb;
    text-decoration: underline;
}

.prose a:hover {
    color: #1d4ed8;
}

.prose img {
    max-width: 100%;
    height: auto;
    border-radius: 0.5rem;
}
</style>