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

{% block title %}Haberler{% endblock %}
{% block page_title %}Haber Yönetimi{% endblock %}

{% block body %}
    {# Limit banner #}
    {% if newsLimit is defined and newsLimit.max > 0 %}
        <div class="mb-4 rounded-xl border p-3 {{ newsLimit.percentUsed >= 100 ? 'bg-red-50 border-red-200' : (newsLimit.percentUsed >= 80 ? 'bg-amber-50 border-amber-200' : 'bg-emerald-50 border-emerald-200') }}">
            <div class="flex items-center justify-between">
                <div class="flex items-center gap-2">
                    <i class="fas {{ newsLimit.percentUsed >= 100 ? 'fa-exclamation-circle text-red-500' : (newsLimit.percentUsed >= 80 ? 'fa-exclamation-triangle text-amber-500' : 'fa-newspaper text-emerald-500') }}"></i>
                    <span class="text-sm {{ newsLimit.percentUsed >= 100 ? 'text-red-700' : (newsLimit.percentUsed >= 80 ? 'text-amber-700' : 'text-emerald-700') }}">
                        <strong>{{ newsLimit.current }}/{{ newsLimit.max }}</strong> haber kullanildi
                        {% if newsLimit.percentUsed >= 100 %}
                            — Limit doldu!
                        {% endif %}
                    </span>
                </div>
                <div class="flex items-center gap-2">
                    <div class="w-32 bg-white/60 rounded-full h-2 overflow-hidden">
                        <div class="h-2 rounded-full {{ newsLimit.percentUsed >= 100 ? 'bg-red-500' : (newsLimit.percentUsed >= 80 ? 'bg-amber-500' : 'bg-emerald-500') }}"
                             style="width: {{ newsLimit.percentUsed > 100 ? 100 : newsLimit.percentUsed }}%"></div>
                    </div>
                    <span class="text-xs font-medium {{ newsLimit.percentUsed >= 100 ? 'text-red-600' : (newsLimit.percentUsed >= 80 ? 'text-amber-600' : 'text-emerald-600') }}">%{{ newsLimit.percentUsed|round(0) }}</span>
                </div>
            </div>
        </div>
    {% endif %}

    {# Actions bar #}
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-6 gap-4">
        <div class="flex items-center gap-3">
            {% if newsLimit is defined and not newsLimit.allowed %}
                <span class="btn-primary opacity-50 cursor-not-allowed" title="Haber limiti doldu">
                    <i class="fas fa-lock mr-2"></i> Limit Doldu
                </span>
            {% else %}
                <a href="{{ path('admin_news_create') }}" class="btn-primary">
                    <i class="fas fa-plus mr-2"></i> Yeni Haber
                </a>
            {% endif %}
        </div>

        <div class="flex items-center gap-3">
            {# Search #}
            <form method="get" class="flex items-center gap-2">
                <input type="text" name="q" value="{{ searchQuery }}" placeholder="Haber ara..."
                       class="form-input w-64">
                <button type="submit" class="btn-outline">
                    <i class="fas fa-search"></i>
                </button>
            </form>
        </div>
    </div>

    {# Status filters #}
    <div class="flex gap-2 mb-4">
        <a href="{{ path('admin_news_index') }}"
           class="{{ not currentStatus ? 'btn-primary btn-sm' : 'btn-outline btn-sm' }}">
            Tümü
        </a>
        <a href="{{ path('admin_news_index', {status: 'published'}) }}"
           class="{{ currentStatus == 'published' ? 'btn-primary btn-sm' : 'btn-outline btn-sm' }}">
            Yayında
        </a>
        <a href="{{ path('admin_news_index', {status: 'draft'}) }}"
           class="{{ currentStatus == 'draft' ? 'btn-primary btn-sm' : 'btn-outline btn-sm' }}">
            Taslak
        </a>
        <a href="{{ path('admin_news_index', {status: 'pending'}) }}"
           class="{{ currentStatus == 'pending' ? 'btn-primary btn-sm' : 'btn-outline btn-sm' }}">
            Beklemede
        </a>
    </div>

    {# News table #}
    <div class="card overflow-hidden">
        <div class="overflow-x-auto">
            <table class="table">
                <thead>
                    <tr>
                        <th class="w-8">
                            <input type="checkbox" class="rounded border-gray-300">
                        </th>
                        <th>Başlık</th>
                        <th>Kategori</th>
                        <th>Yazar</th>
                        <th>Durum</th>
                        <th>Öne Çıkarma</th>
                        <th>SEO</th>
                        <th>Görüntülenme</th>
                        <th>Tarih</th>
                        <th class="w-24">İşlem</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200 bg-white">
                    {% for news in pagination %}
                        <tr>
                            <td>
                                <input type="checkbox" class="rounded border-gray-300" value="{{ news.id }}">
                            </td>
                            <td>
                                <div class="max-w-xs">
                                    <a href="{{ path('admin_news_edit', {id: news.id}) }}"
                                       class="font-medium text-gray-900 hover:text-primary-600 truncate block">
                                        {{ news.title }}
                                    </a>
                                </div>
                            </td>
                            <td>
                                {% if news.category %}
                                    <span class="badge-info">{{ news.category.title }}</span>
                                {% else %}
                                    <span class="text-gray-400">-</span>
                                {% endif %}
                            </td>
                            <td class="text-gray-500 text-sm">
                                {{ news.author ? news.author.name : '-' }}
                            </td>
                            <td>
                                {% if news.status == 'published' %}
                                    <span class="badge-success">Yayında</span>
                                {% elseif news.status == 'draft' %}
                                    <span class="badge-gray">Taslak</span>
                                {% elseif news.status == 'pending' %}
                                    <span class="badge-warning">Beklemede</span>
                                {% elseif news.status == 'archived' %}
                                    <span class="badge-gray">Arşiv</span>
                                {% endif %}
                            </td>
                            <td data-turbo="false">
                                <div class="flex flex-wrap gap-1">
                                    {% set toggleUrl = path('admin_news_toggle_highlight', {id: news.id}) %}
                                    <button type="button"
                                            onclick="toggleHighlight(this, '{{ toggleUrl }}', 'isBreaking')"
                                            data-active="{{ news.isBreaking ? '1' : '0' }}"
                                            data-colors-on="bg-red-100 text-red-700 border-red-300"
                                            data-colors-off="bg-gray-50 text-gray-400 border-gray-200"
                                            class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium border transition-colors cursor-pointer {{ news.isBreaking ? 'bg-red-100 text-red-700 border-red-300' : 'bg-gray-50 text-gray-400 border-gray-200' }}"
                                            title="Son Dakika">
                                        <i class="fas fa-bolt text-[10px]"></i>
                                        <span class="hidden xl:inline">Son Dakika</span>
                                    </button>
                                    <button type="button"
                                            onclick="toggleHighlight(this, '{{ toggleUrl }}', 'isFeatured')"
                                            data-active="{{ news.isFeatured ? '1' : '0' }}"
                                            data-colors-on="bg-blue-100 text-blue-700 border-blue-300"
                                            data-colors-off="bg-gray-50 text-gray-400 border-gray-200"
                                            class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium border transition-colors cursor-pointer {{ news.isFeatured ? 'bg-blue-100 text-blue-700 border-blue-300' : 'bg-gray-50 text-gray-400 border-gray-200' }}"
                                            title="Manşet">
                                        <i class="fas fa-newspaper text-[10px]"></i>
                                        <span class="hidden xl:inline">Manşet</span>
                                    </button>
                                    <button type="button"
                                            onclick="toggleHighlight(this, '{{ toggleUrl }}', 'isHeadline')"
                                            data-active="{{ news.isHeadline ? '1' : '0' }}"
                                            data-colors-on="bg-green-100 text-green-700 border-green-300"
                                            data-colors-off="bg-gray-50 text-gray-400 border-gray-200"
                                            class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium border transition-colors cursor-pointer {{ news.isHeadline ? 'bg-green-100 text-green-700 border-green-300' : 'bg-gray-50 text-gray-400 border-gray-200' }}"
                                            title="Ana Sayfa">
                                        <i class="fas fa-home text-[10px]"></i>
                                        <span class="hidden xl:inline">Ana Sayfa</span>
                                    </button>
                                    <button type="button"
                                            onclick="toggleHighlight(this, '{{ toggleUrl }}', 'isEditorsPick')"
                                            data-active="{{ news.isEditorsPick ? '1' : '0' }}"
                                            data-colors-on="bg-purple-100 text-purple-700 border-purple-300"
                                            data-colors-off="bg-gray-50 text-gray-400 border-gray-200"
                                            class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium border transition-colors cursor-pointer {{ news.isEditorsPick ? 'bg-purple-100 text-purple-700 border-purple-300' : 'bg-gray-50 text-gray-400 border-gray-200' }}"
                                            title="Editörün Seçimi">
                                        <i class="fas fa-star text-[10px]"></i>
                                        <span class="hidden xl:inline">Editör</span>
                                    </button>
                                </div>
                            </td>
                            <td>
                                {% set seoClass = news.seoScore >= 80 ? 'text-green-600' : (news.seoScore >= 50 ? 'text-yellow-600' : 'text-red-600') %}
                                <span class="{{ seoClass }} font-semibold">%{{ news.seoScore }}</span>
                            </td>
                            <td class="text-gray-500">{{ news.viewCount|number_format(0, ',', '.') }}</td>
                            <td class="text-gray-500 text-sm">
                                {{ news.createdAt|date('d.m.Y') }}
                            </td>
                            <td>
                                <div class="flex items-center gap-2">
                                    <a href="{{ path('admin_news_edit', {id: news.id}) }}"
                                       class="text-primary-600 hover:text-primary-900" title="Düzenle">
                                        <i class="fas fa-edit"></i>
                                    </a>
                                    <form method="post" action="{{ path('admin_news_delete', {id: news.id}) }}"
                                          onsubmit="return confirm('Bu haberi silmek istediğinize emin misiniz?')">
                                        <input type="hidden" name="_token" value="{{ csrf_token('delete_news_' ~ news.id) }}">
                                        <button type="submit" class="text-red-600 hover:text-red-900" title="Sil">
                                            <i class="fas fa-trash-alt"></i>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    {% else %}
                        <tr>
                            <td colspan="10" class="text-center text-gray-500 py-12">
                                <i class="fas fa-newspaper text-4xl text-gray-300 mb-3 block"></i>
                                Henüz haber eklenmemiş.
                                <br>
                                <a href="{{ path('admin_news_create') }}" class="text-primary-600 hover:text-primary-500 mt-2 inline-block">
                                    İlk haberi ekleyin
                                </a>
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        {# Pagination #}
        {% if pagination.getTotalItemCount > 0 %}
            <div class="card-footer flex items-center justify-between">
                <p class="text-sm text-gray-700">
                    Toplam <span class="font-medium">{{ pagination.getTotalItemCount }}</span> haber
                </p>
                <div class="knp-pagination">
                    {{ knp_pagination_render(pagination) }}
                </div>
            </div>
        {% endif %}
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script data-turbo-permanent>
        function toggleHighlight(btn, url, field) {
            fetch(url, {
                method: 'POST',
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                body: 'field=' + field
            })
            .then(function(r) { return r.json(); })
            .then(function(data) {
                if (data.success) {
                    var onClasses = btn.dataset.colorsOn.split(' ');
                    var offClasses = btn.dataset.colorsOff.split(' ');
                    if (data.value) {
                        btn.dataset.active = '1';
                        offClasses.forEach(function(c) { btn.classList.remove(c); });
                        onClasses.forEach(function(c) { btn.classList.add(c); });
                    } else {
                        btn.dataset.active = '0';
                        onClasses.forEach(function(c) { btn.classList.remove(c); });
                        offClasses.forEach(function(c) { btn.classList.add(c); });
                    }
                }
            });
        }
    </script>
{% endblock %}
