{% extends "base.html" %}
{% block title %}Dodaj serwer - /etc/hosts Manager{% endblock %}
{% block extra_css %}
{{ super() }}
<style>
  .tooltip-inner {
    max-width: 300px;
    text-align: left;
  }

  /* Kontenery domyślnie ukryte; pokażemy je przez JavaScript. */
  #hostPortFields,
  #userPassFields,
  #sshKeyFields,
  #daemonFields {
    display: none;
  }
</style>
{% endblock %}

{% block content %}
<div class="card mb-4">
  <div class="card-header">
    <h2>Dodaj nowy serwer</h2>
  </div>
  <div class="card-body">
    <form method="POST" action="{{ url_for('add_server') }}">

      <!-- 1) Wybór platformy (Linux / Mikrotik) -->
      <div class="mb-3">
        <label for="host_type" class="form-label">Platforma (system)</label>
        <select name="host_type" id="host_type" class="form-select" required onchange="toggleSystemOptions()">
          <option value="linux">Linux</option>
          <option value="mikrotik">Mikrotik</option>
        </select>
      </div>

      <!-- 2) Wybór metody uwierzytelniania -->
      <div class="mb-3">
        <label for="auth_method" class="form-label">Metoda uwierzytelniania</label>
        <select name="auth_method" id="auth_method" class="form-select" onchange="toggleAuthFields()">
          <option value="password">Hasło</option>
          <option value="ssh_key">Klucz SSH</option>
          <option value="global_key">Globalny klucz SSH</option>
          <option value="daemon">Demon (Linux)</option>
        </select>
      </div>

      <!-- Pola nazwy hosta i portu -->
      <div id="hostPortFields">
        <div class="mb-3">
          <label for="hostname" class="form-label">Nazwa hosta (IP lub domena)</label>
          <input type="text" name="hostname" id="hostname" class="form-control">
        </div>
        <div class="mb-3">
          <label for="port" class="form-label">Port</label>
          <input type="text" name="port" id="port" class="form-control" value="22">
        </div>
      </div>

      <!-- Pola user + hasło (dla password / ssh_key / global_key) -->
      <div id="userPassFields">
        <div class="mb-3">
          <label for="username" class="form-label">Użytkownik</label>
          <input type="text" name="username" id="username" class="form-control">
        </div>
        <div class="mb-3" id="passwordField">
          <label for="password" class="form-label">Hasło</label>
          <input type="password" name="password" id="password" class="form-control">
        </div>
      </div>

      <!-- Pola klucza prywatnego (dla ssh_key) -->
      <div id="sshKeyFields">
        <div class="mb-3">
          <label for="private_key" class="form-label">Klucz prywatny</label>
          <textarea name="private_key" id="private_key" rows="4" class="form-control"></textarea>
        </div>
        <div class="mb-3">
          <label for="key_passphrase" class="form-label">Hasło do klucza</label>
          <input type="password" name="key_passphrase" id="key_passphrase" class="form-control">
        </div>
      </div>

      <!-- Pola dla demona (tylko jeśli auth_method=daemon i platforma=linux) -->
      <div id="daemonFields">
        <div class="form-check mb-3">
          <input class="form-check-input" type="checkbox" name="use_daemon" id="use_daemon" value="1">
          <label class="form-check-label" for="use_daemon">
            Korzystaj z demona (zamiast SSH) [Tylko Linux]
          </label>
        </div>
        <div class="mb-3">
          <label for="daemon_url" class="form-label">URL demona</label>
          <input type="text" name="daemon_url" id="daemon_url" class="form-control">
        </div>
        <div class="mb-3">
          <label for="daemon_token" class="form-label">Token autoryzacyjny demona</label>
          <input type="text" name="daemon_token" id="daemon_token" class="form-control">
        </div>
      </div>

      <!-- Nowe: wybór preferowanego pliku /etc/hosts -->
      <div class="mb-3">
        <label for="preferred_hostfile_id" class="form-label">Domyślny plik /etc/hosts</label>
        <select name="preferred_hostfile_id" id="preferred_hostfile_id" class="form-select">
          <!-- Opcja pusta => None => "Default" -->
          <option value="">(Default - brak)</option>
          {% for hf in user_hostfiles %}
            <option value="{{ hf.id }}">{{ hf.title }}</option>
          {% endfor %}
        </select>
      </div>

      <button type="submit" class="btn btn-primary">Dodaj serwer</button>
    </form>
  </div>
</div>

<div class="mt-3 text-center">
  <a href="{{ url_for('server_list') }}" class="btn btn-secondary">Lista serwerów</a>
  <a href="{{ url_for('import_servers') }}" class="btn btn-secondary">Importuj z CSV</a>
</div>
{% endblock %}

{% block extra_js %}
{{ super() }}
<script>
function toggleSystemOptions() {
  const hostType = document.getElementById('host_type').value;
  const authMethodSelect = document.getElementById('auth_method');
  // Znajdź opcję 'daemon':
  const daemonOption = Array.from(authMethodSelect.options).find(opt => opt.value === 'daemon');

  // Jeśli to Mikrotik, ukrywamy opcję demona
  if (hostType === 'mikrotik') {
    if (daemonOption) {
      daemonOption.style.display = 'none';
      if (authMethodSelect.value === 'daemon') {
        authMethodSelect.value = 'password';
      }
    }
  } else {
    // Linux -> z powrotem pokazujemy 'daemon'
    if (daemonOption) {
      daemonOption.style.display = 'block';
    }
  }
  toggleAuthFields();
}

function toggleAuthFields() {
  const hostType = document.getElementById('host_type').value;
  const authMethod = document.getElementById('auth_method').value;

  // Kontenery:
  const hostPortFields = document.getElementById('hostPortFields');
  const userPassFields = document.getElementById('userPassFields');
  const passwordField  = document.getElementById('passwordField');
  const sshKeyFields   = document.getElementById('sshKeyFields');
  const daemonFields   = document.getElementById('daemonFields');
  const useDaemon      = document.getElementById('use_daemon');

  // Ukrywamy wszystkie na start
  hostPortFields.style.display = 'none';
  userPassFields.style.display = 'none';
  passwordField.style.display  = 'none';
  sshKeyFields.style.display   = 'none';
  daemonFields.style.display   = 'none';

  if (useDaemon) {
    useDaemon.checked = false;
  }

  // Jeżeli authMethod != 'daemon', to normalnie pokazujemy host/port
  if (authMethod !== 'daemon') {
    hostPortFields.style.display = 'block';
  }

  // W zależności od authMethod
  if (authMethod === 'password') {
    userPassFields.style.display = 'block';
    passwordField.style.display  = 'block';

  } else if (authMethod === 'ssh_key') {
    userPassFields.style.display = 'block';
    sshKeyFields.style.display   = 'block';

  } else if (authMethod === 'global_key') {
    userPassFields.style.display = 'block';

  } else if (authMethod === 'daemon') {
    // Tylko Linux
    if (hostType === 'linux') {
      daemonFields.style.display = 'block';
      if (useDaemon) {
        useDaemon.checked = true;
      }
    }
  }
}

document.addEventListener('DOMContentLoaded', function() {
  toggleSystemOptions();
});
</script>
{% endblock %}