{% extends "base.html" %}

{% block title %}Followup Health{% endblock %}
{% block page_title %}Followup Health{% endblock %}

{% block content %}
<div class="space-y-5">
  <!-- Stat cards -->
  <div class="grid grid-cols-5 gap-4">
    <div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-4 card">
      <div class="text-xs uppercase tracking-wider text-slate-400 font-medium mb-2">Total</div>
      <div class="text-xl font-mono font-semibold text-slate-200" id="fh-total">--</div>
    </div>
    <div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-4 card">
      <div class="text-xs uppercase tracking-wider text-amber-400/70 font-medium mb-2">Pending</div>
      <div class="text-xl font-mono font-semibold text-amber-400" id="fh-pending">--</div>
    </div>
    <div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-4 card">
      <div class="text-xs uppercase tracking-wider text-emerald-400/70 font-medium mb-2">Completed</div>
      <div class="text-xl font-mono font-semibold text-emerald-400" id="fh-completed">--</div>
    </div>
    <div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-4 card">
      <div class="text-xs uppercase tracking-wider text-red-400/70 font-medium mb-2">Overdue</div>
      <div class="text-xl font-mono font-semibold text-red-400" id="fh-overdue">--</div>
    </div>
    <div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-4 card">
      <div class="text-xs uppercase tracking-wider text-violet-400/70 font-medium mb-2">Completion Rate</div>
      <div class="text-xl font-mono font-semibold text-violet-400" id="fh-rate">--%</div>
    </div>
  </div>

  <!-- Charts row -->
  <div class="grid grid-cols-2 gap-5">
    <!-- Donut chart -->
    <div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-5 card">
      <div class="text-xs uppercase tracking-wider text-slate-400 font-medium mb-4">Completion Rate</div>
      <div class="flex items-center justify-center" style="min-height: 260px;">
        <svg id="donut-svg" viewBox="0 0 200 200" class="w-52 h-52"></svg>
      </div>
    </div>

    <!-- Age distribution bar chart -->
    <div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-5 card">
      <div class="text-xs uppercase tracking-wider text-slate-400 font-medium mb-4">Age Distribution</div>
      <div class="space-y-3" id="age-bars" style="min-height: 260px;">
        <div class="text-xs text-slate-600 py-12 text-center">loading...</div>
      </div>
    </div>
  </div>

  <!-- Overdue items table -->
  <div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-5 card">
    <div class="flex items-center justify-between mb-4">
      <div class="text-xs uppercase tracking-wider text-red-400/70 font-medium">Overdue Items</div>
      <span class="text-xs font-mono text-slate-500" id="overdue-label">--</span>
    </div>
    <div class="space-y-2" id="overdue-list">
      <div class="text-xs text-slate-600 py-4 text-center">loading...</div>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
function drawDonut(completed, total) {
  const svg = document.getElementById('donut-svg');
  const cx = 100, cy = 100, r = 70, strokeW = 16;
  const pct = total > 0 ? completed / total : 0;
  const circumference = 2 * Math.PI * r;
  const completedArc = circumference * pct;
  const remainingArc = circumference - completedArc;

  // Determine color based on rate
  let color = '#EF4444'; // red
  if (pct >= 0.8) color = '#10B981'; // emerald
  else if (pct >= 0.5) color = '#F59E0B'; // amber

  svg.innerHTML = `
    <!-- Background ring -->
    <circle cx="${cx}" cy="${cy}" r="${r}" fill="none" stroke="rgba(51,65,85,0.4)" stroke-width="${strokeW}"/>
    <!-- Completed arc -->
    <circle cx="${cx}" cy="${cy}" r="${r}" fill="none" stroke="${color}" stroke-width="${strokeW}"
      stroke-dasharray="${completedArc} ${remainingArc}"
      stroke-dashoffset="${circumference / 4}"
      stroke-linecap="round"
      style="transition: stroke-dasharray 0.8s ease-out;"/>
    <!-- Center text -->
    <text x="${cx}" y="${cy - 8}" text-anchor="middle" fill="${color}" class="text-2xl font-mono font-bold" style="font-size:28px;font-weight:700">${Math.round(pct * 100)}%</text>
    <text x="${cx}" y="${cy + 14}" text-anchor="middle" fill="#64748b" style="font-size:11px">completion</text>
    <text x="${cx}" y="${cy + 30}" text-anchor="middle" fill="#475569" style="font-size:10px">${completed}/${total}</text>
  `;
}

function renderAgeBars(buckets) {
  const container = document.getElementById('age-bars');
  if (!buckets || !Object.keys(buckets).length) {
    container.innerHTML = '<div class="text-xs text-slate-600 py-12 text-center">No age data</div>';
    return;
  }

  const entries = Object.entries(buckets);
  const maxVal = Math.max(...entries.map(([, v]) => v), 1);
  const barColors = ['bg-emerald-500', 'bg-emerald-400', 'bg-amber-400', 'bg-amber-500', 'bg-red-400', 'bg-red-500'];

  container.innerHTML = entries.map(([label, count], i) => {
    const pct = (count / maxVal) * 100;
    const color = barColors[Math.min(i, barColors.length - 1)];
    return `<div class="flex items-center gap-3">
      <span class="w-20 text-xs text-slate-400 text-right">${escapeHtml(label)}</span>
      <div class="flex-1 bg-slate-800/50 rounded-full h-5 overflow-hidden">
        <div class="${color}/70 h-full rounded-full transition-all duration-500 flex items-center" style="width:${Math.max(2, pct)}%">
          ${pct > 15 ? `<span class="text-[10px] font-mono text-white/80 ml-2">${count}</span>` : ''}
        </div>
      </div>
      ${pct <= 15 ? `<span class="text-[10px] font-mono text-slate-500">${count}</span>` : ''}
    </div>`;
  }).join('');
}

function renderOverdue(items) {
  const container = document.getElementById('overdue-list');
  document.getElementById('overdue-label').textContent = (items || []).length + ' items';

  if (!items || !items.length) {
    container.innerHTML = '<div class="flex items-center justify-center gap-2 py-8 text-emerald-400"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg><span class="text-xs">No overdue items</span></div>';
    return;
  }

  container.innerHTML = items.map(item => {
    const daysOverdue = item.days_overdue || 0;
    const urgency = daysOverdue > 7 ? 'text-red-400' : daysOverdue > 3 ? 'text-amber-400' : 'text-slate-300';
    return `<div class="flex items-start gap-3 py-2.5 px-3 rounded-lg hover:bg-slate-800/20 transition-colors border border-transparent hover:border-red-500/10">
      <svg class="w-3.5 h-3.5 text-red-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
      <div class="flex-1 min-w-0">
        <div class="text-xs text-slate-300 leading-relaxed">${escapeHtml(item.description || item.text || '--')}</div>
        <div class="flex items-center gap-2 mt-1">
          ${item.date ? `<span class="text-[10px] text-slate-500">${escapeHtml(item.date)}</span>` : ''}
          <span class="text-[10px] ${urgency} font-mono">${daysOverdue}d overdue</span>
        </div>
      </div>
    </div>`;
  }).join('');
}

async function loadHealth() {
  const data = await fetchJSON('/api/followup-health');
  if (!data) return;

  const total = data.total || 0;
  const completed = data.completed || 0;
  const pending = data.pending || 0;
  const overdue = data.overdue || 0;
  const rate = data.completion_rate != null ? data.completion_rate : (total > 0 ? Math.round((completed / total) * 100) : 0);

  document.getElementById('fh-total').textContent = total;
  document.getElementById('fh-pending').textContent = pending;
  document.getElementById('fh-completed').textContent = completed;
  document.getElementById('fh-overdue').textContent = overdue;
  document.getElementById('fh-rate').textContent = rate + '%';

  drawDonut(completed, total);
  renderAgeBars(data.age_buckets || {});
  renderOverdue(data.overdue_items || []);
}

loadHealth();
setInterval(loadHealth, 60000);
</script>
{% endblock %}