{% extends "base.html" %}

{% block title %}Gerenciar SLAs{% endblock %}

{% block content %}
<header class="page-header">
  <h2>Gerenciar Acordos de Nível de Serviço (SLA)</h2>
  <p>Cadastre e mantenha os prazos que sustentam a operação de suporte.</p>
</header>

<div class="page-stack">
  <section class="card form-card">
    <div class="card-header">
      <h3>Novo SLA</h3>
      <p class="muted">Defina tempos de resposta e resolução alinhados às expectativas do negócio.</p>
    </div>
    <div class="card-body">
      <form method="POST" class="form-grid">
        <input type="hidden" name="acao" value="criar">
        <div class="form-group">
          <label for="nome">Nome</label>
          <input type="text" id="nome" name="nome" class="form-control" placeholder="Ex.: Suporte Padrão" required>
        </div>
        <div class="form-group">
          <label for="descricao">Descrição</label>
          <textarea id="descricao" name="descricao" class="form-control" rows="2" placeholder="Resuma o que está coberto por este SLA"></textarea>
        </div>
        <div class="form-group-inline">
          <div class="form-group">
            <label for="tempo_resposta_horas">Tempo de resposta (horas)</label>
            <input type="number" id="tempo_resposta_horas" name="tempo_resposta_horas" class="form-control" min="1" value="24" required>
          </div>
          <div class="form-group">
            <label for="tempo_resolucao_horas">Tempo de resolução (horas)</label>
            <input type="number" id="tempo_resolucao_horas" name="tempo_resolucao_horas" class="form-control" min="1" value="72" required>
          </div>
        </div>
        <div class="form-actions">
          <button type="submit" class="btn btn-soft-success">Cadastrar SLA</button>
        </div>
      </form>
    </div>
  </section>

  <section class="card table-card">
    <div class="card-header table-card-header">
      <div>
        <h3>SLAs cadastrados</h3>
        <p class="muted">Monitore e atualize os compromissos assumidos com os clientes.</p>
      </div>
      <div class="card-insights">
        <span class="insight-pill">
          <span class="insight-value">{{ slas|length }}</span>
          <span class="insight-label">SLA{% if slas|length != 1 %}s{% endif %}</span>
        </span>
      </div>
    </div>
    <div class="card-body">
      {% if slas %}
        <div class="table-section">
          <table class="table table-lined">
            <thead>
              <tr>
                <th class="col-name">Nome</th>
                <th>Descrição</th>
                <th>Tempo de resposta (h)</th>
                <th>Tempo de resolução (h)</th>
                <th style="width: 220px;">Ações</th>
              </tr>
            </thead>
            <tbody>
              {% for sla in slas %}
              <tr data-sla-row class="{% if not sla.ativo %}row-inactive{% endif %}">
                <form method="POST" action="{{ url_for('gerenciar_slas') }}">
                  <input type="hidden" name="acao" value="atualizar">
                  <input type="hidden" name="id_sla" value="{{ sla.id_sla }}">
                  <td class="col-name">
                    <span class="view-value" data-empty="-">{{ sla.nome }}</span>
                    <input class="form-control edit-field" type="text" name="nome" value="{{ sla.nome }}" required style="display:none;" disabled>
                  </td>
                  <td class="col-descricao">
                    <span class="view-value view-textarea" data-empty="Sem descrição">{{ sla.descricao or 'Sem descrição' }}</span>
                    <textarea class="form-control edit-field" name="descricao" rows="2" placeholder="Descrição" style="display:none;" disabled>{{ sla.descricao }}</textarea>
                  </td>
                  <td>
                    <span class="view-value" data-unit="h">{{ sla.tempo_resposta_horas }} h</span>
                    <input class="form-control edit-field" type="number" name="tempo_resposta_horas" min="1" value="{{ sla.tempo_resposta_horas }}" required style="display:none;" disabled>
                  </td>
                  <td>
                    <span class="view-value" data-unit="h">{{ sla.tempo_resolucao_horas }} h</span>
                    <input class="form-control edit-field" type="number" name="tempo_resolucao_horas" min="1" value="{{ sla.tempo_resolucao_horas }}" required style="display:none;" disabled>
                  </td>
                  <td>
                    <div class="table-actions">
                      <button type="button" class="btn btn-soft-neutral btn-edit" onclick="startEdit(this)">
                        <span>Editar</span>
                      </button>
                      <button type="submit" class="btn btn-soft-success btn-save" style="display:none;">
                        <span>Salvar</span>
                      </button>
                      <button type="button" class="btn btn-soft-warning btn-cancel" onclick="cancelEdit(this)" style="display:none;">
                        <span>Cancelar</span>
                      </button>
                      <button class="btn btn-soft-danger" type="submit"
                              formaction="{{ url_for('excluir_sla', sla_id=sla.id_sla) }}"
                              formmethod="post"
                              onclick="return confirm('Remover o SLA {{ sla.nome }}?');">
                        <span>Excluir</span>
                      </button>
                    </div>
                  </td>
                </form>
              </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      {% else %}
        <div class="empty-state">
          <h4>Nenhum SLA cadastrado</h4>
          <p>Cadastre um novo SLA acima para começar a monitorar seus tempos de atendimento.</p>
        </div>
      {% endif %}
    </div>
  </section>
</div>

<script>
  function syncSLARowView(tr) {
    tr.querySelectorAll('td').forEach(td => {
      const view = td.querySelector('.view-value');
      const field = td.querySelector('.edit-field');
      if (!view || !field) {
        return;
      }

      let value = '';
      if (field.tagName === 'SELECT') {
        const option = field.options[field.selectedIndex];
        value = option ? option.text.trim() : '';
      } else if (field.tagName === 'TEXTAREA') {
        value = field.value ? field.value.trim() : '';
      } else {
        value = field.value ? field.value.trim() : '';
      }

      if (view.dataset.unit && value !== '') {
        value = `${value} ${view.dataset.unit}`;
      }

      const emptyFallback = view.dataset.empty || '-';
      view.textContent = value !== '' ? value : emptyFallback;
    });

  }

  function startEdit(btn) {
    const tr = btn.closest('tr');
    if (!tr) return;
    const form = tr.querySelector('form');
    if (!form) return;

    tr.classList.add('editing-row');

    tr.querySelectorAll('.view-value').forEach(el => {
      el.style.display = 'none';
    });

    tr.querySelectorAll('.edit-field').forEach(el => {
      el.style.display = '';
      const field = el.matches('input, textarea, select') ? el : el.querySelector('input, textarea, select');
      if (field) {
        field.disabled = false;
        field.removeAttribute('disabled');
      }
    });

    const editBtn = tr.querySelector('.btn-edit');
    const saveBtn = tr.querySelector('.btn-save');
    const cancelBtn = tr.querySelector('.btn-cancel');
    if (editBtn) editBtn.style.display = 'none';
    if (saveBtn) saveBtn.style.display = '';
    if (cancelBtn) cancelBtn.style.display = '';

    const firstField = tr.querySelector('.edit-field');
    if (firstField) {
      const focusable = firstField.matches('input, textarea, select') ? firstField : firstField.querySelector('input, textarea, select');
      if (focusable) {
        focusable.focus();
      }
    }
  }

  function cancelEdit(btn) {
    const tr = btn.closest('tr');
    if (!tr) return;
    const form = tr.querySelector('form');
    if (!form) return;

    form.reset();

    tr.querySelectorAll('.edit-field').forEach(el => {
      const field = el.matches('input, textarea, select') ? el : el.querySelector('input, textarea, select');
      if (field) {
        field.disabled = true;
        field.setAttribute('disabled', 'disabled');
      }
      el.style.display = 'none';
    });

    tr.querySelectorAll('.view-value').forEach(el => {
      el.style.display = '';
    });

    const editBtn = tr.querySelector('.btn-edit');
    const saveBtn = tr.querySelector('.btn-save');
    const cancelBtn = tr.querySelector('.btn-cancel');
    if (editBtn) editBtn.style.display = '';
    if (saveBtn) saveBtn.style.display = 'none';
    if (cancelBtn) cancelBtn.style.display = 'none';

    tr.classList.remove('editing-row');
    syncSLARowView(tr);
  }

  document.querySelectorAll('tr[data-sla-row]').forEach(tr => syncSLARowView(tr));
</script>
{% endblock %}