{% extends 'base.html' %}
{% block head %}
  <link href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css" rel="stylesheet">
  {% include 'rota/partials/flatpickr_includes.html' %}
{% endblock %}
{% block content %}
  <section class="section">
    <div class="container">
      <h1 class="title">{{ rota.name }}</h1>
      <p><a class="button is-small" href="{% url 'rota:rota_edit' rota.id %}">Edit rota</a></p>
      <p class="subtitle">{{ rota.description }}</p>
      <p>Period: {{ rota.start_date }} → {{ rota.end_date }}</p>

      <div class="mb-4">
        <p>
          <button class="button is-link" hx-get="{% url 'rota:worker_add' %}?rota_id={{ rota.id }}" hx-target="#modal" hx-swap="innerHTML">Add worker</button>
          <a class="button is-info is-light is-small" href="{% url 'rota:leaves_global_rota' rota.id %}" style="margin-left:0.5rem;">All leave requests</a>
        </p>
        {% include 'rota/partials/worker_list.html' %}
      </div>

      <div class="mb-4">
        <details class="box">
          <summary class="subtitle" style="cursor:pointer; outline:none;">Historic runs</summary>
          <div style="margin-bottom:0.5em; margin-top:0.5em;">
            <form method="post" action="{% url 'rota:rota_runs_clear' rota.id %}" style="display:inline" onsubmit="return confirm('Delete all historic runs for this rota? This cannot be undone.')">
              {% csrf_token %}
              <button class="button is-danger is-light is-small" type="submit">Clear all runs</button>
            </form>
          </div>
          <ul>
            {% for run in rota.runs.all %}
              <li>
                <a href="{% url 'rota:rota_run_detail' run.id %}">Run {{ run.id }}</a> — {{ run.get_status_display }}
                {% if run.finished_at %} — finished {{ run.finished_at }}{% endif %}
                <span class="ml-2"><a class="button is-small is-light" href="{% url 'rota:rota_run_export_html' run.id %}" target="_blank">Export</a></span>
              </li>
            {% empty %}
              <li>No previous runs</li>
            {% endfor %}
          </ul>
        </details>
      </div>

      <div class="mb-4">
        <h2 class="subtitle">Constraint options</h2>
        <div class="box">
          <p class="help">Configure typed rota constraint options. Click Edit to open the form showing typed fields and descriptions.</p>
          <p><button class="button is-link" hx-get="{% url 'rota:rota_options' rota.id %}" hx-target="#modal" hx-swap="innerHTML">Edit constraint options</button></p>
          <hr />
          <details class="constraints-details" style="margin-top:0.5rem;">
            <summary class="subtitle is-6" style="cursor:pointer; outline:none;">Configured constraint values{% if configured_constraints %} ({{ configured_constraints|length }}){% endif %}</summary>
            <div style="margin-top:0.5rem;">
              <div style="display:flex; gap:0.5rem; align-items:center; margin-bottom:0.5rem;">
                <input id="constraint-filter-{{ rota.id }}" class="input is-small" type="search" placeholder="Filter constraints (key or value)..." aria-label="Filter constraints" />
                <button id="constraint-clear-{{ rota.id }}" class="button is-small is-light" type="button">Clear</button>
              </div>
              <div class="constraints-scroll" style="max-height:600px; overflow:auto; margin-bottom:0.75em;">
              {% if configured_constraints %}
              <table class="table is-fullwidth is-striped is-narrow" id="constraint-table-{{ rota.id }}">
                <thead><tr><th>Key</th><th>Value</th><th></th></tr></thead>
                <tbody>
                  {% for key, info in configured_constraints.items %}
                    <tr id="constraint-row-{{ key }}">
                      <td style="vertical-align:middle;"><code title="{{ info.description|default:'' }}">{{ key }}</code></td>
                      <td style="vertical-align:middle;"><pre style="white-space:pre-wrap; margin:0;">{{ info.pretty }}</pre></td>
                      <td style="vertical-align:middle;">
                        <a href="javascript:void(0)" class="button is-small is-light" role="button" hx-get="{% url 'rota:rota_option_edit' rota.id %}?key={{ key }}" hx-target="#modal" hx-swap="innerHTML">Edit</a>
                        <form method="post" hx-post="{% url 'rota:rota_option_delete' rota.id %}" hx-target="#constraint-row-{{ key }}" hx-swap="outerHTML" style="display:inline">
                          {% csrf_token %}
                          <input type="hidden" name="key" value="{{ key }}" />
                          <input type="hidden" name="inline" value="1" />
                          <button class="button is-small is-danger is-light" type="submit">Delete</button>
                        </form>
                      </td>
                    </tr>
                  {% endfor %}
                </tbody>
              </table>
            {% else %}
              <p class="help">No typed constraint options have been configured for this rota.</p>
            {% endif %}
              </div>
            </div>
            <script>
              (function(){
                const input = document.getElementById('constraint-filter-{{ rota.id }}');
                const clearBtn = document.getElementById('constraint-clear-{{ rota.id }}');
                const table = document.getElementById('constraint-table-{{ rota.id }}');
                if(!input || !table) return;
                const rows = Array.from(table.tBodies[0].rows);
                function normalize(s){ return (s||'').toString().toLowerCase(); }
                function applyFilter(){
                  const q = normalize(input.value.trim());
                  if(!q){ rows.forEach(r => r.style.display=''); return; }
                  rows.forEach(r => {
                    const key = normalize(r.cells[0].innerText);
                    const val = normalize(r.cells[1].innerText);
                    r.style.display = (key.indexOf(q) !== -1 || val.indexOf(q) !== -1) ? '' : 'none';
                  });
                }
                let debounce;
                input.addEventListener('input', ()=>{ clearTimeout(debounce); debounce = setTimeout(applyFilter, 150); });
                clearBtn.addEventListener('click', ()=>{ input.value=''; applyFilter(); input.focus(); });
              })();
            </script>
          </details>
        </div>
      </div>

      <form method="post">
        {% csrf_token %}
        <div class="field is-grouped is-grouped-multiline">
          <div class="control"><label class="checkbox"><input type="checkbox" name="generate_builder" value="1"> Generate HTML export</label></div>
          <div class="control"><label class="checkbox"><input type="checkbox" name="builder_solve" value="1"> Solve when exporting (may be slow)</label></div>
          <div class="control"><button class="button is-primary" type="submit">Run scheduler (background)</button></div>
        </div>
      </form>

      <hr />

      <div>
        <h2 class="subtitle">Edit shifts</h2>
        <p><button class="button is-link" hx-get="{% url 'rota:shift_add' rota.id %}" hx-target="#shift-form" hx-swap="innerHTML">Add shift</button></p>
        <div id="shift-form">{# Load form via HTMX when user clicks 'Add shift' - initial empty state #}</div>
        {% include 'rota/partials/shift_list.html' %}
      </div>

    </div>
  </section>
{% endblock %}