{% extends "web/base.html" %}

{% block title %}Data Sources | tcx{% endblock %}
{% block page_label %}Data Sources{% endblock %}

{% block content %}
<div
  class="tc-mcp-page"
  data-tcx-mcp-page
  data-selected-router="{% if external_tools %}{{ external_tools.0.router.name }}{% elif routers %}{{ routers.0.name }}{% endif %}"
  data-selected-tool="{% if external_tools %}tool-{{ external_tools.0.id }}{% endif %}"
>
  <section class="tc-mcp-toolbar" aria-label="Data source controls">
    <div class="tc-mcp-toolbar-main">
      <strong>Data Sources</strong>
      <span>Review status: {{ router_count }} connections / {{ external_tool_count }} actions / {{ enabled_external_tool_count }} enabled</span>
    </div>
    <button class="tc-button tc-button-primary" type="button" data-tcx-modal-open>Add source</button>
  </section>

  <section class="tc-mcp-workbench" aria-label="Data source workflow">
    <aside class="tc-mcp-column tc-mcp-column--routers">
      <div class="tc-mcp-column-head">
        <div>
          <span class="tc-eyebrow">Connection list</span>
          <h2>Source connections</h2>
        </div>
        <span class="tc-pill tc-pill--warn">{{ review_required_count }} review</span>
      </div>

      <div class="tc-mcp-list">
        {% for router in routers %}
        <article class="tc-mcp-router-card" data-router-name="{{ router.name }}">
          <button
            class="tc-mcp-router-select"
            type="button"
            data-tcx-select-router
            data-router-name="{{ router.name }}"
          >
            <span class="tc-pill tc-pill--{% if router.enabled %}good{% else %}neutral{% endif %}">{% if router.enabled %}enabled{% else %}disabled{% endif %}</span>
            <strong>{{ router.label|default:router.name }}</strong>
            <small>{{ router.transport }} / {{ router.trust_level }} / {{ router.last_status }}</small>
            <code>{% if router.url %}{{ router.url }}{% else %}{{ router.command|default:"no command" }}{% endif %}</code>
          </button>

          <div class="tc-mcp-router-actions">
            <form method="post" action="{% url 'web-mcp-router-check' router.id %}">
              {% csrf_token %}
              <input type="hidden" name="next" value="{{ request.get_full_path }}">
              <button class="tc-mini-button" type="submit">Check</button>
            </form>
            <form method="post" action="{% url 'web-mcp-router-discover' router.id %}">
              {% csrf_token %}
              <input type="hidden" name="next" value="{{ request.get_full_path }}">
              <button class="tc-mini-button" type="submit">Discover</button>
            </form>
          </div>
          {% if router.last_error %}
          <p class="tc-mcp-router-error">{{ router.last_error }}</p>
          {% endif %}

          <details class="tc-mcp-import">
            <summary>Import discovery</summary>
            <form class="tc-form" method="post" action="{% url 'web-mcp-router-import' router.id %}">
              {% csrf_token %}
              <input type="hidden" name="next" value="{{ request.get_full_path }}">
              <label>Discovery JSON
                <textarea name="discovery_payload" rows="5" placeholder='{"tools":[{"name":"get_quote","description":"Get market quote","inputSchema":{"type":"object"}}]}'></textarea>
              </label>
              <button class="tc-mini-button" type="submit">Import</button>
            </form>
          </details>
        </article>
        {% empty %}
        <div class="tc-empty-state">
          <strong>No source connections</strong>
          <span>Add a source, then check its health and discover available read-only actions.</span>
        </div>
        {% endfor %}
      </div>
    </aside>

    <section class="tc-mcp-column tc-mcp-column--tools">
      <div class="tc-mcp-column-head">
        <div>
          <span class="tc-eyebrow">Action list</span>
          <h2>Available actions</h2>
        </div>
      </div>

      <div class="tc-mcp-list">
        {% for tool in external_tools %}
        <button
          id="tool-{{ tool.id }}"
          class="tc-mcp-tool-card"
          type="button"
          data-tcx-tool-card
          data-tool-id="tool-{{ tool.id }}"
          data-router-name="{{ tool.router.name }}"
        >
          <span class="tc-pill tc-pill--{% if tool.risk_level == 'execution' or tool.risk_level == 'blocked' %}bad{% elif tool.risk_level == 'write' %}warn{% else %}neutral{% endif %}">{{ tool.risk_label }}</span>
          <strong>{{ tool.external_name }}</strong>
          <small>{{ tool.router.name }} / {{ tool.primitive_label }} / {{ tool.review_status_label }}</small>
          <span class="tc-mcp-tool-meta">
            <span>{{ tool.category_label }}</span>
            <span>{{ tool.access_mode_label }}</span>
          </span>
        </button>
        {% empty %}
        <div class="tc-empty-state">
          <strong>No actions yet</strong>
          <span>After discovery, each action is reviewed before it can reach a TradingCodex workflow.</span>
        </div>
        {% endfor %}
      </div>
    </section>

    <section class="tc-mcp-column tc-mcp-column--handling">
      <div class="tc-mcp-column-head">
        <div>
          <span class="tc-eyebrow">TradingCodex</span>
          <h2>Safety review</h2>
        </div>
      </div>

      <div class="tc-mcp-processing" data-tcx-no-tool>
        <div class="tc-mcp-step">
          <span>1</span>
          <strong>Classify</strong>
          <small>Unknown, secret, policy, and execution-like actions start blocked.</small>
        </div>
        <div class="tc-mcp-step">
          <span>2</span>
          <strong>Map</strong>
          <small>Allowed actions map to TradingCodex capabilities and role scopes.</small>
        </div>
        <div class="tc-mcp-step">
          <span>3</span>
          <strong>Dry-run</strong>
          <small>Dry-run decisions are audited before an action can reach an approved service path.</small>
        </div>
      </div>

      {% for tool in external_tools %}
      <div class="tc-mcp-controls" data-tcx-tool-controls data-tool-id="tool-{{ tool.id }}" hidden>
        <div class="tc-mcp-selected-tool">
          <div>
            <span class="tc-eyebrow">Selected action</span>
            <h3>{{ tool.external_name }}</h3>
          </div>
          <span class="tc-pill tc-pill--{% if tool.enabled %}good{% else %}neutral{% endif %}">{% if tool.enabled %}enabled{% else %}disabled{% endif %}</span>
        </div>

        <form class="tc-mcp-control-card tc-form" method="post" action="{% url 'web-mcp-external-tool-update' tool.id %}">
          {% csrf_token %}
          <input type="hidden" name="next" value="{{ request.get_full_path }}">
          <div class="tc-mcp-control-title">
            <strong>Review policy</strong>
            <small>{{ tool.router.name }} / {{ tool.review_status_label }}</small>
          </div>
          <label>Category
            <select name="category">
              {% for option in category_options %}<option value="{{ option.value }}" {% if tool.category == option.value %}selected{% endif %}>{{ option.label }}</option>{% endfor %}
            </select>
          </label>
          <label>Risk
            <select name="risk_level">
              {% for option in risk_options %}<option value="{{ option.value }}" {% if tool.risk_level == option.value %}selected{% endif %}>{{ option.label }}</option>{% endfor %}
            </select>
          </label>
          <label>Sensitivity
            <select name="sensitivity">
              {% for option in sensitivity_options %}<option value="{{ option.value }}" {% if tool.sensitivity == option.value %}selected{% endif %}>{{ option.label }}</option>{% endfor %}
            </select>
          </label>
          <label>Action mapping <input name="canonical_capability" value="{{ tool.canonical_capability }}"></label>
          <label>Access mode
            <select name="proxy_mode">
              {% for option in proxy_mode_options %}<option value="{{ option.value }}" {% if tool.proxy_mode == option.value %}selected{% endif %}>{{ option.label }}</option>{% endfor %}
            </select>
          </label>
          <label>Roles <input name="allowed_roles" value="{{ tool.allowed_roles|join:", " }}"></label>
          <label>Enabled
            <select name="enabled">
              <option value="false" {% if not tool.enabled %}selected{% endif %}>No</option>
              <option value="true" {% if tool.enabled %}selected{% endif %}>Yes</option>
            </select>
          </label>
          <button class="tc-button" type="submit">Save review</button>
        </form>

        <form class="tc-mcp-control-card tc-form" method="post" action="{% url 'web-mcp-external-tool-check' tool.id %}">
          {% csrf_token %}
          <input type="hidden" name="next" value="{{ request.get_full_path }}">
          <div class="tc-mcp-control-title">
            <strong>Action dry-run</strong>
            <small>{{ tool.access_mode_label }} / {{ tool.action_mapping_label }}</small>
          </div>
          <label>Requester role <input name="principal_id" value="head-manager"></label>
          <label>Dry-run input <textarea name="arguments" rows="4">{}</textarea></label>
          <button class="tc-button" type="submit">Run check</button>
        </form>
      </div>
      {% endfor %}

      <section class="tc-mcp-audit" aria-label="Recent action decisions">
        <div class="tc-mcp-control-title">
          <strong>Recent decisions</strong>
          <small>Audit trail</small>
        </div>
        <div class="tc-mini-feed">
          {% for call in recent_external_calls %}
          <div>
            <span class="tc-pill tc-pill--{% if call.decision == 'allow' %}good{% else %}bad{% endif %}">{{ call.decision }}</span>
            <strong>{{ call.router_name }} / {{ call.external_name }}</strong>
            <span>{{ call.principal_id }} / {{ call.access_mode_label }}</span>
          </div>
          {% empty %}
          <p class="tc-empty">No action decisions yet.</p>
          {% endfor %}
        </div>
      </section>
    </section>
  </section>

  <div class="tc-modal-backdrop" data-tcx-modal-backdrop hidden>
    <section class="tc-modal" role="dialog" aria-modal="true" aria-labelledby="mcp-router-modal-title">
      <div class="tc-modal-head">
        <div>
          <span class="tc-eyebrow">New connection</span>
          <h2 id="mcp-router-modal-title">Add source connection</h2>
        </div>
        <button class="tc-icon-button" type="button" aria-label="Close" data-tcx-modal-close>&times;</button>
      </div>
      <form class="tc-form" method="post" action="{% url 'web-mcp-router-create' %}">
        {% csrf_token %}
        <input type="hidden" name="next" value="{{ request.get_full_path }}">
        <label>Name <input name="name" placeholder="provider-paper" required></label>
        <label>Label <input name="label" placeholder="Paper Provider"></label>
        <label>Transport
          <select name="transport">
            <option value="stdio">stdio</option>
            <option value="http">http</option>
            <option value="streamable-http">streamable-http</option>
          </select>
        </label>
        <label>Command <input name="command" placeholder="uvx broker-mcp"></label>
        <label>Args <textarea name="args" rows="2" placeholder='["--stdio"]'></textarea></label>
        <label>Env <textarea name="env" rows="2" placeholder='{"BROKER_PROFILE":"paper"}'></textarea></label>
        <label>URL <input name="url" placeholder="https://localhost:9000/mcp"></label>
        <label>Credential ref <input name="credential_ref" placeholder="os-keychain://tradingcodex/broker/default"></label>
        <label>Enabled
          <select name="enabled">
            <option value="false">No</option>
            <option value="true">Yes</option>
          </select>
        </label>
        <div class="tc-modal-actions">
          <button class="tc-button" type="button" data-tcx-modal-close>Cancel</button>
          <button class="tc-button tc-button-primary" type="submit">Save connection</button>
        </div>
      </form>
    </section>
  </div>
</div>
{% endblock %}