{% extends "base.html" %}

{% block title %}Dashboard · LibreSignage{% endblock %}

{% block head %}
  <link
    rel="stylesheet"
    href="{{ url_for('dashboard.static', filename='css/dashboard.css') }}"
  >
{% endblock %}

{% block content %}
  <header class="page-header">
    <div>
      <h1 class="mb-1">Fleet overview</h1>
      <p class="text-body-secondary mb-0">
        Manage content and publish it to every screen from one place.
      </p>
      <small class="text-body-secondary">
        {% if latest_publish %}
          Last publish #{{ latest_publish.id }}
          <time data-relative-time datetime="{{ latest_publish.created_at|iso_utc }}">{{
            latest_publish.created_at|utc_label
          }}</time>
          to {{ latest_publish.screen_count }}
          {{ "screen" if latest_publish.screen_count == 1 else "screens" }}.
        {% else %}
          Nothing has been published yet.
        {% endif %}
        Connected players check for updates every 2 seconds.
      </small>
      <div
        class="small text-body-secondary"
        data-fleet-status="{{ url_for('dashboard.fleet_status') }}"
        data-incident-fingerprint="{{ incident_fingerprint }}"
        hidden
      >
        <span data-fleet-state>Live</span>
        ·
        <button
          class="btn btn-link btn-sm p-0 align-baseline"
          type="button"
          data-fleet-refresh
        >Refresh now</button>
      </div>
    </div>
    {% if can_publish_all or publish_groups %}
      {% set staged_names = screens|selectattr("id", "in", unpublished_ids)|map(attribute="name")|list %}
      <div class="page-header-actions">
        {% if can_publish_all %}<form
          method="post"
          action="{{ url_for('dashboard.publish') }}"
          data-confirm="{% if unpublished_count %}Publish a new revision to all {{ screens|length }} {{ "screen" if screens|length == 1 else "screens" }}? {{ unpublished_count }} {{ "screen has" if unpublished_count == 1 else "screens have" }} staged assignment changes ({{ staged_names[:3]|join(", ") }}{% if staged_names|length > 3 %} and {{ staged_names|length - 3 }} more{% endif %}). Every connected player will refresh within seconds.{% else %}Nothing is staged. Republish the current revision to all {{ screens|length }} {{ "screen" if screens|length == 1 else "screens" }} anyway?{% endif %}"
        >
          <input name="target" type="hidden" value="all">
          <button
            class="btn btn-lg {{ 'btn-primary' if unpublished_count else 'btn-outline-secondary' }}"
            type="submit"
          >
            {% if unpublished_count %}
              Publish all {{ screens|length }} {{ "screen" if screens|length == 1 else "screens" }}
            {% else %}
              Republish all {{ screens|length }} {{ "screen" if screens|length == 1 else "screens" }}
            {% endif %}
          </button>
        </form>{% endif %}
        {% if publish_groups %}<form
          method="post"
          action="{{ url_for('dashboard.publish') }}"
          class="d-flex gap-2"
          data-confirm="Publish the selected group? Every screen in it receives the staged revision."
        >
          <input name="target" type="hidden" value="group">
          <select class="form-select" name="group_id" aria-label="Group to publish" required>
            {% for group in publish_groups %}
              {% set staged = group_unpublished_counts.get(group.id, 0) %}
              <option value="{{ group.id }}">
                {{ group.name }} · {{ staged }} staged
              </option>
            {% endfor %}
          </select>
          <button class="btn btn-primary" type="submit">Publish group</button>
        </form>{% endif %}
      </div>
    {% endif %}
  </header>

  {% if unpublished_count %}
    <div class="alert alert-warning" id="unpublished-changes" role="status">
      <strong>
        {{ unpublished_count }}
        {{ "screen has" if unpublished_count == 1 else "screens have" }}
        staged changes that players are not showing yet.
      </strong>
      <div class="mt-1">
        {% for screen in screens if screen.id in unpublished_ids %}
          <a href="#screen-card-{{ screen.id }}">{{ screen.name }}</a>{% if not loop.last %},{% endif %}
        {% endfor %}
      </div>
    </div>
  {% endif %}

  {% if emergency_overrides %}
    <section class="mb-4" id="active-emergencies" aria-labelledby="active-emergencies-heading">
      <h2 class="h4" id="active-emergencies-heading">Active emergency overrides</h2>
      <div class="vstack gap-2">
        {% for emergency in emergency_overrides %}
          <div class="alert alert-danger d-flex flex-wrap align-items-center justify-content-between gap-3 mb-0" role="alert">
            <div>
              <strong>{{ emergency.title }}</strong>
              <span class="badge text-bg-dark ms-1">{{ emergency.severity|title }}</span>
              <div>{{ emergency.message }}</div>
              <small>
                Active on {{ emergency.screen_count }}
                {{ "screen" if emergency.screen_count == 1 else "screens" }}
                since
                <time data-relative-time datetime="{{ emergency.created_at|iso_utc }}">{{
                  emergency.created_at|utc_label
                }}</time>.
              </small>
            </div>
            {% if g.user.role == "admin" %}
              <form method="post" action="{{ url_for('dashboard.restore_emergency_override', override_id=emergency.id) }}">
                <button class="btn btn-light" type="submit">
                  Restore published playback
                </button>
              </form>
            {% endif %}
          </div>
        {% endfor %}
      </div>
    </section>
  {% endif %}

  {% if alerts %}
    {% set offline_alerts = alerts|selectattr("kind", "equalto", "offline")|list %}
    {% set degraded_alerts = alerts|rejectattr("kind", "equalto", "offline")|list %}
    <details
      id="screen-alerts"
      class="dashboard-disclosure alert alert-{{ 'danger' if offline_alerts else 'warning' }}"
      {% if alerts|length <= 2 %}open{% endif %}
    >
      <summary class="fw-semibold">
        {% if offline_alerts %}
          {{ offline_alerts|length }}
          {{ "screen is" if offline_alerts|length == 1 else "screens are" }} offline
        {% endif %}
        {%- if offline_alerts and degraded_alerts %} ·{% endif %}
        {% if degraded_alerts %}
          {{ degraded_alerts|length }}
          {{ "screen is" if degraded_alerts|length == 1 else "screens are" }} degraded
        {% endif %}
      </summary>
      <ul class="list-unstyled mb-0">
        {% for alert in alerts %}
          <li class="mt-2">
            <strong>{{ alert.screen_name }} is {{ alert.kind }}.</strong>
            {% if alert.kind == "offline" %}
              No heartbeat has arrived within the configured threshold.
            {% else %}
              The player has remained unhealthy beyond the degraded threshold.
            {% endif %}
            Alert opened
            <time data-relative-time datetime="{{ alert.opened_at|iso_utc }}">{{
              alert.opened_at|utc_label
            }}</time>.
          </li>
        {% endfor %}
      </ul>
    </details>
  {% endif %}

  <section class="row g-3 mb-5" aria-label="Fleet status">
    {% for tile in status_tiles %}
      <div class="col-6 col-lg-3">
        <a
          class="dashboard-stat card card-body{% if tile.tone %} dashboard-stat-{{ tile.tone }}{% endif %}"
          href="{{ tile.target }}"
          data-stat="{{ tile.key }}"
        >
          <span class="dashboard-stat-value display-6">{{ tile.value }}</span>
          <span class="text-body-secondary">{{ tile.label }}</span>
        </a>
      </div>
    {% endfor %}
  </section>

  <div class="row g-4">
    <section class="col-xl-8" id="managed-screens">
      <div class="d-flex justify-content-between align-items-center mb-3">
        <h2 class="h4 mb-0">Managed screens</h2>
        <a
          class="btn btn-outline-primary text-nowrap"
          href="{{ url_for('dashboard.screen_inventory') }}"
        >
          Add or edit screens
        </a>
      </div>

      <p class="small text-body-secondary mb-3">
        This is a live view. Register screens, stage assignments, and edit
        details in the
        <a href="{{ url_for('dashboard.screen_inventory') }}">screen inventory</a>.
        Open each player once while it is online and wait for “Offline playlist
        ready” before deploying or rebooting that screen.
      </p>

      {% if screens %}
        <div class="row g-2 mb-3" data-screen-filter hidden>
          <div class="col-sm-6 col-lg-4">
            <label class="visually-hidden" for="screen-search">Search screens</label>
            <input
              class="form-control"
              id="screen-search"
              type="search"
              placeholder="Search screens"
              data-filter-search
            >
          </div>
          <div class="col-sm-6 col-lg-3">
            <label class="visually-hidden" for="screen-state">Filter by status</label>
            <select class="form-select" id="screen-state" data-filter-state>
              <option value="">Any status</option>
              <option value="online">Online</option>
              <option value="degraded">Degraded</option>
              <option value="offline">Offline</option>
              <option value="never">Never connected</option>
            </select>
          </div>
          <div class="col-sm-6 col-lg-3">
            <label class="visually-hidden" for="screen-group">Filter by group</label>
            <select class="form-select" id="screen-group" data-filter-group>
              <option value="">Any group</option>
              {% for group in groups %}
                <option value="{{ group.id }}">{{ group.name }}</option>
              {% endfor %}
            </select>
          </div>
          <div class="col-sm-6 col-lg-2 d-flex align-items-center">
            <div class="form-check mb-0">
              <input
                class="form-check-input"
                id="screen-staged"
                type="checkbox"
                data-filter-staged
              >
              <label class="form-check-label" for="screen-staged">
                Staged only
              </label>
            </div>
          </div>
          <div class="col-12">
            <p
              class="small text-body-secondary mb-0"
              data-filter-count
              aria-live="polite"
            ></p>
          </div>
        </div>

        <div
          class="content-empty text-center border rounded p-5 mb-3"
          data-filter-empty
          hidden
        >
          <h3 class="h5">No screens match these filters</h3>
          <p class="text-body-secondary mb-0">
            Clear the search or choose a different status.
          </p>
        </div>

        <div class="vstack gap-3">
          {% for screen in screens %}
            {% set state = health_states[screen.id] %}
            {% set report = health.get(screen.id) %}
            {% set layout_assignment = layout_assignments[screen.id] %}
            <article
              class="card card-body screen-summary-card"
              id="screen-card-{{ screen.id }}"
              data-screen-card
              data-screen-name="{{ screen.name }}"
              data-state="{{ state }}"
              data-unpublished="{{ 'true' if screen.id in unpublished_ids else 'false' }}"
              data-groups="{{ profiles[screen.id].group_ids|sort|join(',') }}"
            >
              <div class="d-flex flex-wrap justify-content-between gap-3">
                <div>
                  <div class="d-flex align-items-center gap-2">
                    <h3 class="h5 mb-0"><a class="text-reset text-decoration-none" href="{{ url_for('dashboard.screen_detail', screen_id=screen.id) }}">{{ screen.name }}</a></h3>
                    <span data-publish-badge>
                      {%- if screen.id in unpublished_ids -%}
                        <span class="badge text-bg-warning">Draft changes</span>
                      {%- elif screen.published_revision -%}
                        <span class="badge text-bg-success">Published r{{ screen.published_revision }}</span>
                      {%- endif -%}
                    </span>
                    <span
                      class="badge text-bg-{{ health_tones[screen.id] }}"
                      data-health-badge
                    >
                      {{ state|title }}
                    </span>
                  </div>
                  <small class="d-block text-body-secondary">
                    <span data-last-contact>
                      {%- if screen.last_seen_at -%}
                        Last contact
                        <time data-relative-time datetime="{{ screen.last_seen_at|iso_utc }}">{{
                          screen.last_seen_at|utc_label
                        }}</time>
                      {%- else -%}
                        Player has not connected
                      {%- endif -%}
                    </span>
                    {% if commands[screen.id] %}
                      · Latest command
                      {{ commands[screen.id][0].action|replace("_", " ") }}
                      ({{ commands[screen.id][0].status }})
                    {% endif %}
                  </small>
                  {% if report %}
                    {% if report.last_error %}
                      <small class="d-block text-danger">{{ report.last_error }}</small>
                    {% endif %}
                    <details class="dashboard-disclosure dashboard-disclosure-muted mt-1">
                      <summary>Player diagnostics</summary>
                      <small class="d-block text-body-secondary">
                        Cache:
                        {{ "ready" if report.cache_ready else "not ready" }}
                        {% if report.cache_revision %}
                          for r{{ report.cache_revision }}
                        {% endif %}
                        · Service worker:
                        {{ "active" if report.service_worker_active else "inactive" }}
                        {% if report.storage_usage is not none %}
                          · Storage {{ (report.storage_usage / 1048576)|round(1) }} MiB
                          {% if report.storage_quota %}
                            / {{ (report.storage_quota / 1048576)|round(1) }} MiB
                          {% endif %}
                        {% endif %}
                      </small>
                      {% if report.last_content_title %}
                        <small class="d-block text-body-secondary">
                          Last played: {{ report.last_content_title }}
                          {% if report.last_content_started_at %}
                            ·
                            <time data-relative-time datetime="{{ report.last_content_started_at|iso_utc }}">{{
                              report.last_content_started_at|utc_label
                            }}</time>
                          {% endif %}
                        </small>
                      {% endif %}
                    </details>
                    {% if report.cache_failure_reason == "insufficient_storage" %}
                      <div class="alert alert-danger py-2 mt-2 mb-0" role="alert">
                        Offline caching needs
                        {{ ((report.cache_required_bytes or 0) / 1048576)|round(1) }} MiB,
                        but only {{ ((report.cache_available_bytes or 0) / 1048576)|round(1) }} MiB
                        is available. Free browser storage, then choose Sync now.
                      </div>
                    {% elif report.cache_required_bytes and report.cache_available_bytes
                      and report.cache_required_bytes >= report.cache_available_bytes * 0.8 %}
                      <div class="alert alert-warning py-2 mt-2 mb-0" role="status">
                        This revision is close to the browser's available storage limit.
                      </div>
                    {% endif %}
                  {% endif %}
                </div>
                <div class="d-flex align-items-start gap-2">
                  <a
                    class="btn btn-sm btn-outline-secondary"
                    href="{{ url_for(
                      'dashboard.screen_preview',
                      screen_id=screen.id
                    ) }}"
                  >
                    Preview draft
                  </a>
                  <a
                    class="btn btn-sm btn-outline-primary"
                    href="{{ url_for(
                      'dashboard.screen_player',
                      slug=screen.slug
                    ) }}{% if g.user.role == 'admin' %}#token={{
                      screen_tokens[screen.id]
                    }}{% endif %}"
                  >
                    Open player
                  </a>
                  <div class="dropdown">
                    <button
                      class="btn btn-sm btn-outline-secondary dropdown-toggle"
                      type="button"
                      data-bs-toggle="dropdown"
                      aria-expanded="false"
                      aria-label="Actions for {{ screen.name }}"
                    >
                      Actions
                    </button>
                    <ul class="dropdown-menu dropdown-menu-end">
                      {% for action, label, confirmation in [
                        ("reload", "Restart player", ""),
                        ("sync", "Sync now", ""),
                        ("clear_cache", "Clear cache",
                         "Clear the offline cache on “" ~ screen.name ~ "”?"
                         ~ " The player cannot play offline until it re-syncs.")
                      ] %}
                        <li>
                          <form
                            method="post"
                            action="{{ url_for(
                              'dashboard.queue_remote_command',
                              screen_id=screen.id
                            ) }}"
                            {% if confirmation %}data-confirm="{{ confirmation }}"{% endif %}
                          >
                            <input name="action" type="hidden" value="{{ action }}">
                            <button class="dropdown-item" type="submit">
                              {{ label }}
                            </button>
                          </form>
                        </li>
                      {% endfor %}
                      {% if g.user.role == "admin" and native_agents[screen.id] %}
                        <li><hr class="dropdown-divider"></li>
                        <li>
                          <form
                            method="post"
                            action="{{ url_for(
                              'dashboard.queue_remote_command',
                              screen_id=screen.id
                            ) }}"
                            data-confirm="Reboot the operating system on “{{ screen.name }}”? The screen stays dark until it comes back up."
                          >
                            <input name="action" type="hidden" value="reboot_os">
                            <button class="dropdown-item text-danger" type="submit">
                              Reboot operating system
                            </button>
                          </form>
                        </li>
                      {% endif %}
                    </ul>
                  </div>
                </div>
              </div>

              <p class="small mb-0 mt-3">
                <span class="text-body-secondary">Playing:</span>
                {% if not screen.published_revision %}
                  Nothing published yet
                {% elif layout_assignment.published_layout_id %}
                  Multi-zone layout · {{ layout_assignment.published_layout_name or "unknown layout" }}
                {% elif screen.published_use_schedules %}
                  Scheduled channel
                {% elif screen.published_playlist_id %}
                  Direct playlist · {{ screen.published_playlist_name or "unknown playlist" }}
                {% else %}
                  Nothing assigned
                {% endif %}
                <a
                  class="ms-1"
                  href="{{ url_for('dashboard.screen_detail', screen_id=screen.id, tab='playback') }}"
                  aria-label="Change the assignment for {{ screen.name }}"
                >Change</a>
              </p>
            </article>
          {% endfor %}
        </div>
      {% else %}
        <div class="content-empty text-center border rounded p-5">
          <h3 class="h5">No screens registered</h3>
          <p class="text-body-secondary mb-0">
            Add a screen to create its permanent player URL.
          </p>
        </div>
      {% endif %}
    </section>

    <aside class="col-xl-4">
      {% if g.user.role == "admin" %}
        <div class="card border-danger mb-4">
          <div class="card-header text-bg-danger">
            <h2 class="h5 mb-0">Emergency override</h2>
          </div>
          <form
            method="post"
            action="{{ url_for('dashboard.activate_emergency_override') }}"
            class="card-body"
            data-target-form
          >
            <p class="small text-body-secondary">
              Immediately interrupt normal playback. You can explicitly restore
              each targeted screen to its published assignment.
            </p>

            <label class="form-label" for="emergency-title">Title</label>
            <input class="form-control mb-3" id="emergency-title" name="title" maxlength="120" required>

            <label class="form-label" for="emergency-message">Message</label>
            <textarea class="form-control mb-3" id="emergency-message" name="message" rows="4" maxlength="1000" required></textarea>

            <label class="form-label" for="emergency-severity">Severity</label>
            <select class="form-select mb-3" id="emergency-severity" name="severity" required>
              <option value="critical">Critical</option>
              <option value="warning">Warning</option>
              <option value="information">Information</option>
            </select>

            <label class="form-label" for="emergency-target">Target</label>
            <select class="form-select mb-3" id="emergency-target" name="target" data-target required>
              <option value="all">All screens</option>
              <option value="group">Screen group</option>
              <option value="selected">Selected screens</option>
            </select>

            <div class="mb-3" data-group-field hidden>
              <label class="form-label" for="emergency-group">Group</label>
              <select class="form-select" id="emergency-group" name="group_id">
                <option value="">Choose a group</option>
                {% for group in groups %}
                  <option value="{{ group.id }}">{{ group.name }} · {{ group.screen_count }}</option>
                {% endfor %}
              </select>
            </div>

            <fieldset class="mb-3" data-screen-field hidden>
              <legend class="form-label">Screens</legend>
              {% for screen in screens %}
                <div class="form-check">
                  <input class="form-check-input" id="emergency-screen-{{ screen.id }}" name="screen_ids" type="checkbox" value="{{ screen.id }}">
                  <label class="form-check-label" for="emergency-screen-{{ screen.id }}">
                    {{ screen.name }}
                  </label>
                </div>
              {% endfor %}
            </fieldset>

            <button class="btn btn-danger w-100" type="submit" {% if not screens %}disabled{% endif %}>
              Activate emergency message
            </button>
          </form>
        </div>
      {% endif %}

      <div class="card card-body">
        <h2 class="h5">Management shortcuts</h2>
        <div class="list-group list-group-flush">
          <a class="list-group-item list-group-item-action" href="{{ url_for('dashboard.screen_inventory') }}">
            Register and configure screens
          </a>
          <a class="list-group-item list-group-item-action" href="{{ url_for('content.index') }}">
            Add or remove content
          </a>
          <a class="list-group-item list-group-item-action" href="{{ url_for('content.playlists') }}">
            Build playlists
          </a>
          <a class="list-group-item list-group-item-action" href="{{ url_for('content.layouts') }}">
            Configure multi-zone layouts
          </a>
          <a class="list-group-item list-group-item-action" href="{{ url_for('content.schedules') }}">
            Configure dayparting
          </a>
        </div>
      </div>
    </aside>
  </div>
{% endblock %}

{% block scripts %}
  <script src="{{ url_for('dashboard.static', filename='js/dashboard.js') }}"></script>
  <script src="{{ url_for('dashboard.static', filename='js/fleet-status.js') }}" defer></script>
  <script src="{{ url_for('dashboard.static', filename='js/screen-filter.js') }}" defer></script>
{% endblock %}