@extends('layouts.app')

@section('title', $site->name . ' - Kırık Link Analizi')

@section('content')
<div class="px-4 sm:px-6 lg:px-8">
    <div class="flex items-center justify-between">
        <div>
            <h1 class="text-2xl font-semibold text-gray-900 flex items-center gap-2">
                <i class="fas fa-link text-rose-500"></i>
                {{ $site->name }} - Kırık Link Analizi
            </h1>
            <p class="mt-1 text-sm text-gray-600">
                Site URL: <a href="{{ $site->url }}" target="_blank" class="text-blue-600 hover:text-blue-800">{{ $site->url }}</a>
            </p>
        </div>
        <a href="{{ route('sites.show', $site) }}"
            class="inline-flex items-center gap-2 rounded-full border border-gray-200 px-3 py-1.5 text-xs font-semibold text-gray-600 hover:bg-gray-50 transition">
            <i class="fas fa-arrow-left"></i>
            Site Detayına Dön
        </a>
    </div>

    @php
        $statusMap = [
            'queued' => ['label' => 'Kuyrukta', 'class' => 'bg-amber-100 text-amber-700'],
            'processing' => ['label' => 'Analiz Ediliyor', 'class' => 'bg-blue-100 text-blue-700'],
            'completed' => ['label' => 'Tamamlandı', 'class' => 'bg-emerald-100 text-emerald-700'],
            'failed' => ['label' => 'Hata', 'class' => 'bg-rose-100 text-rose-700'],
            'paused' => ['label' => 'Duraklatıldı', 'class' => 'bg-gray-200 text-gray-700'],
            'cancelled' => ['label' => 'İptal Edildi', 'class' => 'bg-gray-200 text-gray-700'],
            'idle' => ['label' => 'Hazır', 'class' => 'bg-gray-100 text-gray-700'],
        ];
        $currentStatus = $site->broken_links_status ?? 'idle';
        $statusMeta = $statusMap[$currentStatus] ?? ['label' => 'Hazır', 'class' => 'bg-gray-100 text-gray-700'];
        $summary = is_array($site->broken_link_summary) ? $site->broken_link_summary : [];
        $brokenLinks = $summary['broken_links'] ?? [];
        $checkedPages = $summary['checked_count'] ?? $site->broken_links_checked_pages ?? 0;
        $progress = $site->broken_links_progress ?? 0;
        $brokenCount = $summary['broken_count'] ?? count($brokenLinks);
    @endphp

    @if(session('success') || session('warning') || session('error'))
        <div class="mt-4">
            @foreach (['success' => 'emerald', 'warning' => 'amber', 'error' => 'rose'] as $type => $color)
                @if (session($type))
                    <div class="rounded-xl border border-{{ $color }}-100 bg-{{ $color }}-50 px-4 py-3 text-sm text-{{ $color }}-700 flex items-center gap-2">
                        <i class="fas fa-info-circle"></i>
                        <span>{{ session($type) }}</span>
                    </div>
                @endif
            @endforeach
        </div>
    @endif

    <div id="broken-links-alert" class="mt-4 hidden">
        <div id="broken-links-alert-inner"
            class="rounded-xl px-4 py-3 text-sm flex items-center gap-2 border border-gray-200 bg-gray-50 text-gray-700">
            <i class="fas fa-info-circle"></i>
            <span></span>
        </div>
    </div>

    <div class="mt-6 grid gap-6 lg:grid-cols-3">
        <div class="lg:col-span-2 rounded-2xl border border-rose-100 bg-white shadow-sm">
            <div class="px-6 py-5">
                <div class="flex items-center justify-between">
                    <div>
                        <h2 class="text-lg font-semibold text-gray-900 flex items-center gap-2">
                            <i class="fas fa-tachometer-alt text-rose-500"></i>
                            Analiz Durumu
                        </h2>
                        <div class="mt-2 flex items-center gap-3 text-xs text-gray-500" id="broken-status-row">
                            <span id="broken-status-badge"
                                class="inline-flex items-center gap-2 rounded-full px-3 py-1 font-semibold {{ $statusMeta['class'] }}">
                                <i class="fas fa-circle"></i> <span id="broken-status-text">{{ $statusMeta['label'] }}</span>
                            </span>
                            <span>Kontrol edilen sayfa: <span id="broken-checked-count">{{ $checkedPages }}</span></span>
                            <span>Kırık link: <span id="broken-broken-count">{{ $brokenCount }}</span></span>
                        </div>
                    </div>
                    <div class="text-right">
                        <div id="broken-progress-value" class="text-3xl font-semibold text-rose-500">{{ $progress }}%</div>
                        <div class="text-xs text-gray-500" id="broken-dispatch-text">
                            @if ($site->broken_links_last_dispatched_at)
                                Kuyruğa alındı: <span
                                    id="broken-last-dispatched">{{ $site->broken_links_last_dispatched_at->format('d.m.Y H:i') }}</span>
                            @else
                                Hazır
                            @endif
                        </div>
                    </div>
                </div>

                <div class="mt-6">
                    <div class="h-3 w-full overflow-hidden rounded-full bg-rose-100">
                        <div id="broken-progress-bar" class="h-full rounded-full bg-rose-500 transition-all duration-500"
                            style="width: {{ min($progress, 100) }}%;"></div>
                    </div>
                </div>

                <div class="mt-6 flex flex-wrap items-center gap-3" id="broken-actions"
                    data-current-status="{{ $currentStatus }}">
                    <button type="button" data-broken-action data-visible-for="queued,processing"
                        data-endpoint="{{ route('sites.broken-links.pause', $site) }}" data-next-status="paused"
                        data-success-message="Kırık link analizi duraklatıldı."
                        class="broken-action-btn inline-flex items-center gap-2 rounded-full bg-gray-900 px-4 py-2 text-xs font-semibold text-white shadow transition hover:bg-gray-800 {{ in_array($currentStatus, ['queued', 'processing'], true) ? '' : 'hidden' }}">
                        <i class="fas fa-pause"></i> Duraklat
                    </button>
                    <button type="button" data-broken-action data-visible-for="queued,processing,paused"
                        data-endpoint="{{ route('sites.broken-links.cancel', $site) }}" data-next-status="cancelled"
                        data-reset-progress="true" data-clear-error="true"
                        data-confirm="Analizi iptal etmek istediğinize emin misiniz?"
                        data-success-message="Kırık link analizi iptal edildi."
                        class="broken-action-btn inline-flex items-center gap-2 rounded-full bg-rose-600 px-4 py-2 text-xs font-semibold text-white shadow transition hover:bg-rose-500 {{ in_array($currentStatus, ['queued', 'processing', 'paused'], true) ? '' : 'hidden' }}">
                        <i class="fas fa-times"></i> İptal Et
                    </button>
                    <button type="button" data-broken-action data-visible-for="paused"
                        data-endpoint="{{ route('sites.broken-links.resume', $site) }}" data-next-status="queued"
                        data-reset-progress="true" data-clear-error="true"
                        data-success-message="Kırık link analizi devam ettiriliyor."
                        class="broken-action-btn inline-flex items-center gap-2 rounded-full bg-emerald-600 px-4 py-2 text-xs font-semibold text-white shadow transition hover:bg-emerald-500 {{ $currentStatus === 'paused' ? '' : 'hidden' }}">
                        <i class="fas fa-play"></i> Devam Et
                    </button>
                    <button type="button" data-broken-action data-visible-for="idle,cancelled,failed,completed"
                        data-endpoint="{{ route('sites.check-broken-links', $site) }}" data-next-status="queued"
                        data-reset-progress="true" data-clear-error="true"
                        data-success-message="Kırık link analizi kuyruğa alındı."
                        class="broken-action-btn inline-flex items-center gap-2 rounded-full bg-rose-600 px-4 py-2 text-xs font-semibold text-white shadow transition hover:bg-rose-500 {{ in_array($currentStatus, ['idle', 'cancelled', 'failed', 'completed'], true) ? '' : 'hidden' }}">
                        <i class="fas fa-redo"></i> Analizi Yeniden Başlat
                    </button>
                </div>
            </div>

            <div class="border-t border-rose-100 px-6 py-5">
                <h3 class="text-sm font-semibold text-gray-900 flex items-center gap-2">
                    <i class="fas fa-list text-rose-500"></i>
                    Kırık Linkler
                </h3>
                <div class="mt-3">
                    @if (empty($brokenLinks))
                        <div class="rounded-xl border border-emerald-100 bg-emerald-50 px-4 py-3 text-sm text-emerald-700 flex items-center gap-2">
                            <i class="fas fa-check-circle"></i>
                            <span>Kırık link bulunamadı.</span>
                        </div>
                    @else
                        <div class="max-h-96 overflow-y-auto space-y-3">
                            @foreach ($brokenLinks as $link)
                                <div class="rounded-lg border border-rose-100 bg-rose-50/60 px-4 py-3 text-sm text-rose-700">
                                    <div class="flex items-start justify-between gap-3">
                                        <div>
                                            <p class="font-semibold break-all">{{ $link['url'] ?? 'Bilinmeyen URL' }}</p>
                                            <div class="mt-1 text-xs text-gray-500 space-y-1">
                                                @if (!empty($link['referrer']))
                                                    <p>Kaynak: {{ $link['referrer'] }}</p>
                                                @endif
                                                @if (!empty($link['message']))
                                                    <p>Yanıt: {{ $link['message'] }}</p>
                                                @endif
                                            </div>
                                        </div>
                                        <span class="inline-flex items-center gap-1 rounded-full bg-white px-2 py-0.5 text-xs font-semibold text-rose-600 border border-rose-200">
                                            {{ $link['status'] ?? 'Hata' }}
                                        </span>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <div class="rounded-2xl border border-gray-200 bg-white shadow-sm p-6">
            <h3 class="text-sm font-semibold text-gray-900 flex items-center gap-2">
                <i class="fas fa-info-circle text-blue-500"></i>
                Sonuç Özeti
            </h3>
            <dl class="mt-4 space-y-3 text-sm text-gray-700">
                <div>
                    <dt class="font-medium text-gray-500">Analiz Durumu</dt>
                    <dd class="mt-1">
                        <span id="broken-status-summary-badge"
                            class="inline-flex items-center gap-2 rounded-full px-3 py-1 text-xs font-semibold {{ $statusMeta['class'] }}">
                            <i class="fas fa-circle"></i> <span id="broken-status-summary-text">{{ $statusMeta['label'] }}</span>
                        </span>
                    </dd>
                </div>
                <div>
                    <dt class="font-medium text-gray-500">Kuyruğa Alınma</dt>
                    <dd class="mt-1 text-gray-700">
                        <span id="broken-last-dispatched-summary">
                            {{ $site->broken_links_last_dispatched_at ? $site->broken_links_last_dispatched_at->format('d.m.Y H:i') : 'Henüz başlatılmadı' }}
                        </span>
                    </dd>
                </div>
                <div>
                    <dt class="font-medium text-gray-500">Son Sonuç</dt>
                    <dd class="mt-1 text-gray-700">
                        <span id="broken-last-result">
                            {{ $site->last_broken_link_check_at ? $site->last_broken_link_check_at->format('d.m.Y H:i') : 'Henüz tamamlanmadı' }}
                        </span>
                    </dd>
                </div>
                <div>
                    <dt class="font-medium text-gray-500">Kontrol Edilen Sayfa</dt>
                    <dd class="mt-1 text-gray-700"><span id="broken-checked-count-summary">{{ $checkedPages }}</span></dd>
                </div>
                <div>
                    <dt class="font-medium text-gray-500">Tespit Edilen Kırık Link</dt>
                    <dd class="mt-1 text-gray-700"><span id="broken-broken-count-summary">{{ $brokenCount }}</span></dd>
                </div>
                <div id="broken-last-error-wrapper" class="{{ empty($site->broken_links_last_error) ? 'hidden' : '' }}">
                    <dt class="font-medium text-rose-500">Son Hata</dt>
                    <dd class="mt-1 text-rose-600 text-sm" id="broken-last-error">
                        {{ $site->broken_links_last_error }}
                    </dd>
                </div>
            </dl>
        </div>
    </div>
</div>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const csrfToken = '{{ csrf_token() }}';
            const statusMeta = {
                queued: { label: 'Kuyrukta', classes: 'bg-amber-100 text-amber-700' },
                processing: { label: 'Analiz Ediliyor', classes: 'bg-blue-100 text-blue-700' },
                completed: { label: 'Tamamlandı', classes: 'bg-emerald-100 text-emerald-700' },
                failed: { label: 'Hata', classes: 'bg-rose-100 text-rose-700' },
                paused: { label: 'Duraklatıldı', classes: 'bg-gray-200 text-gray-700' },
                cancelled: { label: 'İptal Edildi', classes: 'bg-gray-200 text-gray-700' },
                idle: { label: 'Hazır', classes: 'bg-gray-100 text-gray-700' },
            };
            const fallbackMeta = statusMeta.idle;
            const alertBox = document.getElementById('broken-links-alert');
            const alertInner = document.getElementById('broken-links-alert-inner');
            const alertIcon = alertInner ? alertInner.querySelector('i') : null;
            const alertMessage = alertInner ? alertInner.querySelector('span:last-child') : null;
            const statusBadge = document.getElementById('broken-status-badge');
            const statusText = document.getElementById('broken-status-text');
            const statusSummaryBadge = document.getElementById('broken-status-summary-badge');
            const statusSummaryText = document.getElementById('broken-status-summary-text');
            const progressValue = document.getElementById('broken-progress-value');
            const progressBar = document.getElementById('broken-progress-bar');
            const checkedCount = document.getElementById('broken-checked-count');
            const checkedCountSummary = document.getElementById('broken-checked-count-summary');
            const brokenCountEl = document.getElementById('broken-broken-count');
            const brokenCountSummary = document.getElementById('broken-broken-count-summary');
            const dispatchText = document.getElementById('broken-dispatch-text');
            let lastDispatchedEl = document.getElementById('broken-last-dispatched');
            const lastDispatchedSummary = document.getElementById('broken-last-dispatched-summary');
            const lastResult = document.getElementById('broken-last-result');
            const lastErrorWrapper = document.getElementById('broken-last-error-wrapper');
            const lastErrorText = document.getElementById('broken-last-error');
            const actionsContainer = document.getElementById('broken-actions');
            const actionButtons = Array.from(document.querySelectorAll('[data-broken-action]'));

            const iconMap = {
                success: 'fa-check-circle',
                error: 'fa-exclamation-circle',
                warning: 'fa-exclamation-triangle',
                info: 'fa-info-circle',
            };
            const alertClassMap = {
                success: 'border-emerald-200 bg-emerald-50 text-emerald-700',
                error: 'border-rose-200 bg-rose-50 text-rose-700',
                warning: 'border-amber-200 bg-amber-50 text-amber-700',
                info: 'border-blue-200 bg-blue-50 text-blue-700',
            };

            let currentStatus = actionsContainer?.dataset.currentStatus || 'idle';

            function showAlert(type, message) {
                if (!alertBox || !alertInner || !alertMessage) {
                    return;
                }
                const colorClass = alertClassMap[type] || alertClassMap.info;
                alertInner.className = `rounded-xl px-4 py-3 text-sm flex items-center gap-2 border ${colorClass}`;
                if (alertIcon) {
                    alertIcon.className = `fas ${iconMap[type] || iconMap.info}`;
                }
                alertMessage.textContent = message;
                alertBox.classList.remove('hidden');
            }

            function hideAlert() {
                if (alertBox) {
                    alertBox.classList.add('hidden');
                }
            }

            function setButtonLoading(button, loading) {
                if (!button) {
                    return;
                }
                if (loading) {
                    button.disabled = true;
                    button.classList.add('opacity-60', 'cursor-not-allowed');
                } else {
                    button.disabled = false;
                    button.classList.remove('opacity-60', 'cursor-not-allowed');
                }
            }

            function updateStatus(status) {
                currentStatus = status || 'idle';
                if (actionsContainer) {
                    actionsContainer.dataset.currentStatus = currentStatus;
                }

                const meta = statusMeta[currentStatus] || fallbackMeta;

                if (statusBadge) {
                    statusBadge.className = `inline-flex items-center gap-2 rounded-full px-3 py-1 font-semibold ${meta.classes}`;
                }
                if (statusText) {
                    statusText.textContent = meta.label;
                }
                if (statusSummaryBadge) {
                    statusSummaryBadge.className = `inline-flex items-center gap-2 rounded-full px-3 py-1 text-xs font-semibold ${meta.classes}`;
                }
                if (statusSummaryText) {
                    statusSummaryText.textContent = meta.label;
                }

                updateActions(currentStatus);
            }

            function updateActions(status) {
                actionButtons.forEach((button) => {
                    const visibleStates = (button.dataset.visibleFor || '')
                        .split(',')
                        .map((value) => value.trim())
                        .filter(Boolean);
                    if (!visibleStates.length || visibleStates.includes(status)) {
                        button.classList.remove('hidden');
                    } else {
                        button.classList.add('hidden');
                    }
                });
            }

            function setProgress(value) {
                const safe = Math.max(0, Math.min(100, Number(value) || 0));
                if (progressBar) {
                    progressBar.style.width = `${safe}%`;
                }
                if (progressValue) {
                    progressValue.textContent = `${Math.round(safe)}%`;
                }
            }

            function updateCounts(checked, broken) {
                if (typeof checked === 'number' && !Number.isNaN(checked)) {
                    if (checkedCount) {
                        checkedCount.textContent = checked;
                    }
                    if (checkedCountSummary) {
                        checkedCountSummary.textContent = checked;
                    }
                }

                if (typeof broken === 'number' && !Number.isNaN(broken)) {
                    if (brokenCountEl) {
                        brokenCountEl.textContent = broken;
                    }
                    if (brokenCountSummary) {
                        brokenCountSummary.textContent = broken;
                    }
                }
            }

            function formatNow() {
                return new Date().toLocaleString('tr-TR');
            }

            function setDispatch(status, timestamp = null) {
                if (!dispatchText) {
                    return;
                }

                if (status === 'queued' && timestamp) {
                    dispatchText.innerHTML = `Kuyruğa alındı: <span id="broken-last-dispatched">${timestamp}</span>`;
                    lastDispatchedEl = document.getElementById('broken-last-dispatched');
                    if (lastDispatchedSummary) {
                        lastDispatchedSummary.textContent = timestamp;
                    }
                } else if (status === 'cancelled') {
                    dispatchText.textContent = 'İptal edildi';
                    if (lastDispatchedSummary) {
                        lastDispatchedSummary.textContent = 'İptal edildi';
                    }
                } else if (status === 'paused') {
                    dispatchText.textContent = 'Duraklatıldı';
                    if (lastDispatchedSummary) {
                        lastDispatchedSummary.textContent = 'Duraklatıldı';
                    }
                } else if (status === 'idle') {
                    dispatchText.textContent = 'Hazır';
                    if (lastDispatchedSummary) {
                        lastDispatchedSummary.textContent = 'Henüz başlatılmadı';
                    }
                }
            }

            function clearLastError() {
                if (lastErrorText) {
                    lastErrorText.textContent = '';
                }
                if (lastErrorWrapper) {
                    lastErrorWrapper.classList.add('hidden');
                }
            }

            function setLastError(message) {
                if (!lastErrorWrapper || !lastErrorText) {
                    return;
                }
                lastErrorText.textContent = message;
                if (message) {
                    lastErrorWrapper.classList.remove('hidden');
                } else {
                    lastErrorWrapper.classList.add('hidden');
                }
            }

            actionButtons.forEach((button) => {
                button.addEventListener('click', async () => {
                    const endpoint = button.dataset.endpoint;
                    if (!endpoint) {
                        return;
                    }

                    const confirmMessage = button.dataset.confirm;
                    if (confirmMessage && !window.confirm(confirmMessage)) {
                        return;
                    }

                    hideAlert();
                    setButtonLoading(button, true);

                    try {
                        const response = await fetch(endpoint, {
                            method: button.dataset.method || 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'Accept': 'application/json',
                                'X-Requested-With': 'XMLHttpRequest',
                                'X-CSRF-TOKEN': csrfToken,
                            },
                            credentials: 'same-origin',
                            body: JSON.stringify({}),
                        });

                        const data = await response.json().catch(() => ({}));

                        if (!response.ok) {
                            const message = data.message || 'İşlem sırasında bir hata oluştu.';
                            showAlert('error', message);
                            if (data.error) {
                                setLastError(data.error);
                            }
                            return;
                        }

                        const message = data.message || button.dataset.successMessage || 'İşlem başarıyla tamamlandı.';
                        showAlert('success', message);

                        let nextStatus = button.dataset.nextStatus || '';
                        const responseStatus = (data.status || '').toString();
                        const knownStatuses = ['queued', 'processing', 'completed', 'failed', 'paused', 'cancelled', 'idle'];
                        if (!nextStatus && knownStatuses.includes(responseStatus)) {
                            nextStatus = responseStatus;
                        }

                        if (nextStatus) {
                            updateStatus(nextStatus);

                            if (button.dataset.resetProgress === 'true' || button.dataset.resetProgress === '1') {
                                setProgress(0);
                                updateCounts(0, 0);
                            }

                            if (nextStatus === 'queued') {
                                const now = formatNow();
                                setDispatch('queued', now);
                                updateCounts(0, 0);
                                if (lastResult) {
                                    lastResult.textContent = 'Henüz tamamlanmadı';
                                }
                            } else if (nextStatus === 'cancelled') {
                                setDispatch('cancelled');
                                setProgress(0);
                                updateCounts(0, 0);
                                if (lastResult) {
                                    lastResult.textContent = 'Henüz tamamlanmadı';
                                }
                            } else if (nextStatus === 'paused') {
                                setDispatch('paused');
                            }
                        }

                        if (button.dataset.clearError === 'true' || button.dataset.clearError === '1') {
                            clearLastError();
                        }

                        if (typeof data.checked_pages === 'number') {
                            updateCounts(Number(data.checked_pages), undefined);
                        }

                        if (typeof data.broken_count === 'number') {
                            updateCounts(undefined, Number(data.broken_count));
                        }
                    } catch (error) {
                        console.error('Broken link action error:', error);
                        showAlert('error', error.message || 'İşlem tamamlanamadı.');
                    } finally {
                        setButtonLoading(button, false);
                    }
                });
            });

            updateStatus(currentStatus);
        });
    </script>
@endpush