{{--
    Modal de novidades ("O que há de novo").

    Exibido uma única vez por navegador sempre que o changelog do público muda.
    A versão é o hash do conteúdo do arquivo Markdown: se mudou, o modal reaparece;
    se não, fica escondido.

    Requer a variável $audience — o nome do arquivo em resources/updates/, ou uma
    lista deles (o conteúdo é exibido junto, num modal só):
      'user'  → resources/updates/user.md   (incluído em welcome)
      ChangelogHelper::adminAudiences() → admin.md + admin_{setor}.md (base-admin)

    O título e o subtítulo são do modal, não dos arquivos: assim um .md vazio
    significa "sem novidade para esse público" e nenhum modal é exibido. Podem ser
    trocados por $changelogTitle e $changelogSubtitle.

    Auto-contido (HTML + CSS + JS vanilla, sem depender de Bootstrap/jQuery).
    Incluir uma vez antes de </body>:
      @include('partials.changelog-modal', ['audience' => 'user'])
--}}
@php
    $changelogAudience = $audience ?? 'admin';
    $changelogVersion  = \App\Helpers\ChangelogHelper::version($changelogAudience);
    $changelogHtml     = \App\Helpers\ChangelogHelper::html($changelogAudience);
    $changelogKey      = \App\Helpers\ChangelogHelper::key($changelogAudience);
    $changelogTitle    = $changelogTitle    ?? 'O que há de novo 🎉';
    $changelogSubtitle = $changelogSubtitle ?? 'Changelog da última atualização';
@endphp

@if ($changelogVersion !== '')
    <div id="changelog-overlay" class="changelog-overlay" aria-hidden="true">
        <div class="changelog-modal" role="dialog" aria-modal="true" aria-labelledby="changelog-title">
            <button type="button" class="changelog-close" aria-label="Fechar">&times;</button>
            <div id="changelog-title" class="changelog-body">
                <h1>{{ $changelogTitle }}</h1>
                @if ($changelogSubtitle)
                    <p><em>{{ $changelogSubtitle }}</em></p>
                @endif
                {!! $changelogHtml !!}
            </div>
            <div class="changelog-footer">
                <button type="button" class="changelog-ok">Entendi</button>
            </div>
        </div>
    </div>

    <style>
        .changelog-overlay {
            display: none;
            position: fixed;
            inset: 0;
            z-index: 100000;
            background: rgba(15, 23, 42, 0.55);
            padding: 20px;
            overflow-y: auto;
        }
        .changelog-overlay.is-open { display: flex; align-items: flex-start; justify-content: center; }
        .changelog-modal {
            position: relative;
            width: 100%;
            max-width: 520px;
            margin: auto;
            background: var(--dm-surface, #ffffff);
            color: var(--dm-text, #1f2937);
            border: 1px solid var(--dm-border, rgba(0, 0, 0, 0.08));
            border-radius: 16px;
            box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
            padding: 28px 28px 20px;
            animation: changelog-pop 0.22s ease;
        }
        @keyframes changelog-pop {
            from { opacity: 0; transform: translateY(12px) scale(0.98); }
            to   { opacity: 1; transform: translateY(0) scale(1); }
        }
        .changelog-close {
            position: absolute;
            top: 12px;
            right: 14px;
            background: none;
            border: none;
            font-size: 26px;
            line-height: 1;
            cursor: pointer;
            color: var(--dm-text, #6b7280);
            opacity: 0.6;
        }
        .changelog-close:hover { opacity: 1; }
        .changelog-body { font-size: 15px; line-height: 1.6; }
        .changelog-body h1 { font-size: 22px; margin: 0 0 14px; font-weight: 700; }
        .changelog-body h2 { font-size: 16px; margin: 20px 0 8px; font-weight: 700; }
        .changelog-body h2:first-of-type { margin-top: 8px; }
        .changelog-body p { margin: 0 0 12px; }
        .changelog-body em { color: var(--dm-text, #6b7280); opacity: 0.75; font-size: 13px; }
        .changelog-body ul { margin: 0 0 12px; padding-left: 20px; }
        .changelog-body li { margin: 4px 0; }
        .changelog-footer { margin-top: 18px; text-align: right; }
        .changelog-ok {
            background: #2563eb;
            color: #fff;
            border: none;
            border-radius: 10px;
            padding: 10px 22px;
            font-weight: 600;
            font-size: 14px;
            cursor: pointer;
        }
        .changelog-ok:hover { background: #1d4ed8; }

        [data-isDarkmode="true"] .changelog-modal {
            background: var(--dm-surface, #1e293b);
            color: var(--dm-text, #e2e8f0);
            border-color: var(--dm-border, rgba(255, 255, 255, 0.12));
        }
    </style>

    <script>
        (function () {
            var VERSION = @json($changelogVersion);
            var STORAGE_KEY = 'changelog_seen_version_' + @json($changelogKey);
            var overlay = document.getElementById('changelog-overlay');
            if (!overlay) return;

            function close() {
                overlay.classList.remove('is-open');
                overlay.setAttribute('aria-hidden', 'true');
                try { localStorage.setItem(STORAGE_KEY, VERSION); } catch (e) {}
            }

            var seen;
            try { seen = localStorage.getItem(STORAGE_KEY); } catch (e) { seen = null; }
            if (seen === VERSION) return;

            overlay.classList.add('is-open');
            overlay.setAttribute('aria-hidden', 'false');

            overlay.querySelector('.changelog-close').addEventListener('click', close);
            overlay.querySelector('.changelog-ok').addEventListener('click', close);
            overlay.addEventListener('click', function (e) {
                if (e.target === overlay) close();
            });
            document.addEventListener('keydown', function (e) {
                if (e.key === 'Escape' && overlay.classList.contains('is-open')) close();
            });
        })();
    </script>
@endif