{% 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">
        <div class="page-pretitle">
          Server Details
        </div>
        <h2 class="page-title">
          {{ server.hostname }}
        </h2>
      </div>
      <div class="col-auto ms-auto d-print-none">
        <div class="btn-list">
          <a href="{{ url_for('dashboard.server_edit', server_id=server.id) }}" class="btn btn-primary">
            <i class="ti ti-edit me-1"></i> Edit
          </a>
          <button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#deleteServerModal">
            <i class="ti ti-trash me-1"></i> Delete
          </button>
        </div>
      </div>
    </div>
  </div>

  <div class="row mt-3">
    <div class="col-md-4">
      <div class="card">
        <div class="card-header">
          <h3 class="card-title">Server Information</h3>
        </div>
        <div class="card-body">
          <dl class="row">
            <dt class="col-5">IP Address:</dt>
            <dd class="col-7">{{ server.ip_address }}</dd>

            <dt class="col-5">Subnet:</dt>
            <dd class="col-7">
              <a href="{{ url_for('ipam.subnet_view', subnet_id=server.subnet.id) }}">
                {{ server.subnet.cidr }}
              </a>
            </dd>

            <dt class="col-5">Location:</dt>
            <dd class="col-7">{{ server.subnet.location }}</dd>

            <dt class="col-5">Created:</dt>
            <dd class="col-7">{{ server.created_at.strftime('%Y-%m-%d') }}</dd>
          </dl>
        </div>
      </div>

      <!-- Port Usage Map -->
      <div class="card mt-3">
        <div class="card-header d-flex align-items-center">
          <h3 class="card-title">Port Usage</h3>
          <div class="ms-auto">
            <button id="get-random-port" class="btn btn-sm btn-outline-primary">
              <i class="ti ti-clipboard-copy me-1"></i> Get Free Port
            </button>
          </div>
        </div>
        <div class="card-body">
          <div class="port-map">
            <div class="port-map-grid">
              {% for i in range(1, 101) %}
              {% set port_num = 8000 + i - 1 %}
              {% set port_used = false %}
              {% set port_app = "" %}
              {% set port_color = "" %}
              {% set tooltip = "" %}

              {% for app in server.apps %}
              {% for port in app.ports %}
              {% if port.port_number == port_num %}
              {% set port_used = true %}
              {% set port_app = app.name %}
              {% set port_color = "bg-" ~ ["primary", "success", "info", "warning", "danger"][(app.id % 5)] %}
              {% set tooltip = app.name ~ " - " ~ port.description %}
              {% endif %}
              {% endfor %}
              {% endfor %}

              <div class="port-item {{ port_color if port_used else 'bg-light' }}" data-port="{{ port_num }}"
                data-bs-toggle="tooltip" title="{{ tooltip if port_used else 'Free port: ' ~ port_num }}">
                {{ port_num }}
              </div>
              {% endfor %}
            </div>
          </div>
          <div class="mt-2 text-muted small">
            <div class="d-flex flex-wrap">
              <div class="me-3"><span class="badge bg-light">Port</span> Free</div>
              <div><span class="badge bg-primary">Port</span> Used</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="col-md-8">
      <!-- Applications -->
      <div class="card">
        <div class="card-header d-flex align-items-center">
          <h3 class="card-title">Applications</h3>
          <div class="ms-auto">
            <a href="{{ url_for('dashboard.app_new', server_id=server.id) }}" class="btn btn-sm btn-primary">
              <i class="ti ti-plus me-1"></i> Add Application
            </a>
          </div>
        </div>
        <div class="card-body">
          {% if server.apps %}
          <div class="accordion" id="applicationAccordion">
            {% for app in server.apps %}
            <div class="accordion-item">
              <h2 class="accordion-header" id="heading{{ app.id }}">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                  data-bs-target="#collapse{{ app.id }}" aria-expanded="false" aria-controls="collapse{{ app.id }}">
                  <span class="me-2">{{ app.name }}</span>
                  {% if app.ports %}
                  <div class="ms-auto d-flex">
                    {% for port in app.ports %}
                    <span class="badge bg-primary me-1">{{ port.port_number }}/{{ port.protocol }}</span>
                    {% endfor %}
                  </div>
                  {% endif %}
                </button>
              </h2>
              <div id="collapse{{ app.id }}" class="accordion-collapse collapse" aria-labelledby="heading{{ app.id }}"
                data-bs-parent="#applicationAccordion">
                <div class="accordion-body">
                  <div class="d-flex justify-content-end mb-2">
                    <a href="{{ url_for('dashboard.app_edit', app_id=app.id) }}"
                      class="btn btn-sm btn-outline-primary me-2">
                      <i class="ti ti-edit"></i> Edit
                    </a>
                    <button type="button" class="btn btn-sm btn-outline-danger"
                      onclick="confirmDeleteApp({{ app.id }}, '{{ app.name }}')">
                      <i class="ti ti-trash"></i> Delete
                    </button>
                  </div>

                  <!-- Ports -->
                  {% if app.ports %}
                  <div class="mb-3">
                    <h5>Ports</h5>
                    <div class="table-responsive">
                      <table class="table table-vcenter table-sm">
                        <thead>
                          <tr>
                            <th>Port</th>
                            <th>Protocol</th>
                            <th>Description</th>
                          </tr>
                        </thead>
                        <tbody>
                          {% for port in app.ports %}
                          <tr>
                            <td>{{ port.port_number }}</td>
                            <td>{{ port.protocol }}</td>
                            <td>{{ port.description }}</td>
                          </tr>
                          {% endfor %}
                        </tbody>
                      </table>
                    </div>
                  </div>
                  {% endif %}

                  <!-- Documentation -->
                  {% if app.documentation %}
                  <div class="mt-3">
                    <h5>Documentation</h5>
                    <div class="markdown-body">
                      {{ app.documentation|markdown }}
                    </div>
                  </div>
                  {% else %}
                  <div class="text-muted">No documentation available</div>
                  {% endif %}
                </div>
              </div>
            </div>
            {% endfor %}
          </div>
          {% else %}
          <div class="empty">
            <div class="empty-icon">
              <i class="ti ti-apps"></i>
            </div>
            <p class="empty-title">No applications found</p>
            <p class="empty-subtitle text-muted">
              This server doesn't have any applications yet.
            </p>
            <div class="empty-action">
              <a href="{{ url_for('dashboard.app_new', server_id=server.id) }}" class="btn btn-primary">
                <i class="ti ti-plus me-1"></i> Add Application
              </a>
            </div>
          </div>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Delete Server Modal -->
<div class="modal fade" id="deleteServerModal" tabindex="-1" aria-labelledby="deleteServerModalLabel"
  aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="deleteServerModalLabel">Confirm Delete</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Are you sure you want to delete server <strong>{{ server.hostname }}</strong>? This action cannot be undone.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
        <form action="{{ url_for('dashboard.server_delete', server_id=server.id) }}" method="POST">
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
          <button type="submit" class="btn btn-danger">Delete Server</button>
        </form>
      </div>
    </div>
  </div>
</div>

<!-- Delete App Modal (created dynamically) -->
<div class="modal fade" id="deleteAppModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Confirm Delete</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body" id="deleteAppModalBody">
        Are you sure you want to delete this application?
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
        <form id="deleteAppForm" method="POST">
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
          <button type="submit" class="btn btn-danger">Delete Application</button>
        </form>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
  document.addEventListener('DOMContentLoaded', function () {
    // Initialize tooltips
    const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    tooltipTriggerList.map(function (tooltipTriggerEl) {
      return new bootstrap.Tooltip(tooltipTriggerEl);
    });

    // Random port generator
    const getRandomPortBtn = document.getElementById('get-random-port');
    if (getRandomPortBtn) {
      getRandomPortBtn.addEventListener('click', async function () {
        try {
          const response = await fetch(`/api/servers/{{ server.id }}/suggest_port`);
          if (!response.ok) throw new Error('Failed to get port suggestion');

          const data = await response.json();
          if (data.port) {
            // Copy to clipboard
            navigator.clipboard.writeText(data.port.toString())
              .then(() => {
                showNotification(`Port ${data.port} copied to clipboard!`, 'success');
              })
              .catch(err => {
                console.error('Failed to copy: ', err);
                showNotification(`Suggested free port: ${data.port}`, 'info');
              });
          }
        } catch (error) {
          console.error('Error:', error);
          showNotification('Failed to suggest port', 'danger');
        }
      });
    }
  });

  // Function to handle app deletion confirmation
  function confirmDeleteApp(appId, appName) {
    const modal = document.getElementById('deleteAppModal');
    const modalBody = document.getElementById('deleteAppModalBody');
    const deleteForm = document.getElementById('deleteAppForm');

    modalBody.textContent = `Are you sure you want to delete application "${appName}"? This action cannot be undone.`;
    deleteForm.action = `/dashboard/apps/${appId}/delete`;

    const bsModal = new bootstrap.Modal(modal);
    bsModal.show();
  }
</script>
{% endblock %}

{% block styles %}
<style>
  .port-map {
    overflow-x: auto;
  }

  .port-map-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 4px;
  }

  .port-item {
    padding: 4px;
    font-size: 10px;
    text-align: center;
    border-radius: 3px;
    cursor: pointer;
    user-select: none;
  }

  .port-item:hover {
    opacity: 0.8;
  }

  .markdown-body {
    padding: 1rem;
    background-color: var(--tblr-bg-surface);
    border: 1px solid var(--tblr-border-color);
    border-radius: 4px;
  }
</style>
{% endblock %}