@extends('layouts.app')
@section('title', $site->name)

@section('content')
    <div class="page-head">
        <div>
            <h1>{{ $site->name }}</h1>
            <p><span class="mono">{{ $site->site_code }}</span>
                &middot; <span class="badge {{ status_color($site->status) }}"><span class="dot"></span>{{ $site->status }}</span>
                &middot; <span class="badge muted">{{ title_case_words($site->type) }}</span></p>
        </div>
        <div class="page-actions">
            <a href="{{ route('devices.create', ['site' => $site->id]) }}" class="btn secondary">+ Add device</a>
            <a href="{{ route('sites.index') }}" class="btn">&larr; Back to sites</a>
        </div>
    </div>

    <div class="grid grid-4 mb-2">
        @include('components.kpi', ['label' => 'Devices', 'value' => $site->devices()->count(), 'variant' => 'info', 'href' => '#devices'])
        @include('components.kpi', ['label' => 'Up', 'value' => $site->devices()->where('status', 'up')->count(),
            'variant' => $site->devices()->where('status', 'down')->count() > 0 ? 'bad' : 'good', 'href' => '#devices'])
        @include('components.kpi', ['label' => 'Active alerts', 'value' => $site->alerts()->active()->count(),
            'variant' => $site->alerts()->active()->count() > 0 ? 'bad' : 'good', 'href' => '#'])
        @include('components.kpi', ['label' => 'Latency', 'value' => $site->last_latency_ms !== null ? number_format($site->last_latency_ms, 1).' ms' : '—', 'href' => '#'])
    </div>

    <div class="grid grid-2">
        <div class="card">
            <div class="card-head"><h3>Site detail</h3></div>
            <div class="card-body">
                <dl class="dl">
                    <dt>Site code</dt><dd class="mono">{{ $site->site_code }}</dd>
                    <dt>Type</dt><dd>{{ title_case_words($site->type) }}</dd>
                    <dt>Address</dt><dd>{{ $site->address ?: '—' }}</dd>
                    <dt>City / region</dt><dd>{{ $site->city }}{{ $site->region ? ', '.$site->region : '' }}</dd>
                    <dt>Coordinates</dt><dd class="mono">{{ $site->latitude && $site->longitude ? $site->latitude.', '.$site->longitude : '—' }}</dd>
                    <dt>Branch</dt><dd>{{ $site->branch?->name ?? 'Head office' }}</dd>
                    <dt>Power</dt><dd>{{ $site->power_source ? title_case_words($site->power_source) : '—' }}</dd>
                    <dt>Contact</dt><dd>{{ $site->contact_name ?: '—' }}{{ $site->contact_phone ? ' — '.$site->contact_phone : '' }}</dd>
                    <dt>Registered</dt><dd>{{ $site->created_at->format('d M Y') }}</dd>
                </dl>
            </div>
        </div>

        <div class="card">
            <div class="card-head"><h3>Latency — 24h</h3></div>
            <div class="card-body">
                @include('components.chart', [
                    'series' => collect($pings)->map(fn ($p) => [
                        'label' => \Carbon\Carbon::parse($p['checked_at'])->format('H:i'),
                        'value' => $p['response_ms'],
                    ])->all(),
                    'type' => 'line', 'format' => 'number', 'height' => 200,
                ])
            </div>
        </div>
    </div>

    <div class="card" id="devices">
        <div class="card-head"><h3>Devices at this site</h3></div>
        <div class="card-body tight">
            <div class="table-wrap">
                <table class="data">
                    <thead>
                    <tr><th>Device</th><th>Role</th><th>Management IP</th><th class="num">Latency</th><th class="num">Uptime</th><th>Status</th><th>Last poll</th></tr>
                    </thead>
                    <tbody>
                    @forelse ($site->devices as $device)
                        <tr>
                            <td><a href="{{ route('devices.show', $device) }}" class="strong">{{ $device->name }}</a>
                                <div class="tiny muted">{{ $device->vendor }} {{ $device->model }}</div></td>
                            <td><span class="badge info">{{ title_case_words($device->role) }}</span></td>
                            <td class="mono tiny">{{ $device->management_ip }}</td>
                            <td class="num">{{ $device->last_ping_ms !== null ? number_format($device->last_ping_ms, 1).' ms' : '—' }}</td>
                            <td class="num small">{{ $device->uptime_label }}</td>
                            <td><span class="badge {{ status_color($device->status) }}"><span class="dot"></span>{{ $device->status }}</span></td>
                            <td class="small muted">{{ $device->last_polled_at?->diffForHumans() ?? 'never' }}</td>
                        </tr>
                    @empty
                        <tr><td colspan="7">
                            @include('components.empty-state', ['icon' => '&#9881;', 'title' => 'No devices at this site',
                                'action' => '<a href="'.route('devices.create', ['site' => $site->id]).'" class="btn sm">+ Add device</a>'])
                        </td></tr>
                    @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection