{% extends "layout.html" %}

{% block content %}
<div class="container-xl">
  <div class="page-header d-print-none">
    <div class="row align-items-center">
      <div class="col">
        <h2 class="page-title">
          {% if edit_mode %}Edit Application: {{ app.name }}{% else %}New Application{% endif %}
        </h2>
      </div>
    </div>
  </div>

  <div class="card mt-3">
    <div class="card-body">
      {% with messages = get_flashed_messages(with_categories=true) %}
      {% if messages %}
      {% for category, message in messages %}
      <div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
        {{ message|safe }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
      </div>
      {% endfor %}
      {% endif %}
      {% endwith %}

      <form method="POST"
        action="{{ url_for('dashboard.app_edit', app_id=app.id) if edit_mode else url_for('dashboard.app_new', server_id=selected_server_id) }}">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <div class="mb-3">
          <label class="form-label required">Application Name</label>
          <input type="text" class="form-control" name="name" value="{{ app.name if edit_mode else '' }}" required>
        </div>
        <div class="mb-3">
          <label class="form-label">URL</label>
          <input type="url" class="form-control" name="url" value="{{ app.url if edit_mode else '' }}"
            placeholder="https://example.com">
          <small class="form-hint">Optional URL for accessing the application</small>
        </div>
        <div class="mb-3">
          <label class="form-label required">Server</label>
          <select class="form-select" name="server_id" required id="server-select">
            <option value="">Select a server</option>
            {% for server in servers %}
            <option value="{{ server.id }}" {% if (edit_mode and server.id==app.server_id) or (not edit_mode and
              server.id==selected_server_id) %}selected{% endif %}>
              {{ server.hostname }} ({{ server.ip_address }})
            </option>
            {% endfor %}
          </select>
        </div>
        <div class="mb-3">
          <label class="form-label">Documentation</label>
          <textarea class="form-control" name="documentation" rows="5"
            placeholder="Add documentation about this application">{{ app.documentation if edit_mode else '' }}</textarea>
        </div>

        <div class="mb-3">
          <label class="form-label">Ports</label>
          <div class="table-responsive">
            <table class="table table-vcenter card-table" id="ports-table">
              <thead>
                <tr>
                  <th>Port Number</th>
                  <th>Protocol</th>
                  <th>Description</th>
                  <th width="50"></th>
                </tr>
              </thead>
              <tbody>
                {% if edit_mode and app.ports %}
                {% for port in app.ports %}
                <tr>
                  <td>
                    <input type="number" name="port_numbers[]" class="form-control" min="1" max="65535"
                      value="{{ port.port_number }}">
                  </td>
                  <td>
                    <select name="protocols[]" class="form-select">
                      <option value="TCP" {% if port.protocol=='TCP' %}selected{% endif %}>TCP</option>
                      <option value="UDP" {% if port.protocol=='UDP' %}selected{% endif %}>UDP</option>
                    </select>
                  </td>
                  <td>
                    <input type="text" name="port_descriptions[]" class="form-control" value="{{ port.description }}"
                      placeholder="Description">
                  </td>
                  <td>
                    <button type="button" class="btn btn-sm btn-ghost-danger" onclick="removePortRow(this)">
                      <span class="ti ti-trash"></span>
                    </button>
                  </td>
                </tr>
                {% endfor %}
                {% else %}
                <tr>
                  <td>
                    <input type="number" name="port_numbers[]" class="form-control" min="1" max="65535"
                      placeholder="Port number">
                  </td>
                  <td>
                    <select name="protocols[]" class="form-select">
                      <option value="TCP">TCP</option>
                      <option value="UDP">UDP</option>
                    </select>
                  </td>
                  <td>
                    <input type="text" name="port_descriptions[]" class="form-control" placeholder="Description">
                  </td>
                  <td>
                    <button type="button" class="btn btn-sm btn-ghost-danger" onclick="removePortRow(this)">
                      <span class="ti ti-trash"></span>
                    </button>
                  </td>
                </tr>
                {% endif %}
              </tbody>
            </table>
          </div>
          <div class="mt-3">
            <button type="button" class="btn btn-sm btn-outline-primary" onclick="addPortRow()">
              <span class="ti ti-plus me-1"></span> Add Port
            </button>
          </div>
        </div>

        <div class="form-footer">
          <div class="d-flex">
            <a href="{{ url_for('dashboard.app_view', app_id=app.id) if edit_mode else url_for('dashboard.app_new') }}"
              class="btn btn-link">Cancel</a>
            <button type="submit" class="btn btn-primary ms-auto">
              {% if edit_mode %}Save Changes{% else %}Create Application{% endif %}
            </button>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

<script>
  // Make sure removePortRow is in the global scope
  window.removePortRow = function (button) {
    const tbody = document.querySelector('#ports-table tbody');
    const row = button.closest('tr');

    // Get current number of rows
    const rowCount = tbody.querySelectorAll('tr').length;

    // If this is the last row, clear its values instead of removing
    if (rowCount <= 1) {
      const inputs = row.querySelectorAll('input');
      inputs.forEach(input => {
        input.value = '';
      });

      // Reset protocol to TCP
      const protocolSelect = row.querySelector('select[name="protocols[]"]');
      if (protocolSelect) {
        protocolSelect.value = 'TCP';
      }

      // Add a visual indicator that this row is empty
      row.classList.add('table-secondary', 'opacity-50');
    } else {
      // Remove the row if there are other rows
      row.remove();
    }
  };

  function addPortRow(portNumber = '', protocol = 'TCP', description = '') {
    const tbody = document.querySelector('#ports-table tbody');

    // Remove the empty row indicator if present
    const emptyRows = tbody.querySelectorAll('tr.table-secondary.opacity-50');
    if (emptyRows.length > 0) {
      emptyRows.forEach(row => row.remove());
    }

    const newRow = document.createElement('tr');
    newRow.innerHTML = `
      <td class="position-relative">
        <input type="number" name="port_numbers[]" class="form-control" 
               min="1" max="65535" value="${portNumber}" placeholder="Port number">
        <div class="feedback"></div>
      </td>
      <td>
        <select name="protocols[]" class="form-select">
          <option value="TCP" ${protocol === 'TCP' ? 'selected' : ''}>TCP</option>
          <option value="UDP" ${protocol === 'UDP' ? 'selected' : ''}>UDP</option>
        </select>
      </td>
      <td>
        <input type="text" name="port_descriptions[]" class="form-control" 
               value="${description}" placeholder="Description">
      </td>
      <td>
        <button type="button" class="btn btn-sm btn-ghost-danger" onclick="removePortRow(this)">
          <span class="ti ti-trash"></span>
        </button>
      </td>
    `;
    tbody.appendChild(newRow);
  }

  document.addEventListener('DOMContentLoaded', function () {
    // Get form elements
    const nameField = document.querySelector('input[name="name"]');
    const serverSelect = document.getElementById('server-select');
    const submitButton = document.querySelector('button[type="submit"]');

    // Set up name validation
    if (nameField && serverSelect) {
      // Validate on typing (with debounce)
      nameField.addEventListener('input', function () {
        validateAppName(nameField, serverSelect, 300);
      });

      // Also validate on blur for completeness
      nameField.addEventListener('blur', function () {
        validateAppName(nameField, serverSelect, 0);
      });

      serverSelect.addEventListener('change', function () {
        if (nameField.value.trim()) {
          validateAppName(nameField, serverSelect, 0);
        }
      });
    }

    // Set up port validation for all port inputs
    function setupPortValidation() {
      const portInputs = document.querySelectorAll('input[name="port_numbers[]"]');
      const protocolSelects = document.querySelectorAll('select[name="protocols[]"]');

      portInputs.forEach((input, index) => {
        const protocolSelect = protocolSelects[index];

        // Validate on typing (with debounce)
        input.addEventListener('input', function () {
          validatePort(input, protocolSelect, 300);
        });

        // Also validate on blur for completeness
        input.addEventListener('blur', function () {
          validatePort(input, protocolSelect, 0);
        });

        if (protocolSelect) {
          protocolSelect.addEventListener('change', function () {
            if (input.value.trim()) {
              validatePort(input, protocolSelect, 0);
            }
          });
        }
      });
    }

    // Initial setup
    setupPortValidation();

    // Re-setup validation after adding a new port row
    const originalAddPortRow = window.addPortRow;
    window.addPortRow = function (portNumber = '', protocol = 'TCP', description = '') {
      originalAddPortRow(portNumber, protocol, description);
      setupPortValidation();
    };

    // Validate application name
    function validateAppName(nameField, serverSelect, debounceTime = 300) {
      // Create feedback element if it doesn't exist
      if (!nameField.nextElementSibling || !nameField.nextElementSibling.classList.contains('feedback')) {
        const feedback = document.createElement('div');
        feedback.className = 'feedback';
        nameField.parentNode.insertBefore(feedback, nameField.nextSibling);
      }

      const feedbackElement = nameField.nextElementSibling;

      const name = nameField.value.trim();
      const serverId = serverSelect.value;
      const appId = {% if edit_mode %} { { app.id } } {% else %} null{% endif %};

    if (!name || !serverId) {
      clearFeedback(feedbackElement);
      nameField.classList.remove('is-invalid');
      return;
    }

    // Show loading indicator for better UX
    if (debounceTime > 0) {
      showLoading(feedbackElement, 'Checking...');
    }

    // Debounce to avoid too many requests
    clearTimeout(nameField.timer);
    nameField.timer = setTimeout(() => {
      fetch(`/api/validate/app-name?name=${encodeURIComponent(name)}&server_id=${serverId}${appId ? '&app_id=' + appId : ''}`)
        .then(response => response.json())
        .then(data => {
          clearFeedback(feedbackElement);
          if (!data.valid) {
            nameField.classList.add('is-invalid');
            showError(feedbackElement, data.message);
            if (data.edit_url) {
              feedbackElement.innerHTML += ` <a href="${data.edit_url}" class="alert-link">View existing app</a>`;
            }
          } else if (data.warning) {
            nameField.classList.remove('is-invalid');
            nameField.classList.add('is-warning');
            showWarning(feedbackElement, data.warning);

            if (data.similar_apps && data.similar_apps.length > 0) {
              const similarList = document.createElement('ul');
              similarList.className = 'mt-1';

              data.similar_apps.forEach(app => {
                const li = document.createElement('li');
                li.innerHTML = `<a href="/dashboard/app/${app.id}" class="alert-link">${app.name}</a>`;
                similarList.appendChild(li);
              });

              feedbackElement.appendChild(similarList);
            }
          } else {
            nameField.classList.remove('is-invalid');
            nameField.classList.add('is-valid');
            showSuccess(feedbackElement, 'Application name available');
          }
        })
        .catch(error => {
          console.error('Validation error:', error);
          clearFeedback(feedbackElement);
          nameField.classList.remove('is-invalid');
          nameField.classList.remove('is-valid');
        });
    }, debounceTime);
  }

    // Validate port
    function validatePort(portField, protocolField, debounceTime = 300) {
      // Create feedback element if it doesn't exist
      if (!portField.nextElementSibling || !portField.nextElementSibling.classList.contains('feedback')) {
        const feedback = document.createElement('div');
        feedback.className = 'feedback';
        portField.parentNode.insertBefore(feedback, portField.nextSibling);
      }

      const feedbackElement = portField.nextElementSibling;

      const port = portField.value.trim();
      const protocol = protocolField.value;
      const serverId = serverSelect.value;
      const appId = {% if edit_mode %}{{ app.id }}{% else %}null{% endif %};

  if (!port || !serverId) {
    clearFeedback(feedbackElement);
    portField.classList.remove('is-invalid');
    return;
  }

  // Check for duplicate ports within the form first
  const allPortFields = document.querySelectorAll('input[name="port_numbers[]"]');
  const allProtocolFields = document.querySelectorAll('select[name="protocols[]"]');
  let duplicateFound = false;

  allPortFields.forEach((field, index) => {
    if (field !== portField && field.value === port && allProtocolFields[index].value === protocol) {
      duplicateFound = true;
    }
  });

  if (duplicateFound) {
    portField.classList.add('is-invalid');
    clearFeedback(feedbackElement);
    showError(feedbackElement, `Duplicate port ${port}/${protocol} in your form`);
    return;
  }

  // Show loading indicator for better UX
  if (debounceTime > 0) {
    showLoading(feedbackElement, 'Checking...');
  }

  // Debounce to avoid too many requests
  clearTimeout(portField.timer);
  portField.timer = setTimeout(() => {
    fetch(`/api/validate/app-port?port_number=${encodeURIComponent(port)}&protocol=${protocol}&server_id=${serverId}${appId ? '&app_id=' + appId : ''}`)
      .then(response => response.json())
      .then(data => {
        clearFeedback(feedbackElement);
        if (!data.valid) {
          portField.classList.add('is-invalid');
          showError(feedbackElement, data.message);
          if (data.edit_url) {
            feedbackElement.innerHTML += ` <a href="${data.edit_url}" class="alert-link">Edit conflicting app</a>`;
          }
        } else {
          portField.classList.remove('is-invalid');
          portField.classList.add('is-valid');
          showSuccess(feedbackElement, 'Port available');
        }
      })
      .catch(error => {
        console.error('Validation error:', error);
        clearFeedback(feedbackElement);
        portField.classList.remove('is-invalid');
        portField.classList.remove('is-valid');
      });
  }, debounceTime);
    }

  // Helper functions for feedback
  function clearFeedback(element) {
    element.innerHTML = '';
    element.className = 'feedback';
  }

  function showError(element, message) {
    element.innerHTML = message;
    element.className = 'feedback invalid-feedback d-block';
  }

  function showWarning(element, message) {
    element.innerHTML = message;
    element.className = 'feedback text-warning d-block';
  }

  function showSuccess(element, message) {
    element.innerHTML = message;
    element.className = 'feedback valid-feedback d-block';
  }

  function showLoading(element, message) {
    element.innerHTML = `<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> ${message}`;
    element.className = 'feedback text-muted d-block';
  }
  });
</script>
{% endblock %}