{% extends "base.html" %}

{% block title %}Maintenance Scheduler — Fractal Memory{% endblock %}

{% block content %}
<div class="page-header" style="display:flex;align-items:flex-start;justify-content:space-between;">
  <div>
    <h1>Maintenance Scheduler</h1>
    <p class="subtitle">Tiered maintenance — intra-session, daily, weekly, monthly</p>
  </div>
  <button class="btn-secondary" onclick="openHelp('maintenance')" title="Help">? Help</button>
</div>

<div class="maintenance-layout">

  <!-- ── 1. Schedule Overview (full-width) ──────────────────────────── -->
  <div class="chart-card full-width">
    <h2>Schedule Overview</h2>
    <div id="schedule-overview-content" style="display:flex;gap:1rem;flex-wrap:wrap;">
      <div style="color:var(--text-dim);font-size:0.85rem;">Loading schedule…</div>
    </div>
  </div>

  <!-- ── 2. Last Report (full-width) ────────────────────────────────── -->
  <div class="chart-card full-width">
    <h2>Last Report</h2>
    <div id="last-report-content">
      <div style="color:var(--text-dim);font-size:0.85rem;">Loading report…</div>
    </div>
  </div>

  <!-- ── 3. Actions History Chart (full-width) ──────────────────────── -->
  <div class="chart-card full-width">
    <h2>Actions History</h2>
    <div style="position:relative;height:280px;">
      <canvas id="actions-history-chart"></canvas>
    </div>
    <p style="font-size:0.75rem;color:var(--text-dim);margin-top:0.75rem;">Last 20 maintenance runs. Refreshes every 30 seconds.</p>
  </div>

  <!-- ── 4. Run Timeline (half-width) ───────────────────────────────── -->
  <div class="chart-card">
    <h2>Run Timeline</h2>
    <div id="run-timeline-content" style="max-height:340px;overflow-y:auto;">
      <div style="color:var(--text-dim);font-size:0.85rem;">Loading timeline…</div>
    </div>
  </div>

  <!-- ── 5. Config (half-width) ─────────────────────────────────────── -->
  <div class="chart-card">
    <h2>Config</h2>
    <div id="maintenance-config-content">
      <div style="color:var(--text-dim);font-size:0.85rem;">Loading config…</div>
    </div>
  </div>

</div><!-- /.maintenance-layout -->
{% endblock %}


{% block scripts %}
<script>
/* ================================================================
   Maintenance Scheduler — polling + Chart.js
   ================================================================ */

// ── Utility ───────────────────────────────────────────────────────
function escHtml(str) {
  return String(str)
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;');
}

// ── Chart.js defaults ─────────────────────────────────────────────
Chart.defaults.color = '#6b7280';
Chart.defaults.borderColor = '#1e293b';
Chart.defaults.font.family = '"Inter", "Segoe UI", system-ui, sans-serif';

// ── Constants ─────────────────────────────────────────────────────
const TIER_ORDER = ['INTRA-SESSION', 'SESSION-END', 'DAILY', 'WEEKLY', 'MONTHLY'];

// Palette for stacked bar chart action types
const ACTION_PALETTE = [
  '#4a9eff', '#22c55e', '#a855f7', '#f59e0b', '#ef4444',
  '#22d3ee', '#ff6b35', '#34d399', '#e879f9', '#facc15',
];

function formatDuration(sec) {
  if (sec == null) return '—';
  const s = Number(sec);
  if (s < 1) return (s * 1000).toFixed(0) + 'ms';
  return s.toFixed(1) + 's';
}

function formatTs(ts) {
  if (!ts) return 'Never';
  try {
    return new Date(ts).toLocaleString();
  } catch (_) { return String(ts); }
}

function tierStatusBadge(status) {
  const map = {
    OVERDUE:  { bg: '#ef444422', color: '#ef4444', border: '#ef444466' },
    RECENT:   { bg: '#22c55e22', color: '#22c55e', border: '#22c55e66' },
    PENDING:  { bg: '#f59e0b22', color: '#f59e0b', border: '#f59e0b66' },
    UNKNOWN:  { bg: '#6b728022', color: '#6b7280', border: '#6b728066' },
  };
  const s = String(status || 'UNKNOWN').toUpperCase();
  const style = map[s] || map.UNKNOWN;
  return `<span style="display:inline-block;padding:2px 8px;border-radius:4px;font-size:0.72rem;font-weight:700;background:${style.bg};color:${style.color};border:1px solid ${style.border};">${escHtml(s)}</span>`;
}

// ── 1. Schedule Overview ──────────────────────────────────────────
function renderScheduleOverview(data) {
  const el = document.getElementById('schedule-overview-content');
  if (!el) return;
  const tiers = data.tiers || {};

  if (Object.keys(tiers).length === 0) {
    el.innerHTML = '<div style="color:var(--text-dim);font-size:0.85rem;">No tier data available.</div>';
    return;
  }

  el.innerHTML = TIER_ORDER.map(name => {
    const tier = tiers[name] || tiers[name.toLowerCase()] || {};
    const lastRun = tier.last_run || tier.last_run_at || null;
    const status = tier.status || 'UNKNOWN';
    const actions = tier.last_actions_count != null ? tier.last_actions_count : (tier.actions_taken != null ? tier.actions_taken : '—');
    return `
      <div style="flex:1;min-width:160px;background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);padding:1rem;display:flex;flex-direction:column;gap:0.5rem;">
        <div style="font-size:0.72rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--text-dim);">${escHtml(name)}</div>
        <div style="font-size:0.75rem;color:var(--text);">${escHtml(formatTs(lastRun))}</div>
        <div>${tierStatusBadge(status)}</div>
        <div style="font-size:0.75rem;color:var(--text-dim);">Actions: <span style="color:var(--text);font-weight:600;">${escHtml(String(actions))}</span></div>
      </div>`;
  }).join('');
}

// ── 2. Last Report ────────────────────────────────────────────────
function renderLastReport(data) {
  const el = document.getElementById('last-report-content');
  if (!el) return;
  const report = data.last_report || null;

  if (!report) {
    el.innerHTML = '<div style="color:var(--text-dim);font-size:0.85rem;">No maintenance has been run yet.</div>';
    return;
  }

  const tier = report.tier || '—';
  const duration = report.duration_seconds != null ? formatDuration(report.duration_seconds) : '—';
  const actions = report.actions_taken || {};
  const health = report.health_snapshot || {};
  const actionEntries = Object.entries(actions).sort((a, b) => b[1] - a[1]);

  const actionsTable = actionEntries.length > 0 ? `
    <table class="data-table" style="margin-top:0.5rem;">
      <thead><tr><th>Action</th><th>Count</th></tr></thead>
      <tbody>
        ${actionEntries.map(([k, v]) => `
          <tr>
            <td style="font-size:0.82rem;">${escHtml(k)}</td>
            <td style="font-variant-numeric:tabular-nums;">${escHtml(String(v))}</td>
          </tr>`).join('')}
      </tbody>
    </table>` : '<div style="color:var(--text-dim);font-size:0.82rem;margin-top:0.5rem;">No actions recorded.</div>';

  const hitRate = health.hit_rate != null ? (Number(health.hit_rate) * 100).toFixed(1) + '%' : '—';
  const memories = health.total_memories != null ? health.total_memories : (health.memories != null ? health.memories : '—');
  const state = health.state || '—';

  el.innerHTML = `
    <div style="display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1rem;">
      <span style="background:#4a9eff22;color:#4a9eff;border:1px solid #4a9eff66;padding:4px 14px;border-radius:6px;font-size:1rem;font-weight:700;">${escHtml(String(tier).toUpperCase())}</span>
      <span style="font-size:0.85rem;color:var(--text-dim);">Duration: <span style="color:var(--text);font-weight:600;">${escHtml(duration)}</span></span>
    </div>
    <div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;">
      <div>
        <div style="font-size:0.72rem;text-transform:uppercase;letter-spacing:0.06em;color:var(--text-dim);margin-bottom:0.25rem;">Actions Taken</div>
        ${actionsTable}
      </div>
      <div>
        <div style="font-size:0.72rem;text-transform:uppercase;letter-spacing:0.06em;color:var(--text-dim);margin-bottom:0.5rem;">Health Snapshot</div>
        <div class="stat-row"><span class="stat-label">Hit rate</span><span class="stat-value blue">${escHtml(hitRate)}</span></div>
        <div class="stat-row"><span class="stat-label">Memories</span><span class="stat-value">${escHtml(String(memories))}</span></div>
        <div class="stat-row"><span class="stat-label">State</span><span class="stat-value">${escHtml(String(state))}</span></div>
      </div>
    </div>`;
}

// ── 3. Actions History stacked bar chart ──────────────────────────
let actionsHistoryChart = null;

function initActionsHistoryChart() {
  const ctx = document.getElementById('actions-history-chart');
  if (!ctx) return;
  actionsHistoryChart = new Chart(ctx, {
    type: 'bar',
    data: { labels: [], datasets: [] },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      animation: { duration: 400 },
      scales: {
        x: {
          stacked: true,
          grid: { color: '#1e293b' },
          ticks: { color: '#6b7280', maxTicksLimit: 12 },
        },
        y: {
          stacked: true,
          grid: { color: '#1e293b' },
          ticks: { color: '#6b7280' },
          beginAtZero: true,
        },
      },
      plugins: {
        legend: { position: 'top', labels: { color: '#c8d6e5', font: { size: 11 }, padding: 10 } },
        tooltip: {
          mode: 'index',
          backgroundColor: '#111118', borderColor: '#1e293b', borderWidth: 1,
          titleColor: '#c8d6e5', bodyColor: '#6b7280',
        },
      },
    },
  });
}

function updateActionsHistoryChart(history) {
  if (!actionsHistoryChart) return;
  const runs = (history.runs || []).slice(-20);
  if (runs.length === 0) return;

  const labels = runs.map((r, i) => {
    const tier = String(r.tier || '').slice(0, 2).toUpperCase();
    return `${i + 1}:${tier}`;
  });

  // Collect all action types
  const allActions = new Set();
  for (const run of runs) {
    for (const k of Object.keys(run.actions_taken || {})) allActions.add(k);
  }
  const actionTypes = Array.from(allActions);

  const datasets = actionTypes.map((action, idx) => ({
    label: action,
    data: runs.map(r => (r.actions_taken || {})[action] || 0),
    backgroundColor: ACTION_PALETTE[idx % ACTION_PALETTE.length],
    borderWidth: 0,
    borderRadius: 2,
  }));

  actionsHistoryChart.data.labels = labels;
  actionsHistoryChart.data.datasets = datasets;
  actionsHistoryChart.update();
}

// ── 4. Run Timeline ───────────────────────────────────────────────
function renderRunTimeline(history) {
  const el = document.getElementById('run-timeline-content');
  if (!el) return;
  const runs = (history.runs || []).slice().reverse();

  if (runs.length === 0) {
    el.innerHTML = '<div style="color:var(--text-dim);font-size:0.85rem;">No runs recorded yet.</div>';
    return;
  }

  el.innerHTML = runs.map(r => {
    const tier = String(r.tier || '—').toUpperCase();
    const ts = formatTs(r.timestamp || r.started_at || null);
    const dur = formatDuration(r.duration_seconds);
    const totalActions = Object.values(r.actions_taken || {}).reduce((a, b) => a + b, 0);
    return `
      <div style="padding:0.5rem 0;border-bottom:1px solid var(--border);font-size:0.82rem;">
        <div style="display:flex;align-items:center;justify-content:space-between;gap:0.5rem;">
          <span style="background:#4a9eff22;color:#4a9eff;border:1px solid #4a9eff44;padding:1px 7px;border-radius:4px;font-size:0.72rem;font-weight:700;">${escHtml(tier)}</span>
          <span style="color:var(--text-dim);font-size:0.75rem;">${escHtml(ts)}</span>
        </div>
        <div style="display:flex;gap:1rem;margin-top:0.25rem;color:var(--text-dim);font-size:0.75rem;">
          <span>Duration: <span style="color:var(--text);">${escHtml(dur)}</span></span>
          <span>Actions: <span style="color:var(--text);">${escHtml(String(totalActions))}</span></span>
        </div>
      </div>`;
  }).join('');
}

// ── 5. Config ─────────────────────────────────────────────────────
function renderMaintenanceConfig(data) {
  const el = document.getElementById('maintenance-config-content');
  if (!el) return;
  const cfg = data.config || data;
  const intra = cfg.intra_session_interval_minutes != null ? cfg.intra_session_interval_minutes : '—';
  const longSession = cfg.long_session_threshold_minutes != null ? cfg.long_session_threshold_minutes : '—';
  const intraTurns = data.intra_session_turn_count != null ? data.intra_session_turn_count : '—';
  const sinceIntra = data.time_since_last_intra_session != null
    ? (Number(data.time_since_last_intra_session) / 60).toFixed(1) + ' min'
    : '—';

  el.innerHTML = `
    <div class="stat-row"><span class="stat-label">Intra-session interval</span><span class="stat-value blue">${escHtml(String(intra))} min</span></div>
    <div class="stat-row"><span class="stat-label">Long session threshold</span><span class="stat-value blue">${escHtml(String(longSession))} min</span></div>
    <hr class="divider"/>
    <div class="stat-row"><span class="stat-label">Intra-session turn count</span><span class="stat-value">${escHtml(String(intraTurns))}</span></div>
    <div class="stat-row"><span class="stat-label">Since last intra-session</span><span class="stat-value">${escHtml(sinceIntra)}</span></div>
  `;
}

// ── Loaders ───────────────────────────────────────────────────────
async function loadMaintenanceState() {
  try {
    const resp = await fetch('/api/maintenance-state');
    if (!resp.ok) return;
    const data = await resp.json();
    renderScheduleOverview(data);
    renderLastReport(data);
    renderMaintenanceConfig(data);
  } catch (e) {
    console.warn('Maintenance: maintenance-state load failed', e);
  }
}

async function loadMaintenanceHistory() {
  try {
    const resp = await fetch('/api/maintenance-history');
    if (!resp.ok) return;
    const history = await resp.json();
    updateActionsHistoryChart(history);
    renderRunTimeline(history);
  } catch (e) {
    console.warn('Maintenance: maintenance-history load failed', e);
  }
}

// ── Boot ──────────────────────────────────────────────────────────
initActionsHistoryChart();

loadMaintenanceState();
loadMaintenanceHistory();

setInterval(loadMaintenanceState,  10000);
setInterval(loadMaintenanceHistory, 30000);
</script>
{% endblock %}