{% extends "shared/frontend/base.html" %}

{% block title %}Mission Control - BMC Hub{% endblock %}

{% block extra_css %}
<style>
    :root {
        --mc-bg: #081422;
        --mc-surface: #10243a;
        --mc-surface-2: #14304d;
        --mc-border: #2c4564;
        --mc-text: #e7f2ff;
        --mc-text-muted: #9db5d2;
        --mc-accent: #0f4c75;
        --mc-accent-soft: rgba(15, 76, 117, 0.3);
        --mc-danger: #ef4444;
        --mc-warning: #f59e0b;
        --mc-success: #10b981;
    }

    body {
        background: radial-gradient(circle at 85% -10%, #1b3f63 0%, var(--mc-bg) 55%) !important;
        color: var(--mc-text);
    }

    main.container-fluid {
        max-width: 100% !important;
        padding: 0.8rem 1rem 1.1rem 1rem !important;
    }

    .mc-shell {
        display: grid;
        grid-template-rows: auto auto 1fr auto;
        gap: 0.85rem;
        min-height: calc(100vh - 95px);
    }

    /* Touch-first defaults for kiosk monitors */
    .mc-shell button,
    .mc-shell [role="button"],
    .mc-shell a.mc-case-link,
    .mc-shell a.mc-email-link,
    .mc-shell select,
    .mc-shell input[type="checkbox"],
    .mc-shell input[type="range"] {
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    .mc-shell button,
    .mc-shell select,
    .mc-shell input[type="range"] {
        min-height: 44px;
    }

    .mc-card {
        background: linear-gradient(180deg, var(--mc-surface) 0%, var(--mc-surface-2) 100%);
        border: 1px solid var(--mc-border);
        border-radius: 14px;
        padding: 0.85rem 1rem;
    }

    .mc-header {
        display: grid;
        gap: 0.7rem;
    }

    .mc-title-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        flex-wrap: wrap;
    }

    .mc-title {
        font-size: 1.5rem;
        font-weight: 800;
        letter-spacing: 0.01em;
    }

    .mc-subtle {
        color: var(--mc-text-muted);
        font-size: 0.9rem;
    }

    .mc-controls {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        flex-wrap: wrap;
    }

    .mc-controls label {
        color: var(--mc-text-muted);
        font-size: 0.85rem;
    }

    .mc-control-btn {
        border: 1px solid var(--mc-border);
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.04);
        color: var(--mc-text);
        font-weight: 700;
        font-size: 0.85rem;
        padding: 0.38rem 0.75rem;
    }

    .mc-control-btn.active {
        border-color: rgba(245, 158, 11, 0.75);
        color: #ffe2a7;
        background: rgba(245, 158, 11, 0.18);
    }

    .mc-controls input[type="checkbox"] {
        width: 18px;
        height: 18px;
        vertical-align: middle;
    }

    .mc-controls label {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
    }

    .mc-controls input[type="range"] {
        min-width: 130px;
    }

    .mc-nav {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 0.6rem;
    }

    .mc-nav.project-only {
        grid-template-columns: 1fr;
    }

    .mc-nav-btn {
        border: 1px solid var(--mc-border);
        background: rgba(255, 255, 255, 0.03);
        color: var(--mc-text);
        border-radius: 12px;
        min-height: 56px;
        font-size: 1rem;
        font-weight: 700;
        letter-spacing: 0.01em;
        transition: 0.15s ease;
        touch-action: manipulation;
    }

    .mc-nav-btn.active {
        border-color: #6db5e5;
        background: linear-gradient(180deg, rgba(31, 106, 157, 0.6), rgba(16, 55, 86, 0.7));
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    }

    .mc-nav-btn:focus-visible,
    .mc-chip:focus-visible,
    .mc-duration-btn:focus-visible {
        outline: 2px solid #9ad8ff;
        outline-offset: 2px;
    }

    .mc-filter-row {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.45rem;
    }

    .mc-chip {
        border: 1px solid var(--mc-border);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.03);
        color: var(--mc-text-muted);
        padding: 0.33rem 0.8rem;
        font-size: 0.84rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        touch-action: manipulation;
    }

    .mc-chip.active {
        color: #dff3ff;
        border-color: #77b6df;
        background: var(--mc-accent-soft);
    }

    .mc-view {
        display: none;
    }

    .mc-view.active {
        display: block;
        animation: mcFadeIn 0.2s ease;
    }

    @keyframes mcFadeIn {
        from { opacity: 0; transform: translateY(3px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .mc-view-grid {
        display: grid;
        grid-template-columns: 1.3fr 1fr;
        gap: 0.8rem;
    }

    .mc-alert-box {
        display: grid;
        gap: 0.45rem;
    }

    .mc-alert {
        display: flex;
        align-items: center;
        gap: 0.55rem;
        border-radius: 12px;
        border: 1px solid rgba(239, 68, 68, 0.58);
        background: rgba(239, 68, 68, 0.18);
        padding: 0.58rem 0.75rem;
        font-weight: 700;
    }

    .mc-alert-empty {
        color: var(--mc-text-muted);
    }

    .mc-kpis {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 0.6rem;
        margin-top: 0.8rem;
    }

    .mc-kpi {
        border: 1px solid rgba(157, 181, 210, 0.25);
        border-radius: 12px;
        padding: 0.7rem;
        background: rgba(255, 255, 255, 0.03);
    }

    .mc-kpi .label {
        color: var(--mc-text-muted);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        font-size: 0.75rem;
    }

    .mc-kpi .value {
        margin-top: 0.3rem;
        font-size: 1.7rem;
        font-weight: 800;
        line-height: 1;
    }

    .mc-kpi.warning {
        border-color: rgba(245, 158, 11, 0.55);
    }

    .mc-kpi.danger {
        border-color: rgba(239, 68, 68, 0.55);
    }

    .mc-call-hero {
        margin-top: 0.75rem;
        border-radius: 12px;
        border: 1px solid var(--mc-border);
        padding: 0.75rem;
        background: rgba(59, 130, 246, 0.11);
    }

    .mc-call-hero-title {
        font-size: 1.15rem;
        font-weight: 800;
    }

    .mc-call-hero-sub {
        color: var(--mc-text-muted);
        margin-top: 0.25rem;
    }

    .mc-environment {
        margin-top: 0.75rem;
        border-top: 1px solid rgba(157, 181, 210, 0.18);
        padding-top: 0.65rem;
    }

    .mc-environment-head {
        font-size: 0.86rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--mc-text-muted);
        margin-bottom: 0.35rem;
    }

    .mc-env-list {
        display: grid;
        gap: 0.35rem;
    }

    .mc-env-row {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 0.6rem;
        border-bottom: 1px solid rgba(157, 181, 210, 0.12);
        padding: 0.26rem 0;
    }

    .mc-env-row:last-child {
        border-bottom: 0;
    }

    .mc-env-name {
        font-size: 0.9rem;
        font-weight: 600;
    }

    .mc-env-value {
        font-size: 1.05rem;
        font-weight: 800;
        color: #c8e9ff;
    }

    .mc-env-meta {
        color: var(--mc-text-muted);
        font-size: 0.72rem;
    }

    .mc-camera-card {
        display: grid;
        gap: 0.6rem;
    }

    .mc-camera-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.6rem;
        flex-wrap: wrap;
    }

    .mc-camera-status {
        font-size: 0.78rem;
        border-radius: 999px;
        border: 1px solid var(--mc-border);
        padding: 0.2rem 0.56rem;
        color: var(--mc-text-muted);
        background: rgba(255, 255, 255, 0.04);
    }

    .mc-camera-status.live {
        color: #c0ffe1;
        border-color: rgba(16, 185, 129, 0.6);
        background: rgba(16, 185, 129, 0.14);
    }

    .mc-camera-status.connecting {
        color: #ffe6b4;
        border-color: rgba(245, 158, 11, 0.55);
        background: rgba(245, 158, 11, 0.14);
    }

    .mc-camera-status.error {
        color: #ffd0d0;
        border-color: rgba(239, 68, 68, 0.55);
        background: rgba(239, 68, 68, 0.14);
    }

    .mc-camera-preview {
        border: 1px solid var(--mc-border);
        border-radius: 12px;
        overflow: hidden;
        background: #000;
        min-height: 190px;
    }

    .mc-camera-preview img,
    .mc-camera-preview iframe {
        width: 100%;
        min-height: 190px;
        display: block;
        border: 0;
        object-fit: contain;
    }

    .mc-camera-preview.large {
        min-height: 53vh;
    }

    .mc-camera-preview.large img,
    .mc-camera-preview.large iframe {
        min-height: 53vh;
    }

    .mc-camera-preview.empty {
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--mc-text-muted);
        background: rgba(0, 0, 0, 0.35);
        padding: 1rem;
        text-align: center;
    }

    .mc-motion-pill {
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        font-size: 0.78rem;
        border-radius: 999px;
        border: 1px solid rgba(245, 158, 11, 0.5);
        background: rgba(245, 158, 11, 0.15);
        color: #ffdb9f;
        padding: 0.23rem 0.55rem;
    }

    .mc-motion-pill.hidden {
        display: none;
    }

    .mc-duration-row {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.45rem;
    }

    .mc-duration-label {
        color: var(--mc-text-muted);
        font-size: 0.84rem;
    }

    .mc-duration-btn {
        border: 1px solid var(--mc-border);
        border-radius: 9px;
        background: rgba(255, 255, 255, 0.03);
        color: var(--mc-text);
        padding: 0.32rem 0.62rem;
        font-size: 0.84rem;
        font-weight: 700;
        min-width: 54px;
        touch-action: manipulation;
    }

    .mc-duration-btn.active {
        border-color: #7ec2ef;
        background: var(--mc-accent-soft);
    }

    .mc-table {
        width: 100%;
    }

    .mc-row,
    .mc-row-head {
        display: grid;
        grid-template-columns: 2fr 1fr 1fr 1fr;
        gap: 0.55rem;
        padding: 0.5rem 0;
        border-bottom: 1px solid rgba(157, 181, 210, 0.15);
        align-items: center;
    }

    .mc-row-head {
        color: var(--mc-text-muted);
        text-transform: uppercase;
        font-size: 0.72rem;
        letter-spacing: 0.05em;
        font-weight: 700;
    }

    .mc-row:last-child {
        border-bottom: 0;
    }

    .mc-row-click {
        cursor: pointer;
    }

    .mc-row-click:hover {
        border-color: rgba(157, 181, 210, 0.35);
        background: rgba(255, 255, 255, 0.02);
    }

    .mc-project-detail {
        margin-top: 0.9rem;
        border: 1px solid var(--mc-border);
        border-radius: 12px;
        padding: 0.75rem;
        background: rgba(5, 15, 35, 0.45);
    }

    .mc-project-detail.hidden {
        display: none;
    }

    .mc-project-list.hidden {
        display: none;
    }

    .mc-project-detail-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.6rem;
        margin-bottom: 0.6rem;
    }

    .mc-project-kpis {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 0.45rem;
        margin-bottom: 0.7rem;
    }

    .mc-project-kpi {
        border: 1px solid var(--mc-border);
        border-radius: 10px;
        padding: 0.45rem 0.55rem;
        background: rgba(255, 255, 255, 0.03);
    }

    .mc-project-kpi .label {
        color: var(--mc-text-muted);
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .mc-project-kpi .value {
        font-size: 1rem;
        font-weight: 800;
    }

    .mc-kanban {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.55rem;
    }

    .mc-kanban-col {
        border: 1px solid var(--mc-border);
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.02);
        padding: 0.45rem;
        min-height: 140px;
    }

    .mc-kanban-col h6 {
        margin: 0 0 0.45rem 0;
        font-size: 0.78rem;
        color: var(--mc-text-muted);
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .mc-kanban-card {
        border: 1px solid rgba(157, 181, 210, 0.2);
        border-radius: 8px;
        padding: 0.38rem 0.45rem;
        margin-bottom: 0.35rem;
        background: rgba(255, 255, 255, 0.03);
    }

    .mc-kanban-title {
        font-size: 0.84rem;
        font-weight: 700;
    }

    .mc-kanban-meta {
        color: var(--mc-text-muted);
        font-size: 0.72rem;
    }

    .mc-case-title {
        font-weight: 700;
        font-size: 0.93rem;
        line-height: 1.2;
    }

    .mc-case-sub {
        color: var(--mc-text-muted);
        font-size: 0.78rem;
    }

    .mc-case-link,
    .mc-email-link {
        color: var(--mc-text);
        text-decoration: none;
        border-bottom: 1px solid transparent;
    }

    .mc-case-link:hover,
    .mc-email-link:hover {
        color: #d9eeff;
        border-bottom-color: rgba(126, 194, 239, 0.6);
    }

    .mc-email-list {
        margin-top: 1rem;
        border-top: 1px solid rgba(157, 181, 210, 0.18);
        padding-top: 0.8rem;
    }

    .mc-email-row {
        display: grid;
        grid-template-columns: 1.5fr 1fr 1fr;
        gap: 0.5rem;
        align-items: center;
        padding: 0.45rem 0;
        border-bottom: 1px solid rgba(157, 181, 210, 0.14);
    }

    .mc-email-row:last-child {
        border-bottom: 0;
    }

    .mc-badge {
        display: inline-flex;
        align-items: center;
        border-radius: 999px;
        border: 1px solid var(--mc-border);
        background: rgba(255, 255, 255, 0.04);
        padding: 0.2rem 0.55rem;
        font-size: 0.75rem;
        color: var(--mc-text-muted);
    }

    .mc-feed {
        max-height: 25vh;
        overflow: auto;
        display: grid;
        gap: 0.55rem;
    }

    .mc-feed-item {
        border-bottom: 1px solid rgba(157, 181, 210, 0.14);
        padding-bottom: 0.45rem;
    }

    .mc-feed-item:last-child {
        border-bottom: 0;
        padding-bottom: 0;
    }

    .mc-day-tabs {
        display: flex;
        gap: 0.45rem;
        flex-wrap: wrap;
        margin-bottom: 0.72rem;
    }

    .mc-day-tab {
        border: 1px solid var(--mc-border);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.03);
        color: var(--mc-text-muted);
        font-size: 0.82rem;
        font-weight: 700;
        padding: 0.3rem 0.78rem;
        touch-action: manipulation;
    }

    .mc-day-tab.active {
        color: #dff3ff;
        border-color: #77b6df;
        background: var(--mc-accent-soft);
    }

    .mc-day-pane {
        display: none;
    }

    .mc-day-pane.active {
        display: block;
    }

    .mc-day-case-card {
        border: 1px solid rgba(157, 181, 210, 0.2);
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.03);
        padding: 0.65rem 0.72rem;
        margin-bottom: 0.55rem;
    }

    .mc-day-case-title {
        font-weight: 800;
        font-size: 0.95rem;
    }

    .mc-day-case-sub {
        color: var(--mc-text-muted);
        font-size: 0.78rem;
        margin-top: 0.12rem;
    }

    .mc-day-case-desc {
        margin-top: 0.4rem;
        font-size: 0.85rem;
        color: #d9ebff;
        line-height: 1.25;
    }

    .mc-day-assign-row {
        margin-top: 0.5rem;
        display: grid;
        grid-template-columns: 1fr 1fr auto;
        gap: 0.45rem;
        align-items: center;
    }

    .mc-day-select {
        border: 1px solid var(--mc-border);
        border-radius: 9px;
        background: rgba(255, 255, 255, 0.03);
        color: var(--mc-text);
        padding: 0.36rem 0.5rem;
        font-size: 0.82rem;
    }

    .mc-day-btn {
        border: 1px solid rgba(126, 194, 239, 0.45);
        border-radius: 9px;
        background: rgba(15, 76, 117, 0.45);
        color: #dff3ff;
        font-size: 0.81rem;
        font-weight: 700;
        padding: 0.35rem 0.62rem;
        white-space: nowrap;
        touch-action: manipulation;
    }

    @media (pointer: coarse) {
        .mc-shell {
            gap: 1rem;
        }

        .mc-card {
            padding: 1rem 1.1rem;
        }

        .mc-title {
            font-size: 1.8rem;
        }

        .mc-subtle {
            font-size: 1rem;
        }

        .mc-controls {
            gap: 1rem;
        }

        .mc-controls label {
            font-size: 0.95rem;
        }

        .mc-controls input[type="checkbox"] {
            width: 22px;
            height: 22px;
        }

        .mc-controls input[type="range"] {
            min-width: 180px;
            height: 28px;
        }

        .mc-shell button,
        .mc-shell select,
        .mc-shell input[type="range"],
        .mc-shell a.mc-case-link,
        .mc-shell a.mc-email-link {
            min-height: 50px;
        }

        .mc-nav-btn {
            min-height: 72px;
            font-size: 1.14rem;
            border-radius: 14px;
        }

        .mc-day-tab,
        .mc-chip {
            min-height: 44px;
            font-size: 0.96rem;
            padding: 0.5rem 1rem;
        }

        .mc-day-select {
            min-height: 48px;
            font-size: 0.95rem;
        }

        .mc-day-btn,
        .mc-duration-btn {
            min-height: 46px;
            font-size: 0.95rem;
            padding: 0.45rem 0.8rem;
        }

        .mc-case-link,
        .mc-email-link {
            display: inline-flex;
            align-items: center;
            padding: 0.2rem 0;
        }

        .mc-case-title,
        .mc-day-case-title {
            font-size: 1.05rem;
        }

        .mc-case-sub,
        .mc-day-case-sub,
        .mc-feed-meta {
            font-size: 0.9rem;
        }
    }

    .mc-day-btn:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }

    .mc-day-agents {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.65rem;
    }

    .mc-agent-card {
        border: 1px solid rgba(157, 181, 210, 0.22);
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.03);
        padding: 0.62rem 0.7rem;
    }

    .mc-agent-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.4rem;
        margin-bottom: 0.45rem;
    }

    .mc-agent-name {
        font-size: 0.9rem;
        font-weight: 800;
    }

    .mc-agent-metrics {
        display: flex;
        gap: 0.32rem;
        flex-wrap: wrap;
        margin-bottom: 0.45rem;
    }

    .mc-day-mini {
        font-size: 0.72rem;
        padding: 0.17rem 0.42rem;
    }

    .mc-day-mini.alert {
        border-color: rgba(239, 68, 68, 0.5);
        color: #ffd0d0;
    }

    .mc-day-mini.warn {
        border-color: rgba(245, 158, 11, 0.5);
        color: #ffdb9f;
    }

    .mc-day-agent-cases {
        display: grid;
        gap: 0.32rem;
        max-height: 220px;
        overflow: auto;
    }

    .mc-day-agent-case {
        border-radius: 10px;
        border: 1px solid rgba(157, 181, 210, 0.18);
        background: rgba(255, 255, 255, 0.02);
        padding: 0.4rem 0.5rem;
        font-size: 0.8rem;
    }

    .mc-feed-title {
        font-weight: 700;
        font-size: 0.9rem;
    }

    .mc-feed-meta {
        color: var(--mc-text-muted);
        font-size: 0.79rem;
    }

    .mc-camera-stage.is-spotlight {
        border: 2px solid rgba(245, 158, 11, 0.62);
        border-radius: 14px;
        box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.18);
        padding: 0.5rem;
        animation: mcPulse 0.8s ease;
    }

    .mc-camera-preview.mc-spotlight-active {
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: min(94vw, 1260px);
        min-height: min(78vh, 900px);
        z-index: 3200;
        border: 2px solid rgba(245, 158, 11, 0.62);
        box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.18), 0 20px 60px rgba(0, 0, 0, 0.55);
        animation: mcPulse 0.2s ease;
    }

    .mc-camera-preview.mc-spotlight-active img,
    .mc-camera-preview.mc-spotlight-active iframe {
        min-height: min(78vh, 900px);
    }

    @keyframes mcPulse {
        from { transform: scale(0.99); }
        to { transform: scale(1); }
    }

    @media (max-width: 1300px) {
        .mc-view-grid {
            grid-template-columns: 1fr;
        }

        .mc-kpis {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .mc-row,
        .mc-row-head {
            grid-template-columns: 1.7fr 1fr 1fr 1fr;
        }

        .mc-day-agents {
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 900px) {
        .mc-nav {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .mc-camera-preview.mc-spotlight-active {
            width: 96vw;
            min-height: min(70vh, 720px);
        }

        .mc-camera-preview.mc-spotlight-active img,
        .mc-camera-preview.mc-spotlight-active iframe {
            min-height: min(70vh, 720px);
        }

        .mc-day-assign-row {
            grid-template-columns: 1fr;
        }

        .mc-email-row {
            grid-template-columns: 1fr;
        }

        .mc-row,
        .mc-row-head {
            grid-template-columns: 1fr;
            gap: 0.2rem;
        }

        .mc-row-head {
            display: none;
        }

        .mc-kanban {
            grid-template-columns: 1fr;
        }
    }
</style>
{% endblock %}

{% block content %}
{% set project_only = mission_project_only | default(false) %}
<div class="mc-shell">
    <section class="mc-card mc-header">
        <div class="mc-title-row">
            <div>
                <div class="mc-title">{% if project_only %}Projekt View{% else %}Mission Control{% endif %}</div>
                <div class="mc-subtle" id="connectionState">{% if project_only %}Projektoversigt opdateres live{% else %}Forbinder...{% endif %}</div>
            </div>
            <div class="mc-subtle" id="idleState">Auto reset: 10s inaktivitet</div>
        </div>

        {% if not project_only %}
        <div class="mc-controls">
            <label><input type="checkbox" id="soundEnabledToggle" checked> Lyd aktiv</label>
            <label>Lydniveau <input type="range" id="soundVolume" min="0" max="100" value="70"></label>
            <button type="button" class="mc-control-btn" id="pauseAutoResetBtn">Pause auto reset 60 min</button>
        </div>
        {% endif %}

        <div class="mc-nav {% if project_only %}project-only{% endif %}" id="missionNav">
            {% if not project_only %}
            <button class="mc-nav-btn" type="button" data-view="overview">Overblik</button>
            <button class="mc-nav-btn" type="button" data-view="day">Dagen</button>
            <button class="mc-nav-btn" type="button" data-view="important">Vigtige sager</button>
            {% endif %}
            <button class="mc-nav-btn" type="button" data-view="project">Projekt</button>
            {% if not project_only %}
            <button class="mc-nav-btn" type="button" data-view="calls">Opkald</button>
            <button class="mc-nav-btn" type="button" data-view="camera">Kamera</button>
            {% endif %}
        </div>
    </section>

    <section>
        <div id="view-overview" class="mc-view">
            <div class="mc-view-grid">
                <div class="mc-card">
                    <h4 class="mb-2">Driftsstatus</h4>
                    <div id="alertContainer" class="mc-alert-empty">Ingen aktive driftsalarmer</div>

                    <div class="mc-kpis" id="kpiGrid"></div>

                    <div class="mc-call-hero" id="callHero">
                        <div class="mc-call-hero-title" id="callHeroTitle">Ingen aktive opkald</div>
                        <div class="mc-call-hero-sub" id="callHeroMeta">Mission overvager opkald og opdaterer live.</div>
                    </div>

                    <div class="mc-environment">
                        <div class="mc-environment-head">Temperatur sensorer</div>
                        <div id="environmentReadings" class="mc-env-list"></div>
                    </div>
                </div>

                <div class="mc-card mc-camera-card">
                    <div class="mc-camera-head">
                        <h5 class="mb-0">Kamera (startvisning)</h5>
                        <span id="cameraStreamStatusSmall" class="mc-camera-status">Ikke aktiv</span>
                    </div>
                    <div id="cameraMotionBadgeSmall" class="mc-motion-pill hidden"></div>
                    <div id="cameraPreviewSmall" class="mc-camera-preview empty">Feed er ikke aktiveret endnu.</div>
                </div>
            </div>
        </div>

        <div id="view-important" class="mc-view">
            <div class="mc-card">
                <h4 class="mb-3">Vigtige sager</h4>
                <div id="caseFilterChips" class="mc-filter-row mb-3" aria-label="Sagstype filtre"></div>
                <div class="mc-row-head">
                    <div>Sag</div>
                    <div>Type</div>
                    <div>Status</div>
                    <div>Deadline</div>
                </div>
                <div id="importantCasesList" class="mc-table"></div>

                <div class="mc-email-list">
                    <h5 class="mb-2">Seneste emails</h5>
                    <div id="recentEmailsList" class="mc-table"></div>
                </div>
            </div>
        </div>

        <div id="view-project" class="mc-view">
            <div class="mc-card">
                <h4 class="mb-2">Projekt view</h4>
                <div class="mc-subtle mb-3">Viser projekter fra projects payload med risiko, status, workload og deadlines.</div>
                <div id="projectListSection" class="mc-project-list">
                    <div class="mc-row-head">
                        <div>Projekt</div>
                        <div>Risiko</div>
                        <div>Status</div>
                        <div>Workload</div>
                        <div>Deadline</div>
                    </div>
                    <div id="projectCasesList" class="mc-table"></div>
                </div>

                <div id="projectDetailPanel" class="mc-project-detail hidden">
                    <div class="mc-project-detail-head">
                        <div>
                            <div class="mc-case-title" id="projectDetailTitle">Projektdetalje</div>
                            <div class="mc-case-sub" id="projectDetailSubtitle">Tryk på et projekt for at se mere info.</div>
                        </div>
                        <button type="button" class="mc-control-btn" id="projectBackBtn">Tilbage</button>
                    </div>
                    <div id="projectDetailKpis" class="mc-project-kpis"></div>
                    <div id="projectKanbanBoard" class="mc-kanban"></div>
                </div>
            </div>
        </div>

        <div id="view-day" class="mc-view">
            <div class="mc-card">
                <h4 class="mb-2">Dagen</h4>
                <div class="mc-subtle mb-3">Morgenmøde-overblik: nye ikke-tildelte sager og arbejdsfordeling i dag.</div>

                <div class="mc-day-tabs" id="dayTabs">
                    <button type="button" class="mc-day-tab active" data-day-tab="new_cases">Nye sager</button>
                    <button type="button" class="mc-day-tab" data-day-tab="today">Idag</button>
                </div>

                <div id="dayPane-new_cases" class="mc-day-pane active">
                    <div id="dayUnassignedList"></div>
                </div>

                <div id="dayPane-today" class="mc-day-pane">
                    <div id="dayAgentsList" class="mc-day-agents"></div>
                </div>
            </div>
        </div>

        <div id="view-calls" class="mc-view">
            <div class="mc-view-grid">
                <div class="mc-card">
                    <h4 class="mb-3">Aktive opkald</h4>
                    <div id="activeCallsList" class="mc-feed"></div>
                </div>
                <div class="mc-card">
                    <h4 class="mb-3">Deadlines pr. medarbejder</h4>
                    <div class="mc-row-head">
                        <div>Medarbejder</div>
                        <div>I dag</div>
                        <div>Overskredet</div>
                        <div></div>
                    </div>
                    <div id="deadlineTable" class="mc-table"></div>
                </div>
            </div>
        </div>

        <div id="view-camera" class="mc-view">
            <div class="mc-card mc-camera-card mc-camera-stage" id="cameraStage">
                <div class="mc-camera-head">
                    <h4 class="mb-0">Kamera spotlight</h4>
                    <span id="cameraStreamStatusLarge" class="mc-camera-status">Ikke aktiv</span>
                </div>
                <div class="mc-duration-row" id="spotlightDurationRow">
                    <span class="mc-duration-label">Spotlight varighed</span>
                    <button type="button" class="mc-duration-btn" data-seconds="10">10s</button>
                    <button type="button" class="mc-duration-btn" data-seconds="20">20s</button>
                    <button type="button" class="mc-duration-btn" data-seconds="30">30s</button>
                </div>
                <div id="cameraMotionBadgeLarge" class="mc-motion-pill hidden"></div>
                <div id="cameraPreviewLarge" class="mc-camera-preview large empty">Feed er ikke aktiveret endnu.</div>
            </div>
        </div>
    </section>

</div>

<script>
(() => {
    const initialMissionView = "{{ mission_initial_view if mission_initial_view else 'overview' }}";
    const projectOnlyMode = {{ 'true' if project_only else 'false' }};

    const kpiLabels = {
        open_cases: 'Aabne sager',
        new_cases: 'Nye sager',
        unassigned_cases: 'Uden ansvarlig',
        deadlines_today: 'Deadline i dag',
        overdue_deadlines: 'Overskredne'
    };

    const caseTypeMeta = [
        { key: 'all', label: 'Alle' },
        { key: 'ticket', label: 'Ticket' },
        { key: 'opgave', label: 'Opgave' },
        { key: 'ordre', label: 'Ordre' },
        { key: 'projekt', label: 'Projekt' },
        { key: 'service', label: 'Service' }
    ];

    const state = {
        ws: null,
        reconnectAttempts: 0,
        reconnectTimer: null,
        pollTimer: null,
        failures: 0,
        idleTimer: null,
        idlePauseTimer: null,
        idlePauseUntil: null,
        idleTimeoutMs: 10000,
        currentView: initialMissionView,
        caseFilter: 'all',
        dayTab: 'new_cases',
        preSpotlightView: null,
        cameraSpotlightTimer: null,
        spotlightTargetId: null,
        quickSpotlightSeconds: 20,
        config: {
            sound_enabled: true,
            sound_volume: 70,
            sound_events: ['incoming_call', 'uptime_down', 'critical_event'],
            kpi_visible: Object.keys(kpiLabels),
            display_queues: [],
            camera_enabled: false,
            camera_name: 'Mission Kamera',
            camera_feed_url: '',
            camera_spotlight_seconds: 20,
        },
        kpis: {},
        activeCalls: [],
        employeeDeadlines: [],
        activeAlerts: [],
        liveFeed: [],
        importantCases: [],
        projectsPayload: { summary: {}, projects: [], workload: [] },
        projects: [],
        dayUnassignedCases: [],
        dayAgentWorkloads: [],
        assignmentUsers: [],
        assignmentGroups: [],
        recentEmails: [],
        environmentReadings: [],
        cameraMotion: null,
        cameraPreviewToken: 0,
        renderedCameraTarget: null,
        renderedCameraUrl: null,
        renderedCameraMode: null,
        selectedProjectId: null,
    };

    function escapeHtml(str) {
        return String(str ?? '')
            .replaceAll('&', '&amp;')
            .replaceAll('<', '&lt;')
            .replaceAll('>', '&gt;')
            .replaceAll('"', '&quot;')
            .replaceAll("'", '&#039;');
    }

    function formatDate(value) {
        if (!value) return '-';
        const d = new Date(value);
        if (Number.isNaN(d.getTime())) return '-';
        return d.toLocaleString('da-DK');
    }

    function formatShortDate(value) {
        if (!value) return '-';
        const d = new Date(value);
        if (Number.isNaN(d.getTime())) return '-';
        return d.toLocaleDateString('da-DK');
    }

    function getCaseHref(caseId) {
        const id = Number(caseId || 0);
        if (!Number.isFinite(id) || id <= 0) return '/sag';
        return `/sag/${id}/v3`;
    }

    function normalizeTaskLane(status) {
        const value = String(status || '').trim().toLowerCase();
        if (['afsluttet', 'lukket', 'closed', 'done', 'resolved', 'completed'].includes(value)) return 'done';
        if (['i gang', 'igang', 'in_progress', 'in progress', 'doing', 'active'].includes(value)) return 'doing';
        return 'todo';
    }

    function renderOpenTodos(task) {
        const count = Number(task?.open_todo_count || 0);
        const titlesRaw = Array.isArray(task?.open_todo_titles) ? task.open_todo_titles : [];
        const titles = titlesRaw.map((item) => String(item || '').trim()).filter(Boolean);

        if (count <= 0 && !titles.length) return '';

        const visible = titles.slice(0, 3);
        const hiddenCount = Math.max(count - visible.length, 0);

        const rows = visible.map((title) => `<div>• ${escapeHtml(title)}</div>`).join('');
        const more = hiddenCount > 0 ? `<div>+${hiddenCount} flere</div>` : '';

        return `
            <div class="mc-kanban-meta" style="margin-top:6px; border-top:1px solid var(--line); padding-top:6px;">
                <strong>Undersag todo (${count})</strong>
                ${rows || '<div>-</div>'}
                ${more}
            </div>
        `;
    }

    function isIdlePauseActive() {
        return Boolean(state.idlePauseUntil && Date.now() < state.idlePauseUntil);
    }

    function setProjectDetailMode(enabled) {
        const listSection = document.getElementById('projectListSection');
        const panel = document.getElementById('projectDetailPanel');
        if (!listSection || !panel) return;

        if (enabled) {
            listSection.classList.add('hidden');
            panel.classList.remove('hidden');
        } else {
            listSection.classList.remove('hidden');
            panel.classList.add('hidden');
        }
    }

    function hideProjectDetail() {
        setProjectDetailMode(false);
        state.selectedProjectId = null;
    }

    function renderProjectDetail(detail) {
        const panel = document.getElementById('projectDetailPanel');
        const title = document.getElementById('projectDetailTitle');
        const subtitle = document.getElementById('projectDetailSubtitle');
        const kpis = document.getElementById('projectDetailKpis');
        const board = document.getElementById('projectKanbanBoard');
        if (!panel || !title || !subtitle || !kpis || !board) return;

        const tasks = Array.isArray(detail?.tasks) ? detail.tasks : [];
        const milestones = Array.isArray(detail?.milestones) ? detail.milestones : [];
        const blockers = Array.isArray(detail?.blockers) ? detail.blockers : [];

        const grouped = { todo: [], doing: [], done: [] };
        tasks.forEach((task) => {
            grouped[normalizeTaskLane(task.status)].push(task);
        });

        title.textContent = `#${Number(detail?.id || 0)} ${detail?.name || detail?.titel || 'Projekt'}`;
        subtitle.textContent = `${detail?.description || 'Ingen beskrivelse'} • Status: ${detail?.status || '-'} • Risiko: ${detail?.risk_level || 'low'} (${Number(detail?.risk_score || 0)})`;

        kpis.innerHTML = [
            { label: 'Opgaver', value: tasks.length },
            { label: 'Milepæle', value: milestones.length },
            { label: 'Blockers', value: blockers.length },
            { label: 'Deadline', value: formatShortDate(detail?.ended_at || detail?.deadline) },
        ].map((item) => `
            <div class="mc-project-kpi">
                <div class="label">${escapeHtml(item.label)}</div>
                <div class="value">${escapeHtml(String(item.value))}</div>
            </div>
        `).join('');

        const laneMeta = [
            { key: 'todo', label: 'Todo' },
            { key: 'doing', label: 'I gang' },
            { key: 'done', label: 'Lukket' },
        ];

        board.innerHTML = laneMeta.map((lane) => {
            const laneTasks = grouped[lane.key] || [];
            return `
                <div class="mc-kanban-col">
                    <h6>${escapeHtml(lane.label)} (${laneTasks.length})</h6>
                    ${laneTasks.length ? laneTasks.map((task) => `
                        <div class="mc-kanban-card">
                            <div class="mc-kanban-title">#${Number(task.id || 0)} ${escapeHtml(task.titel || task.title || 'Uden titel')}</div>
                            <div class="mc-kanban-meta">${escapeHtml(task.priority || '-')} • ${escapeHtml(formatShortDate(task.deadline))}</div>
                            ${renderOpenTodos(task)}
                        </div>
                    `).join('') : '<div class="mc-feed-meta">Ingen opgaver</div>'}
                </div>
            `;
        }).join('');

        setProjectDetailMode(true);
    }

    async function openProjectDetail(projectId) {
        const id = Number(projectId || 0);
        if (!Number.isFinite(id) || id <= 0) return;

        state.selectedProjectId = id;

        const cachedDetail = state.projectsPayload
            && state.projectsPayload.details
            && state.projectsPayload.details[String(id)];
        if (cachedDetail) {
            renderProjectDetail(cachedDetail);
            return;
        }

        try {
            const res = await fetch(`/api/v1/mission/projects/${id}`, { credentials: 'include' });
            if (!res.ok) throw new Error(`HTTP ${res.status}`);
            const detail = await res.json();
            renderProjectDetail(detail);
        } catch {
            const fallback = (state.projects || []).find((p) => Number(p.id || 0) === id);
            if (fallback) {
                renderProjectDetail({ ...fallback, tasks: [], milestones: [], blockers: [] });
            }
        }
    }

    function toOptionalInt(value) {
        const raw = String(value ?? '').trim();
        if (!raw) return null;
        const parsed = Number(raw);
        return Number.isFinite(parsed) ? parsed : null;
    }

    function truncateText(value, maxLength = 180) {
        const raw = String(value || '').trim();
        if (!raw) return '';
        if (raw.length <= maxLength) return raw;
        return `${raw.slice(0, maxLength - 1)}...`;
    }

    function getEmailHref(emailId) {
        const id = Number(emailId || 0);
        if (!Number.isFinite(id) || id <= 0) return '/emails';
        return `/emails?open=${id}`;
    }

    function updateConnectionLabel(text) {
        const el = document.getElementById('connectionState');
        if (el) el.textContent = text;
    }

    function resetIdleTimer() {
        if (isIdlePauseActive()) {
            updateIdleStateLabel();
            return;
        }

        if (state.idleTimer) {
            clearTimeout(state.idleTimer);
            state.idleTimer = null;
        }
        state.idleTimer = setTimeout(() => {
            if (isIdlePauseActive()) {
                updateIdleStateLabel();
                return;
            }
            activateView('overview');
            state.caseFilter = 'all';
            renderCaseFilterChips();
            renderImportantCases();
        }, state.idleTimeoutMs);

        updateIdleStateLabel();
    }

    function formatDurationCompact(ms) {
        const totalSeconds = Math.max(0, Math.ceil(ms / 1000));
        const minutes = Math.floor(totalSeconds / 60);
        const seconds = totalSeconds % 60;
        return `${minutes}m ${seconds}s`;
    }

    function updateIdleStateLabel() {
        const label = document.getElementById('idleState');
        const btn = document.getElementById('pauseAutoResetBtn');
        if (!label) return;

        if (isIdlePauseActive()) {
            const remaining = state.idlePauseUntil - Date.now();
            label.textContent = `Auto reset pausert: ${formatDurationCompact(remaining)} tilbage`;
            if (btn) {
                btn.classList.add('active');
                btn.textContent = 'Fjern pause';
            }
            return;
        }

        label.textContent = 'Auto reset: 10s inaktivitet';
        if (btn) {
            btn.classList.remove('active');
            btn.textContent = 'Pause auto reset 60 min';
        }
    }

    function clearIdlePause() {
        state.idlePauseUntil = null;
        if (state.idlePauseTimer) {
            clearTimeout(state.idlePauseTimer);
            state.idlePauseTimer = null;
        }
        resetIdleTimer();
    }

    function pauseAutoResetFor60Minutes() {
        state.idlePauseUntil = Date.now() + (60 * 60 * 1000);
        if (state.idleTimer) {
            clearTimeout(state.idleTimer);
            state.idleTimer = null;
        }
        if (state.idlePauseTimer) {
            clearTimeout(state.idlePauseTimer);
        }
        state.idlePauseTimer = setTimeout(() => {
            clearIdlePause();
        }, 60 * 60 * 1000);

        updateIdleStateLabel();
    }

    function toggleIdlePause() {
        if (isIdlePauseActive()) {
            clearIdlePause();
            return;
        }
        pauseAutoResetFor60Minutes();
    }

    function setCameraStatus(text, variant = '') {
        ['cameraStreamStatusSmall', 'cameraStreamStatusLarge'].forEach((id) => {
            const el = document.getElementById(id);
            if (!el) return;
            el.textContent = text;
            el.className = `mc-camera-status ${variant}`.trim();
        });
    }

    function setMotionBadge(text) {
        ['cameraMotionBadgeSmall', 'cameraMotionBadgeLarge'].forEach((id) => {
            const el = document.getElementById(id);
            if (!el) return;
            if (!text) {
                el.textContent = '';
                el.classList.add('hidden');
            } else {
                el.textContent = text;
                el.classList.remove('hidden');
            }
        });
    }

    function getCurrentCameraTargetId() {
        return state.currentView === 'camera' ? 'cameraPreviewLarge' : 'cameraPreviewSmall';
    }

    function clearOtherCameraTarget(activeTargetId) {
        const otherId = activeTargetId === 'cameraPreviewLarge' ? 'cameraPreviewSmall' : 'cameraPreviewLarge';
        const other = document.getElementById(otherId);
        if (!other) return;
        other.classList.add('empty');
        other.textContent = 'Kamera vises i den aktive visning.';
    }

    async function renderCameraPreview() {
        const targetId = getCurrentCameraTargetId();
        const target = document.getElementById(targetId);
        if (!target) return;

        clearOtherCameraTarget(targetId);

        const enabled = !!state.config.camera_enabled;
        const feedUrl = (state.config.camera_feed_url || '').trim();
        if (!enabled || !feedUrl) {
            state.renderedCameraTarget = null;
            state.renderedCameraUrl = null;
            state.renderedCameraMode = null;
            target.classList.add('empty');
            target.textContent = enabled ? 'Manglende feed URL.' : 'Feed er ikke aktiveret endnu.';
            setCameraStatus(enabled ? 'Mangler URL' : 'Ikke aktiv', enabled ? 'error' : '');
            return;
        }

        const isRtsp = feedUrl.toLowerCase().startsWith('rtsp://');
        const mode = isRtsp ? 'rtsp' : 'iframe';

        const shouldReuse = (
            state.renderedCameraTarget === targetId
            && state.renderedCameraUrl === feedUrl
            && state.renderedCameraMode === mode
        );

        if (shouldReuse) {
            return;
        }

        state.cameraPreviewToken += 1;
        const token = state.cameraPreviewToken;
        state.renderedCameraTarget = targetId;
        state.renderedCameraUrl = feedUrl;
        state.renderedCameraMode = mode;

        target.classList.remove('empty');

        if (isRtsp) {
            setCameraStatus('Forbinder RTSP...', 'connecting');
            target.innerHTML = `<img id="cameraMjpegStream" src="/api/v1/mission/camera/mjpeg?fps=5&t=${Date.now()}" alt="Mission kamera">`;

            const img = target.querySelector('#cameraMjpegStream');
            if (!img) return;

            img.onload = () => {
                if (token !== state.cameraPreviewToken) return;
                setCameraStatus('Live', 'live');
            };

            img.onerror = async () => {
                if (token !== state.cameraPreviewToken) return;
                let detail = 'Kunne ikke hente RTSP stream via proxy.';
                try {
                    const statusRes = await fetch('/api/v1/mission/camera/status', { credentials: 'include' });
                    const statusData = await statusRes.json().catch(() => ({}));
                    if (statusData?.detail) detail = statusData.detail;
                } catch {
                    // Keep generic detail on network issues.
                }
                setCameraStatus('Stream fejl', 'error');
                target.classList.add('empty');
                target.innerHTML = `<div>${escapeHtml(detail)}</div>`;
            };
            return;
        }

        target.innerHTML = `<iframe src="${escapeHtml(feedUrl)}" title="Mission kamera feed" allowfullscreen></iframe>`;
        setCameraStatus('Ekstern stream', 'live');
    }

    function playTone(type) {
        const soundEnabledToggle = document.getElementById('soundEnabledToggle');
        if (!soundEnabledToggle || !soundEnabledToggle.checked) return;
        if (!state.config.sound_events.includes(type)) return;

        const volumeSlider = document.getElementById('soundVolume');
        const volumePct = Number(volumeSlider?.value || state.config.sound_volume || 70);
        const gainValue = Math.max(0, Math.min(1, volumePct / 100));

        const AudioCtx = window.AudioContext || window.webkitAudioContext;
        if (!AudioCtx) return;

        const context = new AudioCtx();
        const now = context.currentTime;
        const isAlert = type === 'uptime_down';
        const baseFreq = isAlert ? 392 : 784;
        const overtoneFreq = isAlert ? 523.25 : 1046.5;
        const totalDuration = isAlert ? 0.9 : 0.65;
        const strikeDelay = isAlert ? 0.2 : 0.14;

        function strike(startAt, ampScale) {
            const fundamental = context.createOscillator();
            const overtone = context.createOscillator();
            const gainNode = context.createGain();

            fundamental.type = 'sine';
            overtone.type = 'triangle';
            fundamental.frequency.setValueAtTime(baseFreq, startAt);
            overtone.frequency.setValueAtTime(overtoneFreq, startAt);

            gainNode.gain.setValueAtTime(0.0001, startAt);
            gainNode.gain.exponentialRampToValueAtTime(Math.max(0.0002, gainValue * ampScale), startAt + 0.01);
            gainNode.gain.exponentialRampToValueAtTime(0.0001, startAt + totalDuration);

            fundamental.connect(gainNode);
            overtone.connect(gainNode);
            gainNode.connect(context.destination);

            fundamental.start(startAt);
            overtone.start(startAt);
            fundamental.stop(startAt + totalDuration);
            overtone.stop(startAt + totalDuration);
        }

        strike(now, isAlert ? 0.22 : 0.18);
        strike(now + strikeDelay, isAlert ? 0.16 : 0.12);

        window.setTimeout(() => {
            context.close().catch(() => {});
        }, Math.ceil((totalDuration + strikeDelay + 0.1) * 1000));
    }

    function activateView(viewKey) {
        state.currentView = viewKey;
        document.querySelectorAll('.mc-view').forEach((el) => {
            el.classList.toggle('active', el.id === `view-${viewKey}`);
        });
        document.querySelectorAll('.mc-nav-btn').forEach((btn) => {
            btn.classList.toggle('active', btn.dataset.view === viewKey);
        });

        if (viewKey !== 'important') {
            state.caseFilter = 'all';
        }
        renderCaseFilterChips();
        renderCameraPreview();
    }

    function renderCaseFilterChips() {
        const row = document.getElementById('caseFilterChips');
        if (!row) return;

        const counts = state.importantCases.reduce((acc, item) => {
            const key = (item.case_type || 'opgave').toLowerCase();
            acc[key] = (acc[key] || 0) + 1;
            return acc;
        }, {});

        row.innerHTML = caseTypeMeta.map((entry) => {
            const count = entry.key === 'all'
                ? state.importantCases.length
                : (counts[entry.key] || 0);
            const active = state.caseFilter === entry.key;
            return `
                <button
                    type="button"
                    class="mc-chip ${active ? 'active' : ''}"
                    data-filter="${entry.key}"
                >${escapeHtml(entry.label)} (${count})</button>
            `;
        }).join('');

        row.querySelectorAll('.mc-chip').forEach((btn) => {
            btn.addEventListener('click', () => {
                if (state.currentView !== 'important') {
                    activateView('important');
                }
                state.caseFilter = btn.dataset.filter || 'all';
                renderCaseFilterChips();
                renderImportantCases();
                resetIdleTimer();
            });
        });
    }

    function renderKpis() {
        const grid = document.getElementById('kpiGrid');
        if (!grid) return;

        const visible = Array.isArray(state.config.kpi_visible) && state.config.kpi_visible.length
            ? state.config.kpi_visible
            : Object.keys(kpiLabels);

        grid.innerHTML = visible.map((key) => {
            const value = Number(state.kpis[key] ?? 0);
            const variant = key === 'overdue_deadlines' && value > 0
                ? 'danger'
                : key === 'deadlines_today' && value > 0
                    ? 'warning'
                    : '';
            return `
                <div class="mc-kpi ${variant}">
                    <div class="label">${escapeHtml(kpiLabels[key] || key)}</div>
                    <div class="value">${value}</div>
                </div>
            `;
        }).join('');
    }

    function renderAlerts() {
        const container = document.getElementById('alertContainer');
        if (!container) return;

        if (!state.activeAlerts.length) {
            container.className = 'mc-alert-empty';
            container.textContent = 'Ingen aktive driftsalarmer';
            return;
        }

        container.className = 'mc-alert-box';
        container.innerHTML = state.activeAlerts.map((alert) => `
            <div class="mc-alert">
                <span>DRIFT NED</span>
                <span>${escapeHtml(alert.service_name || 'Ukendt service')}</span>
                ${alert.customer_name ? `<span class="mc-badge">${escapeHtml(alert.customer_name)}</span>` : ''}
            </div>
        `).join('');
    }

    function renderCallHero() {
        const title = document.getElementById('callHeroTitle');
        const meta = document.getElementById('callHeroMeta');
        if (!title || !meta) return;

        if (!state.activeCalls.length) {
            title.textContent = 'Ingen aktive opkald';
            meta.textContent = 'Mission overvager opkald og opdaterer live.';
            return;
        }

        const call = state.activeCalls[0];
        title.textContent = `${call.queue_name || 'Ukendt koe'} - ${call.caller_number || 'Ukendt nummer'}`;
        const parts = [];
        if (call.contact_name) parts.push(call.contact_name);
        if (call.company_name) parts.push(call.company_name);
        parts.push(`Start: ${formatDate(call.started_at)}`);
        meta.textContent = parts.join(' • ');
    }

    function renderActiveCalls() {
        const list = document.getElementById('activeCallsList');
        if (!list) return;

        if (!state.activeCalls.length) {
            list.innerHTML = '<div class="mc-feed-meta">Ingen aktive opkald</div>';
            return;
        }

        list.innerHTML = state.activeCalls.map((call) => `
            <div class="mc-feed-item">
                <div class="mc-feed-title">${escapeHtml(call.queue_name || 'Ukendt koe')} - ${escapeHtml(call.caller_number || '-')}</div>
                <div class="mc-feed-meta">
                    ${escapeHtml(call.contact_name || 'Ukendt kontakt')}
                    ${call.company_name ? ` • ${escapeHtml(call.company_name)}` : ''}
                    ${call.started_at ? ` • ${escapeHtml(formatDate(call.started_at))}` : ''}
                </div>
            </div>
        `).join('');
    }

    function renderDeadlines() {
        const table = document.getElementById('deadlineTable');
        if (!table) return;

        if (!state.employeeDeadlines.length) {
            table.innerHTML = '<div class="mc-feed-meta">Ingen deadlines i dag eller overskredne</div>';
            return;
        }

        table.innerHTML = state.employeeDeadlines.map((row) => `
            <div class="mc-row">
                <div>${escapeHtml(row.employee_name || 'Ukendt')}</div>
                <div>${Number(row.deadlines_today || 0)}</div>
                <div style="color:${Number(row.overdue_deadlines || 0) > 0 ? '#ffaaaa' : 'inherit'}">${Number(row.overdue_deadlines || 0)}</div>
                <div></div>
            </div>
        `).join('');
    }

    function renderImportantCases() {
        const list = document.getElementById('importantCasesList');
        if (!list) return;

        let rows = state.importantCases;
        if (state.caseFilter !== 'all') {
            rows = rows.filter((item) => (item.case_type || 'opgave').toLowerCase() === state.caseFilter);
        }

        if (!rows.length) {
            list.innerHTML = '<div class="mc-feed-meta">Ingen sager for det valgte filter</div>';
            return;
        }

        list.innerHTML = rows.slice(0, 80).map((item) => `
            <div class="mc-row">
                <div>
                    <a class="mc-case-link" href="${getCaseHref(item.id)}">
                        <div class="mc-case-title">#${Number(item.id || 0)} ${escapeHtml(item.titel || 'Uden titel')}</div>
                    </a>
                    <div class="mc-case-sub">${escapeHtml(item.customer_name || 'Ukendt kunde')}</div>
                </div>
                <div><span class="mc-badge">${escapeHtml(item.case_type || 'opgave')}</span></div>
                <div>${escapeHtml(item.status || '-')}</div>
                <div>${escapeHtml(formatShortDate(item.deadline))}</div>
            </div>
        `).join('');
    }

    function renderProjectCases() {
        const list = document.getElementById('projectCasesList');
        if (!list) return;

        let rows = Array.isArray(state.projects) ? state.projects.slice(0, 120) : [];
        if (!rows.length) {
            rows = (state.importantCases || [])
                .filter((item) => {
                    const template = String(item.template_key || '').trim().toLowerCase();
                    const taskType = String(item.project_task_type || '').trim().toLowerCase();
                    return template === 'projekt' || template === 'project' || taskType === 'project';
                })
                .slice(0, 120)
                .map((item) => ({
                    id: item.id,
                    name: item.titel,
                    description: item.customer_name || '',
                    status: item.status,
                    risk_level: 'low',
                    risk_score: 0,
                    open_tasks: 1,
                    open_blockers: 0,
                    ended_at: item.deadline,
                }));
        }

        if (!rows.length) {
            list.innerHTML = '<div class="mc-feed-meta">Ingen projekter fundet endnu. Opret projekt eller tilknyt projektsager.</div>';
            return;
        }

        list.innerHTML = rows.map((item) => `
            <div class="mc-row mc-row-click" data-project-id="${Number(item.id || 0)}">
                <div>
                    <div class="mc-case-title">#${Number(item.id || 0)} ${escapeHtml(item.name || item.titel || 'Uden titel')}</div>
                    <div class="mc-case-sub">${escapeHtml(item.description || item.customer_name || '')}</div>
                </div>
                <div>
                    <span class="mc-badge">${escapeHtml(item.risk_level || 'low')}</span>
                    <div class="mc-feed-meta">Score: ${Number(item.risk_score || 0)}</div>
                </div>
                <div>${escapeHtml(item.status || '-')}</div>
                <div>
                    <div>${Number(item.open_tasks || 0)} opgaver</div>
                    <div class="mc-feed-meta">${Number(item.open_blockers || 0)} blockers</div>
                </div>
                <div>${escapeHtml(formatShortDate(item.ended_at || item.deadline))}</div>
            </div>
        `).join('');

        list.querySelectorAll('.mc-row-click').forEach((el) => {
            el.addEventListener('click', () => {
                openProjectDetail(el.dataset.projectId);
                resetIdleTimer();
            });
        });
    }

    function renderRecentEmails() {
        const list = document.getElementById('recentEmailsList');
        if (!list) return;

        if (!state.recentEmails.length) {
            list.innerHTML = '<div class="mc-feed-meta">Ingen emails fundet</div>';
            return;
        }

        list.innerHTML = state.recentEmails.slice(0, 25).map((email) => `
            <div class="mc-email-row">
                <div>
                    <a class="mc-email-link" href="${getEmailHref(email.id)}">${escapeHtml(email.subject || '(Ingen emne)')}</a>
                    <div class="mc-case-sub">${escapeHtml(email.sender_name || email.sender_email || 'Ukendt afsender')}</div>
                </div>
                <div>
                    <span class="mc-badge">${escapeHtml(email.classification || 'general')}</span>
                    ${email.linked_case_id ? `<a class="mc-email-link ms-2" href="${getCaseHref(email.linked_case_id)}">SAG #${Number(email.linked_case_id)}</a>` : ''}
                </div>
                <div class="mc-feed-meta">${escapeHtml(formatDate(email.received_date))}</div>
            </div>
        `).join('');
    }

    function renderDayTabs() {
        const host = document.getElementById('dayTabs');
        if (!host) return;

        host.querySelectorAll('.mc-day-tab').forEach((btn) => {
            const key = btn.dataset.dayTab || 'new_cases';
            btn.classList.toggle('active', key === state.dayTab);
        });

        document.querySelectorAll('.mc-day-pane').forEach((pane) => {
            pane.classList.remove('active');
        });
        const activePane = document.getElementById(`dayPane-${state.dayTab}`);
        if (activePane) {
            activePane.classList.add('active');
        }
    }

    function renderDayUnassignedCases() {
        const list = document.getElementById('dayUnassignedList');
        if (!list) return;

        const rows = Array.isArray(state.dayUnassignedCases) ? state.dayUnassignedCases : [];
        if (!rows.length) {
            list.innerHTML = '<div class="mc-feed-meta">Ingen ikke-tildelte sager lige nu.</div>';
            return;
        }

        const userOptions = (state.assignmentUsers || []).map((user) => (
            `<option value="${Number(user.user_id)}">${escapeHtml(user.display_name || 'Ukendt')}</option>`
        )).join('');
        const groupOptions = (state.assignmentGroups || []).map((group) => (
            `<option value="${Number(group.id)}">${escapeHtml(group.name || 'Ukendt')}</option>`
        )).join('');

        list.innerHTML = rows.slice(0, 120).map((item) => {
            const caseId = Number(item.id || 0);
            const title = item.titel || 'Uden titel';
            const desc = truncateText(item.beskrivelse || '', 220);
            const currentUserId = Number(item.ansvarlig_bruger_id || 0);
            const currentGroupId = Number(item.assigned_group_id || 0);
            const hasUser = Number.isFinite(currentUserId) && currentUserId > 0;
            const hasGroup = Number.isFinite(currentGroupId) && currentGroupId > 0;
            const missingParts = [];
            if (!hasUser) missingParts.push('mangler tekniker');
            if (!hasGroup) missingParts.push('mangler gruppe');

            const userSelectOptions = [
                '<option value="">Tildel tekniker...</option>',
                userOptions,
            ].join('');

            const groupSelectOptions = [
                '<option value="">Tildel gruppe...</option>',
                groupOptions,
            ].join('');
            return `
                <div class="mc-day-case-card" id="dayCase-${caseId}">
                    <div class="mc-day-case-title">
                        <a class="mc-case-link" href="${getCaseHref(caseId)}">#${caseId} ${escapeHtml(title)}</a>
                    </div>
                    <div class="mc-day-case-sub">
                        ${escapeHtml(item.customer_name || 'Ukendt kunde')} • Status: ${escapeHtml(item.status || '-')} • Start: ${escapeHtml(formatShortDate(item.start_date))} • Deadline: ${escapeHtml(formatShortDate(item.deadline))}
                        ${missingParts.length ? ` • ${escapeHtml(missingParts.join(' + '))}` : ''}
                    </div>
                    ${desc ? `<div class="mc-day-case-desc">${escapeHtml(desc)}</div>` : ''}
                    <div class="mc-day-assign-row">
                        <select class="mc-day-select" id="assignUser-${caseId}">
                            ${userSelectOptions}
                        </select>
                        <select class="mc-day-select" id="assignGroup-${caseId}">
                            ${groupSelectOptions}
                        </select>
                        <button type="button" class="mc-day-btn" onclick="quickAssignCase(${caseId})">Tildel</button>
                    </div>
                </div>
            `;
        }).join('');

        rows.slice(0, 120).forEach((item) => {
            const caseId = Number(item.id || 0);
            const userSelect = document.getElementById(`assignUser-${caseId}`);
            const groupSelect = document.getElementById(`assignGroup-${caseId}`);
            const currentUserId = Number(item.ansvarlig_bruger_id || 0);
            const currentGroupId = Number(item.assigned_group_id || 0);

            if (userSelect && Number.isFinite(currentUserId) && currentUserId > 0) {
                userSelect.value = String(currentUserId);
            }
            if (groupSelect && Number.isFinite(currentGroupId) && currentGroupId > 0) {
                groupSelect.value = String(currentGroupId);
            }
        });
    }

    function renderDayAgentWorkloads() {
        const host = document.getElementById('dayAgentsList');
        if (!host) return;

        const rows = Array.isArray(state.dayAgentWorkloads) ? state.dayAgentWorkloads : [];
        if (!rows.length) {
            host.innerHTML = '<div class="mc-feed-meta">Ingen aktive agent-opgaver med start/deadline i dag eller tidligere.</div>';
            return;
        }

        host.innerHTML = rows.map((agent) => {
            const cases = Array.isArray(agent.case_list) ? agent.case_list : [];
            return `
                <div class="mc-agent-card">
                    <div class="mc-agent-head">
                        <div class="mc-agent-name">${escapeHtml(agent.assignee_name || 'Ufordelt')}</div>
                        <span class="mc-badge mc-day-mini">${Number(agent.total_cases || 0)} sager</span>
                    </div>
                    <div class="mc-agent-metrics">
                        <span class="mc-badge mc-day-mini warn">I dag: ${Number(agent.due_today_cases || 0)}</span>
                        <span class="mc-badge mc-day-mini alert">Overskredet: ${Number(agent.overdue_cases || 0)}</span>
                        <span class="mc-badge mc-day-mini">Startet: ${Number(agent.started_cases || 0)}</span>
                    </div>
                    <div class="mc-day-agent-cases">
                        ${cases.length ? cases.map((item) => `
                            <div class="mc-day-agent-case">
                                <a class="mc-case-link" href="${getCaseHref(item.id)}">#${Number(item.id || 0)} ${escapeHtml(item.titel || 'Uden titel')}</a>
                                <div class="mc-case-sub">${escapeHtml(item.customer_name || 'Ukendt kunde')} • Start: ${escapeHtml(formatShortDate(item.start_date))} • Deadline: ${escapeHtml(formatShortDate(item.deadline))}</div>
                            </div>
                        `).join('') : '<div class="mc-feed-meta">Ingen sager i listen</div>'}
                    </div>
                </div>
            `;
        }).join('');
    }

    async function quickAssignCase(caseId) {
        const id = Number(caseId || 0);
        if (!Number.isFinite(id) || id <= 0) return;

        const userSelect = document.getElementById(`assignUser-${id}`);
        const groupSelect = document.getElementById(`assignGroup-${id}`);
        const card = document.getElementById(`dayCase-${id}`);
        const button = card?.querySelector('.mc-day-btn');

        const ansvarlig_bruger_id = toOptionalInt(userSelect?.value);
        const assigned_group_id = toOptionalInt(groupSelect?.value);

        if (ansvarlig_bruger_id === null && assigned_group_id === null) {
            alert('Vælg tekniker eller gruppe først.');
            return;
        }

        const payload = {
            ansvarlig_bruger_id,
            assigned_group_id,
        };

        if (button) {
            button.disabled = true;
            button.textContent = 'Gemmer...';
        }

        try {
            const res = await fetch(`/api/v1/sag/${id}`, {
                method: 'PATCH',
                headers: { 'Content-Type': 'application/json' },
                credentials: 'include',
                body: JSON.stringify(payload),
            });

            if (!res.ok) {
                const err = await res.json().catch(() => ({}));
                throw new Error(err?.detail || `HTTP ${res.status}`);
            }

            await loadInitialState();
        } catch (error) {
            alert(`Kunne ikke tildele sag: ${error?.message || 'ukendt fejl'}`);
        } finally {
            if (button) {
                button.disabled = false;
                button.textContent = 'Tildel';
            }
        }
    }

    window.quickAssignCase = quickAssignCase;

    function renderEnvironmentReadings() {
        const container = document.getElementById('environmentReadings');
        if (!container) return;

        if (!state.environmentReadings.length) {
            container.innerHTML = '<div class="mc-feed-meta">Ingen temperaturdata endnu</div>';
            return;
        }

        container.innerHTML = state.environmentReadings.slice(0, 12).map((reading) => {
            const temp = Number(reading.temperature);
            const unit = reading.unit || '°C';
            const value = Number.isFinite(temp) ? `${temp.toFixed(1)}${unit}` : `-${unit}`;
            return `
                <div class="mc-env-row">
                    <div>
                        <div class="mc-env-name">${escapeHtml(reading.sensor_name || reading.sensor_id || 'Sensor')}</div>
                        <div class="mc-env-meta">${escapeHtml(formatDate(reading.timestamp))}</div>
                    </div>
                    <div class="mc-env-value">${escapeHtml(value)}</div>
                </div>
            `;
        }).join('');
    }

    function renderFeed() {
        const feed = document.getElementById('liveFeed');
        if (!feed) return;

        if (!state.liveFeed.length) {
            feed.innerHTML = '<div class="mc-feed-meta">Ingen events endnu</div>';
            return;
        }

        feed.innerHTML = state.liveFeed.slice(0, 20).map((event) => `
            <div class="mc-feed-item">
                <div class="mc-feed-title">${escapeHtml(event.title || event.event_type || 'Event')}</div>
                <div class="mc-feed-meta">${escapeHtml(event.event_type || 'event')} • ${escapeHtml(formatDate(event.created_at))}</div>
            </div>
        `).join('');
    }

    function applyDurationButtons() {
        const row = document.getElementById('spotlightDurationRow');
        if (!row) return;

        row.querySelectorAll('.mc-duration-btn').forEach((btn) => {
            const seconds = Number(btn.dataset.seconds || 20);
            btn.classList.toggle('active', seconds === state.quickSpotlightSeconds);
            btn.addEventListener('click', () => {
                state.quickSpotlightSeconds = seconds;
                applyDurationButtons();
                resetIdleTimer();
            });
        });
    }

    function triggerCameraSpotlight() {
        const activeTargetId = getCurrentCameraTargetId();
        const activePreview = document.getElementById(activeTargetId);
        if (!activePreview || activePreview.classList.contains('empty')) return;

        if (state.cameraSpotlightTimer) {
            clearTimeout(state.cameraSpotlightTimer);
            state.cameraSpotlightTimer = null;
        }

        if (state.spotlightTargetId && state.spotlightTargetId !== activeTargetId) {
            const prevTarget = document.getElementById(state.spotlightTargetId);
            if (prevTarget) prevTarget.classList.remove('mc-spotlight-active');
        }

        activePreview.classList.add('mc-spotlight-active');
        state.spotlightTargetId = activeTargetId;

        const durationMs = Math.max(5000, Math.min(state.quickSpotlightSeconds * 1000, 30000));
        state.cameraSpotlightTimer = setTimeout(() => {
            if (state.spotlightTargetId) {
                const target = document.getElementById(state.spotlightTargetId);
                if (target) target.classList.remove('mc-spotlight-active');
                state.spotlightTargetId = null;
            }
            state.cameraSpotlightTimer = null;
        }, durationMs);
    }

    function renderMotionBadge() {
        if (state.cameraMotion && state.cameraMotion.motion) {
            const cameraName = state.cameraMotion.camera_name || state.config.camera_name || 'Mission Kamera';
            setMotionBadge(`Bevaegelse: ${cameraName} • ${formatDate(state.cameraMotion.timestamp)}`);
            return;
        }
        setMotionBadge('');
    }

    function renderAll() {
        renderCaseFilterChips();
        renderKpis();
        renderAlerts();
        renderCallHero();
        renderActiveCalls();
        renderDeadlines();
        renderImportantCases();
        renderProjectCases();
        renderDayTabs();
        renderDayUnassignedCases();
        renderDayAgentWorkloads();
        renderRecentEmails();
        renderEnvironmentReadings();
        renderFeed();
        renderMotionBadge();
        applyDurationButtons();
        renderCameraPreview();
    }

    function applyMissionState(payload) {
        if (!payload) return;

        state.config = { ...state.config, ...(payload.config || {}) };
        state.kpis = payload.kpis || state.kpis;
        state.activeCalls = Array.isArray(payload.active_calls) ? payload.active_calls : state.activeCalls;
        state.employeeDeadlines = Array.isArray(payload.employee_deadlines) ? payload.employee_deadlines : state.employeeDeadlines;
        state.activeAlerts = Array.isArray(payload.active_alerts) ? payload.active_alerts : state.activeAlerts;
        state.liveFeed = Array.isArray(payload.live_feed) ? payload.live_feed : state.liveFeed;
        state.importantCases = Array.isArray(payload.important_cases) ? payload.important_cases : state.importantCases;
        state.projectsPayload = payload.projects && typeof payload.projects === 'object'
            ? payload.projects
            : state.projectsPayload;
        state.projects = Array.isArray(state.projectsPayload.projects)
            ? state.projectsPayload.projects
            : state.projects;
        state.dayUnassignedCases = Array.isArray(payload.day_unassigned_cases) ? payload.day_unassigned_cases : state.dayUnassignedCases;
        state.dayAgentWorkloads = Array.isArray(payload.day_agent_workloads) ? payload.day_agent_workloads : state.dayAgentWorkloads;
        state.assignmentUsers = Array.isArray(payload.assignment_users) ? payload.assignment_users : state.assignmentUsers;
        state.assignmentGroups = Array.isArray(payload.assignment_groups) ? payload.assignment_groups : state.assignmentGroups;
        state.recentEmails = Array.isArray(payload.recent_emails) ? payload.recent_emails : state.recentEmails;
        state.environmentReadings = Array.isArray(payload.environment_readings) ? payload.environment_readings : state.environmentReadings;

        const settingSeconds = Number(state.config.camera_spotlight_seconds || 20);
        if (![10, 20, 30].includes(state.quickSpotlightSeconds) && [10, 20, 30].includes(settingSeconds)) {
            state.quickSpotlightSeconds = settingSeconds;
        }

        const soundToggle = document.getElementById('soundEnabledToggle');
        const soundVolume = document.getElementById('soundVolume');
        if (soundToggle) soundToggle.checked = !!state.config.sound_enabled;
        if (soundVolume) soundVolume.value = String(state.config.sound_volume || 70);

        renderAll();
    }

    async function loadInitialState() {
        const res = await fetch('/api/v1/mission/state', { credentials: 'include' });
        if (!res.ok) throw new Error('Kunne ikke hente mission state');
        const payload = await res.json();
        applyMissionState(payload);
    }

    function startPollingFallback(intervalMs = 3000) {
        if (state.pollTimer) return;
        state.pollTimer = setInterval(async () => {
            try {
                await loadInitialState();
            } catch {
                // Poll fallback stays silent by design.
            }
        }, Math.max(1000, Number(intervalMs) || 3000));
    }

    function scheduleReconnect() {
        if (state.reconnectTimer) return;
        state.reconnectAttempts += 1;
        const delay = Math.min(30000, 1500 * state.reconnectAttempts);
        updateConnectionLabel(`Frakoblet - reconnect om ${Math.round(delay / 1000)}s`);
        state.reconnectTimer = setTimeout(() => {
            state.reconnectTimer = null;
            connectWs();
        }, delay);
    }

    function connectWs() {
        const proto = window.location.protocol === 'https:' ? 'wss' : 'ws';
        const url = `${proto}://${window.location.host}/api/v1/mission/ws`;
        state.ws = new WebSocket(url);

        state.ws.onopen = () => {
            state.reconnectAttempts = 0;
            updateConnectionLabel('Live forbindelse aktiv (WS)');
        };

        state.ws.onclose = () => {
            state.failures += 1;
            updateConnectionLabel('WS afbrudt - fallback polling aktiv');
            if (state.failures >= 12) {
                window.location.reload();
                return;
            }
            scheduleReconnect();
        };

        state.ws.onerror = () => {};

        state.ws.onmessage = (evt) => {
            try {
                const msg = JSON.parse(evt.data);
                const event = msg?.event;
                const data = msg?.data || {};

                if (event === 'mission_state') {
                    applyMissionState(data);
                    return;
                }

                if (event === 'kpi_update') {
                    state.kpis = data || state.kpis;
                    renderKpis();
                    return;
                }

                if (event === 'call_ringing') {
                    state.activeCalls = [data, ...state.activeCalls.filter((c) => c.call_id !== data.call_id)];
                    renderCallHero();
                    renderActiveCalls();
                    playTone('incoming_call');
                    return;
                }

                if (event === 'call_answered' || event === 'call_hangup') {
                    const id = data.call_id;
                    state.activeCalls = state.activeCalls.filter((c) => c.call_id !== id);
                    renderCallHero();
                    renderActiveCalls();
                    return;
                }

                if (event === 'uptime_alert') {
                    state.activeAlerts = Array.isArray(data.active_alerts) ? data.active_alerts : state.activeAlerts;
                    renderAlerts();
                    if ((data.status || '').toUpperCase() === 'DOWN') {
                        playTone('uptime_down');
                    }
                    return;
                }

                if (event === 'camera_motion') {
                    state.cameraMotion = data;
                    renderMotionBadge();
                    if (data.motion) {
                        playTone('critical_event');
                        triggerCameraSpotlight();
                    }
                    return;
                }

                if (event === 'mission_environment_temperature') {
                    if (Array.isArray(data.environment_readings)) {
                        state.environmentReadings = data.environment_readings;
                        renderEnvironmentReadings();
                    }
                    return;
                }

                if (event === 'live_feed_event') {
                    state.liveFeed = [data, ...state.liveFeed.filter((item) => item.id !== data.id)].slice(0, 20);
                    renderFeed();
                }
            } catch (error) {
                console.error('Mission message parse failed', error);
            }
        };
    }

    function bindUiEvents() {
        const pauseBtn = document.getElementById('pauseAutoResetBtn');
        if (pauseBtn) {
            pauseBtn.addEventListener('click', () => {
                toggleIdlePause();
                resetIdleTimer();
            });
        }

        document.getElementById('missionNav')?.querySelectorAll('.mc-nav-btn').forEach((btn) => {
            btn.addEventListener('click', () => {
                activateView(btn.dataset.view || 'overview');
                resetIdleTimer();
            });
        });

        document.getElementById('projectBackBtn')?.addEventListener('click', () => {
            hideProjectDetail();
            resetIdleTimer();
        });

        if (!projectOnlyMode) {
            document.getElementById('dayTabs')?.querySelectorAll('.mc-day-tab').forEach((btn) => {
                btn.addEventListener('click', () => {
                    state.dayTab = btn.dataset.dayTab || 'new_cases';
                    renderDayTabs();
                    resetIdleTimer();
                });
            });
        }

        ['pointerdown', 'keydown', 'mousemove', 'touchstart'].forEach((name) => {
            document.addEventListener(name, resetIdleTimer, { passive: true });
        });

        setInterval(updateIdleStateLabel, 1000);
    }

    document.addEventListener('DOMContentLoaded', async () => {
        bindUiEvents();
        resetIdleTimer();
        updateIdleStateLabel();

        try {
            await loadInitialState();
            updateConnectionLabel('Mission loaded');
        } catch (error) {
            updateConnectionLabel('Fejl ved initial load');
            console.error(error);
        }

        startPollingFallback(3000);
        connectWs();
    });
})();
</script>
{% endblock %}