{% extends "base.html" %}

{% block nav_key %}accounts{% endblock %}
{% block title %}账号与目标 | 自动续火花{% endblock %}
{% block page_title %}账号与目标{% endblock %}
{% block page_subtitle %}集中维护账号开关、目标好友、好友缓存和登录态同步{% endblock %}

{% block topbar_actions %}
<a class="ghost-button" href="/login-workspace">登录工作区</a>
{% endblock %}

{% block content %}
<div
  id="login-desktop-controls"
  data-public-url="{{ login_desktop_public_url }}"
  data-csrf-token="{{ csrf_token }}"
  hidden
></div>

{% if accounts %}
<section class="account-list">
  {% for account in accounts %}
  <article class="account-card">
    <div class="account-head">
      <div class="account-ident">
        <div class="avatar-photo">
          {{ account.username[:1] if account.username else "A" }}
        </div>
        <div>
          <div class="account-name">{{ account.username }}</div>
          <div class="account-sub">unique_id: {{ account.unique_id }}</div>
        </div>
      </div>
      <span
        class="status-chip {% if account.enabled|default(true) %}success{% else %}warning{% endif %}"
      >
        {% if account.enabled|default(true) %}已启用{% else %}已停用{% endif %}
      </span>
    </div>

    <div class="account-metrics">
      <div class="metric-box">
        <span class="label">Cookies</span
        ><strong>{{ account.cookies|length }}</strong>
      </div>
      <div class="metric-box">
        <span class="label">目标好友</span
        ><strong>{{ account.targets|length }}</strong>
      </div>
      <div class="metric-box">
        <span class="label">好友缓存</span
        ><strong>{{ account.friends_cache|default([], true)|length }}</strong>
      </div>
    </div>

    <form
      method="post"
      action="/accounts/{{ account.unique_id }}/update"
      class="stack-form"
    >
      <input type="hidden" name="csrf_token" value="{{ csrf_token }}" />
      <label>
        <span>显示名</span>
        <input type="text" name="username" value="{{ account.username }}" />
      </label>
      <label class="check-row">
        <input
          type="checkbox"
          name="enabled"
          {% if account.enabled|default(true) %}checked{% endif %}
        />
        <span>启用自动续火花</span>
      </label>
      <label>
        <span>目标好友（每行一个）</span>
        <textarea class="targets-textarea" name="targets" rows="5">
{{ account.targets|default([], true)|join('\n') }}</textarea
        >
      </label>

      <div
        class="friend-picker"
        data-account-id="{{ account.unique_id }}"
        data-refresh-url="/accounts/{{ account.unique_id }}/friends/refresh"
        data-csrf-token="{{ csrf_token }}"
      >
        <div class="friend-picker-toolbar">
          <div>
            <span class="friend-picker-title">好友选择器</span>
            <p class="muted compact friend-picker-status">
              {% if account.friends_cache_updated_at %} 上次刷新：{{
              account.friends_cache_updated_at }} {% else %} 还没有读取好友列表
              {% endif %}
            </p>
          </div>
          <button type="button" class="ghost-button friend-refresh-button">
            刷新好友列表
          </button>
        </div>

        <label>
          <span>搜索好友</span>
          <input
            type="search"
            class="friend-search-input"
            placeholder="输入昵称筛选"
          />
        </label>
        <p class="friend-picker-current-targets muted compact">
          <strong>当前目标好友：</strong>
          <span
            >{{ account.targets|join('、') if account.targets else '未选择'
            }}</span
          >
        </p>
        <p class="friend-picker-summary muted compact">已选 0 人</p>
        <div class="friend-selected-inputs"></div>
        <div class="friend-picker-list"></div>

        <script
          type="application/json"
          id="friends-cache-{{ account.unique_id }}"
        >
          {{ account.friends_cache|default([], true)|tojson }}
        </script>
        <script
          type="application/json"
          id="selected-targets-{{ account.unique_id }}"
        >
          {{ account.targets|default([], true)|tojson }}
        </script>
      </div>

      <button type="submit">保存账号</button>
    </form>

    <div class="button-row">
      <button
        type="button"
        class="ghost-button login-desktop-open"
        data-relogin-unique-id="{{ account.unique_id }}"
        data-account-name="{{ account.username }}"
      >
        打开登录工作区
      </button>
      <button
        type="button"
        class="ghost-button login-desktop-save"
        data-relogin-unique-id="{{ account.unique_id }}"
        data-account-name="{{ account.username }}"
      >
        保存当前登录
      </button>
      <form
        method="post"
        action="/accounts/{{ account.unique_id }}/toggle-enabled"
      >
        <input type="hidden" name="csrf_token" value="{{ csrf_token }}" />
        <button
          class="{% if account.enabled|default(true) %}soft-button{% else %}success-button{% endif %}"
          type="submit"
        >
          {% if account.enabled|default(true) %}停用自动续火花{% else
          %}启用自动续火花{% endif %}
        </button>
      </form>
      <form
        method="post"
        action="/accounts/{{ account.unique_id }}/delete"
        data-confirm="确认删除账号 {{ account.username }}？此操作会移除该账号配置。"
      >
        <input type="hidden" name="csrf_token" value="{{ csrf_token }}" />
        <button class="danger-button" type="submit">删除账号</button>
      </form>
    </div>
  </article>
  {% endfor %}
</section>
{% else %}
<section class="empty-state">
  当前没有账号。请先前往登录工作区完成扫码登录并保存账号。
</section>
{% endif %} {% endblock %}