{% extends "base.html" %}
{% block content %}
<section class="stats-grid">
  <article class="card status-card status-{{ health }}">
    <div class="card-label">Tunnel Status</div>
    <div class="status-card-body">
      <div class="status-icon">
        <svg viewBox="0 0 64 64" aria-hidden="true"><path d="M32 6 52 14v16c0 13-8.3 22.4-20 28C20.3 52.4 12 43 12 30V14L32 6Z"/><path d="m23 32 6 6 13-16"/></svg>
      </div>
      <div>
        <div id="tunnel-status" class="status-badge {{ health }}">{{ health|upper }}</div>
        <p>Last handshake <strong id="handshake-age">{{ handshake_age if handshake_age is not none else "unknown" }}</strong> seconds ago</p>
      </div>
    </div>
  </article>

  <article class="card instance-card">
    <div class="card-label">Instance</div>
    <div class="card-split">
      <div>
        <h2>{{ instance_short or "Not enrolled" }}</h2>
        <dl>
          <dt>Tunnel IP</dt><dd>{{ instance.wg_ip if instance else "none" }}</dd>
          <dt>Edge</dt><dd>{{ edge_endpoint }}</dd>
        </dl>
      </div>
      <div class="soft-icon">
        <svg viewBox="0 0 64 64" aria-hidden="true"><rect x="16" y="10" width="32" height="12" rx="3"/><rect x="16" y="26" width="32" height="12" rx="3"/><rect x="16" y="42" width="32" height="12" rx="3"/><circle cx="39" cy="16" r="2"/><circle cx="45" cy="16" r="2"/><circle cx="39" cy="32" r="2"/><circle cx="45" cy="32" r="2"/><circle cx="39" cy="48" r="2"/><circle cx="45" cy="48" r="2"/></svg>
      </div>
    </div>
  </article>

  <article id="agent-card" class="card agent-card {{ 'agent-active' if agent_state == 'active' else 'agent-inactive' }}">
    <div class="card-label">Agent</div>
    <div class="card-split">
      <div>
        <p class="state-line"><span id="agent-dot" class="dot {{ 'green' if agent_state == 'active' else 'red' }}"></span>Agent: <span id="agent-state">{{ agent_state }}</span></p>
        <dl>
          <dt>Last heartbeat</dt><dd><span id="heartbeat-age">{{ heartbeat_age if heartbeat_age is not none else "unknown" }}</span> seconds ago</dd>
          <dt>Version</dt><dd>{{ version }}</dd>
        </dl>
      </div>
      <div class="agent-shield">
        <svg viewBox="0 0 64 64" aria-hidden="true"><path d="M32 5 53 13v17c0 13.8-8.8 23.6-21 29-12.2-5.4-21-15.2-21-29V13L32 5Z"/><path d="M24 25c4-5 12-5 16 0M24 39c4 5 12 5 16 0M22 32h20M32 20v24"/></svg>
      </div>
    </div>
  </article>
</section>

<section class="dashboard-panels">
  <article class="card">
    <div class="panel-title"><h2><i data-lucide="git-branch"></i>Advertised Routes</h2><a href="/routes">View all routes →</a></div>
    <table id="routes-table" class="data-table compact" {% if not routes %}hidden{% endif %}>
      <thead><tr><th>Route</th><th>Source / Interface</th></tr></thead>
      <tbody id="routes-body">
        {% for route in routes %}
        <tr><td><span class="dot green"></span>{{ route.cidr }}</td><td><span class="chip">{{ route.interface }}</span></td></tr>
        {% endfor %}
      </tbody>
    </table>
    <p id="routes-empty" class="empty-copy" {% if routes %}hidden{% endif %}>No routes advertised.</p>
    <p class="panel-foot"><i data-lucide="refresh-cw"></i>Last updated: 0 seconds ago</p>
  </article>

  <article class="card clients-summary">
    <div class="panel-title"><h2><i data-lucide="users"></i>Clients</h2><a href="/clients">View all clients →</a></div>
    <div id="client-count" class="client-count">{{ clients|length }}</div>
    <div class="client-copy">Total clients</div>
    <div id="latest-client" class="latest-client" {% if not latest_client %}hidden{% endif %}>
      <span class="dot green"></span>
      <div><strong id="latest-client-label">{{ latest_client.label if latest_client else "" }}</strong><p id="latest-client-age">{{ latest_client.created_age if latest_client else "" }}</p></div>
    </div>
    <p id="latest-client-empty" class="empty-copy" {% if latest_client %}hidden{% endif %}>No client configs created.</p>
  </article>
</section>

<section class="card flow-card">
  <div class="panel-title"><h2><i data-lucide="network"></i>Tunnel Connection Flow</h2></div>
  <div class="flow">
    <div class="flow-line"></div>
    <div class="flow-node">
      <svg viewBox="0 0 96 72" aria-hidden="true"><rect x="16" y="28" width="42" height="26" rx="4"/><path d="M22 28V14M48 28V14M58 40h14v16H58z"/><path d="M62 40v-5a5 5 0 0 1 10 0v5"/><circle cx="25" cy="41" r="3"/><circle cx="36" cy="41" r="3"/><circle cx="47" cy="41" r="3"/></svg>
      <h3>Behind NAT</h3><p>Your Network</p>
    </div>
    <div class="flow-node edge">
      <svg viewBox="0 0 96 72" aria-hidden="true"><rect x="28" y="10" width="40" height="14" rx="4"/><rect x="28" y="29" width="40" height="14" rx="4"/><rect x="28" y="48" width="40" height="14" rx="4"/><circle cx="56" cy="17" r="2"/><circle cx="62" cy="17" r="2"/><circle cx="56" cy="36" r="2"/><circle cx="62" cy="36" r="2"/><circle cx="56" cy="55" r="2"/><circle cx="62" cy="55" r="2"/></svg>
      <h3>Edge Relay</h3><p>wg-diglett.calhta.com</p>
    </div>
    <div class="flow-node">
      <svg viewBox="0 0 96 72" aria-hidden="true"><path d="M22 52h52l8 10H14l8-10Z"/><rect x="26" y="12" width="44" height="36" rx="4"/><path d="M48 23 58 27v8c0 6-4 10-10 13-6-3-10-7-10-13v-8l10-4Z"/><path d="m43 34 4 4 8-10"/></svg>
      <h3>Peer</h3><p>Connected Client</p>
    </div>
  </div>
</section>
<script>
async function refreshDashboard(){
  const r=await fetch('/api/ui/status'); if(!r.ok) return; const d=await r.json();
  const s=document.getElementById('tunnel-status'); s.textContent=String(d.tunnel_status).toUpperCase(); s.className='status-badge '+d.tunnel_status; s.closest('.status-card').className='card status-card status-'+d.tunnel_status;
  document.getElementById('handshake-age').textContent=d.handshake_age ?? 'unknown';
  document.getElementById('heartbeat-age').textContent=d.last_heartbeat_age ?? 'unknown';
  document.getElementById('agent-state').textContent=d.agent_active?'active':'inactive'; document.getElementById('agent-dot').className='dot '+(d.agent_active?'green':'red');
  document.getElementById('agent-card').className='card agent-card '+(d.agent_active?'agent-active':'agent-inactive');
  document.getElementById('client-count').textContent=d.client_count;
  document.getElementById('routes-table').hidden=!d.routes.length; document.getElementById('routes-empty').hidden=!!d.routes.length;
  document.getElementById('routes-body').innerHTML=d.routes.map(x=>`<tr><td><span class="dot green"></span>${x.cidr}</td><td><span class="chip">${x.interface}</span></td></tr>`).join('');
  const c=d.most_recent_client; const empty=document.getElementById('latest-client-empty');
  if(c){document.getElementById('latest-client').hidden=false; document.getElementById('latest-client-label').textContent=c.label; document.getElementById('latest-client-age').textContent=c.created_age; if(empty) empty.hidden=true;}
  else if(empty) empty.hidden=false;
}
setInterval(refreshDashboard,30000);
</script>
{% endblock %}