@php
    use App\Services\Monitoring\MonitoringSignal;

    /** @var \App\Services\Monitoring\CountryHealth $health */
    /** @var string $countryName */

    $isOk        = $health->isOk();
    $criticalCnt = count($health->criticalSignals());
@endphp

<div class="pol-mon" wire:poll.30s>
    <style>
        .pol-mon{
            --pm-panel:#fff; --pm-border:#ecedf1; --pm-border-2:#e4e6eb;
            --pm-text:#1c2430; --pm-muted:#6b7280; --pm-muted-2:#9aa1ac; --pm-muted-3:#b6bcc6;
            --pm-ok:#067647; --pm-ok-bg:#ecfdf3; --pm-ok-dot:#17b26a; --pm-ok-line:#12b76a;
            --pm-crit:#b42318; --pm-crit-bg:#fef3f2; --pm-crit-dot:#f04438; --pm-crit-line:#f04438;
            --pm-shadow:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.05);
            --pm-r:14px;
            color:var(--pm-text);
            font-size:14px; line-height:1.45;
        }
        .pol-mon *{box-sizing:border-box}
        .pol-mon .pm-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap}
        .pol-mon .pm-country{display:flex;align-items:baseline;gap:12px}
        .pol-mon .pm-country-name{font-size:22px;font-weight:700;letter-spacing:-.2px}
        .pol-mon .pm-clock{font-size:15px;font-weight:600;color:var(--pm-muted);font-variant-numeric:tabular-nums}
        .pol-mon .pm-legend{display:flex;gap:16px;align-items:center;font-size:12px;color:var(--pm-muted)}
        .pol-mon .pm-legend i{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:6px;vertical-align:middle}

        .pol-mon .pm-grid{display:grid;gap:16px;grid-template-columns:minmax(320px,460px)}
        .pol-mon .pm-tile{background:var(--pm-panel);border:1px solid var(--pm-border);border-radius:var(--pm-r);
            padding:16px 18px;box-shadow:var(--pm-shadow);position:relative;overflow:hidden;
            display:flex;flex-direction:column}
        .pol-mon .pm-accent{position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:3px}
        .pol-mon .pm-tile.ok .pm-accent{background:var(--pm-ok-line)}
        .pol-mon .pm-tile.crit .pm-accent{background:var(--pm-crit-line)}
        .pol-mon .pm-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
        .pol-mon .pm-lbl{font-size:10.5px;letter-spacing:.6px;text-transform:uppercase;color:var(--pm-muted-2);font-weight:700}
        .pol-mon .pm-state{font-size:26px;font-weight:800;letter-spacing:-.5px;margin-top:6px}
        .pol-mon .pm-tile.ok .pm-state{color:var(--pm-ok)}
        .pol-mon .pm-tile.crit .pm-state{color:var(--pm-crit)}
        .pol-mon .pm-desc{font-size:12px;color:var(--pm-muted);margin-top:4px}

        .pol-mon .pm-pill{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;white-space:nowrap}
        .pol-mon .pm-pill.ok{color:var(--pm-ok);background:var(--pm-ok-bg)}
        .pol-mon .pm-pill.crit{color:var(--pm-crit);background:var(--pm-crit-bg)}
        .pol-mon .pm-dot{width:9px;height:9px;border-radius:50%;display:inline-block;flex:0 0 auto}
        .pol-mon .pm-dot.ok{background:var(--pm-ok-dot)}
        .pol-mon .pm-dot.crit{background:var(--pm-crit-dot)}

        .pol-mon .pm-list{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
        .pol-mon .pm-item{display:flex;gap:10px}
        .pol-mon .pm-item .pm-idot{margin-top:5px}
        .pol-mon .pm-item .pm-nm{font-weight:600;font-size:13.5px;color:#374151}
        .pol-mon .pm-item .pm-mt{font-size:11.5px;color:var(--pm-muted);margin-top:2px}
        .pol-mon .pm-foot{margin-top:16px;color:var(--pm-muted-3);font-size:11.5px}
    </style>

    <div class="pm-head">
        <div class="pm-country">
            <span class="pm-country-name">{{ $countryName }}</span>
            <span class="pm-clock" wire:ignore
                  x-data="{ time: '', tz: '{{ config('app.timezone') }}', tick() { this.time = new Date().toLocaleTimeString('ru-RU', { timeZone: this.tz, hour: '2-digit', minute: '2-digit', second: '2-digit' }); } }"
                  x-init="tick(); setInterval(() => tick(), 1000)"
                  x-text="time"></span>
        </div>
        <div class="pm-legend">
            <span><i style="background:var(--pm-ok-dot)"></i>{{ __('monitoring.legend_ok', [], 'ru') }}</span>
            <span><i style="background:var(--pm-crit-dot)"></i>{{ __('monitoring.legend_critical', [], 'ru') }}</span>
        </div>
    </div>

    <div class="pm-grid">
        <div class="pm-tile {{ $isOk ? 'ok' : 'crit' }}">
            <span class="pm-accent"></span>

            <div class="pm-top">
                <span class="pm-lbl">{{ __('monitoring.country_state', [], 'ru') }}</span>
                @if($isOk)
                    <span class="pm-pill ok"><span class="pm-dot ok"></span> {{ __('monitoring.state_ok', [], 'ru') }}</span>
                @else
                    <span class="pm-pill crit"><span class="pm-dot crit"></span> {{ __('monitoring.state_critical', [], 'ru') }}</span>
                @endif
            </div>

            <div class="pm-state">{{ $isOk ? __('monitoring.state_ok', [], 'ru') : __('monitoring.state_critical', [], 'ru') }}</div>
            <div class="pm-desc">
                @if($isOk)
                    {{ __('monitoring.state_ok_desc', [], 'ru') }}
                @else
                    {{ $criticalCnt }} {{ __('monitoring.state_critical_desc', [], 'ru') }}
                @endif
            </div>

            <ul class="pm-list">
                @foreach($health->signals as $signal)
                    @php $sevOk = $signal->isOk(); @endphp
                    <li class="pm-item" wire:key="signal-{{ $signal->key }}">
                        <span class="pm-dot {{ $sevOk ? 'ok' : 'crit' }} pm-idot"></span>
                        <div>
                            <div class="pm-nm">{{ __('monitoring.' . $signal->key, [], 'ru') }}</div>
                            <div class="pm-mt">
                                @if(! $signal->hasData())
                                    {{ __('monitoring.act_no_data', [], 'ru') }}
                                @elseif($sevOk)
                                    {{ __('monitoring.act_last', [], 'ru') }} {{ $signal->lastRunAt->locale('ru')->diffForHumans() }}
                                    &middot; {{ __('monitoring.act_next', [], 'ru') }} {{ $signal->nextRunAt->locale('ru')->diffForHumans(['parts' => 2]) }} ({{ $signal->nextRunAt->format('H:i') }})
                                @else
                                    {{ __('monitoring.act_not_run', [], 'ru') }} {{ $signal->hoursSince }} ч
                                    &middot; {{ __('monitoring.act_next', [], 'ru') }} {{ $signal->nextRunAt->locale('ru')->diffForHumans(['parts' => 2]) }} ({{ $signal->nextRunAt->format('H:i') }})
                                @endif
                            </div>
                        </div>
                    </li>
                @endforeach
            </ul>

            <div class="pm-foot">{{ __('monitoring.updated_at', [], 'ru') }} {{ now()->format('H:i') }}</div>
        </div>
    </div>
</div>