@extends('agency.layouts.app')

@section('title', 'Domain & E-posta')
@section('page_title', 'Domain & E-posta')

@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
    $status = $agency->domain_status;
    $isFailed = $status === 'failed';
    $reached = ['pending' => 0, 'dns_verified' => 1, 'provisioned' => 2, 'ssl_active' => 3][$status] ?? 0;

    $steps = [
        ['Domain eklendi', 'Doğrulama kodunuz üretildi.'],
        ['DNS doğrulandı', 'TXT ve A kayıtlarınız sunucumuza işaret ediyor.'],
        ['Sunucuya bağlandı', 'Domain siteye yönlendirildi; e-posta kutusu açılabilir.'],
        ['SSL kuruldu', 'Siteniz https ile güvenli yayında.'],
    ];

    $isPrimaryCustom = $agency->custom_domain && $status === 'ssl_active';
@endphp

@section('content')
<x-site-studio active="domain">
    <div class="sx-grid sx-grid--64">
        {{-- ── Sol: adresler ve bağlantı ── --}}
        <div class="sx-stack">
            <div class="sx-card">
                <div class="sx-card__top">
                    <span class="sx-card__t"><i class="fas fa-link"></i> Site Adresleri</span>
                    <span class="sx-card__hint">hepsi aynı anda çalışır</span>
                </div>

                <div class="sx-list">
                    {{-- Platform adresi --}}
                    <div class="sx-li" style="align-items:flex-start">
                        <span class="sx-li__ic"><i class="fas fa-cloud"></i></span>
                        <span class="sx-li__b">
                            <span class="sx-li__t">
                                Platform adresi
                                @unless($isPrimaryCustom)<span class="sx-tag sx-tag--acc">Birincil</span>@endunless
                            </span>
                            <span class="sx-li__s" style="white-space:normal">
                                Ücretsiz, her zaman açık. Kendi domaininiz olmasa da siteniz bu adresten yayınlanır.
                            </span>
                            <form id="sxSubdomainForm" class="d-flex gap-1 mt-2" style="max-width:420px">
                                <div class="sx-affix" style="flex:1">
                                    <input type="text" name="subdomain" value="{{ $agency->subdomain }}"
                                           placeholder="acenteniz" pattern="[a-z0-9-]+" autocomplete="off">
                                    <span class="sx-affix__tag">.{{ $platformDomain ?: 'platform.com' }}</span>
                                </div>
                                <button type="submit" class="sx-btn"><i class="fas fa-floppy-disk"></i> Kaydet</button>
                            </form>
                        </span>
                    </div>

                    {{-- Özel domain --}}
                    <div class="sx-li" style="align-items:flex-start">
                        <span class="sx-li__ic" style="{{ $isPrimaryCustom ? 'background:var(--sx-ok-soft);color:var(--sx-ok)' : '' }}">
                            <i class="fas {{ $isPrimaryCustom ? 'fa-lock' : 'fa-crown' }}"></i>
                        </span>
                        <span class="sx-li__b">
                            @if(! $agency->custom_domain)
                                <span class="sx-li__t">Kendi domaininiz</span>
                                <span class="sx-li__s" style="white-space:normal">
                                    Satın aldığınız domaini bağlayın; siteniz kendi adınızla, SSL sertifikalı yayınlansın
                                    ve aynı domainde e-posta hesapları açın.
                                </span>
                                <form id="sxDomainForm" class="d-flex gap-1 mt-2" style="max-width:420px">
                                    <input type="text" name="domain" class="sx-input" placeholder="ornekacente.com" required autocomplete="off">
                                    <button type="submit" class="sx-btn"><i class="fas fa-plus"></i> Bağla</button>
                                </form>
                            @else
                                <span class="sx-li__t">
                                    {{ $agency->custom_domain }}
                                    @if($isPrimaryCustom)
                                        <span class="sx-tag sx-tag--ok">Birincil · SSL</span>
                                    @elseif($isFailed)
                                        <span class="sx-tag sx-tag--warn">Doğrulanamadı</span>
                                    @else
                                        <span class="sx-tag sx-tag--warn">Kurulum sürüyor</span>
                                    @endif
                                </span>
                                <span class="sx-li__s" style="white-space:normal">
                                    @if($isPrimaryCustom)
                                        Siteniz <a href="https://{{ $agency->custom_domain }}" target="_blank" rel="noopener">https://{{ $agency->custom_domain }}</a>
                                        adresinden yayında. Platform adresi de çalışmaya devam eder.
                                    @else
                                        Aşağıdaki adımlar tamamlanınca siteniz bu adresten yayınlanacak.
                                    @endif
                                </span>
                            @endif
                        </span>
                        @if($agency->custom_domain)
                            <button type="button" class="sx-ib danger" id="sxRemoveDomain" title="Domaini kaldır">
                                <i class="fas fa-trash"></i>
                            </button>
                        @endif
                    </div>
                </div>
            </div>

            @if($agency->custom_domain)
                <div class="sx-card">
                    <div class="sx-card__top">
                        <span class="sx-card__t"><i class="fas fa-diagram-project"></i> Bağlantı Durumu</span>
                        @if($agency->domain_last_checked_at)
                            <span class="sx-card__hint">son kontrol {{ $agency->domain_last_checked_at->diffForHumans() }}</span>
                        @endif
                    </div>

                    <div class="sx-steps" style="padding-top:.7rem">
                        @foreach($steps as $index => [$stepTitle, $stepText])
                            @php
                                $state = '';
                                if ($index <= $reached && ! ($isFailed && $index > 0)) {
                                    $state = 'done';
                                } elseif ($isFailed && $index === 1) {
                                    $state = 'err';
                                } elseif (! $isFailed && $index === $reached + 1) {
                                    $state = 'now';
                                }
                            @endphp
                            <div class="sx-step {{ $state }}">
                                <span class="sx-step__rail">
                                    <span class="sx-step__dot">
                                        <i class="fas {{ $state === 'done' ? 'fa-check' : ($state === 'err' ? 'fa-xmark' : 'fa-ellipsis') }}"></i>
                                    </span>
                                    <span class="sx-step__line"></span>
                                </span>
                                <span class="sx-step__b">
                                    <span class="sx-step__t">{{ $stepTitle }}</span>
                                    <span class="sx-step__s">{{ $stepText }}</span>
                                </span>
                            </div>
                        @endforeach
                    </div>

                    @if($agency->domain_status_message)
                        <div class="sx-card__body" style="padding-top:0">
                            <div class="sx-note {{ $isFailed ? 'sx-note--err' : 'sx-note--warn' }}">
                                <i class="fas fa-triangle-exclamation"></i>
                                <div>{{ $agency->domain_status_message }}</div>
                            </div>
                        </div>
                    @endif

                    @if(in_array($status, ['pending', 'failed'], true))
                        <div class="sx-sec-h"><i class="fas fa-list-check"></i><span>Domain sağlayıcınızda eklenecek kayıtlar</span></div>
                        <div class="sx-card__body" style="padding-top:0">
                            <div class="sx-list" style="border:1px solid var(--sx-line);border-radius:var(--sx-r-in);overflow:hidden">
                                <div class="sx-li" style="min-height:auto;background:var(--sx-inset)">
                                    <span class="sx-li__b">
                                        <span class="sx-li__t" style="font-size:.7rem">
                                            <span class="sx-tag">TXT</span> {{ $verifyPrefix }}
                                        </span>
                                        <span class="sx-code">{{ $agency->domain_verification_token }}</span>
                                    </span>
                                    <button type="button" class="sx-ib" title="Kopyala"
                                            onclick="sxCopy(@js($agency->domain_verification_token), 'Doğrulama kodu kopyalandı')">
                                        <i class="fas fa-copy"></i>
                                    </button>
                                </div>
                                <div class="sx-li" style="min-height:auto">
                                    <span class="sx-li__b">
                                        <span class="sx-li__t" style="font-size:.7rem">
                                            <span class="sx-tag">A</span> @ ve www
                                        </span>
                                        <span class="sx-code">{{ $serverIp ?: 'SUNUCU IP ADRESİ TANIMLI DEĞİL' }}</span>
                                    </span>
                                    @if($serverIp)
                                        <button type="button" class="sx-ib" title="Kopyala"
                                                onclick="sxCopy(@js($serverIp), 'IP adresi kopyalandı')">
                                            <i class="fas fa-copy"></i>
                                        </button>
                                    @endif
                                </div>
                            </div>

                            <div class="sx-note mt-2">
                                <i class="fas fa-envelope"></i>
                                <div>
                                    Aynı domainde <b>e-posta</b> da kullanacaksanız MX kaydınızı sunucumuza yönlendirin.
                                    En kolayı: domain sağlayıcınızda <b>nameserver</b>'ları sunucumuza çevirmek —
                                    MX, SPF ve DKIM kayıtları otomatik kurulur.
                                </div>
                            </div>

                            <div class="d-flex align-items-center gap-2 mt-3">
                                <button type="button" class="sx-btn sx-btn--primary" id="sxVerifyNow">
                                    <i class="fas fa-rotate"></i> Kayıtları şimdi doğrula
                                </button>
                                <span class="sx-help">DNS değişiklikleri yayılana kadar 5 dakika ile birkaç saat sürebilir; sistem arka planda da dener.</span>
                            </div>
                        </div>
                    @endif
                </div>
            @endif
        </div>

        {{-- ── Sağ: e-posta hesapları ── --}}
        <div class="sx-stack">
            <div class="sx-card">
                <div class="sx-card__top">
                    <span class="sx-card__t"><i class="fas fa-at"></i> E-posta Hesapları</span>
                    @if($agency->custom_domain && $agency->domain_provisioned_at)
                        <button type="button" class="sx-chip" id="sxNewMailboxBtn"><i class="fas fa-plus"></i> Yeni</button>
                    @endif
                </div>

                @if(! $agency->custom_domain || ! $agency->domain_provisioned_at)
                    <div class="sx-empty">
                        <span class="sx-empty__ic"><i class="fas fa-lock"></i></span>
                        <span class="sx-empty__t">Önce domaininizi bağlayın</span>
                        <span class="sx-empty__s">
                            Domaininiz sunucuya bağlandığında <b>info@domaininiz.com</b> gibi hesaplar açabilirsiniz.
                            Kutular bizim sunucumuzda barındırılır ve mail modülünüze otomatik tanımlanır.
                        </span>
                    </div>
                @else
                    <div id="sxMailboxFormWrap" hidden>
                        <div class="sx-card__body" style="background:var(--sx-inset);border-bottom:1px solid var(--sx-line-2)">
                            <form id="sxMailboxForm" class="d-flex flex-column gap-2">
                                <div class="sx-field">
                                    <span>Adres</span>
                                    <div class="sx-affix">
                                        <input type="text" name="local_part" placeholder="info" required autocomplete="off">
                                        <span class="sx-affix__tag">{{ '@' . $agency->custom_domain }}</span>
                                    </div>
                                </div>
                                <div class="d-flex gap-2">
                                    <div class="sx-field" style="flex:1">
                                        <span>Parola</span>
                                        <input type="text" name="password" class="sx-input sx-input--mono" required minlength="10" autocomplete="new-password">
                                    </div>
                                    <div class="sx-field" style="width:110px;flex:none">
                                        <span>Kota</span>
                                        <select name="quota_mb" class="sx-select">
                                            <option value="1024">1 GB</option>
                                            <option value="2048">2 GB</option>
                                            <option value="5120">5 GB</option>
                                            <option value="10240">10 GB</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="d-flex align-items-center gap-2">
                                    <button type="submit" class="sx-btn"><i class="fas fa-plus"></i> Hesabı oluştur</button>
                                    <button type="button" class="sx-btn sx-btn--ghost" id="sxCancelMailbox">Vazgeç</button>
                                    <span class="sx-help" style="flex:1">En az 10 karakter. Parolayı kaydedin; sonradan görüntülenemez.</span>
                                </div>
                            </form>
                        </div>
                    </div>

                    @forelse($mailboxes as $mailbox)
                        @php $localPart = explode('@', $mailbox['email'])[0]; @endphp
                        <div class="sx-list">
                            <div class="sx-li" data-mailbox="{{ $localPart }}">
                                <span class="sx-li__ic" style="background:var(--sx-inset);color:var(--sx-ink-2);font-weight:800">
                                    {{ mb_strtoupper(mb_substr($localPart, 0, 1)) }}
                                </span>
                                <span class="sx-li__b">
                                    <span class="sx-li__t">{{ $mailbox['email'] }}</span>
                                    <span class="sx-li__s">
                                        {{ $mailbox['disk_used'] ?? '—' }} / {{ $mailbox['disk_limit'] ?? '—' }}
                                        @if($mailAccounts->has($mailbox['email']))
                                            · <span style="color:var(--sx-ok)"><i class="fas fa-plug"></i> mail modülüne bağlı</span>
                                        @endif
                                    </span>
                                </span>
                                <span class="sx-li__a">
                                    @if($webmailUrl)
                                        <a href="{{ $webmailUrl }}" target="_blank" rel="noopener" class="sx-ib" title="Webmail">
                                            <i class="fas fa-arrow-up-right-from-square"></i>
                                        </a>
                                    @endif
                                    <button type="button" class="sx-ib" data-pwd="{{ $localPart }}" title="Parolayı değiştir">
                                        <i class="fas fa-key"></i>
                                    </button>
                                    <button type="button" class="sx-ib danger" data-del="{{ $localPart }}" title="Hesabı sil">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </span>
                            </div>
                            <div class="sx-li" data-pwd-row="{{ $localPart }}" hidden style="background:var(--sx-inset)">
                                <span class="sx-li__b">
                                    <form class="d-flex gap-1" data-pwd-form="{{ $localPart }}">
                                        <input type="text" name="password" class="sx-input sx-input--mono" placeholder="Yeni parola (min 10)" minlength="10" required>
                                        <button type="submit" class="sx-btn sx-btn--primary sx-btn--sm">Değiştir</button>
                                        <button type="button" class="sx-btn sx-btn--sm" data-pwd-cancel="{{ $localPart }}">Vazgeç</button>
                                    </form>
                                </span>
                            </div>
                        </div>
                    @empty
                        <div class="sx-empty">
                            <span class="sx-empty__ic"><i class="fas fa-envelope"></i></span>
                            <span class="sx-empty__t">Henüz e-posta hesabı yok</span>
                            <span class="sx-empty__s">"Yeni" ile ilk hesabınızı oluşturun; mail modülünde otomatik görünür.</span>
                        </div>
                    @endforelse
                @endif
            </div>

            <div class="sx-card">
                <div class="sx-card__top">
                    <span class="sx-card__t"><i class="fas fa-circle-question"></i> Nasıl Çalışır?</span>
                </div>
                <div class="sx-steps" style="padding-top:.7rem">
                    @foreach([
                        ['Domaini ekleyin', 'Size özel bir doğrulama kodu üretilir.'],
                        ['DNS kayıtlarını yapın', 'TXT + A kaydı (veya nameserver değişikliği).'],
                        ['Sistem devralır', 'Kayıtlar doğrulanır, domain sunucuya bağlanır, SSL kurulur.'],
                        ['Yayına geçin', 'Siteniz kendi adresinizde; aynı domainde e-posta açabilirsiniz.'],
                    ] as $index => [$howTitle, $howText])
                        <div class="sx-step">
                            <span class="sx-step__rail">
                                <span class="sx-step__dot" style="font-weight:800">{{ $index + 1 }}</span>
                                <span class="sx-step__line"></span>
                            </span>
                            <span class="sx-step__b">
                                <span class="sx-step__t" style="color:var(--sx-ink)">{{ $howTitle }}</span>
                                <span class="sx-step__s">{{ $howText }}</span>
                            </span>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</x-site-studio>
@endsection

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

    const reload = () => setTimeout(() => window.location.reload(), 750);
    const fail = (error) => appToast({ icon: 'error', title: error.message });

    /* ── Adresler ── */
    document.getElementById('sxSubdomainForm')?.addEventListener('submit', async (event) => {
        event.preventDefault();
        try {
            const data = await sxApi('POST', '{{ route('agency.site.domain.subdomain') }}', { subdomain: event.target.subdomain.value });
            appToast({ icon: 'success', title: data.message });
            reload();
        } catch (error) { fail(error); }
    });

    document.getElementById('sxDomainForm')?.addEventListener('submit', async (event) => {
        event.preventDefault();
        try {
            const data = await sxApi('POST', '{{ route('agency.site.domain.store') }}', { domain: event.target.domain.value });
            appToast({ icon: 'success', title: data.message });
            reload();
        } catch (error) { fail(error); }
    });

    document.getElementById('sxRemoveDomain')?.addEventListener('click', async () => {
        const ok = await appConfirm({
            title: 'Domain kaldırılsın mı?',
            text: 'Siteniz platform adresinden yayınlanmaya devam eder; bu domaindeki e-posta kutuları da silinir.',
            confirmButtonText: 'Kaldır',
        });
        if (!ok) return;
        try {
            const data = await sxApi('DELETE', '{{ route('agency.site.domain.remove') }}');
            appToast({ icon: 'success', title: data.message });
            reload();
        } catch (error) { fail(error); }
    });

    document.getElementById('sxVerifyNow')?.addEventListener('click', async (event) => {
        const button = event.currentTarget;
        const original = button.innerHTML;
        button.disabled = true;
        button.innerHTML = '<i class="fas fa-circle-notch fa-spin"></i> Kontrol ediliyor';
        try {
            const data = await sxApi('POST', '{{ route('agency.site.domain.verify') }}');
            appToast({ icon: data.verified ? 'success' : 'info', title: data.message });
            if (data.verified) { reload(); return; }
        } catch (error) { fail(error); }
        button.disabled = false;
        button.innerHTML = original;
    });

    /* ── E-posta hesapları ── */
    const formWrap = document.getElementById('sxMailboxFormWrap');
    document.getElementById('sxNewMailboxBtn')?.addEventListener('click', () => {
        formWrap.hidden = !formWrap.hidden;
        if (!formWrap.hidden) formWrap.querySelector('input[name="local_part"]').focus();
    });
    document.getElementById('sxCancelMailbox')?.addEventListener('click', () => { formWrap.hidden = true; });

    document.getElementById('sxMailboxForm')?.addEventListener('submit', async (event) => {
        event.preventDefault();
        try {
            const data = await sxApi('POST', '{{ route('agency.site.domain.mailboxes.store') }}', {
                local_part: event.target.local_part.value,
                password: event.target.password.value,
                quota_mb: parseInt(event.target.quota_mb.value, 10),
            });
            appToast({ icon: 'success', title: data.message });
            reload();
        } catch (error) { fail(error); }
    });

    /* Parola değişimi satırın altında açılır — ayrı diyalog yok. */
    document.querySelectorAll('[data-pwd]').forEach((button) => {
        button.addEventListener('click', () => {
            const row = document.querySelector('[data-pwd-row="' + button.dataset.pwd + '"]');
            row.hidden = !row.hidden;
            if (!row.hidden) row.querySelector('input').focus();
        });
    });
    document.querySelectorAll('[data-pwd-cancel]').forEach((button) => {
        button.addEventListener('click', () => {
            document.querySelector('[data-pwd-row="' + button.dataset.pwdCancel + '"]').hidden = true;
        });
    });
    document.querySelectorAll('[data-pwd-form]').forEach((form) => {
        form.addEventListener('submit', async (event) => {
            event.preventDefault();
            const localPart = form.dataset.pwdForm;
            const ok = await appConfirm({
                title: localPart + ' parolası değiştirilsin mi?',
                text: 'Bu hesabı kullanan cihazlarda yeni parolayı tanımlamanız gerekir.',
                confirmButtonText: 'Değiştir',
            });
            if (!ok) return;
            try {
                const data = await sxApi('PUT', '{{ route('agency.site.domain.mailboxes.password') }}', {
                    local_part: localPart,
                    password: form.password.value,
                });
                appToast({ icon: 'success', title: data.message });
                form.reset();
                document.querySelector('[data-pwd-row="' + localPart + '"]').hidden = true;
            } catch (error) { fail(error); }
        });
    });

    document.querySelectorAll('[data-del]').forEach((button) => {
        button.addEventListener('click', async () => {
            const localPart = button.dataset.del;
            const ok = await appConfirm({
                title: localPart + ' hesabı silinsin mi?',
                text: 'Sunucudaki kutu ve içindeki e-postalar silinir; mail modülündeki geçmiş kayıtlar korunur.',
                confirmButtonText: 'Sil',
            });
            if (!ok) return;
            try {
                const data = await sxApi('DELETE', '{{ route('agency.site.domain.mailboxes.destroy') }}', { local_part: localPart });
                appToast({ icon: 'success', title: data.message });
                reload();
            } catch (error) { fail(error); }
        });
    });
})();
</script>
@endpush