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

{% block title %}Broker Center | tcx{% endblock %}
{% block page_label %}Broker Center{% endblock %}

{% block content %}
<section class="tc-broker-workbench">
  <article class="tc-panel tc-broker-list-panel">
    <div class="tc-panel-head">
      <div>
        <span class="tc-eyebrow">Connected brokers</span>
        <h2>{{ broker_count }} brokers</h2>
      </div>
    </div>
    <div class="tc-table-wrap">
      <table class="tc-data-table">
        <thead>
          <tr>
            <th>Broker</th>
            <th>Transport</th>
            <th>State</th>
            <th>Accounts</th>
            <th>Last sync</th>
            <th>Trading</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          {% for broker in brokers %}
          <tr>
            <td><strong>{{ broker.display_name }}</strong><br><small>{{ broker.broker_id }}</small></td>
            <td>{{ broker.transport }}</td>
            <td>{{ broker.lifecycle_state|default:broker.status }}</td>
            <td>{{ broker.accounts_count }}</td>
            <td>{{ broker.last_sync_at|default:"Never" }}</td>
            <td>{{ broker.trading_status }}</td>
            <td>
              <form method="post" action="{% url 'web-broker-sync' broker.broker_id %}">
                {% csrf_token %}
                <input type="hidden" name="next" value="{{ request.get_full_path }}">
                <button class="tc-mini-button" type="submit">Sync now</button>
              </form>
            </td>
          </tr>
          {% empty %}
          <tr>
            <td colspan="7">
              <div class="tc-empty-state tc-table-empty-state">
                <strong>No brokers connected</strong>
                <span>Add a paper broker to inspect local positions without enabling live trading.</span>
              </div>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </article>

  <aside class="tc-panel tc-setup-panel">
    <div class="tc-panel-head">
      <div>
        <span class="tc-eyebrow">Setup</span>
        <h2>Connect broker</h2>
      </div>
    </div>
    <form class="tc-form" method="post" action="{% url 'web-broker-connect' %}">
      {% csrf_token %}
      <input type="hidden" name="next" value="{{ request.get_full_path }}">
      <label>Broker <input name="broker" placeholder="alpaca" required></label>
      <label>Provider <input name="provider" placeholder="alpaca"></label>
      <label>Credential ref <input name="credential_ref" placeholder="env:ALPACA"></label>
      <label>Environment <input name="environment" placeholder="paper"></label>
      <label>Mode
        <select name="mode">
          <option value="read-only">Read-only sync</option>
          <option value="validation">Order validation</option>
          <option value="live-request">Request live review</option>
        </select>
      </label>
      <button class="tc-button tc-button-primary" type="submit">Connect broker</button>
    </form>

    <form class="tc-form" method="post" action="{% url 'web-broker-add-paper' %}">
      {% csrf_token %}
      <input type="hidden" name="next" value="{{ request.get_full_path }}">
      <input type="hidden" name="sync" value="true">
      <button class="tc-button" type="submit">Add paper broker</button>
    </form>

    <details class="tc-details tc-compact-details">
      <summary>Import data source discovery</summary>
      <form class="tc-form" method="post" action="{% url 'web-broker-add-mcp' %}">
        {% csrf_token %}
        <input type="hidden" name="next" value="{{ request.get_full_path }}">
        <label>Broker id <input name="broker_id" placeholder="example-source" required></label>
        <label>Display name <input name="display_name" placeholder="Example Data Source"></label>
        <label>Data source connection <input name="router_name" placeholder="example-source"></label>
        <label>Credential ref <input name="credential_ref" placeholder="os-keychain://broker/example"></label>
        <label>Discovery JSON
          <textarea name="discovery_payload" rows="6" placeholder='{"tools":[{"name":"get_positions","description":"Read account positions","inputSchema":{"type":"object"}}]}'></textarea>
        </label>
        <button class="tc-button" type="submit">Import discovery</button>
      </form>
    </details>
    <div class="tc-alert">
      <strong>Live execution</strong>
      <span>Locked by default. TradingCodex only uses paper or validation-only paths unless policy, approval, and audit checks are explicitly configured.</span>
    </div>
  </aside>
</section>

<section class="tc-log-grid">
  <article class="tc-panel tc-log-panel">
    <div class="tc-panel-head">
      <div>
        <span class="tc-eyebrow">Sync runs</span>
        <h2>Recent activity</h2>
      </div>
    </div>
    <div class="tc-record-list">
      {% for run in recent_sync_runs %}
      <div class="tc-record-row">
        <strong>{{ run.broker_connection.display_name }}</strong>
        <span>{{ run.status }} · cash {{ run.pulled_cash_count }} · positions {{ run.pulled_positions_count }}</span>
        <small>{{ run.started_at|date:"Y-m-d H:i" }}</small>
      </div>
      {% empty %}
      <p class="tc-empty">No broker sync runs yet.</p>
      {% endfor %}
    </div>
  </article>

  <aside class="tc-panel tc-log-panel">
    <div class="tc-panel-head">
      <div>
        <span class="tc-eyebrow">Reconciliation</span>
        <h2>Summaries</h2>
      </div>
    </div>
    <div class="tc-record-list">
      {% for run in recent_reconciliations %}
      <div class="tc-record-row">
        <strong>{{ run.broker_id }} · {{ run.status }}</strong>
        <span>{{ run.broker_account_id|default:"account" }}</span>
        <small>{{ run.created_at }}</small>
      </div>
      {% empty %}
      <p class="tc-empty">No reconciliation runs yet.</p>
      {% endfor %}
    </div>
  </aside>
</section>
{% endblock %}