{% extends "admin/base.html" %}

{% block title %}Schedules — cmdop admin{% endblock %}

{% block content %}
{% from 'admin/components/ui.html' import card, input, pagination, tooltip, page_header %}

<div class="space-y-6" x-data="schedulesPage()" x-init="load()" @keydown.escape.window="closeAll()">
  {{ page_header(
    'Schedules',
    'Cron jobs that dispatch shell commands to fleet machines.',
    help_anchor='schedules',
    actions=[
      {'label': 'Refresh', 'kind': 'secondary', 'icon': 'refresh-cw',
       'attrs': '@click="load()"'},
      {'label': 'New schedule', 'kind': 'primary', 'icon': 'plus',
       'attrs': '@click="openCreate()"'},
    ]
  ) }}

  <!-- Create/Edit modal -->
  <template x-teleport="body">
  <div x-show="showModal" x-cloak class="fixed inset-0 z-50 flex items-center justify-center p-4">
    <div class="absolute inset-0 bg-black/60" @click="closeModal()"></div>
    <div class="relative w-full max-w-lg rounded-lg border border-white/[0.08] bg-ink-950 p-6 shadow-2xl max-h-[90vh] overflow-y-auto">
      <h3 class="text-[15px] font-semibold text-ink-100 tracking-tight mb-1" x-text="editing ? 'Edit schedule' : 'Create schedule'"></h3>
      <p class="text-[11px] text-ink-500 mb-5">Cron firing fan-outs to the selected machines.</p>
      <form @submit.prevent="saveSchedule()" class="space-y-4">
        {{ input("s_name", label="Name", placeholder="Daily backup", required=true) }}
        <div class="space-y-1.5">
          <label class="block text-[11px] uppercase tracking-wider font-medium text-ink-500">Description</label>
          <textarea id="s_description" rows="2" class="w-full px-3 py-2 bg-black border border-white/[0.08] hover:border-white/[0.16] focus:border-cmdop-500 rounded-md text-[13px] text-ink-100 placeholder-ink-600 focus:outline-none focus:ring-1 focus:ring-cmdop-500/30 transition-colors" placeholder="Optional description"></textarea>
        </div>
        <div class="grid grid-cols-2 gap-4">
          <div class="space-y-1.5">
            <label for="s_cron" class="flex items-center gap-1 text-[11px] uppercase tracking-wider font-medium text-ink-500">
              Cron expression<span class="text-red-400 ml-0.5">*</span>
              {{ tooltip("Schedule format: minute hour day-of-month month day-of-week. Try crontab.guru for help.") }}
            </label>
            <input id="s_cron" type="text" required spellcheck="false"
                   placeholder="0 2 * * *"
                   class="w-full px-3 py-2 bg-black border border-white/[0.08] hover:border-white/[0.16] focus:border-cmdop-500 rounded-md text-[13px] text-ink-100 placeholder-ink-600 focus:outline-none focus:ring-1 focus:ring-cmdop-500/30 transition-colors font-mono">
            <a href="https://crontab.guru" target="_blank" rel="noopener" class="inline-flex items-center gap-1 text-[11px] text-cmdop-400 hover:text-cmdop-300">
              <i data-lucide="external-link" class="w-3 h-3"></i>
              crontab.guru
            </a>
          </div>
          {{ input("s_timezone", label="Timezone", value="UTC", placeholder="UTC", required=true) }}
        </div>
        <div class="space-y-1.5">
          <label class="block text-[11px] uppercase tracking-wider font-medium text-ink-500">Command</label>
          <textarea id="s_command" rows="3" class="w-full px-3 py-2 bg-black border border-white/[0.08] hover:border-white/[0.16] focus:border-cmdop-500 rounded-md text-[13px] text-ink-100 placeholder-ink-600 focus:outline-none focus:ring-1 focus:ring-cmdop-500/30 transition-colors font-mono" placeholder="/bin/bash -c 'echo hello'" required></textarea>
        </div>
        <div class="space-y-1.5">
          <label class="block text-[11px] uppercase tracking-wider font-medium text-ink-500">Target</label>
          <select id="s_target" x-model="targetKind"
                  class="w-full px-3 py-2 bg-black border border-white/[0.08] hover:border-white/[0.16] focus:border-cmdop-500 rounded-md text-[13px] text-ink-100 focus:outline-none focus:ring-1 focus:ring-cmdop-500/30 transition-colors">
            <option value="all_fleet_machines">All fleet machines</option>
            <option value="specific_machines">Specific machines</option>
          </select>
        </div>
        {# Plan 61/2b-W4 A2 — picker for "Specific machines" target. #}
        <div class="space-y-1.5" x-show="targetKind === 'specific_machines'" x-cloak>
          <label class="flex items-center gap-1 text-[11px] uppercase tracking-wider font-medium text-ink-500">
            Machines<span class="text-red-400 ml-0.5">*</span>
            {{ tooltip("Picks the machines that will receive this command. Offline machines are skipped at fire time.") }}
          </label>
          <div class="rounded-md border border-white/[0.08] bg-black max-h-44 overflow-y-auto divide-y divide-white/[0.04]">
            <template x-if="loadingMachines">
              <div class="px-3 py-2 text-[12px] text-ink-500">Loading machines…</div>
            </template>
            <template x-if="!loadingMachines && machines.length === 0">
              <div class="px-3 py-2 text-[12px] text-ink-500">No machines in this fleet yet.</div>
            </template>
            <template x-for="m in machines" :key="m.id">
              <label class="flex items-center gap-2 px-3 py-1.5 hover:bg-white/[0.02] cursor-pointer">
                <input type="checkbox"
                       :value="m.id"
                       x-model="selectedMachineIds"
                       class="rounded bg-black border-white/[0.12] text-cmdop-500 focus:ring-cmdop-500/30">
                <span class="text-[13px] text-ink-100" x-text="m.hostname || m.name || m.id"></span>
                <span class="text-[11px] text-ink-500 font-mono" x-text="(m.presence || '').toLowerCase()"></span>
              </label>
            </template>
          </div>
          <p x-show="targetKind === 'specific_machines' && selectedMachineIds.length === 0" x-cloak
             class="text-[11px] text-amber-300">Select at least one machine.</p>
        </div>
        <div class="flex items-center gap-2">
          <input type="checkbox" id="s_enabled" class="rounded bg-black border-white/[0.12] text-cmdop-500 focus:ring-cmdop-500/30">
          <label for="s_enabled" class="text-[13px] text-ink-300 cursor-pointer">Enabled</label>
        </div>
        <p x-show="formError" x-cloak class="text-[12px] text-red-300" x-text="formError"></p>
        <div class="flex justify-end gap-3 pt-2">
          <button type="button" @click="closeModal()" class="px-3 py-1.5 text-[13px] text-ink-400 hover:text-ink-100">Cancel</button>
          <button type="submit" :disabled="saving" class="px-3 py-1.5 bg-white hover:bg-ink-100 text-black text-[13px] font-medium rounded-md disabled:opacity-50">
            <span x-text="saving ? 'Saving…' : (editing ? 'Update' : 'Save')"></span>
          </button>
        </div>
      </form>
    </div>
  </div>
  </template>

  <!-- Delete confirmation modal -->
  <template x-teleport="body">
  <div x-show="showDelete" x-cloak class="fixed inset-0 z-50 flex items-center justify-center p-4">
    <div class="absolute inset-0 bg-black/60" @click="closeDelete()"></div>
    <div class="relative w-full max-w-md rounded-lg border border-white/[0.08] bg-ink-950 p-6 shadow-2xl">
      <div class="flex items-start gap-3 mb-4">
        <div class="flex-shrink-0 w-9 h-9 rounded-md bg-red-500/[0.08] border border-red-500/30 flex items-center justify-center">
          <i data-lucide="alert-triangle" class="w-4 h-4 text-red-300"></i>
        </div>
        <div>
          <h3 class="text-[15px] font-semibold text-ink-100 tracking-tight">Delete schedule?</h3>
          <p class="text-[13px] text-ink-400 mt-1">
            <span class="text-ink-200" x-text="deleteTarget.name"></span> will be removed and never fire again.
          </p>
          <p class="text-[11px] text-ink-500 mt-2">Historical runs are kept.</p>
        </div>
      </div>
      <div class="flex justify-end gap-3">
        <button type="button" @click="closeDelete()" class="px-3 py-1.5 text-[13px] text-ink-400 hover:text-ink-100">Cancel</button>
        <button type="button" @click="confirmDelete()" :disabled="deleteLoading" class="px-3 py-1.5 border border-red-500/30 hover:border-red-500/50 bg-red-500/[0.06] hover:bg-red-500/[0.10] text-red-200 text-[13px] font-medium rounded-md disabled:opacity-50">
          <span x-text="deleteLoading ? 'Deleting…' : 'Delete'"></span>
        </button>
      </div>
    </div>
  </div>
  </template>

  {% call card() %}
  <div class="overflow-x-auto">
    <table class="w-full text-[13px] text-left">
      <thead class="text-[11px] text-ink-500 uppercase tracking-wider border-b border-white/[0.06]">
        <tr>
          <th class="px-4 py-3 font-medium">Name</th>
          <th class="px-4 py-3 font-medium">
            <span class="inline-flex items-center gap-1">Cron {{ tooltip("Schedule format: minute hour day-of-month month day-of-week. Try crontab.guru for help.") }}</span>
          </th>
          <th class="px-4 py-3 font-medium">Target</th>
          <th class="px-4 py-3 font-medium">Last run</th>
          <th class="px-4 py-3 font-medium">Next run</th>
          <th class="px-4 py-3 font-medium">Status</th>
          <th class="px-4 py-3 font-medium text-right">Actions</th>
        </tr>
      </thead>
      <tbody class="divide-y divide-white/[0.06]">
        <tr x-show="pagination.loading" x-cloak>
          <td colspan="7" class="px-4 py-8 text-center text-ink-500">
            <i data-lucide="loader-2" class="w-4 h-4 inline-block animate-spin mr-1.5"></i>
            Loading schedules…
          </td>
        </tr>
        <tr x-show="!pagination.loading && pagination.error" x-cloak>
          <td colspan="7" class="px-4 py-8 text-center">
            <i data-lucide="alert-triangle" class="w-6 h-6 mx-auto text-red-400 mb-2"></i>
            <p class="text-[13px] text-ink-200">Couldn't load schedules.</p>
            <p class="text-[12px] text-ink-500 mt-1" x-text="pagination.error"></p>
            <button @click="load()" class="mt-3 inline-flex items-center gap-1.5 px-2.5 py-1 text-[12px] text-ink-300 hover:text-ink-100 border border-white/[0.08] hover:border-white/[0.16] rounded-md transition-colors">Try again</button>
          </td>
        </tr>
        <tr x-show="!pagination.loading && !pagination.error && pagination.items.length === 0" x-cloak>
          <td colspan="7" class="px-4 py-12 text-center">
            <i data-lucide="calendar-clock" class="w-10 h-10 mx-auto text-ink-600 mb-3"></i>
            <p class="text-[13px] font-medium text-ink-200">No schedules yet</p>
            <p class="text-[12px] text-ink-500 mt-1">Click <b class="text-ink-200">+ New schedule</b> to create one.</p>
          </td>
        </tr>
        <template x-for="s in pagination.items" :key="s.id">
          <tr class="hover:bg-white/[0.02] transition-colors">
            <td class="px-4 py-3 min-w-0">
              <p class="font-medium text-ink-100 truncate max-w-[220px]" :title="s.name" x-text="s.name"></p>
              <p class="text-[11px] text-ink-500 truncate max-w-[220px]" :title="s.description" x-text="s.description || ''"></p>
            </td>
            <td class="px-4 py-3">
              <code class="text-[12px] bg-black px-2 py-0.5 rounded border border-white/[0.08] text-cmdop-300 font-mono" x-text="s.cron_expr"></code>
              <p class="text-[11px] text-ink-500 mt-0.5 font-mono" x-text="s.timezone"></p>
            </td>
            <td class="px-4 py-3 text-ink-400 text-[12px] font-mono" x-text="s.target_kind"></td>
            <td class="px-4 py-3 text-ink-400 text-[12px] font-mono">
              <template x-if="s.last_run_at">
                <span :title="new Date(s.last_run_at).toLocaleString()" x-text="formatRelative(s.last_run_at)"></span>
              </template>
              <template x-if="!s.last_run_at"><span class="text-ink-600">Never</span></template>
            </td>
            <td class="px-4 py-3 text-ink-400 text-[12px] font-mono">
              <template x-if="s.next_run_at && s.is_enabled">
                <span :title="new Date(s.next_run_at).toLocaleString()" x-text="formatRelative(s.next_run_at, true)"></span>
              </template>
              <template x-if="!s.next_run_at || !s.is_enabled"><span class="text-ink-600">—</span></template>
            </td>
            <td class="px-4 py-3">
              <div class="flex items-center gap-2">
                <span class="w-1.5 h-1.5 rounded-full" :class="statusDot(s)"></span>
                <span class="text-[12px]" :class="statusTextClass(s)" x-text="statusOf(s)"></span>
              </div>
            </td>
            <td class="px-4 py-3 text-right whitespace-nowrap">
              <button @click="runNow(s)" :disabled="runningId === s.id || !s.is_enabled" class="text-[12px] text-cmdop-400 hover:text-cmdop-300 disabled:text-ink-600 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-cmdop-500/40 rounded px-1.5 py-0.5 mr-1" :aria-label="'Trigger ' + s.name + ' now'" :title="s.is_enabled ? 'Trigger this schedule now' : 'Enable the schedule first'">
                <span x-text="runningId === s.id ? 'Queuing…' : 'Run now'"></span>
              </button>
              <button @click="editSchedule(s.id)" class="text-[12px] text-ink-300 hover:text-ink-100 focus:outline-none focus:ring-2 focus:ring-cmdop-500/40 rounded px-1.5 py-0.5 mr-1" :aria-label="'Edit ' + s.name">Edit</button>
              <button @click="askDelete(s)" class="text-[12px] text-red-400 hover:text-red-300 focus:outline-none focus:ring-2 focus:ring-red-500/40 rounded px-1.5 py-0.5" :aria-label="'Delete ' + s.name">Delete</button>
            </td>
          </tr>
        </template>
      </tbody>
    </table>
  </div>
  {{ pagination('pagination') }}
  {% endcall %}
</div>

<script>
const FLEET_ID = '{{ fleet.id }}';

function schedulesPage() {
  return {
    // Plan 60 Phase 1.5 — pagination state for the schedules table.
    pagination: paginationState({
      mode: 'offset',
      endpoint: `/api/fleets/${FLEET_ID}/schedules`,
      perPage: 25,
      storageKey: 'cmdop.pagination.schedules.perPage',
    }),

    showModal: false,
    editing: null,
    saving: false,
    formError: '',

    showDelete: false,
    deleteTarget: { id: '', name: '' },
    deleteLoading: false,

    runningId: '',

    // Plan 61/2b-W4 A2 — machine picker state.
    targetKind: 'all_fleet_machines',
    machines: [],
    selectedMachineIds: [],
    loadingMachines: false,

    async loadMachines() {
      this.loadingMachines = true;
      try {
        const res = await fetch('/api/machines?limit=200');
        if (res.ok) {
          const data = await res.json();
          this.machines = (data && data.items) || [];
        } else {
          this.machines = [];
        }
      } catch (e) {
        this.machines = [];
      } finally {
        this.loadingMachines = false;
      }
    },

    openCreate() {
      this.editing = null;
      this.formError = '';
      this.targetKind = 'all_fleet_machines';
      this.selectedMachineIds = [];
      this.showModal = true;
      this.loadMachines();
      this.$nextTick(() => {
        document.getElementById('s_name').value = '';
        document.getElementById('s_description').value = '';
        document.getElementById('s_cron').value = '';
        document.getElementById('s_timezone').value = 'UTC';
        document.getElementById('s_command').value = '';
        document.getElementById('s_target').value = 'all_fleet_machines';
        document.getElementById('s_enabled').checked = true;
        document.getElementById('s_name')?.focus();
      });
    },
    closeModal() {
      this.showModal = false;
      this.editing = null;
      this.formError = '';
    },

    askDelete(s) {
      this.deleteTarget = { id: s.id, name: s.name };
      this.showDelete = true;
    },
    closeDelete() {
      this.showDelete = false;
      this.deleteLoading = false;
    },

    closeAll() {
      if (this.showDelete) return this.closeDelete();
      if (this.showModal) return this.closeModal();
    },

    async load() {
      await this.pagination.fetch();
      this.$nextTick(() => { if (window.lucide) window.lucide.createIcons(); });
    },

    async editSchedule(id) {
      try {
        const res = await fetch(`/api/fleets/${FLEET_ID}/schedules/${id}`);
        if (!res.ok) { toast(`Failed to load schedule (${res.status})`, 'error'); return; }
        const s = await res.json();
        this.editing = id;
        this.formError = '';
        this.targetKind = s.target_kind || 'all_fleet_machines';
        this.selectedMachineIds = Array.isArray(s.machine_ids) ? [...s.machine_ids] : [];
        this.showModal = true;
        this.loadMachines();
        this.$nextTick(() => {
          document.getElementById('s_name').value = s.name;
          document.getElementById('s_description').value = s.description || '';
          document.getElementById('s_cron').value = s.cron_expr;
          document.getElementById('s_timezone').value = s.timezone;
          document.getElementById('s_command').value = s.command;
          document.getElementById('s_target').value = s.target_kind;
          document.getElementById('s_enabled').checked = s.is_enabled;
        });
      } catch (e) {
        toast(e.message || 'Network error', 'error');
      }
    },

    async saveSchedule() {
      // Plan 61/2b-W4 A2 — enforce machine selection for specific_machines target.
      if (this.targetKind === 'specific_machines' && this.selectedMachineIds.length === 0) {
        this.formError = 'Select at least one machine for "Specific machines" target.';
        return;
      }
      this.saving = true;
      this.formError = '';
      const body = {
        name: document.getElementById('s_name').value,
        description: document.getElementById('s_description').value,
        cron_expr: document.getElementById('s_cron').value,
        timezone: document.getElementById('s_timezone').value,
        command: document.getElementById('s_command').value,
        target_kind: document.getElementById('s_target').value,
        is_enabled: document.getElementById('s_enabled').checked,
        machine_ids: this.targetKind === 'specific_machines' ? this.selectedMachineIds : [],
      };
      const url = this.editing
        ? `/api/fleets/${FLEET_ID}/schedules/${this.editing}`
        : `/api/fleets/${FLEET_ID}/schedules`;
      try {
        const res = await fetch(url, {
          method: this.editing ? 'PATCH' : 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(body),
        });
        if (res.ok) {
          toast(this.editing ? 'Schedule updated' : 'Schedule created', 'success');
          this.closeModal();
          this.load();
        } else {
          const data = await res.json().catch(() => ({}));
          this.formError = data.detail || `Failed to save (${res.status})`;
        }
      } catch (e) {
        this.formError = e.message || 'Network error';
      } finally {
        this.saving = false;
      }
    },

    async confirmDelete() {
      this.deleteLoading = true;
      try {
        const res = await fetch(`/api/fleets/${FLEET_ID}/schedules/${this.deleteTarget.id}`, { method: 'DELETE' });
        if (res.ok || res.status === 204) {
          toast('Schedule deleted', 'success');
          this.closeDelete();
          this.load();
        } else {
          const data = await res.json().catch(() => ({}));
          toast(data.detail || 'Failed to delete', 'error');
          this.deleteLoading = false;
        }
      } catch (e) {
        toast(e.message || 'Network error', 'error');
        this.deleteLoading = false;
      }
    },

    async runNow(s) {
      if (!s.is_enabled) {
        toast('Enable the schedule before triggering it manually', 'error');
        return;
      }
      this.runningId = s.id;
      try {
        const res = await fetch(`/api/fleets/${FLEET_ID}/schedules/${s.id}/run`, { method: 'POST' });
        if (res.ok || res.status === 202) {
          toast(`${s.name} queued to run`, 'success');
        } else {
          const data = await res.json().catch(() => ({}));
          toast(data.detail || `Failed to trigger (${res.status})`, 'error');
        }
      } catch (e) {
        toast(e.message || 'Network error', 'error');
      } finally {
        this.runningId = '';
      }
    },

    statusOf(s) {
      if (!s.is_enabled) return 'Disabled';
      if (s.last_status === 'failed') return 'Last failed';
      if (s.last_status === 'success') return 'Enabled';
      if (s.last_status === 'running') return 'Running';
      return 'Enabled';
    },
    statusDot(s) {
      if (!s.is_enabled) return 'bg-ink-500';
      if (s.last_status === 'failed') return 'bg-red-400';
      if (s.last_status === 'running') return 'bg-amber-300 animate-pulse';
      return 'bg-emerald-400';
    },
    statusTextClass(s) {
      if (!s.is_enabled) return 'text-ink-400';
      if (s.last_status === 'failed') return 'text-red-300';
      if (s.last_status === 'running') return 'text-amber-300';
      return 'text-emerald-300';
    },

    formatRelative(iso, future) {
      if (!iso) return '—';
      const t = new Date(iso).getTime();
      if (!t) return iso;
      const now = Date.now();
      const diff = future ? (t - now) : (now - t);
      const abs = Math.abs(diff);
      const s = Math.floor(abs / 1000);
      let label;
      if (s < 60) label = `${s}s`;
      else if (s < 3600) label = `${Math.floor(s / 60)}m`;
      else if (s < 86400) label = `${Math.floor(s / 3600)}h`;
      else if (s < 7 * 86400) label = `${Math.floor(s / 86400)}d`;
      else return new Date(iso).toLocaleDateString();
      return future
        ? (diff >= 0 ? `in ${label}` : `${label} ago`)
        : (diff >= 0 ? `${label} ago` : `in ${label}`);
    },
  };
}
</script>
{% endblock %}