{% extends "base.html" %}
{% load static %}

{% block title %}账户交易记录 - {{ account.account_name }} - AgomTradePro{% endblock %}

{% block content %}
<div class="account-container">
    <div class="account-header">
        <div class="header-title-row">
            <div>
                <h1>{{ account.account_name }} - 交易记录</h1>
                <p class="subtitle">账户交易记录 · 类型：{{ account_type }}</p>
            </div>
            <div class="header-actions">
                <a href="{% url 'simulated_trading:my-account-detail' account.id %}" class="btn btn-secondary">返回账户详情</a>
                <a href="{% url 'simulated_trading:my-accounts' %}" class="btn btn-secondary">账户列表</a>
            </div>
        </div>
    </div>

    <!-- 交易统计 -->
    <section class="account-section">
        <h2 class="section-title">交易统计</h2>
        <div class="account-stats">
            <div class="stat-card">
                <span class="stat-label">总交易次数</span>
                <span class="stat-value">{{ trades.count }}</span>
            </div>
            <div class="stat-card">
                <span class="stat-label">买入次数</span>
                <span class="stat-value">{{ buy_count }}</span>
            </div>
            <div class="stat-card">
                <span class="stat-label">卖出次数</span>
                <span class="stat-value">{{ sell_count }}</span>
            </div>
            <div class="stat-card {% if total_realized_pnl >= 0 %}stat-positive{% else %}stat-negative{% endif %}">
                <span class="stat-label">已实现盈亏</span>
                <span class="stat-value">
                    {% if total_realized_pnl %}¥{{ total_realized_pnl|floatformat:2 }}{% else %}-{% endif %}
                </span>
            </div>
            <div class="stat-card">
                <span class="stat-label">账户总资产</span>
                <span class="stat-value">¥{{ account.total_value|floatformat:2 }}</span>
            </div>
        </div>
    </section>

    <!-- 交易记录 -->
    <section class="account-section">
        <h2 class="section-title">交易记录 (最近100条)</h2>
        {% if trades %}
        <table class="table">
            <thead>
                <tr>
                    <th>交易日期</th>
                    <th>资产代码</th>
                    <th>资产名称</th>
                    <th>方向</th>
                    <th>数量</th>
                    <th>价格</th>
                    <th>金额</th>
                    <th>手续费</th>
                    <th>滑点</th>
                    <th>总成本</th>
                    <th>已实现盈亏</th>
                    <th>盈亏%</th>
                    <th>原因</th>
                </tr>
            </thead>
            <tbody>
                {% for trade in trades %}
                <tr>
                    <td>{{ trade.execution_date|date:"Y-m-d" }}</td>
                    <td><strong>{{ trade.asset_code }}</strong></td>
                    <td>{{ trade.asset_name|default:"-" }}</td>
                    <td>
                        <span class="badge {% if trade.action == 'buy' %}badge-buy{% else %}badge-sell{% endif %}">
                            {% if trade.action == 'buy' %}买入{% else %}卖出{% endif %}
                        </span>
                    </td>
                    <td>{{ trade.quantity }}</td>
                    <td>¥{{ trade.price|floatformat:2 }}</td>
                    <td>¥{{ trade.amount|floatformat:2 }}</td>
                    <td>¥{{ trade.commission|floatformat:2 }}</td>
                    <td>¥{{ trade.slippage|floatformat:2 }}</td>
                    <td>¥{{ trade.total_cost|floatformat:2 }}</td>
                    <td class="{% if trade.realized_pnl >= 0 %}positive{% else %}negative{% endif %}">
                        {% if trade.realized_pnl %}¥{{ trade.realized_pnl|floatformat:2 }}{% else %}-{% endif %}
                    </td>
                    <td class="{% if trade.realized_pnl_pct >= 0 %}positive{% else %}negative{% endif %}">
                        {% if trade.realized_pnl_pct %}{{ trade.realized_pnl_pct|floatformat:2 }}%{% else %}-{% endif %}
                    </td>
                    <td>{{ trade.reason|default:"-"|truncatewords:5 }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
        {% else %}
        <div class="empty-state">
            <div class="empty-icon">📭</div>
            <p>暂无交易记录</p>
        </div>
        {% endif %}
    </section>
</div>

<style>
.account-container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 24px;
}

.account-header {
    margin-bottom: 24px;
}

.header-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.account-header h1 {
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 4px;
}

.subtitle {
    color: #54595D;
    font-size: 14px;
}

.header-actions {
    display: flex;
    gap: 12px;
}

.account-section {
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
    border-radius: 4px;
    padding: 20px;
    margin-bottom: 24px;
}

.section-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 16px;
}

.account-stats {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}

.stat-card {
    background: #F8F9FA;
    padding: 16px;
    border-radius: 4px;
    text-align: center;
}

.stat-positive {
    background: var(--color-rise-soft);
    border: 1px solid var(--color-rise);
}

.stat-negative {
    background: var(--color-fall-soft);
    border: 1px solid var(--color-fall);
}

.stat-label {
    display: block;
    font-size: 12px;
    color: #54595D;
    margin-bottom: 8px;
}

.stat-value {
    display: block;
    font-size: 18px;
    font-weight: 600;
}

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.table thead {
    background: #F8F9FA;
    position: sticky;
    top: 0;
}

.table th {
    padding: 10px 8px;
    text-align: left;
    font-weight: 600;
    font-size: 11px;
    border-bottom: 1px solid #E0E0E0;
}

.table td {
    padding: 10px 8px;
    font-size: 12px;
    border-bottom: 1px solid #E0E0E0;
}

.positive { color: var(--color-rise); }
.negative { color: var(--color-fall); }

.badge {
    padding: 2px 8px;
    border-radius: 2px;
    font-size: 11px;
    font-weight: 500;
}

.badge-buy { background: var(--color-rise-soft); color: var(--color-rise-strong); }
.badge-sell { background: var(--color-fall-soft); color: var(--color-fall-strong); }

.btn {
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 14px;
    text-decoration: none;
    display: inline-block;
}

.btn-secondary {
    background: #F8F9FA;
    color: #202122;
    border: 1px solid #E0E0E0;
}

.empty-state {
    text-align: center;
    padding: 40px;
    color: #54595D;
}

.empty-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .account-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .header-title-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .table {
        font-size: 10px;
    }

    .table th,
    .table td {
        padding: 6px 4px;
    }
}
</style>
{% endblock %}