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

{% block title %}控制台 - 虾皮圈{% endblock %}

{% block content %}
<div class="d-flex flex-column gap-4">
  <div>
    <h1 class="h3 mb-1">控制台</h1>
    <div class="text-secondary">{{ user.email }}</div>
  </div>
  {% if balance.points_balance != balance.ledger_balance %}
    <div class="alert alert-warning mb-0">
      钱包余额与点数流水余额不一致，请联系运营核对。
    </div>
  {% endif %}
  <div class="row g-3">
    <div class="col-md-3">
      <div class="metric">
        <div class="text-secondary small">剩余点数</div>
        <div class="display-6 fw-semibold">{{ balance.points_balance }}</div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="metric">
        <div class="text-secondary small">充值总额</div>
        <div class="display-6 fw-semibold">{{ recharge_total_amount|floatformat:2 }}</div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="metric">
        <div class="text-secondary small">获得点数</div>
        <div class="display-6 fw-semibold">{{ credited_points_total }}</div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="metric">
        <div class="text-secondary small">净消耗点数</div>
        <div class="display-6 fw-semibold">{{ net_used_points }}</div>
      </div>
    </div>
  </div>

  <div class="row g-3">
    <div class="col-md-4">
      <div class="metric d-flex flex-column gap-3">
        <div>
          <div class="text-secondary small">接口凭证</div>
          <div class="h5 mb-0">API Key</div>
        </div>
        <a class="btn btn-primary align-self-start" href="{% url 'portal-apikeys' %}">管理</a>
      </div>
    </div>
    <div class="col-md-4">
      <div class="metric d-flex flex-column gap-3">
        <div>
          <div class="text-secondary small">充值</div>
          <div class="h5 mb-0">扫码充值</div>
        </div>
        <a class="btn btn-primary align-self-start" href="{% url 'portal-recharge' %}">充值</a>
      </div>
    </div>
    <div class="col-md-4">
      <div class="metric d-flex flex-column gap-3">
        <div>
          <div class="text-secondary small">点数账本</div>
          <div class="h5 mb-0">点数记录</div>
        </div>
        <a class="btn btn-primary align-self-start" href="{% url 'portal-usage-records' %}">查看</a>
      </div>
    </div>
  </div>

  <section class="cmhub-surface">
    <div class="d-flex justify-content-between align-items-center mb-3">
      <h2 class="h5 mb-0">最近充值</h2>
      <a class="btn btn-sm btn-outline-secondary" href="{% url 'portal-recharge-records' %}">全部</a>
    </div>
    {% if recent_recharge_orders %}
      <div class="table-responsive">
        <table class="table align-middle mb-0">
          <thead>
            <tr>
              <th scope="col">订单号</th>
              <th scope="col">金额</th>
              <th scope="col">点数</th>
              <th scope="col">状态</th>
              <th scope="col">创建时间</th>
            </tr>
          </thead>
          <tbody>
            {% for order in recent_recharge_orders %}
              <tr>
                <td><code>{{ order.order_no }}</code></td>
                <td>{{ order.amount_money|floatformat:2 }} {{ order.currency }}</td>
                <td>{{ order.points_granted }}</td>
                <td>{{ order.status }}</td>
                <td>{{ order.created_at|date:"Y-m-d H:i" }}</td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    {% else %}
      <div class="text-secondary">暂无充值记录</div>
    {% endif %}
  </section>

  <section class="cmhub-surface">
    <div class="d-flex justify-content-between align-items-center mb-3">
      <h2 class="h5 mb-0">最近点数变动</h2>
      <a class="btn btn-sm btn-outline-secondary" href="{% url 'portal-usage-records' %}">全部</a>
    </div>
    {% if recent_usage_entries %}
      <div class="table-responsive">
        <table class="table align-middle mb-0">
          <thead>
            <tr>
              <th scope="col">时间</th>
              <th scope="col">类型</th>
              <th scope="col">能力</th>
              <th scope="col">点数变动</th>
              <th scope="col">余额</th>
            </tr>
          </thead>
          <tbody>
            {% for entry in recent_usage_entries %}
              <tr>
                <td>{{ entry.created_at|date:"Y-m-d H:i" }}</td>
                <td>{{ entry.get_change_type_display }}</td>
                <td>{{ entry.ref_call.alias|default:"-" }}</td>
                <td>{{ entry.points_delta }}</td>
                <td>{{ entry.balance_after }}</td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    {% else %}
      <div class="text-secondary">暂无点数记录</div>
    {% endif %}
  </section>
</div>
{% endblock %}