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

{% block title %}{{ config.agencyName }} Haberleri{% endblock %}
{% block page_title %}{{ config.agencyName }} - Gelen Haberler{% endblock %}

{% block body %}
    {# Breadcrumb #}
    <div class="mb-6">
        <nav class="flex items-center gap-2 text-sm text-gray-500">
            <a href="{{ path('admin_agency') }}" class="hover:text-primary-600 transition-colors">
                <i class="fas fa-rss mr-1"></i> Ajanslar
            </a>
            <i class="fas fa-chevron-right text-xs text-gray-300"></i>
            <span class="text-gray-900 font-medium">{{ config.agencyName }}</span>
        </nav>
    </div>

    {# Stats Bar #}
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
        <a href="{{ path('admin_agency_items', {slug: config.agencySlug}) }}"
           class="card {{ not currentStatus ? 'ring-2 ring-primary-500' : '' }}">
            <div class="card-body text-center py-3">
                <p class="text-2xl font-bold text-gray-900">{{ stats.total }}</p>
                <p class="text-xs text-gray-500">Toplam</p>
            </div>
        </a>
        <a href="{{ path('admin_agency_items', {slug: config.agencySlug, status: 'pending'}) }}"
           class="card {{ currentStatus == 'pending' ? 'ring-2 ring-yellow-500' : '' }}">
            <div class="card-body text-center py-3">
                <p class="text-2xl font-bold text-yellow-600">{{ stats.pending }}</p>
                <p class="text-xs text-gray-500">Bekleyen</p>
            </div>
        </a>
        <a href="{{ path('admin_agency_items', {slug: config.agencySlug, status: 'imported'}) }}"
           class="card {{ currentStatus == 'imported' ? 'ring-2 ring-green-500' : '' }}">
            <div class="card-body text-center py-3">
                <p class="text-2xl font-bold text-green-600">{{ stats.imported }}</p>
                <p class="text-xs text-gray-500">Import Edildi</p>
            </div>
        </a>
        <a href="{{ path('admin_agency_items', {slug: config.agencySlug, status: 'skipped'}) }}"
           class="card {{ currentStatus == 'skipped' ? 'ring-2 ring-gray-500' : '' }}">
            <div class="card-body text-center py-3">
                <p class="text-2xl font-bold text-gray-400">{{ stats.skipped }}</p>
                <p class="text-xs text-gray-500">Atlandi</p>
            </div>
        </a>
    </div>

    {# Action 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">
            <form method="post" action="{{ path('admin_agency_fetch', {id: config.id}) }}">
                <input type="hidden" name="_token" value="{{ csrf_token('fetch_agency_' ~ config.id) }}">
                <button type="submit" class="btn-primary">
                    <i class="fas fa-download mr-2"></i> Yeni Haberleri Cek
                </button>
            </form>

            {% if stats.pending > 0 %}
                <form method="post" action="{{ path('admin_agency_import_all', {slug: config.agencySlug}) }}"
                      onsubmit="return confirm('{{ stats.pending }} bekleyen haberin tumunu import etmek istediginize emin misiniz?')">
                    <input type="hidden" name="_token" value="{{ csrf_token('import_all_' ~ config.agencySlug) }}">
                    <button type="submit" class="inline-flex items-center px-4 py-2.5 text-sm font-medium rounded-xl text-white bg-green-600 hover:bg-green-700 shadow-sm transition-all duration-200">
                        <i class="fas fa-file-import mr-2"></i> Tumunu Import Et ({{ stats.pending }})
                    </button>
                </form>
            {% endif %}
        </div>
        <div class="text-sm text-gray-500">
            {% if config.lastFetchedAt %}
                Son cekme: {{ config.lastFetchedAt|date('d.m.Y H:i') }}
            {% else %}
                Henuz haber cekilmemis.
            {% endif %}
        </div>
    </div>

    {# Items table #}
    <div class="card overflow-hidden">
        <div class="overflow-x-auto">
            <table class="table">
                <thead>
                    <tr>
                        <th class="w-12">#</th>
                        <th>Baslik</th>
                        <th>Kategori</th>
                        <th>Durum</th>
                        <th>Tarih</th>
                        <th class="w-32">Islem</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200 bg-white">
                    {% for item in items %}
                        <tr class="hover:bg-gray-50 transition-colors">
                            <td class="text-gray-500 text-sm">{{ item.id }}</td>
                            <td>
                                <div class="max-w-md">
                                    <p class="font-medium text-gray-900 text-sm leading-snug line-clamp-2">
                                        {{ item.title }}
                                    </p>
                                    {% if item.summary %}
                                        <p class="text-xs text-gray-500 mt-1 line-clamp-1">
                                            {{ item.summary|striptags|slice(0, 100) }}
                                        </p>
                                    {% endif %}
                                    <p class="text-xs text-gray-400 mt-0.5">
                                        ID: {{ item.externalId }}
                                    </p>
                                </div>
                            </td>
                            <td>
                                {% if item.category %}
                                    <span class="badge-info">{{ item.category }}</span>
                                {% else %}
                                    <span class="text-gray-400">-</span>
                                {% endif %}
                            </td>
                            <td>
                                {% if item.status == 'pending' %}
                                    <span class="inline-flex items-center rounded-full bg-yellow-50 px-2.5 py-0.5 text-xs font-medium text-yellow-700 ring-1 ring-inset ring-yellow-600/20">
                                        <i class="fas fa-clock mr-1"></i> Bekliyor
                                    </span>
                                {% elseif item.status == 'imported' %}
                                    <span class="inline-flex items-center rounded-full bg-green-50 px-2.5 py-0.5 text-xs font-medium text-green-700 ring-1 ring-inset ring-green-600/20">
                                        <i class="fas fa-check mr-1"></i> Import Edildi
                                    </span>
                                {% elseif item.status == 'skipped' %}
                                    <span class="inline-flex items-center rounded-full bg-gray-50 px-2.5 py-0.5 text-xs font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10">
                                        <i class="fas fa-forward mr-1"></i> Atlandi
                                    </span>
                                {% endif %}
                            </td>
                            <td class="text-sm text-gray-500">
                                {{ item.receivedAt|date('d.m.Y') }}<br>
                                <span class="text-xs">{{ item.receivedAt|date('H:i') }}</span>
                            </td>
                            <td>
                                <div class="flex items-center gap-2">
                                    {# Detail - modal toggle #}
                                    <button type="button"
                                            onclick="showItemDetail({{ item.id }})"
                                            class="text-gray-400 hover:text-primary-600 transition-colors" title="Detay">
                                        <i class="fas fa-eye"></i>
                                    </button>

                                    {% if item.status == 'pending' %}
                                        {# Import #}
                                        <form method="post" action="{{ path('admin_agency_item_import', {id: item.id}) }}" class="inline">
                                            <input type="hidden" name="_token" value="{{ csrf_token('import_item_' ~ item.id) }}">
                                            <button type="submit"
                                                    class="text-green-600 hover:text-green-800 transition-colors" title="Import Et"
                                                    onclick="return confirm('Bu haberi import etmek istediginize emin misiniz?')">
                                                <i class="fas fa-file-import"></i>
                                            </button>
                                        </form>

                                        {# Skip #}
                                        <form method="post" action="{{ path('admin_agency_item_skip', {id: item.id}) }}" class="inline">
                                            <input type="hidden" name="_token" value="{{ csrf_token('skip_item_' ~ item.id) }}">
                                            <button type="submit"
                                                    class="text-gray-400 hover:text-red-600 transition-colors" title="Atla">
                                                <i class="fas fa-forward"></i>
                                            </button>
                                        </form>
                                    {% endif %}

                                    {% if item.status == 'imported' and item.importedNewsId %}
                                        <a href="{{ path('admin_news_edit', {id: item.importedNewsId}) }}"
                                           class="text-primary-600 hover:text-primary-800 transition-colors" title="Haberi Gor">
                                            <i class="fas fa-external-link-alt"></i>
                                        </a>
                                    {% endif %}
                                </div>
                            </td>
                        </tr>
                    {% else %}
                        <tr>
                            <td colspan="6" class="text-center text-gray-500 py-16">
                                <i class="fas fa-inbox text-4xl text-gray-300 mb-3 block"></i>
                                {% if currentStatus %}
                                    Bu filtrede haber bulunamadi.
                                {% else %}
                                    Henuz ajanstan haber cekilmemis.
                                {% endif %}
                                <br>
                                <span class="text-sm">
                                    Haber cekmek icin "Yeni Haberleri Cek" butonuna tiklayin.
                                </span>
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        {# Pagination #}
        {% if totalPages > 1 %}
            <div class="px-6 py-4 border-t border-gray-100 flex items-center justify-between">
                <p class="text-sm text-gray-500">
                    Toplam {{ totalCount }} haber
                </p>
                <div class="flex items-center gap-1">
                    {% if currentPage > 1 %}
                        <a href="{{ path('admin_agency_items', {slug: config.agencySlug, status: currentStatus, page: currentPage - 1}) }}"
                           class="px-3 py-1.5 text-sm rounded-lg bg-white border border-gray-200 text-gray-700 hover:bg-gray-50">
                            <i class="fas fa-chevron-left"></i>
                        </a>
                    {% endif %}

                    {% for p in range(max(1, currentPage - 2), min(totalPages, currentPage + 2)) %}
                        <a href="{{ path('admin_agency_items', {slug: config.agencySlug, status: currentStatus, page: p}) }}"
                           class="px-3 py-1.5 text-sm rounded-lg {{ p == currentPage ? 'bg-primary-600 text-white' : 'bg-white border border-gray-200 text-gray-700 hover:bg-gray-50' }}">
                            {{ p }}
                        </a>
                    {% endfor %}

                    {% if currentPage < totalPages %}
                        <a href="{{ path('admin_agency_items', {slug: config.agencySlug, status: currentStatus, page: currentPage + 1}) }}"
                           class="px-3 py-1.5 text-sm rounded-lg bg-white border border-gray-200 text-gray-700 hover:bg-gray-50">
                            <i class="fas fa-chevron-right"></i>
                        </a>
                    {% endif %}
                </div>
            </div>
        {% endif %}
    </div>

    {# Detail Modal #}
    <div id="itemDetailModal"
         class="fixed inset-0 bg-black/50 z-50 hidden items-center justify-center p-4"
         onclick="if(event.target===this) closeItemDetail()">
        <div class="bg-white rounded-xl shadow-2xl max-w-2xl w-full max-h-[80vh] overflow-hidden flex flex-col">
            <div class="px-6 py-4 border-b border-gray-100 flex items-center justify-between flex-shrink-0">
                <h3 class="font-bold text-gray-900">Haber Detayi</h3>
                <button onclick="closeItemDetail()" class="text-gray-400 hover:text-gray-600">
                    <i class="fas fa-times text-lg"></i>
                </button>
            </div>
            <div id="itemDetailContent" class="p-6 overflow-y-auto flex-1">
                <div class="flex justify-center py-8">
                    <i class="fas fa-spinner fa-spin text-primary-600 text-2xl"></i>
                </div>
            </div>
        </div>
    </div>

    <script>
        function showItemDetail(id) {
            const modal = document.getElementById('itemDetailModal');
            const content = document.getElementById('itemDetailContent');
            modal.classList.remove('hidden');
            modal.classList.add('flex');
            content.innerHTML = '<div class="flex justify-center py-8"><i class="fas fa-spinner fa-spin text-primary-600 text-2xl"></i></div>';

            fetch('{{ path("admin_agency_item_detail", {id: "__ID__"}) }}'.replace('__ID__', id))
                .then(r => r.text())
                .then(html => { content.innerHTML = html; })
                .catch(() => { content.innerHTML = '<p class="text-red-600">Detay yuklenemedi.</p>'; });
        }

        function closeItemDetail() {
            const modal = document.getElementById('itemDetailModal');
            modal.classList.add('hidden');
            modal.classList.remove('flex');
        }
    </script>
{% endblock %}
