@php
    /** @var \V2\Modules\Publicacoes\Noticias\Models\News|null $news */
    $isEditing = isset($news) && $news->exists;
    $status = $isEditing ? $news->status : 'draft';
    $statusPublished = \V2\Modules\Publicacoes\Noticias\Models\News::STATUS_PUBLISHED;

    $pageTitle = $isEditing ? 'Editar: ' . $news->title : 'Criar Notícia';

    $formAction = $isEditing
        ? route('v2.noticias.cms.update', ['id' => $news->id])
        : route('v2.noticias.cms.store');

    $coverMedia = $isEditing && $news->relationLoaded('coverImage') ? $news->coverImage : null;

    $authorName = $isEditing && $news->relationLoaded('author') && $news->author
        ? ($news->author->first_name ?? $news->author->name ?? $news->author->email)
        : null;
@endphp

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

@if(session()->has('success') || session()->has('error') || session()->has('warning') || session()->has('info') || session()->has('flash_message'))
    @include('v2-cms::partials.alert')
@endif

{{-- Page header --}}
<div class="d-flex align-items-center gap-3 mb-4">
    <a href="{{ route('v2.noticias.cms.index') }}" class="btn btn-outline-secondary btn-sm"
       aria-label="Voltar para listagem de notícias">
        <i class="bi bi-arrow-left" aria-hidden="true"></i>
        Voltar
    </a>
    <h3 class="mb-0">{{ $pageTitle }}</h3>
</div>

<form method="POST" action="{{ $formAction }}" class="news-form" novalidate>
    {{ csrf_field() }}

    {{-- ========================================================================
       BLOCO 1: DADOS CRÍTICOS (título, slug, categoria, data de publicação, tags)
       ======================================================================== --}}
    <div class="card card-news mb-3">
        <div class="card-header d-flex align-items-center gap-2">
            <i class="bi bi-pencil-square" aria-hidden="true"></i>
            <h5 class="mb-0">Dados Críticos</h5>
        </div>
        <div class="card-body">
            <div class="row g-3">
                {{-- Título --}}
                <div class="col-12">
                    <label for="news-title" class="form-label">Título <span class="text-danger" aria-hidden="true">*</span></label>
                    <input type="text" id="news-title" name="title"
                           class="form-control form-control-lg" required
                           value="{{ old('title', $news->title ?? '') }}"
                           placeholder="Digite o título da notícia..."
                           maxlength="255">
                </div>
                {{-- Slug --}}
                <div class="col-12">
                    <label for="news-slug" class="form-label">Slug (URL)</label>
                    <div class="input-group">
                        <span class="input-group-text text-muted small bg-light" id="slug-prefix">/</span>
                        <input type="text" id="news-slug" name="slug"
                               class="form-control font-monospace"
                               value="{{ old('slug', $news->slug ?? '') }}"
                               placeholder="url-da-noticia"
                               maxlength="255">
                        <button type="button" class="btn btn-outline-secondary" id="btn-regenerate-slug"
                                title="Regenerar slug a partir do título" aria-label="Regenerar slug">
                            <i class="bi bi-arrow-repeat" aria-hidden="true"></i>
                        </button>
                        @if($isEditing && $news->status === $statusPublished && $news->getPublicUrl())
                        <a href="{{ $news->getPublicUrl() }}" target="_blank" rel="noopener noreferrer"
                           class="btn btn-outline-success">
                            <i class="bi bi-box-arrow-up-right me-1" aria-hidden="true"></i>
                            Ver no Portal
                        </a>
                        @endif
                    </div>
                    <div class="form-text">Preenchido automaticamente a partir do título.</div>
                </div>
                {{-- Categoria + Data de Publicação --}}
                <div class="col-md-6">
                    <label for="category_id" class="form-label">Categoria <span class="text-danger" aria-hidden="true">*</span></label>
                    @php
                        $selectedCategoryId = old('category_id', $isEditing ? $news->category_id : ($defaultCategoryId ?? ''));
                    @endphp
                    <select id="category_id" name="category_id" class="form-select" required>
                        <option value="">Selecione...</option>
                        @if(isset($categories))
                            @foreach($categories as $cat)
                                <optgroup label="{{ $cat->name }}">
                                    <option value="{{ $cat->id }}" data-slug="{{ $cat->slug }}"
                                        {{ $selectedCategoryId == $cat->id ? 'selected' : '' }}>
                                        {{ $cat->name }}
                                    </option>
                                    @foreach($cat->children as $child)
                                        <option value="{{ $child->id }}" data-slug="{{ $child->slug }}"
                                            {{ $selectedCategoryId == $child->id ? 'selected' : '' }}>
                                            &nbsp;&nbsp;└ {{ $child->name }}
                                        </option>
                                    @endforeach
                                </optgroup>
                            @endforeach
                        @endif
                    </select>

                    {{-- Seletor de unidade regional — visível quando a categoria é "Regional" --}}
                    @php
                        $isRegionalCategory = false;
                        if ($isEditing && isset($news) && $news->category) {
                            $isRegionalCategory = in_array(strtolower($news->category->slug), ['regionais', 'regional']);
                        }
                    @endphp
                    <div id="regional-field-wrapper" class="mt-3" style="{{ $isRegionalCategory ? '' : 'display:none;' }}">
                        <label for="unidade_regional_id" class="form-label fw-semibold">
                            Unidade Regional <span class="text-danger" aria-hidden="true">*</span>
                        </label>
                        <select id="unidade_regional_id" name="unidade_regional_id" class="form-select" required>
                            <option value="">Selecione a regional...</option>
                            @if(isset($unidadesRegionais))
                                @foreach($unidadesRegionais as $ur)
                                    <option value="{{ $ur->id }}"
                                        {{ (old('unidade_regional_id', $news->unidade_regional_id ?? '')) === $ur->id ? 'selected' : '' }}>
                                        {{ $ur->name }} ({{ $ur->acronym }})
                                    </option>
                                @endforeach
                            @endif
                        </select>
                        <div class="form-text">Obrigatório quando a categoria é "Regional".</div>
                    </div>
                </div>
                <div class="col-md-6">
                    <label for="published_at_date" class="form-label">Data de Publicação <span class="text-danger" aria-hidden="true">*</span></label>
                    @php $pubDate = old('published_at_date', $isEditing && $news->published_at ? $news->published_at->timezone('America/Sao_Paulo')->format('Y-m-d H:i') : ($now ?? now('America/Sao_Paulo')->format('Y-m-d H:i'))); @endphp
                    <input type="text" id="published_at_date" name="published_at_date"
                           class="form-control" required
                           data-picker="datetime"
                           value="{{ $pubDate }}"
                           aria-label="Selecionar data e hora de publicação">
                    @if($isEditing && $news->published_at)
                        <div class="form-text">
                            Atual: {{ $news->published_at->timezone('America/Sao_Paulo')->format('d/m/Y H:i') }}
                            @if($news->published_at->isFuture())
                                <span class="text-warning">(futura)</span>
                            @else
                                <span class="text-success">(publicada)</span>
                            @endif
                        </div>
                    @else
                        <div class="form-text">Data em que será exibida no portal. Vazio = data atual.</div>
                    @endif
                </div>
                {{-- Tags --}}
                <div class="col-12">
                    <label class="form-label">Tags</label>
                    <div class="tags-wrapper">
                        <div class="tags-selected d-flex flex-wrap gap-1 mb-2" id="tags-selected">
                            @if($isEditing && $news->relationLoaded('tags'))
                                @foreach($news->tags as $tag)
                                    <span class="tag-badge" data-name="{{ $tag->name }}">
                                        {{ $tag->name }}
                                        <button type="button" class="tag-remove"
                                                aria-label="Remover tag {{ $tag->name }}">&times;</button>
                                        <input type="hidden" name="tags[]" value="{{ $tag->name }}">
                                    </span>
                                @endforeach
                            @endif
                        </div>
                        <div class="input-group input-group-sm">
                            <input type="text" id="tags-input" class="form-control"
                                   placeholder="Buscar ou criar tag..." autocomplete="off">
                            <button type="button" class="btn btn-outline-primary" id="tags-add-btn" aria-label="Adicionar tag">
                                <i class="bi bi-plus-lg"></i>
                            </button>
                        </div>
                        <div class="tags-available mt-2" id="tags-available">
                            @if(isset($allTags))
                                @foreach($allTags as $tag)
                                    <button type="button" class="tag-available"
                                            data-name="{{ $tag->name }}"
                                            @if($isEditing && $news->relationLoaded('tags') && $news->tags->contains('id', $tag->id)) style="display:none" @endif>
                                        {{ $tag->name }}
                                    </button>
                                @endforeach
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- ========================================================================
       BLOCO 2: METADADOS (data do conteúdo, responsável, SEO)
       Container colapsado — expande ao interagir
       ======================================================================== --}}
    <div class="card card-news mb-3">
        <div class="card-header d-flex align-items-center gap-2 cursor-pointer" 
             data-bs-toggle="collapse" data-bs-target="#metadataCollapse"
             aria-expanded="false" aria-controls="metadataCollapse" role="button" tabindex="0">
            <i class="bi bi-info-circle" aria-hidden="true"></i>
            <h5 class="mb-0">Metadados</h5>
            <i class="bi bi-chevron-down ms-auto small opacity-50" aria-hidden="true"></i>
        </div>
        <div class="collapse" id="metadataCollapse">
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-md-4">
                        <label for="content_date_picker" class="form-label">Data do Conteúdo</label>
                        @php
                            $conDateDefault = $isEditing && $news->content_date
                                ? $news->content_date->format('d/m/Y')
                                : \Carbon\Carbon::parse($now ?? now('America/Sao_Paulo'))->format('d/m/Y');
                            $conDate = old('content_date', $conDateDefault);
                        @endphp
                        <input type="hidden" id="content_date" name="content_date" value="{{ $conDate }}">
                        <input type="date" id="content_date_picker" class="form-control"
                               value="{{ $conDate ? implode('-', array_reverse(explode('/', $conDate))) : '' }}"
                               aria-label="Selecionar data do conteúdo">
                        <div class="form-text">Pode diferir da data de publicação.</div>
                    </div>
                    <div class="col-md-4">
                        <label for="responsible_name" class="form-label">Responsável</label>
                        <input type="text" id="responsible_name" name="responsible_name" class="form-control"
                               value="{{ old('responsible_name', $isEditing ? $news->responsible_name : ($currentUserName ?? '')) }}"
                               placeholder="Nome do responsável">
                        <div class="form-text">Por padrão, o usuário logado.</div>
                    </div>
                    <div class="col-md-4">
                        <label for="source" class="form-label">Fonte</label>
                        <input type="text" id="source" name="source" class="form-control"
                               value="{{ old('source', $isEditing ? $news->source : '') }}"
                               placeholder="Links, pessoas, bibliografia...">
                        <div class="form-text">Origem da informação.</div>
                    </div>
                </div>

                <hr class="my-3">

                {{-- SEO collapsible dentro do bloco de metadados --}}
                <div>
                    <button type="button" class="btn btn-outline-info btn-sm" id="btn-toggle-seo"
                            data-bs-toggle="collapse" data-bs-target="#seo-panel"
                            aria-expanded="false" aria-controls="seo-panel">
                        <i class="bi bi-search-heart me-1" aria-hidden="true"></i>
                        Configurar SEO
                    </button>
                    <div class="collapse mt-3" id="seo-panel">
                        <div class="card card-body border-info">
                            @include('v2-service-seo::components.seo-input', [
                                'model'       => $isEditing ? $news : null,
                                'name'        => 'metadata[seo]',
                                'ownerModule' => 'noticias',
                            ])
                        </div>
                    </div>
                </div>

                @if($isEditing)
                <hr class="my-3">
                <div class="row g-3 text-muted small">
                    <div class="col-auto">
                        <i class="bi bi-person-circle me-1" aria-hidden="true"></i>
                        Criado por: <strong>{{ $authorName ?? 'Desconhecido' }}</strong>
                        <span class="ms-2">{{ $news->created_at->format('d/m/Y H:i') }}</span>
                    </div>
                    <div class="col-auto">
                        <i class="bi bi-pencil-square me-1" aria-hidden="true"></i>
                        Última edição: {{ $news->updated_at->format('d/m/Y H:i') }}
                    </div>
                    @if($news->status === $statusPublished && $news->published_at)
                    <div class="col-auto">
                        <i class="bi bi-check-circle text-success me-1" aria-hidden="true"></i>
                        Publicado em: {{ $news->published_at->timezone('America/Sao_Paulo')->format('d/m/Y H:i') }}
                    </div>
                    @endif
                </div>
                @endif
            </div>
        </div>
    </div>

    {{-- ========================================================================
       BLOCO 3: CONTEÚDO (2 colunas — capa+preview 40% direita, resumo+corpo 60% esquerda)
       ======================================================================== --}}
    <div class="card card-news mb-3">
        <div class="card-header d-flex align-items-center gap-2">
            <i class="bi bi-file-text" aria-hidden="true"></i>
            <h5 class="mb-0">Conteúdo</h5>
        </div>
        <div class="card-body p-0">
            <div class="content-columns">
                {{-- Coluna esquerda (60%): Resumo + Corpo --}}
                <div class="content-column-main">
                    <div class="p-3">
                        <label for="news-subtitle" class="form-label">Resumo da Matéria</label>
                        <textarea id="news-subtitle" name="subtitle" rows="2" class="form-control"
                                  placeholder="Resumo curto que aparece abaixo do título, nos cards e como meta description..."
                                  maxlength="1000">{{ old('subtitle', $news->subtitle ?? '') }}</textarea>
                        <div class="form-text mb-3">Usado como linha fina na página e meta description.</div>

                        <label class="form-label">Corpo da Notícia</label>
                        @include('v2-service-contentricheditor::components.forms.content-rich-editor', [
                            'name'     => 'content',
                            'label'    => '',
                            'value'    => old('content', $news->content ?? '{"type":"doc","content":[]}'),
                            'required' => false,
                        ])
                    </div>
                </div>

                {{-- Coluna direita (40%): Imagem de Capa + Preview --}}
                <div class="content-column-side">
                    <div class="p-3">
                        {{-- Imagem de Capa --}}
                        <div class="mb-4">
                            <label class="form-label fw-medium">Imagem de Capa</label>
                            @include('v2-service-media::components.media-input', [
                                'name'        => 'cover_image_id',
                                'label'       => '',
                                'accept'      => 'image/*',
                                'currentId'   => $coverMedia ? $coverMedia->id : ($isEditing ? $news->cover_image_id : ''),
                                'currentUrl'  => $coverMedia ? v2_storage_url($coverMedia->file_path) : '',
                                'currentAlt'  => $coverMedia ? ($coverMedia->alt_text ?? '') : '',
                                'ownerModule' => 'noticias',
                                'help'        => 'Proporção 16:9.',
                                'noPicker'    => false,
                            ])
                        </div>

                        {{-- Preview ao vivo (iframe da tela final do portal) --}}
                        <div>
                            <label class="form-label fw-medium">Preview</label>
                            <div class="content-preview-box" id="content-preview-box">
                                @if($isEditing)
                                <iframe id="preview-iframe"
                                        src="{{ route('v2.noticias.cms.preview-iframe', ['id' => $news->id]) }}"
                                        title="Preview da notícia no portal"
                                        class="preview-iframe"
                                        sandbox="allow-scripts allow-same-origin"
                                        loading="lazy"></iframe>
                                @else
                                <div class="content-preview-placeholder text-muted text-center p-4">
                                    <i class="bi bi-floppy fs-2 d-block mb-2" aria-hidden="true"></i>
                                    <span class="small">Salve a notícia para ver o preview completo.</span>
                                </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- ========================================================================
       BLOCO 4: GALERIA DE IMAGENS (upload múltiplo com crop e metadados)
       ======================================================================== --}}
    @php
        $galleryIds = [];
        $galleryUrls = [];
        if ($isEditing && $news->relationLoaded('gallery')) {
            foreach ($news->gallery as $galleryMedia) {
                $galleryIds[] = $galleryMedia->id;
                $galleryUrls[] = v2_storage_url($galleryMedia->file_path);
            }
        }
    @endphp
    @include('v2-service-media::components.media-group-input', [
        'name'        => 'gallery',
        'label'       => 'Galeria de Imagens',
        'accept'      => 'image/*',
        'maxFiles'    => 20,
        'ownerModule' => 'noticias',
        'existingIds' => $galleryIds,
        'existingUrls'=> $galleryUrls,
    ])

    {{-- ========================================================================
       AÇÕES
       ======================================================================== --}}
    <div class="d-flex gap-2 justify-content-between align-items-center mt-4 pt-3 border-top">
        <div>
            <a href="{{ route('v2.noticias.cms.index') }}" class="btn btn-outline-secondary">
                <i class="bi bi-x-lg me-1" aria-hidden="true"></i> Cancelar
            </a>
            @if($isEditing)
            <button type="button" class="btn btn-outline-secondary"
                    data-confirm-modal
                    data-confirm-title="Arquivar Notícia"
                    data-confirm-body='Deseja arquivar "{{ addslashes($news->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 em &quot;Arquivadas&quot;."
                    data-confirm-form-id="delete-news-form"
                    title="Arquivar notícia">
                <i class="bi bi-archive me-1" aria-hidden="true"></i> Arquivar
            </button>
            @endif
        </div>
        <div class="d-flex gap-2">
            <button type="submit" name="status" value="draft" class="btn btn-outline-primary">
                <i class="bi bi-save me-1" aria-hidden="true"></i> Salvar Rascunho
            </button>
            <button type="submit" name="status" value="published" class="btn btn-primary">
                <i class="bi bi-check-circle me-1" aria-hidden="true"></i> Publicar
            </button>
        </div>
    </div>
</form>

{{-- Form de exclusão separado --}}
@if($isEditing)
<form action="{{ route('v2.noticias.cms.destroy', ['id' => $news->id]) }}"
      method="POST" id="delete-news-form" class="d-none"
      onsubmit="return confirm('Tem certeza que deseja realizar esta ação?')">
    {{ csrf_field() }}
    <input type="hidden" name="_method" value="DELETE">
</form>
@endif

{{-- Activity Log (collapsible) --}}
@if($isEditing)
<div class="mt-4">
    <button class="btn btn-link text-decoration-none p-0" type="button"
            data-bs-toggle="collapse" data-bs-target="#activityLogCollapse"
            aria-expanded="false" aria-controls="activityLogCollapse">
        <i class="bi bi-clock-history me-1" aria-hidden="true"></i>
        Histórico de Alterações
    </button>
    <div class="collapse mt-2" id="activityLogCollapse">
        @include('v2-service-activitylogger::cms.timeline', [
            'model' => $news,
            'title' => '',
            'icon'  => 'bi-clock-history',
        ])
    </div>
</div>
@endif

</div>{{-- /news-page-layout --}}

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

@push('scripts')
    @include('v2-noticias::cms.includes.scripts')
@endpush

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

    var categorySelect = document.getElementById('category_id');
    var regionalWrapper = document.getElementById('regional-field-wrapper');
    var regionalSelect = document.getElementById('unidade_regional_id');
    if (!categorySelect || !regionalWrapper) return;

    function toggleRegional() {
        var selected = categorySelect.options[categorySelect.selectedIndex];
        var slug = (selected && (selected.getAttribute('data-slug') || '')).toLowerCase();
        var isRegional = slug === 'regionais' || slug === 'regional';
        regionalWrapper.style.display = isRegional ? '' : 'none';
        if (regionalSelect) regionalSelect.required = isRegional;
    }

    categorySelect.addEventListener('change', toggleRegional);
    toggleRegional(); // estado inicial
})();
</script>
@endpush