{{--
    @intent Componente de SEO elegível para inclusão em formulários administrativos.
    @description Input amigável, integrado via Bootstrap 5 e Bootstrap Icons.
    @compliance eMAG 3.1, WCAG 2.1 AA, CSS Grid + Subgrid.
    @param Model $model Registro contendo a coluna 'metadata' (Opcional).
    @param string $name Prefixo do input (Padrão: metadata[seo]).
--}}
@php
    $prefix = $name ?? 'metadata[seo]';
    $seoData = (isset($model) && isset($model->metadata['seo'])) ? $model->metadata['seo'] : [];
    $uuid = str_random(8);
@endphp

<section class="seo-input-wrapper card border shadow-sm mb-3 rounded-1" id="seo-wrapper-{{ $uuid }}" aria-label="Otimização para motores de busca">
    <div class="card-header bg-light py-2 px-3 border-bottom">
        <h2 class="card-title h6 mb-0 fw-bold text-dark d-flex align-items-center">
            <i class="bi bi-graph-up-arrow text-primary me-2" aria-hidden="true"></i>
            Otimização para Motores de Busca (SEO)
        </h2>
    </div>

    <div class="card-body p-3">

        {{-- ==================== PREVIEW DO SNIPPET (full width) ==================== --}}
        <div class="bg-light rounded-1 border p-3 mb-3" aria-label="Pré-visualização do resultado de busca">
            <p class="small fw-bold text-secondary mb-2 d-flex align-items-center gap-1">
                <i class="bi bi-search" aria-hidden="true"></i>
                Pré-visualização do Resultado de Busca
            </p>
            <div class="seo-snippet">
                <div class="seo-snippet-url text-success small text-truncate" id="seo-snippet-url-{{ $uuid }}">https://www.site.gov.br/pagina-exemplo</div>
                <div class="seo-snippet-title fw-semibold text-primary" id="seo-snippet-title-{{ $uuid }}" style="font-size: 1.15rem; line-height: 1.3;">
                    {{ $seoData['title'] ?? 'Título da Página — Exemplo' }}
                </div>
                <div class="seo-snippet-desc text-muted small" id="seo-snippet-desc-{{ $uuid }}" style="font-size: 0.8rem; line-height: 1.4; word-break: break-word;">
                    {{ \Illuminate\Support\Str::limit($seoData['description'] ?? 'Descrição da página que aparece nos resultados de busca. Recomenda-se entre 120 e 160 caracteres para uma boa exibição.', 160) }}
                </div>
            </div>
        </div>

        {{-- ==================== GRID 2 COLUNAS PRINCIPAIS ==================== --}}
        <div class="grid" style="--bs-columns: 2; --bs-gap: 1rem;">

            {{-- COLUNA 1: Meta Title + Keywords --}}
            <div class="g-col-12 g-col-md-6">

                <div class="mb-3">
                    <label for="seo_title_{{ $uuid }}" class="form-label fw-bold small text-secondary">
                        Título da Página <span class="text-muted fw-normal">(Meta Title)</span>
                    </label>
                    <div class="input-group input-group-sm">
                        <span class="input-group-text bg-light">
                            <i class="bi bi-type-h1" aria-hidden="true"></i>
                        </span>
                        <input type="text"
                               name="{{ $prefix }}[title]"
                               id="seo_title_{{ $uuid }}"
                               class="form-control js-seo-title"
                               placeholder="Título customizado para resultados de busca"
                               value="{{ $seoData['title'] ?? '' }}"
                               maxlength="70"
                               aria-describedby="seo-title-help-{{ $uuid }}">
                    </div>
                    <p id="seo-title-help-{{ $uuid }}" class="form-text text-muted small mt-1 mb-0 d-flex flex-wrap align-items-center justify-content-between gap-1">
                        <span>Recomendado: até <strong>60</strong> caracteres.</span>
                        <span class="fw-bold" aria-live="polite" aria-atomic="true">
                            <span class="js-title-counter">0</span>/70
                        </span>
                    </p>
                    <div class="progress mt-1" role="progressbar" aria-label="Progresso do título" style="height: 3px;">
                        <div class="progress-bar js-title-progress" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="70"></div>
                    </div>
                </div>

                <div class="mb-3 mb-md-0">
                    <label for="seo_key_{{ $uuid }}" class="form-label fw-bold small text-secondary">
                        Palavras-chave <span class="text-muted fw-normal">(Meta Keywords)</span>
                    </label>
                    <div class="input-group input-group-sm">
                        <span class="input-group-text bg-light">
                            <i class="bi bi-tags-fill" aria-hidden="true"></i>
                        </span>
                        <input type="text"
                               name="{{ $prefix }}[keywords]"
                               id="seo_key_{{ $uuid }}"
                               class="form-control"
                               placeholder="palavras, separadas, por, virgulas"
                               value="{{ $seoData['keywords'] ?? '' }}">
                    </div>
                </div>

            </div>

            {{-- COLUNA 2: Meta Description + Imagem --}}
            <div class="g-col-12 g-col-md-6">

                <div class="mb-3">
                    <label for="seo_desc_{{ $uuid }}" class="form-label fw-bold small text-secondary">
                        Descrição da Página <span class="text-muted fw-normal">(Meta Description)</span>
                    </label>
                    <textarea name="{{ $prefix }}[description]"
                              id="seo_desc_{{ $uuid }}"
                              class="form-control js-seo-desc"
                              rows="3"
                              placeholder="Resumo amigável e explicativo para atrair cliques"
                              maxlength="160"
                              aria-describedby="seo-desc-help-{{ $uuid }}"
                              style="resize: vertical; min-height: 72px;">{{ $seoData['description'] ?? '' }}</textarea>
                    <p id="seo-desc-help-{{ $uuid }}" class="form-text text-muted small mt-1 mb-0 d-flex flex-wrap align-items-center justify-content-between gap-1">
                        <span>Recomendado: entre <strong>120</strong> e <strong>160</strong> caracteres.</span>
                        <span class="fw-bold" aria-live="polite" aria-atomic="true">
                            <span class="js-desc-counter">0</span>/160
                        </span>
                    </p>
                    <div class="progress mt-1" role="progressbar" aria-label="Progresso da descrição" style="height: 3px;">
                        <div class="progress-bar js-desc-progress" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="160"></div>
                    </div>
                </div>

                <div class="mt-0">
                    @php
                        $mediaUrl = $seoData['image_url'] ?? '';
                        $mediaId = $seoData['image_id'] ?? '';
                        if (empty($mediaId) && !empty($mediaUrl)) {
                            $relativePath = str_replace('/storage/', '', parse_url($mediaUrl, PHP_URL_PATH));
                            $mediaId = \Illuminate\Support\Facades\DB::table('v2_gallery_media')
                                ->where('file_path', $relativePath)
                                ->value('id') ?? '';
                        }
                    @endphp
                    @include('v2-service-media::components.media-input', [
                        'name' => 'seo_image_id',
                        'label' => 'Imagem de Compartilhamento (Card)',
                        'accept' => 'image/*',
                        'currentId' => $mediaId,
                        'currentUrl' => $mediaUrl,
                        'ownerModule' => 'seo',
                        'help' => '1200×630px (2:1). Se vazio, usa a logo padrão do site.',
                    ])
                    <input type="hidden" name="{{ $prefix }}[image_id]" id="seo-image-id-input-{{ $uuid }}" value="{{ $mediaId }}">
                    <input type="hidden" name="{{ $prefix }}[image_url]" id="seo-image-url-{{ $uuid }}" class="js-seo-image-url-input" value="{{ $mediaUrl }}">
                </div>

            </div>
        </div>

        {{-- ==================== JSON-LD (Avançado) ==================== --}}
        <hr class="my-3">

        <div class="grid" style="--bs-columns: 1; --bs-gap: 0.5rem;">
            <div class="g-col-12">
                <a href="#seo-advanced-{{ $uuid }}"
                   class="text-secondary small fw-bold text-decoration-none d-inline-flex align-items-center gap-1"
                   data-bs-toggle="collapse"
                   role="button"
                   aria-expanded="false"
                   aria-controls="seo-advanced-{{ $uuid }}">
                    <i class="bi bi-gear-fill" aria-hidden="true"></i>
                    Configurações Avançadas (JSON-LD)
                </a>

                <div id="seo-advanced-{{ $uuid }}" class="collapse mt-2">
                    <label for="seo_json_{{ $uuid }}" class="form-label fw-bold small text-secondary">
                        Dados Estruturados Customizados
                    </label>
                    <textarea name="{{ $prefix }}[json_ld]"
                              id="seo_json_{{ $uuid }}"
                              class="form-control form-control-sm font-monospace code-editor"
                              rows="4"
                              placeholder='{ "@context": "https://schema.org", "@type": "WebPage", ... }'
                              style="resize: vertical; min-height: 100px;">@php
                                  $jsonLd = isset($seoData['json_ld']) ? $seoData['json_ld'] : '';
                                  echo is_array($jsonLd) ? json_encode($jsonLd, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE) : $jsonLd;
                              @endphp</textarea>
                    <small class="form-text text-muted d-block mt-1">
                        <i class="bi bi-info-circle" aria-hidden="true"></i>
                        JSON-LD para dados estruturados do schema.org. Preencha apenas se precisar de marcação customizada.
                    </small>
                </div>
            </div>
        </div>

    </div>
</section>

@push('css')
<style>
    .seo-input-wrapper .code-editor {
        background: #1e1e1e !important;
        color: #d4d4d4 !important;
        border-color: #3c3c3c !important;
        font-size: 0.8rem;
        line-height: 1.6;
        tab-size: 2;
    }
    .seo-input-wrapper .code-editor:focus {
        background: #1e1e1e !important;
        color: #d4d4d4 !important;
        border-color: #569cd6 !important;
        box-shadow: 0 0 0 2px rgba(86, 156, 214, 0.25);
    }
    .seo-input-wrapper .code-editor::placeholder {
        color: #6a6a6a;
        opacity: 0.8;
    }
    /* Progress bar colorização dinâmica via JS */
    .seo-input-wrapper .progress-bar.seo-progress-ok { background-color: #198754; }
    .seo-input-wrapper .progress-bar.seo-progress-warn { background-color: #ffc107; }
    .seo-input-wrapper .progress-bar.seo-progress-danger { background-color: #dc3545; }
    /* Snippet preview */
    .seo-snippet {
        border-left: 3px solid #dee2e6;
        padding-left: 12px;
    }
    .seo-snippet-title {
        color: #1a0dab;
        cursor: pointer;
        display: inline;
    }
    .seo-snippet-title:hover {
        text-decoration: underline;
    }
    .seo-snippet-url {
        font-style: normal;
    }
</style>
@endpush

@push('scripts')
<script>
$(document).ready(function() {
    (function() {
        var $wrapper = $('#seo-wrapper-{{ $uuid }}');
        var $titleInput = $wrapper.find('.js-seo-title');
        var $descInput = $wrapper.find('.js-seo-desc');
        var $titleCounter = $wrapper.find('.js-title-counter');
        var $descCounter = $wrapper.find('.js-desc-counter');
        var $titleProgress = $wrapper.find('.js-title-progress');
        var $descProgress = $wrapper.find('.js-desc-progress');
        var $snippetTitle = $wrapper.find('#seo-snippet-title-{{ $uuid }}');
        var $snippetDesc = $wrapper.find('#seo-snippet-desc-{{ $uuid }}');

        var SEO_TITLE_MAX = 70;
        var SEO_DESC_MAX = 160;

        var truncate = function(str, len) {
            if (str.length <= len) return str;
            return str.substring(0, len) + '...';
        };

        var updateCounters = function() {
            var titleLen = $titleInput.val().length;
            var descLen = $descInput.val().length;
            var titleVal = $titleInput.val() || 'Título da Página — Exemplo';
            var descVal = $descInput.val() || 'Descrição da página que aparece nos resultados de busca. Recomenda-se entre 120 e 160 caracteres para uma boa exibição.';

            /* Atualiza contadores */
            $titleCounter.text(titleLen);
            $descCounter.text(descLen);

            /* Atualiza snippet preview ao vivo */
            $snippetTitle.text(titleVal);
            $snippetDesc.text(truncate(descVal, 160));

            /* Barra de progresso do título */
            var titlePct = Math.min((titleLen / SEO_TITLE_MAX) * 100, 100);
            $titleProgress.css('width', titlePct + '%').attr('aria-valuenow', titleLen);
            $titleProgress.removeClass('seo-progress-ok seo-progress-warn seo-progress-danger');
            if (titleLen <= 60) {
                $titleProgress.addClass('seo-progress-ok');
            } else if (titleLen <= 65) {
                $titleProgress.addClass('seo-progress-warn');
            } else {
                $titleProgress.addClass('seo-progress-danger');
            }

            /* Barra de progresso da descrição */
            var descPct = Math.min((descLen / SEO_DESC_MAX) * 100, 100);
            $descProgress.css('width', descPct + '%').attr('aria-valuenow', descLen);
            $descProgress.removeClass('seo-progress-ok seo-progress-warn seo-progress-danger');
            if (descLen >= 120 && descLen <= SEO_DESC_MAX) {
                $descProgress.addClass('seo-progress-ok');
            } else if (descLen >= 80) {
                $descProgress.addClass('seo-progress-warn');
            } else {
                $descProgress.addClass('seo-progress-danger');
            }
        };

        $titleInput.on('input', updateCounters);
        $descInput.on('input', updateCounters);
        updateCounters();

        /* Sincroniza inputs ocultos com o media-input */
        $wrapper.on('media-selected.lotep', function(e, data) {
            $wrapper.find('#seo-image-id-input-{{ $uuid }}').val(data.id);
            $wrapper.find('#seo-image-url-{{ $uuid }}').val(data.url);
        });

        /* Sincroniza aria-expanded do collapse */
        var $collapseEl = $('#seo-advanced-{{ $uuid }}');
        $collapseEl.on('show.bs.collapse', function() {
            $wrapper.find('[aria-controls="seo-advanced-{{ $uuid }}"]').attr('aria-expanded', 'true');
        });
        $collapseEl.on('hide.bs.collapse', function() {
            $wrapper.find('[aria-controls="seo-advanced-{{ $uuid }}"]').attr('aria-expanded', 'false');
        });
    })();
});
</script>
@endpush