{% extends "base.html" %}
{% block title %}Schedules — Netcanon{% endblock %}

{% block content %}
<style>
  /* Schedule chrome — enabled/disabled badges reuse the existing
     --badge-* tokens (semantic colour preserved across themes); muted
     text columns flow through --text-muted / --text-faint. */
  .sched-form { margin-bottom:2rem; }
  .interval-row { display:flex; gap:.75rem; align-items:flex-end; flex-wrap:wrap; }
  .sched-table td { vertical-align:middle; }
  .enabled-badge  { background:var(--badge-completed-bg); color:var(--badge-completed-fg); }
  .disabled-badge { background:var(--badge-pending-bg); color:var(--badge-pending-fg); }
  .next-run { font-size:.82rem; color:var(--text-muted); }
  .last-run { font-size:.82rem; color:var(--text-muted); }
  .no-run   { color:var(--text-faint); }
</style>

<h1>Schedules</h1>

<!-- ── New schedule form ─────────────────────────────────────────── -->
<section data-testid="new-schedule-section">
  <h2>New Schedule</h2>
  <form id="sched-form" data-testid="schedule-form">
    <div class="form-row">
      <div class="form-group" style="flex:1;min-width:180px">
        <label>Schedule Name</label>
        <input id="sched-name" name="name" type="text"
               placeholder="e.g. Daily Cisco backup"
               data-testid="sched-name-input" required
               title="Shown in the schedules table and in job logs. Pick something a second operator would recognise without context.">
      </div>
      <div class="form-group">
        <label>Run every</label>
        <div class="interval-row">
          <select id="sched-interval-preset" data-testid="sched-interval-select"
                  title="How often the schedule fires. Cron expressions aren't supported — pick a preset or enter minutes via 'Custom…'.">
            <option value="60">1 hour</option>
            <option value="360">6 hours</option>
            <option value="720">12 hours</option>
            <option value="1440" selected>24 hours</option>
            <option value="10080">7 days</option>
            <option value="custom">Custom&hellip;</option>
          </select>
          <div id="sched-custom-wrap" style="display:none;gap:.35rem;align-items:center">
            <input id="sched-custom-mins" type="number" min="1" max="43200"
                   placeholder="minutes" style="width:90px"
                   data-testid="sched-custom-interval-input"
                   title="Minutes between runs (1 to 43,200 = 30 days). Schedule fires as soon as the interval elapses after the previous run.">
            <span style="font-size:.85rem;color:var(--text-muted)">min</span>
          </div>
        </div>
      </div>
    </div>

    <!-- ── Target by device type ─────────────────────────────────── -->
    <h3 style="font-size:.95rem;font-weight:600;margin:.9rem 0 .5rem;color:var(--text-primary)"
        title="Match-by-vendor: every saved Device Profile whose Device Type is checked here runs when the schedule fires. Unioned with 'Target Specific Devices' below.">
      Target by Device Type
      <span style="font-size:.8rem;font-weight:normal;color:var(--text-faint)">— back up all profiles of these types</span>
    </h3>
    <div id="sched-type-keys" data-testid="sched-type-keys-section"
         style="display:flex;gap:.5rem;flex-wrap:wrap;padding:.5rem;background:var(--surface-alt);border-radius:4px;margin-bottom:.75rem">
      {% for key, def in definitions.items() | sort %}
      <label style="display:flex;align-items:center;gap:.3rem;font-size:.85rem;font-weight:normal;cursor:pointer">
        <input type="checkbox" name="target_type_keys" value="{{ key }}"
               data-testid="sched-type-key-checkbox">
        {{ def.vendor }} {{ def.os }}
      </label>
      {% endfor %}
    </div>

    <!-- ── Target specific devices ──────────────────────────────────── -->
    <h3 style="font-size:.95rem;font-weight:600;margin:.9rem 0 .5rem;color:var(--text-primary)"
        title="Match-by-profile: explicitly listed profiles always run. Use for one-offs or to single out a device from a type-wide schedule.">
      Target Specific Devices
      <span style="font-size:.8rem;font-weight:normal;color:var(--text-faint)">— include individual profiles regardless of type</span>
    </h3>
    <div id="sched-devices" data-testid="sched-devices-section"
         style="display:flex;gap:.5rem;flex-wrap:wrap;padding:.5rem;background:var(--surface-alt);border-radius:4px;margin-bottom:.75rem">
      {% if device_profiles %}
        {% for profile in device_profiles %}
        <label style="display:flex;align-items:center;gap:.3rem;font-size:.85rem;font-weight:normal;cursor:pointer">
          <input type="checkbox" name="target_device_ids" value="{{ profile.id }}"
                 data-testid="sched-device-checkbox">
          <span class="badge" style="font-size:.75rem;background:var(--surface-elev);color:var(--text-primary)">{{ profile.type_key }}</span>
          {{ profile.name }}
          <span style="color:var(--text-faint);font-size:.75rem">{{ profile.host }}</span>
        </label>
        {% endfor %}
      {% else %}
      <p data-testid="no-profiles-for-sched-msg" style="color:var(--text-faint);font-style:italic;font-size:.85rem;margin:0">
        No device profiles saved yet. <a href="/devices">Add a device profile</a> first.
      </p>
      {% endif %}
    </div>

    <div class="form-row" style="margin-top:.75rem">
      <button type="submit" id="sched-submit-btn" class="btn-primary"
              data-testid="sched-submit-btn">Create Schedule</button>
    </div>
  </form>
</section>

<!-- ── Existing schedules ────────────────────────────────────────── -->
<section data-testid="schedules-section">
  <h2>Active Schedules</h2>

  {% if not schedules %}
  <p class="empty-msg" data-testid="no-schedules-msg">
    No schedules yet. Fill in the form above to create one.
  </p>
  {% else %}
  <table data-testid="schedules-table">
    <thead>
      <tr>
        <th>Name</th>
        <th>Interval</th>
        <th>Status</th>
        <th>Next run</th>
        <th>Last run</th>
        <th>Last job</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
    {% for sched in schedules %}
    <tr data-testid="schedule-row" data-schedule-id="{{ sched.id }}">
      <td data-testid="schedule-name"><strong>{{ sched.name }}</strong>
        <div style="font-size:.75rem;color:var(--text-faint);font-family:monospace">{{ sched.id[:8] }}&hellip;</div>
      </td>
      <td data-testid="schedule-interval">{{ format_interval(sched.interval_minutes) }}</td>
      <td>
        <button onclick="toggleSchedule('{{ sched.id }}')"
                data-testid="schedule-toggle-btn"
                class="badge {% if sched.enabled %}enabled-badge{% else %}disabled-badge{% endif %}"
                style="border:none;cursor:pointer;padding:.25rem .6rem">
          {{ 'Enabled' if sched.enabled else 'Disabled' }}
        </button>
      </td>
      <td class="next-run" data-testid="schedule-next-run"
          {% if sched.next_run_at %}data-utc="{{ sched.next_run_at.isoformat() }}"{% endif %}>
        {% if sched.next_run_at %}
          {{ sched.next_run_at.strftime('%Y-%m-%d %H:%M') }}
        {% else %}
          <span class="no-run">—</span>
        {% endif %}
      </td>
      <td class="last-run" data-testid="schedule-last-run"
          {% if sched.last_run_at %}data-utc="{{ sched.last_run_at.isoformat() }}"{% endif %}>
        {% if sched.last_run_at %}
          {{ sched.last_run_at.strftime('%Y-%m-%d %H:%M') }}
        {% else %}
          <span class="no-run">Never</span>
        {% endif %}
      </td>
      <td data-testid="schedule-last-job">
        {% if sched.last_job_id %}
          <a href="/jobs#{{ sched.last_job_id[:8] }}"
             style="font-family:monospace;font-size:.82rem">
            {{ sched.last_job_id[:8] }}&hellip;
          </a>
        {% else %}
          <span class="no-run">—</span>
        {% endif %}
      </td>
      <td>
        <button data-testid="schedule-delete-btn"
                onclick="deleteSchedule('{{ sched.id }}', this)"
                class="btn-danger">Delete</button>
        <span class="sched-confirm" style="display:none;gap:.35rem">
          Delete?
          <button data-testid="schedule-delete-confirm-btn"
                  onclick="confirmDeleteSchedule('{{ sched.id }}')"
                  class="btn-danger" style="font-size:.8rem">Yes</button>
          <button data-testid="schedule-delete-cancel-btn"
                  onclick="cancelDeleteSchedule(this)"
                  class="btn-secondary" style="font-size:.8rem">No</button>
        </span>
      </td>
    </tr>
    {% endfor %}
    </tbody>
  </table>
  {% endif %}
</section>
{% endblock %}

{% block scripts %}
<script>
const schedForm      = document.getElementById('sched-form');
const schedSubmitBtn = document.getElementById('sched-submit-btn');
const presetSel      = document.getElementById('sched-interval-preset');
const customWrap     = document.getElementById('sched-custom-wrap');
const customMins     = document.getElementById('sched-custom-mins');

/* ── Interval preset / custom toggle ── */
presetSel.addEventListener('change', function() {
  var isCustom = presetSel.value === 'custom';
  customWrap.style.display = isCustom ? 'flex' : 'none';
  if (isCustom) customMins.required = true;
  else customMins.required = false;
});

/* ── Form submission ── */
schedForm.addEventListener('submit', async function(e) {
  e.preventDefault();
  schedSubmitBtn.disabled = true;
  schedSubmitBtn.textContent = 'Creating\u2026';

  var intervalMins = presetSel.value === 'custom'
    ? parseInt(customMins.value, 10)
    : parseInt(presetSel.value, 10);

  var targetTypeKeys = Array.from(
    schedForm.querySelectorAll('[name="target_type_keys"]:checked')
  ).map(function(cb) { return cb.value; });

  var targetDeviceIds = Array.from(
    schedForm.querySelectorAll('[name="target_device_ids"]:checked')
  ).map(function(cb) { return cb.value; });

  if (!targetTypeKeys.length && !targetDeviceIds.length) {
    showToast('Select at least one device type or specific device.', 'error');
    schedSubmitBtn.disabled = false;
    schedSubmitBtn.textContent = 'Create Schedule';
    return;
  }

  try {
    var res = await fetch('/api/v1/schedules/', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        name: document.getElementById('sched-name').value,
        interval_minutes: intervalMins,
        target_type_keys: targetTypeKeys,
        target_device_ids: targetDeviceIds,
      }),
    });
    if (!res.ok) {
      var err = await res.json().catch(function() { return {}; });
      showToast('Error: ' + formatApiError(err, res.statusText), 'error');
      return;
    }
    showToast('Schedule created \u2014 reloading\u2026', 'success');
    setTimeout(function() { window.location.reload(); }, 800);
  } catch (err) {
    showToast('Network error: ' + err.message, 'error');
  } finally {
    schedSubmitBtn.disabled = false;
    schedSubmitBtn.textContent = 'Create Schedule';
  }
});

/* ── Toggle enable/disable ── */
async function toggleSchedule(schedId) {
  try {
    var res = await fetch('/api/v1/schedules/' + schedId + '/toggle', { method: 'POST' });
    if (!res.ok) {
      var d = await res.json().catch(function() { return {}; });
      showToast('Error: ' + formatApiError(d, res.statusText), 'error');
      return;
    }
    window.location.reload();
  } catch (err) {
    showToast('Network error: ' + err.message, 'error');
  }
}

/* ── Inline delete confirm ── */
function deleteSchedule(schedId, btn) {
  btn.style.display = 'none';
  var confirm = btn.nextElementSibling;
  confirm.style.display = 'inline-flex';
}

function cancelDeleteSchedule(btn) {
  var confirm = btn.closest('.sched-confirm');
  confirm.style.display = 'none';
  confirm.previousElementSibling.style.display = '';
}

async function confirmDeleteSchedule(schedId) {
  try {
    var res = await fetch('/api/v1/schedules/' + schedId, { method: 'DELETE' });
    if (res.status === 204) {
      showToast('Schedule deleted', 'success');
      var row = document.querySelector('[data-schedule-id="' + schedId + '"]');
      if (row) row.remove();
      var tbody = document.querySelector('[data-testid="schedules-table"] tbody');
      if (tbody && !tbody.querySelector('tr')) window.location.reload();
    } else {
      var d = await res.json().catch(function() { return {}; });
      showToast('Error: ' + formatApiError(d, res.statusText), 'error');
    }
  } catch (err) {
    showToast('Network error: ' + err.message, 'error');
  }
}
</script>
{% endblock %}