@php
    /** @var \V2\Modules\Conexoes\UnidadeRegional\Models\UnidadeRegional $unidade */
    $pageTitle = 'Editar: ' . $unidade->name;
    $previewUrl = route('v2.unidade-regional.portal.show', ['slug' => $unidade->slug]);
    $meta = $unidade->metadata ?? [];
    $storageSvc = app(\V2\Services\Storage\StorageService::class);
@endphp

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

@push('css')
<style>
.editor-split {
    display: grid;
    grid-template-columns: 1fr;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: var(--bs-border-radius, 0.375rem);
    overflow: hidden;
}
@media (min-width: 992px) {
    .editor-split { grid-template-columns: 3fr 2fr; }
}
.editor-left-panel { padding: 1.5rem; background: #fff; }
.editor-right-panel {
    display: grid; grid-template-rows: auto auto;
    align-content: start;
    background: var(--bs-light-bg-subtle, #f8f9fa);
    border-left: 1px solid var(--bs-border-color, #dee2e6);
}
@media (max-width: 991px) {
    .editor-right-panel { border-left: none; border-top: 1px solid var(--bs-border-color, #dee2e6); }
}
.preview-header-bar {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.25rem 0.5rem; background: #222d32; color: #fff; font-size: var(--text-xs);
    line-height: 1.2;
}
.preview-header-bar .preview-status {
    font-family: monospace;
    color: #b8c7ce;
}
#live-preview-iframe {
    width: 100%; min-height: 50vh; height: 500px;
    border: none; background: #fff;
}
</style>
@endpush

@section('page-breadcrumbs')
    <span class="current">Conexões</span>
    <span class="separator">›</span>
    <a href="{{ route('v2.unidade-regional.cms.index') }}">Unidades Regionais</a>
    <span class="separator">›</span>
    <span class="current">Editar: {{ $unidade->name }}</span>
@endsection

@section('page-actions')
    <a href="{{ route('v2.unidade-regional.cms.docs') }}"
       class="btn btn-sm btn-outline-info d-inline-flex align-items-center gap-1"
       title="Documentação da API">
        <i class="bi bi-book"></i> API Docs
    </a>
    @if($unidade->is_active)
        <form action="{{ route('v2.unidade-regional.cms.destroy', ['id' => $unidade->id]) }}"
              method="POST" class="d-inline"
              onsubmit="return confirm('Arquivar &quot;{{ $unidade->name }}&quot;?')">
            {{ csrf_field() }}
            {{ method_field('DELETE') }}
            <button type="submit" class="btn btn-sm btn-outline-danger">
                <i class="bi bi-archive me-1"></i> Arquivar
            </button>
        </form>
    @endif
@endsection

@section('content')
<div class="row g-4">
    {{-- ============================================================ --}}
    {{-- COLUNA PRINCIPAL (ESQUERDA)                                  --}}
    {{-- ============================================================ --}}
    <div class="col-lg-8">
        <form action="{{ route('v2.unidade-regional.cms.update', ['id' => $unidade->id]) }}"
              method="POST" novalidate>
            {{ csrf_field() }}
            {{ method_field('PUT') }}

            @include('v2-unidaderegional::cms._form')

            {{-- Editor de Conteúdo (Descrição) --}}
            <h6 class="fw-bold mb-3"><i class="bi bi-pencil-square me-1 text-primary"></i> Descrição</h6>

            <div class="editor-split mb-4">
                <div class="editor-left-panel">
                    <div class="mb-3">
                        <label for="resumo" class="form-label fw-semibold">Descrição Rápida</label>
                        <textarea id="resumo" name="resumo" rows="3" class="form-control"
                                  placeholder="Breve resumo da regional..."
                                  maxlength="250"
                                  aria-describedby="resumo-counter">{{ old('resumo', $meta['resumo'] ?? '') }}</textarea>
                        <div id="resumo-counter" class="form-text text-end small" aria-live="polite">
                            <span id="resumo-count">0</span>/250 caracteres
                        </div>
                    </div>

                    <div class="mb-0">
                        <label for="description" class="form-label fw-semibold">Descrição Detalhada</label>
                        @include('v2-service-contentricheditor::components.forms.content-rich-editor', [
                            'name'        => 'description',
                            'label'       => 'Descrição Detalhada',
                            'value'       => old('description', $unidade->description ?? '{"type":"doc","content":[]}'),
                            'placeholder' => 'Descreva detalhadamente a regional...',
                            'height'      => '400px',
                        ])
                    </div>
                </div>

                <div class="editor-right-panel">
                    <div class="preview-header-bar">
                        <strong><i class="bi bi-display me-1"></i> Preview</strong>
                        <span class="preview-status"><i class="bi bi-dot"></i> Pronto</span>
                    </div>
                    <iframe id="live-preview-iframe" src="{{ $previewUrl }}"
                            title="Preview da regional"
                            sandbox="allow-scripts allow-same-origin"></iframe>
                </div>
            </div>

            {{-- Galeria --}}
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-header bg-white py-3 d-flex justify-content-between align-items-center">
                    <h5 class="card-title mb-0"><i class="bi bi-images me-1 text-primary"></i> Galeria</h5>
                    <span class="badge bg-secondary">{{ $unidade->media_count ?? $unidade->media->count() }}</span>
                </div>
                <div class="card-body">
                    @php
                        $galleryIds = $unidade->media->pluck('gallery_media_id')->filter()->values()->toArray();
                        $galleryUrls = [];
                        foreach ($unidade->media as $item) {
                            $galleryUrls[] = $item->galleryMedia
                                ? v2_storage_url($item->galleryMedia->file_path)
                                : v2_storage_url($item->image);
                        }
                    @endphp
                    @include('v2-service-media::components.media-group-input', [
                        'name' => 'gallery_media', 'label' => '',
                        'accept' => 'image/*', 'ownerModule' => 'unidade-regional',
                        'existingIds' => $galleryIds, 'existingUrls' => $galleryUrls,
                    ])
                </div>
            </div>

            <div class="mt-4 d-flex gap-2">
                <button type="submit" class="btn btn-primary"><i class="bi bi-check-circle me-1"></i> Atualizar</button>
                <a href="{{ route('v2.unidade-regional.cms.index') }}" class="btn btn-outline-secondary">
                    <i class="bi bi-arrow-left me-1"></i> Cancelar</a>
            </div>
        </form>

        {{-- Activity Log --}}
        @include('v2-cms::partials.activity-footer', ['model' => $unidade])
    </div>

    {{-- ============================================================ --}}
    {{-- COLUNA LATERAL (DIREITA)                                     --}}
    {{-- ============================================================ --}}
    <div class="col-lg-4">
        {{-- API de Integração --}}
        <div class="card border-0 shadow-sm mb-4" id="api-card">
            <div class="card-header bg-white py-3 d-flex align-items-center gap-2">
                <i class="bi bi-key fs-5 text-primary" aria-hidden="true"></i>
                <h5 class="mb-0 flex-grow-1">API de Integração</h5>
                @if($unidade->hasApiToken())
                    <span id="api-status-badge">{!! $unidade->getTokenStatusBadge() !!}</span>
                @endif
            </div>
            <div class="card-body">
                @if($unidade->hasApiToken())
                    <div class="mb-3">
                        <small class="text-muted d-block">Prefixo do Token</small>
                        <code id="api-token-prefix">{{ $unidade->api_token_prefix ?? '—' }}</code>
                    </div>
                    <div class="mb-3">
                        <small class="text-muted d-block">Expira em</small>
                        <span id="api-token-expires">{{ $unidade->getTokenExpiryForHumans() }}</span>
                    </div>
                    <div class="mb-3">
                        <small class="text-muted d-block">Último uso</small>
                        <span id="api-token-last-used">{{ $unidade->api_token_last_used_at ? $unidade->api_token_last_used_at->format('d/m/Y H:i') : 'Nunca' }}</span>
                    </div>
                    <div class="mb-3">
                        <small class="text-muted d-block">Endpoints da API</small>
                        <code class="d-block small mb-1">GET  /api/v2/unidaderegional/noticias</code>
                        <code class="d-block small mb-1">POST /api/v2/unidaderegional/noticias</code>
                        <code class="d-block small mb-1">DELETE /api/v2/unidaderegional/noticias/{id}</code>
                        <code class="d-block small mb-1">GET  /api/v2/unidaderegional/associados</code>
                        <code class="d-block small mb-1">POST /api/v2/unidaderegional/associados</code>
                        <code class="d-block small">DELETE /api/v2/unidaderegional/associados/{id}</code>
                    </div>
                    <hr>
                    <div class="d-flex gap-2 flex-wrap">
                        <a href="{{ route('v2.unidade-regional.cms.docs') }}"
                           class="btn btn-outline-info btn-sm d-inline-flex align-items-center gap-1">
                            <i class="bi bi-book me-1"></i> Documentação
                        </a>
                        <button type="button" class="btn btn-outline-primary btn-sm" onclick="generateApiToken('{{ $unidade->id }}')">
                            <i class="bi bi-arrow-clockwise me-1"></i> Regenerar Token
                        </button>
                        <button type="button" class="btn btn-outline-danger btn-sm" onclick="revokeApiToken('{{ $unidade->id }}')">
                            <i class="bi bi-x-circle me-1"></i> Revogar Token
                        </button>
                    </div>
                @else
                    <p class="text-muted small mb-3">
                        <i class="bi bi-info-circle me-1"></i>
                        Esta regional ainda não possui token de API. Gere um token para permitir que ela envie notícias pelo endpoint.
                    </p>
                    <button type="button" class="btn btn-primary btn-sm" onclick="generateApiToken('{{ $unidade->id }}')">
                        <i class="bi bi-key me-1"></i> Gerar Token de API
                    </button>
                @endif
            </div>
        </div>

        {{-- Notícias Recentes --}}
        <div class="card border-0 shadow-sm mb-4">
            <div class="card-header bg-white py-3 d-flex justify-content-between align-items-center">
                <h5 class="card-title mb-0"><i class="bi bi-newspaper me-1 text-primary"></i> Notícias</h5>
                @if($noticiasRecentes->count() > 0)
                    <a href="{{ route('v2.unidade-regional.cms.news', ['id' => $unidade->id]) }}"
                       class="btn btn-sm btn-outline-primary">Ver todas</a>
                @endif
            </div>
            <div class="card-body p-0">
                @if($noticiasRecentes->count() > 0)
                    <ul class="list-group list-group-flush">
                        @foreach($noticiasRecentes as $noticia)
                            <li class="list-group-item py-2 px-3">
                                <a href="{{ route('v2.noticias.cms.edit', ['id' => $noticia->id]) }}"
                                   class="text-decoration-none small fw-medium d-block text-truncate">
                                    {{ $noticia->title }}
                                </a>
                                <small class="text-muted">
                                    {{ $noticia->created_at ? $noticia->created_at->format('d/m/Y') : '' }}
                                </small>
                            </li>
                        @endforeach
                    </ul>
                @else
                    <div class="text-center py-4 px-3">
                        <i class="bi bi-newspaper text-muted" style="font-size:1.5rem;"></i>
                        <p class="text-muted small mt-1 mb-0">Nenhuma notícia enviada via API.</p>
                    </div>
                @endif
            </div>
        </div>

        {{-- Associados Regionais --}}
        <div class="card border-0 shadow-sm mb-4">
            <div class="card-header bg-white py-3">
                <h5 class="card-title mb-0"><i class="bi bi-building me-1 text-primary"></i> Associados Regionais</h5>
            </div>
            <div class="card-body p-0">
                @if($empresasRecentes->count() > 0)
                    <ul class="list-group list-group-flush">
                        @foreach($empresasRecentes as $rel)
                            <li class="list-group-item py-2 px-3">
                                @if($rel->empresa)
                                    <a href="{{ route('v2.associados.cms.instituicoes.edit', ['id' => $rel->empresa_id]) }}"
                                       class="text-decoration-none small fw-medium d-block text-truncate">
                                        {{ $rel->empresa->name }}
                                    </a>
                                @else
                                    <span class="small text-muted">Associado removido</span>
                                @endif
                                <small class="text-muted">
                                    {{ $rel->created_at ? $rel->created_at->format('d/m/Y') : '' }}
                                </small>
                            </li>
                        @endforeach
                    </ul>
                @else
                    <div class="text-center py-4 px-3">
                        <i class="bi bi-building text-muted" style="font-size:1.5rem;"></i>
                        <p class="text-muted small mt-1 mb-0">Nenhum associado regional vinculado.</p>
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>

{{-- Modais de Token (fora do grid) --}}
<div class="modal fade" id="apiTokenModal" tabindex="-1" role="dialog" aria-labelledby="apiTokenModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header border-0">
                <h5 class="modal-title" id="apiTokenModalLabel"><i class="bi bi-key text-primary me-1"></i> Token de API Gerado</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fechar"></button>
            </div>
            <div class="modal-body">
                <div class="alert alert-warning d-flex align-items-center gap-2 mb-3 py-2 small" role="alert">
                    <i class="bi bi-exclamation-triangle-fill flex-shrink-0"></i>
                    <span><strong>Copie este token agora.</strong></span>
                </div>
                <div class="bg-light border rounded p-3 mb-3">
                    <code id="api-token-raw" class="text-break" style="font-size:var(--text-sm);word-break:break-all;user-select:all;"></code>
                </div>
            </div>
            <div class="modal-footer border-0">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fechar</button>
                <button type="button" class="btn btn-primary" onclick="copyApiToken()"><i class="bi bi-clipboard me-1"></i> Copiar Token</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="confirmGenerateTokenModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header border-0">
                <h5 class="modal-title"><i class="bi bi-key text-warning me-1"></i> Gerar Token de API</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fechar"></button>
            </div>
            <div class="modal-body">
                <div class="alert alert-warning d-flex align-items-start gap-2 mb-0 py-2 small" role="alert">
                    <i class="bi bi-exclamation-triangle-fill flex-shrink-0 mt-1"></i>
                    <div><strong>Atenção:</strong> Um novo token invalidará o anterior. A regional precisará atualizar o token.</div>
                </div>
            </div>
            <div class="modal-footer border-0">
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancelar</button>
                <button type="button" class="btn btn-warning" id="confirmGenerateBtn"><i class="bi bi-check-lg me-1"></i> Confirmar Geração</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="confirmRevokeTokenModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header border-0">
                <h5 class="modal-title"><i class="bi bi-x-circle text-danger me-1"></i> Revogar Token de API</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fechar"></button>
            </div>
            <div class="modal-body">
                <div class="alert alert-danger d-flex align-items-start gap-2 mb-0 py-2 small" role="alert">
                    <i class="bi bi-exclamation-triangle-fill flex-shrink-0 mt-1"></i>
                    <div><strong>Ação irreversível.</strong> A regional não poderá mais enviar notícias via API.</div>
                </div>
            </div>
            <div class="modal-footer border-0">
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancelar</button>
                <button type="button" class="btn btn-danger" id="confirmRevokeBtn"><i class="bi bi-check-lg me-1"></i> Confirmar Revogação</button>
            </div>
        </div>
    </div>
</div>
<div class="position-fixed bottom-0 end-0 p-3" style="z-index:9999;">
    <div id="apiToast" class="toast align-items-center border-0" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="d-flex">
            <div class="toast-body" id="apiToastBody"></div>
            <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Fechar"></button>
        </div>
    </div>
</div>

@push('scripts')
<script>
(function() {
    var ta = document.getElementById('resumo');
    var counter = document.getElementById('resumo-count');
    if (!ta || !counter) return;
    function updateCounter() {
        counter.textContent = ta.value.length;
    }
    updateCounter();
    ta.addEventListener('input', updateCounter);
})();
</script>
<script>
var _pendingGenerateId = null;
function generateApiToken(id) { _pendingGenerateId = id; new bootstrap.Modal(document.getElementById('confirmGenerateTokenModal')).show(); }
function revokeApiToken(id) { _pendingGenerateId = id; new bootstrap.Modal(document.getElementById('confirmRevokeTokenModal')).show(); }

document.getElementById('confirmGenerateBtn').addEventListener('click', function() {
    var id = _pendingGenerateId; if (!id) return;
    var m = bootstrap.Modal.getInstance(document.getElementById('confirmGenerateTokenModal')); if (m) m.hide();
    fetch('/cms/unidades-regionais/' + id + '/api-token/gerar', {
        method: 'POST', headers: { 'X-CSRF-TOKEN': document.querySelector('input[name="_token"]')?.value || '', 'Accept': 'application/json' },
    }).then(function(r){return r.json();}).then(function(d){
        if (!d.data) return;
        document.getElementById('api-token-raw').textContent = d.data.raw_token;
        new bootstrap.Modal(document.getElementById('apiTokenModal')).show();
        var sb = document.getElementById('api-status-badge'); if (sb) sb.innerHTML = '<span class="badge bg-success">Ativo</span>';
        var pe = document.getElementById('api-token-prefix'); if (pe) pe.textContent = d.data.prefix;
        var ee = document.getElementById('api-token-expires'); if (ee) ee.textContent = d.data.expires_at ? new Date(d.data.expires_at).toLocaleDateString('pt-BR') : '—';
    }).catch(function(){ showToast('Erro ao gerar token', 'danger'); }).finally(function(){ _pendingGenerateId = null; });
});

document.getElementById('confirmRevokeBtn').addEventListener('click', function() {
    var id = _pendingGenerateId; if (!id) return;
    var m = bootstrap.Modal.getInstance(document.getElementById('confirmRevokeTokenModal')); if (m) m.hide();
    fetch('/cms/unidades-regionais/' + id + '/api-token/revogar', {
        method: 'POST', headers: { 'X-CSRF-TOKEN': document.querySelector('input[name="_token"]')?.value || '', 'Accept': 'application/json' },
    }).then(function(r){return r.json();}).then(function(d){
        if (d.ok) { document.getElementById('api-status-badge').innerHTML = '<span class="badge bg-secondary">Revogado</span>';
        document.getElementById('api-token-prefix').textContent = '—'; document.getElementById('api-token-expires').textContent = '—'; showToast('Token revogado', 'success'); }
    }).catch(function(){ showToast('Erro ao revogar token', 'danger'); }).finally(function(){ _pendingGenerateId = null; });
});

function showToast(m, t) {
    var e = document.getElementById('apiToast'), b = document.getElementById('apiToastBody');
    if (!e || !b) return;
    e.className = 'toast align-items-center border-0 ' + (t === 'success' ? 'bg-success text-white' : t === 'danger' ? 'bg-danger text-white' : 'bg-dark text-white');
    b.textContent = m; new bootstrap.Toast(e, {delay:4000}).show();
}
function copyApiToken() {
    var t = document.getElementById('api-token-raw'); if (!t) return;
    if (navigator.clipboard) { navigator.clipboard.writeText(t.textContent).then(function(){showToast('Token copiado!','success');}).catch(function(){fallbackCopy(t.textContent);}); }
    else { fallbackCopy(t.textContent); }
}
function fallbackCopy(t) {
    var ta = document.createElement('textarea'); ta.value = t; ta.style.position = 'fixed'; ta.style.opacity = '0'; document.body.appendChild(ta); ta.select();
    try { document.execCommand('copy'); showToast('Token copiado!','success'); } catch(e) { showToast('Copie manualmente (Ctrl+C)','warning'); }
    document.body.removeChild(ta);
}

</script>
@endpush
@endsection