@extends('admin.layouts.app')

@section('title', __('admin.sync.show_title') . ' #' . $run->id . ' — ' . __('admin.brand.name'))
@section('page_title', __('admin.sync.show_title'))

@php
    $dash = '—';
    $fmt = function ($ts) use ($dash) {
        if (!$ts) return $dash;
        return \Illuminate\Support\Carbon::parse($ts)->format('Y-m-d H:i:s');
    };
    $rel = function ($ts) use ($dash) {
        if (!$ts) return $dash;
        return \Illuminate\Support\Carbon::parse($ts)->diffForHumans();
    };
    $stats = $run->stats ?? [];
    $errors = $run->error_messages ?? [];

    $statusColors = [
        'pending'   => '#92400e',
        'running'   => '#1e40af',
        'succeeded' => '#166534',
        'partial'   => '#9a3412',
        'failed'    => '#991b1b',
    ];
    $statusBg = [
        'pending'   => '#fef3c7',
        'running'   => '#dbeafe',
        'succeeded' => '#dcfce7',
        'partial'   => '#fed7aa',
        'failed'    => '#fee2e2',
    ];
@endphp

{{-- Alpine.js is already loaded by admin.layouts.app — loading it again
     would double-bind every directive on this page. --}}

@push('styles')
<style>
    .run-detail { display:grid; gap:16px; }

    .run-summary {
        background:#fff;
        border:1px solid var(--na-border, #e5e7eb);
        border-radius:14px;
        padding:24px;
        box-shadow:0 1px 2px rgba(15,23,42,.04);
        display:grid;
        grid-template-columns: 1fr auto;
        gap:18px;
        align-items:flex-start;
    }
    @media (max-width:720px) { .run-summary { grid-template-columns:1fr; } }
    .run-summary h2 {
        margin:0 0 8px; font-size:24px; font-weight:800; color:var(--na-text,#0f172a);
        display:flex; align-items:center; gap:12px; flex-wrap:wrap;
    }
    .run-summary h2 small {
        font-weight:600; font-size:14px; color:var(--na-muted,#64748b);
    }
    .run-summary .meta {
        font-size:13px; color:var(--na-muted,#64748b);
        display:flex; flex-wrap:wrap; gap:14px;
    }
    .run-summary .meta strong { color:var(--na-text,#0f172a); font-weight:600; }

    .status-pill-lg {
        display:inline-flex; align-items:center; gap:6px;
        padding:6px 14px; border-radius:999px;
        font-size:14px; font-weight:700;
    }

    .run-grid { display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
    @media (max-width:900px) { .run-grid { grid-template-columns:1fr; } }

    .run-card {
        background:#fff;
        border:1px solid var(--na-border, #e5e7eb);
        border-radius:14px;
        padding:18px 20px;
        box-shadow:0 1px 2px rgba(15,23,42,.04);
    }
    .run-card-head {
        display:flex; align-items:center; gap:10px;
        margin:0 0 14px;
        font-size:13px; font-weight:700;
        color:var(--na-muted,#64748b);
        text-transform:uppercase;
        letter-spacing:.04em;
    }
    .run-card-head-icon {
        width:28px; height:28px; border-radius:8px;
        background:#f1f5f9;
        display:inline-flex; align-items:center; justify-content:center;
    }

    .kv-list dt {
        font-size:12px; color:var(--na-muted,#64748b); font-weight:600;
        text-transform:uppercase; letter-spacing:.03em;
    }
    .kv-list dd {
        margin:2px 0 12px; color:var(--na-text,#0f172a);
        font-size:14px; word-break:break-word;
    }
    .kv-list dd:last-child { margin-bottom:0; }

    .stats-grid {
        display:grid;
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
        gap:10px;
    }
    .stat-tile {
        background:#f8fafc;
        border:1px solid var(--na-border,#e5e7eb);
        border-radius:10px;
        padding:14px 16px;
    }
    .stat-tile-label {
        font-size:11px; font-weight:700;
        text-transform:uppercase; letter-spacing:.04em;
        color:var(--na-muted,#64748b);
        margin:0 0 6px;
    }
    .stat-tile-value {
        font-size:22px; font-weight:700;
        color:var(--na-text,#0f172a); line-height:1.2;
        margin:0;
    }

    .errors-list {
        margin:0; padding:0;
        list-style:none;
        display:flex; flex-direction:column; gap:8px;
        max-height:480px; overflow:auto;
    }
    .errors-list li {
        background:#fef2f2;
        border:1px solid #fecaca;
        border-radius:8px;
        padding:10px 14px;
        font-family: 'SFMono-Regular', Consolas, monospace;
        font-size:12px;
        color:#7f1d1d;
        word-break:break-word;
    }
    .no-errors {
        background:#dcfce7; border:1px solid #86efac;
        color:#166534; padding:14px 16px; border-radius:10px;
        font-weight:600; font-size:14px;
        display:flex; align-items:center; gap:8px;
    }

    .raw-json {
        background:#0f172a;
        color:#e2e8f0;
        border-radius:10px;
        padding:16px;
        font-family: 'SFMono-Regular', Consolas, monospace;
        font-size:12px;
        line-height:1.6;
        white-space:pre-wrap;
        word-break:break-word;
        max-height:480px;
        overflow:auto;
        margin:0;
    }

    .live-badge {
        display:inline-flex; align-items:center; gap:6px;
        padding:6px 12px; border-radius:999px;
        background:#dbeafe; color:#1e40af;
        font-size:12px; font-weight:600;
    }
    .live-badge .dot {
        width:6px; height:6px; border-radius:50%;
        background:#3b82f6;
        animation: blink 1.2s ease-in-out infinite;
    }
    @keyframes blink { 0%,100% { opacity:1; } 50% { opacity:.3; } }
</style>
@endpush

@section('content')
    <x-admin.page-header
        :title="__('admin.sync.show_title') . ' #' . $run->id"
        :subtitle="__('admin.sync.show_subtitle')">
        <x-slot:actions>
            @if ($run->isActive())
                <form method="post" action="{{ route('admin.sync.runs.cancel', $run) }}" style="display:inline;"
                      onsubmit="return confirm('{{ __('admin.sync.cancel_confirm') }}');">
                    @csrf
                    <button type="submit" class="btn-secondary" style="background:#fee2e2; color:#b91c1c; border-color:#fca5a5;">
                        ✕ {{ __('admin.sync.cancel') }}
                    </button>
                </form>
            @endif
            <a href="{{ route('admin.sync.index') }}" class="btn-secondary">{{ __('admin.sync.back_to_list') }}</a>
        </x-slot:actions>
    </x-admin.page-header>

    <div class="run-detail"
         @if ($run->isActive())
            x-data="runWatcher({
                statusUrl: @js(route('admin.sync.runs.status', $run)),
            })"
         @endif
    >

        {{-- ────────────── Summary ────────────── --}}
        <div class="run-summary">
            <div>
                <h2>
                    {{ __('admin.sync.boards.' . $run->module) }}
                    <small>#{{ $run->id }}</small>
                    <span class="status-pill-lg"
                          style="background:{{ $statusBg[$run->status] ?? '#f1f5f9' }}; color:{{ $statusColors[$run->status] ?? '#0f172a' }};"
                          @if ($run->isActive()) x-text="labels.status[currentStatus]" @endif>
                        {{ __('admin.sync.status_labels.' . $run->status) }}
                    </span>
                    @if ($run->isActive())
                        <span class="live-badge">
                            <span class="dot"></span>
                            {{ __('admin.sync.live.auto_refresh') }}
                        </span>
                    @endif
                </h2>
                <div class="meta">
                    <span><strong>{{ __('admin.sync.fields.triggered_by') }}:</strong>
                        {{ $run->admin?->name ?: $dash }}</span>
                    <span><strong>{{ __('admin.sync.fields.queued_at') }}:</strong>
                        {{ $fmt($run->created_at) }}</span>
                    @if ($run->started_at)
                        <span><strong>{{ __('admin.sync.fields.started_at') }}:</strong>
                            {{ $fmt($run->started_at) }}</span>
                    @endif
                    @if ($run->finished_at)
                        <span><strong>{{ __('admin.sync.fields.finished_at') }}:</strong>
                            {{ $fmt($run->finished_at) }}</span>
                    @endif
                </div>
            </div>
        </div>

        {{-- ────────────── Progress bar (when total known) ────────────── --}}
        @if ($run->total_estimated)
            <div class="run-card">
                <h3 class="run-card-head">
                    <span class="run-card-head-icon" aria-hidden="true">📈</span>
                    {{ __('admin.sync.progress') }}
                </h3>
                <div style="background:#f1f5f9; border-radius:999px; height:14px; overflow:hidden; position:relative;">
                    <div style="background:linear-gradient(90deg,#3b82f6,#8b5cf6); height:100%; width:{{ $run->progressPct() ?? 0 }}%; transition:width .3s ease;"></div>
                </div>
                <div style="display:flex; justify-content:space-between; margin-top:8px; font-size:13px; color:var(--na-muted,#64748b);">
                    <span>
                        <strong>{{ number_format($run->items_processed) }}</strong> /
                        <strong>{{ number_format($run->total_estimated) }}</strong>
                        ·
                        {{ $run->pages_processed }} {{ __('admin.sync.pages') }}
                    </span>
                    <span><strong>{{ $run->progressPct() ?? 0 }}%</strong></span>
                </div>
            </div>
        @endif

        {{-- ────────────── Stats tiles ────────────── --}}
        <div class="run-card">
            <h3 class="run-card-head">
                <span class="run-card-head-icon" aria-hidden="true">📊</span>
                {{ __('admin.sync.sections.results') }}
            </h3>
            <div class="stats-grid">
                <div class="stat-tile">
                    <p class="stat-tile-label">{{ __('admin.sync.fields.processed') }}</p>
                    <p class="stat-tile-value" @if ($run->isActive()) x-text="liveStats.items_processed" @endif>{{ number_format($run->items_processed) }}</p>
                </div>
                <div class="stat-tile">
                    <p class="stat-tile-label">{{ __('admin.sync.fields.upserted') }}</p>
                    <p class="stat-tile-value" @if ($run->isActive()) x-text="liveStats.items_upserted" @endif>{{ number_format($run->items_upserted) }}</p>
                </div>
                <div class="stat-tile">
                    <p class="stat-tile-label">{{ __('admin.sync.fields.errored') }}</p>
                    <p class="stat-tile-value" style="color: {{ $run->items_errored > 0 ? '#b91c1c' : 'inherit' }};"
                       @if ($run->isActive()) x-text="liveStats.items_errored" @endif>
                        {{ number_format($run->items_errored) }}
                    </p>
                </div>
                <div class="stat-tile">
                    <p class="stat-tile-label">{{ __('admin.sync.fields.duration') }}</p>
                    <p class="stat-tile-value">
                        @if ($run->durationSeconds() !== null) {{ $run->durationSeconds() }}s @else {{ $dash }} @endif
                    </p>
                </div>
                @foreach (['geographic_focuses_inserted', 'geographic_focuses_removed', 'members_upserted', 'positions_inserted', 'positions_removed', 'sectors_inserted', 'stages_inserted', 'payment_methods_inserted', 'tags_inserted', 'files_ingested'] as $k)
                    @if (isset($stats[$k]) && $stats[$k] > 0)
                        <div class="stat-tile">
                            <p class="stat-tile-label">{{ str_replace('_', ' ', $k) }}</p>
                            <p class="stat-tile-value">{{ number_format($stats[$k]) }}</p>
                        </div>
                    @endif
                @endforeach
            </div>
        </div>

        <div class="run-grid">
            {{-- ────────────── Inputs ────────────── --}}
            <div class="run-card">
                <h3 class="run-card-head">
                    <span class="run-card-head-icon" aria-hidden="true">⚙️</span>
                    {{ __('admin.sync.sections.inputs') }}
                </h3>
                <dl class="kv-list">
                    <dt>{{ __('admin.sync.fields.module') }}</dt>
                    <dd>{{ __('admin.sync.boards.' . $run->module) }}</dd>
                    <dt>{{ __('admin.sync.fields.limit_requested') }}</dt>
                    <dd>{{ number_format($run->limit_requested) }}</dd>
                    <dt>{{ __('admin.sync.fields.skip_files') }}</dt>
                    <dd>{{ $run->skip_files ? __('admin.statuses.active') ?? 'Yes' : ($dash) }}</dd>
                    <dt>{{ __('admin.sync.fields.triggered_by') }}</dt>
                    <dd>
                        @if ($run->admin)
                            <strong>{{ $run->admin->name }}</strong>
                            <small style="display:block; color:var(--na-muted,#64748b);">{{ $run->admin->email }}</small>
                        @else {{ $dash }} @endif
                    </dd>
                </dl>
            </div>

            {{-- ────────────── Timing ────────────── --}}
            <div class="run-card">
                <h3 class="run-card-head">
                    <span class="run-card-head-icon" aria-hidden="true">🕒</span>
                    {{ __('admin.sync.sections.timing') }}
                </h3>
                <dl class="kv-list">
                    <dt>{{ __('admin.sync.fields.queued_at') }}</dt>
                    <dd>{{ $fmt($run->created_at) }} <small style="color:var(--na-muted);">({{ $rel($run->created_at) }})</small></dd>
                    <dt>{{ __('admin.sync.fields.started_at') }}</dt>
                    <dd>{{ $fmt($run->started_at) }}</dd>
                    <dt>{{ __('admin.sync.fields.finished_at') }}</dt>
                    <dd>{{ $fmt($run->finished_at) }}</dd>
                    <dt>{{ __('admin.sync.fields.duration') }}</dt>
                    <dd>
                        @if ($run->durationSeconds() !== null)
                            <strong>{{ $run->durationSeconds() }}s</strong>
                        @else {{ $dash }} @endif
                    </dd>
                </dl>
            </div>
        </div>

        {{-- ────────────── Errors ────────────── --}}
        <div class="run-card">
            <h3 class="run-card-head">
                <span class="run-card-head-icon" aria-hidden="true">⚠️</span>
                {{ __('admin.sync.sections.errors') }}
                @if (count($errors) > 0)
                    <span style="margin-inline-start:auto; background:#fee2e2; color:#991b1b; padding:2px 10px; border-radius:999px; font-size:12px;">
                        {{ count($errors) }}
                    </span>
                @endif
            </h3>
            @if ($run->exception)
                <div class="errors-list">
                    <li style="background:#fef2f2; border:2px solid #ef4444;">
                        <strong>{{ __('admin.sync.fields.exception') }}:</strong>
                        {{ $run->exception }}
                    </li>
                </div>
            @endif
            @if (count($errors) === 0 && !$run->exception)
                <div class="no-errors">
                    <span aria-hidden="true">✓</span>
                    {{ __('admin.sync.errors.no_errors') }}
                </div>
            @elseif (count($errors) > 0)
                <ol class="errors-list">
                    @foreach ($errors as $err)
                        <li>{{ $err }}</li>
                    @endforeach
                </ol>
            @endif
        </div>

        {{-- ────────────── Raw stats ────────────── --}}
        @if (! empty($stats))
            <div class="run-card">
                <h3 class="run-card-head">
                    <span class="run-card-head-icon" aria-hidden="true">📋</span>
                    {{ __('admin.sync.sections.raw') }}
                </h3>
                <pre class="raw-json">{{ json_encode($stats, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE) }}</pre>
            </div>
        @endif
    </div>

    @if ($run->isActive())
    <script>
        document.addEventListener('alpine:init', () => {
            Alpine.data('runWatcher', (config) => ({
                currentStatus: @json($run->status),
                liveStats: {
                    items_processed: {{ (int) $run->items_processed }},
                    items_upserted:  {{ (int) $run->items_upserted }},
                    items_errored:   {{ (int) $run->items_errored }},
                },
                labels: {
                    status: {
                        pending:   @json(__('admin.sync.status_labels.pending')),
                        running:   @json(__('admin.sync.status_labels.running')),
                        succeeded: @json(__('admin.sync.status_labels.succeeded')),
                        partial:   @json(__('admin.sync.status_labels.partial')),
                        failed:    @json(__('admin.sync.status_labels.failed')),
                    },
                },
                init() {
                    const tick = async () => {
                        try {
                            const r = await fetch(config.statusUrl, { headers: { Accept: 'application/json' }});
                            const d = await r.json();
                            this.currentStatus = d.status;
                            this.liveStats.items_processed = d.items_processed;
                            this.liveStats.items_upserted  = d.items_upserted;
                            this.liveStats.items_errored   = d.items_errored;
                            if (d.is_finished) {
                                clearInterval(this.timer);
                                // Reload to render the now-finished state with full stats blob
                                setTimeout(() => window.location.reload(), 800);
                            }
                        } catch (_) { /* keep polling */ }
                    };
                    tick();
                    this.timer = setInterval(tick, 3000);
                },
            }));
        });
    </script>
    @endif
@endsection