{% extends 'control_plane/base.html' %}

{% block title %}{{ deployment.hosted_site.slug }} · Tussilago{% endblock %}

{% block content %}
    <section class="hero-panel detail-hero">
        <div>
            <p class="eyebrow">Deployment Detail</p>
            <h2>{{ deployment.hosted_site.tenant.slug }}/{{ deployment.hosted_site.slug }}</h2>
            <p class="hero-copy">Deployment {{ deployment.id }} on localhost port {{ deployment.guest_port }}.</p>
        </div>
        <div class="hero-metrics">
            <article class="metric-card">
                <span class="metric-label">Control Plane</span>
                <strong class="status-chip status-{{ deployment.status }}">{{ deployment.get_status_display }}</strong>
            </article>
            <article class="metric-card accent-good">
                <span class="metric-label">Sentinel</span>
                <strong><a href="{{ sentinel_url }}" target="_blank" rel="noreferrer">Open</a></strong>
            </article>
        </div>
    </section>
    <section class="panel-grid two-up">
        <article class="panel-card"
                 data-health-panel
                 data-health-endpoint="{% url 'control_plane:deployment-health' deployment.id %}">
            <div class="panel-header">
                <div>
                    <p class="eyebrow">Live Health</p>
                    <h3>Sentinel probe</h3>
                </div>
                <button class="button-link subtle" type="button" data-health-refresh>Refresh</button>
            </div>
            <div class="health-strip">
                <span class="status-chip health-{{ health_probe.status }}"
                      data-health-badge>{{ health_probe.label }}</span>
                <span class="muted-copy" data-health-stamp>{{ health_probe.checked_at }}</span>
            </div>
            <p class="muted-copy" data-health-detail>
                {% if health_probe.error %}
                    {{ health_probe.error }}
                {% elif health_probe.ok %}
                    Sentinel responded with healthy payload.
                {% else %}
                    Waiting for a healthy sentinel response.
                {% endif %}
            </p>
            <pre class="log-output compact-log" data-health-json>{% if health_probe.payload %}{{ health_probe.payload }}{% elif health_probe.error %}{{ health_probe.error }}{% else %}No payload yet.{% endif %}</pre>
        </article>
        <article class="panel-card">
            <div class="panel-header">
                <div>
                    <p class="eyebrow">Facts</p>
                    <h3>Deployment metadata</h3>
                </div>
            </div>
            <dl class="facts-grid">
                <div>
                    <dt>Sentinel URL</dt>
                    <dd>
                        {{ sentinel_url }}
                    </dd>
                </div>
                <div>
                    <dt>Idempotency Key</dt>
                    <dd>
                        {{ deployment.idempotency_key }}
                    </dd>
                </div>
                <div>
                    <dt>Created</dt>
                    <dd>
                        {{ deployment.created_at|date:'Y-m-d H:i:s' }}
                    </dd>
                </div>
                <div>
                    <dt>Started</dt>
                    <dd>
                        {{ deployment.started_at|default:'-' }}
                    </dd>
                </div>
                <div>
                    <dt>Finished</dt>
                    <dd>
                        {{ deployment.finished_at|default:'-' }}
                    </dd>
                </div>
                <div>
                    <dt>Admin</dt>
                    <dd>
                        <a href="{% url 'admin:control_plane_deployment_change' deployment.id %}">Open admin change form</a>
                    </dd>
                </div>
            </dl>
            {% if deployment.last_error %}
                <section class="error-panel top-gap">
                    <h4>Last Error</h4>
                    <pre>{{ deployment.last_error }}</pre>
                </section>
            {% endif %}
        </article>
    </section>
    <section class="panel-grid two-up">
        <article class="panel-card">
            <div class="panel-header">
                <div>
                    <p class="eyebrow">Runtime Services</p>
                    <h3>Database and cache state</h3>
                </div>
            </div>
            <div class="service-grid">
                {% for runtime_service in runtime_services %}
                    <article class="service-card">
                        <span class="service-pill status-{{ runtime_service.status }}">{{ runtime_service.kind }}</span>
                        <h4>{{ runtime_service.container_name }}</h4>
                        <p class="muted-copy">{{ runtime_service.hostname }}:{{ runtime_service.internal_port }}</p>
                        <p class="muted-copy">Control plane status: {{ runtime_service.status }}</p>
                    </article>
                {% empty %}
                    <p class="muted-copy">No runtime services recorded yet.</p>
                {% endfor %}
            </div>
        </article>
        <article class="panel-card">
            <div class="panel-header">
                <div>
                    <p class="eyebrow">Diagnostics Snapshot</p>
                    <h3>Persisted pod state and logs</h3>
                </div>
            </div>
            {% if diagnostics %}
                <dl class="facts-grid compact-grid">
                    <div>
                        <dt>Captured At</dt>
                        <dd>
                            {{ diagnostics.captured_at|default:'-' }}
                        </dd>
                    </div>
                    <div>
                        <dt>Pod</dt>
                        <dd>
                            {{ diagnostics.pod.name|default:'-' }}
                        </dd>
                    </div>
                    <div>
                        <dt>Pod Status</dt>
                        <dd>
                            {{ diagnostics.pod.status|default:'unknown' }}
                        </dd>
                    </div>
                    <div>
                        <dt>Snapshot Error</dt>
                        <dd>
                            {{ diagnostics.capture_error|default:'-' }}
                        </dd>
                    </div>
                </dl>
                {% if diagnostics.pod.error %}<p class="muted-copy top-gap">{{ diagnostics.pod.error }}</p>{% endif %}
            {% else %}
                <p class="muted-copy">No diagnostics snapshot has been captured yet.</p>
            {% endif %}
        </article>
    </section>
    <section class="panel-grid log-grid">
        {% if diagnostics %}
            <article class="panel-card wide-card">
                <div class="panel-header">
                    <div>
                        <p class="eyebrow">Django Container</p>
                        <h3>{{ diagnostics.django.container_name }}</h3>
                    </div>
                    <span class="status-chip health-{{ diagnostics.django.container_status|default:'missing' }}">{{ diagnostics.django.container_status|default:'missing' }}</span>
                </div>
                {% if diagnostics.django.inspect_error %}<p class="muted-copy">{{ diagnostics.django.inspect_error }}</p>{% endif %}
                <pre class="log-output">{{ diagnostics.django.logs|default:'No Django logs captured yet.' }}</pre>
            </article>
            {% for runtime_service in diagnostics.runtime_services %}
                <article class="panel-card">
                    <div class="panel-header">
                        <div>
                            <p class="eyebrow">{{ runtime_service.label }}</p>
                            <h3>{{ runtime_service.container_name }}</h3>
                        </div>
                        <span class="status-chip health-{{ runtime_service.container_status|default:'missing' }}">{{ runtime_service.container_status|default:'missing' }}</span>
                    </div>
                    {% if runtime_service.inspect_error %}<p class="muted-copy">{{ runtime_service.inspect_error }}</p>{% endif %}
                    {% if runtime_service.log_error %}<p class="muted-copy">{{ runtime_service.log_error }}</p>{% endif %}
                    <pre class="log-output">{{ runtime_service.logs|default:'No logs captured yet.' }}</pre>
                </article>
            {% endfor %}
        {% endif %}
    </section>
    <script>
document.addEventListener("DOMContentLoaded", () => {
    const panel = document.querySelector("[data-health-panel]");
    if (!panel) {
        return;
    }

    const endpoint = panel.dataset.healthEndpoint;
    const badge = panel.querySelector("[data-health-badge]");
    const stamp = panel.querySelector("[data-health-stamp]");
    const detail = panel.querySelector("[data-health-detail]");
    const jsonTarget = panel.querySelector("[data-health-json]");
    const refreshButton = panel.querySelector("[data-health-refresh]");

    const renderPayload = (payload) => {
        badge.textContent = payload.label;
        badge.className = `status-chip health-${payload.status}`;
        stamp.textContent = payload.checked_at;
        detail.textContent = payload.error || (payload.ok ? "Sentinel responded with healthy payload." : "Waiting for a healthy sentinel response.");
        if (payload.payload) {
            jsonTarget.textContent = JSON.stringify(payload.payload, null, 2);
        } else if (payload.error) {
            jsonTarget.textContent = payload.error;
        } else {
            jsonTarget.textContent = "No payload yet.";
        }
    };

    const refreshHealth = async () => {
        const response = await fetch(endpoint, {headers: {"X-Requested-With": "fetch"}});
        const payload = await response.json();
        renderPayload(payload);
    };

    refreshButton.addEventListener("click", () => {
        void refreshHealth();
    });

    window.setInterval(() => {
        void refreshHealth();
    }, 8000);
});
    </script>
{% endblock content %}