@extends('layouts.app')
@section('title', $profile->exists ? 'Geräteprofil bearbeiten' : 'Geräteprofil anlegen')
@section('content')
    <form method="POST" action="{{ $profile->exists ? route('deviceprofiles.update', $profile) : route('deviceprofiles.store') }}">
        @csrf @if ($profile->exists) @method('PUT') @endif
        <section class="grid grid-2">
            <div class="panel"><div class="panel-head"><h2>Zuordnung</h2></div><div class="panel-body">
                <div class="form-row">
                    <div class="field"><label for="vendor">Hersteller *</label>
                        <input id="vendor" name="vendor" type="text" required value="{{ old('vendor', $profile->vendor) }}"></div>
                    <div class="field"><label for="model_family">Modellfamilie *</label>
                        <input id="model_family" name="model_family" type="text" required value="{{ old('model_family', $profile->model_family) }}"></div>
                </div>
                <div class="field"><label for="name">Bezeichnung *</label>
                    <input id="name" name="name" type="text" required value="{{ old('name', $profile->name) }}"></div>
                <div class="field"><label for="description">Beschreibung</label>
                    <textarea id="description" name="description">{{ old('description', $profile->description) }}</textarea></div>
                <div class="field"><label for="sysobjectid_prefix">sysObjectID-Präfix (Erkennung)</label>
                    <input id="sysobjectid_prefix" name="sysobjectid_prefix" type="text" class="mono"
                           value="{{ old('sysobjectid_prefix', $profile->sysobjectid_prefix) }}"></div>
                <div class="field"><label for="known_issues">Bekannte Besonderheiten</label>
                    <textarea id="known_issues" name="known_issues">{{ old('known_issues', $profile->known_issues) }}</textarea></div>
                <label class="check">
                    <input type="checkbox" name="is_active" value="1" @checked(old('is_active', $profile->is_active ?? true))>
                    <span>Profil ist aktiv</span>
                </label>
            </div></div>

            <div class="panel"><div class="panel-head"><h2>OID-Mapping</h2></div><div class="panel-body">
                <p class="help">Nur numerische OIDs (z. B. <span class="mono">1.3.6.1.2.1.1.3.0</span>).
                    Leere Felder werden nicht abgefragt.</p>

                <div class="field">
                    <label for="mib_id">Referenz-MIB (für Vorschläge &amp; Suche)</label>
                    <select id="mib_id" name="mib_id" data-mib-select>
                        <option value="">– keine –</option>
                        @foreach ($mibs as $m)
                            <option value="{{ $m->id }}" @selected(old('mib_id', $profile->mib_id) == $m->id)>
                                {{ $m->module_name }} ({{ $m->objects_count }} OIDs)
                            </option>
                        @endforeach
                    </select>
                    @if ($mibs->isEmpty())
                        <p class="help">Noch keine geparste MIB vorhanden – zuerst in der
                            <a href="{{ route('mibs.index') }}">MIB-Bibliothek</a> hochladen.</p>
                    @endif
                </div>

                <div class="mib-tools" @if ($mibs->isEmpty()) hidden @endif>
                    <button type="button" class="btn btn-secondary btn-sm" data-mib-suggest>
                        Vorschläge aus MIB übernehmen
                    </button>
                    <div class="field" style="margin-top:8px">
                        <label for="mib_search">OID-Katalog durchsuchen</label>
                        <input type="text" id="mib_search" class="mono" autocomplete="off"
                               placeholder="Name oder OID …" data-mib-search>
                    </div>
                    <div id="mib_results" class="mib-results" data-mib-results></div>
                    <p class="help">Zuerst in ein OID-Feld klicken, dann ein Suchergebnis wählen – die OID
                        wird in das zuletzt fokussierte Feld übernommen.</p>
                </div>

                @foreach ([
                    'oid_cpu' => 'CPU-Auslastung',
                    'oid_memory_used' => 'Speicher belegt',
                    'oid_memory_total' => 'Speicher gesamt',
                    'oid_temperature' => 'Temperatur',
                    'oid_uptime' => 'Uptime',
                    'oid_sysdescr' => 'sysDescr',
                    'oid_sysname' => 'sysName',
                    'oid_firmware' => 'Firmware-Version',
                    'oid_serial' => 'Seriennummer',
                    'oid_stp_topology_changes' => 'STP Topology Changes',
                    'oid_stp_root' => 'STP Root Bridge',
                    'oid_if_oper_status' => 'Interface-Status (Tabelle)',
                    'oid_if_in_errors' => 'Interface-Fehler eingehend',
                    'oid_if_out_errors' => 'Interface-Fehler ausgehend',
                ] as $field => $label)
                    <div class="field">
                        <label for="{{ $field }}">{{ $label }}</label>
                        <input id="{{ $field }}" name="{{ $field }}" type="text" class="mono oid-input"
                               value="{{ old($field, $profile->{$field}) }}">
                    </div>
                @endforeach
            </div></div>
        </section>

        <section class="panel"><div class="panel-body form-actions">
            <button class="btn btn-primary" type="submit">Speichern</button>
            <a href="{{ route('deviceprofiles.index') }}" class="btn btn-ghost">Abbrechen</a>
        </div></section>
    </form>

    @push('scripts')
    <script nonce="{{ request()->attributes->get('csp_nonce') }}">
    (function () {
        var select = document.querySelector('[data-mib-select]');
        if (! select) { return; }

        var searchInput = document.querySelector('[data-mib-search]');
        var results = document.querySelector('[data-mib-results]');
        var suggestBtn = document.querySelector('[data-mib-suggest]');

        var objectsUrl = @json(route('mibs.objects', ['mib' => '__MIB__']));
        var suggestUrl = @json(route('mibs.suggestions', ['mib' => '__MIB__']));

        // Metrik -> Formularfeld (nur die vom Suggester abgedeckten Skalare).
        var metricField = {
            cpu: 'oid_cpu', memory_used: 'oid_memory_used', memory_total: 'oid_memory_total',
            temperature: 'oid_temperature', firmware: 'oid_firmware', serial: 'oid_serial'
        };

        // Zuletzt fokussiertes OID-Feld merken (Ziel fuer die Katalog-Auswahl).
        var lastField = null;
        document.querySelectorAll('.oid-input').forEach(function (input) {
            input.addEventListener('focus', function () { lastField = input; });
        });

        function currentMib() { return select.value; }

        if (suggestBtn) {
            suggestBtn.addEventListener('click', function () {
                var mib = currentMib();
                if (! mib) { window.alert('Bitte zuerst eine Referenz-MIB waehlen.'); return; }

                fetch(suggestUrl.replace('__MIB__', mib), { credentials: 'same-origin', headers: { 'Accept': 'application/json' } })
                    .then(function (r) { return r.json(); })
                    .then(function (data) {
                        var s = data.suggestions || {};
                        var applied = 0, skipped = 0;
                        Object.keys(metricField).forEach(function (metric) {
                            var list = s[metric] || [];
                            if (! list.length) { return; }
                            var field = document.getElementById(metricField[metric]);
                            if (! field) { return; }
                            var top = list[0];
                            if (field.value && field.value !== top.oid) {
                                if (! window.confirm(metric + ': vorhandenen Wert ' + field.value + ' durch ' + top.oid + ' (' + top.name + ') ersetzen?')) { skipped++; return; }
                            }
                            field.value = top.oid;
                            applied++;
                        });
                        window.alert(applied + ' Vorschlag/Vorschlaege uebernommen' + (skipped ? ', ' + skipped + ' uebersprungen' : '') + '. Bitte vor dem Speichern pruefen.');
                    })
                    .catch(function () { window.alert('Vorschlaege konnten nicht geladen werden.'); });
            });
        }

        var timer = null;
        if (searchInput) {
            searchInput.addEventListener('input', function () {
                if (timer) { clearTimeout(timer); }
                timer = setTimeout(runSearch, 250);
            });
        }

        function hint(text) {
            var p = document.createElement('p');
            p.className = 'help';
            p.textContent = text;
            results.appendChild(p);
        }

        function runSearch() {
            results.textContent = '';
            var mib = currentMib();
            if (! mib) { hint('Bitte zuerst eine Referenz-MIB waehlen.'); return; }
            var q = searchInput.value.trim();
            if (q.length < 2) { return; }

            fetch(objectsUrl.replace('__MIB__', mib) + '?q=' + encodeURIComponent(q), { credentials: 'same-origin', headers: { 'Accept': 'application/json' } })
                .then(function (r) { return r.json(); })
                .then(function (data) { renderResults(data.objects || []); })
                .catch(function () { hint('Suche fehlgeschlagen.'); });
        }

        function renderResults(objects) {
            results.textContent = '';
            if (! objects.length) { hint('Keine Treffer.'); return; }

            var box = document.createElement('div');
            box.style.maxHeight = '220px';
            box.style.overflowY = 'auto';
            box.style.marginTop = '6px';

            objects.forEach(function (o) {
                var row = document.createElement('button');
                row.type = 'button';
                row.className = 'btn btn-ghost btn-sm';
                row.style.display = 'block';
                row.style.width = '100%';
                row.style.textAlign = 'left';
                row.textContent = o.name + '  —  ' + o.oid + (o.syntax ? '  (' + o.syntax + ')' : '');
                row.addEventListener('click', function () {
                    if (! lastField) { window.alert('Bitte zuerst in ein OID-Feld klicken.'); return; }
                    lastField.value = o.oid;
                });
                box.appendChild(row);
            });

            results.appendChild(box);
        }
    })();
    </script>
    @endpush
@endsection