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

@section('content')
    <div class="page-head">
        <div>
            <h1>{{ $device->name }}</h1>
            <p>
                <span class="badge info">{{ title_case_words($device->role) }}</span>
                &middot; <span class="badge {{ status_color($device->status) }}"><span class="dot"></span>{{ $device->status }}</span>
                &middot; <span class="mono small">{{ $device->management_ip }}</span>
                @if ($device->site) &middot; {{ $device->site->name }} @endif
            </p>
        </div>
        <div class="page-actions">
            <form method="POST" action="{{ route('devices.poll', $device) }}">@csrf
                <button type="submit" class="btn secondary">Poll now</button>
            </form>
            @if ($device->vendor === 'mikrotik')
                <form method="POST" action="{{ route('devices.provision', $device) }}">@csrf
                    <button type="submit" class="btn secondary">Provision via API</button>
                </form>
            @endif
            <a href="{{ route('devices.edit', $device) }}" class="btn">Edit</a>
        </div>
    </div>

    <div class="grid grid-6 mb-2">
        @include('components.kpi', ['label' => 'Status', 'value' => title_case_words($device->status),
            'variant' => $device->status === 'up' ? 'good' : ($device->status === 'down' ? 'bad' : 'warn'), 'href' => '#'])
        @include('components.kpi', ['label' => 'Latency', 'value' => $device->last_ping_ms !== null ? number_format($device->last_ping_ms, 1).' ms' : '—',
            'variant' => ($device->last_ping_ms ?? 0) < 50 ? 'good' : 'warn', 'href' => '#'])
        @include('components.kpi', ['label' => 'Uptime', 'value' => $device->uptime_label, 'href' => '#'])
        @include('components.kpi', ['label' => 'Interfaces up', 'value' => $device->interfaces()->where('admin_status', 'up')->count().' / '.$device->interfaces()->count(),
            'variant' => 'info', 'href' => '#interfaces'])
        @include('components.kpi', ['label' => 'Active alerts', 'value' => $device->alerts()->active()->count(),
            'variant' => $device->alerts()->active()->count() > 0 ? 'bad' : 'good', 'href' => '#'])
        @include('components.kpi', ['label' => 'Last poll', 'value' => $device->last_polled_at?->diffForHumans() ?? 'never', 'href' => '#'])
    </div>

    <div class="grid grid-2">
        <div class="card">
            <div class="card-head"><h3>Throughput — 24h</h3></div>
            <div class="card-body">
                @include('components.chart', [
                    'series' => collect($metrics)->map(fn ($m) => [
                        'label' => \Carbon\Carbon::parse($m['sampled_at'])->format('H:i'),
                        'value' => $m['in_bps'],
                    ])->all(),
                    'type' => 'line', 'format' => 'bytes', 'height' => 200,
                ])
            </div>
        </div>

        <div class="card">
            <div class="card-head"><h3>Device detail</h3></div>
            <div class="card-body">
                <dl class="dl">
                    <dt>Hostname</dt><dd class="mono">{{ $device->hostname ?: '—' }}</dd>
                    <dt>Vendor / model</dt><dd>{{ title_case_words($device->vendor ?? 'unknown') }} {{ $device->model }}</dd>
                    <dt>Serial</dt><dd class="mono">{{ $device->serial_number ?: '—' }}</dd>
                    <dt>Firmware</dt><dd class="mono">{{ $device->firmware_version ?: '—' }}</dd>
                    <dt>OS</dt><dd>{{ $device->os_version ?: '—' }}</dd>
                    <dt>Monitoring</dt><dd>{{ title_case_words($device->monitoring_type) }}</dd>
                    <dt>SNMP</dt><dd class="mono">v{{ $device->snmp_version }} {{ $device->snmp_community ? '(community set)' : '(default)' }}</dd>
                    @if ($device->vendor === 'mikrotik')
                        <dt>RouterOS API</dt><dd class="mono">{{ $device->management_ip }}:{{ $device->api_port }} {{ $device->api_ssl ? '(TLS)' : '' }}</dd>
                    @endif
                    <dt>Poll interval</dt><dd>{{ $device->poll_interval }}s</dd>
                    <dt>Site</dt><dd>{{ $device->site?->name ?? 'Unassigned' }}</dd>
                    <dt>Registered</dt><dd>{{ $device->created_at->format('d M Y') }}</dd>
                </dl>
            </div>
        </div>
    </div>

    <div class="card" id="interfaces">
        <div class="card-head">
            <h3>Interfaces</h3>
            <form method="POST" action="{{ route('devices.sync-interfaces', $device) }}">@csrf
                <button type="submit" class="btn secondary sm">Sync interfaces</button>
            </form>
        </div>
        <div class="card-body tight">
            <div class="table-wrap">
                <table class="data">
                    <thead>
                    <tr>
                        <th>Name</th><th>Description</th><th>Admin</th><th>Oper</th><th>Speed</th>
                        <th class="num">In</th><th class="num">Out</th><th class="num">In errors</th><th class="num">Out errors</th>
                    </tr>
                    </thead>
                    <tbody>
                    @forelse ($device->interfaces as $interface)
                        <tr>
                            <td class="mono strong">{{ $interface->name }}</td>
                            <td class="small">{{ $interface->description ?: '—' }}</td>
                            <td><span class="badge {{ $interface->admin_status === 'up' ? 'success' : 'muted' }}">{{ $interface->admin_status }}</span></td>
                            <td><span class="badge {{ $interface->oper_status === 'up' ? 'success' : ($interface->oper_status === 'down' ? 'danger' : 'muted') }}">{{ $interface->oper_status }}</span></td>
                            <td class="small">{{ $interface->speed ? human_bytes($interface->speed) : '—' }}</td>
                            <td class="num">{{ human_bytes($interface->in_octets) }}</td>
                            <td class="num">{{ human_bytes($interface->out_octets) }}</td>
                            <td class="num">{{ number_format($interface->in_errors) }}</td>
                            <td class="num">{{ number_format($interface->out_errors) }}</td>
                        </tr>
                    @empty
                        <tr><td colspan="9">
                            @include('components.empty-state', ['icon' => '&#128268;', 'title' => 'No interfaces synced',
                                'message' => 'Sync the interface table to start tracking port-level counters.',
                                'action' => '<form method="POST" action="'.route('devices.sync-interfaces', $device).'">'.csrf_field().'<button class="btn sm">Sync interfaces</button></form>'])
                        </td></tr>
                    @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="grid grid-2">
        <div class="card">
            <div class="card-head"><h3>Alerts for this device</h3></div>
            <div class="card-body tight">
                <div class="table-wrap">
                    <table class="data">
                        <thead><tr><th>Alert</th><th>Severity</th><th>Triggered</th><th>Status</th></tr></thead>
                        <tbody>
                        @forelse ($device->alerts()->latest()->limit(15)->get() as $alert)
                            <tr>
                                <td><strong>{{ $alert->title }}</strong>
                                    <div class="tiny muted">{{ \Illuminate\Support\Str::limit($alert->description, 70) }}</div></td>
                                <td><span class="badge {{ $alert->severity === 'critical' ? 'danger' : ($alert->severity === 'warning' ? 'warning' : 'muted') }}">{{ $alert->severity }}</span></td>
                                <td class="small nowrap">{{ $alert->created_at->format('d M H:i') }}</td>
                                <td><span class="badge {{ status_color($alert->status) }}">{{ $alert->status }}</span></td>
                            </tr>
                        @empty
                            <tr><td colspan="4">@include('components.empty-state', ['icon' => '&#10003;', 'title' => 'No alerts raised'])</td></tr>
                        @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-head"><h3>Ping history — 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>

    @if ($device->role === 'olt' && $device->pons->isNotEmpty())
        <div class="card">
            <div class="card-head"><h3>PON ports &amp; ONUs</h3></div>
            <div class="card-body tight">
                <div class="table-wrap">
                    <table class="data">
                        <thead><tr><th>PON port</th><th class="num">ONUs</th><th class="num">Online</th><th>Splitter</th><th>Status</th></tr></thead>
                        <tbody>
                        @foreach ($device->pons as $pon)
                            <tr>
                                <td class="mono strong">{{ $pon->pon_port }}</td>
                                <td class="num">{{ $pon->onus->count() }}</td>
                                <td class="num">{{ $pon->onus->where('status', 'online')->count() }}</td>
                                <td class="mono tiny">{{ $pon->splitter ?: '—' }}</td>
                                <td><span class="badge {{ status_color($pon->status) }}">{{ $pon->status }}</span></td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    @endif
@endsection