{% extends "base_generic.html" %}
{% load custom_tags %}
{% load determine_primary %}

{% block pagetitle %}Operator Brief | Ghostwriter{% endblock %}
{% block navtitle %}Ghostwriter{% endblock %}

{% block content %}
  {% hide_quickstart request as hide_quickstart %}

  <div class="operator-dashboard">
    <header class="operator-dashboard-header">
      <div>
        <span class="operator-dashboard-eyebrow">Daily operations</span>
        <h1>Operator Brief</h1>
        <p>Assigned report work and engagement timing in one place.</p>
      </div>
      <div class="operator-dashboard-summary" aria-label="Dashboard summary">
        <span class="operator-summary-item">
          <i class="fas fa-tasks" aria-hidden="true"></i>
          {{ work_item_count }} todo item{{ work_item_count|pluralize }}
        </span>
        <span class="operator-summary-item">
          <i class="fas fa-briefcase" aria-hidden="true"></i>
          {{ dashboard_engagements|length }} engagement{{ dashboard_engagements|length|pluralize }}
        </span>
        <span class="operator-summary-date operator-data">{% now "D, M j" %}</span>
      </div>
    </header>

    {% if not hide_quickstart %}
      {% if not active_projects or not active_engagement %}
        <section class="operator-setup-guide" aria-labelledby="operator-setup-title">
          <div class="operator-setup-copy">
            <span class="operator-setup-icon" aria-hidden="true">
              <i class="fas fa-route"></i>
            </span>
            <div>
              <h2 id="operator-setup-title">Get ready to work</h2>
              <p>Complete the missing step to make Ghostwriter open directly into your current engagement.</p>
            </div>
          </div>
          <ol class="operator-setup-steps">
            <li class="{% if active_projects %}is-complete{% endif %}">
              <i class="fas {% if active_projects %}fa-check-circle{% else %}fa-circle{% endif %}" aria-hidden="true"></i>
              {% if active_projects %}
                Project assignment ready
              {% else %}
                <a href="{% url 'rolodex:projects' %}">Find your project assignment</a>
              {% endif %}
            </li>
            <li class="{% if active_engagement %}is-complete{% endif %}">
              <i class="fas {% if active_engagement %}fa-check-circle{% else %}fa-circle{% endif %}" aria-hidden="true"></i>
              {% if active_engagement %}
                Working report selected
              {% else %}
                <button type="button"
                        class="btn btn-link p-0 align-baseline"
                        data-bs-toggle="modal"
                        data-bs-target="#workingContextModal"
                        data-working-context-launcher="all">
                  Choose a working report
                </button>
              {% endif %}
            </li>
          </ol>
          <button id="hideQuickstart"
                  type="button"
                  class="btn btn-sm btn-outline-secondary operator-setup-dismiss"
                  data-csrf-token="{{ csrf_token }}">
            <i class="fas fa-times" aria-hidden="true"></i>
            Dismiss guide
          </button>
        </section>
      {% endif %}
    {% endif %}

    <div class="operator-dashboard-grid">
      <section class="operator-dashboard-panel operator-work-panel" aria-labelledby="operator-work-title">
        <header class="operator-panel-header">
          <div>
            <span class="operator-panel-kicker">Priority queue</span>
            <h2 id="operator-work-title">Your work</h2>
            <p>Report content assigned to you and still awaiting QA.</p>
          </div>
          <span class="operator-panel-count">{{ work_item_count }} todo</span>
        </header>

        {% if work_items %}
          <div class="operator-work-list">
            {% for item in work_items %}
              <a class="operator-work-item is-{{ item.kind|lower }}{% if item.is_active_report %} is-active-report{% endif %}"
                 href="{{ item.edit_url }}"
                 {% if item.severity_color %}style="--operator-severity-color: {{ item.severity_color }};"{% endif %}
                 aria-label="Edit {{ item.kind|lower }}: {{ item.title }}">
                <span class="operator-work-kind-icon" aria-hidden="true">
                  <i class="fas {{ item.kind_icon }}"></i>
                </span>
                <span class="operator-work-content">
                  <span class="operator-work-labels">
                    <span class="operator-work-kind">{{ item.kind }}</span>
                    {% if item.is_active_report %}
                      <span class="operator-active-tag">
                        <i class="fas fa-bullseye" aria-hidden="true"></i>
                        Working report
                      </span>
                    {% endif %}
                  </span>
                  <span class="operator-work-title">{{ item.title }}</span>
                  <span class="operator-work-context">
                    {{ item.client }}
                    <span aria-hidden="true">/</span>
                    {% if item.project.codename %}
                      {{ item.project.codename }}
                    {% else %}
                      {{ item.project.project_type }}
                    {% endif %}
                    <span aria-hidden="true">/</span>
                    {{ item.report.title }}
                  </span>
                </span>
                <span class="operator-work-meta">
                  {% if item.severity %}
                    <span class="operator-severity-tag">
                      <i class="fas fa-shield-alt" aria-hidden="true"></i>
                      {{ item.severity }}
                    </span>
                  {% endif %}
                  <span class="operator-work-date operator-data">
                    <i class="far fa-clock" aria-hidden="true"></i>
                    Ends {{ item.project.end_date|date:"M j" }}
                  </span>
                </span>
                <i class="fas fa-arrow-right operator-work-arrow" aria-hidden="true"></i>
              </a>
            {% endfor %}
          </div>

          {% if work_item_count > work_item_limit %}
            <p class="operator-list-note">
              Showing the {{ work_item_limit }} items tied to the soonest-ending engagements.
              <a href="{% url 'reporting:reports' %}">Open all reports</a>
            </p>
          {% endif %}
        {% else %}
          <div class="empty-state operator-empty-state">
            <span class="operator-empty-icon" aria-hidden="true">
              <i class="fas fa-check"></i>
            </span>
            <div>
              <p class="empty-state-title">No report work is assigned to you.</p>
              <p class="empty-state-description">
                Assigned findings and observations will appear here until they are marked ready for QA.
              </p>
            </div>
          </div>
        {% endif %}
      </section>

      <section class="operator-dashboard-panel operator-runway-panel" aria-labelledby="operator-runway-title">
        <header class="operator-panel-header">
          <div>
            <span class="operator-panel-kicker">Schedule</span>
            <h2 id="operator-runway-title">Engagement runway</h2>
            <p>Your current and upcoming project assignments.</p>
          </div>
          <a class="btn btn-sm btn-outline-secondary" href="{% url 'rolodex:projects' %}">
            All projects
            <i class="fas fa-arrow-right ms-1" aria-hidden="true"></i>
          </a>
        </header>

        {% if dashboard_engagements %}
          <ol class="engagement-runway">
            {% for engagement in dashboard_engagements %}
              <li class="engagement-runway-item is-{{ engagement.status }}">
                <span class="engagement-runway-marker" aria-hidden="true"></span>
                <div class="engagement-runway-content">
                  <div class="engagement-runway-heading">
                    <a href="{{ engagement.project.get_absolute_url }}">
                      {% if engagement.project.codename %}
                        {{ engagement.project.codename }}
                      {% else %}
                        {{ engagement.project.project_type }}
                      {% endif %}
                    </a>
                    <span class="engagement-runway-status">{{ engagement.status_label }}</span>
                  </div>
                  <p class="engagement-runway-client">
                    {{ engagement.client }}
                    <span aria-hidden="true">·</span>
                    {{ engagement.project.project_type }}
                  </p>
                  <div class="engagement-runway-meta">
                    <span>
                      <i class="fas fa-user-shield" aria-hidden="true"></i>
                      {{ engagement.role }}
                    </span>
                    <span class="operator-data">
                      <i class="far fa-calendar-alt" aria-hidden="true"></i>
                      {% if engagement.start_date %}{{ engagement.start_date|date:"M j" }}{% else %}Unscheduled{% endif %}
                      –
                      {% if engagement.end_date %}{{ engagement.end_date|date:"M j" }}{% else %}Open ended{% endif %}
                    </span>
                  </div>
                  {% if active_engagement and engagement.project.id == active_engagement.project.id %}
                    <span class="engagement-runway-active-report">
                      <i class="fas fa-bullseye" aria-hidden="true"></i>
                      Working report
                    </span>
                  {% endif %}
                </div>
              </li>
            {% endfor %}
          </ol>
        {% else %}
          <div class="empty-state operator-empty-state">
            <span class="operator-empty-icon" aria-hidden="true">
              <i class="fas fa-briefcase"></i>
            </span>
            <div>
              <p class="empty-state-title">No active project assignments.</p>
              <p class="empty-state-description">
                Visit the project library or ask a manager to add you to an engagement.
              </p>
            </div>
          </div>
        {% endif %}
      </section>
    </div>

    {% if calendar_events %}
      <section class="operator-schedule-panel">
        <button class="operator-schedule-toggle"
                type="button"
                data-bs-toggle="collapse"
                data-bs-target="#dashboardSchedule"
                aria-expanded="false"
                aria-controls="dashboardSchedule">
          <span class="operator-schedule-toggle-copy">
            <span class="operator-schedule-icon" aria-hidden="true">
              <i class="far fa-calendar-alt"></i>
            </span>
            <span>
              <strong>Project calendar</strong>
              <small>Review all ongoing engagements available to you.</small>
            </span>
          </span>
          <span class="operator-schedule-toggle-meta">
            {{ calendar_events|length }} project{{ calendar_events|length|pluralize }}
            <i class="fas fa-chevron-down" aria-hidden="true"></i>
          </span>
        </button>
        <div class="collapse" id="dashboardSchedule">
          <div class="operator-schedule-content">
            <div id="calendar" class="gw-calendar" aria-label="Project calendar"></div>
          </div>
        </div>
      </section>
    {% endif %}

    {% if request.user|is_privileged %}
      {% if has_system_warning %}
        <section class="operator-exceptions-panel{% if system_health == 'WARNING' and not failed_tasks %} is-warning{% endif %}" aria-labelledby="operator-exceptions-title">
          <header class="operator-panel-header">
            <div>
              <span class="operator-panel-kicker">Admin attention needed</span>
              <h2 id="operator-exceptions-title">System notifications</h2>
              <p>Only service warnings, unhealthy services, and failed jobs are shown here.</p>
            </div>
            <div class="d-flex flex-wrap align-items-center gap-2 flex-shrink-0">
              {% if failed_tasks %}
                <form class="m-0" method="post" action="{% url 'home:dismiss_all_dashboard_exceptions' %}">
                  {% csrf_token %}
                  <button type="submit" class="btn btn-sm btn-outline-secondary"
                          aria-label="Clear all failed task notifications"
                          title="Clear all failed task notifications, including older jobs. Current service warnings remain visible.">
                    Clear all
                  </button>
                </form>
              {% endif %}
              <a class="btn btn-sm btn-outline-secondary" href="{% url 'status:healthcheck' %}">
                System status
              </a>
            </div>
          </header>
          <div class="operator-exception-list">
            {% for issue in system_health_issues %}
              <div class="operator-exception-item {% if issue.is_warning %}is-warning{% else %}is-critical{% endif %}">
                <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
                <div class="operator-exception-copy">
                  <strong>{{ issue.display_name }} requires attention</strong>
                  <span>{{ issue.result.error }}</span>
                </div>
              </div>
            {% empty %}
              {% if system_health == "WARNING" or system_health == "ERROR" %}
                <div class="operator-exception-item is-critical">
                  <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
                  <div class="operator-exception-copy">
                    <strong>System health requires attention</strong>
                    <span>System checks could not be completed. Review the system status page.</span>
                  </div>
                </div>
              {% endif %}
            {% endfor %}
            {% for task in failed_tasks %}
              <div class="operator-exception-item">
                <i class="fas fa-times-circle" aria-hidden="true"></i>
                <div class="operator-exception-copy">
                  <strong>{{ task.group|default:"Background job" }}</strong>
                  <span>Background task failed{% if task.stopped %} on {{ task.stopped|date:"M j, Y" }}{% endif %}.</span>
                </div>
                <form class="operator-exception-dismiss" method="post" action="{% url 'home:dismiss_dashboard_exception' task.id %}">
                  {% csrf_token %}
                  <button type="submit" class="btn btn-sm btn-outline-secondary"
                          aria-label="Clear {{ task.group|default:'background job' }} alert">
                    Clear
                  </button>
                </form>
              </div>
            {% endfor %}
          </div>
        </section>
      {% endif %}
    {% endif %}

    <div class="operator-system-status {% if system_health == 'ERROR' %}is-error{% elif has_system_warning %}is-warning{% elif system_health == 'OK' %}is-ready{% else %}is-unknown{% endif %}">
      <i class="fas fa-circle" aria-hidden="true"></i>
      {% if system_health == "ERROR" %}
        <span>System error</span>
      {% elif has_system_warning %}
        <span>System warning</span>
      {% elif system_health == "OK" %}
        <span>Systems ready</span>
      {% else %}
        <span>System status unavailable</span>
      {% endif %}
      {% if system_health == "UNKNOWN" and has_system_warning %}
        <span>System status unavailable</span>
      {% endif %}
      {% if request.user|is_privileged %}
        <a href="{% url 'status:healthcheck' %}">View status</a>
      {% elif has_system_warning %}
        <span>Contact a manager or admin.</span>
      {% endif %}
    </div>
  </div>
{% endblock %}

{% block morescripts %}
  {{ calendar_events|json_script:"dashboard-calendar-events" }}
  <script>
    document.addEventListener("DOMContentLoaded", function () {
      const scheduleCollapse = document.getElementById("dashboardSchedule");
      const calendarEl = document.getElementById("calendar");
      let calendar = null;

      function readCalendarView() {
        if (window.matchMedia("(max-width: 767.98px)").matches) {
          return "listWeek";
        }

        try {
          return localStorage.getItem("fcDefaultView") || "dayGridWeek";
        } catch (error) {
          return "dayGridWeek";
        }
      }

      function saveCalendarView(viewName) {
        if (window.matchMedia("(max-width: 767.98px)").matches) {
          return;
        }

        try {
          localStorage.setItem("fcDefaultView", viewName);
        } catch (error) {
          // The calendar remains usable when browser storage is unavailable.
        }
      }

      function renderCalendar() {
        if (calendar || !calendarEl) {
          if (calendar) {
            calendar.updateSize();
          }
          return;
        }

        const calendarEvents = JSON.parse(
          document.getElementById("dashboard-calendar-events").textContent
        );
        const compactCalendar = window.matchMedia("(max-width: 767.98px)").matches;

        calendar = new FullCalendar.Calendar(calendarEl, {
          initialView: readCalendarView(),
          height: "auto",
          events: calendarEvents,
          headerToolbar: compactCalendar
            ? {
                left: "prev,next",
                center: "title",
                right: "listWeek",
              }
            : {
                left: "today prev,next",
                center: "title",
                right: "dayGridDay dayGridWeek dayGridMonth listWeek",
              },
          datesSet: function (info) {
            saveCalendarView(info.view.type);
          },
          eventDidMount: function (info) {
            const assignedOperators =
              info.event.extendedProps.assignedOperators || ["No assigned operators"];
            const calendarKind = info.event.extendedProps.calendarKind || "Assignment";

            bootstrap.Popover.getOrCreateInstance(info.el, {
              title: calendarKind + ": " + info.event.title,
              placement: "top",
              trigger: "hover focus",
              content: "Assigned: " + assignedOperators.join(", "),
              container: "body",
            });
          },
          eventWillUnmount: function (info) {
            const popover = bootstrap.Popover.getInstance(info.el);
            if (popover) {
              popover.dispose();
            }
          },
        });
        calendar.render();
      }

      if (scheduleCollapse) {
        scheduleCollapse.addEventListener("shown.bs.collapse", renderCalendar);
      }

      const hideQuickstartBtn = document.getElementById("hideQuickstart");
      if (hideQuickstartBtn) {
        hideQuickstartBtn.addEventListener("click", function () {
          fetch('{% url "users:hide_quickstart" request.user.username %}', {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
              "X-CSRFToken": this.dataset.csrfToken,
            },
            body: JSON.stringify({
              hide_quickstart: true,
              username: "{{ user.username|escapejs }}",
            }),
          })
            .then((response) => {
              if (!response.ok) {
                throw new Error("Unable to save the dashboard preference.");
              }
              const setupGuide = hideQuickstartBtn.closest(".operator-setup-guide");
              if (setupGuide) {
                setupGuide.remove();
              }
            })
            .catch((error) => {
              console.error(error);
            });
        });
      }
    });
  </script>
{% endblock %}