{% extends "base.html" %}
{% macro env_label(env) -%}
{%- if env.key == 'default' and env.title == '默认' -%}{{ t('默认') }}{%- else -%}{{ env.title }}{%- endif -%}
{%- endmacro %}
{% block title %}{{ t('目标') }} · {{ product_name }}{% endblock %}
{% block content %}
<div class="page-header">
  <div>
    <h1>{{ t('目标') }}</h1>
  </div>
  <div class="page-header__actions">
    <a class="btn btn--secondary" href="/environments">{{ t('管理环境') }}</a>
    <a class="btn btn--primary" href="/targets/new{% if current_env %}?env={{ current_env.key }}{% endif %}" data-dialog-open="type-drawer">{{ t('＋ 新建目标') }}</a>
  </div>
</div>

{% if environments %}
<nav class="env-switch" aria-label="{{ t('选择环境') }}">
  {% for env in environments %}
  <a class="env-switch__item{% if current_env and env.key == current_env.key %} is-active{% endif %}{% if not env.enabled %} is-disabled{% endif %}"
     href="/targets?env={{ env.key }}"
     {% if current_env and env.key == current_env.key %}aria-current="true"{% endif %}>
    <span class="env-switch__title">{{ env_label(env) }}</span>
    <span class="env-switch__meta">
      <span class="mono">{{ env.key }}</span>
      <span class="env-switch__count">{{ t('{count} 个目标', count=env.target_count) }}</span>
      {% if not env.enabled %}<span class="badge badge--muted">{{ t('已停用') }}</span>{% endif %}
    </span>
  </a>
  {% endfor %}
  <a class="env-switch__item env-switch__item--new" href="/environments/new" data-dialog-open="env-drawer">
    <span class="env-switch__title">{{ t('新建环境') }}</span>
  </a>
</nav>
{% endif %}

{% if current_env and not current_env.enabled %}
<div class="alert alert--warning" role="status">
  <span class="alert__icon" aria-hidden="true">
    <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 3 2.5 20h19L12 3Z"/><path d="M12 9v5M12 17v.5"/></svg>
  </span>
  <div class="alert__body">
    <strong>{{ t('这个环境已停用') }}</strong>
    <span class="alert__detail">{{ t('排查时不能查询其中的目标。配置仍保留，可以随时重新启用。') }}</span>
  </div>
</div>
{% endif %}

<div class="stats" aria-label="{{ t('概览') }}">
  <div class="stat"><span class="stat__label">{{ t('目标总数') }}</span><span class="stat__value" data-stat="total">{{ stats.total }}</span></div>
  <div class="stat"><span class="stat__label">{{ t('已启用') }}</span><span class="stat__value" data-stat="enabled">{{ stats.enabled }}</span></div>
  <div class="stat{% if stats.failed %} stat--danger{% endif %}"><span class="stat__label">{{ t('最近测试失败') }}</span><span class="stat__value" data-stat="failed">{{ stats.failed }}</span></div>
  <div class="stat{% if stats.key_issues %} stat--warning{% endif %}"><span class="stat__label">{{ t('密钥异常') }}</span><span class="stat__value" data-stat="key_issues">{{ stats.key_issues }}</span></div>
</div>

{% if stats.key_issues %}
<div class="alert alert--warning" role="status">
  <span class="alert__icon" aria-hidden="true">
    <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 3 2.5 20h19L12 3Z"/><path d="M12 9v5M12 17v.5"/></svg>
  </span>
  <div class="alert__body"><strong>{{ t('{count} 个目标的密钥不可用', count=stats.key_issues) }}</strong><span class="alert__detail">{{ t('请在对应目标里重新录入密钥，否则工具会拒绝使用它。') }}</span></div>
</div>
{% endif %}

{% if has_targets %}
<form class="toolbar" method="get" action="/targets" role="search">
  <div class="toolbar__search">
    <input class="input" type="search" name="q" value="{{ q }}" placeholder="{{ t('搜索名称、类型或地址') }}" aria-label="{{ t('搜索目标') }}">
    {% if current_env %}<input type="hidden" name="env" value="{{ current_env.key }}">{% endif %}
    {% if active_type %}<input type="hidden" name="type" value="{{ active_type }}">{% endif %}
    <button class="btn btn--secondary" type="submit">{{ t('搜索') }}</button>
  </div>
  <div class="filter-chips" role="group" aria-label="{{ t('按类型筛选') }}">
    {% for item in type_filters %}
    <a class="chip-link{% if item.active %} is-active{% endif %}" href="{{ item.href }}"
       {% if item.active %}aria-current="true"{% endif %}>{{ t(item.label) }}<span class="chip-link__count">{{ item.count }}</span></a>
    {% endfor %}
  </div>
  {% if q or active_type %}<a class="link-reset" href="/{% if current_env %}?env={{ current_env.key }}{% endif %}">{{ t('清除筛选') }}</a>{% endif %}
</form>
{% endif %}

{% if not environments %}
<section class="empty">
  <h2>{{ t('还没有环境') }}</h2>
  <p>{{ t('先新建环境，再在里面登记目标。') }}</p>
  <a class="btn btn--primary" href="/environments/new" data-dialog-open="env-drawer">{{ t('新建环境') }}</a>
</section>
{% elif not has_targets %}
<section class="empty">
  <h2>{% if has_any_targets or environments|length > 1 %}{{ t('这个环境还没有目标') }}{% else %}{{ t('还没有登记任何目标') }}{% endif %}</h2>
  <p>{{ t('选一个类型，填写连接和允许访问的范围。') }}</p>
  <div class="type-grid type-grid--compact">
    {% for card in type_cards %}
    <a class="type-card type-card--sm" href="/targets/new?type={{ card.type }}{% if current_env %}&env={{ current_env.key }}{% endif %}">
      <span class="type-card__title">{{ t(card.label) }}</span>
    </a>
    {% endfor %}
  </div>
</section>
{% elif not rows %}
<section class="empty empty--sm">
  <h2>{{ t('没有匹配的目标') }}</h2>
  <p>{{ t('调整搜索词或类型筛选后再试。') }}</p>
  <a class="btn btn--secondary" href="/{% if current_env %}?env={{ current_env.key }}{% endif %}">{{ t('清除筛选') }}</a>
</section>
{% else %}
<div class="table-card">
  <table class="table table--responsive table--targets">
    <colgroup>
      <col class="col-name">
      <col class="col-type">
      <col class="col-endpoint">
      <col class="col-scope">
      <col class="col-status">
      <col class="col-test">
      <col class="col-actions">
    </colgroup>
    <thead>
      <tr>
        <th scope="col">{{ t('名称') }}</th>
        <th scope="col">{{ t('类型') }}</th>
        <th scope="col">{{ t('端点') }}</th>
        <th scope="col">{{ t('授权范围') }}</th>
        <th scope="col">{{ t('状态') }}</th>
        <th scope="col">{{ t('最近测试') }}</th>
        <th scope="col" class="cell-actions">{{ t('操作') }}</th>
      </tr>
    </thead>
    <tbody>
      {% for target in rows %}
      <tr data-target-id="{{ target.id }}">
        <td data-label="{{ t('名称') }}" class="cell-name">
          <a class="mono link-strong" href="/targets/{{ target.id }}/edit">{{ target.name }}</a>
          {% if target.secret_fields and not target.secret_ok %}<span class="badge badge--warning">{{ t('密钥异常') }}</span>{% endif %}
        </td>
        <td data-label="{{ t('类型') }}"><span class="badge badge--type">{{ t(target.type_label) }}</span></td>
        <td data-label="{{ t('端点') }}" class="cell-endpoint"><span class="mono truncate" title="{{ target.endpoint }}">{{ t(target.endpoint) }}</span></td>
        <td data-label="{{ t('授权范围') }}"><span class="muted">{{ t(target.scope_source, **target.scope_params) }}</span></td>
        <td data-label="{{ t('状态') }}">
          <form method="post" action="/targets/{{ target.id }}/toggle" class="inline-form"
                data-submit-loading data-async-form data-row-action="toggle">
      <input type="hidden" name="_csrf" value="{{ csrf_token }}">
            <button class="switch{% if target.enabled %} is-on{% endif %}" type="submit"
                    aria-pressed="{{ 'true' if target.enabled else 'false' }}"
                    data-on-title="{{ t('点击停用') }}" data-off-title="{{ t('点击启用') }}"
                    title="{{ t('点击停用') if target.enabled else t('点击启用') }}">
              <span class="switch__track" aria-hidden="true"><span class="switch__thumb"></span></span>
              <span class="switch__label">
                <span class="switch__label-text">{{ t('已启用') if target.enabled else t('已停用') }}</span>
                <span class="btn__sizer" aria-hidden="true">{{ t('已启用') }}</span>
                <span class="btn__sizer" aria-hidden="true">{{ t('已停用') }}</span>
              </span>
            </button>
          </form>
        </td>
        <td data-label="{{ t('最近测试') }}" class="cell-test" data-test-cell>
          <div class="test-line">
            <span class="status status--{{ 'ok' if target.last_test_ok else ('error' if target.last_test_at_display else 'none') }}" data-test-status>
              <span class="status__dot"></span>
              <span data-test-label data-ok="{{ t('成功') }}" data-error="{{ t('失败') }}" data-none="{{ t('未测试') }}">{{ t('成功') if target.last_test_ok else (t('失败') if target.last_test_at_display else t('未测试')) }}</span>
            </span>
            {% if target.last_test_at %}{{ local_time(target.last_test_at, extra='class="muted small" data-test-time') }}{% else %}<time class="muted small" data-test-time hidden></time>{% endif %}
          </div>
          <details class="details" data-test-details
                   {% if target.client_extra %}data-install-dialog="install-client-{{ target.id }}" data-install-label="{{ t('安装') }}"{% endif %}
                   {% if not target.last_test_error %}hidden{% endif %}>
            <summary>{{ t('失败详情') }}</summary>
            <div class="details__body" data-test-error-box>
              {% if target.last_test_message %}
              <p class="details__message" data-test-message>{{ target.last_test_message }}</p>
              {% endif %}
              {% if target.last_test_command and target.client_extra %}
              <div class="install-line">
                <button class="btn btn--secondary btn--sm btn--stable" type="button"
                        data-dialog-open="install-client-{{ target.id }}">
                  <span class="btn__label">{{ t('安装') }}</span>
                </button>
              </div>
              {% endif %}
            </div>
          </details>
        </td>
        <td data-label="{{ t('操作') }}" class="cell-actions">
          <div class="row-actions">
            <form method="post" action="/targets/{{ target.id }}/test" class="inline-form"
                  data-submit-loading data-async-form data-row-action="test">
      <input type="hidden" name="_csrf" value="{{ csrf_token }}">
              <button class="btn btn--secondary btn--sm btn--stable" type="submit" data-loading-label="{{ t('测试中…') }}">
                <span class="btn__label">{{ t('测试') }}</span>
                <span class="btn__sizer" aria-hidden="true">{{ t('测试') }}</span>
                <span class="btn__sizer" aria-hidden="true">{{ t('测试中…') }}</span>
              </button>
            </form>
            <a class="btn btn--ghost btn--sm" href="/targets/{{ target.id }}/edit">{{ t('编辑') }}</a>
            <a class="btn btn--danger-ghost btn--sm" href="/targets/{{ target.id }}/delete" data-dialog-open="delete-target-{{ target.id }}">{{ t('删除') }}</a>
          </div>
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>

{% for target in rows %}
<dialog id="delete-target-{{ target.id }}" class="modal" aria-labelledby="delete-target-title-{{ target.id }}">
  <div class="modal__panel">
    <button class="modal__close" type="button" data-dialog-close aria-label="{{ t('关闭') }}">×</button>
    <h2 id="delete-target-title-{{ target.id }}">{{ t('删除目标') }}</h2>
    <p class="field__hint">{{ t('删除后，这个目标的连接和密钥都会去掉，排查时不能再使用，也无法恢复。') }}</p>
    <dl class="summary">
      <div><dt>{{ t('所属环境') }}</dt><dd>{{ env_label(current_env) if current_env else '' }} <span class="mono">{{ target.environment_key }}</span></dd></div>
      <div><dt>{{ t('名称') }}</dt><dd class="mono">{{ target.name }}</dd></div>
      <div><dt>{{ t('类型') }}</dt><dd>{{ t(target.type_label) }}</dd></div>
      <div><dt>{{ t('端点') }}</dt><dd class="mono">{{ target.endpoint }}</dd></div>
      <div><dt>{{ t('授权范围') }}</dt><dd>{{ t(target.scope_source, **target.scope_params) }}</dd></div>
      <div><dt>{{ t('最近测试') }}</dt><dd>
        {% if target.last_test_at_display %}
          <span class="status status--{{ 'ok' if target.last_test_ok else 'error' }}"><span class="status__dot"></span>{{ t('成功') if target.last_test_ok else t('失败') }}</span>
          {{ local_time(target.last_test_at, extra='class="muted small"') }}
        {% else %}<span class="muted">{{ t('未测试') }}</span>{% endif %}
      </dd></div>
    </dl>
    <form method="post" action="/targets/{{ target.id }}/delete" class="form-actions form-actions--inline">
      <input type="hidden" name="_csrf" value="{{ csrf_token }}">
      <button class="btn btn--secondary" type="button" data-dialog-close>{{ t('取消') }}</button>
      <button class="btn btn--danger" type="submit">{{ t('确认删除') }}</button>
    </form>
  </div>
</dialog>
{% if target.client_extra %}
<dialog id="install-client-{{ target.id }}" class="modal" aria-labelledby="install-client-title-{{ target.id }}">
  <div class="modal__panel">
    <button class="modal__close" type="button" data-dialog-close aria-label="{{ t('关闭') }}">×</button>
    <h2 id="install-client-title-{{ target.id }}">{{ t('安装客户端') }}</h2>
    <p class="field__hint">{{ t('将在当前服务所在项目安装 {name} 客户端，不会卸载已经装好的其他客户端。', name=t(target.type_label)) }}</p>
    <form method="post" action="/targets/{{ target.id }}/install-client" class="form-actions form-actions--inline"
          data-submit-loading data-async-form data-row-action="install"
          data-target-id="{{ target.id }}" data-timeout-ms="130000">
      <input type="hidden" name="_csrf" value="{{ csrf_token }}">
      <button class="btn btn--secondary" type="button" data-dialog-close>{{ t('取消') }}</button>
      <button class="btn btn--primary btn--stable" type="submit" data-loading-label="{{ t('安装中…') }}">
        <span class="btn__label">{{ t('确认安装') }}</span>
        <span class="btn__sizer" aria-hidden="true">{{ t('确认安装') }}</span>
        <span class="btn__sizer" aria-hidden="true">{{ t('安装中…') }}</span>
      </button>
    </form>
  </div>
</dialog>
{% endif %}
{% endfor %}
{% endif %}

<dialog id="type-drawer" class="modal drawer" aria-labelledby="type-drawer-title">
  <div class="modal__panel">
    <button class="modal__close" type="button" data-dialog-close aria-label="{{ t('关闭') }}">×</button>
    <h2 id="type-drawer-title">{{ t('选择目标类型') }}</h2>
    <p class="field__hint">{{ t('不同系统的连接方式、授权范围和只读规则不同，先选类型再填连接。') }}</p>
    {% if current_env %}
    <div class="alert alert--info" role="status">
      <div class="alert__body">
        <strong>{{ env_label(current_env) }} <span class="mono">{{ current_env.key }}</span></strong>
        <span class="alert__detail">{{ t('目标会登记到这里，保存后不能换环境。') }}</span>
      </div>
    </div>
    {% endif %}
    <div class="type-grid">
      {% for card in type_cards %}
      <a class="type-card type-card--sm" href="/targets/new?type={{ card.type }}{% if current_env %}&env={{ current_env.key }}{% endif %}">
        <span class="type-card__title">{{ t(card.label) }}</span>
        <span class="type-card__arrow" aria-hidden="true">→</span>
      </a>
      {% endfor %}
    </div>
  </div>
</dialog>
{% set env_return = 'targets' %}
{% set context_env = current_env.key if current_env else '' %}
{% include "_environment_drawer.html" %}
{% endblock %}