{% 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>
  
  <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">{{ t('clients.expiration') }}</h3>
      <form onsubmit="updateExpiration(event, {{ client.id }})" class="space-y-3">
        <div>
          <label class="block text-sm text-gray-600 mb-1">{{ t('clients.expiration') }}</label>
          <select id="expirationSelect" class="w-full px-3 py-2 border rounded mb-2" onchange="toggleExpirationEdit()">
            <option value="" selected disabled>-- Select from list --</option>
            <option value="never">{{ t('clients.never_expires') }}</option>
            <option value="7">7 {{ t('common.days') }}</option>
            <option value="30">30 {{ t('common.days') }}</option>
            <option value="60">60 {{ t('common.days') }}</option>
            <option value="90">90 {{ t('common.days') }}</option>
            <option value="180">180 {{ t('common.days') }}</option>
            <option value="365">365 {{ t('common.days') }}</option>
            <option value="custom">{{ t('clients.custom_seconds') }}</option>
          </select>
          <input type="number" id="expirationSeconds" class="w-full px-3 py-2 border rounded" placeholder="{{ t('clients.enter_seconds') }}" style="display:none;" min="1">
        </div>
        <div class="p-3 bg-blue-50 border border-blue-200 rounded">
          <div class="text-xs text-blue-600 font-semibold mb-1">CURRENT VALUE:</div>
          <div class="text-sm text-blue-900 font-medium" id="currentExpiration">
            {% if client.expires_at %}
              {% set expires_ts = client.expires_at|date('U') %}
              {% set now_ts = "now"|date('U') %}
              {% set diff_days = ((expires_ts - now_ts) / 86400)|round %}
              {{ client.expires_at|date('Y-m-d H:i:s') }} ({{ diff_days }} {{ t('common.days') }})
            {% else %}
              {{ t('clients.never_expires') }}
            {% endif %}
          </div>
        </div>
        <button type="submit" class="gradient-bg text-white px-4 py-2 rounded w-full">
          <i class="fas fa-save"></i> {{ t('form.update') }}
        </button>
      </form>
    </div>
    
    <div class="bg-white rounded shadow p-6">
      <h3 class="font-bold mb-4">{{ t('clients.traffic_limit') }}</h3>
      <form onsubmit="updateTrafficLimit(event, {{ client.id }})" class="space-y-3">
        <div>
          <label class="block text-sm text-gray-600 mb-1">{{ t('clients.traffic_limit') }}</label>
          <select id="trafficSelect" class="w-full px-3 py-2 border rounded mb-2" onchange="toggleTrafficEdit()">
            <option value="" selected disabled>-- Select from list --</option>
            <option value="unlimited">{{ t('clients.unlimited') }}</option>
            <option value="1">1 GB</option>
            <option value="5">5 GB</option>
            <option value="10">10 GB</option>
            <option value="25">25 GB</option>
            <option value="50">50 GB</option>
            <option value="100">100 GB</option>
            <option value="250">250 GB</option>
            <option value="500">500 GB</option>
            <option value="1000">1000 GB (1 TB)</option>
            <option value="custom">{{ t('clients.custom_mb') }}</option>
          </select>
          <input type="number" id="trafficMegabytes" class="w-full px-3 py-2 border rounded" placeholder="{{ t('clients.enter_megabytes') }}" style="display:none;" min="1">
        </div>
        <div class="p-3 bg-blue-50 border border-blue-200 rounded">
          <div class="text-xs text-blue-600 font-semibold mb-1">CURRENT VALUE:</div>
          <div class="text-sm text-blue-900 font-medium" id="currentTrafficLimit">
            {% if client.traffic_limit %}
              {% set limit_gb = (client.traffic_limit / 1073741824)|number_format(2) %}
              {% set total_traffic = (client.bytes_sent|default(0) + client.bytes_received|default(0)) %}
              {% set used_gb = (total_traffic / 1073741824)|number_format(2) %}
              {{ limit_gb }} GB (used: {{ used_gb }} GB)
            {% else %}
              {{ t('clients.unlimited') }}
            {% endif %}
          </div>
        </div>
        <button type="submit" class="gradient-bg text-white px-4 py-2 rounded w-full">
          <i class="fas fa-save"></i> {{ t('form.update') }}
        </button>
      </form>
    </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>
function toggleExpirationEdit() {
  const select = document.getElementById('expirationSelect');
  const input = document.getElementById('expirationSeconds');
  if (select.value === 'custom') {
    input.style.display = 'block';
    input.required = true;
    input.focus();
  } else {
    input.style.display = 'none';
    input.required = false;
    input.value = '';
  }
}

function toggleTrafficEdit() {
  const select = document.getElementById('trafficSelect');
  const input = document.getElementById('trafficMegabytes');
  if (select.value === 'custom') {
    input.style.display = 'block';
    input.required = true;
    input.focus();
  } else {
    input.style.display = 'none';
    input.required = false;
    input.value = '';
  }
}

async function updateExpiration(event, clientId) {
  event.preventDefault();
  
  const select = document.getElementById('expirationSelect');
  const customInput = document.getElementById('expirationSeconds');
  
  let expiresAt = null;
  let displayText = '{{ t("clients.never_expires") }}';
  
  if (select.value === 'custom' && customInput.value) {
    // Convert seconds to timestamp
    const seconds = parseInt(customInput.value);
    const date = new Date(Date.now() + seconds * 1000);
    expiresAt = date.toISOString().slice(0, 19).replace('T', ' ');
    const days = Math.round(seconds / 86400);
    displayText = `${expiresAt} (${days} {{ t("common.days") }})`;
  } else if (select.value === 'never') {
    // Set to unlimited
    expiresAt = null;
    displayText = '{{ t("clients.never_expires") }}';
  } else if (select.value && select.value !== 'custom' && select.value !== '') {
    // Convert days to timestamp
    const days = parseInt(select.value);
    const date = new Date(Date.now() + days * 86400 * 1000);
    expiresAt = date.toISOString().slice(0, 19).replace('T', ' ');
    displayText = `${expiresAt} (${days} {{ t("common.days") }})`;
  } else {
    alert('Please select an option');
    return;
  }
  
  try {
    const response = await fetch(`/api/clients/${clientId}/set-expiration`, {
      method: 'POST',
      credentials: 'same-origin',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ expires_at: expiresAt })
    });
    
    const data = await response.json();
    
    if (data.success !== false) {
      alert('Expiration updated successfully');
      document.getElementById('currentExpiration').textContent = displayText;
      // Reset form
      select.value = '';
      customInput.value = '';
      customInput.style.display = 'none';
    } else {
      alert('Error: ' + (data.error || 'Unknown error'));
    }
  } catch (error) {
    alert('Error: ' + error.message);
  }
}

async function updateTrafficLimit(event, clientId) {
  event.preventDefault();
  
  const select = document.getElementById('trafficSelect');
  const customInput = document.getElementById('trafficMegabytes');
  
  let limitBytes = null;
  let displayText = '{{ t("clients.unlimited") }}';
  
  if (select.value === 'custom' && customInput.value) {
    // Convert MB to bytes
    limitBytes = parseInt(customInput.value) * 1048576;
    const limitGb = (limitBytes / 1073741824).toFixed(2);
    displayText = `${limitGb} GB`;
  } else if (select.value === 'unlimited') {
    // Set to unlimited
    limitBytes = null;
    displayText = '{{ t("clients.unlimited") }}';
  } else if (select.value && select.value !== 'custom' && select.value !== '') {
    // Convert GB to bytes
    limitBytes = parseFloat(select.value) * 1073741824;
    displayText = `${parseFloat(select.value).toFixed(2)} GB`;
  } else {
    alert('Please select an option');
    return;
  }
  
  try {
    const response = await fetch(`/api/clients/${clientId}/set-traffic-limit`, {
      method: 'POST',
      credentials: 'same-origin',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ limit_bytes: limitBytes })
    });
    
    const data = await response.json();
    
    if (data.success !== false) {
      alert('Traffic limit updated successfully');
      // Update current value display (keep usage info if available)
      const currentDiv = document.getElementById('currentTrafficLimit');
      const usageMatch = currentDiv.textContent.match(/used: ([\d.]+) GB/);
      if (usageMatch && limitBytes !== null) {
        displayText += ` (used: ${usageMatch[1]} GB)`;
      }
      currentDiv.textContent = displayText;
      // Reset form
      select.value = '';
      customInput.value = '';
      customInput.style.display = 'none';
    } else {
      alert('Error: ' + (data.error || 'Unknown error'));
    }
  } catch (error) {
    alert('Error: ' + error.message);
  }
}

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 %}