{% extends "layout.twig" %}
{% block title %}{{ client.name }}{% endblock %}
{% block content %}
<div class="max-w-4xl mx-auto px-4 py-8">
  <h1 class="text-3xl font-bold mb-6">{{ client.name }}</h1>
  
  <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
    <div class="bg-white rounded shadow p-6">
      <h3 class="font-bold mb-4">Client Configuration</h3>
      <dl class="space-y-2 mb-4">
        <div><dt class="text-sm text-gray-600">IP Address</dt><dd>{{ client.client_ip }}</dd></div>
        <div><dt class="text-sm text-gray-600">Status</dt>
          <dd>
            {% if client.status == 'active' %}
              <span class="px-2 py-1 bg-green-100 text-green-800 rounded text-xs">Active</span>
            {% else %}
              <span class="px-2 py-1 bg-red-100 text-red-800 rounded text-xs">Disabled</span>
            {% endif %}
          </dd>
        </div>
        <div><dt class="text-sm text-gray-600">Created</dt><dd>{{ client.created_at }}</dd></div>
      </dl>
      <div class="flex gap-2">
        <a href="/clients/{{ client.id }}/download" class="gradient-bg text-white px-4 py-2 rounded">
          <i class="fas fa-download"></i> Download Config
        </a>
        {% if client.status == 'active' %}
          <form method="POST" action="/clients/{{ client.id }}/revoke" style="display:inline;">
            <button type="submit" class="bg-orange-500 hover:bg-orange-600 text-white px-4 py-2 rounded" onclick="return confirm('Revoke access for this client?')">
              <i class="fas fa-ban"></i> Revoke
            </button>
          </form>
        {% else %}
          <form method="POST" action="/clients/{{ client.id }}/restore" style="display:inline;">
            <button type="submit" class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded">
              <i class="fas fa-check"></i> Restore
            </button>
          </form>
        {% endif %}
      </div>
    </div>
    
    <div class="bg-white rounded shadow p-6">
      <div class="flex justify-between items-center mb-4">
        <h3 class="font-bold">Traffic Statistics</h3>
        <button onclick="syncStats({{ client.id }})" class="text-purple-600 hover:text-purple-800 text-sm">
          <i class="fas fa-sync-alt"></i> Refresh
        </button>
      </div>
      <dl class="space-y-2" id="stats">
        <div><dt class="text-sm text-gray-600">Uploaded</dt><dd id="stat-sent">{{ client.bytes_sent|default(0)|number_format }} B</dd></div>
        <div><dt class="text-sm text-gray-600">Downloaded</dt><dd id="stat-received">{{ client.bytes_received|default(0)|number_format }} B</dd></div>
        <div><dt class="text-sm text-gray-600">Total</dt><dd id="stat-total">{{ (client.bytes_sent|default(0) + client.bytes_received|default(0))|number_format }} B</dd></div>
        <div><dt class="text-sm text-gray-600">Last Handshake</dt>
          <dd id="stat-last-seen">
            {% if client.last_handshake %}
              {{ client.last_handshake }}
            {% else %}
              <span class="text-gray-400">Never connected</span>
            {% endif %}
          </dd>
        </div>
      </dl>
    </div>
  </div>
  
  {% if client.qr_code %}
  <div class="bg-white rounded shadow p-6 text-center">
    <h3 class="font-bold mb-4">QR Code</h3>
    <img src="{{ client.qr_code }}" alt="QR Code" class="mx-auto" style="max-width: 300px; width: 100%; height: auto;">
    <p class="text-sm text-gray-600 mt-2">Scan with Amnezia VPN app</p>
  </div>
  {% endif %}
</div>

<script>
async function syncStats(clientId) {
  try {
    const response = await fetch(`/clients/${clientId}/sync-stats`, {
      method: 'POST'
    });
    
    const data = await response.json();
    
    if (data.success && data.stats) {
      // Update stats display
      document.getElementById('stat-sent').textContent = data.stats.sent;
      document.getElementById('stat-received').textContent = data.stats.received;
      document.getElementById('stat-total').textContent = data.stats.total;
      document.getElementById('stat-last-seen').innerHTML = data.stats.is_online 
        ? '<span class="text-green-600"><i class="fas fa-circle text-xs"></i> ' + data.stats.last_seen + '</span>'
        : data.stats.last_seen;
    } else {
      alert('Failed to sync stats: ' + (data.error || 'Unknown error'));
    }
  } catch (error) {
    alert('Error: ' + error.message);
  }
}
</script>
{% endblock %}