{% extends "base.html" %}
{% block title %}{{ gateway_name }} — Shoreguard{% endblock %}

{% block breadcrumbs %}
<ol class="breadcrumb mb-0">
    <li class="breadcrumb-item"><a href="/gateways">Gateways</a></li>
    <li class="breadcrumb-item active">{{ gateway_name }}</li>
</ol>
{% endblock %}

{% block content %}
<div x-data='gatewayDetail({{ gateway_name | tojson }})' x-init="load()">
    <!-- Loading -->
    <div x-show="loading" class="text-center text-muted py-5">
        <div class="spinner-border spinner-border-sm me-2"></div>Loading gateway...
    </div>

    <!-- Error -->
    <div x-show="error" x-cloak class="alert alert-danger" x-text="error"></div>

    <!-- Not found -->
    <div x-show="!loading && !error && !gw" x-cloak class="alert alert-warning">
        Gateway "<span x-text="name"></span>" not found.
    </div>

    <!-- Gateway detail -->
    <div x-show="!loading && !error && gw" x-cloak>
        <!-- Status bar -->
        <div class="d-flex align-items-center justify-content-between mb-4 pb-3 border-bottom sg-border-sg">
            <div class="d-flex align-items-center gap-3">
                <span class="badge" :class="gwStatusBadgeClass">
                    <i class="bi me-1" :class="gwStatusIconClass"></i>
                    <span x-text="gwStatusLabelText"></span>
                </span>
                <span x-show="gwVersion" class="text-muted" x-text="'v' + gwVersion"></span>
            </div>
            <div class="d-flex gap-2">
                <button x-show="$localMode && $isAdmin && gwNotConnected" x-cloak
                        class="btn btn-outline-success btn-sm" :disabled="acting" @click="startGateway()">
                    <template x-if="acting"><span class="spinner-border spinner-border-sm me-1"></span></template>
                    <i x-show="!acting" class="bi bi-play-fill me-1"></i>Start
                </button>
                <button x-show="$localMode && $isAdmin && gwConnected" x-cloak
                        class="btn btn-outline-danger btn-sm" :disabled="acting" @click="stopGateway()">
                    <template x-if="acting"><span class="spinner-border spinner-border-sm me-1"></span></template>
                    <i x-show="!acting" class="bi bi-stop-fill me-1"></i>Stop
                </button>
                <button x-show="$localMode && $isAdmin && gwConnected" x-cloak
                        class="btn btn-outline-warning btn-sm" :disabled="acting" @click="restartGateway()">
                    <template x-if="acting"><span class="spinner-border spinner-border-sm me-1"></span></template>
                    <i x-show="!acting" class="bi bi-arrow-repeat me-1"></i>Restart
                </button>
                <button x-show="$isAdmin" x-cloak
                        class="btn btn-outline-primary btn-sm" @click="testConnection()">
                    <i class="bi bi-plug me-1"></i>Test Connection
                </button>
                <button x-show="$isAdmin" x-cloak
                        class="btn btn-outline-danger btn-sm" @click="unregister()" title="Unregister">
                    <i class="bi bi-trash"></i>
                </button>
                <button class="btn btn-outline-secondary btn-sm" @click="load()" title="Refresh">
                    <i class="bi bi-arrow-clockwise"></i>
                </button>
            </div>
        </div>

        <!-- Action output -->
        <div x-show="actionOutput" x-cloak class="mb-3">
            <div class="log-output small">
                <div class="log-line" :class="actionClass" x-html="actionOutput"></div>
            </div>
        </div>

        <!-- Quick links -->
        <div class="row g-3 mb-4">
            <div class="col">
                <a :href="gwSandboxesUrl"
                   class="btn btn-outline-secondary w-100 py-3"
                   :class="{ 'disabled': gwNotConnected }">
                    <i class="bi bi-grid me-2"></i>Sandboxes
                </a>
            </div>
            <div class="col">
                <a :href="gwProvidersUrl"
                   class="btn btn-outline-secondary w-100 py-3"
                   :class="{ 'disabled': gwNotConnected }">
                    <i class="bi bi-key me-2"></i>Providers
                </a>
            </div>
            <div class="col">
                <a :href="gwProviderProfilesUrl"
                   class="btn btn-outline-secondary w-100 py-3"
                   :class="{ 'disabled': gwNotConnected }">
                    <i class="bi bi-collection me-2"></i>Profiles
                </a>
            </div>
            <div class="col">
                <a :href="gwServicesUrl"
                   class="btn btn-outline-secondary w-100 py-3"
                   :class="{ 'disabled': gwNotConnected }">
                    <i class="bi bi-hdd-network me-2"></i>Services
                </a>
            </div>
            <div class="col">
                <a :href="gwWizardUrl"
                   class="btn btn-outline-success w-100 py-3"
                   :class="{ 'disabled': gwNotConnected }">
                    <i class="bi bi-plus-circle me-2"></i>New Sandbox
                </a>
            </div>
        </div>

        <!-- Gateway token (diagnostic, admin only) -->
        <div class="card sg-card-themed mb-4" x-show="$isAdmin" x-cloak
             x-data="gatewayToken" data-sg-min-role="admin">
            <div class="card-body">
                <h6 class="text-muted mb-2"><i class="bi bi-key me-1"></i>Gateway token (diagnostic)</h6>
                <p class="small text-muted mb-2">
                    Mints a JWT bound to <strong>ShoreGuard's</strong> own gateway identity. Useful to
                    verify token issuance against this gateway — it is <em>not</em> a token scoped to a
                    sandbox (the upstream RPC binds to the calling identity).
                </p>
                <div class="d-flex gap-2 align-items-center">
                    <button class="btn btn-outline-secondary btn-sm" @click="issue()" :disabled="busy">
                        <i class="bi bi-key me-1"></i>Issue token
                    </button>
                    <button class="btn btn-outline-secondary btn-sm" @click="refresh()" :disabled="busy">
                        <i class="bi bi-arrow-repeat me-1"></i>Refresh
                    </button>
                    <span class="small text-muted" x-show="expiresAt" x-text="expiryLabel"></span>
                </div>
                <div x-show="token" class="mt-2">
                    <textarea class="form-control form-control-sm font-monospace" rows="2" readonly x-text="token"></textarea>
                </div>
            </div>
        </div>

        <!-- Gateway details card -->
        <div class="card sg-card-themed mb-4">
            <div class="card-body">
                <!-- ── Metadata ── -->
                <fieldset class="sg-fieldset mb-3">
                    <legend class="sg-legend">Metadata</legend>
                    <div class="row g-3">
                        <div class="col-12">
                            <label class="form-label small text-muted"><i class="bi bi-card-text me-1"></i>Description</label>
                            <template x-if="$isAdmin">
                                <input type="text" class="form-control form-control-sm" x-model="metaDescription"
                                       placeholder="e.g. Production EU-West for ML team" maxlength="1000">
                            </template>
                            <template x-if="!$isAdmin">
                                <div class="form-control-plaintext small" x-text="gwDescription"></div>
                            </template>
                        </div>
                        <div class="col-12">
                            <label class="form-label small text-muted"><i class="bi bi-tags me-1"></i>Labels</label>
                            <div x-show="$notEmpty(metaLabels)" class="mb-2 d-flex flex-wrap gap-1">
                                <template x-for="lbl in metaLabels" :key="lbl.key">
                                    <span class="badge text-bg-light border d-inline-flex align-items-center gap-1">
                                        <span class="font-monospace" x-text="lbl.key"></span>
                                        <span class="text-muted">=</span>
                                        <span x-text="lbl.val"></span>
                                        <button x-show="$isAdmin" type="button"
                                                class="btn-close btn-close-sm ms-1 sg-fs-xxs"
                                                @click="removeMetaLabel(lbl.key)"></button>
                                    </span>
                                </template>
                            </div>
                            <div x-show="$isAdmin && $lenLt(metaLabels, 20)"
                                 class="input-group input-group-sm sg-mw-400">
                                <input type="text" class="form-control font-monospace" x-model="newMetaKey"
                                       placeholder="key" @keydown.enter.prevent="addMetaLabel()">
                                <span class="input-group-text">=</span>
                                <input type="text" class="form-control" x-model="newMetaVal"
                                       placeholder="value" @keydown.enter.prevent="addMetaLabel()">
                                <button class="btn btn-outline-success" type="button" @click="addMetaLabel()"
                                        :disabled="!canAddMeta">
                                    <i class="bi bi-plus"></i>
                                </button>
                            </div>
                            <span x-show="!$isAdmin && $empty(metaLabels)"
                                  class="text-muted fst-italic small">No labels</span>
                        </div>
                    </div>
                </fieldset>

                <!-- ── Connection ── -->
                <fieldset class="sg-fieldset mb-3">
                    <legend class="sg-legend">Connection</legend>
                    <table class="table table-sm table-borderless mb-0 align-middle">
                        <tbody>
                            <tr>
                                <td class="text-muted sg-w-120"><i class="bi bi-globe me-2"></i>URL</td>
                                <td>
                                    <span class="endpoint-badge px-2 py-1" x-text="gwEndpointDisplay"></span>
                                </td>
                            </tr>
                            <template x-if="gwAuthMode">
                                <tr>
                                    <td class="text-muted"><i class="bi bi-shield-check me-2"></i>Auth</td>
                                    <td x-text="gw.auth_mode"></td>
                                </tr>
                            </template>
                            <template x-if="gwRegisteredAt">
                                <tr>
                                    <td class="text-muted"><i class="bi bi-calendar-plus me-2"></i>Registered</td>
                                    <td>
                                        <span x-text="formatTimeAgo(gw.registered_at)"></span>
                                        <span class="text-muted small ms-1" x-text="'(' + new Date(gw.registered_at).toLocaleDateString(undefined, { year:'numeric', month:'short', day:'numeric' }) + ')'"></span>
                                    </td>
                                </tr>
                            </template>
                            <template x-if="gwLastSeen">
                                <tr>
                                    <td class="text-muted"><i class="bi bi-clock-history me-2"></i>Last Seen</td>
                                    <td>
                                        <span x-text="formatTimeAgo(gw.last_seen)"></span>
                                        <span class="text-muted small ms-1" x-text="'(' + new Date(gw.last_seen).toLocaleDateString(undefined, { year:'numeric', month:'short', day:'numeric' }) + ')'"></span>
                                    </td>
                                </tr>
                            </template>
                        </tbody>
                    </table>
                </fieldset>

                <!-- ── Inference (only when connected) ── -->
                <fieldset x-show="gwConnected" x-cloak class="sg-fieldset mb-3"
                          x-data="inferenceConfig" x-effect="maybeLoad(gw)">
                    <legend class="sg-legend">Inference</legend>
                    <div x-show="loading" class="text-muted small">
                        <div class="spinner-border spinner-border-sm me-2"></div>Loading provider config...
                    </div>
                    <div x-show="!loading" x-cloak>
                        <div class="row g-3 align-items-end">
                            <div class="col-md-4">
                                <label class="form-label small text-muted">Provider</label>
                                <select class="form-select form-select-sm" x-model="provider" @change="onProviderChange()">
                                    <option value="">— Select —</option>
                                    <template x-for="p in providers" :key="p.name">
                                        <option :value="p.name" x-text="p.label" :selected="$eq(p.name, provider)"></option>
                                    </template>
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label small text-muted">Model ID</label>
                                <input type="text" class="form-control form-control-sm" x-model="modelId"
                                       :placeholder="placeholder">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label small text-muted">Timeout (s)</label>
                                <input type="number" class="form-control form-control-sm"
                                       x-model.number="timeoutSecs" placeholder="0" min="0">
                            </div>
                        </div>
                        <div x-show="provider" class="mt-2 small text-muted">
                            <i class="bi bi-info-circle me-1"></i>
                            API key must be set as environment variable
                            <template x-if="$prop(currentProvider, 'env_var')">
                                <code x-text="currentProvider.env_var"></code>
                            </template>
                            on the gateway host.
                        </div>
                        <div x-show="!provider" class="mt-2 small text-warning">
                            <i class="bi bi-exclamation-triangle me-1"></i>
                            No inference provider configured. Sandboxes need a provider to run agents.
                        </div>
                    </div>
                </fieldset>

                <!-- ── Resolved inference bundle ── -->
                <fieldset x-show="gwConnected" x-cloak class="sg-fieldset mb-3"
                          x-data="inferenceBundle" x-effect="maybeLoad(gw)">
                    <legend class="sg-legend d-flex align-items-center justify-content-between">
                        <span>Resolved Inference Bundle</span>
                        <button class="btn btn-sm btn-outline-secondary" @click="reload()" :disabled="loading">
                            <i class="bi bi-arrow-clockwise"></i>
                        </button>
                    </legend>
                    <div x-show="loading" class="text-muted small">
                        <div class="spinner-border spinner-border-sm me-2"></div>Loading bundle…
                    </div>
                    <div x-show="error" x-cloak class="text-danger small" x-text="error"></div>
                    <div x-show="!loading && !error" x-cloak>
                        <div class="small text-muted mb-2">
                            Revision <code x-text="bundle.revision || '—'"></code>
                            · generated <span x-text="formatTs(bundle.generated_at_ms)"></span>
                        </div>
                        <div x-show="(bundle.routes || []).length === 0" class="small text-muted">
                            No routes in bundle.
                        </div>
                        <div x-show="(bundle.routes || []).length > 0" x-cloak class="table-responsive">
                            <table class="table table-sm table-borderless align-middle mb-0">
                                <thead class="small text-muted">
                                    <tr>
                                        <th>Route</th>
                                        <th>Provider</th>
                                        <th>Model</th>
                                        <th>Base URL</th>
                                        <th>Protocols</th>
                                        <th>Timeout</th>
                                        <th>API key</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <template x-for="r in (bundle.routes || [])" :key="r.name">
                                        <tr>
                                            <td><code x-text="r.name"></code></td>
                                            <td x-text="r.provider_type || '—'"></td>
                                            <td><code x-text="r.model_id || '—'"></code></td>
                                            <td class="text-truncate" style="max-width: 18rem"
                                                :title="r.base_url" x-text="r.base_url || '—'"></td>
                                            <td x-text="(r.protocols || []).join(', ') || '—'"></td>
                                            <td x-text="r.timeout_secs ? (r.timeout_secs + 's') : '—'"></td>
                                            <td>
                                                <span x-show="r.has_api_key" class="badge bg-success-subtle text-success-emphasis">
                                                    <i class="bi bi-shield-lock-fill me-1"></i>set
                                                </span>
                                                <span x-show="!r.has_api_key" class="text-muted">—</span>
                                            </td>
                                        </tr>
                                    </template>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </fieldset>

                <!-- ── Observability / OCSF toggle (only when connected) ── -->
                <fieldset x-show="gwConnected" x-cloak class="sg-fieldset mb-3"
                          x-data="gatewaySettings" x-effect="maybeLoad(gw)">
                    <legend class="sg-legend">Observability</legend>
                    <div x-show="loading" class="text-muted small">
                        <div class="spinner-border spinner-border-sm me-2"></div>Loading settings...
                    </div>
                    <div x-show="!loading" x-cloak>
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" id="gw-ocsf-toggle"
                                   x-model="ocsfLoggingEnabled"
                                   @change="onOcsfToggle()"
                                   :disabled="!$isAdmin || saving">
                            <label class="form-check-label" for="gw-ocsf-toggle">
                                Enable OCSF logging
                            </label>
                        </div>
                        <div class="small text-muted mt-1">
                            When enabled, the gateway streams OCSF security events
                            (network, HTTP, process, findings) alongside standard logs.
                        </div>
                    </div>
                </fieldset>

                <!-- ── Single Save button ── -->
                <div x-show="$isAdmin" x-cloak class="d-flex align-items-center gap-2 pt-2">
                    <button class="btn btn-primary btn-sm" @click="saveAll()" :disabled="saving">
                        <template x-if="saving"><span class="spinner-border spinner-border-sm me-1"></span></template>
                        <i x-show="!saving" class="bi bi-check-lg me-1"></i>Save
                    </button>
                    <span x-show="saveOutput" class="small" x-html="saveOutput"></span>
                </div>

                <!-- ── Advanced Settings (raw key-value editor) ── -->
                <fieldset x-show="gwConnected" x-cloak class="sg-fieldset mb-3 mt-3"
                          x-data="gatewayAdvancedSettings" x-effect="maybeLoad(gw)">
                    <legend class="sg-legend d-flex align-items-center">
                        <button class="btn btn-sm btn-link text-decoration-none p-0 me-2"
                                @click="expanded = !expanded">
                            <i class="bi" :class="expanded ? 'bi-chevron-down' : 'bi-chevron-right'"></i>
                        </button>
                        Advanced Settings
                        <span class="badge text-bg-secondary ms-2" x-show="!loading"
                              x-text="Object.keys(rows).length"></span>
                    </legend>
                    <div x-show="expanded" x-transition x-cloak>
                        <div class="alert alert-warning small mb-3">
                            <i class="bi bi-exclamation-triangle-fill me-1"></i>
                            Changing settings bypasses validation ShoreGuard cannot
                            perform. The gateway will reject unknown keys or invalid
                            values — the error text below will tell you which.
                        </div>
                        <div x-show="loading" class="text-muted small">
                            <div class="spinner-border spinner-border-sm me-2"></div>Loading settings…
                        </div>
                        <div x-show="!loading" x-cloak>
                            <div class="table-responsive">
                                <table class="table table-sm align-middle mb-0">
                                    <thead>
                                        <tr>
                                            <th style="width:30%">Key</th>
                                            <th>Value</th>
                                            <th style="width:1%"></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <template x-for="key in Object.keys(rows).sort()" :key="key">
                                            <tr>
                                                <td class="font-monospace small" x-text="key"></td>
                                                <td>
                                                    <input class="form-control form-control-sm font-monospace"
                                                           type="text"
                                                           x-model="rows[key].draft"
                                                           :disabled="!$isAdmin || rows[key].busy">
                                                </td>
                                                <td class="text-nowrap">
                                                    <button class="btn btn-sm btn-outline-primary me-1"
                                                            @click="saveKey(key)"
                                                            :disabled="!$isAdmin || rows[key].busy || rows[key].draft === rows[key].current">
                                                        <i class="bi bi-check-lg"></i>
                                                    </button>
                                                    <button class="btn btn-sm btn-outline-danger"
                                                            @click="deleteKey(key)"
                                                            :disabled="!$isAdmin || rows[key].busy">
                                                        <i class="bi bi-trash"></i>
                                                    </button>
                                                </td>
                                            </tr>
                                        </template>
                                        <tr>
                                            <td>
                                                <input class="form-control form-control-sm font-monospace"
                                                       type="text"
                                                       x-model="newKey"
                                                       placeholder="new.setting.key"
                                                       :disabled="!$isAdmin || adding">
                                            </td>
                                            <td>
                                                <input class="form-control form-control-sm font-monospace"
                                                       type="text"
                                                       x-model="newValue"
                                                       placeholder="value"
                                                       :disabled="!$isAdmin || adding">
                                            </td>
                                            <td class="text-nowrap">
                                                <button class="btn btn-sm btn-outline-success"
                                                        @click="addKey()"
                                                        :disabled="!$isAdmin || adding || !newKey.trim()">
                                                    <i class="bi bi-plus-lg"></i> Add
                                                </button>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div x-show="status" class="small mt-2" x-html="status"></div>
                        </div>
                    </div>
                </fieldset>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="/static/js/gateway.js"></script>
<script src="/static/js/tokens.js"></script>
{% endblock %}