@php
    /** @var \Illuminate\Pagination\LengthAwarePaginator $news */
    $pageTitle = 'Notícias';
    $statusFilter = request()->input('status', '');
    $searchTerm = request()->input('search', '');
    $categoryFilter = request()->input('category_id', '');
    $tagFilter = request()->input('tag_id', '');

    $statusLabels = \V2\Modules\Publicacoes\Noticias\Models\News::$statusLabels;
    $statusColors = \V2\Modules\Publicacoes\Noticias\Models\News::$statusColors;
    $statusIcons = \V2\Modules\Publicacoes\Noticias\Models\News::$statusIcons;
    $validStatuses = \V2\Modules\Publicacoes\Noticias\Models\News::$validStatuses;

    $superHighlighted = isset($superHighlighted) ? $superHighlighted : null;
    $allPublished = isset($allPublished) ? $allPublished : collect();
@endphp

@extends('v2-cms::layouts.app', [
    'title' => $pageTitle,
])

@section('page-breadcrumbs')
    @include('v2-cms::partials.breadcrumb', ['items' => [
        ['label' => 'Publicações'],
        ['label' => 'Notícias'],
    ]])
@endsection

@section('page-actions')
    <div class="d-flex gap-2 align-items-center">
        @include('v2-cms::partials.action-create', [
            'route' => route('v2.noticias.cms.create'),
            'label' => 'Nova Notícia'
        ])
        <button type="button" class="btn btn-outline-danger btn-sm" data-bs-toggle="modal" data-bs-target="#superHighlightModal"
                title="Definir notícia em super-destaque">
            <i class="bi bi-lightning-fill me-1"></i> Super-destaque
            @if($superHighlighted)
                <span class="badge bg-danger ms-1">ativo</span>
            @endif
        </button>
    </div>
@endsection

@section('css')
    @parent
    @include('v2-noticias::cms.includes.styles')
@endsection

@section('content')

    <p class="text-muted mb-3">{{ $news->total() }} registros encontrados</p>

    {{-- Stats Bar --}}
    <div class="d-flex flex-wrap gap-2 mb-4" role="group" aria-label="Filtros rápidos por status">
        @foreach($validStatuses as $status)
            @php
                $isActive = ($statusFilter === $status);
                $color = $statusColors[$status];
                $icon = $statusIcons[$status];
                $label = $statusLabels[$status];
                $count = isset($stats[$status]) ? $stats[$status] : 0;
            @endphp
            <a href="{{ route('v2.noticias.cms.index', ['status' => $status]) }}"
               class="badge rounded-pill text-decoration-none d-inline-flex align-items-center gap-1 px-3 py-2
                      bg-{{ $color }} @if($isActive) active @else bg-opacity-10 text-{{ $color }} border border-{{ $color }} border-opacity-25 @endif"
               @if($isActive) style="background-color: var(--bs-{{ $color }}); color: #fff;" @endif
               aria-current="@if($isActive) page @endif">
                <i class="{{ $icon }}" aria-hidden="true"></i>
                {{ $label }}
                <span class="badge bg-{{ $color }} rounded-pill ms-1" @if($isActive) style="background-color: rgba(255,255,255,0.3); color: #fff;" @endif>
                    {{ $count }}
                </span>
            </a>
        @endforeach

        @php $archivedCount = isset($stats['archived']) ? $stats['archived'] : 0; @endphp
        <a href="{{ route('v2.noticias.cms.archived') }}"
           class="badge rounded-pill text-decoration-none d-inline-flex align-items-center gap-1 px-3 py-2
                  bg-dark bg-opacity-10 text-dark border border-dark border-opacity-25"
           aria-current="@if(request()->routeIs('*.archived')) page @endif">
            <i class="bi bi-archive" aria-hidden="true"></i>
            Arquivadas
            <span class="badge bg-dark rounded-pill ms-1">{{ $archivedCount }}</span>
        </a>
    </div>

    {{-- Filters --}}
    @component('v2-cms::partials.filter-card', [
        'searchPlaceholder' => 'Buscar por título, subtítulo ou resumo...',
        'searchValue'       => $searchTerm,
        'action'            => route('v2.noticias.cms.index'),
        'showDateRange'     => false,
    ])
        <div class="col-md-3">
            <label for="status" class="form-label small fw-medium text-muted mb-1">Status</label>
            <select name="status" class="form-select form-select-sm" aria-label="Filtrar por status">
                <option value="">Todos os status</option>
                @foreach($statusLabels as $key => $label)
                    <option value="{{ $key }}" @if($statusFilter === $key) selected @endif>{{ $label }}</option>
                @endforeach
            </select>
        </div>
        <div class="col-md-3">
            <label for="category_id" class="form-label small fw-medium text-muted mb-1">Categoria</label>
            <select name="category_id" id="category_id_filter" class="form-select form-select-sm" aria-label="Filtrar por categoria">
                <option value="">Todas as categorias</option>
                @foreach($categories as $cat)
                    <option value="{{ $cat->id }}" @if($categoryFilter == $cat->id) selected @endif>{{ $cat->name }}</option>
                @endforeach
            </select>
        </div>
        <div class="col-md-3">
            <label for="tag_id" class="form-label small fw-medium text-muted mb-1">Tag</label>
            <select name="tag_id" id="tag_id_filter" class="form-select form-select-sm" aria-label="Filtrar por tag">
                <option value="">Todas as tags</option>
                @foreach($allTags as $tag)
                    <option value="{{ $tag->id }}" @if($tagFilter == $tag->id) selected @endif>{{ $tag->name }}</option>
                @endforeach
            </select>
        </div>
    @endcomponent

    {{-- Lista — Agrupada por categoria com fundos coloridos --}}
    @if($news->count() > 0)
        @php
            $grouped = $news->groupBy(function ($item) {
                return $item->category ? $item->category->name : 'Sem categoria';
            });
            $catColors = ['#f0f7ff','#f0fff4','#fff8f0','#fdf0ff','#f0ffff','#fff0f0','#f5f0ff','#f0fff8'];
            $colorIndex = 0;
        @endphp

        @foreach($grouped as $catName => $items)
            @php
                $bg = $catColors[$colorIndex % count($catColors)];
                $colorIndex++;
            @endphp
            <div class="news-category-group mb-3" style="background: {{ $bg }}; border-radius: 10px; padding: 0.75rem; border: 1px solid rgba(0,0,0,0.06);">
                <div class="news-category-header d-flex align-items-center gap-2 mb-2 px-1">
                    <span class="news-category-dot" style="background: {{ $catName === 'Sem categoria' ? '#94a3b8' : 'var(--tenant-primary, #1075ad)' }};"></span>
                    <strong class="text-muted small text-uppercase">{{ $catName }}</strong>
                    <span class="badge bg-secondary bg-opacity-10 text-secondary rounded-pill">{{ $items->count() }}</span>
                </div>
                <div class="row row-cols-1 row-cols-md-2 row-cols-xl-3 g-2">
                    @foreach($items as $item)
                        <div class="col">
                        <article class="news-card-compact">
                            @php $coverUrl = $item->getCoverImageUrl(); @endphp
                            <div class="news-card-compact-thumb">
                                @if($coverUrl)
                                    <img src="{{ $coverUrl }}" loading="lazy" alt="Capa da notícia">
                                @else
                                    <div class="news-card-compact-thumb-placeholder">
                                        <i class="bi bi-newspaper"></i>
                                    </div>
                                @endif
                            </div>
                            <div class="news-card-compact-body">
                                <div class="news-card-compact-top">
                                    <span class="status-dot bg-{{ $statusColors[$item->status] }}" title="{{ $statusLabels[$item->status] }}"></span>
                                    <span class="news-card-compact-status text-{{ $statusColors[$item->status] }}">{{ $statusLabels[$item->status] }}</span>
                                    @if($item->is_highlighted)
                                        <i class="bi bi-star-fill text-warning ms-1" style="font-size:0.65rem;" title="Destacado"></i>
                                    @endif
                                    @if($item->is_super_highlighted)
                                        <i class="bi bi-lightning-fill text-danger ms-1" style="font-size:0.65rem;" title="Super-destaque"></i>
                                    @endif
                                </div>
                                <h5 class="news-card-compact-title" title="{{ $item->title }}">
                                    <a href="{{ route('v2.noticias.cms.edit', ['id' => $item->id]) }}" class="text-decoration-none stretched-link"></a>
                                    {{ $item->title }}
                                </h5>
                                <div class="news-card-compact-meta">
                                    <span><i class="bi bi-calendar3"></i> {{ $item->created_at->format('d/m/Y') }}</span>
                                    @if($item->author)
                                        <span><i class="bi bi-person"></i> {{ $item->author->name ?? '—' }}</span>
                                    @endif
                                </div>
                                @if($item->relationLoaded('tags') && $item->tags->count() > 0)
                                <div class="news-card-compact-taxonomy">
                                    @foreach($item->tags->take(3) as $tag)
                                        <span class="news-card-compact-tag">{{ $tag->name }}</span>
                                    @endforeach
                                    @if($item->tags->count() > 3)
                                        <span class="news-card-compact-tag">+{{ $item->tags->count() - 3 }}</span>
                                    @endif
                                </div>
                                @endif
                                @if($item->status === 'rejected' && $item->rejection_reason)
                                    <div class="news-card-compact-rejection small">
                                        <i class="bi bi-exclamation-triangle text-warning"></i> {{ \Illuminate\Support\Str::limit($item->rejection_reason, 60) }}
                                    </div>
                                @endif
                                <div class="news-card-compact-actions">
                                    <a href="{{ route('v2.noticias.cms.edit', ['id' => $item->id]) }}" class="btn-icon" title="Editar" aria-label="Editar"><i class="bi bi-pencil"></i></a>
                                    @if($item->status === 'published' && $item->getPublicUrl())
                                        <a href="{{ $item->getPublicUrl() }}" target="_blank" rel="noopener noreferrer" class="btn-icon" title="Ver no Portal" aria-label="Ver no Portal"><i class="bi bi-box-arrow-up-right"></i></a>
                                    @endif
                                    @if($item->draft_token && $item->getPreviewUrl())
                                        <a href="{{ $item->getPreviewUrl() }}" target="_blank" rel="noopener noreferrer" class="btn-icon" title="Preview" aria-label="Preview"><i class="bi bi-eye"></i></a>
                                    @endif
                                    <form action="{{ route('v2.noticias.cms.toggle-highlight', ['id' => $item->id]) }}" method="POST" class="d-inline toggle-highlight-form">
                                        {{ csrf_field() }}
                                        <button type="submit" class="btn-icon @if($item->is_highlighted) text-warning @endif toggle-highlight-btn"
                                                title="@if($item->is_highlighted) Remover destaque @else Destacar @endif" data-loading-text="...">
                                            <i class="bi @if($item->is_highlighted) bi-star-fill @else bi-star @endif"></i>
                                        </button>
                                    </form>
                                    @php $archiveFormId = 'archive-form-' . $item->id; @endphp
                                    <form action="{{ route('v2.noticias.cms.destroy', ['id' => $item->id]) }}" method="POST" class="d-inline" id="{{ $archiveFormId }}"
                                          onsubmit="return confirm('Tem certeza que deseja realizar esta ação?')">
                                        {{ csrf_field() }}
                                        {{ method_field('DELETE') }}
                                        <button type="button" class="btn-icon text-muted"
                                                data-confirm-modal data-confirm-title="Arquivar Notícia"
                                                data-confirm-body='Deseja arquivar "{{ $item->title }}"?'
                                                data-confirm-icon="bi-archive" data-confirm-btn-text="Arquivar"
                                                data-confirm-btn-class="btn-secondary"
                                                data-confirm-hint="A notícia pode ser reativada depois na seção &quot;Arquivadas&quot;."
                                                data-confirm-form-id="{{ $archiveFormId }}" title="Arquivar">
                                            <i class="bi bi-archive"></i>
                                        </button>
                                    </form>
                                </div>
                            </div>
                        </article>
                        </div>
                    @endforeach
                </div>
            </div>
        @endforeach

        @if($news->hasPages())
        <div class="d-flex justify-content-center mt-4">
            {{ $news->appends(request()->except('page'))->links('v2-cms::partials.pagination') }}
        </div>
        @endif
    @else
        <div class="text-center py-5">
            <i class="bi bi-newspaper" style="font-size: 3rem; color: var(--bs-secondary-color);" aria-hidden="true"></i>
            <h2 class="h5 mt-3 text-muted">Nenhuma notícia encontrada</h2>
            @if(!empty($searchTerm) || !empty($statusFilter))
                <p class="text-muted">Tente ajustar os filtros ou limpar a busca.</p>
                <a href="{{ route('v2.noticias.cms.index') }}" class="btn btn-outline-primary">
                    <i class="bi bi-x-circle me-1" aria-hidden="true"></i> Limpar Filtros
                </a>
            @else
                <p class="text-muted">Comece criando a primeira notícia do portal.</p>
                <a href="{{ route('v2.noticias.cms.create') }}" class="btn btn-primary">
                    <i class="bi bi-plus-circle me-1" aria-hidden="true"></i> Criar Primeira Notícia
                </a>
            @endif
        </div>
    @endif

    @include('v2-noticias::cms.includes._confirm-modal')

    {{-- Modal Super-destaque --}}
<div class="modal fade" id="superHighlightModal" tabindex="-1" role="dialog"
     data-bs-backdrop="false"
         aria-labelledby="superHighlightModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="superHighlightModalLabel">
                        <i class="bi bi-lightning-fill text-danger me-1"></i> Notícia em Super-destaque
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fechar"></button>
                </div>
                <form action="" method="POST" id="superHighlightForm">
                    {{ csrf_field() }}
                    <div class="modal-body">
                        <p class="small text-muted mb-3">
                            A notícia em <strong>super-destaque</strong> ocupa 100% da largura no topo da página de notícias.
                            Apenas uma notícia pode estar neste status.
                        </p>

                        @if($superHighlighted)
                            <div class="alert alert-info d-flex align-items-center gap-2 py-2 px-3 mb-3">
                                <i class="bi bi-info-circle"></i>
                                <span>Atual: <strong>{{ $superHighlighted->title }}</strong></span>
                            </div>
                        @else
                            <div class="alert alert-secondary d-flex align-items-center gap-2 py-2 px-3 mb-3">
                                <i class="bi bi-info-circle"></i>
                                <span>Nenhuma notícia em super-destaque no momento.</span>
                            </div>
                        @endif

                        <label for="superHighlightSelect" class="form-label fw-semibold">
                            Selecionar notícia
                        </label>
                        <select id="superHighlightSelect" class="form-select" name="news_id"
                                size="8" style="width:100%">
                            <option value="">— Nenhuma (remover super-destaque) —</option>
                            @forelse($allPublished as $item)
                                <option value="{{ $item->id }}"
                                    {{ $superHighlighted && $superHighlighted->id === $item->id ? 'selected' : '' }}>
                                    {{ $item->title }}
                                    @if($item->is_super_highlighted) (Super-destaque atual) @endif
                                    — {{ $item->published_at ? $item->published_at->format('d/m/Y') : 'sem data' }}
                                </option>
                            @empty
                                <option value="" disabled>Nenhuma notícia publicada</option>
                            @endforelse
                        </select>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancelar</button>
                        <button type="button" class="btn btn-danger" id="superHighlightConfirmBtn">
                            <i class="bi bi-check-lg me-1"></i> Definir Super-destaque
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    @include('v2-noticias::cms.includes.scripts')
<script>
(function() {
    'use strict';
    var form = document.querySelector('form[role="search"]');
    if (!form) return;
    var searchInput = document.getElementById('search');
    var statusSelect = document.getElementById('status');
    var debounceTimer = null;
    var DEBOUNCE_MS = 300;
    function submitSearch() {
        if (debounceTimer) { clearTimeout(debounceTimer); debounceTimer = null; }
        form.submit();
    }
    function onSearchInput() {
        if (debounceTimer) { clearTimeout(debounceTimer); }
        debounceTimer = setTimeout(submitSearch, DEBOUNCE_MS);
    }
    if (searchInput) { searchInput.addEventListener('input', onSearchInput); }
    if (statusSelect) {
        statusSelect.addEventListener('change', function() {
            if (debounceTimer) { clearTimeout(debounceTimer); debounceTimer = null; }
            submitSearch();
        });
    }
    var catSelect = document.getElementById('category_id_filter');
    if (catSelect) {
        catSelect.addEventListener('change', function() { submitSearch(); });
    }
    var tagSelect = document.getElementById('tag_id_filter');
    if (tagSelect) {
        tagSelect.addEventListener('change', function() { submitSearch(); });
    }
})();

/* Toggle Highlight AJAX */
document.querySelectorAll('.toggle-highlight-form').forEach(function(form) {
    form.addEventListener('submit', function(e) {
        e.preventDefault();
        var btn = form.querySelector('.toggle-highlight-btn');
        var originalHtml = btn.innerHTML;
        btn.disabled = true;
        btn.innerHTML = '<span class="spinner-border spinner-border-sm"></span>';

        fetch(form.action, {
            method: 'POST',
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'X-CSRF-TOKEN': form.querySelector('input[name="_token"]').value,
            },
        })
        .then(function(r) { return r.json(); })
        .then(function(data) {
            if (data.success) {
                if (data.is_highlighted) {
                    btn.classList.add('text-warning');
                    btn.innerHTML = '<i class="bi bi-star-fill"></i>';
                    btn.title = 'Remover destaque';
                } else {
                    btn.classList.remove('text-warning');
                    btn.innerHTML = '<i class="bi bi-star"></i>';
                    btn.title = 'Destacar na listagem';
                }
            }
            btn.disabled = false;
        })
        .catch(function() {
            btn.innerHTML = originalHtml;
            btn.disabled = false;
        });
    });
});

/* Super-destaque modal */
(function() {
    var confirmBtn = document.getElementById('superHighlightConfirmBtn');
    var select = document.getElementById('superHighlightSelect');
    var form = document.getElementById('superHighlightForm');
    if (confirmBtn && select && form) {
        confirmBtn.addEventListener('click', function() {
            form.action = '{{ route('v2.noticias.cms.set-super-highlight') }}';
            form.submit();
        });
    }
})();
</script>
@endpush