{% extends "pages/sandbox_base.html" %}
{% block title %}Policy — {{ sandbox_name }} — Shoreguard{% endblock %}

{% block breadcrumb_tail %}
<li class="breadcrumb-item active">Policy</li>
{% endblock %}

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

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

    <!-- No policy -->
    <div x-show="!loading && !error && !policy" x-cloak class="text-muted py-4">
        <i class="bi bi-info-circle me-1"></i>No policy data available.
    </div>

    <!-- Policy content -->
    <template x-if="!loading && !error && policy">
        <div>
            <!-- Pin banner -->
            <div x-show="isPinned" x-cloak
                 class="alert d-flex align-items-center mb-3"
                 :class="hasPinDrift ? 'alert-danger' : 'alert-warning'">
                <i class="bi me-2 fs-5"
                   :class="hasPinDrift ? 'bi-exclamation-triangle-fill' : 'bi-lock-fill'"></i>
                <div class="flex-grow-1">
                    <strong x-text="hasPinDrift ? 'Policy drift detected' : 'Policy pinned'"></strong>
                    <template x-if="!hasPinDrift">
                        <span>
                            at version <span x-text="pinnedVersion ?? '?'"></span>
                            by <span x-text="pin?.pinned_by"></span>.
                            <span x-show="pin?.reason" class="ms-1" x-text="pin?.reason"></span>
                            <span x-show="pin?.expires_at" class="ms-1 text-muted small">
                                (expires <span x-text="pin?.expires_at ? new Date(pin.expires_at).toLocaleString() : ''"></span>)
                            </span>
                        </span>
                    </template>
                    <template x-if="hasPinDrift">
                        <span>
                            Pinned at <span class="badge text-bg-warning" x-text="'v' + pinnedVersion"></span>
                            but supervisor is loaded on
                            <span class="badge text-bg-danger" x-text="'v' + activeVersion"></span>.
                            The pinned revision has not yet been enforced on the sandbox.
                            <span x-show="pin?.reason" class="ms-1 small" x-text="'(' + pin.reason + ')'"></span>
                        </span>
                    </template>
                </div>
                <button class="btn btn-sm btn-outline-warning ms-2" @click="unpinPolicy()">
                    <i class="bi bi-unlock me-1"></i>Unpin
                </button>
            </div>

            <!-- No-pin active-version badge (when not pinned, show the active revision so operators can cross-check) -->
            <div x-show="!isPinned && activeVersion !== null" x-cloak class="mb-3">
                <span class="text-muted small">
                    <i class="bi bi-activity me-1"></i>
                    Supervisor-loaded revision:
                    <span class="badge text-bg-secondary" x-text="'v' + activeVersion"></span>
                </span>
            </div>

            <div class="d-flex justify-content-between align-items-center mb-4">
                <span class="text-muted">Policy v<span x-text="policy.version || '?'"></span></span>
                <div class="d-flex gap-2">
                    <button x-show="!isPinned" class="btn btn-outline-warning btn-sm" data-bs-toggle="modal" data-bs-target="#pinModal">
                        <i class="bi bi-lock me-1"></i>Pin
                    </button>
                    <button class="btn btn-outline-secondary btn-sm" @click="showRevisions()">
                        <i class="bi bi-clock-history me-1"></i>Revisions
                    </button>
                </div>
            </div>

            <div class="row g-3 mb-4">
                <div class="col-md-4">
                    <a :href="gwUrl('/sandboxes/' + sandboxName + '/network-policies')" class="card text-decoration-none policy-overview-card sg-card-themed h-100">
                        <div class="card-body">
                            <div class="d-flex align-items-center mb-2">
                                <i class="bi bi-globe text-info me-2"></i>
                                <h6 class="mb-0">Network Policies</h6>
                            </div>
                            <div class="fs-2 fw-bold mb-1" x-text="networkCount"></div>
                            <span class="text-muted small" x-text="networkLabel() + ' configured'"></span>
                        </div>
                        <div class="card-footer border-0 pt-0 small bg-transparent">
                            Manage rules <i class="bi bi-arrow-right"></i>
                        </div>
                    </a>
                </div>
                <div class="col-md-4">
                    <a :href="gwUrl('/sandboxes/' + sandboxName + '/filesystem-policy')" class="card text-decoration-none policy-overview-card sg-card-themed h-100">
                        <div class="card-body">
                            <div class="d-flex align-items-center mb-2">
                                <i class="bi bi-folder text-warning me-2"></i>
                                <h6 class="mb-0">Filesystem</h6>
                            </div>
                            <div class="fs-2 fw-bold mb-1" x-text="fsCount"></div>
                            <span class="text-muted small" x-text="fsLabel() + ' configured'"></span>
                        </div>
                        <div class="card-footer border-0 pt-0 small bg-transparent">
                            View paths <i class="bi bi-arrow-right"></i>
                        </div>
                    </a>
                </div>
                <div class="col-md-4">
                    <a :href="gwUrl('/sandboxes/' + sandboxName + '/process-policy')" class="card text-decoration-none policy-overview-card sg-card-themed h-100">
                        <div class="card-body">
                            <div class="d-flex align-items-center mb-2">
                                <i class="bi bi-cpu text-success me-2"></i>
                                <h6 class="mb-0">Process & Landlock</h6>
                            </div>
                            <div class="fs-2 fw-bold mb-1" x-text="procCount"></div>
                            <span class="text-muted small" x-text="procLabel() + ' configured'"></span>
                        </div>
                        <div class="card-footer border-0 pt-0 small bg-transparent">
                            View settings <i class="bi bi-arrow-right"></i>
                        </div>
                    </a>
                </div>
            </div>

            <!-- Presets -->
            <div class="row g-3 mt-0">
                <div class="col-12">
                    <a :href="gwUrl('/sandboxes/' + sandboxName + '/apply-preset')" class="card text-decoration-none policy-overview-card sg-card-themed">
                        <div class="card-body d-flex align-items-center">
                            <div class="me-3">
                                <i class="bi bi-shield-plus fs-4 text-info"></i>
                            </div>
                            <div class="flex-grow-1">
                                <h6 class="mb-0">Apply Preset</h6>
                                <span class="text-muted small">Add predefined network rules from a template</span>
                            </div>
                            <i class="bi bi-arrow-right"></i>
                        </div>
                    </a>
                </div>
            </div>

            <!-- GitOps YAML Apply -->
            <div class="row g-3 mt-0" x-data="sandboxPolicyApplyYaml">
                <div class="col-12">
                    <div class="card sg-card-themed">
                        <div class="card-body">
                            <div class="d-flex align-items-center mb-2">
                                <i class="bi bi-cloud-upload fs-4 text-primary me-3"></i>
                                <div class="flex-grow-1">
                                    <h6 class="mb-0">Apply Policy YAML</h6>
                                    <span class="text-muted small">
                                        Paste a GitOps policy document and apply it atomically. Mirrors
                                        <code>shoreguard policy apply</code> on the CLI.
                                    </span>
                                </div>
                                <button class="btn btn-sm btn-outline-secondary ms-2"
                                        @click="expanded = !expanded"
                                        :aria-expanded="expanded">
                                    <i class="bi" :class="expanded ? 'bi-chevron-up' : 'bi-chevron-down'"></i>
                                    <span x-text="expanded ? 'Collapse' : 'Expand'"></span>
                                </button>
                            </div>
                            <div x-show="expanded" x-transition class="mt-3">
                                <div class="mb-3">
                                    <label class="form-label small">YAML Document</label>
                                    <textarea class="form-control font-monospace"
                                              rows="10"
                                              x-model="yamlText"
                                              placeholder="metadata:&#10;  gateway: my-gw&#10;  sandbox: sb1&#10;policy:&#10;  network_policies:&#10;    allow-gh: {name: allow-gh, endpoints: [{host: api.github.com, port: 443}]}"></textarea>
                                </div>
                                <div class="row g-3 mb-3">
                                    <div class="col-md-6">
                                        <label class="form-label small">Apply Mode</label>
                                        <div class="btn-group w-100" role="group" aria-label="Apply mode">
                                            <input type="radio" class="btn-check" name="apply-mode" id="apply-mode-replace"
                                                   value="replace" x-model="applyMode">
                                            <label class="btn btn-outline-primary" for="apply-mode-replace">
                                                <i class="bi bi-arrow-repeat me-1"></i>Replace
                                            </label>
                                            <input type="radio" class="btn-check" name="apply-mode" id="apply-mode-merge"
                                                   value="merge" x-model="applyMode">
                                            <label class="btn btn-outline-primary" for="apply-mode-merge">
                                                <i class="bi bi-sliders me-1"></i>Merge
                                            </label>
                                        </div>
                                        <div class="form-text small" x-show="applyMode === 'merge'">
                                            Sends per-rule merge operations instead of a full rewrite.
                                            Requires gateway <strong>&ge; v0.0.33</strong> and cannot express
                                            filesystem / process / landlock changes.
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label small">Optimistic Lock (optional)</label>
                                        <input type="text" class="form-control font-monospace"
                                               x-model="expectedVersion"
                                               placeholder="sha256:... (leave empty to skip)">
                                    </div>
                                </div>
                                <div class="d-flex gap-2">
                                    <button class="btn btn-outline-primary" @click="runDryRun()" :disabled="applying || !yamlText.trim()">
                                        <span x-show="applying && dryRunMode" class="spinner-border spinner-border-sm me-1"></span>
                                        <i x-show="!(applying && dryRunMode)" class="bi bi-eye me-1"></i>Dry-Run (Diff)
                                    </button>
                                    <button class="btn btn-primary" @click="runApply()" :disabled="applying || !yamlText.trim()">
                                        <span x-show="applying && !dryRunMode" class="spinner-border spinner-border-sm me-1"></span>
                                        <i x-show="!(applying && !dryRunMode)" class="bi bi-cloud-upload me-1"></i>
                                        Apply (<span x-text="applyMode"></span>)
                                    </button>
                                </div>
                                <template x-if="lastResult">
                                    <div class="mt-3">
                                        <div class="alert" :class="lastResult.ok ? 'alert-success' : 'alert-warning'">
                                            <div class="fw-semibold" x-text="lastResult.status"></div>
                                            <div x-show="lastResult.message" class="small mt-1" x-text="lastResult.message"></div>
                                            <template x-if="lastResult.diff">
                                                <pre class="mt-2 mb-0 small" x-text="JSON.stringify(lastResult.diff, null, 2)"></pre>
                                            </template>
                                        </div>
                                    </div>
                                </template>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </template>

    <!-- Pin Policy Modal -->
    <div class="modal fade" id="pinModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content sg-modal-themed">
                <div class="modal-header border-bottom">
                    <h5 class="modal-title"><i class="bi bi-lock me-2"></i>Pin Policy</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <p class="text-muted small">
                        Pinning locks the current policy version. All modifications (rule edits, approvals, presets) will be blocked until unpinned.
                    </p>
                    <div class="mb-3">
                        <label class="form-label">Reason <span class="text-muted">(optional)</span></label>
                        <input type="text" class="form-control" x-model="pinReason" placeholder="e.g. deploy freeze, audit window">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Expires at <span class="text-muted">(optional)</span></label>
                        <input type="datetime-local" class="form-control" x-model="pinExpiresAt">
                    </div>
                </div>
                <div class="modal-footer border-0">
                    <button class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button class="btn btn-warning" @click="pinPolicy()" :disabled="pinning">
                        <span x-show="pinning" class="spinner-border spinner-border-sm me-1"></span>
                        <i x-show="!pinning" class="bi bi-lock me-1"></i>Pin Policy
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block sandbox_js %}
<script src="/static/js/policy.js"></script>
{% endblock %}