{% extends "base.html" %}

{% block content %}
  <section class="section">
    <div class="container">
      <h1 class="title is-4">Command Routing</h1>
      <p class="subtitle is-6">Manage command profiles, channel bindings, business-plan outputs, and translation bridges.</p>

      <article class="box">
        <h2 class="title is-6">Create Command Profile</h2>
        <form method="post">
          {% csrf_token %}
          <input type="hidden" name="action" value="profile_create">
          <div class="columns">
            <div class="column">
              <input class="input is-small" name="slug" placeholder="slug (bp)" value="bp">
            </div>
            <div class="column">
              <input class="input is-small" name="name" placeholder="name" value="Business Plan">
            </div>
            <div class="column">
              <input class="input is-small" name="trigger_token" placeholder="trigger token" value="#bp#">
            </div>
          </div>
          <textarea class="textarea is-small" name="template_text" rows="4" placeholder="Business plan template"></textarea>
          <button class="button is-link is-small" type="submit">Create Profile</button>
        </form>
      </article>

      {% for profile in profiles %}
        <article class="box">
          <h2 class="title is-6">{{ profile.name }} ({{ profile.slug }})</h2>
          <form method="post" style="margin-bottom: 0.75rem;">
            {% csrf_token %}
            <input type="hidden" name="action" value="profile_update">
            <input type="hidden" name="profile_id" value="{{ profile.id }}">
            <div class="columns is-multiline">
              <div class="column is-3">
                <label class="label is-size-7">Name</label>
                <input class="input is-small" name="name" value="{{ profile.name }}">
              </div>
              <div class="column is-2">
                <label class="label is-size-7">Trigger</label>
                <input class="input is-small" name="trigger_token" value="{{ profile.trigger_token }}">
              </div>
              <div class="column is-2">
                <label class="label is-size-7">Visibility</label>
                <div class="select is-small is-fullwidth">
                  <select name="visibility_mode">
                    <option value="status_in_source" {% if profile.visibility_mode == 'status_in_source' %}selected{% endif %}>status_in_source</option>
                    <option value="silent" {% if profile.visibility_mode == 'silent' %}selected{% endif %}>silent</option>
                  </select>
                </div>
              </div>
              <div class="column is-5">
                <label class="label is-size-7">Flags</label>
                <label class="checkbox is-size-7"><input type="checkbox" name="enabled" value="1" {% if profile.enabled %}checked{% endif %}> enabled</label>
                <label class="checkbox is-size-7" style="margin-left: 0.6rem;"><input type="checkbox" name="reply_required" value="1" {% if profile.reply_required %}checked{% endif %}> reply required</label>
                <label class="checkbox is-size-7" style="margin-left: 0.6rem;"><input type="checkbox" name="exact_match_only" value="1" {% if profile.exact_match_only %}checked{% endif %}> exact match</label>
              </div>
            </div>
            <label class="label is-size-7">BP Template</label>
            <textarea class="textarea is-small" name="template_text" rows="5">{{ profile.template_text }}</textarea>
            <div class="buttons" style="margin-top: 0.6rem;">
              <button class="button is-link is-small" type="submit">Save Profile</button>
            </div>
          </form>

          <div class="columns">
            <div class="column">
              <h3 class="title is-7">Channel Bindings</h3>
              <table class="table is-fullwidth is-striped is-size-7">
                <thead>
                  <tr><th>Direction</th><th>Service</th><th>Channel</th><th></th></tr>
                </thead>
                <tbody>
                  {% for binding in profile.channel_bindings.all %}
                    <tr>
                      <td>{{ binding.direction }}</td>
                      <td>{{ binding.service }}</td>
                      <td>{{ binding.channel_identifier }}</td>
                      <td>
                        <form method="post">
                          {% csrf_token %}
                          <input type="hidden" name="action" value="binding_delete">
                          <input type="hidden" name="binding_id" value="{{ binding.id }}">
                          <button class="button is-danger is-light is-small" type="submit">Delete</button>
                        </form>
                      </td>
                    </tr>
                  {% empty %}
                    <tr><td colspan="4">No bindings yet.</td></tr>
                  {% endfor %}
                </tbody>
              </table>
              <form method="post">
                {% csrf_token %}
                <input type="hidden" name="action" value="binding_create">
                <input type="hidden" name="profile_id" value="{{ profile.id }}">
                <div class="columns">
                  <div class="column">
                    <div class="select is-small is-fullwidth">
                      <select name="direction">
                        {% for value in directions %}
                          <option value="{{ value }}">{{ value }}</option>
                        {% endfor %}
                      </select>
                    </div>
                  </div>
                  <div class="column">
                    <div class="select is-small is-fullwidth">
                      <select name="service">
                        {% for value in channel_services %}
                          <option value="{{ value }}">{{ value }}</option>
                        {% endfor %}
                      </select>
                    </div>
                  </div>
                  <div class="column">
                    <input class="input is-small" name="channel_identifier" placeholder="channel identifier">
                  </div>
                  <div class="column is-narrow">
                    <button class="button is-link is-small" type="submit">Add</button>
                  </div>
                </div>
              </form>
            </div>

            <div class="column">
              <h3 class="title is-7">Actions</h3>
              <table class="table is-fullwidth is-striped is-size-7">
                <thead>
                  <tr><th>Type</th><th>Enabled</th><th>Position</th><th></th></tr>
                </thead>
                <tbody>
                  {% for action_row in profile.actions.all %}
                    <tr>
                      <td>{{ action_row.action_type }}</td>
                      <td>{{ action_row.enabled }}</td>
                      <td>{{ action_row.position }}</td>
                      <td>
                        <form method="post">
                          {% csrf_token %}
                          <input type="hidden" name="action" value="action_update">
                          <input type="hidden" name="command_action_id" value="{{ action_row.id }}">
                          <label class="checkbox is-size-7"><input type="checkbox" name="enabled" value="1" {% if action_row.enabled %}checked{% endif %}> enabled</label>
                          <input class="input is-small" style="width: 5rem;" name="position" value="{{ action_row.position }}">
                          <button class="button is-link is-light is-small" type="submit">Save</button>
                        </form>
                      </td>
                    </tr>
                  {% empty %}
                    <tr><td colspan="4">No actions.</td></tr>
                  {% endfor %}
                </tbody>
              </table>
            </div>
          </div>

          <form method="post" style="margin-top: 0.75rem;">
            {% csrf_token %}
            <input type="hidden" name="action" value="profile_delete">
            <input type="hidden" name="profile_id" value="{{ profile.id }}">
            <button class="button is-danger is-light is-small" type="submit">Delete Profile</button>
          </form>
        </article>
      {% empty %}
        <article class="notification is-light">No command profiles configured.</article>
      {% endfor %}

      <article class="box">
        <h2 class="title is-6">Business Plan Documents</h2>
        <table class="table is-fullwidth is-striped is-size-7">
          <thead>
            <tr><th>Title</th><th>Status</th><th>Source</th><th>Updated</th><th></th></tr>
          </thead>
          <tbody>
            {% for doc in documents %}
              <tr>
                <td>{{ doc.title }}</td>
                <td>{{ doc.status }}</td>
                <td>{{ doc.source_service }} · {{ doc.source_channel_identifier }}</td>
                <td>{{ doc.updated_at }}</td>
                <td><a class="button is-small is-link is-light" href="{% url 'business_plan_editor' doc_id=doc.id %}">Open</a></td>
              </tr>
            {% empty %}
              <tr><td colspan="5">No business plan documents yet.</td></tr>
            {% endfor %}
          </tbody>
        </table>
      </article>

      <article class="box">
        <h2 class="title is-6">Translation Bridges</h2>
        <form method="post" style="margin-bottom: 0.75rem;">
          {% csrf_token %}
          <input type="hidden" name="action" value="bridge_create">
          <div class="columns is-multiline">
            <div class="column is-2"><input class="input is-small" name="name" placeholder="name"></div>
            <div class="column is-2"><input class="input is-small" name="quick_mode_title" placeholder="quick mode: en|es"></div>
            <div class="column is-2">
              <div class="select is-small is-fullwidth"><select name="a_service">{% for value in channel_services %}<option value="{{ value }}">{{ value }}</option>{% endfor %}</select></div>
            </div>
            <div class="column is-2"><input class="input is-small" name="a_channel_identifier" placeholder="A channel"></div>
            <div class="column is-1"><input class="input is-small" name="a_language" value="en"></div>
            <div class="column is-2">
              <div class="select is-small is-fullwidth"><select name="b_service">{% for value in channel_services %}<option value="{{ value }}">{{ value }}</option>{% endfor %}</select></div>
            </div>
            <div class="column is-2"><input class="input is-small" name="b_channel_identifier" placeholder="B channel"></div>
            <div class="column is-1"><input class="input is-small" name="b_language" value="es"></div>
            <div class="column is-2">
              <div class="select is-small is-fullwidth"><select name="direction">{% for value in bridge_directions %}<option value="{{ value }}">{{ value }}</option>{% endfor %}</select></div>
            </div>
            <div class="column is-1"><button class="button is-link is-small" type="submit">Add</button></div>
          </div>
        </form>
        <table class="table is-fullwidth is-striped is-size-7">
          <thead>
            <tr><th>Name</th><th>A</th><th>B</th><th>Direction</th><th></th></tr>
          </thead>
          <tbody>
            {% for bridge in bridges %}
              <tr>
                <td>{{ bridge.name }}</td>
                <td>{{ bridge.a_service }} · {{ bridge.a_channel_identifier }} · {{ bridge.a_language }}</td>
                <td>{{ bridge.b_service }} · {{ bridge.b_channel_identifier }} · {{ bridge.b_language }}</td>
                <td>{{ bridge.direction }}</td>
                <td>
                  <form method="post">
                    {% csrf_token %}
                    <input type="hidden" name="action" value="bridge_delete">
                    <input type="hidden" name="bridge_id" value="{{ bridge.id }}">
                    <button class="button is-danger is-light is-small" type="submit">Delete</button>
                  </form>
                </td>
              </tr>
            {% empty %}
              <tr><td colspan="5">No translation bridges configured.</td></tr>
            {% endfor %}
          </tbody>
        </table>
      </article>

      <article class="box">
        <h2 class="title is-6">Translation Event Log</h2>
        <table class="table is-fullwidth is-striped is-size-7">
          <thead>
            <tr><th>Bridge</th><th>Status</th><th>Target</th><th>Error</th><th>At</th></tr>
          </thead>
          <tbody>
            {% for event in events %}
              <tr>
                <td>{{ event.bridge.name }}</td>
                <td>{{ event.status }}</td>
                <td>{{ event.target_service }} · {{ event.target_channel }}</td>
                <td>{{ event.error|default:"-" }}</td>
                <td>{{ event.created_at }}</td>
              </tr>
            {% empty %}
              <tr><td colspan="5">No events yet.</td></tr>
            {% endfor %}
          </tbody>
        </table>
      </article>
    </div>
  </section>
{% endblock %}