@extends('agency.layouts.app')

@section('title', 'Site Yönetimi')
@section('page_title', 'Site Yönetimi')

@push('styles')
<link rel="stylesheet" href="{{ asset('assets/agency/css/site-studio.css') }}?v={{ filemtime(public_path('assets/agency/css/site-studio.css')) }}">
@endpush

@php
    $pageMeta = [
        'home' => ['Ana Sayfa', 'fa-house'],
        'contact' => ['İletişim', 'fa-envelope-open-text'],
        'tours' => ['Tur Listesi', 'fa-compass'],
        'tour_detail' => ['Tur Detayı', 'fa-map-location-dot'],
        'custom' => ['Özel Sayfa', 'fa-file-lines'],
    ];
    $sectionCount = $site->pages->sum(fn ($page) => $page->sections->count());
    // preserveKeys: bölüm tipi anahtarı (hero, tour_showcase…) önizleme adresinde gerekiyor
    $library = collect($availableSections)->groupBy(fn ($definition) => $definition['category'] ?? 'Diğer', true);
    $doneCount = collect($checklist)->where('ok', true)->count();
@endphp

@section('content')
<x-site-studio active="overview">
    <x-slot:actions>
        @if($site->isPublished())
            <button type="button" class="sx-btn sx-btn--ghost" data-sx-publish="unpublish" title="Siteyi ziyaretçilere kapat">
                <i class="fas fa-eye-slash"></i>
            </button>
        @endif
    </x-slot:actions>

    {{-- Sayaç şeridi: modülün tek bakışta özeti --}}
    <div class="sx-card">
        <div class="sx-stats">
            <div class="sx-stat">
                <span class="sx-stat__l">Sayfa</span>
                <span class="sx-stat__v">{{ $site->pages->count() }}</span>
                <span class="sx-stat__s">{{ $site->pages->where('show_in_nav', true)->count() }} tanesi menüde</span>
            </div>
            <div class="sx-stat">
                <span class="sx-stat__l">Bölüm</span>
                <span class="sx-stat__v">{{ $sectionCount }}</span>
                <span class="sx-stat__s">{{ count($availableSections) }} bölüm tipi kullanılabilir</span>
            </div>
            <a href="{{ route('agency.site.submissions.index', ['status' => 'new']) }}"
               class="sx-stat {{ $newSubmissionCount > 0 ? 'sx-stat--hot' : '' }}">
                <span class="sx-stat__l">Bekleyen Talep</span>
                <span class="sx-stat__v">{{ $newSubmissionCount }}</span>
                <span class="sx-stat__s">Form gönderimleri</span>
            </a>
            <a href="{{ route('agency.site.visitor-chats.index') }}" class="sx-stat">
                <span class="sx-stat__l">Açık Sohbet</span>
                <span class="sx-stat__v">{{ $studio['chatCount'] }}</span>
                <span class="sx-stat__s">Ziyaretçi canlı desteği</span>
            </a>
        </div>
    </div>

    @if($hasDraftChanges && $site->isPublished())
        <div class="sx-note sx-note--warn">
            <i class="fas fa-circle-exclamation"></i>
            <div>
                <b>Yayınlanmamış değişiklikleriniz var.</b>
                Taslakta yaptığınız düzenlemeleri ziyaretçilerin görmesi için yukarıdaki
                <b>Değişiklikleri Yayınla</b> düğmesine basın.
            </div>
        </div>
    @endif

    <div class="sx-grid sx-grid--73">
        {{-- ── Sol: sayfalar + bölüm kütüphanesi ── --}}
        <div class="sx-stack">
            <div class="sx-card">
                <div class="sx-card__top">
                    <span class="sx-card__t"><i class="fas fa-layer-group"></i> Sayfalar</span>
                    <a href="{{ route('agency.site.editor') }}" target="_blank" rel="noopener" class="sx-chip">
                        <i class="fas fa-wand-magic-sparkles"></i> Editörde düzenle
                    </a>
                </div>

                <div class="sx-list">
                    @foreach($site->pages as $sitePage)
                        @php
                            [$typeLabel, $typeIcon] = $pageMeta[$sitePage->type] ?? ['Sayfa', 'fa-file'];
                            $previewKey = $sitePage->type === 'custom' ? $sitePage->slug : $sitePage->type;
                        @endphp
                        <div class="sx-li">
                            <span class="sx-li__ic"><i class="fas {{ $typeIcon }}"></i></span>
                            <span class="sx-li__b">
                                <span class="sx-li__t">
                                    {{ $sitePage->title }}
                                    <span class="sx-tag">{{ $typeLabel }}</span>
                                    @unless($sitePage->is_active)
                                        <span class="sx-tag sx-tag--warn">Pasif</span>
                                    @endunless
                                </span>
                                <span class="sx-li__s">
                                    {{ $sitePage->type === 'home' ? '/' : '/' . ($sitePage->slug ?? $sitePage->type) }}
                                    · {{ $sitePage->sections->count() }} bölüm
                                    @unless($sitePage->show_in_nav) · menüde gizli @endunless
                                </span>
                            </span>
                            <span class="sx-li__a">
                                <a href="{{ route('agency.site.preview', $previewKey) }}" target="_blank" rel="noopener"
                                   class="sx-ib" title="Önizle"><i class="fas fa-eye"></i></a>
                                <a href="{{ route('agency.site.editor') }}" target="_blank" rel="noopener"
                                   class="sx-ib" title="Editörde aç"><i class="fas fa-pen"></i></a>
                            </span>
                        </div>
                    @endforeach
                </div>

                <div class="sx-card__note">
                    <i class="fas fa-circle-info"></i>
                    <span>Tur listesi ve tur detay sayfaları otomatik oluşur; içerikleri tur kayıtlarınızdan gelir.
                        Düzenlemeleriniz taslakta birikir, yayınlayana kadar ziyaretçiler eski hâli görür.</span>
                </div>
            </div>

            <div class="sx-card">
                <div class="sx-card__top">
                    <span class="sx-card__t"><i class="fas fa-shapes"></i> Bölüm Kütüphanesi</span>
                    <span class="sx-card__hint">örneğini görmek için tıklayın</span>
                </div>
                <div class="sx-card__body">
                    @foreach($library as $category => $definitions)
                        <div class="sx-sec-h" style="padding-left:0;padding-right:0">
                            <span>{{ $category }}</span>
                            <hr style="flex:1;margin:0;border:0;border-top:1px solid var(--sx-line-2);opacity:1">
                        </div>
                        <div class="d-flex flex-wrap gap-1 mb-2">
                            @foreach($definitions as $key => $definition)
                                <button type="button" class="sx-chip" data-lib="{{ $key }}"
                                        data-name="{{ $definition['name'] }}"
                                        data-icon="{{ $definition['icon'] }}"
                                        data-desc="{{ $definition['description'] ?? '' }}">
                                    <i class="fas {{ $definition['icon'] }}"></i> {{ $definition['name'] }}
                                </button>
                            @endforeach
                        </div>
                    @endforeach
                </div>
                <div class="sx-card__note">
                    <i class="fas fa-shield-halved"></i>
                    <span>Kütüphane, acentenizin ürün tipi yetkilerine göre filtrelenir; yetkisi olmayan bölümler hiç listelenmez.</span>
                </div>
            </div>
        </div>

        {{-- ── Sağ: site sağlığı + yayın geçmişi ── --}}
        <div class="sx-stack">
            <div class="sx-card">
                <div class="sx-card__top">
                    <span class="sx-card__t"><i class="fas fa-circle-check"></i> Site Sağlığı</span>
                    <span class="sx-card__hint">{{ $doneCount }}/{{ count($checklist) }}</span>
                </div>
                <div class="sx-list">
                    @foreach($checklist as $item)
                        <div class="sx-li">
                            <span class="sx-li__ic" style="{{ $item['ok'] ? 'background:var(--sx-ok-soft);color:var(--sx-ok)' : 'background:var(--sx-inset);color:var(--sx-mut-2)' }}">
                                <i class="fas {{ $item['ok'] ? 'fa-check' : 'fa-minus' }}"></i>
                            </span>
                            <span class="sx-li__b">
                                <span class="sx-li__t">{{ $item['label'] }}</span>
                                @unless($item['ok'])
                                    <span class="sx-li__s">{{ $item['hint'] }}</span>
                                @endunless
                            </span>
                            @unless($item['ok'])
                                <a href="{{ $item['url'] }}" class="sx-chip">{{ $item['cta'] }}</a>
                            @endunless
                        </div>
                    @endforeach
                </div>
            </div>

            <div class="sx-card">
                <div class="sx-card__top">
                    <span class="sx-card__t"><i class="fas fa-clock-rotate-left"></i> Yayın Geçmişi</span>
                </div>

                @if($revisions->isEmpty())
                    <div class="sx-empty">
                        <span class="sx-empty__ic"><i class="fas fa-rocket"></i></span>
                        <span class="sx-empty__t">Henüz yayın yapılmadı</span>
                        <span class="sx-empty__s">Siteniz hazır olduğunda "Yayına Al" düğmesiyle ziyaretçilere açın.
                            Her yayın, o anki içeriğin tam bir kopyasını saklar.</span>
                    </div>
                @else
                    <div class="sx-steps" style="padding-top:.6rem">
                        @foreach($revisions as $revision)
                            @php $isLiveRevision = $site->published_revision_id === $revision->id; @endphp
                            <div class="sx-step {{ $isLiveRevision ? 'done' : '' }}">
                                <span class="sx-step__rail">
                                    <span class="sx-step__dot"><i class="fas {{ $isLiveRevision ? 'fa-check' : 'fa-clock-rotate-left' }}"></i></span>
                                    <span class="sx-step__line"></span>
                                </span>
                                <span class="sx-step__b">
                                    <span class="sx-step__t">
                                        {{ $revision->change_summary ?: 'Yayın' }}
                                        @if($isLiveRevision)<span class="sx-tag sx-tag--ok">Yayında</span>@endif
                                    </span>
                                    <span class="sx-step__s">{{ $revision->created_at->format('d.m.Y H:i') }} · {{ $revision->created_at->diffForHumans() }}</span>
                                </span>
                            </div>
                        @endforeach
                    </div>
                @endif
            </div>
        </div>
    </div>

    {{-- Bölüm örneği: kütüphaneden seçilen bölüm gerçek şablonla çizilir --}}
    <div class="modal fade sxe-modal" id="sxLibModal" tabindex="-1">
        <div class="modal-dialog modal-xl modal-dialog-centered">
            <div class="modal-content sx">
                <div class="modal-header">
                    <h6 class="modal-title" id="sxLibTitle"></h6>
                    <div class="d-flex align-items-center gap-2">
                        <span class="sx-seg" id="sxLibDevice">
                            <button type="button" class="on" data-lib-device="desktop" title="Masaüstü"><i class="fas fa-desktop"></i></button>
                            <button type="button" data-lib-device="mobile" title="Mobil"><i class="fas fa-mobile-screen"></i></button>
                        </span>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                </div>
                <div class="modal-body" style="padding:0">
                    <div class="sx-libmodal">
                        <div class="sx-libmodal__preview">
                            <p class="sx-help" id="sxLibDesc" style="margin:0"></p>
                            <div style="display:flex;justify-content:center">
                                <div id="sxLibFrame" style="width:100%;background:#fff;border:1px solid var(--sx-line);border-radius:var(--sx-r-in);overflow:hidden;transition:width .25s">
                                    <iframe id="sxLibIframe" src="" title="Bölüm örneği"
                                            style="width:100%;height:60vh;border:0;display:block"></iframe>
                                </div>
                            </div>
                        </div>

                        <div class="sx-libmodal__side">
                            <div class="sx-sec-h" style="padding:0 0 .55rem">
                                <i class="fas fa-database"></i><span>Veriyi nereden çeker?</span>
                            </div>
                            <div class="sx-src" id="sxLibSource"></div>
                        </div>
                    </div>
                </div>
                <div class="sx-card__foot" style="border-top:1px solid var(--sx-line-2)">
                    <i class="fas fa-circle-info"></i>
                    <span style="flex:1">Bu bir örnek görünümdür — metin ve görseller temsilidir. Bölüm sitenize eklendiğinde
                        kendi turlarınız, destinasyonlarınız ve yazdığınız içerikle oluşur.</span>
                    <a href="{{ route('agency.site.editor') }}" target="_blank" rel="noopener" class="sx-btn">
                        <i class="fas fa-wand-magic-sparkles"></i> Editörde ekle
                    </a>
                </div>
            </div>
        </div>
    </div>
</x-site-studio>
@endsection

@push('scripts')
@include('agency.site.partials._section-sources')
<script>
(function () {
    'use strict';

    const modalElement = document.getElementById('sxLibModal');
    const modal = new bootstrap.Modal(modalElement);
    const iframe = document.getElementById('sxLibIframe');
    const frame = document.getElementById('sxLibFrame');
    const PREVIEW = '{{ url('agency/site/preview/sections') }}';

    document.querySelectorAll('[data-lib]').forEach((chip) => {
        chip.addEventListener('click', () => {
            document.getElementById('sxLibTitle').innerHTML =
                '<i class="fas ' + chip.dataset.icon + '" style="color:var(--sx-acc)"></i> ' + chip.dataset.name;
            document.getElementById('sxLibDesc').textContent = chip.dataset.desc || '';
            document.getElementById('sxLibSource').innerHTML = window.sxSourceHtml(chip.dataset.lib);
            iframe.src = PREVIEW + '/' + encodeURIComponent(chip.dataset.lib);
            modal.show();
        });
    });

    // Cihaz genişliği: bölümün dar ekranda nasıl kırıldığı da örneğin parçası
    document.querySelectorAll('[data-lib-device]').forEach((button) => {
        button.addEventListener('click', () => {
            document.querySelectorAll('[data-lib-device]').forEach((other) => other.classList.remove('on'));
            button.classList.add('on');
            frame.style.width = button.dataset.libDevice === 'mobile' ? '400px' : '100%';
        });
    });

    // Kip kapanınca iframe boşaltılır: arkada çalışan bir önizleme kalmasın
    modalElement.addEventListener('hidden.bs.modal', () => { iframe.src = 'about:blank'; });
})();
</script>
@endpush