{{-- Site Yönetimi kabuğu.

     Modülün beş ekranı da aynı üst şeridi paylaşır: sitenin adresi, yayın
     durumu ve her yerden erişilebilir eylemler (önizle / editör / yayınla).
     Sekme sayaçları SiteStudioComposer'dan gelir; sayfa kendi verisini
     hesaplamak zorunda değildir.

     Kullanım:
       <x-site-studio active="overview">
           <x-slot:actions>…sayfaya özel düğmeler…</x-slot:actions>
           …içerik…
       </x-site-studio>
--}}
@props(['active' => 'overview'])

@php
    $agency = $studio['agency'];
    $site = $studio['site'];
    $isLive = $site->isPublished();
    $publicUrl = $agency->public_url ?: route('customer.agency.show', $agency->slug);

    $tabs = [
        ['key' => 'overview', 'label' => 'Genel Bakış', 'icon' => 'fa-gauge-high', 'url' => route('agency.site.index')],
        ['key' => 'branding', 'label' => 'Marka', 'icon' => 'fa-palette', 'url' => route('agency.site.branding.edit')],
        ['key' => 'domain', 'label' => 'Domain & E-posta', 'icon' => 'fa-globe', 'url' => route('agency.site.domain.index')],
        ['key' => 'submissions', 'label' => 'Talepler', 'icon' => 'fa-inbox', 'url' => route('agency.site.submissions.index'), 'n' => $studio['submissionCount'], 'hot' => true],
        ['key' => 'chats', 'label' => 'Canlı Destek', 'icon' => 'fa-headset', 'url' => route('agency.site.visitor-chats.index'), 'n' => $studio['chatCount']],
    ];
@endphp

<div class="sx sx-wrap">
    <div class="sx-head">
        <div class="sx-head__top">
            <span class="sx-head__mark">
                @if($agency->favicon_path)
                    <img src="{{ asset('storage/' . $agency->favicon_path) }}" alt="">
                @else
                    <i class="fas fa-globe"></i>
                @endif
            </span>

            <span class="sx-head__id">
                <a href="{{ $publicUrl }}" target="_blank" rel="noopener" class="sx-head__addr" title="{{ $publicUrl }}">
                    <span>{{ preg_replace('#^https?://#', '', rtrim($publicUrl, '/')) }}</span>
                    <i class="fas fa-arrow-up-right-from-square"></i>
                </a>
                <span class="sx-head__meta">
                    @if($isLive)
                        <span class="sx-state sx-state--live"><i class="sx-dot"></i> Yayında</span>
                        <span>Son yayın {{ $site->published_at?->diffForHumans() }}</span>
                    @else
                        <span class="sx-state sx-state--draft"><i class="sx-dot"></i> Taslak</span>
                        <span>Siteniz henüz ziyaretçilere kapalı</span>
                    @endif
                    <span class="sx-tag">Voyage</span>
                </span>
            </span>

            <span class="sx-head__act">
                {{ $actions ?? '' }}
                <a href="{{ route('agency.site.preview', 'home') }}" target="_blank" rel="noopener" class="sx-btn">
                    <i class="fas fa-eye"></i> Önizle
                </a>
                <a href="{{ route('agency.site.editor') }}" target="_blank" rel="noopener" class="sx-btn">
                    <i class="fas fa-wand-magic-sparkles"></i> Editör
                </a>
                @if($isLive)
                    <button type="button" class="sx-btn sx-btn--primary" data-sx-publish="publish">
                        <i class="fas fa-arrow-up-from-bracket"></i> Değişiklikleri Yayınla
                    </button>
                @else
                    <button type="button" class="sx-btn sx-btn--ok" data-sx-publish="publish">
                        <i class="fas fa-rocket"></i> Yayına Al
                    </button>
                @endif
            </span>
        </div>

        <nav class="sx-tabs">
            @foreach($tabs as $tab)
                <a href="{{ $tab['url'] }}" class="sx-tab {{ $active === $tab['key'] ? 'on' : '' }}">
                    <i class="fas {{ $tab['icon'] }}"></i>
                    {{ $tab['label'] }}
                    @if(($tab['n'] ?? 0) > 0)
                        <span class="sx-tab__n {{ ($tab['hot'] ?? false) ? 'hot' : '' }}">{{ $tab['n'] }}</span>
                    @endif
                </a>
            @endforeach
        </nav>
    </div>

    {{ $slot }}
</div>

@once
    @push('scripts')
    <script>
        /* Kabuk eylemleri: yayınla / yayından kaldır ve panoya kopyala.
           Modülün tüm ekranları aynı uçları kullanır. */
        (function () {
            'use strict';
            const CSRF = document.querySelector('meta[name="csrf-token"]')?.content || '{{ csrf_token() }}';

            window.sxApi = async function (method, url, body) {
                const options = { method, headers: { 'X-CSRF-TOKEN': CSRF, 'Accept': 'application/json' } };
                if (body instanceof FormData) {
                    options.body = body;
                } else if (body !== undefined) {
                    options.headers['Content-Type'] = 'application/json';
                    options.body = JSON.stringify(body);
                }
                const response = await fetch(url, options);
                const data = await response.json().catch(() => ({}));
                if (!response.ok || data.success === false) throw new Error(data.message || 'İşlem tamamlanamadı.');
                return data;
            };

            window.sxCopy = function (text, label) {
                navigator.clipboard.writeText(text)
                    .then(() => appToast({ icon: 'success', title: (label || 'Kopyalandı') }))
                    .catch(() => appToast({ icon: 'error', title: 'Kopyalanamadı.' }));
            };

            document.addEventListener('click', async (event) => {
                const button = event.target.closest('[data-sx-publish]');
                if (!button) return;

                const action = button.dataset.sxPublish;
                if (action === 'unpublish') {
                    const ok = await appConfirm({
                        title: 'Site yayından kaldırılsın mı?',
                        text: 'Ziyaretçiler siteye erişemez; içerikleriniz taslakta korunur.',
                        confirmButtonText: 'Yayından kaldır',
                    });
                    if (!ok) return;
                }

                const original = button.innerHTML;
                button.disabled = true;
                button.innerHTML = '<i class="fas fa-circle-notch fa-spin"></i> ' + (action === 'publish' ? 'Yayınlanıyor' : 'Kaldırılıyor');
                try {
                    const data = await sxApi('POST', '{{ url('agency/site') }}/' + action);
                    appToast({ icon: 'success', title: data.message });
                    setTimeout(() => window.location.reload(), 700);
                } catch (error) {
                    appToast({ icon: 'error', title: error.message });
                    button.disabled = false;
                    button.innerHTML = original;
                }
            });
        })();
    </script>
    @endpush
@endonce