<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <link rel="icon" href="{{ site_branding.favicon_url }}">
  <title>管理员钱包调账 - {{ site_branding.browser_title }}</title>
  <style>
    * { box-sizing:border-box; }
    body { margin:0; font-family:Arial, "Microsoft YaHei", sans-serif; background:#f5f5f7; color:#222; }
    a { text-decoration:none; color:inherit; }

    .topbar { background:#111; color:#fff; padding:14px 24px; }
    .topbar-inner, .container { width:1200px; max-width:calc(100vw - 48px); margin:0 auto; }
    .topbar-inner { display:flex; justify-content:space-between; align-items:center; gap:24px; }
    .topbar-brand a { color:#fff; font-size:20px; font-weight:800; }
    .top-links { display:flex; gap:18px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
    .top-links a, .top-links span { color:#f3f3f3; font-size:14px; white-space:nowrap; }

    .container { margin:24px auto 40px; }
    .panel {
      background:#fff; border-radius:18px; box-shadow:0 2px 10px rgba(0,0,0,.05);
      padding:24px; margin-bottom:18px;
    }
    .title { margin:0 0 8px; font-size:30px; font-weight:800; }
    .muted { color:#666; font-size:14px; line-height:1.8; }

    .notice {
      padding:12px 14px; border-radius:12px; font-size:14px; line-height:1.8; margin-bottom:14px;
    }
    .notice.ok { background:#ecfdf5; color:#166534; }
    .notice.err { background:#fef2f2; color:#991b1b; }

    .grid { display:grid; grid-template-columns:1.15fr .85fr; gap:18px; }
    .field { margin-bottom:14px; }
    .field label { display:block; font-weight:700; margin-bottom:8px; }
    .field input, .field select, .field textarea {
      width:100%; border:1px solid #ddd; border-radius:10px; padding:10px 12px; font-size:14px; outline:none; background:#fff;
    }
    .field textarea { min-height:110px; resize:vertical; line-height:1.8; }

    .btn-row { display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }
    .btn {
      display:inline-flex; align-items:center; justify-content:center;
      padding:10px 16px; border-radius:10px; background:#111; color:#fff;
      border:none; font-size:14px; cursor:pointer;
    }
    .btn-light { background:#efefef; color:#222; }

    .user-list { display:grid; grid-template-columns:repeat(2, 1fr); gap:14px; }
    .user-card {
      border:1px solid #ececec; border-radius:16px; padding:14px; background:#fafafa;
      display:flex; gap:12px; align-items:center;
    }
    .avatar {
      width:56px; height:56px; border-radius:50%; object-fit:cover; background:#eee; border:1px solid #ddd;
    }
    .name { font-size:16px; font-weight:800; margin-bottom:4px; }
    .meta { color:#666; font-size:13px; line-height:1.7; }
    .tip {
      margin-top:10px; padding:12px 14px; border-radius:12px; background:#fff7ed; color:#9a3412; font-size:13px; line-height:1.8;
    }

    @media (max-width: 1100px) {
      .grid { grid-template-columns:1fr; }
      .user-list { grid-template-columns:1fr; }
    }
  </style>
</head>
<body>
  <div class="topbar">
    <div class="topbar-inner">
      <div class="topbar-brand"><a href="/">{{ site_branding.site_name }}</a></div>
      <div class="top-links">
        <a href="/admin/">管理员主页</a>
        <a href="/admin/merchant-applications">商家审核</a>
        <a href="/admin/wallet-adjustments">钱包调账</a>
        <a href="/account">用户主页</a>
        <span>管理员：{{ admin_name }}</span>
        <a href="/logout">退出</a>
      </div>
    </div>
  </div>

  <div class="container">
    <div class="panel">
      <h1 class="title">管理员钱包调账</h1>
      <div class="muted">支持给单个用户或全部非管理员用户发钱/扣款。用户钱包流水备注会写入“管理员xxx向您钱包转账 / 从您的钱包扣款”，并附带你填写的自定义说明。</div>
    </div>

    {% if message %}
      <div class="notice ok">{{ message }}</div>
    {% endif %}
    {% if error %}
      <div class="notice err">{{ error }}</div>
    {% endif %}

    <div class="grid">
      <div class="panel">
        <form method="post">
          <div class="field">
            <label>操作目标</label>
            <select name="target_mode" id="targetMode">
              <option value="single" {% if form_data.target_mode == 'single' %}selected{% endif %}>单个用户</option>
              <option value="all" {% if form_data.target_mode == 'all' %}selected{% endif %}>全部非管理员用户</option>
            </select>
          </div>

          <div class="field" id="singleUserField">
            <label>选择用户</label>
            <select name="target_user_id">
              <option value="">请选择用户</option>
              {% for u in users %}
                <option value="{{ u.user_id }}" {% if form_data.target_user_id|string == u.user_id|string %}selected{% endif %}>
                  {{ u.display_name }}（ID {{ u.user_id }} / 余额 ¥ {{ '%.2f'|format(u.balance) }}）
                </option>
              {% endfor %}
            </select>
          </div>

          <div class="field">
            <label>操作类型</label>
            <select name="action_type">
              <option value="credit" {% if form_data.action_type == 'credit' %}selected{% endif %}>发钱</option>
              <option value="debit" {% if form_data.action_type == 'debit' %}selected{% endif %}>扣钱</option>
            </select>
          </div>

          <div class="field">
            <label>金额</label>
            <input type="number" name="amount" min="0.01" step="0.01" value="{{ form_data.amount }}" placeholder="例如 10.00">
          </div>

          <div class="field">
            <label>自定义说明</label>
            <textarea name="custom_text" maxlength="200" placeholder="例如：活动奖励、测试调账、违规扣款说明等">{{ form_data.custom_text }}</textarea>
          </div>

          <div class="btn-row">
            <button class="btn" type="submit">提交调账</button>
            <a class="btn btn-light" href="/admin/merchant-applications">返回管理员后台</a>
          </div>

          <div class="tip">
            扣款时若目标用户余额不足，会自动跳过该用户；批量操作默认不处理管理员账号。
          </div>
        </form>
      </div>

      <div class="panel">
        <div class="name" style="font-size:22px;">当前可操作用户</div>
        <div class="muted" style="margin-bottom:14px;">这里显示的是非管理员用户及其当前钱包余额。</div>

        {% if users %}
        <div class="user-list">
          {% for u in users %}
          <div class="user-card">
            <img class="avatar" src="{{ u.avatar_url or '/uploads/avatars/default-avatar.png' }}" alt="{{ u.display_name }}">
            <div>
              <div class="name">{{ u.display_name }}</div>
              <div class="meta">用户 ID：{{ u.user_id }}</div>
              <div class="meta">当前余额：¥ {{ '%.2f'|format(u.balance) }}</div>
            </div>
          </div>
          {% endfor %}
        </div>
        {% else %}
          <div class="muted">当前没有可操作用户。</div>
        {% endif %}
      </div>
    </div>
  </div>

  <script>
    function toggleSingleUserField() {
      var mode = document.getElementById('targetMode').value;
      document.getElementById('singleUserField').style.display = (mode === 'single') ? 'block' : 'none';
    }
    document.getElementById('targetMode').addEventListener('change', toggleSingleUserField);
    toggleSingleUserField();
  </script>
</body>
</html>
