{% extends 'frontend/base.html.twig' %}

{% block title %}{{ news.seoTitle|default(news.title) }} | Haber{% endblock %}
{% block meta_description %}{{ news.seoDescription|default(news.spot|default('')|striptags|slice(0, 160)) }}{% endblock %}
{% block meta_robots %}{{ news.robotsMeta|default('index, follow') }}{% endblock %}

{% block canonical %}{% if news.canonicalUrl %}{{ news.canonicalUrl }}{% endif %}{% endblock %}

{% block og_type %}article{% endblock %}
{% block og_image %}
    {% if news.featuredImage %}
        <meta property="og:image" content="{{ news.featuredImage|media_url }}">
    {% endif %}
{% endblock %}
{% block twitter_image %}
    {% if news.featuredImage %}
        <meta name="twitter:image" content="{{ news.featuredImage|media_url }}">
    {% endif %}
{% endblock %}

{% block structured_data %}
<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "NewsArticle",
    "headline": "{{ news.title|e('js') }}",
    "description": "{{ news.spot|default('')|striptags|slice(0, 200)|e('js') }}",
    {% if news.featuredImage %}"image": "{{ news.featuredImage|media_url }}",{% endif %}
    "datePublished": "{{ news.publishedAt ? news.publishedAt|date('c') : news.createdAt|date('c') }}",
    "dateModified": "{{ news.updatedAt|date('c') }}",
    {% if news.author %}
    "author": {
        "@type": "Person",
        "name": "{{ news.author.name|e('js') }}"
    },
    {% endif %}
    "publisher": {
        "@type": "Organization",
        "name": "Haber"
    },
    "mainEntityOfPage": {
        "@type": "WebPage",
        "@id": "{{ app.request.uri }}"
    }
}
</script>
{% endblock %}

{% block body %}
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">

    {# ===== AD POSITION: En Üst ===== #}
    {{ render_ad('en_ust', true) }}
    {{ render_widget_zone('news-detail-top') }}

    <div class="flex flex-col lg:flex-row gap-8">
        {# Main content area #}
        <article class="flex-1 min-w-0">

            {# ===== BREADCRUMB ===== #}
            <nav class="flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400 mb-6 overflow-x-auto" aria-label="Breadcrumb">
                <a href="{{ path('frontend_home') }}" class="hover:text-red-600 dark:hover:text-red-500 transition-colors whitespace-nowrap">
                    <i class="fas fa-home mr-1"></i> Ana Sayfa
                </a>
                <i class="fas fa-chevron-right text-xs text-gray-400"></i>
                {% if news.category %}
                    <a href="{{ path('frontend_category', {slug: news.category.slug}) }}"
                       class="hover:text-red-600 dark:hover:text-red-500 transition-colors whitespace-nowrap">
                        {{ news.category.title }}
                    </a>
                    <i class="fas fa-chevron-right text-xs text-gray-400"></i>
                {% endif %}
                <span class="text-gray-700 dark:text-gray-300 truncate">{{ news.title|slice(0, 60) }}{% if news.title|length > 60 %}...{% endif %}</span>
            </nav>

            {# ===== ARTICLE HEADER ===== #}
            <header class="mb-8">
                {% if news.category %}
                    <a href="{{ path('frontend_category', {slug: news.category.slug}) }}"
                       class="inline-block px-3 py-1 text-xs font-bold uppercase tracking-wider rounded-full text-white mb-4"
                       style="background-color: {{ news.category.color|default('#dc2626') }}">
                        {{ news.category.title }}
                    </a>
                {% endif %}

                <h1 class="text-3xl md:text-4xl font-bold text-gray-900 dark:text-gray-100 leading-tight mb-4">
                    {{ news.title }}
                </h1>

                {% if news.spot %}
                    <p class="text-lg text-gray-600 dark:text-gray-400 leading-relaxed mb-6 border-l-4 border-red-600 pl-4 italic">
                        {{ news.spot }}
                    </p>
                {% endif %}

                {# ===== AD: Başlık Altı ===== #}
                {{ render_ad('baslik_alti', true) }}

                <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 dark:text-gray-400 pb-6 border-b border-gray-200 dark:border-gray-700">
                    {% if news.author %}
                        <div class="flex items-center gap-2">
                            {% if news.author.photo %}
                                <img src="{{ news.author.photo }}" alt="{{ news.author.name }}"
                                     class="w-8 h-8 rounded-full object-cover">
                            {% else %}
                                <div class="w-8 h-8 rounded-full bg-red-100 dark:bg-red-900/30 flex items-center justify-center">
                                    <i class="fas fa-user text-red-600 dark:text-red-400 text-xs"></i>
                                </div>
                            {% endif %}
                            <span class="font-medium text-gray-700 dark:text-gray-300">{{ news.author.name }}</span>
                        </div>
                    {% endif %}
                    {% if news.publishedAt %}
                        <span><i class="far fa-calendar-alt mr-1"></i> {{ news.publishedAt|date("d.m.Y H:i") }}</span>
                    {% endif %}
                    <span><i class="far fa-eye mr-1"></i> {{ news.viewCount }} goruntulenme</span>
                    {% if news.commentCount > 0 %}
                        <span><i class="far fa-comment mr-1"></i> {{ news.commentCount }} yorum</span>
                    {% endif %}
                    {% if news.source %}
                        <span>
                            <i class="fas fa-external-link-alt mr-1"></i>
                            {% if news.sourceUrl %}
                                <a href="{{ news.sourceUrl }}" target="_blank" rel="noopener noreferrer" class="hover:text-red-600 transition-colors">{{ news.source }}</a>
                            {% else %}
                                {{ news.source }}
                            {% endif %}
                        </span>
                    {% endif %}
                </div>
            </header>

            {# ===== FEATURED IMAGE ===== #}
            {% if news.featuredImage %}
                <figure class="mb-8 rounded-xl overflow-hidden">
                    <img src="{{ news.featuredImage|media_url }}" alt="{{ news.title }}"
                         class="w-full h-auto object-cover">
                    {% if news.imageCaption %}
                        <figcaption class="text-sm text-gray-500 dark:text-gray-400 mt-2 italic px-1">
                            <i class="fas fa-camera mr-1"></i> {{ news.imageCaption }}
                        </figcaption>
                    {% endif %}
                </figure>

                {# ===== AD: Fotoğraf Altı ===== #}
                {{ render_ad('fotograf_alti', true) }}
            {% endif %}

            {# ===== CONTENT ===== #}
            <div class="prose prose-lg dark:prose-invert max-w-none mb-8
                        prose-headings:text-gray-900 dark:prose-headings:text-gray-100
                        prose-a:text-red-600 dark:prose-a:text-red-400
                        prose-img:rounded-xl prose-img:shadow-md
                        prose-blockquote:border-red-600">
                {{ news.content|raw }}
            </div>

            {# ===== TAGS ===== #}
            {% if news.tags|length > 0 %}
                <div class="mb-8 flex flex-wrap items-center gap-2">
                    <span class="text-sm font-medium text-gray-500 dark:text-gray-400 mr-1">
                        <i class="fas fa-tags mr-1"></i> Etiketler:
                    </span>
                    {% for tag in news.tags %}
                        <a href="{{ path('frontend_tag', {slug: tag.slug}) }}"
                           class="inline-block px-3 py-1 text-sm bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 rounded-full hover:bg-red-100 dark:hover:bg-red-900/30 hover:text-red-600 dark:hover:text-red-400 transition-colors">
                            #{{ tag.name }}
                        </a>
                    {% endfor %}
                </div>
            {% endif %}

            {# ===== SHARE BUTTONS ===== #}
            <div class="mb-8 p-5 bg-gray-50 dark:bg-gray-800/50 rounded-xl border border-gray-200 dark:border-gray-700">
                <h3 class="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3">
                    <i class="fas fa-share-alt mr-1"></i> Bu haberi paylas
                </h3>
                <div class="flex flex-wrap gap-2">
                    <a href="https://www.facebook.com/sharer/sharer.php?u={{ app.request.uri|url_encode }}"
                       target="_blank" rel="noopener noreferrer"
                       class="flex items-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg transition-colors">
                        <i class="fab fa-facebook-f"></i> Facebook
                    </a>
                    <a href="https://twitter.com/intent/tweet?url={{ app.request.uri|url_encode }}&text={{ news.title|url_encode }}"
                       target="_blank" rel="noopener noreferrer"
                       class="flex items-center gap-2 px-4 py-2 bg-sky-500 hover:bg-sky-600 text-white text-sm font-medium rounded-lg transition-colors">
                        <i class="fab fa-twitter"></i> Twitter
                    </a>
                    <a href="https://t.me/share/url?url={{ app.request.uri|url_encode }}&text={{ news.title|url_encode }}"
                       target="_blank" rel="noopener noreferrer"
                       class="flex items-center gap-2 px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white text-sm font-medium rounded-lg transition-colors">
                        <i class="fab fa-telegram-plane"></i> Telegram
                    </a>
                    <a href="https://api.whatsapp.com/send?text={{ news.title|url_encode }}%20{{ app.request.uri|url_encode }}"
                       target="_blank" rel="noopener noreferrer"
                       class="flex items-center gap-2 px-4 py-2 bg-green-600 hover:bg-green-700 text-white text-sm font-medium rounded-lg transition-colors">
                        <i class="fab fa-whatsapp"></i> WhatsApp
                    </a>
                </div>
            </div>

            {# ===== AD: Sayfa Sonu ===== #}
            {{ render_ad('sayfa_sonu', true) }}
            {{ render_widget_zone('news-detail-after-content') }}

            {# ===== SEO SCORE (Admin only) ===== #}
            {% if is_granted('ROLE_ADMIN') %}
                <div class="mb-8 p-4 bg-yellow-50 dark:bg-yellow-900/20 rounded-xl border border-yellow-200 dark:border-yellow-800">
                    <h4 class="text-sm font-semibold text-yellow-800 dark:text-yellow-200 mb-2">
                        <i class="fas fa-chart-line mr-1"></i> SEO Bilgileri (Yonetici)
                    </h4>
                    <div class="flex items-center gap-4 text-sm">
                        <span class="text-gray-600 dark:text-gray-400">
                            SEO Skoru:
                            <span class="font-bold {% if news.seoScore >= 70 %}text-green-600{% elseif news.seoScore >= 40 %}text-yellow-600{% else %}text-red-600{% endif %}">
                                {{ news.seoScore }}/100
                            </span>
                        </span>
                        {% if news.focusKeyword %}
                            <span class="text-gray-600 dark:text-gray-400">
                                Odak Anahtar Kelime: <strong>{{ news.focusKeyword }}</strong>
                            </span>
                        {% endif %}
                    </div>
                    <div class="mt-2 w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
                        <div class="h-2 rounded-full transition-all {% if news.seoScore >= 70 %}bg-green-500{% elseif news.seoScore >= 40 %}bg-yellow-500{% else %}bg-red-500{% endif %}"
                             style="width: {{ news.seoScore }}%"></div>
                    </div>
                </div>
            {% endif %}

            {# ===== RELATED NEWS ===== #}
            {% if relatedNews|length > 0 %}
                <section class="mb-10">
                    <div class="flex items-center gap-3 mb-6">
                        <h2 class="text-xl font-bold text-gray-900 dark:text-gray-100 whitespace-nowrap">
                            <i class="fas fa-newspaper mr-2 text-red-600"></i> Ilgili Haberler
                        </h2>
                        <div class="flex-1 h-px bg-gray-200 dark:bg-gray-700"></div>
                    </div>
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
                        {% for related in relatedNews %}
                            <article class="group bg-white dark:bg-gray-900 rounded-xl overflow-hidden shadow-sm hover:shadow-xl border border-gray-100 dark:border-gray-800 transition-all duration-300">
                                <a href="{{ path('frontend_news_detail', {slug: related.slug}) }}" class="block relative overflow-hidden aspect-video">
                                    {% if related.featuredImage %}
                                        <img src="{{ related.featuredImage|media_url }}" alt="{{ related.title }}"
                                             class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                                             loading="lazy">
                                    {% else %}
                                        <div class="w-full h-full bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 flex items-center justify-center">
                                            <i class="far fa-image text-3xl text-gray-400 dark:text-gray-600"></i>
                                        </div>
                                    {% endif %}
                                </a>
                                <div class="p-4">
                                    <h3 class="text-base font-bold text-gray-900 dark:text-gray-100 leading-snug mb-2 line-clamp-2 group-hover:text-red-600 dark:group-hover:text-red-400 transition-colors">
                                        <a href="{{ path('frontend_news_detail', {slug: related.slug}) }}">
                                            {{ related.title }}
                                        </a>
                                    </h3>
                                    <div class="flex items-center gap-3 text-xs text-gray-500">
                                        {% if related.publishedAt %}
                                            <span><i class="far fa-clock mr-1"></i>{{ related.publishedAt|date("d.m.Y") }}</span>
                                        {% endif %}
                                        <span><i class="far fa-eye mr-1"></i>{{ related.viewCount }}</span>
                                    </div>
                                </div>
                            </article>
                        {% endfor %}
                    </div>
                </section>
            {% endif %}

            {# ===== COMMENT SECTION ===== #}
            {% if news.allowComments and module_active('comment') %}
                <section id="yorumlar" class="mb-10">
                    <div class="flex items-center gap-3 mb-6">
                        <h2 class="text-xl font-bold text-gray-900 dark:text-gray-100 whitespace-nowrap">
                            <i class="far fa-comments mr-2 text-red-600"></i> Yorumlar ({{ comments|length }})
                        </h2>
                        <div class="flex-1 h-px bg-gray-200 dark:bg-gray-700"></div>
                    </div>

                    {# Comment list #}
                    {% if comments|length > 0 %}
                        <div class="space-y-4 mb-8">
                            {% for comment in comments %}
                                <div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-100 dark:border-gray-800 p-5">
                                    <div class="flex items-start gap-3">
                                        <div class="w-10 h-10 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center flex-shrink-0">
                                            <i class="fas fa-user text-gray-400 dark:text-gray-500"></i>
                                        </div>
                                        <div class="flex-1">
                                            <div class="flex items-center gap-2 mb-1">
                                                <span class="font-semibold text-gray-900 dark:text-gray-100 text-sm">{{ comment.authorName }}</span>
                                                <span class="text-xs text-gray-500">{{ comment.createdAt|date("d.m.Y H:i") }}</span>
                                            </div>
                                            <p class="text-sm text-gray-700 dark:text-gray-300 leading-relaxed">
                                                {{ comment.content|nl2br }}
                                            </p>

                                            {# Child comments (replies) #}
                                            {% if comment.children|length > 0 %}
                                                <div class="mt-4 ml-4 space-y-3 border-l-2 border-gray-200 dark:border-gray-700 pl-4">
                                                    {% for reply in comment.children %}
                                                        {% if reply.status == 'approved' %}
                                                            <div class="bg-gray-50 dark:bg-gray-800 rounded-lg p-3">
                                                                <div class="flex items-center gap-2 mb-1">
                                                                    <span class="font-semibold text-gray-900 dark:text-gray-100 text-sm">{{ reply.authorName }}</span>
                                                                    <span class="text-xs text-gray-500">{{ reply.createdAt|date("d.m.Y H:i") }}</span>
                                                                </div>
                                                                <p class="text-sm text-gray-700 dark:text-gray-300">{{ reply.content|nl2br }}</p>
                                                            </div>
                                                        {% endif %}
                                                    {% endfor %}
                                                </div>
                                            {% endif %}
                                        </div>
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                    {% else %}
                        <div class="text-center py-8 text-gray-500 dark:text-gray-400 mb-8">
                            <i class="far fa-comment-dots text-4xl mb-3 block"></i>
                            <p>Henuz yorum yapilmamis. Ilk yorumu siz yapin!</p>
                        </div>
                    {% endif %}

                    {# Comment form #}
                    <div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-100 dark:border-gray-800 p-6">
                        <h3 class="text-lg font-bold text-gray-900 dark:text-gray-100 mb-4">Yorum Yap</h3>
                        <form action="{{ path('frontend_news_comment', {slug: news.slug}) }}" method="POST" class="space-y-4">
                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                                <div>
                                    <label for="author_name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                                        Adiniz <span class="text-red-600">*</span>
                                    </label>
                                    <input type="text" id="author_name" name="author_name" required
                                           class="w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 px-4 py-2.5 text-sm focus:ring-2 focus:ring-red-500 focus:border-red-500 outline-none transition-colors"
                                           placeholder="Adinizi girin">
                                </div>
                                <div>
                                    <label for="author_email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                                        E-posta (istege bagli)
                                    </label>
                                    <input type="email" id="author_email" name="author_email"
                                           class="w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 px-4 py-2.5 text-sm focus:ring-2 focus:ring-red-500 focus:border-red-500 outline-none transition-colors"
                                           placeholder="E-posta adresiniz">
                                </div>
                            </div>
                            <div>
                                <label for="comment_content" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                                    Yorumunuz <span class="text-red-600">*</span>
                                </label>
                                <textarea id="comment_content" name="content" rows="4" required
                                          class="w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 px-4 py-2.5 text-sm focus:ring-2 focus:ring-red-500 focus:border-red-500 outline-none transition-colors resize-y"
                                          placeholder="Yorumunuzu yazin..."></textarea>
                            </div>
                            <div class="flex justify-end">
                                <button type="submit"
                                        class="px-6 py-2.5 bg-red-600 hover:bg-red-700 text-white text-sm font-semibold rounded-lg shadow-sm hover:shadow-md transition-all">
                                    <i class="fas fa-paper-plane mr-1"></i> Yorum Gonder
                                </button>
                            </div>
                        </form>
                    </div>
                </section>
            {% endif %}

        </article>

        {# ===== SIDEBAR ===== #}
        <aside class="w-full lg:w-80 flex-shrink-0 space-y-8">
            {# AD: Sidebar Üst #}
            {{ render_ad('sidebar_ust', true) }}

            {{ render_widget_zone('news-detail-sidebar') }}
            {{ render_widget_zone('sidebar') }}

            {# AD: Sidebar Orta #}
            {{ render_ad('sidebar_orta', true) }}

            {# AMP link #}
            {% if news.showInAmp and module_active('amp') %}
                <div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-100 dark:border-gray-800 shadow-sm p-4">
                    <a href="{{ path('frontend_amp_news', {slug: news.slug}) }}"
                       class="flex items-center gap-2 text-sm text-blue-600 dark:text-blue-400 hover:underline">
                        <i class="fas fa-bolt"></i> AMP versiyonunu goruntule
                    </a>
                </div>
            {% endif %}

            {# ===== SHARED SIDEBAR WIDGETS ===== #}
            {% include 'frontend/partials/_sidebar_widgets.html.twig' %}
        </aside>
    </div>
</div>
{% endblock %}
