@extends('layouts.app')
@section('title', __('ui.admin_health_title').' — Coaster World')
@section('content')
<section class="admin-hero admin-health-hero"><div class="container">
@include('admin._nav')
<div class="admin-health-hero-grid">
    <div>
        <span class="eyebrow">{{ __('ui.admin_health_kicker') }}</span>
        <h1>{{ __('ui.admin_health_title') }}</h1>
        <p>{{ __('ui.admin_health_intro') }}</p>
    </div>
    <div class="admin-health-overall is-{{ $overall['state'] }}" id="healthOverall" data-health-state-value="{{ $overall['state'] }}">
        <span>{{ __('ui.admin_health_overall') }}</span>
        <strong id="healthOverallState">{{ __('ui.admin_health_state_'.$overall['state']) }}</strong>
        <small id="healthOverallReason">
            @if($overall['reasons'] !== [])
                {{ __('ui.admin_health_overall_cause', ['items'=>implode(' · ', $overall['reasons'])]) }}
            @elseif($overall['state'] === 'healthy')
                {{ __('ui.admin_health_overall_ok') }}
            @else
                {{ __('ui.admin_health_overall_unknown') }}
            @endif
        </small>
    </div>
</div>
</div></section>

<section class="section admin-health-section"><div class="container">
<div class="admin-health-toolbar">
    <div>
        <span class="eyebrow">{{ __('ui.admin_health_sources_kicker') }}</span>
        <h2>{{ __('ui.admin_health_sources_title') }}</h2>
        <p>{{ __('ui.admin_health_sources_help') }}</p>
    </div>
    <button type="button" class="button button-primary" id="healthProbeAll">{{ __('ui.admin_health_test_all') }}</button>
</div>

<div class="admin-health-source-grid" id="healthSourceGrid">
@foreach($sources as $source)
    <article class="admin-health-source-card is-{{ $source['probe']['status'] ?? 'unknown' }}" data-health-card="{{ $source['key'] }}" data-health-label="{{ $source['label'] }}" data-health-state-value="{{ $source['probe']['status'] ?? 'unknown' }}">
        <div class="admin-health-source-head">
            <div>
                <span class="admin-health-dot"></span>
                <strong>{{ $source['label'] }}</strong>
            </div>
            <span class="admin-health-state" data-health-state>{{ __('ui.admin_health_state_'.($source['probe']['status'] ?? 'unknown')) }}</span>
        </div>
        <div class="admin-health-source-meta">
            <div><span>{{ __('ui.admin_health_references') }}</span><strong>{{ $source['references'] }}</strong></div>
            <div><span>{{ __('ui.admin_health_last_data') }}</span><strong>{{ $source['last_seen_at']?->diffForHumans() ?? '—' }}</strong></div>
            <div><span>{{ __('ui.admin_health_latency') }}</span><strong data-health-latency>{{ isset($source['probe']['latency_ms']) ? $source['probe']['latency_ms'].' ms' : '—' }}</strong></div>
            <div><span>HTTP</span><strong data-health-http>{{ $source['probe']['http_status'] ?? '—' }}</strong></div>
        </div>
        <div class="admin-health-last-check">
            <small data-health-checked>{{ isset($source['probe']['checked_at']) ? __('ui.admin_health_last_probe', ['time'=>\Carbon\CarbonImmutable::parse($source['probe']['checked_at'])->diffForHumans()]) : __('ui.admin_health_never_tested') }}</small>
            @if(!empty($source['probe']['message']))<small class="is-error" data-health-message>{{ $source['probe']['message'] }}</small>@else<small data-health-message></small>@endif
        </div>
        <div class="admin-health-source-actions">
            <button type="button" class="button button-ghost js-health-probe" data-source="{{ $source['key'] }}" data-label="{{ $source['label'] }}">{{ __('ui.admin_health_test_source') }}</button>
            @if($source['key']==='themeparks_wiki')
                <form method="post" action="{{ route('admin.catalog-sync.directory') }}">@csrf<button class="button button-ghost" type="submit">{{ __('ui.admin_health_sync_directory') }}</button></form>
            @elseif($source['key']==='openstreetmap')
                <a class="button button-ghost" href="{{ route('admin.parks.index') }}">{{ __('ui.admin_health_open_parks') }}</a>
            @elseif(in_array($source['key'], ['wikidata','coasterpedia'], true))
                <a class="button button-ghost" href="{{ route('admin.enrichment.index') }}">{{ __('ui.admin_health_open_enrichment') }}</a>
            @elseif($source['key']==='rcdb')
                <a class="button button-ghost" href="{{ route('admin.rcdb.parks') }}">{{ __('ui.admin_health_open_rcdb') }}</a>
            @endif
        </div>
    </article>
@endforeach
</div>

<div class="section-heading admin-section-heading admin-health-section-heading"><div><span class="eyebrow">{{ __('ui.admin_health_runtime_kicker') }}</span><h2>{{ __('ui.admin_health_runtime_title') }}</h2></div></div>
<div class="admin-health-runtime-grid">
    <article class="admin-health-runtime-card is-{{ $scheduler['state'] }}" data-health-runtime data-health-label="{{ __('ui.admin_health_scheduler') }}" data-health-state-value="{{ $scheduler['state'] }}">
        <div class="admin-health-runtime-icon">⏱️</div>
        <div><span>{{ __('ui.admin_health_scheduler') }}</span><strong>{{ __('ui.admin_health_state_'.$scheduler['state']) }}</strong><small>{{ $scheduler['heartbeat_at'] ? __('ui.admin_scheduler_heartbeat', ['time'=>$scheduler['heartbeat_at']->diffForHumans()]) : __('ui.admin_health_no_heartbeat') }}</small></div>
    </article>
    <article class="admin-health-runtime-card is-{{ $live['state'] }}" data-health-runtime data-health-label="{{ __('ui.admin_health_live') }}" data-health-state-value="{{ $live['state'] }}">
        <div class="admin-health-runtime-icon">🎢</div>
        <div><span>{{ __('ui.admin_health_live') }}</span><strong>{{ __('ui.admin_health_live_summary', ['fresh'=>$live['fresh'],'expected'=>$live['expected']]) }}</strong><small>{{ __('ui.admin_health_live_detail_smart', ['stale'=>$live['stale'],'outside'=>$live['not_expected'],'failures'=>$live['failures']]) }}</small></div>
    </article>
    <article class="admin-health-runtime-card is-{{ $migrations['state'] }}" data-health-runtime data-health-label="{{ __('ui.admin_health_database') }}" data-health-state-value="{{ $migrations['state'] }}">
        <div class="admin-health-runtime-icon">🗄️</div>
        <div><span>{{ __('ui.admin_health_database') }}</span><strong>{{ $migrations['pending_count'] }} {{ __('ui.admin_health_pending_migrations') }}</strong><small>{{ $migrations['pending_count'] ? __('ui.admin_health_migrate_required') : __('ui.admin_health_database_ok') }}</small></div>
    </article>
    <article class="admin-health-runtime-card is-{{ $enrichment['state'] }}" data-health-runtime data-health-label="{{ __('ui.admin_health_enrichment') }}" data-health-state-value="{{ $enrichment['state'] }}">
        <div class="admin-health-runtime-icon">🧠</div>
        <div><span>{{ __('ui.admin_health_enrichment') }}</span><strong>{{ __('ui.admin_health_state_'.$enrichment['state']) }}</strong><small>{{ __('ui.admin_health_enrichment_detail_smart', ['success'=>$enrichment['recent_success'],'errors'=>$enrichment['recent_errors'],'rate'=>$enrichment['issue_rate']]) }}</small></div>
    </article>
</div>

@if($migrations['pending_count'] > 0)
<div class="admin-health-migration-alert">
    <div><span>⚠️</span><div><strong>{{ __('ui.admin_health_migration_alert_title') }}</strong><p>{{ __('ui.admin_health_migration_alert_text') }}</p></div></div>
    <code>php artisan migrate</code>
    <div class="admin-health-pending-list">@foreach($migrations['pending'] as $migration)<small>{{ $migration }}</small>@endforeach</div>
</div>
@endif

<div class="admin-health-quick-grid">
    <a href="{{ route('admin.enrichment.index') }}"><span>🧠</span><strong>{{ __('ui.admin_health_quick_enrichment') }}</strong><small>{{ __('ui.admin_health_quick_enrichment_help') }}</small></a>
    <a href="{{ route('admin.parks.index') }}"><span>🗺️</span><strong>{{ __('ui.admin_health_quick_pois') }}</strong><small>{{ __('ui.admin_health_quick_pois_help') }}</small></a>
    <a href="{{ route('admin.rcdb.parks') }}"><span>🎯</span><strong>{{ __('ui.admin_health_quick_rcdb') }}</strong><small>{{ __('ui.admin_health_quick_rcdb_help') }}</small></a>
    <a href="{{ route('admin.coaster-analysis.index') }}"><span>🧪</span><strong>{{ __('ui.admin_health_quick_analysis') }}</strong><small>{{ __('ui.admin_health_quick_analysis_help') }}</small></a>
    <a href="{{ route('admin.diagnostics.index') }}"><span>🩺</span><strong>{{ __('ui.admin_diagnostics_title') }}</strong><small>{{ __('ui.admin_diagnostics_intro') }}</small></a>
</div>

<div class="section-heading admin-section-heading admin-health-section-heading"><div><span class="eyebrow">{{ __('ui.admin_health_errors_kicker') }}</span><h2>{{ __('ui.admin_health_errors_title') }}</h2></div></div>
@if($recentErrors === [])
    <div class="admin-health-empty"><span>✓</span><div><strong>{{ __('ui.admin_health_no_errors_title') }}</strong><p>{{ __('ui.admin_health_no_errors_text') }}</p></div></div>
@else
    <div class="admin-health-error-list">
    @foreach($recentErrors as $error)
        <article>
            <span class="admin-health-error-kind">{{ strtoupper($error['kind']) }}</span>
            <div><strong>{{ $error['title'] }}</strong><p>{{ \Illuminate\Support\Str::limit($error['message'], 260) }}</p></div>
            <time>{{ $error['at']?->diffForHumans() }}</time>
        </article>
    @endforeach
    </div>
@endif

<div class="admin-command-card admin-health-command-card">
    <span class="eyebrow">{{ __('ui.admin_health_commands_kicker') }}</span>
    <h3>{{ __('ui.admin_health_commands_title') }}</h3>
    <p>{{ __('ui.admin_health_commands_help') }}</p>
    <code>php artisan migrate:status</code>
    <code>php artisan cw:live:sync --all --active</code>
    <code>php artisan cw:map:sync-osm-pois --all --limit=20</code>
    <code>php artisan cw:catalog:auto-enrich --limit=3</code>
</div>
</div></section>

<div class="admin-health-modal" id="healthProbeModal" hidden aria-hidden="true"
    data-route-template="{{ route('admin.system-health.probe', ['source' => '__SOURCE__']) }}"
    data-csrf="{{ csrf_token() }}"
    data-status-healthy="{{ __('ui.admin_health_state_healthy') }}"
    data-status-degraded="{{ __('ui.admin_health_state_degraded') }}"
    data-status-down="{{ __('ui.admin_health_state_down') }}"
    data-status-unknown="{{ __('ui.admin_health_state_unknown') }}"
    data-text-start="{{ __('ui.admin_health_console_start') }}"
    data-text-done="{{ __('ui.admin_health_console_done') }}"
    data-text-failed="{{ __('ui.admin_health_console_failed') }}"
    data-text-summary="{{ __('ui.admin_health_console_summary') }}"
    data-text-last-probe="{{ __('ui.admin_health_last_probe_now') }}"
    data-text-server="{{ __('ui.admin_health_console_server') }}"
    data-text-slow="{{ __('ui.admin_health_console_slow') }}"
    data-text-very-slow="{{ __('ui.admin_health_console_very_slow') }}"
    data-text-overall-ok="{{ __('ui.admin_health_overall_ok') }}"
    data-text-overall-cause="{{ __('ui.admin_health_overall_cause') }}"
    data-text-overall-unknown="{{ __('ui.admin_health_overall_unknown') }}">
    <div class="admin-health-modal-backdrop" data-health-close></div>
    <div class="admin-health-modal-panel" role="dialog" aria-modal="true" aria-labelledby="healthProbeTitle">
        <div class="admin-health-modal-head">
            <div><span class="eyebrow">{{ __('ui.admin_health_console_kicker') }}</span><h2 id="healthProbeTitle">{{ __('ui.admin_health_console_title') }}</h2></div>
            <button type="button" class="admin-health-modal-close" data-health-close aria-label="{{ __('ui.admin_enrichment_console_close') }}">×</button>
        </div>
        <div class="admin-health-progress"><i id="healthProbeProgress"></i></div>
        <div class="admin-health-console" id="healthProbeConsole" aria-live="polite"></div>
        <div class="admin-health-modal-footer"><span id="healthProbeSummary">{{ __('ui.admin_health_console_ready') }}</span><button class="button button-primary" type="button" data-health-close>{{ __('ui.admin_enrichment_console_close') }}</button></div>
    </div>
</div>

<script>
(() => {
    const modal = document.getElementById('healthProbeModal');
    const consoleBox = document.getElementById('healthProbeConsole');
    const progress = document.getElementById('healthProbeProgress');
    const summary = document.getElementById('healthProbeSummary');
    const allButton = document.getElementById('healthProbeAll');
    const csrf = modal.dataset.csrf || '';
    const routeTemplate = modal.dataset.routeTemplate;
    const probeButtons = Array.from(document.querySelectorAll('.js-health-probe'));
    const labels = Object.fromEntries(probeButtons.map(button => [button.dataset.source, button.dataset.label || button.dataset.source]));
    const statusLabels = {
        healthy: modal.dataset.statusHealthy,
        degraded: modal.dataset.statusDegraded,
        down: modal.dataset.statusDown,
        unknown: modal.dataset.statusUnknown,
    };
    const text = {
        start: modal.dataset.textStart,
        done: modal.dataset.textDone,
        failed: modal.dataset.textFailed,
        summary: modal.dataset.textSummary,
        lastProbe: modal.dataset.textLastProbe,
        server: modal.dataset.textServer,
        slow: modal.dataset.textSlow,
        verySlow: modal.dataset.textVerySlow,
        overallOk: modal.dataset.textOverallOk,
        overallCause: modal.dataset.textOverallCause,
        overallUnknown: modal.dataset.textOverallUnknown,
    };
    let running = false;

    const now = () => new Date().toLocaleTimeString([], {hour:'2-digit', minute:'2-digit', second:'2-digit'});
    const formatLatency = (value) => {
        const ms = Number(value);
        if (!Number.isFinite(ms)) return '—';
        if (ms < 1000) return `${Math.round(ms)} ms`;
        return `${(ms / 1000).toLocaleString(undefined, {minimumFractionDigits:1, maximumFractionDigits:1})} s`;
    };
    const endpointLabel = (endpoint) => {
        if (!endpoint) return '—';
        try { return new URL(endpoint).host || endpoint; } catch (_) { return endpoint; }
    };
    const addLine = (message, state='info') => {
        const line = document.createElement('div');
        line.className = `admin-health-console-line is-${state}`;
        line.innerHTML = `<time>[${now()}]</time><span></span>`;
        line.querySelector('span').textContent = message;
        consoleBox.appendChild(line);
        consoleBox.scrollTop = consoleBox.scrollHeight;
    };
    const open = () => { modal.hidden = false; modal.setAttribute('aria-hidden','false'); document.body.classList.add('has-admin-health-modal'); };
    const close = () => { if (running) return; modal.hidden = true; modal.setAttribute('aria-hidden','true'); document.body.classList.remove('has-admin-health-modal'); };
    document.querySelectorAll('[data-health-close]').forEach(el => el.addEventListener('click', close));

    const recomputeOverall = () => {
        const overall = document.getElementById('healthOverall');
        const overallState = document.getElementById('healthOverallState');
        const overallReason = document.getElementById('healthOverallReason');
        if (!overall || !overallState || !overallReason) return;

        const components = [
            ...Array.from(document.querySelectorAll('[data-health-card]')),
            ...Array.from(document.querySelectorAll('[data-health-runtime]')),
        ].map(element => ({
            state: element.dataset.healthStateValue || 'unknown',
            label: element.dataset.healthLabel || '',
        }));

        const state = components.some(item => item.state === 'down')
            ? 'down'
            : (components.some(item => item.state === 'degraded')
                ? 'degraded'
                : (components.some(item => item.state === 'healthy') ? 'healthy' : 'unknown'));
        const reasons = ['down', 'degraded'].includes(state)
            ? components.filter(item => item.state === state && item.label).slice(0, 3).map(item => item.label)
            : [];

        overall.classList.remove('is-healthy','is-degraded','is-down','is-unknown');
        overall.classList.add(`is-${state}`);
        overall.dataset.healthStateValue = state;
        overallState.textContent = statusLabels[state] || state;
        overallReason.textContent = reasons.length
            ? text.overallCause.replace(':items', reasons.join(' · '))
            : (state === 'healthy' ? text.overallOk : text.overallUnknown);
    };

    const updateCard = (source, result) => {
        const card = document.querySelector(`[data-health-card="${source}"]`);
        if (!card) return;
        card.classList.remove('is-healthy','is-degraded','is-down','is-unknown');
        card.classList.add(`is-${result.status || 'unknown'}`);
        card.dataset.healthStateValue = result.status || 'unknown';
        const state = card.querySelector('[data-health-state]');
        const latency = card.querySelector('[data-health-latency]');
        const http = card.querySelector('[data-health-http]');
        const checked = card.querySelector('[data-health-checked]');
        const message = card.querySelector('[data-health-message]');
        if (state) state.textContent = statusLabels[result.status] || result.status;
        if (latency) latency.textContent = formatLatency(result.latency_ms);
        if (http) http.textContent = result.http_status ?? '—';
        if (checked) checked.textContent = text.lastProbe;
        if (message) { message.textContent = result.message || ''; message.classList.toggle('is-error', !!result.message); }
        recomputeOverall();
    };

    const probe = async (source) => {
        const label = labels[source] || source;
        addLine(`${text.start} ${label}…`);
        try {
            const response = await fetch(routeTemplate.replace('__SOURCE__', encodeURIComponent(source)), {
                method:'POST', headers:{'X-CSRF-TOKEN':csrf,'Accept':'application/json','X-Requested-With':'XMLHttpRequest'}
            });
            const payload = await response.json().catch(() => ({}));
            if (!response.ok || !payload.result) throw new Error(payload.message || `HTTP ${response.status}`);
            const result = payload.result;
            updateCard(source, result);
            const latencyText = formatLatency(result.latency_ms);
            const latencyNote = result.latency_level === 'critical'
                ? text.verySlow
                : (result.latency_level === 'degraded' ? text.slow : '');
            const lineState = result.status === 'healthy'
                ? 'success'
                : (result.status === 'down' || result.latency_level === 'critical' ? 'error' : 'warning');
            const detail = [`HTTP ${result.http_status ?? '—'}`, latencyText];
            if (latencyNote) detail.push(latencyNote);
            if (result.message) detail.push(result.message);
            addLine(`${label} — ${statusLabels[result.status] || result.status} · ${detail.join(' · ')}`, lineState);
            if (result.endpoint) addLine(`${text.server} : ${endpointLabel(result.endpoint)}`);
            return result.status;
        } catch (error) {
            addLine(`${label} — ${text.failed}: ${error?.message || error}`, 'error');
            return 'down';
        }
    };

    const run = async (sources) => {
        if (running) return;
        running = true; open(); consoleBox.innerHTML = ''; progress.style.width = '0%'; summary.textContent = '';
        let healthy = 0, degraded = 0, down = 0;
        for (let i=0;i<sources.length;i++) {
            const state = await probe(sources[i]);
            if (state === 'healthy') healthy++; else if (state === 'degraded') degraded++; else down++;
            progress.style.width = `${Math.round(((i+1)/sources.length)*100)}%`;
        }
        running = false;
        summary.textContent = text.summary.replace(':healthy', healthy).replace(':degraded', degraded).replace(':down', down);
        addLine(text.done, down ? 'warning' : 'success');
    };

    allButton?.addEventListener('click', () => run(Object.keys(labels)));
    document.querySelectorAll('.js-health-probe').forEach(button => button.addEventListener('click', () => run([button.dataset.source])));
})();
</script>
@endsection