{% extends "layout/base.html" %}
{% block content %}
<h2 class="mb-3">Job details</h2>

<div class="card mb-3">
  <div class="card-body">
    <dl class="row mb-0 dl-compact">
      <dt class="col-sm-3">Customer</dt>
      <dd class="col-sm-9 ellipsis-field">{{ job.customer.name if job.customer else "" }}</dd>

      <dt class="col-sm-3">Backup</dt>
      <dd class="col-sm-9 ellipsis-field">{{ job.backup_software }}</dd>

      <dt class="col-sm-3">Type</dt>
      <dd class="col-sm-9 ellipsis-field">{{ job.backup_type }}</dd>

      <dt class="col-sm-3">Job name</dt>
      <dd class="col-sm-9 ellipsis-field">{{ job.job_name }}</dd>

      <dt class="col-sm-3">Tickets</dt>
      <dd class="col-sm-9">{{ ticket_open_count }} open / {{ ticket_total_count }} total</dd>

      <dt class="col-sm-3">Remarks</dt>
      <dd class="col-sm-9">{{ remark_open_count }} open / {{ remark_total_count }} total</dd>

      <dt class="col-sm-3">First backup detected</dt>
      <dd class="col-sm-9">
        {% if first_detected_run_at %}
          {{ first_detected_run_at|local_datetime }}
        {% else %}
          Not detected yet
        {% endif %}
      </dd>

      <dt class="col-sm-3">Schedule (effective)</dt>
      <dd class="col-sm-9">
        {% if effective_schedule_source == 'manual' %}
          <span class="badge bg-primary-subtle text-primary-emphasis border border-primary-subtle">Manual override</span>
        {% elif effective_schedule_source == 'inferred_weekly' %}
          <span class="badge bg-secondary-subtle text-secondary-emphasis border border-secondary-subtle">Inferred (weekly)</span>
        {% elif effective_schedule_source == 'inferred_monthly' %}
          <span class="badge bg-secondary-subtle text-secondary-emphasis border border-secondary-subtle">Inferred (monthly)</span>
        {% else %}
          <span class="badge bg-secondary text-white border border-secondary">No schedule</span>
        {% endif %}
        <div class="mt-2 small">{{ schedule_desc }}</div>
      </dd>

      {% if effective_weekly_schedule_map and (effective_weekly_schedule_map[0] or effective_weekly_schedule_map[1] or effective_weekly_schedule_map[2] or effective_weekly_schedule_map[3] or effective_weekly_schedule_map[4] or effective_weekly_schedule_map[5] or effective_weekly_schedule_map[6]) %}
      <dt class="col-sm-3">Effective schedule</dt>
      <dd class="col-sm-9">
        <div class="table-responsive">
          <table class="table table-sm table-bordered mb-0">
            <thead class="table-light">
              <tr><th style="width: 120px;">Day</th><th>Times (15 min blocks)</th></tr>
            </thead>
            <tbody>
              <tr><td>Mon</td><td>{{ ', '.join(effective_weekly_schedule_map[0]) if effective_weekly_schedule_map[0] else '—' }}</td></tr>
              <tr><td>Tue</td><td>{{ ', '.join(effective_weekly_schedule_map[1]) if effective_weekly_schedule_map[1] else '—' }}</td></tr>
              <tr><td>Wed</td><td>{{ ', '.join(effective_weekly_schedule_map[2]) if effective_weekly_schedule_map[2] else '—' }}</td></tr>
              <tr><td>Thu</td><td>{{ ', '.join(effective_weekly_schedule_map[3]) if effective_weekly_schedule_map[3] else '—' }}</td></tr>
              <tr><td>Fri</td><td>{{ ', '.join(effective_weekly_schedule_map[4]) if effective_weekly_schedule_map[4] else '—' }}</td></tr>
              <tr><td>Sat</td><td>{{ ', '.join(effective_weekly_schedule_map[5]) if effective_weekly_schedule_map[5] else '—' }}</td></tr>
              <tr><td>Sun</td><td>{{ ', '.join(effective_weekly_schedule_map[6]) if effective_weekly_schedule_map[6] else '—' }}</td></tr>
            </tbody>
          </table>
        </div>
      </dd>
      {% endif %}

      {% if effective_monthly_schedule %}
      <dt class="col-sm-3">Effective monthly</dt>
      <dd class="col-sm-9">
        Day {{ effective_monthly_schedule.day_of_month }} at {{ ', '.join(effective_monthly_schedule.times or []) }}
      </dd>
      {% endif %}

      {% if schedule_map %}
      <dt class="col-sm-3">Schedule (inferred)</dt>
      <dd class="col-sm-9">
        <div class="table-responsive">
          <table class="table table-sm table-bordered mb-0">
            <thead class="table-light">
              <tr><th style="width: 120px;">Day</th><th>Times (15 min blocks)</th></tr>
            </thead>
            <tbody>
              <tr><td>Mon</td><td>{{ ', '.join(schedule_map[0]) if schedule_map[0] else '—' }}</td></tr>
              <tr><td>Tue</td><td>{{ ', '.join(schedule_map[1]) if schedule_map[1] else '—' }}</td></tr>
              <tr><td>Wed</td><td>{{ ', '.join(schedule_map[2]) if schedule_map[2] else '—' }}</td></tr>
              <tr><td>Thu</td><td>{{ ', '.join(schedule_map[3]) if schedule_map[3] else '—' }}</td></tr>
              <tr><td>Fri</td><td>{{ ', '.join(schedule_map[4]) if schedule_map[4] else '—' }}</td></tr>
              <tr><td>Sat</td><td>{{ ', '.join(schedule_map[5]) if schedule_map[5] else '—' }}</td></tr>
              <tr><td>Sun</td><td>{{ ', '.join(schedule_map[6]) if schedule_map[6] else '—' }}</td></tr>
            </tbody>
          </table>
        </div>
      </dd>
      {% endif %}
    </dl>
  </div>
</div>

{% if can_manage_jobs %}
<div class="card mb-3">
  <div class="card-header d-flex justify-content-between align-items-center">
    <span>Schedule Override</span>
    <button
      class="btn btn-sm btn-outline-secondary"
      type="button"
      data-bs-toggle="collapse"
      data-bs-target="#scheduleOverridePanel"
      aria-expanded="false"
      aria-controls="scheduleOverridePanel"
    >
      Open
    </button>
  </div>
  <div class="collapse" id="scheduleOverridePanel">
  <div class="card-body">
    <form method="post" action="{{ url_for('main.job_set_schedule', job_id=job.id) }}" class="row g-3">
      <div class="col-md-4">
        <label for="schedule_type" class="form-label">Type</label>
        <select class="form-select" id="schedule_type" name="schedule_type">
          <option value="daily" {% if (job.schedule_type or '')|lower == 'daily' %}selected{% endif %}>Daily</option>
          <option value="weekly" {% if (job.schedule_type or '')|lower == 'weekly' %}selected{% endif %}>Weekly</option>
          <option value="monthly" {% if (job.schedule_type or '')|lower == 'monthly' %}selected{% endif %}>Monthly</option>
        </select>
      </div>
      <div class="col-md-8">
        <label for="schedule_times" class="form-label">Times (HH:MM, comma separated)</label>
        <input
          type="text"
          class="form-control"
          id="schedule_times"
          name="schedule_times"
          value="{{ job.schedule_times or '' }}"
          placeholder="01:00,13:15"
          required
        />
      </div>
      <div class="col-md-12">
        <label class="form-label">Weekdays (for weekly)</label>
        <div class="d-flex flex-wrap gap-3">
          {% set selected_weekdays = ((job.schedule_days_of_week or '').split(',')) %}
          {% for idx, label in [(0, 'Mon'), (1, 'Tue'), (2, 'Wed'), (3, 'Thu'), (4, 'Fri'), (5, 'Sat'), (6, 'Sun')] %}
            <div class="form-check form-check-inline">
              <input
                class="form-check-input"
                type="checkbox"
                name="schedule_weekdays"
                id="schedule_weekday_{{ idx }}"
                value="{{ idx }}"
                {% if label in selected_weekdays %}checked{% endif %}
              />
              <label class="form-check-label" for="schedule_weekday_{{ idx }}">{{ label }}</label>
            </div>
          {% endfor %}
        </div>
      </div>
      <div class="col-md-4">
        <label for="schedule_day_of_month" class="form-label">Day of month (for monthly)</label>
        <input
          type="number"
          class="form-control"
          id="schedule_day_of_month"
          name="schedule_day_of_month"
          min="1"
          max="31"
          value="{{ job.schedule_day_of_month or '' }}"
        />
      </div>
      <div class="col-12 d-flex flex-wrap gap-2">
        <button type="submit" class="btn btn-primary">Save override</button>
        <button type="submit" name="clear_schedule" value="1" class="btn btn-outline-secondary">Use inferred schedule</button>
      </div>
      <div class="col-12 small text-muted">
        Manual schedule override is leading for Expected/Missed and missed-run generation.
      </div>
    </form>
  </div>
  </div>
</div>

<div class="d-flex flex-wrap gap-2 mb-3">
  <form method="post" action="{{ url_for('main.archive_job', job_id=job.id) }}" class="mb-0" onsubmit="return confirm('Archive this job? No new runs are expected and it will be removed from Daily Jobs and Run Checks.');">
    <button type="submit" class="btn btn-outline-secondary">Archive</button>
  </form>

  <form method="post" action="{{ url_for('main.job_delete', job_id=job.id) }}" class="mb-0" onsubmit="return confirm('Are you sure you want to delete this job? Related mails will be returned to the Inbox.');">
    <button type="submit" class="btn btn-outline-danger">Delete job</button>
  </form>
</div>
{% endif %}

{% if cove_enabled and can_manage_jobs %}
<div class="card mb-3">
  <div class="card-header">Cove Integration</div>
  <div class="card-body">
    <form method="post" action="{{ url_for('main.job_set_cove_account', job_id=job.id) }}" class="row g-2 align-items-end mb-0">
      <div class="col-auto">
        <label for="cove_account_id" class="form-label mb-1">Cove Account ID</label>
        <input type="number" class="form-control form-control-sm" id="cove_account_id" name="cove_account_id"
          value="{{ job.cove_account_id or '' }}" placeholder="e.g. 4504627" style="width: 180px;" />
      </div>
      <div class="col-auto">
        <button type="submit" class="btn btn-sm btn-primary">Save</button>
        {% if job.cove_account_id %}
        <button type="submit" name="cove_account_id" value="" class="btn btn-sm btn-outline-secondary ms-1">Clear</button>
        {% endif %}
      </div>
      <div class="col-auto text-muted small">
        {% if job.cove_account_id %}
        Linked to Cove account <strong>{{ job.cove_account_id }}</strong>
        {% else %}
        Not linked to a Cove account – runs will not be imported automatically.
        {% endif %}
      </div>
    </form>
  </div>
</div>
{% endif %}

<h3 class="mt-4 mb-3">Job history</h3>

<div class="table-responsive">
  <table class="table table-sm table-hover align-middle">
    <thead class="table-light">
      <tr>
        <th scope="col">Day run</th>
        <th scope="col">Run time</th>
        <th scope="col">Status</th>
        <th scope="col">Tickets</th>
        <th scope="col">Remarks</th>
        <th scope="col">Override</th>
        {% if active_role == 'admin' %}
          <th scope="col">Reviewed by</th>
          <th scope="col">Reviewed at</th>
        {% endif %}
      </tr>
    </thead>
    <tbody>
      {% if history_rows %}
        {% for r in history_rows %}
          <tr{% if r.mail_message_id or r.source_type == 'cove_api' %} class="jobrun-row" {% if r.mail_message_id %}data-message-id="{{ r.mail_message_id }}" {% endif %}data-run-id="{{ r.id }}" data-source-type="{{ r.source_type }}" data-ticket-codes="{{ (r.ticket_codes or [])|tojson|forceescape }}" data-remark-items="{{ (r.remark_items or [])|tojson|forceescape }}" style="cursor: pointer;"{% endif %}>
            <td>{{ r.run_day }}</td>
            <td>{{ r.run_at|local_datetime }}</td>
            {% set _s = (r.status or "")|lower %}
            {% set _is_override = (r.override_applied is defined and r.override_applied) or ('override' in _s) %}
            {% set _dot = '' %}
            {% if _is_override %}{% set _dot = 'dot-override' %}
            {% elif _s == 'success' %}{% set _dot = 'dot-success' %}
            {% elif _s == 'warning' %}{% set _dot = 'dot-warning' %}
            {% elif _s == 'error' %}{% set _dot = 'dot-failed' %}
            {% elif _s == 'failed' %}{% set _dot = 'dot-failed' %}
            {% elif _s == 'missed' %}{% set _dot = 'dot-missed' %}
            {% endif %}
            <td class="status-text {% if _is_override %}status-override{% elif _s == 'success' %}status-success{% elif _s == 'warning' %}status-warning{% elif _s == 'error' %}status-error{% elif _s == 'failed' %}status-failed{% elif _s == 'missed' %}status-missed{% endif %}">{% if _dot %}<span class="status-dot {{ _dot }} me-2" aria-hidden="true"></span>{% endif %}{{ r.status }}</td>
            <td>{% if r.ticket_codes %}🎫 {{ r.ticket_codes|join(", ") }}{% endif %}</td>
            <td>{% if r.has_remark %}💬{% endif %}</td>
<td class="status-text {% if r.override_applied %}status-override{% endif %}">{% if r.override_applied %}<span class="status-dot dot-override me-2" aria-hidden="true"></span>Override{% endif %}</td>
            {% if active_role == 'admin' %}
              <td>{{ r.reviewed_by }}</td>
              <td>{{ r.reviewed_at|local_datetime }}</td>
            {% endif %}
          </tr>
        {% endfor %}
      {% else %}
        <tr>
          <td colspan="{% if active_role == 'admin' %}8{% else %}6{% endif %}" class="text-center text-muted py-3">
            No runs found.
          </td>
        </tr>
      {% endif %}
    </tbody>
  </table>
</div>

{% if total_pages > 1 %}
<div class="d-flex justify-content-between align-items-center my-2">
  <div>
    {% if has_prev %}
      <a class="btn btn-outline-secondary btn-sm" href="{{ url_for('main.job_detail', job_id=job.id, page=page-1) }}">Previous</a>
    {% else %}
      <button class="btn btn-outline-secondary btn-sm" disabled>Previous</button>
    {% endif %}
    {% if has_next %}
      <a class="btn btn-outline-secondary btn-sm ms-2" href="{{ url_for('main.job_detail', job_id=job.id, page=page+1) }}">Next</a>
    {% else %}
      <button class="btn btn-outline-secondary btn-sm ms-2" disabled>Next</button>
    {% endif %}
  </div>
  <div class="d-flex align-items-center">
    <span class="me-2">Page {{ page }} of {{ total_pages }}</span>
    <form method="get" class="d-flex align-items-center mb-0">
      <label for="page_input" class="form-label me-1 mb-0">Go to:</label>
      <input
        type="number"
        min="1"
        max="{{ total_pages }}"
        class="form-control form-control-sm me-1"
        id="page_input"
        name="page"
        value="{{ page }}"
        style="width: 5rem;"
      />
      <button type="submit" class="btn btn-primary btn-sm">Go</button>
    </form>
  </div>
</div>
{% endif %}


<style>
  /* Job run popup: wide + internal scroll areas */
  .modal-xxl { max-width: 98vw; }
  @media (min-width: 1400px) { .modal-xxl { max-width: 1400px; } }
  #run_msg_body_container_iframe { height: 55vh; }
  #run_msg_objects_container { max-height: 25vh; overflow: auto; }

  #jobRunMessageModal.is-cove #jdm_mail_iframe_panel {
    display: none !important;
  }

  #jobRunMessageModal.is-cove #run_msg_objects_container {
    max-height: 55vh;
  }
</style>

<!-- Inline popup modal for run message details -->
<div class="modal fade" id="jobRunMessageModal" tabindex="-1" aria-labelledby="jobRunMessageModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl modal-dialog-scrollable modal-xxl">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="jobRunMessageModalLabel">Run details</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-md-3">
            <dl class="row mb-0 dl-compact">
              <dt class="col-4">From</dt>
              <dd class="col-8 ellipsis-field" id="run_msg_from"></dd>

              <dt class="col-4">Backup</dt>
              <dd class="col-8 ellipsis-field" id="run_msg_backup"></dd>

              <dt class="col-4">Type</dt>
              <dd class="col-8 ellipsis-field" id="run_msg_type"></dd>

               <dt class="col-4">Ticket</dt>
               <dd class="col-8 ellipsis-field" id="run_msg_ticket"></dd>

               <dt class="col-4">Remark</dt>
               <dd class="col-8 ellipsis-field" id="run_msg_remark"></dd>

              <dt class="col-12 mt-2">Tickets &amp; remarks</dt>
              <dd class="col-12">
                <div id="jhm_alerts" class="small"></div>

                {% if can_manage_jobs %}
                <div class="border rounded p-2 mt-2">
                  <div class="fw-semibold">New ticket</div>
                  <div class="d-flex gap-2 mt-1">
                    <input class="form-control form-control-sm" id="jhm_ticket_code" type="text" placeholder="Ticket number (e.g., T20260106.0001)" />
                    <button type="button" class="btn btn-sm btn-outline-primary" id="jhm_ticket_save">Add</button>
                  </div>
                  <div class="mt-1 small text-muted" id="jhm_ticket_status"></div>

                  <div class="fw-semibold mt-2">New remark</div>
                  <textarea class="form-control form-control-sm" id="jhm_remark_body" rows="2" placeholder="Remark"></textarea>
                  <div class="d-flex justify-content-end mt-1">
                    <button type="button" class="btn btn-sm btn-outline-primary" id="jhm_remark_save">Add</button>
                  </div>
                  <div class="mt-1 small text-muted" id="jhm_remark_status"></div>
                </div>
                {% endif %}
              </dd>

              <dt class="col-4">Job</dt>
              <dd class="col-8 ellipsis-field" id="run_msg_job"></dd>

              <dt class="col-4">Overall</dt>
              <dd class="col-8 ellipsis-field" id="run_msg_overall"></dd>

              <dt class="col-4">Customer</dt>
              <dd class="col-8 ellipsis-field" id="run_msg_customer"></dd>

              <dt class="col-4">Received</dt>
              <dd class="col-8 ellipsis-field" id="run_msg_received"></dd>

              <dt class="col-4">Parsed</dt>
              <dd class="col-8 ellipsis-field" id="run_msg_parsed"></dd>
            </dl>

          </div>

          <div class="col-md-9">
            <div class="mb-2">
              <h6 class="mb-1">Details</h6>
              <div id="run_msg_overall_message" class="border rounded p-2" style="white-space: pre-wrap; max-height: 20vh; overflow: auto;"></div>
            </div>

            <!-- Cloud Connect summary panel (shown instead of raw email for CC runs) -->
            <div id="jdm_cc_summary_panel" class="mb-3" style="display:none;">
              <h6>Cloud Connect</h6>
              <dl class="row mb-0 dl-compact">
                <dt class="col-4">User</dt>        <dd class="col-8" id="jdm_cc_user"></dd>
                <dt class="col-4">Section</dt>     <dd class="col-8" id="jdm_cc_section"></dd>
                <dt class="col-4">Repository</dt>  <dd class="col-8" id="jdm_cc_repo"></dd>
                <dt class="col-4">Used / Quota</dt><dd class="col-8" id="jdm_cc_used"></dd>
                <dt class="col-4">Free</dt>        <dd class="col-8" id="jdm_cc_free"></dd>
                <dt class="col-4">Last active</dt> <dd class="col-8" id="jdm_cc_last_active"></dd>
                <dt class="col-4">Status</dt>      <dd class="col-8" id="jdm_cc_status"></dd>
              </dl>
            </div>

            <!-- Cove summary panel (shown for cove_api runs, no mail involved) -->
            <div id="jdm_cove_summary_panel" class="mb-3" style="display:none;">
              <h6>Cove Data Protection</h6>
              <dl class="row mb-0 dl-compact">
                <dt class="col-4">Account</dt>     <dd class="col-8" id="jdm_cove_account"></dd>
                <dt class="col-4">Computer</dt>    <dd class="col-8" id="jdm_cove_computer"></dd>
                <dt class="col-4">Customer</dt>    <dd class="col-8" id="jdm_cove_customer"></dd>
                <dt class="col-4">Datasources</dt> <dd class="col-8" id="jdm_cove_datasources"></dd>
                <dt class="col-4">Last run</dt>    <dd class="col-8" id="jdm_cove_last_run"></dd>
                <dt class="col-4">Status</dt>      <dd class="col-8" id="jdm_cove_status"></dd>
              </dl>
            </div>

            <div class="mb-3" id="jdm_mail_iframe_panel">
              <div class="d-flex align-items-center gap-2 mb-1">
                <h6 class="mb-0" id="jdm_mail_heading">Mail</h6>
                <a href="#" class="small text-muted" id="jdm_mail_toggle" style="display:none;"
                   onclick="(function(){
                     var b=document.getElementById('jdm_mail_iframe_body');
                     var lnk=document.getElementById('jdm_mail_toggle');
                     var collapsed=b.style.display==='none';
                     b.style.display=collapsed?'':'none';
                     lnk.textContent=collapsed?'hide':'show';
                   })();return false;">show</a>
              </div>
              <div id="jdm_mail_iframe_body" class="border rounded p-0" style="overflow:hidden;">
                <iframe id="run_msg_body_container_iframe" class="w-100" style="height:55vh; border:0; background:transparent;" sandbox="allow-popups allow-popups-to-escape-sandbox allow-top-navigation-by-user-activation"></iframe>
              </div>
            </div>

            <div class="mt-3">
              <div id="run_msg_objects_container">
                <!-- Parsed objects will be rendered here -->
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="modal-footer">
        <a id="run_msg_eml_btn" class="btn btn-outline-primary" href="#" style="display:none;" rel="nofollow">Download EML</a>
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<script>

  function statusClass(status) {
    var s = (status || "").toString().toLowerCase();
    if (s === "success") return "status-success";
    if (s === "warning") return "status-warning";
    if (s === "error") return "status-error";
    if (s === "failed") return "status-failed";
    if (s === "missed") return "status-missed";
    if (s === "expected") return "status-expected";
    return "";
  }

  function statusDotClass(status) {
    var s = (status || "").toString().toLowerCase();
    if (s === "success") return "dot-success";
    if (s === "warning") return "dot-warning";
    if (s === "error") return "dot-failed";
    if (s === "failed") return "dot-failed";
    if (s === "missed") return "dot-missed";
    if (s === "expected") return "dot-expected";
    return "";
  }

  function escapeHtml(s) {
    return (s || "").toString()
      .replace(/&/g, "&amp;")
      .replace(/</g, "&lt;")
      .replace(/>/g, "&gt;")
      .replace(/\"/g, "&quot;")
      .replace(/'/g, "&#39;");
  }

  (function () {
    var currentRunId = null;

    // Cross-browser copy to clipboard function
    function copyToClipboard(text, button) {
      var value = (text || "").toString().trim();
      if (!value) {
        alert("No ticket number available to copy.");
        return;
      }

      if (window.isSecureContext && navigator.clipboard && navigator.clipboard.writeText) {
        navigator.clipboard.writeText(value)
          .then(function () {
            showCopyFeedback(button);
          })
          .catch(function () {
            fallbackCopy(value, button);
          });
        return;
      }

      fallbackCopy(value, button);
    }

    function fallbackCopy(text, button) {
      var textarea = document.createElement("textarea");
      textarea.value = text;
      textarea.setAttribute("readonly", "readonly");
      textarea.style.position = "fixed";
      textarea.style.opacity = "0";
      textarea.style.top = "0";
      textarea.style.left = "0";
      document.body.appendChild(textarea);
      textarea.focus();
      textarea.select();
      textarea.setSelectionRange(0, text.length);

      var successful = false;
      try {
        successful = document.execCommand("copy");
      } catch (err) {
        successful = false;
      }

      document.body.removeChild(textarea);

      if (successful) {
        showCopyFeedback(button);
        return;
      }

      window.prompt("Copy ticket number:", text);
    }

    function showCopyFeedback(button) {
      if (!button) return;
      var original = button.textContent;
      button.textContent = '✓';
      setTimeout(function () {
        button.textContent = original;
      }, 800);
    }

    function apiJson(url, opts) {
      opts = opts || {};
      opts.headers = opts.headers || {};
      opts.headers['Content-Type'] = 'application/json';
      return fetch(url, opts).then(function (r) {
        return r.json().then(function (j) {
          if (!r.ok || !j || j.status !== 'ok') {
            var msg = (j && j.message) ? j.message : ('Request failed (' + r.status + ')');
            throw new Error(msg);
          }
          return j;
        });
      });
    }

    function renderAlerts(payload) {
      var box = document.getElementById('jhm_alerts');
      if (!box) return;
      var tickets = (payload && payload.tickets) || [];
      var remarks = (payload && payload.remarks) || [];

      if (!tickets.length && !remarks.length) {
        box.innerHTML = '<span class="text-muted">No tickets or remarks linked to this run.</span>';
        return;
      }

      var html = '';

      if (tickets.length) {
        html += '<div class="mb-2"><strong>Tickets</strong><div class="mt-1">';
        tickets.forEach(function (t) {
          var status = t.resolved_at ? 'Resolved' : 'Active';
          var ticketCode = (t.ticket_code || '').toString();
          html += '<div class="mb-2 border rounded p-2" data-alert-type="ticket" data-id="' + t.id + '">' +
                    '<div class="d-flex align-items-start justify-content-between gap-2">' +
                      '<div class="flex-grow-1 min-w-0">' +
                        '<div class="text-truncate">' +
                          '<span class="me-1" title="Ticket">🎫</span>' +
                          '<span class="fw-semibold">' + escapeHtml(ticketCode) + '</span>' +
                          '<button type="button" class="btn btn-sm btn-outline-secondary ms-2 py-0 px-1" title="Copy ticket number" data-action="copy-ticket" data-code="' + escapeHtml(ticketCode) + '">⧉</button>' +
                          '<span class="ms-2 badge ' + (t.resolved_at ? 'bg-secondary' : 'bg-warning text-dark') + '">' + status + '</span>' +
                        '</div>' +
                      '</div>' +
                      '<div class="d-flex gap-1 flex-shrink-0">' +
                        '{% if can_manage_jobs %}' +
                        '<button type="button" class="btn btn-sm btn-outline-success" data-action="resolve-ticket" data-id="' + t.id + '" ' + (t.resolved_at ? 'disabled' : '') + '>Resolve</button>' +
                        '{% endif %}' +
                      '</div>' +
                    '</div>' +
                  '</div>';
        });
        html += '</div></div>';
      }

      if (remarks.length) {
        html += '<div class="mb-2"><strong>Remarks</strong><div class="mt-1">';
        remarks.forEach(function (r) {
          var status = r.resolved_at ? 'Resolved' : 'Active';
          html += '<div class="mb-2 border rounded p-2" data-alert-type="remark" data-id="' + r.id + '">' +
                    '<div class="d-flex align-items-start justify-content-between gap-2">' +
                      '<div class="flex-grow-1 min-w-0">' +
                        '<div class="text-truncate">' +
                          '<span class="me-1" title="Remark">💬</span>' +
                          '<span class="fw-semibold">Remark</span>' +
                          '<span class="ms-2 badge ' + (r.resolved_at ? 'bg-secondary' : 'bg-warning text-dark') + '">' + status + '</span>' +
                        '</div>' +
                        (r.body ? ('<div class="small text-muted mt-1">' + escapeHtml(r.body) + '</div>') : '') +
                      '</div>' +
                      '<div class="d-flex gap-1 flex-shrink-0">' +
                        '{% if can_manage_jobs %}' +
                        '<button type="button" class="btn btn-sm btn-outline-success" data-action="resolve-remark" data-id="' + r.id + '" ' + (r.resolved_at ? 'disabled' : '') + '>Resolve</button>' +
                        '{% endif %}' +
                      '</div>' +
                    '</div>' +
                  '</div>';
        });
        html += '</div></div>';
      }

      box.innerHTML = html;

      Array.prototype.forEach.call(box.querySelectorAll('button[data-action]'), function (btn) {
        btn.addEventListener('click', function (ev) {
          ev.preventDefault();
          ev.stopPropagation();
          var action = btn.getAttribute('data-action');
          var id = btn.getAttribute('data-id');
          if (!action) return;

          if (action === 'copy-ticket') {
            var code = (btn.getAttribute('data-code') || '').trim();
            copyToClipboard(code, btn);
            return;
          }

          if (!id) return;
          if (action === 'resolve-ticket') {
            if (!confirm('Mark ticket as resolved?')) return;
            apiJson('/api/tickets/' + encodeURIComponent(id) + '/resolve', {method: 'POST', body: '{}'})
              .then(function () { loadAlerts(currentRunId); })
              .catch(function (e) { alert(e.message || 'Failed.'); });
          } else if (action === 'resolve-remark') {
            if (!confirm('Mark remark as resolved?')) return;
            apiJson('/api/remarks/' + encodeURIComponent(id) + '/resolve', {method: 'POST', body: '{}'})
              .then(function () { loadAlerts(currentRunId); })
              .catch(function (e) { alert(e.message || 'Failed.'); });
          }
        });
      });
    }

    function loadAlerts(runId) {
      if (!runId) {
        renderAlerts({tickets: [], remarks: []});
        return;
      }
      fetch('/api/job-runs/' + encodeURIComponent(runId) + '/alerts')
        .then(function (r) { return r.json(); })
        .then(function (j) {
          if (!j || j.status !== 'ok') throw new Error((j && j.message) || 'Failed');
          renderAlerts(j);
        })
        .catch(function () {
          renderAlerts({tickets: [], remarks: []});
        });
    }

    function bindInlineCreateForms() {
      var btnTicket = document.getElementById('jhm_ticket_save');
      var btnRemark = document.getElementById('jhm_remark_save');
      var tCode = document.getElementById('jhm_ticket_code');
      var tStatus = document.getElementById('jhm_ticket_status');
      var rBody = document.getElementById('jhm_remark_body');
      var rStatus = document.getElementById('jhm_remark_status');

      function clearStatus() {
        if (tStatus) tStatus.textContent = '';
        if (rStatus) rStatus.textContent = '';
      }

      if (btnTicket) {
        btnTicket.addEventListener('click', function () {
          if (!currentRunId) { alert('Select a run first.'); return; }
          clearStatus();
          var ticket_code = tCode ? (tCode.value || '').trim().toUpperCase() : '';
          if (!ticket_code) {
            if (tStatus) tStatus.textContent = 'Ticket number is required.';
            else alert('Ticket number is required.');
            return;
          }
          if (!/^T\d{8}\.\d{4}$/.test(ticket_code)) {
            if (tStatus) tStatus.textContent = 'Invalid ticket number format. Expected TYYYYMMDD.####.';
            else alert('Invalid ticket number format. Expected TYYYYMMDD.####.');
            return;
          }
          if (tStatus) tStatus.textContent = 'Saving...';
          apiJson('/api/tickets', {
            method: 'POST',
            body: JSON.stringify({job_run_id: currentRunId, ticket_code: ticket_code})
          })
          .then(function () {
            if (tCode) tCode.value = '';
            if (tStatus) tStatus.textContent = '';
            loadAlerts(currentRunId);
          })
          .catch(function (e) {
            if (tStatus) tStatus.textContent = e.message || 'Failed.';
            else alert(e.message || 'Failed.');
          });
        });
      }

      if (btnRemark) {
        btnRemark.addEventListener('click', function () {
          if (!currentRunId) { alert('Select a run first.'); return; }
          clearStatus();
          var body = rBody ? rBody.value : '';
          if (!body || !body.trim()) {
            if (rStatus) rStatus.textContent = 'Body is required.';
            else alert('Body is required.');
            return;
          }
          if (rStatus) rStatus.textContent = 'Saving...';
          apiJson('/api/remarks', {
            method: 'POST',
            body: JSON.stringify({job_run_id: currentRunId, body: body})
          })
          .then(function () {
            if (rBody) rBody.value = '';
            if (rStatus) rStatus.textContent = '';
            loadAlerts(currentRunId);
          })
          .catch(function (e) {
            if (rStatus) rStatus.textContent = e.message || 'Failed.';
            else alert(e.message || 'Failed.');
          });
        });
      }
    }

        function wrapMailHtml(html) {
      html = html || "";
      var trimmed = (typeof html === "string") ? html.trim() : "";
      var injection = '<meta charset="utf-8"><meta name="color-scheme" content="light"><meta name="supported-color-schemes" content="light"><meta name="viewport" content="width=device-width, initial-scale=1"><base target="_blank"><style>:root{color-scheme:light;}html{color-scheme:light;}body{margin:0;padding:8px;background:#fff;forced-color-adjust:none;-ms-high-contrast-adjust:none;}</style>';

      function injectIntoFullDoc(doc) {
        var d = doc || "";
        if (/<head[^>]*>/i.test(d)) {
          return d.replace(/<head[^>]*>/i, function (m) { return m + injection; });
        }
        if (/<html[^>]*>/i.test(d)) {
          return d.replace(/<html[^>]*>/i, function (m) { return m + "<head>" + injection + "</head>"; });
        }
        return "<!doctype html><html><head>" + injection + "</head><body>" + d + "</body></html>";
      }

      if (trimmed.toLowerCase().indexOf("<!doctype") === 0 || trimmed.toLowerCase().indexOf("<html") === 0) {
        return injectIntoFullDoc(trimmed);
      }

      return "<!doctype html><html><head>" + injection + "</head><body>" + html + "</body></html>";
    }

function renderObjects(objects) {
      var container = document.getElementById("run_msg_objects_container");
      if (!container) return;

      if (!objects || !objects.length) {
        container.innerHTML = "<p class=\"text-muted mb-0\">No objects stored for this run.</p>";
        return;
      }

      function objectSeverityRank(o) {
        var st = String((o && o.status) || "").trim().toLowerCase();
        var err = String((o && o.error_message) || "").trim();
        if (st === "error" || st === "failed" || st === "failure") return 0;
        if (st === "warning" || err) return 1;
        return 2;
      }

      // Sort: errors first, then warnings, then the rest; within each group sort alphabetically.
      var sorted = (objects || []).slice().sort(function (a, b) {
        var ra = objectSeverityRank(a);
        var rb = objectSeverityRank(b);
        if (ra !== rb) return ra - rb;

        var an = String((a && a.name) || "").toLowerCase();
        var bn = String((b && b.name) || "").toLowerCase();
        if (an < bn) return -1;
        if (an > bn) return 1;

        var at = String((a && a.type) || "").toLowerCase();
        var bt = String((b && b.type) || "").toLowerCase();
        if (at < bt) return -1;
        if (at > bt) return 1;
        return 0;
      });

      var html = "<div class=\"table-responsive\"><table class=\"table table-sm table-bordered mb-0\">";
      html += "<thead><tr><th>Object</th><th>Type</th><th>Status</th><th>Error</th></tr></thead><tbody>";
      for (var i = 0; i < sorted.length; i++) {
        var o = sorted[i] || {};
        html += "<tr>";
        html += "<td>" + escapeHtml(o.name || "") + "</td>";
        html += "<td>" + escapeHtml(o.type || "") + "</td>";

        var d = statusDotClass(o.status);
        html += "<td class=\"status-text " + statusClass(o.status) + "\">" +
          (d ? ("<span class=\"status-dot " + d + " me-2\" aria-hidden=\"true\"></span>") : "") +
          escapeHtml(o.status || "") +
          "</td>";

        html += "<td>" + escapeHtml(o.error_message || "") + "</td>";
        html += "</tr>";
      }
      html += "</tbody></table></div>";
      container.innerHTML = html;
    }

    function attachHandlers() {
      var rows = document.querySelectorAll("tr.jobrun-row");
      var modalEl = document.getElementById("jobRunMessageModal");
      if (!modalEl) return;
      var modal = new bootstrap.Modal(modalEl);

      {% if can_manage_jobs %}
      bindInlineCreateForms();
      {% endif %}

      rows.forEach(function (row) {
        row.addEventListener("click", function () {
          var messageId  = row.getAttribute("data-message-id");
          var runId      = row.getAttribute("data-run-id");
          var sourceType = row.getAttribute("data-source-type") || "";
          if (!messageId && !runId) return;
          currentRunId = runId ? parseInt(runId, 10) : null;

          var detailUrl;
          if (sourceType === "cove_api" && runId && !messageId) {
            detailUrl = "{{ url_for('main.cove_run_detail', run_id=0) }}".replace("0", runId);
          } else {
            detailUrl = "{{ url_for('main.inbox_message_detail', message_id=0) }}".replace("0", messageId);
            if (runId) detailUrl += "?run_id=" + encodeURIComponent(runId);
          }
          fetch(detailUrl)
            .then(function (resp) {
              if (!resp.ok) throw new Error("Failed to load message details");
              return resp.json();
            })
            .then(function (data) {
              if (data.status !== "ok") throw new Error("Unexpected response");
              var meta = data.meta || {};

              var ticketCodes = [];
              var remarkItems = [];
              try { ticketCodes = JSON.parse(row.getAttribute("data-ticket-codes") || "[]"); } catch (e) { ticketCodes = []; }
              try { remarkItems = JSON.parse(row.getAttribute("data-remark-items") || "[]"); } catch (e) { remarkItems = []; }

              var ticketEl = document.getElementById("run_msg_ticket");
              if (ticketEl) ticketEl.textContent = (ticketCodes && ticketCodes.length) ? ticketCodes.join(", ") : "";

              var remarkEl = document.getElementById("run_msg_remark");
              if (remarkEl) {
                if (remarkItems && remarkItems.length) {
                  var parts = [];
                  for (var i = 0; i < remarkItems.length; i++) {
                    var it = remarkItems[i] || {};
                    var t = (it.title || "").toString().trim();
                    var b = (it.body || "").toString().trim();
                    if (t && b) parts.push(t + ": " + b);
                    else if (b) parts.push(b);
                    else if (t) parts.push(t);
                  }
                  remarkEl.textContent = parts.join(" | ");
                } else {
                  remarkEl.textContent = "";
                }
              }


              document.getElementById("jobRunMessageModalLabel").textContent = meta.subject || "Run details";
              document.getElementById("run_msg_from").textContent = meta.from_address || "";
              document.getElementById("run_msg_backup").textContent = meta.backup_software || "";
              document.getElementById("run_msg_type").textContent = meta.backup_type || "";
              document.getElementById("run_msg_job").textContent = meta.job_name || "";
              var overallEl = document.getElementById("run_msg_overall");
              if (overallEl) {
                // For CC runs use the run's own status; for regular runs use the mail's overall_status.
                var overallStatus = (
                data.cove_summary         ? (data.cove_summary.status || "") :
                data.cloud_connect_summary ? (data.cloud_connect_summary.status || "") :
                (meta.overall_status || "")
              );
                var d = statusDotClass(overallStatus);
                overallEl.innerHTML = (d ? ('<span class="status-dot ' + d + ' me-2" aria-hidden="true"></span>') : '') + escapeHtml(overallStatus);
              }
              document.getElementById("run_msg_overall_message").textContent = meta.overall_message || "";
              document.getElementById("run_msg_customer").textContent = meta.customer_name || "";
              document.getElementById("run_msg_received").textContent = meta.received_at || "";
              document.getElementById("run_msg_parsed").textContent = meta.parsed_at || "";

              var emlBtn = document.getElementById("run_msg_eml_btn");
              if (emlBtn) {
                if (meta.has_eml) {
                  emlBtn.href = "{{ url_for('main.message_eml', message_id=0) }}".replace("0", messageId);
                  emlBtn.style.display = "inline-block";
                } else {
                  emlBtn.href = "#";
                  emlBtn.style.display = "none";
                }
              }

              var ccPanel    = document.getElementById("jdm_cc_summary_panel");
              var covePanel  = document.getElementById("jdm_cove_summary_panel");
              var mailHeading = document.getElementById("jdm_mail_heading");
              var mailToggle  = document.getElementById("jdm_mail_toggle");
              var mailBody    = document.getElementById("jdm_mail_iframe_body");
              var bodyFrame   = document.getElementById("run_msg_body_container_iframe");
              var mailPanel   = document.getElementById("jdm_mail_iframe_panel");
              var modalEl     = document.getElementById("jobRunMessageModal");

              if (data.cove_summary) {
                if (modalEl) modalEl.classList.add("is-cove");
                var cs = data.cove_summary;
                document.getElementById("jdm_cove_account").textContent    = cs.account_name || "—";
                document.getElementById("jdm_cove_computer").textContent   = cs.computer_name || "—";
                document.getElementById("jdm_cove_customer").textContent   = cs.customer_name || "—";
                document.getElementById("jdm_cove_datasources").textContent = cs.datasources || "—";
                document.getElementById("jdm_cove_last_run").textContent   = cs.last_run_at || "—";
                document.getElementById("jdm_cove_status").textContent     = cs.status || "—";
                if (covePanel)   covePanel.style.display   = "";
                if (ccPanel)     ccPanel.style.display     = "none";
                if (mailHeading) mailHeading.style.display = "none";
                if (mailToggle)  mailToggle.style.display  = "none";
                if (mailBody)    mailBody.style.display    = "none";
                if (mailPanel)   mailPanel.style.display = "none";
              } else if (data.cloud_connect_summary) {
                if (modalEl) modalEl.classList.remove("is-cove");
                var s = data.cloud_connect_summary;
                document.getElementById("jdm_cc_user").textContent        = s.user || "";
                document.getElementById("jdm_cc_section").textContent     = s.section || "";
                document.getElementById("jdm_cc_repo").textContent        = s.repo_name + (s.repo_type ? " (" + s.repo_type + ")" : "");
                document.getElementById("jdm_cc_used").textContent        = (s.used_space || "—") + " / " + (s.total_quota || "—");
                document.getElementById("jdm_cc_free").textContent        = s.free_space || "—";
                document.getElementById("jdm_cc_last_active").textContent = s.last_active || "—";
                document.getElementById("jdm_cc_status").textContent      = s.status || "—";
                if (covePanel)   covePanel.style.display   = "none";
                if (ccPanel)     ccPanel.style.display     = "";
                if (mailHeading) { mailHeading.style.display = ""; mailHeading.textContent = "Source report email"; }
                if (mailToggle)  { mailToggle.style.display = ""; mailToggle.textContent = "show"; }
                if (mailBody)    mailBody.style.display    = "none";
                if (mailPanel)   mailPanel.style.display = "";
                if (bodyFrame)   bodyFrame.srcdoc = wrapMailHtml(data.body_html || "");
              } else {
                if (covePanel)   covePanel.style.display   = "none";
                if (ccPanel)     ccPanel.style.display     = "none";
                if (mailHeading) { mailHeading.style.display = ""; mailHeading.textContent = "Mail"; }
                if (mailToggle)  mailToggle.style.display  = "none";
                if (mailBody)    mailBody.style.display    = "";
                if (mailPanel)   mailPanel.style.display = "";
                if (bodyFrame)   bodyFrame.srcdoc = wrapMailHtml(data.body_html || "");
              }

              renderObjects(data.objects || []);

              loadAlerts(currentRunId);
              modal.show();
            })
            .catch(function (err) {
              console.error(err);
            });
        });
      });
    }

    document.addEventListener("DOMContentLoaded", attachHandlers);
  })();
</script>

{% endblock %}