{% 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">
          {{ title }}
        </h2>
        <div class="text-muted mt-1">
          {% if edit_mode %}Edit{% else %}Create{% endif %} application details and configure ports
        </div>
      </div>
      <div class="col-auto ms-auto">
        <div class="btn-list">
          <a href="{{ dashboard_link }}" class="btn btn-outline-primary">
            <span class="ti ti-dashboard"></span>
            Dashboard
          </a>
          {% if edit_mode %}
          <a href="{{ url_for('dashboard.app_view', app_id=app.id) }}" class="btn btn-outline-secondary">
            <span class="ti ti-eye"></span>
            View Application
          </a>
          {% endif %}
        </div>
      </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 }}
        <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') }}">
        <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 app else '' }}" required
            placeholder="Enter application name">
          <small class="form-hint">Choose a unique name for this application</small>
        </div>

        <div class="mb-3">
          <label class="form-label required">Server</label>
          <select class="form-select" name="server_id" required>
            <option value="">Select a server</option>
            {% for server in servers %}
            <option value="{{ server.id }}" {% if app and server.id==app.server_id %}selected{% endif %}>
              {{ server.hostname }} ({{ server.ip_address }})
            </option>
            {% endfor %}
          </select>
          <small class="form-hint">Select the server where this application runs</small>
        </div>

        <div class="mb-3">
          <div class="d-flex justify-content-between align-items-center mb-2">
            <label class="form-label mb-0">Application Ports</label>
            <div class="btn-group">
              <button type="button" class="btn btn-sm btn-outline-primary" id="add-port-btn">
                <span class="ti ti-plus"></span> Add Port
              </button>
              <button type="button" class="btn btn-sm btn-outline-secondary" id="random-port-btn"
                title="Generate random available port">
                <span class="ti ti-dice"></span> Random Port
              </button>
            </div>
          </div>

          <div class="table-responsive">
            <table class="table table-vcenter card-table" id="ports-table">
              <thead>
                <tr>
                  <th>Port</th>
                  <th>Protocol</th>
                  <th>Description</th>
                  <th width="40"></th>
                </tr>
              </thead>
              <tbody>
                {% if app 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 }}" required>
                  </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>
                      <option value="SCTP" {% if port.protocol=='SCTP' %}selected{% endif %}>SCTP</option>
                      <option value="OTHER" {% if port.protocol=='OTHER' %}selected{% endif %}>OTHER</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 %}
                {% endif %}
              </tbody>
            </table>
          </div>
          <small class="form-hint">Configure the network ports used by this application</small>
        </div>

        <div class="mb-3">
          <label class="form-label">Documentation</label>
          <textarea class="form-control" name="documentation" id="documentation" rows="10"
            placeholder="Enter documentation in Markdown format">{{ app.documentation if app else '' }}</textarea>
          <small class="form-hint">
            Use <a href="https://www.markdownguide.org/basic-syntax/" target="_blank">Markdown syntax</a>
            to format your documentation. The content will be rendered when viewing the application.
          </small>
        </div>

        <div class="form-footer">
          <button type="submit" class="btn btn-primary">Save Application</button>
          {% if edit_mode %}
          <a href="{{ url_for('dashboard.app_view', app_id=app.id) }}" class="btn btn-outline-secondary ms-2">Cancel</a>
          {% else %}
          <a href="{{ dashboard_link }}" class="btn btn-outline-secondary ms-2">Cancel</a>
          {% endif %}
        </div>
      </form>
    </div>
  </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
  {% if app and app.id %}
  const appId = {{ app.id | tojson }};
  {% else %}
  const appId = null;
  {% endif %}

  // Initialize everything once the DOM is loaded
  document.addEventListener('DOMContentLoaded', function () {
    // Connect port management buttons
    const addPortBtn = document.getElementById('add-port-btn');
    const randomPortBtn = document.getElementById('random-port-btn');

    if (addPortBtn) {
      addPortBtn.addEventListener('click', function () {
        addPortRow();
      });
    }

    if (randomPortBtn) {
      randomPortBtn.addEventListener('click', function () {
        generateRandomPort();
      });
    }
  });

  // Show notifications
  function showNotification(message, type = 'info') {
    const alertDiv = document.createElement('div');
    alertDiv.className = `alert alert-${type} alert-dismissible fade show`;
    alertDiv.innerHTML = `
      ${message}
      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    `;

    const container = document.querySelector('.card-body');
    if (container) {
      container.insertBefore(alertDiv, container.firstChild);

      // Auto-dismiss after 5 seconds
      setTimeout(() => {
        alertDiv.classList.remove('show');
        setTimeout(() => alertDiv.remove(), 150);
      }, 5000);
    }
  }
</script>

<script>
  document.body.addEventListener('htmx:configRequest', (event) => {
    event.detail.headers['X-CSRFToken'] = "{{ csrf_token() }}";
  });
</script>

<script>
  // Port management functions
  function addPortRow(portNumber = '', protocol = 'TCP', description = '') {
    const tbody = document.querySelector('#ports-table tbody');
    const newRow = document.createElement('tr');
    newRow.innerHTML = `
      <td>
        <input type="number" name="port_numbers[]" class="form-control" 
               min="1" max="65535" value="${portNumber}" required>
      </td>
      <td>
        <select name="protocols[]" class="form-select">
          <option value="TCP" ${protocol === 'TCP' ? 'selected' : ''}>TCP</option>
          <option value="UDP" ${protocol === 'UDP' ? 'selected' : ''}>UDP</option>
          <option value="SCTP" ${protocol === 'SCTP' ? 'selected' : ''}>SCTP</option>
          <option value="OTHER" ${protocol === 'OTHER' ? 'selected' : ''}>OTHER</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);
  }

  function removePortRow(button) {
    button.closest('tr').remove();
  }

  async function generateRandomPort() {
    try {
      const serverId = document.querySelector('select[name="server_id"]').value;
      if (!serverId) {
        showNotification('Please select a server first', 'warning');
        return;
      }

      const response = await fetch(`/api/servers/${serverId}/suggest_port`);
      const data = await response.json();

      if (data.port) {
        addPortRow(data.port);
      } else {
        showNotification('No available ports found', 'warning');
      }
    } catch (error) {
      console.error('Error generating random port:', error);
      showNotification('Failed to generate random port', 'danger');
    }
  }
</script>
{% endblock %}