{% extends "base.html" %}
{% block title %}{% if wf %}Edit{% else %}Add{% endif %} Workflow – Location Management{% endblock %}

{% block content %}
<nav aria-label="breadcrumb" class="mb-3">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="{{ url_for('workflows.list_workflows') }}">Workflows</a></li>
    <li class="breadcrumb-item active">{% if wf %}Edit: {{ wf.name }}{% else %}New Workflow{% endif %}</li>
  </ol>
</nav>

<div class="card border-0 rounded-4" style="max-width:700px">
  <div class="card-header bg-transparent fw-semibold pt-3">
    <i class="bi bi-diagram-3 me-1 text-warning"></i>
    {% if wf %}Edit Workflow{% else %}New Workflow{% endif %}
  </div>
  <div class="card-body">
    <form method="POST">
      <div class="mb-4">
        <label class="form-label fw-semibold">Workflow Name</label>
        <input type="text" name="name" class="form-control" value="{{ wf.name if wf else '' }}"
               placeholder="e.g. Door bell → Living room light" required />
      </div>

      <!-- Trigger -->
      <div class="card rounded-3 border-info mb-4">
        <div class="card-header bg-info bg-opacity-10 fw-semibold">
          <i class="bi bi-arrow-right-circle me-1 text-info"></i> Trigger (Input Event)
        </div>
        <div class="card-body">
          <div class="row g-3">
            <div class="col-12">
              <label class="form-label">Board</label>
              <select name="trigger_board_id" class="form-select" id="trigger_board" onchange="updateInputs(this, 'trigger_input')">
                {% for b in boards %}
                <option value="{{ b.id }}"
                  data-inputs="{{ b.num_inputs }}"
                  {% if wf and wf.trigger_board_id == b.id %}selected{% endif %}>
                  {{ b.name }} ({{ b.host }})
                </option>
                {% endfor %}
              </select>
            </div>
            <div class="col-6">
              <label class="form-label">Input Number</label>
              <select name="trigger_input" class="form-select" id="trigger_input">
                {% if wf %}
                  {% for n in range(1, wf.trigger_board.num_inputs + 1) %}
                  <option value="{{ n }}" {% if wf.trigger_input == n %}selected{% endif %}>
                    Input {{ n }}{% if wf.trigger_board.get_input_label(n) != 'Input ' ~ n %} — {{ wf.trigger_board.get_input_label(n) }}{% endif %}
                  </option>
                  {% endfor %}
                {% elif boards %}
                  {% for n in range(1, boards[0].num_inputs + 1) %}
                  <option value="{{ n }}">Input {{ n }}</option>
                  {% endfor %}
                {% endif %}
              </select>
            </div>
            <div class="col-6">
              <label class="form-label">Event</label>
              <select name="trigger_event" class="form-select">
                {% for value, label in events %}
                <option value="{{ value }}" {% if wf and wf.trigger_event == value %}selected{% endif %}>{{ label }}</option>
                {% endfor %}
              </select>
            </div>
          </div>
        </div>
      </div>

      <!-- Action -->
      <div class="card rounded-3 border-warning mb-4">
        <div class="card-header bg-warning bg-opacity-10 fw-semibold">
          <i class="bi bi-lightning-charge me-1 text-warning"></i> Action (Relay Control)
        </div>
        <div class="card-body">
          <div class="row g-3">
            <div class="col-12">
              <label class="form-label">Board</label>
              <select name="action_board_id" class="form-select" id="action_board" onchange="updateRelays(this, 'action_relay')">
                {% for b in boards %}
                <option value="{{ b.id }}"
                  data-relays="{{ b.num_relays }}"
                  {% if wf and wf.action_board_id == b.id %}selected{% endif %}>
                  {{ b.name }} ({{ b.host }})
                </option>
                {% endfor %}
              </select>
            </div>
            <div class="col-6">
              <label class="form-label">Relay Number</label>
              <select name="action_relay" class="form-select" id="action_relay">
                {% if wf %}
                  {% for n in range(1, wf.action_board.num_relays + 1) %}
                  <option value="{{ n }}" {% if wf.action_relay == n %}selected{% endif %}>
                    Relay {{ n }}{% if wf.action_board.get_relay_label(n) != 'Relay ' ~ n %} — {{ wf.action_board.get_relay_label(n) }}{% endif %}
                  </option>
                  {% endfor %}
                {% elif boards %}
                  {% for n in range(1, boards[0].num_relays + 1) %}
                  <option value="{{ n }}">Relay {{ n }}</option>
                  {% endfor %}
                {% endif %}
              </select>
            </div>
            <div class="col-6">
              <label class="form-label">Action</label>
              <select name="action_type" class="form-select">
                {% for value, label in actions %}
                <option value="{{ value }}" {% if wf and wf.action_type == value %}selected{% endif %}>{{ label }}</option>
                {% endfor %}
              </select>
            </div>
          </div>
        </div>
      </div>

      {% if wf %}
      <div class="form-check mb-4">
        <input class="form-check-input" type="checkbox" name="is_enabled" id="is_enabled"
               {% if wf.is_enabled %}checked{% endif %} />
        <label class="form-check-label" for="is_enabled">Enabled</label>
      </div>
      {% endif %}

      <div class="d-flex gap-2">
        <button type="submit" class="btn btn-primary"><i class="bi bi-check-lg me-1"></i> Save</button>
        <a href="{{ url_for('workflows.list_workflows') }}" class="btn btn-outline-secondary">Cancel</a>
      </div>
    </form>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
const boardsData = {{ boards | tojson | safe }};
// Build lookup: id -> board object
const boardMap = {};
{{ "{% for b in boards %}" }}
boardMap[{{ "{{ b.id }}" }}] = {
  relays: {{ "{{ b.num_relays }}" }},
  inputs: {{ "{{ b.num_inputs }}" }},
};
{{ "{% endfor %}" }}

function updateInputs(selectEl, targetId) {
  const opt = selectEl.options[selectEl.selectedIndex];
  const n = parseInt(opt.getAttribute("data-inputs")) || 4;
  const target = document.getElementById(targetId);
  target.innerHTML = "";
  for (let i = 1; i <= n; i++) {
    target.innerHTML += `<option value="${i}">Input ${i}</option>`;
  }
}
function updateRelays(selectEl, targetId) {
  const opt = selectEl.options[selectEl.selectedIndex];
  const n = parseInt(opt.getAttribute("data-relays")) || 4;
  const target = document.getElementById(targetId);
  target.innerHTML = "";
  for (let i = 1; i <= n; i++) {
    target.innerHTML += `<option value="${i}">Relay ${i}</option>`;
  }
}
</script>
{% endblock %}