{% extends "base.html" %}

{% block title %}Crons Control{% endblock %}
{% block page_title %}Crons Control Center{% endblock %}
{% block page_subtitle %}
<span class="text-xs text-slate-500 font-mono ml-2" id="crons-updated">--</span>
{% endblock %}

{% block header_actions %}
<div class="flex items-center gap-1.5">
  <button onclick="setTimeRange('24h')" data-range="24h" class="range-btn active text-[10px] px-2.5 py-1 rounded-md transition-all">24h</button>
  <button onclick="setTimeRange('48h')" data-range="48h" class="range-btn text-[10px] px-2.5 py-1 rounded-md transition-all">48h</button>
  <button onclick="setTimeRange('7d')" data-range="7d" class="range-btn text-[10px] px-2.5 py-1 rounded-md transition-all">7d</button>
</div>
<button onclick="loadAll()" class="text-xs text-slate-400 hover:text-slate-200 bg-slate-800/50 border border-slate-700/50 rounded-lg px-3 py-1.5 transition-colors flex items-center gap-1.5 ml-2">
  <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
  Refresh
</button>
{% endblock %}

{% block content %}
<!-- Summary cards -->
<div class="grid grid-cols-4 gap-4 mb-6">
  <div class="card bg-slate-900/50 border border-slate-800/50 rounded-xl p-5">
    <div class="text-xs uppercase tracking-wider text-slate-500 font-semibold mb-2">Total Runs</div>
    <div class="text-2xl font-mono font-bold text-slate-200" id="stat-total">--</div>
    <div class="text-xs text-slate-500 mt-1" id="stat-total-label">last 24h</div>
  </div>
  <div class="card bg-slate-900/50 border border-slate-800/50 rounded-xl p-5">
    <div class="text-xs uppercase tracking-wider text-slate-500 font-semibold mb-2">Success Rate</div>
    <div class="text-2xl font-mono font-bold" id="stat-success">--</div>
    <div class="flex items-center gap-1.5 mt-2">
      <div class="flex-1 h-1.5 bg-slate-800 rounded-full overflow-hidden">
        <div class="h-full bg-emerald-500 rounded-full transition-all duration-700" id="stat-success-bar" style="width: 0%"></div>
      </div>
    </div>
  </div>
  <div class="card bg-slate-900/50 border border-slate-800/50 rounded-xl p-5">
    <div class="text-xs uppercase tracking-wider text-slate-500 font-semibold mb-2">Avg Duration</div>
    <div class="text-2xl font-mono font-bold text-slate-200" id="stat-duration">--</div>
    <div class="text-xs text-slate-500 mt-1">seconds per run</div>
  </div>
  <div class="card bg-slate-900/50 border border-slate-800/50 rounded-xl p-5">
    <div class="text-xs uppercase tracking-wider text-slate-500 font-semibold mb-2">Active Crons</div>
    <div class="text-2xl font-mono font-bold text-nexo-400" id="stat-active">--</div>
    <div class="flex items-center gap-1.5 mt-2">
      <div class="w-1.5 h-1.5 rounded-full bg-emerald-400 glow-dot" style="color: #34d399;"></div>
      <span class="text-[10px] text-slate-500">scheduling active</span>
    </div>
  </div>
</div>

<!-- Timeline visualization -->
<div class="card bg-slate-900/50 border border-slate-800/50 rounded-xl p-5 mb-6">
  <div class="flex items-center justify-between mb-4">
    <h2 class="text-xs uppercase tracking-wider text-slate-500 font-semibold">Timeline</h2>
    <div class="flex items-center gap-3 text-[10px] text-slate-500">
      <span class="flex items-center gap-1"><span class="w-2 h-2 rounded-full bg-emerald-400 inline-block"></span> success</span>
      <span class="flex items-center gap-1"><span class="w-2 h-2 rounded-full bg-red-400 inline-block"></span> failure</span>
    </div>
  </div>
  <div id="timeline-container" class="space-y-2 min-h-[60px]">
    <div class="text-xs text-slate-600 text-center py-6">Loading timeline...</div>
  </div>
  <!-- Time axis -->
  <div class="flex justify-between mt-3 text-[9px] text-slate-600 font-mono" id="time-axis">
    <span>-24h</span><span>-18h</span><span>-12h</span><span>-6h</span><span>now</span>
  </div>
</div>

<!-- Cron summary table -->
<div class="card bg-slate-900/50 border border-slate-800/50 rounded-xl overflow-hidden">
  <div class="px-5 py-4 border-b border-slate-800/50">
    <h2 class="text-xs uppercase tracking-wider text-slate-500 font-semibold">Cron Jobs</h2>
  </div>
  <div id="cron-table" class="divide-y divide-slate-800/30">
    <!-- Loading skeleton -->
    <div id="table-skeleton" class="p-5 space-y-3">
      <div class="h-8 bg-slate-800/30 rounded animate-pulse"></div>
      <div class="h-8 bg-slate-800/30 rounded animate-pulse"></div>
      <div class="h-8 bg-slate-800/30 rounded animate-pulse"></div>
    </div>
  </div>
</div>

<style>
  .range-btn {
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid rgba(51, 65, 85, 0.3);
    color: #64748b;
  }
  .range-btn:hover { color: #e2e8f0; background: rgba(51, 65, 85, 0.5); }
  .range-btn.active {
    background: rgba(124, 58, 237, 0.15);
    border-color: rgba(124, 58, 237, 0.4);
    color: #a78bfa;
  }

  .timeline-row {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .timeline-label {
    width: 120px;
    flex-shrink: 0;
    font-size: 11px;
    font-family: 'JetBrains Mono', monospace;
    color: #94a3b8;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .timeline-track {
    flex: 1;
    height: 20px;
    background: rgba(15, 23, 42, 0.5);
    border-radius: 4px;
    position: relative;
    overflow: hidden;
  }
  .timeline-dot {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: transform 0.15s, box-shadow 0.15s;
    cursor: pointer;
  }
  .timeline-dot:hover {
    transform: translate(-50%, -50%) scale(1.6);
    box-shadow: 0 0 8px currentColor;
    z-index: 10;
  }
  .timeline-dot.success { background: #34d399; color: #34d399; }
  .timeline-dot.failure { background: #f87171; color: #f87171; }

  .cron-row {
    transition: background-color 0.15s;
  }
  .cron-row:hover { background: rgba(51, 65, 85, 0.15); }

  .cron-runs {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
  .cron-runs.open { max-height: 400px; overflow-y: auto; }

  .status-dot {
    width: 6px; height: 6px; border-radius: 50%;
  }
  .status-ok { background: #34d399; box-shadow: 0 0 6px rgba(52, 211, 153, 0.4); }
  .status-warn { background: #fbbf24; box-shadow: 0 0 6px rgba(251, 191, 36, 0.4); }
  .status-error { background: #f87171; box-shadow: 0 0 6px rgba(248, 113, 113, 0.4); }

  @keyframes barGrow {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
  }
</style>
{% endblock %}

{% block scripts %}
<script>
let cronData = null;
let timelineData = null;
let currentRange = '24h';

function setTimeRange(range) {
  currentRange = range;
  document.querySelectorAll('.range-btn').forEach(b => b.classList.toggle('active', b.dataset.range === range));

  // Update axis labels
  const axis = document.getElementById('time-axis');
  if (range === '24h') axis.innerHTML = '<span>-24h</span><span>-18h</span><span>-12h</span><span>-6h</span><span>now</span>';
  else if (range === '48h') axis.innerHTML = '<span>-48h</span><span>-36h</span><span>-24h</span><span>-12h</span><span>now</span>';
  else axis.innerHTML = '<span>-7d</span><span>-5d</span><span>-3d</span><span>-1d</span><span>now</span>';

  loadAll();
}

function getRangeHours() {
  if (currentRange === '48h') return 48;
  if (currentRange === '7d') return 168;
  return 24;
}

function getStatusClass(successRate) {
  if (successRate >= 95) return 'status-ok';
  if (successRate >= 70) return 'status-warn';
  return 'status-error';
}

function getSuccessColor(rate) {
  if (rate >= 95) return 'text-emerald-400';
  if (rate >= 70) return 'text-amber-400';
  return 'text-red-400';
}

function renderSummary(summary) {
  let totalRuns = 0, totalSuccess = 0, totalFail = 0, totalDuration = 0, cronCount = 0, durationCount = 0;

  for (const [, s] of Object.entries(summary)) {
    totalRuns += (s.total || 0);
    totalSuccess += (s.success || 0);
    totalFail += (s.fail || 0);
    if (s.avg_duration) { totalDuration += s.avg_duration; durationCount++; }
    cronCount++;
  }

  const rate = totalRuns > 0 ? Math.round((totalSuccess / totalRuns) * 100) : 0;
  const avgDur = durationCount > 0 ? (totalDuration / durationCount).toFixed(1) : '--';

  document.getElementById('stat-total').textContent = formatNumber(totalRuns);
  document.getElementById('stat-total-label').textContent = `last ${currentRange}`;

  const successEl = document.getElementById('stat-success');
  successEl.textContent = rate + '%';
  successEl.className = `text-2xl font-mono font-bold ${getSuccessColor(rate)}`;
  document.getElementById('stat-success-bar').style.width = rate + '%';

  document.getElementById('stat-duration').textContent = avgDur + 's';
  document.getElementById('stat-active').textContent = cronCount;
}

function renderTimeline(timeline) {
  const container = document.getElementById('timeline-container');
  if (!timeline || timeline.length === 0) {
    container.innerHTML = '<div class="text-xs text-slate-600 text-center py-6">No timeline data</div>';
    return;
  }

  const rangeHours = getRangeHours();
  const now = Date.now();
  const rangeMs = rangeHours * 3600000;

  // Group by cron_id
  const groups = {};
  timeline.forEach(t => {
    if (!groups[t.cron_id]) groups[t.cron_id] = [];
    groups[t.cron_id].push(t);
  });

  container.innerHTML = Object.entries(groups).map(([cronId, runs]) => {
    const dots = runs.map(r => {
      const ts = new Date(r.started_at).getTime();
      const pct = Math.max(0, Math.min(100, ((ts - (now - rangeMs)) / rangeMs) * 100));
      const isSuccess = r.exit_code === 0;
      const dur = r.duration_secs != null ? r.duration_secs.toFixed(1) + 's' : '?';
      return `<div class="timeline-dot ${isSuccess ? 'success' : 'failure'}" style="left: ${pct}%" title="${cronId} - ${isSuccess ? 'OK' : 'FAIL'} (${dur}) - ${new Date(r.started_at).toLocaleTimeString('en-GB')}"></div>`;
    }).join('');

    return `
      <div class="timeline-row">
        <div class="timeline-label" title="${escapeHtml(cronId)}">${escapeHtml(cronId)}</div>
        <div class="timeline-track">${dots}</div>
      </div>
    `;
  }).join('');
}

function renderTable(summary, runs) {
  const table = document.getElementById('cron-table');
  const skeleton = document.getElementById('table-skeleton');
  if (skeleton) skeleton.remove();

  const entries = Object.entries(summary);
  if (entries.length === 0) {
    table.innerHTML = '<div class="p-5 text-xs text-slate-600 text-center">No cron data available</div>';
    return;
  }

  // Group runs by cron_id for expandable rows
  const runsByCron = {};
  if (runs) {
    runs.forEach(r => {
      const key = r.cron_id || r.name || 'unknown';
      if (!runsByCron[key]) runsByCron[key] = [];
      runsByCron[key].push(r);
    });
  }

  table.innerHTML = `
    <div class="grid grid-cols-[1fr_80px_120px_90px_120px_40px] gap-2 px-5 py-2.5 text-[10px] uppercase tracking-wider text-slate-600 font-semibold border-b border-slate-800/30">
      <span>Name</span><span class="text-center">Runs</span><span class="text-center">Success / Fail</span><span class="text-center">Avg Duration</span><span class="text-center">Last Run</span><span></span>
    </div>
    ${entries.map(([cronId, s]) => {
      const rate = s.total > 0 ? Math.round((s.success / s.total) * 100) : 0;
      const cronRuns = runsByCron[cronId] || [];
      const lastRun = cronRuns.length > 0 ? relativeTime(cronRuns[0].started_at || cronRuns[0].created_at) : '--';
      return `
        <div class="cron-row">
          <div class="grid grid-cols-[1fr_80px_120px_90px_120px_40px] gap-2 px-5 py-3 items-center cursor-pointer" onclick="toggleCronRuns(this)">
            <div class="flex items-center gap-2">
              <div class="status-dot ${getStatusClass(rate)}"></div>
              <span class="text-sm text-slate-200 font-mono truncate">${escapeHtml(cronId)}</span>
            </div>
            <span class="text-center text-xs font-mono text-slate-400">${s.total || 0}</span>
            <div class="flex items-center justify-center gap-1.5">
              <span class="text-xs font-mono text-emerald-400">${s.success || 0}</span>
              <span class="text-slate-700">/</span>
              <span class="text-xs font-mono ${s.fail > 0 ? 'text-red-400' : 'text-slate-600'}">${s.fail || 0}</span>
            </div>
            <span class="text-center text-xs font-mono text-slate-400">${s.avg_duration ? s.avg_duration.toFixed(1) + 's' : '--'}</span>
            <span class="text-center text-xs text-slate-500">${lastRun}</span>
            <svg class="w-4 h-4 text-slate-600 mx-auto transition-transform duration-200 expand-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
          </div>
          <div class="cron-runs">
            ${cronRuns.length > 0 ? `
              <div class="px-5 pb-3">
                <div class="bg-slate-950/50 rounded-lg border border-slate-800/30 overflow-hidden">
                  <div class="grid grid-cols-[1fr_80px_90px_120px] gap-2 px-4 py-2 text-[9px] uppercase tracking-wider text-slate-600 border-b border-slate-800/30">
                    <span>Started</span><span>Exit Code</span><span>Duration</span><span>Status</span>
                  </div>
                  ${cronRuns.slice(0, 10).map(r => `
                    <div class="grid grid-cols-[1fr_80px_90px_120px] gap-2 px-4 py-2 text-xs border-b border-slate-800/10 last:border-0">
                      <span class="font-mono text-slate-400">${r.started_at ? new Date(r.started_at).toLocaleString('en-GB', {month:'short',day:'numeric',hour:'2-digit',minute:'2-digit'}) : '--'}</span>
                      <span class="font-mono ${r.exit_code === 0 ? 'text-emerald-400' : 'text-red-400'}">${r.exit_code != null ? r.exit_code : '--'}</span>
                      <span class="font-mono text-slate-400">${r.duration_secs != null ? r.duration_secs.toFixed(1) + 's' : '--'}</span>
                      <span class="text-[10px] ${r.exit_code === 0 ? 'text-emerald-400' : 'text-red-400'}">${r.exit_code === 0 ? 'Success' : 'Failed'}</span>
                    </div>
                  `).join('')}
                </div>
              </div>
            ` : '<div class="px-5 pb-3 text-xs text-slate-600">No recent runs</div>'}
          </div>
        </div>
      `;
    }).join('')}
  `;
}

function toggleCronRuns(el) {
  const runs = el.nextElementSibling;
  const icon = el.querySelector('.expand-icon');
  runs.classList.toggle('open');
  icon.style.transform = runs.classList.contains('open') ? 'rotate(180deg)' : '';
}

async function loadAll() {
  const range = currentRange;
  const [cronsRes, timelineRes] = await Promise.all([
    fetchJSON(`/api/crons?range=${range}`),
    fetchJSON(`/api/crons/timeline?range=${range}`)
  ]);

  if (cronsRes) {
    cronData = cronsRes;
    renderSummary(cronsRes.summary || {});
    renderTable(cronsRes.summary || {}, cronsRes.runs || []);
  }
  if (timelineRes) {
    timelineData = timelineRes;
    renderTimeline(timelineRes.timeline || []);
  }

  document.getElementById('crons-updated').textContent = 'updated ' + new Date().toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit' });
}

// Initial load
loadAll();

// Auto-refresh every 60s
setInterval(loadAll, 60000);
</script>
{% endblock %}