@extends('admin.layouts.app')

@section('title', __('admin.sync.title') . ' — ' . __('admin.brand.name'))
@section('page_title', __('admin.sync.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();
    };
    /** Status → tailwind-ish color tuple. */
    $statusColor = [
        'pending'   => ['bg' => '#fef3c7', 'fg' => '#92400e', 'border' => '#fde68a'],
        'running'   => ['bg' => '#dbeafe', 'fg' => '#1e40af', 'border' => '#93c5fd'],
        'succeeded' => ['bg' => '#dcfce7', 'fg' => '#166534', 'border' => '#86efac'],
        'partial'   => ['bg' => '#fed7aa', 'fg' => '#9a3412', 'border' => '#fdba74'],
        'failed'    => ['bg' => '#fee2e2', 'fg' => '#991b1b', 'border' => '#fca5a5'],
    ];
@endphp

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

@push('styles')
<style>
    .sync-shell { display:grid; gap:18px; }

    /* ── Stats overview ───────────────────────────────────────── */
    .sync-grid { display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
    @media (max-width: 880px) { .sync-grid { grid-template-columns: 1fr; } }

    .sync-card {
        background:#fff;
        border:1px solid var(--na-border, #e5e7eb);
        border-radius:14px;
        padding:22px 22px;
        box-shadow:0 1px 2px rgba(15,23,42,.04);
        display:flex; flex-direction:column;
        gap:16px;
    }
    .sync-card-head { display:flex; align-items:center; gap:12px; }
    .sync-card-icon {
        width:44px; height:44px; border-radius:12px;
        display:inline-flex; align-items:center; justify-content:center;
        background:linear-gradient(135deg,#6366f1 0%,#a855f7 100%);
        color:#fff; font-size:22px; flex-shrink:0;
    }
    .sync-card-icon--investor { background:linear-gradient(135deg,#f59e0b 0%,#ef4444 100%); }
    .sync-card-title { margin:0; font-size:18px; font-weight:700; color:var(--na-text,#0f172a); }
    .sync-card-subtitle { margin:2px 0 0; font-size:13px; color:var(--na-muted,#64748b); }

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

    .sync-meta { font-size:13px; color:var(--na-muted,#64748b); }
    .sync-meta strong { color:var(--na-text,#0f172a); }

    .sync-actions {
        display:flex; gap:10px; align-items:center; flex-wrap:wrap;
        padding-top:6px;
        border-top:1px dashed var(--na-border,#e5e7eb);
    }
    .sync-actions input[type="number"] {
        width:90px;
        padding:8px 10px;
        border:1px solid var(--na-border,#e5e7eb);
        border-radius:8px;
        font-size:14px;
    }
    .sync-actions label { font-size:13px; color:var(--na-muted,#64748b); }

    .btn-primary {
        background:#4f46e5; color:#fff;
        border:0; border-radius:8px;
        padding:10px 22px;
        font-weight:600; cursor:pointer;
        transition: background-color .15s, box-shadow .15s, transform .15s;
        display:inline-flex; align-items:center; gap:8px;
    }
    .btn-primary:hover { background:#4338ca; box-shadow:0 6px 14px -4px rgba(79,70,229,.4); transform:translateY(-1px); }
    .btn-primary:active { transform:translateY(0); }
    .btn-primary:disabled { opacity:.6; cursor:not-allowed; transform:none; }

    .sync-board-id {
        font-family: 'SFMono-Regular', Consolas, monospace;
        font-size:11px;
        background:#eef2ff;
        color:#4338ca;
        padding:2px 8px;
        border-radius:999px;
        margin-inline-start:6px;
    }

    /* ── Live banner ──────────────────────────────────────────── */
    .live-banner {
        background: linear-gradient(135deg, #dbeafe 0%, #ede9fe 100%);
        border:1px solid #93c5fd;
        border-radius:14px;
        padding:18px 22px;
        display:flex; align-items:center; gap:16px;
        box-shadow:0 4px 12px -2px rgba(59,130,246,.18);
    }
    .live-banner__icon {
        width:48px; height:48px;
        border-radius:50%;
        background:#3b82f6;
        color:#fff;
        display:inline-flex; align-items:center; justify-content:center;
        flex-shrink:0;
        position:relative;
    }
    .live-banner__icon::before {
        content:''; position:absolute; inset:-4px;
        border-radius:50%;
        border:2px solid #3b82f6;
        animation: pulse-ring 1.6s ease-out infinite;
    }
    @keyframes pulse-ring {
        0%   { transform:scale(.95); opacity:.8; }
        80%  { transform:scale(1.3); opacity:0; }
        100% { transform:scale(1.3); opacity:0; }
    }
    .live-banner__body { flex:1; min-width:0; }
    .live-banner__title {
        margin:0 0 4px;
        font-size:15px; font-weight:700; color:#1e3a8a;
    }
    .live-banner__msg {
        margin:0;
        font-size:13px; color:#1e40af;
    }
    .live-banner__progress {
        font-size:13px; font-weight:600; color:#1e3a8a;
        white-space:nowrap;
    }
    .live-progress {
        margin-top:10px;
        background:rgba(255,255,255,.6);
        border-radius:999px;
        height:8px;
        overflow:hidden;
        position:relative;
    }
    .live-progress-fill {
        height:100%;
        background:linear-gradient(90deg, #3b82f6, #8b5cf6);
        border-radius:999px;
        transition: width .35s ease-out;
        position:relative;
    }
    .live-progress-fill::after {
        content:'';
        position:absolute; inset:0;
        background:linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent);
        animation: shimmer 1.6s linear infinite;
    }
    @keyframes shimmer {
        from { transform:translateX(-100%); }
        to   { transform:translateX(100%); }
    }
    .live-progress-text {
        font-size:12px; color:#1e40af; font-weight:600;
        margin-top:4px;
        display:flex; justify-content:space-between;
    }
    .live-banner--success {
        background:linear-gradient(135deg,#dcfce7 0%,#d1fae5 100%);
        border-color:#86efac;
    }
    .live-banner--success .live-banner__icon { background:#10b981; }
    .live-banner--success .live-banner__icon::before { display:none; }
    .live-banner--success .live-banner__title { color:#166534; }
    .live-banner--success .live-banner__msg { color:#15803d; }
    .live-banner--success .live-banner__progress { color:#166534; }

    .live-banner--failed {
        background:linear-gradient(135deg,#fee2e2 0%,#fecaca 100%);
        border-color:#fca5a5;
    }
    .live-banner--failed .live-banner__icon { background:#ef4444; }
    .live-banner--failed .live-banner__icon::before { display:none; }
    .live-banner--failed .live-banner__title { color:#991b1b; }
    .live-banner--failed .live-banner__msg { color:#b91c1c; }

    /* ── Recent runs table ────────────────────────────────────── */
    .runs-card {
        background:#fff;
        border:1px solid var(--na-border, #e5e7eb);
        border-radius:14px;
        padding:0;
        box-shadow:0 1px 2px rgba(15,23,42,.04);
        overflow:hidden;
    }
    .runs-card-head {
        display:flex; align-items:center; gap:8px;
        padding:18px 22px 14px;
        border-bottom:1px solid var(--na-border,#e5e7eb);
    }
    .runs-card-head h2 {
        margin:0; font-size:16px; font-weight:700; color:var(--na-text,#0f172a);
    }
    .runs-card-head .meta {
        margin-inline-start:auto; font-size:13px; color:var(--na-muted,#64748b);
    }
    .runs-table {
        width:100%; border-collapse:collapse;
    }
    .runs-table th, .runs-table td {
        padding:12px 16px;
        font-size:13px;
        text-align:start;
        border-bottom:1px solid #f1f5f9;
    }
    .runs-table th {
        font-size:11px; font-weight:700;
        color:var(--na-muted,#64748b);
        text-transform:uppercase; letter-spacing:.04em;
        background:#f8fafc;
    }
    .runs-table tr:last-child td { border-bottom:0; }
    .runs-table tr:hover td { background:#fafbff; }

    .status-pill {
        display:inline-flex; align-items:center; gap:6px;
        padding:3px 10px; border-radius:999px;
        font-size:12px; font-weight:600;
        border:1px solid transparent;
    }
    .status-pill--pending   { background:#fef3c7; color:#92400e; border-color:#fde68a; }
    .status-pill--running   { background:#dbeafe; color:#1e40af; border-color:#93c5fd; }
    .status-pill--succeeded { background:#dcfce7; color:#166534; border-color:#86efac; }
    .status-pill--partial   { background:#fed7aa; color:#9a3412; border-color:#fdba74; }
    .status-pill--failed    { background:#fee2e2; color:#991b1b; border-color:#fca5a5; }
    .status-pill--running .dot {
        width:6px; height:6px; border-radius:50%; background:currentColor;
        animation: blink 1.2s ease-in-out infinite;
    }
    @keyframes blink {
        0%, 100% { opacity:1; }
        50%      { opacity:.3; }
    }

    .runs-empty {
        padding:32px;
        text-align:center;
        color:var(--na-muted,#64748b);
        font-size:14px;
    }
    .module-pill {
        display:inline-flex; align-items:center;
        padding:3px 10px; border-radius:999px;
        background:#f1f5f9; color:#334155;
        font-size:12px; font-weight:600;
    }

    .spinner-inline {
        display:inline-block;
        width:14px; height:14px;
        border:2px solid rgba(255,255,255,.45);
        border-top-color:#fff;
        border-radius:50%;
        animation: spin 700ms linear infinite;
    }
    @keyframes spin { to { transform:rotate(360deg); } }
</style>
@endpush

@section('content')
    <x-admin.page-header :title="__('admin.sync.title')" :subtitle="__('admin.sync.subtitle')" />

    @include('admin.partials.flash')

    <div class="sync-shell"
         x-data="syncDashboard({
             initialActiveRuns: @js($activeRuns->map(fn($r) => [
                 'id' => $r->id,
                 'module' => $r->module,
                 'status' => $r->status,
                 'limit_requested' => $r->limit_requested,
                 'started_at' => optional($r->started_at)->toIso8601String(),
                 'status_url' => route('admin.sync.runs.status', $r),
             ])),
             pollUrl: @js(route('admin.sync.active')),
             labels: {
                 banner_title: @js(__('admin.sync.live.banner_title')),
                 completed: @js(__('admin.sync.live.completed')),
                 status: {
                     pending:   @js(__('admin.sync.status_labels.pending')),
                     running:   @js(__('admin.sync.status_labels.running')),
                     succeeded: @js(__('admin.sync.status_labels.succeeded')),
                     partial:   @js(__('admin.sync.status_labels.partial')),
                     failed:    @js(__('admin.sync.status_labels.failed')),
                 },
                 module: {
                     startups:  @js(__('admin.sync.boards.startups')),
                     investors: @js(__('admin.sync.boards.investors')),
                 },
                 auto_refresh: @js(__('admin.sync.live.auto_refresh')),
                 view: @js(__('admin.sync.fields.view')),
             },
         })"
    >
        {{-- ────────────── Live banner (Alpine-controlled) ────────────── --}}
        <template x-for="run in liveRuns" :key="run.id">
            <div class="live-banner"
                 :class="{
                     'live-banner--success': run.status === 'succeeded' || run.status === 'partial',
                     'live-banner--failed':  run.status === 'failed',
                 }"
            >
                <div class="live-banner__icon">
                    <template x-if="run.status === 'pending' || run.status === 'running'">
                        <span class="spinner-inline" style="border-color:rgba(255,255,255,.4); border-top-color:#fff;"></span>
                    </template>
                    <template x-if="run.status === 'succeeded' || run.status === 'partial'">
                        <span aria-hidden="true">✓</span>
                    </template>
                    <template x-if="run.status === 'failed'">
                        <span aria-hidden="true">✕</span>
                    </template>
                </div>
                <div class="live-banner__body">
                    <p class="live-banner__title">
                        <span x-text="labels.module[run.module]"></span> ·
                        <span x-text="labels.status[run.status]"></span>
                        <span x-show="run.is_finished">— <span x-text="labels.completed"></span></span>
                    </p>
                    <p class="live-banner__msg">
                        <template x-if="!run.is_finished">
                            <span x-text="labels.auto_refresh"></span>
                        </template>
                        <template x-if="run.is_finished">
                            <span>
                                {{ __('admin.sync.fields.upserted') }}:
                                <strong x-text="run.items_upserted"></strong>
                                · {{ __('admin.sync.fields.errored') }}:
                                <strong x-text="run.items_errored"></strong>
                                · {{ __('admin.sync.fields.duration') }}:
                                <strong x-text="run.duration_seconds + 's'"></strong>
                            </span>
                        </template>
                    </p>
                    {{-- Live progress bar --}}
                    <template x-if="!run.is_finished && run.total_estimated">
                        <div>
                            <div class="live-progress">
                                <div class="live-progress-fill" :style="`width: ${run.progress_pct || 0}%`"></div>
                            </div>
                            <div class="live-progress-text">
                                <span>
                                    <strong x-text="run.items_processed"></strong> / <span x-text="run.total_estimated"></span>
                                    ({{ __('admin.sync.pages') }}: <span x-text="run.pages_processed || 0"></span>)
                                </span>
                                <span><strong x-text="(run.progress_pct ?? 0) + '%'"></strong></span>
                            </div>
                        </div>
                    </template>
                </div>
                <a :href="run.detail_url" class="live-banner__progress">
                    <span x-text="labels.view"></span> #<span x-text="run.id"></span>
                </a>
            </div>
        </template>

        {{-- ────────────── Stats + run buttons ────────────── --}}
        <div class="sync-grid">
            {{-- Startups --}}
            <div class="sync-card">
                <div class="sync-card-head">
                    <div class="sync-card-icon" aria-hidden="true">🚀</div>
                    <div>
                        <h3 class="sync-card-title">
                            {{ __('admin.sync.boards.startups') }}
                            <span class="sync-board-id">#{{ $startupBoardId }}</span>
                        </h3>
                        <p class="sync-card-subtitle">{{ __('admin.sync.boards.startups_subtitle') }}</p>
                    </div>
                </div>

                <div class="sync-stats">
                    <div class="sync-stat">
                        <p class="sync-stat-label">{{ __('admin.sync.fields.total') }}</p>
                        <p class="sync-stat-value">{{ number_format($startupCount) }}</p>
                    </div>
                    <div class="sync-stat">
                        <p class="sync-stat-label">{{ __('admin.sync.fields.from_monday') }}</p>
                        <p class="sync-stat-value">{{ number_format($startupFromMonday) }}</p>
                    </div>
                    <div class="sync-stat">
                        <p class="sync-stat-label">{{ __('admin.sync.fields.from_dashboard') }}</p>
                        <p class="sync-stat-value">{{ number_format($startupFromDash) }}</p>
                    </div>
                </div>

                <p class="sync-meta">
                    <strong>{{ __('admin.sync.fields.last_sync') }}:</strong>
                    {{ $fmt($startupLastSync) }}
                </p>

                <form method="post" action="{{ route('admin.sync.startups') }}" class="sync-actions"
                      x-on:submit="$event.target.querySelector('button').disabled = true; $event.target.querySelector('button').innerHTML = '<span class=&quot;spinner-inline&quot;></span> {{ __('admin.sync.queued') }}…';">
                    @csrf
                    <label for="startups-limit">{{ __('admin.sync.fields.limit') }}</label>
                    <input type="number" id="startups-limit" name="limit" value="0" min="0" max="1000000" placeholder="0 = {{ __('admin.sync.pull_all') }}">
                    <button type="submit" class="btn-primary">
                        <span aria-hidden="true">⟳</span>
                        {{ __('admin.sync.run_now') }}
                    </button>
                </form>
                <p style="margin:0; font-size:12px; color:var(--na-muted,#64748b);">
                    💡 {{ __('admin.sync.fields.limit') }} = 0 → {{ __('admin.sync.pull_all') }}
                </p>
            </div>

            {{-- Investors --}}
            <div class="sync-card">
                <div class="sync-card-head">
                    <div class="sync-card-icon sync-card-icon--investor" aria-hidden="true">💼</div>
                    <div>
                        <h3 class="sync-card-title">
                            {{ __('admin.sync.boards.investors') }}
                            <span class="sync-board-id">#{{ $investorBoardId }}</span>
                        </h3>
                        <p class="sync-card-subtitle">{{ __('admin.sync.boards.investors_subtitle') }}</p>
                    </div>
                </div>

                <div class="sync-stats">
                    <div class="sync-stat">
                        <p class="sync-stat-label">{{ __('admin.sync.fields.total') }}</p>
                        <p class="sync-stat-value">{{ number_format($investorCount) }}</p>
                    </div>
                </div>

                <p class="sync-meta">
                    <strong>{{ __('admin.sync.fields.last_sync') }}:</strong>
                    {{ $fmt($investorLastSync) }}
                </p>

                <form method="post" action="{{ route('admin.sync.investors') }}" class="sync-actions"
                      x-on:submit="$event.target.querySelector('button').disabled = true; $event.target.querySelector('button').innerHTML = '<span class=&quot;spinner-inline&quot;></span> {{ __('admin.sync.queued') }}…';">
                    @csrf
                    <label for="investors-limit">{{ __('admin.sync.fields.limit') }}</label>
                    <input type="number" id="investors-limit" name="limit" value="0" min="0" max="1000000" placeholder="0 = {{ __('admin.sync.pull_all') }}">
                    <button type="submit" class="btn-primary">
                        <span aria-hidden="true">⟳</span>
                        {{ __('admin.sync.run_now') }}
                    </button>
                </form>
                <p style="margin:0; font-size:12px; color:var(--na-muted,#64748b);">
                    💡 {{ __('admin.sync.fields.limit') }} = 0 → {{ __('admin.sync.pull_all') }}
                </p>
            </div>
        </div>

        {{-- ────────────── Recent runs table ────────────── --}}
        <section class="runs-card">
            <header class="runs-card-head">
                <h2>📜 {{ __('admin.sync.sections.recent') }}</h2>
                <span class="meta">{{ $recentRuns->count() }} / {{ \App\Models\SyncRun::count() }}</span>
            </header>
            @if ($recentRuns->isEmpty())
                <div class="runs-empty">{{ __('admin.sync.empty_runs') }}</div>
            @else
                <div style="overflow-x:auto;">
                    <table class="runs-table">
                        <thead>
                            <tr>
                                <th>{{ __('admin.sync.fields.run_id') }}</th>
                                <th>{{ __('admin.sync.fields.module') }}</th>
                                <th>{{ __('admin.sync.fields.status') }}</th>
                                <th>{{ __('admin.sync.fields.upserted') }}</th>
                                <th>{{ __('admin.sync.fields.errored') }}</th>
                                <th>{{ __('admin.sync.fields.duration') }}</th>
                                <th>{{ __('admin.sync.fields.triggered_by') }}</th>
                                <th>{{ __('admin.sync.fields.queued_at') }}</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($recentRuns as $r)
                                <tr>
                                    <td><strong>#{{ $r->id }}</strong></td>
                                    <td><span class="module-pill">{{ __('admin.sync.boards.' . $r->module) }}</span></td>
                                    <td>
                                        <span class="status-pill status-pill--{{ $r->status }}">
                                            @if ($r->status === 'running') <span class="dot"></span> @endif
                                            {{ __('admin.sync.status_labels.' . $r->status) }}
                                        </span>
                                    </td>
                                    <td>
                                        {{ number_format($r->items_upserted) }} / {{ number_format($r->items_processed) }}
                                        @if ($r->total_estimated && $r->isActive())
                                            <div style="background:#e2e8f0; height:4px; border-radius:999px; margin-top:4px; overflow:hidden;">
                                                <div style="background:#3b82f6; height:100%; width:{{ $r->progressPct() ?? 0 }}%;"></div>
                                            </div>
                                        @endif
                                    </td>
                                    <td>
                                        @if ($r->items_errored > 0)
                                            <strong style="color:#b91c1c;">{{ number_format($r->items_errored) }}</strong>
                                        @else
                                            <span style="color:#94a3b8;">0</span>
                                        @endif
                                    </td>
                                    <td>
                                        @if ($r->duration_ms !== null)
                                            {{ $r->durationSeconds() }}s
                                        @else {{ $dash }} @endif
                                    </td>
                                    <td>
                                        @if ($r->admin)
                                            <strong>{{ $r->admin->name }}</strong>
                                        @else {{ $dash }} @endif
                                    </td>
                                    <td style="color:var(--na-muted,#64748b); font-size:12px;">
                                        {{ $rel($r->created_at) }}
                                    </td>
                                    <td>
                                        <a href="{{ route('admin.sync.runs.show', $r) }}" class="btn-link">{{ __('admin.sync.fields.view') }}</a>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @endif
        </section>
    </div>

    {{-- Alpine component: poll active runs every 3s and reload page when any finish. --}}
    <script>
        document.addEventListener('alpine:init', () => {
            Alpine.data('syncDashboard', (config) => ({
                liveRuns: [],
                pollers: {},

                init() {
                    // Hydrate from initial state injected from PHP.
                    (config.initialActiveRuns || []).forEach(r => this.startTracking(r));

                    // Also poll once on load for any newly-queued runs the page-render missed.
                    this.refreshActive();
                },

                async refreshActive() {
                    try {
                        const res = await fetch(config.pollUrl, { headers: { Accept: 'application/json' }});
                        const data = await res.json();
                        (data.runs || []).forEach(r => {
                            if (!this.liveRuns.find(x => x.id === r.id)) this.startTracking(r);
                        });
                    } catch (_) { /* swallow */ }
                },

                startTracking(run) {
                    // Push placeholder into UI
                    this.liveRuns.push({
                        id: run.id,
                        module: run.module,
                        status: run.status,
                        items_processed: 0,
                        items_upserted: 0,
                        items_errored: 0,
                        pages_processed: 0,
                        total_estimated: null,
                        progress_pct: 0,
                        duration_seconds: null,
                        is_finished: false,
                        detail_url: run.status_url.replace(/\/status$/, ''),
                        status_url: run.status_url,
                    });

                    // Start a 3s poller for this specific run.
                    const id = run.id;
                    this.pollers[id] = setInterval(() => this.tickRun(id), 3000);
                    // Also tick once immediately so users don't wait 3s for the first paint.
                    this.tickRun(id);
                },

                async tickRun(id) {
                    const idx = this.liveRuns.findIndex(r => r.id === id);
                    if (idx === -1) {
                        clearInterval(this.pollers[id]);
                        return;
                    }

                    try {
                        const res = await fetch(this.liveRuns[idx].status_url, { headers: { Accept: 'application/json' }});
                        const r = await res.json();
                        Object.assign(this.liveRuns[idx], r);
                        if (r.is_finished) {
                            clearInterval(this.pollers[id]);
                            // Soft-refresh the page once the run wraps up so the
                            // recent-runs table + counters reflect the new state.
                            // Wait 1.5s so the user can see the success banner.
                            setTimeout(() => window.location.reload(), 1500);
                        }
                    } catch (_) { /* keep polling on transient network errors */ }
                },
            }));
        });
    </script>
@endsection