@php
    $monthsPt = ['JAN', 'FEV', 'MAR', 'ABR', 'MAI', 'JUN', 'JUL', 'AGO', 'SET', 'OUT', 'NOV', 'DEZ'];
    $nacionalSlug = 'nacional';
    $regionaisSlug = 'regionais';
@endphp

@extends('v2-portal::app-layout', [
    'pageTitle'             => 'Notícias — ' . config('app.name'),
    'pageDescription'       => 'Acompanhe as últimas notícias e comunicados oficiais.',
    'gtag'                  => ['page_context' => 'noticias'],
    'schemas'               => [
        [
            '@context' => 'https://schema.org',
            '@type' => 'CollectionPage',
            'name' => 'Notícias',
            'description' => 'Acompanhe as últimas notícias e comunicados oficiais.',
            'url' => route('v2.noticias.portal.index', [], false)
        ]
    ],
    'fullWidthMain'         => true,
    'showHeader'            => false,
    'showMainHeader'        => false,
    'showMainFooter'        => false,
    'showFooter'            => false,
    'showAccessibilityBar'  => false,
    'showMainLeftArea'      => false,
    'showMainRightArea'     => false,
])

@section('main-section-area')

{{-- HERO BREADCRUMB --}}
<div class="breadcrumb-wrapper bg-cover" style="background-image: url('{{ asset('assets/sucesu/img/hero/breadcrumb.png') }}');">
    <div class="container">
        <div class="page-heading">
            <ul class="breadcrumb-items">
                <li><a href="{{ url('/') }}">Home</a></li>
                <li><i class="bi bi-chevron-right mx-2"></i></li>
                <li>Notícias</li>
            </ul>
            <h1>Notícias</h1>
        </div>
    </div>
</div>

{{-- BUSCA + FILTROS (sempre visíveis, operam client-side) --}}
<section class="section-padding pb-2">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8 col-lg-7">
                <div role="search" class="news-filter-form">
                    <div class="search-form-group">
                        <label for="news-search" class="visually-hidden">Buscar notícias</label>
                        <input type="search" name="q" id="news-search" class="search-form-input"
                               placeholder="Buscar por título ou conteúdo..." autocomplete="off"
                               aria-label="Buscar notícias"
                               data-news-search-input>
                        <button type="button" class="search-form-btn" data-news-search-clear>
                            <i class="bi bi-x-lg" aria-hidden="true"></i>
                            <span class="visually-hidden">Limpar busca</span>
                        </button>
                    </div>

                    @if(isset($unidadesRegionais) && $unidadesRegionais->count() > 0)
                        <div class="regional-filter-group mt-3">
                            <label for="news-regional" class="regional-filter-label">Filtrar por regional</label>
                            <select name="regional" id="news-regional" class="regional-filter-select"
                                    aria-label="Filtrar por regional" data-news-regional-select>
                                <option value="">Todas as regionais</option>
                                @foreach($unidadesRegionais as $ur)
                                    @if(strtolower($ur->acronym) !== 'nac')
                                        <option value="{{ $ur->slug }}">{{ $ur->name }} ({{ $ur->acronym }})</option>
                                    @endif
                                @endforeach
                            </select>
                        </div>
                    @endif

                    @if(isset($categories) && $categories->count() > 0)
                        <div class="d-flex flex-wrap justify-content-center gap-2 mt-4" role="group" aria-label="Filtrar por categoria">
                            <button type="button" class="btn btn-sm btn-primary rounded-pill"
                                    data-news-category data-category="" data-active="true">
                                Todas
                            </button>
                            @foreach($categories as $cat)
                                @php
                                    $hasChildren = $cat->children->isNotEmpty();
                                @endphp
                                <button type="button"
                                        class="btn btn-sm {{ $hasChildren ? 'btn-primary rounded-pill dropdown-toggle' : 'btn-outline-primary rounded-pill' }}"
                                        data-news-category data-category="{{ $cat->slug }}">
                                    {{ $cat->name }}
                                </button>
                                @foreach($cat->children as $child)
                                    <button type="button" class="btn btn-sm btn-outline-secondary rounded-pill"
                                            data-news-category data-category="{{ $child->slug }}">
                                        {{ $child->name }}
                                    </button>
                                @endforeach
                            @endforeach
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</section>

{{-- RESULTADOS (indexados client-side) --}}
<section class="section-padding pt-3">
    <div class="container">
        <div class="section-title-row">
            <h2 class="section-title-custom"><i class="bi bi-newspaper me-2" aria-hidden="true"></i>Últimas notícias</h2>
            <span class="text-muted small" data-news-count aria-live="polite"></span>
        </div>

        <div class="row g-4" data-news-grid>
            @forelse($allNews as $item)
                @php
                    $date = $item->published_at ?? $item->created_at;
                    $day = $date->format('d');
                    $mon = $monthsPt[$date->format('n') - 1];
                    $coverUrl = $item->getCoverImageUrl();
                    $catSlug = $item->category ? $item->category->slug : '';
                    $catParent = ($item->category && $item->category->parent) ? $item->category->parent->slug : $catSlug;
                    $regSlug = '';
                    $regAcronym = '';
                    if (isset($item->unidadeRegional) && $item->unidadeRegional && strtolower($item->unidadeRegional->acronym) !== 'nac') {
                        $regSlug = $item->unidadeRegional->slug;
                        $regAcronym = $item->unidadeRegional->acronym;
                    }
                    $searchText = mb_strtolower(trim(
                        ($item->title ?? '') . ' ' .
                        ($item->subtitle ?? '') . ' ' .
                        ($item->summary ?? '') . ' ' .
                        ($catParent ?? '') . ' ' .
                        ($catSlug ?? '') . ' ' .
                        ($regAcronym ?? '')
                    ));
                @endphp
                <div class="col-xl-4 col-lg-6 col-md-6"
                     data-news-card
                     data-id="{{ $item->id }}"
                     data-category="{{ $catSlug }}"
                     data-parent-category="{{ $catParent }}"
                     data-regional="{{ $regSlug }}"
                     data-search="{{ $searchText }}">
                    <div class="news-card-items mt-0">
                        <div class="news-thumb">
                            @if($coverUrl)
                                @include('v2-service-media::components.picture', [
                                    'originalPath' => $item->coverImage->file_path,
                                    'variants' => $item->getCoverImageVariants(),
                                    'alt' => $item->getCoverImageAlt(),
                                    'class' => 'img-fluid',
                                    'lazy' => true,
                                ])
                            @else
                                <img src="{{ asset('assets/sucesu/img/news-default.svg') }}" alt="{{ $item->title }}" class="img-fluid" loading="lazy" decoding="async">
                            @endif
                            @php
                                $ur = $item->unidadeRegional ?? null;
                                $isNacional = !$ur || strtolower($ur->acronym) === 'nac';
                            @endphp
                            @if($isNacional)
                                <span class="badge position-absolute top-0 end-0 m-2 rounded-pill border d-inline-flex align-items-center gap-1"
                                      style="border-color: var(--color-text-muted, #6c757d); color: var(--color-text-muted, #6c757d); font-size:0.8rem; z-index:2;">
                                    Nacional
                                </span>
                            @else
                                <span class="badge position-absolute top-0 end-0 m-2 rounded-pill border d-inline-flex align-items-center gap-1"
                                      style="border-color: var(--tenant-primary); color: var(--tenant-primary); font-size:0.8rem; z-index:2;">
                                    <i class="bi bi-award-fill" aria-hidden="true"></i>
                                    {{ $ur->name }}
                                </span>
                            @endif
                            <h4 class="number">{{ $day }}<span>{{ $mon }}</span></h4>
                        </div>
                        <div class="news-content">
                            <h3><a href="{{ route('v2.noticias.portal.show', ['slug' => $item->slug]) }}">{{ $item->title }}</a></h3>
                            <p>{{ str_limit(strip_tags($item->summary ?? $item->subtitle ?? ''), 150) }}</p>
                            <a href="{{ route('v2.noticias.portal.show', ['slug' => $item->slug]) }}" class="link-btn">Leia Mais <i class="bi bi-arrow-right"></i></a>
                        </div>
                    </div>
                </div>
            @empty
                <div class="col-12 text-center py-5">
                    <i class="bi bi-newspaper display-1 text-muted d-block mb-3"></i>
                    <h2 class="h4 fw-bold text-muted">Nenhuma notícia publicada</h2>
                </div>
            @endforelse
        </div>

        <div class="text-center py-5 d-none" data-news-empty>
            <i class="bi bi-search display-1 text-muted d-block mb-3"></i>
            <h2 class="h4 fw-bold text-muted">Nenhuma notícia encontrada</h2>
            <p class="text-muted">Tente ajustar os filtros ou a busca.</p>
            <button type="button" class="theme-btn" data-news-clear-all><span>Limpar filtros</span> <i class="bi bi-x-circle"></i></button>
        </div>
    </div>
</section>

@endsection

@push('head-styles')
<link rel="stylesheet" href="{{ asset('assets/css/modules/noticias/portal-noticias.css') }}?v={{ filemtime(public_path('assets/css/modules/noticias/portal-noticias.css')) }}">
@endpush

@push('scripts')
<script>
(function () {
    'use strict';

    var grid = document.querySelector('[data-news-grid]');
    if (!grid) { return; }

    var cards = Array.prototype.slice.call(grid.querySelectorAll('[data-news-card]'));
    var countEl = document.querySelector('[data-news-count]');
    var emptyEl = document.querySelector('[data-news-empty]');
    var searchInput = document.querySelector('[data-news-search-input]');
    var searchClear = document.querySelector('[data-news-search-clear]');
    var regionalSelect = document.querySelector('[data-news-regional-select]');
    var categoryBtns = Array.prototype.slice.call(document.querySelectorAll('[data-news-category]'));
    var clearAll = document.querySelector('[data-news-clear-all]');

    // ---- Indexação client-side: Map<chave, Set<indexCard>> — busca O(1) por filtro ----
    var byCategory = {};
    var byParentCategory = {};
    var byRegional = {};
    var allIds = new Set();
    var byId = {};

    cards.forEach(function (card, i) {
        var id = card.getAttribute('data-id');
        var cat = card.getAttribute('data-category');
        var parentCat = card.getAttribute('data-parent-category') || cat;
        var reg = card.getAttribute('data-regional');
        var term = (card.getAttribute('data-search') || '').toLowerCase();

        var idx = { el: card, cat: cat, parentCat: parentCat, reg: reg, term: term };

        byId[id] = idx;
        allIds.add(id);

        pushIndex(byCategory, cat, id);
        pushIndex(byParentCategory, parentCat, id);
        if (reg) { pushIndex(byRegional, reg, id); }
    });

    function pushIndex(map, key, id) {
        (map[key] = map[key] || new Set()).add(id);
    }

    // Normaliza texto para busca (remove acentos, lowercase)
    function normalize(text) {
        return (text || '')
            .toLowerCase()
            .normalize('NFD')
            .replace(/[\u0300-\u036f]/g, '');
    }

    // ---- Estado atual dos filtros ----
    var state = {
        category: '',
        regional: '',
        query: ''
    };

    function applyFilters() {
        var start = performance.now();

        var result = allIds;

        if (state.category) {
            result = intersect(result, byCategory[state.category] || byParentCategory[state.category] || new Set());
        }
        if (state.regional) {
            result = intersect(result, byRegional[state.regional] || new Set());
        }
        if (state.query) {
            result = filterByQuery(result, state.query);
        }

        var count = 0;
        cards.forEach(function (card) {
            var show = result.has(card.getAttribute('data-id'));
            card.classList.toggle('d-none', !show);
            if (show) { count++; }
        });

        if (countEl) { countEl.textContent = count + ' notícia' + (count === 1 ? '' : 's'); }
        if (emptyEl) { emptyEl.classList.toggle('d-none', count > 0); }

        // log de performance no console (dev)
        if (window.console && console.debug) {
            console.debug('[Noticias] filtro aplicado em ' + Math.round(performance.now() - start) + 'ms -> ' + count + ' resultados');
        }
    }

    function intersect(a, b) {
        var out = new Set();
        var smaller = a.size <= b.size ? a : b;
        var larger = a.size <= b.size ? b : a;
        smaller.forEach(function (v) { if (larger.has(v)) { out.add(v); } });
        return out;
    }

    function filterByQuery(ids, rawQuery) {
        var q = normalize(rawQuery);
        if (!q) { return ids; }
        var tokens = q.split(/\s+/).filter(Boolean);
        var out = new Set();
        ids.forEach(function (id) {
            var idx = byId[id];
            if (!idx) { return; }
            var term = normalize(idx.term);
            var ok = tokens.every(function (t) { return term.indexOf(t) !== -1; });
            if (ok) { out.add(id); }
        });
        return out;
    }

    function setCategory(slug) {
        state.category = slug || '';
        categoryBtns.forEach(function (btn) {
            var active = btn.getAttribute('data-category') === state.category;
            btn.classList.toggle('btn-primary', active);
            btn.classList.toggle('btn-outline-primary', !active && btn.getAttribute('data-category') !== '');
            btn.classList.toggle('btn-outline-secondary', !active && btn.getAttribute('data-category') === '');
            btn.setAttribute('aria-pressed', active ? 'true' : 'false');
        });
        applyFilters();
    }

    function setRegional(slug) {
        state.regional = slug || '';
        applyFilters();
    }

    function setQuery(q) {
        state.query = q.trim();
        applyFilters();
    }

    function clearAll() {
        state.category = '';
        state.regional = '';
        state.query = '';
        if (searchInput) { searchInput.value = ''; }
        if (regionalSelect) { regionalSelect.value = ''; }
        setCategory('');
        applyFilters();
    }

    // ---- Eventos ----
    categoryBtns.forEach(function (btn) {
        btn.addEventListener('click', function () {
            setCategory(btn.getAttribute('data-category'));
        });
    });

    if (regionalSelect) {
        regionalSelect.addEventListener('change', function () {
            setRegional(this.value);
        });
    }

    if (searchInput) {
        var debounceTimer = null;
        searchInput.addEventListener('input', function () {
            clearTimeout(debounceTimer);
            var val = this.value;
            debounceTimer = setTimeout(function () { setQuery(val); }, 120);
        });
        searchInput.addEventListener('keydown', function (e) {
            if (e.key === 'Enter') { e.preventDefault(); setQuery(this.value); }
        });
    }

    if (searchClear) {
        searchClear.addEventListener('click', function () {
            if (searchInput) { searchInput.value = ''; }
            state.query = '';
            applyFilters();
            if (searchInput) { searchInput.focus(); }
        });
    }

    if (clearAll) {
        clearAll.addEventListener('click', clearAll);
    }

    // ---- Inicialização: estado vazio, contador total ----
    // Pré-seleciona o filtro de regional a partir da URL (?regional=slug) —
    // usado pelo botão "Ver as notícias da regional" (ex.: /noticias?regional=df).
    var urlParams = new URLSearchParams(window.location.search);
    var urlRegional = urlParams.get('regional');
    if (urlRegional && regionalSelect) {
        var hasRegionalOption = Array.prototype.slice.call(regionalSelect.options)
            .some(function (opt) { return opt.value === urlRegional; });
        if (hasRegionalOption) {
            regionalSelect.value = urlRegional;
            state.regional = urlRegional;
        }
    }
    setCategory('');
    applyFilters();
})();
</script>
@endpush