{% extends "base.html" %}
{% from "_macros.html" import help %}
{% block title %}{{ job.name }} — BackupWatch{% endblock %}
{% block content %}
{# onboarding_state is written by the onboarding workflow; older rows may not carry one, so every
   use is guarded and falls back to the raw value rather than assuming the vocabulary. #}
{% set STATE_LABELS = {'draft': 'Draft', 'observing': 'Observing', 'monitoring': 'Monitoring'} %}
{% set STATE_BADGE = {'draft': 'b-none', 'observing': 'b-warning', 'monitoring': 'b-success'} %}
{% set jst = job.onboarding_state %}
<a class="back" href="/clients/{{ job.client_id }}">&larr; {{ job.client.display_name }}</a>
<h1>{{ job.name }} <small>{{ job.vendor|vendor }}{% if job.target %} · {{ job.target }}{% endif %}</small>
  {% if job.auto_created %}<span class="badge b-none">auto-created</span>{% endif %}
  {% if job.silenced %}<span class="badge b-none">silenced</span>{% endif %}
  {% if jst %}<a class="badge {{ STATE_BADGE.get(jst|string, 'b-none') }}" href="/onboarding?client_id={{ job.client_id }}"
    title="Setup state — open Onboarding to review or activate this job">{{ STATE_LABELS.get(jst|string, jst|string) }}</a>{% endif %}</h1>
{% if jst and jst|string != 'monitoring' %}
<p class="note jd-observing">This job is <strong>{{ STATE_LABELS.get(jst|string, jst|string)|lower }}</strong>:
  it records matching reports and shows failures, but sends no alerts and raises no missed backups
  until it is activated in <a href="/onboarding?client_id={{ job.client_id }}">Onboarding</a>.</p>
{% endif %}
{% if err %}<div class="banner error">{{ err }}</div>{% endif %}
{% if msg %}<div class="banner ok">{{ msg }}</div>{% endif %}
<style>
  /* the OR badge says how a rule combines; this chip says who wrote it */
  .rule-origin { display:inline-block; margin-left:6px; padding:2px 7px; border-radius:5px;
    background:#f2f5fa; color:#5c6b84; font-family:var(--mono); font-size:10px; letter-spacing:.06em; }
  /* live rule test — visually the wizard's panel (client_detail.html .cd-test).
     ponytail: the panel's CSS/markup/JS is duplicated rather than pulled into a shared include;
     the JS is ~30 lines, under the extraction threshold, and the two pages scope their own
     styles. Ceiling: a third caller should force _rule_test_panel.html. */
  .jd-test { background:#f7f9fd; border:1px solid #eaeff6; border-radius:12px; padding:15px 17px;
    max-width:520px; margin-top:12px; }
  .jd-test .lbl { font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; color:#7c8ba3; margin-bottom:4px; }
  .jd-test .scope { font-size:12.5px; color:#6b7a90; margin-bottom:10px; }
  .jd-test .big { font-size:26px; font-weight:700; letter-spacing:-.02em; margin-bottom:10px; }
  .jd-test .big.ok { color:#0f8f47; } .jd-test .big.none { color:#d93a3f; }
  .jd-test .big.broad { color:#9a6f00; }
  .jd-test .steal { background:#fdf3e0; border:1px solid #f3e2bd; border-radius:8px; padding:8px 10px;
    font-size:12.5px; color:#9a6f00; line-height:1.55; margin-bottom:10px; }
  .jd-test .card { background:#fff; border:1px solid #e6ebf3; border-radius:8px; padding:8px 11px; margin:7px 0;
    font-family:var(--mono); font-size:11.5px; color:#22304a; overflow:hidden; }
  .jd-test .card .frm { color:#8595ad; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .jd-test .card .sbj { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:2px; }
  .jd-test .card .own { color:#9a6f00; font-size:10.5px; margin-top:3px; white-space:nowrap;
    overflow:hidden; text-overflow:ellipsis; }
  .jd-test .warn0 { font-size:12.5px; color:#b3402f; line-height:1.55; }
  .jd-observing { background:#fdf3e0; border:1px solid #f3e2bd; border-radius:9px;
    padding:10px 13px; color:#7a5c14; line-height:1.6; max-width:640px; margin:10px 0 4px; }
  .jd-observing a { color:#9a6f00; font-weight:600; text-decoration:underline; }
  .jd-days { border:1px solid var(--line); border-radius:9px; padding:6px 12px 10px;
    margin:10px 0; max-width:440px; }
  .jd-days legend { font-size:12.5px; color:var(--muted); padding:0 4px; }
  .jd-days .why { font-size:12.5px; line-height:1.55; margin:2px 0 6px; }
</style>

{% if user.role in ['admin', 'tech'] %}
<h2>Settings</h2>
<form method="post" action="/jobs/{{ job.id }}" class="panel">
  <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
  <label>Name <input name="name" value="{{ job.name }}" required></label>
  <label>Vendor
    <select name="vendor">
      {% for v in ["veeam","dropsuite","synology","cloudally","other"] %}
      <option value="{{ v }}" {{ "selected" if job.vendor==v }}>{{ v|vendor }}</option>
      {% endfor %}
    </select></label>
  <label>Target <input name="target" value="{{ job.target }}"></label>
  <label>Frequency {{ help("Daily = one backup expected each day. Interval = a backup expected every N minutes within the active window set under Advanced.") }}
    <select name="frequency">
      {% for val, lbl in freq_options %}<option value="{{ val }}" {{ "selected" if freq_value==val }}>{{ lbl }}</option>{% endfor %}
    </select></label>
  <label data-sched="daily">Expected by (daily) {{ help("For daily jobs: the time a successful backup should arrive by each day.") }} <input type="time" name="expected_time" value="{{ job.expected_time }}"></label>
  <label data-sched="daily">Grace hours (daily) {{ help("How long after the expected time to wait before flagging the backup as missed.") }} <input type="number" name="grace_hours" value="{{ job.grace_hours }}" min="0"></label>
  <details data-sched="interval" {{ "open" if job.frequency == 'interval' }}>
    <summary>Advanced — interval window</summary>
    <label>Active window start <input type="time" name="window_start" value="{{ job.window_start }}"></label>
    <label>Active window end <input type="time" name="window_end" value="{{ job.window_end }}"></label>
    <label>Grace minutes (interval) <input type="number" name="grace_minutes" value="{{ job.grace_minutes }}" min="0"></label>
  </details>
  {# Run-on days sit outside the interval block: missed detection applies them to daily schedules
     too, so a weekday-only or weekly daily job has to be configurable here. #}
  <fieldset class="jd-days"><legend>Run on</legend>
    <p class="note why">Applies to daily and interval schedules. Leave every day unticked to expect a
      backup every day; tick days for a weekday-only or weekly job.</p>
    {% for val, lbl in day_labels %}<label class="inline"><input type="checkbox" name="days" value="{{ val }}" {{ "checked" if val in job_days }}> {{ lbl }}</label>{% endfor %}
  </fieldset>
  {% if schedule_timezone %}<p class="note" style="margin:2px 0 12px">Schedule times are read in
    <strong>{{ schedule_timezone }}</strong> — the same timezone the missed-backup check uses.</p>{% endif %}
  <p class="note" style="margin:2px 0 12px">Backup day: <strong>{{ backup_day_hint }}</strong>
    {{ help("A run landing anywhere in this window counts as that day's backup — on the history chart and for missed detection alike. Missed detection expects a SUCCESSFUL report inside the window: a failure is recorded and alerted on, but does not satisfy the day. The window closes at the expected time plus the grace, so an overnight run started last night is today's backup. Change the expected time or grace to move the boundary.") }}</p>
  <label class="inline"><input type="checkbox" name="active" {{ "checked" if job.active }}> Active</label>
  <div><button type="submit">Save changes</button></div>
</form>
<div class="row">
  <a class="btn-secondary" href="/jobs/{{ job.id }}/clone">Clone this job {{ help("Create a new job pre-filled from this one — edit the name, client, schedule and match rules before saving. Handy for a second job of the same kind (e.g. another Synology backup task).") }}</a>
  <form method="post" action="/jobs/{{ job.id }}/delete" onsubmit="return confirm('Delete job? History is kept.')">
    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
    <button class="danger" type="submit">Delete job</button>
  </form>
</div>

<h2>Maintenance {{ help("Muting suppresses missed-backup detection and failure alerts for this job during planned downtime. The job still records events; you just won't be paged.") }}</h2>
<form method="post" action="/jobs/{{ job.id }}/mute" class="row">
  <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
  {% if muted %}
  <span class="badge b-warning">muted until {{ job.muted_until|dt }}</span>
  <button type="submit" name="hours" value="0" class="btn-secondary">Unmute now</button>
  {% else %}
  <span class="note">Mute alerts for:</span>
  <button type="submit" name="hours" value="1" class="btn-secondary">1 hour</button>
  <button type="submit" name="hours" value="24" class="btn-secondary">24 hours</button>
  <button type="submit" name="hours" value="168" class="btn-secondary">7 days</button>
  {% endif %}
</form>

<h3>Silence {{ help("For ad-hoc or non-critical backups: the job keeps matching emails and recording events (history is preserved), but never alerts on failure or missed, is skipped by missed-detection, and is hidden from the dashboard and daily digest. Unlike muting, this is permanent until you turn it off.") }}</h3>
{% if job.silenced %}
<form method="post" action="/jobs/{{ job.id }}/silence" class="row">
  <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
  <span class="badge b-none">silenced — tracked, no alerts, off-dashboard</span>
  <button type="submit" name="on" value="0" class="btn-secondary">Un-silence</button>
</form>
{% else %}
<form method="post" action="/jobs/{{ job.id }}/silence" class="row"
      onsubmit="return confirm('Silence this job? It will stop alerting and disappear from the dashboard and daily digest. It stays tracked on the client page.')">
  <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
  <span class="note">Track this job without alerting or showing it on the dashboard:</span>
  <button type="submit" name="on" value="1" class="btn-secondary">Silence this job</button>
</form>
{% endif %}

<h2>Match rules {{ help("Rules decide which emails belong to this job. AND rules must all match. Rules in the same OR group count as one condition satisfied by any of its members — from X AND (subject A OR subject B). Fully-OR rules match on any one — the add-job wizard's ANY mode writes those, and so does assigning an email from the Review queue (those carry a 'learned' chip).") }}</h2>
<div class="table-wrap">
<table>
  <thead><tr><th>Field</th><th>Operator</th><th>Value</th><th>Case</th><th>Source</th>
    <th>Matched {{ help("How many emails this rule has filed, and when it last matched. A rule that never matches may be dead; manual AND matches credit the first manual rule.") }}</th><th></th></tr></thead>
  <tbody>
  {% for r in job.rules|sort(attribute='or_group') %}
    {% set h = rule_hits.get(r.id) %}
    {% if edit_rid == r.id %}
    <tr><td colspan="7">
      <form method="post" action="/rules/{{ r.id }}/edit" class="row">
        <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
        <select name="field">{% for f in rule_fields %}<option {{ "selected" if r.field==f }}>{{ f }}</option>{% endfor %}</select>
        <select name="operator">{% for o in rule_ops %}<option {{ "selected" if r.operator==o }}>{{ o }}</option>{% endfor %}</select>
        <input name="value" value="{{ r.value }}" required>
        <label class="inline"><input type="checkbox" name="case_sensitive" {{ "checked" if r.case_sensitive }}> case</label>
        <button type="submit">Save</button>
        <a class="link" href="/jobs/{{ job.id }}">cancel</a>
        {% if r.learned %}<span class="note">saving makes this a manual (AND) rule</span>{% endif %}
      </form>
    </td></tr>
    {% else %}
    <tr><td>{{ r.field }}</td><td>{{ r.operator }}</td><td>{{ r.value }}</td>
      <td>{{ "Yes" if r.case_sensitive else "No" }}</td>
      <td>{% if r.is_or() %}<span class="badge b-success">OR · any matches</span>{% if r.machine_learned()
        %}<span class="rule-origin">learned</span>{% endif %}{% elif r.or_group %}<span class="badge b-success">OR group {{ r.or_group }} · one of these</span>{% else %}<span class="badge b-none">AND · all must match</span>{% endif %}</td>
      <td>{% if h %}{{ h[0] }} · last {{ h[1]|dt }}{% else %}<span class="note">never</span>{% endif %}</td>
      <td><a class="link" href="/jobs/{{ job.id }}?edit={{ r.id }}">edit</a>
        <form method="post" action="/rules/{{ r.id }}/delete" style="display:inline">
  <input type="hidden" name="csrf_token" value="{{ csrf_token }}"><button class="link" type="submit">delete</button></form></td></tr>
    {% endif %}
  {% else %}
    <tr><td colspan="7">No rules — this job will never auto-match.</td></tr>
  {% endfor %}
  </tbody>
</table>
</div>
<p class="note">AND rules must all match; rules in the same OR group count as one condition met by any of its members; fully-OR rules match on any one. The <em>learned</em> chip marks rules the engine wrote itself when an email was assigned in Review — the rest were written by hand.</p>
<form method="post" action="/jobs/{{ job.id }}/rules" class="row">
  <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
  <select name="field"><option>subject</option><option>from</option><option>body</option></select>
  <select name="operator"><option>contains</option><option>equals</option><option>regex</option></select>
  <input name="value" placeholder="value" required>
  <label class="inline"><input type="checkbox" name="case_sensitive"> case</label>
  <select name="or_with" title="AND adds a condition every email must meet; OR with pairs this rule with an existing one so either satisfies that condition">
    <option value="">AND — must also match</option>
    {% for r in job.rules if not r.learned %}
    <option value="{{ r.id }}">OR with: {{ r.field }} {{ r.operator }} “{{ r.value|truncate(28, True) }}”</option>
    {% endfor %}
  </select>
  <button type="submit">Add rule</button>
</form>

<div class="row">
  <button type="button" class="btn-secondary" id="jd-test-btn">Test rules against recent email</button>
  {{ help("Runs this job's saved rules over the most recent report emails and shows what they would catch — including anything already filed to another client, which means the rules are too broad.") }}
</div>
<div class="jd-test" id="jd-test-panel" style="display:none">
  <div class="lbl">LIVE TEST</div>
  <div class="scope" id="jd-test-scope">Against the most recent report emails received for this mailbox:</div>
  <div class="big" id="jd-test-count">—</div>
  <div class="steal" id="jd-test-steal" style="display:none"></div>
  <div id="jd-test-samples"></div>
  <div class="warn0" id="jd-test-warn" style="display:none">No matching reports in this sample. That is no evidence either way — widen the search or check a known report before changing these rules.</div>
</div>
<script>
(function () {
  "use strict";
  var btn = document.getElementById("jd-test-btn");
  if (!btn) { return; }
  btn.addEventListener("click", function () {           // on click, never on load
    var panel = document.getElementById("jd-test-panel");
    panel.style.display = "";
    document.getElementById("jd-test-count").textContent = "…";
    var fd = new FormData();
    fd.append("csrf_token", "{{ csrf_token }}");
    fetch("/jobs/{{ job.id }}/test-rules", { method: "POST", body: fd })
      .then(function (r) { return r.json(); })
      .then(function (d) {
        document.getElementById("jd-test-scope").textContent =
          "Against the last " + d.total + " report email" + (d.total === 1 ? "" : "s") + " received for this mailbox:";
        var other = d.other_count || 0;
        var big = document.getElementById("jd-test-count");
        big.textContent = d.count + " match" + (d.count === 1 ? "" : "es");
        // green only when nothing is stolen from another client; amber when some is
        big.className = "big " + (d.count === 0 ? "none" : (other > 0 ? "broad" : "ok"));
        var steal = document.getElementById("jd-test-steal");
        steal.textContent = other > 0
          ? "⚠ " + other + " of these already belong to other clients' jobs — this rule is too broad."
          : "";
        steal.style.display = other > 0 ? "" : "none";
        var s = document.getElementById("jd-test-samples");
        s.innerHTML = "";
        d.samples.forEach(function (m) {
          var c = document.createElement("div");
          c.className = "card";
          c.innerHTML = '<div class="sbj"></div><div class="frm"></div><div class="own"></div>';
          c.querySelector(".sbj").textContent = m.subject;
          c.querySelector(".frm").textContent = m.from;
          var own = c.querySelector(".own");
          if (m.owner && m.owner !== "unfiled" && m.owner !== "this_client") {
            own.textContent = "already filed to " + m.owner;   // textContent: owner is client data
          } else {
            own.style.display = "none";
          }
          s.appendChild(c);
        });
        // absence of evidence, not evidence the rules are wrong: name the sample rather than
        // telling the author to loosen rules that may simply have nothing to match yet
        document.getElementById("jd-test-warn").textContent =
          "No matching reports in the last " + d.total + " report email" + (d.total === 1 ? "" : "s") +
          " received. That is no evidence either way — widen the search or check a known report " +
          "before changing these rules.";
        document.getElementById("jd-test-warn").style.display = d.count === 0 ? "" : "none";
      })
      .catch(function () {
        document.getElementById("jd-test-count").textContent = "test failed";
      });
  });
})();
</script>
{% endif %}

<h2>History</h2>
<div class="table-wrap">
<table>
  <thead><tr><th>When</th><th>Status</th><th>Vendor</th><th>Subject</th><th>From</th></tr></thead>
  <tbody>
  {% for e in events %}
    <tr>
      <td><a href="/events/{{ e.id }}">{{ e.received_at|dt }}</a></td>
      <td><span class="badge b-{{ e.status }}">{{ e.status }}</span></td>
      <td>{{ e.vendor_detected|vendor }}</td>
      <td><a href="/events/{{ e.id }}">{{ e.email_subject }}</a></td><td>{{ e.email_from }}</td>
    </tr>
  {% else %}
    <tr><td colspan="5">No events yet.</td></tr>
  {% endfor %}
  </tbody>
</table>
</div>
{% include "_sched_toggle.html" %}
{% endblock %}