<!-- 持仓展示 -->
<section class="share-section" id="positions">
    <div class="section-container">
        <div class="section-header">
            <h2 class="section-title">当前持仓</h2>
            <div class="section-summary">
                共 {{ positions|length|default:0 }} 只标的
            </div>
        </div>

        {% if positions %}
        <div class="positions-table-wrapper">
            <table class="positions-table">
                <thead>
                    <tr>
                        <th>标的代码</th>
                        <th>标的名称</th>
                        <th>资产类型</th>
                        <th>持仓数量</th>
                        {% if show_amounts %}
                        <th>成本价</th>
                        <th>现价</th>
                        <th>市值</th>
                        <th>盈亏</th>
                        {% endif %}
                        <th>收益率</th>
                        <th>权重</th>
                        <th>建仓逻辑</th>
                        <th>失效条件</th>
                    </tr>
                </thead>
                <tbody>
                    {% for position in positions %}
                    <tr class="position-row">
                        <td class="position-code">{{ position.asset_code }}</td>
                        <td class="position-name">{{ position.asset_name|default:"--" }}</td>
                        <td class="position-type">{{ position.asset_type_label|default:"--" }}</td>
                        <td class="position-quantity">{{ position.quantity|default:0|floatformat:0 }}</td>
                        {% if show_amounts %}
                        <td class="position-cost">{{ position.avg_cost|default:0|floatformat:2 }}</td>
                        <td class="position-price">{{ position.current_price|default:0|floatformat:2 }}</td>
                        <td class="position-value">{{ position.market_value|default:0|floatformat:2 }}</td>
                        <td class="position-pnl {% if position.pnl >= 0 %}positive{% else %}negative{% endif %}">
                            {{ position.pnl|default:0|floatformat:2 }}
                        </td>
                        {% endif %}
                        <td class="position-return {% if position.return_pct >= 0 %}positive{% else %}negative{% endif %}">
                            {% if position.return_pct is not None %}
                                {{ position.return_pct|floatformat:2 }}%
                            {% else %}
                                --
                            {% endif %}
                        </td>
                        <td class="position-weight">
                            <div class="weight-bar">
                                <div class="weight-fill" style="width: {{ position.weight|default:0 }}%"></div>
                            </div>
                            <span class="weight-value">{{ position.weight|default:0|floatformat:1 }}%</span>
                        </td>
                        <td class="position-notes">{{ position.entry_reason|default:"--" }}</td>
                        <td class="position-notes">{{ position.invalidation_logic|default:"--" }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% else %}
        <div class="empty-state">
            <i class="bi bi-inbox empty-icon"></i>
            <p class="empty-text">暂无持仓数据</p>
        </div>
        {% endif %}

        {% if position_summary.asset_allocation %}
        <div class="asset-allocation-panel">
            <div class="asset-allocation-header">
                <h3 class="asset-allocation-title">大类资产占比</h3>
                <p class="asset-allocation-caption">按股票、基金、债券与现金划分当前总资产结构</p>
            </div>
            <div class="asset-allocation-layout">
                <div class="asset-allocation-chart-shell">
                    <div
                        id="assetAllocationChart"
                        class="asset-allocation-chart"
                        data-show-amounts="{% if show_amounts %}true{% else %}false{% endif %}"
                        data-allocation='[{% for item in position_summary.asset_allocation %}{"name":"{{ item.label|escapejs }}","value":{% if show_amounts %}{{ item.value|default:0 }}{% else %}{{ item.pct|default:0 }}{% endif %},"pct":{{ item.pct|default:0 }},"key":"{{ item.key|escapejs }}"}{% if not forloop.last %},{% endif %}{% endfor %}]'
                    ></div>
                </div>
                <div class="asset-allocation-list">
                    {% for item in position_summary.asset_allocation %}
                    <div class="asset-allocation-item">
                        <div class="asset-allocation-item-main">
                            <span class="asset-allocation-dot asset-type-{{ item.key }}"></span>
                            <span class="asset-allocation-name">{{ item.label }}</span>
                        </div>
                        <div class="asset-allocation-item-side">
                            <span class="asset-allocation-pct">{{ item.pct|floatformat:1 }}%</span>
                            <span class="asset-allocation-value">
                                {% if show_amounts %}{{ item.value|default:0|floatformat:2 }}{% else %}--{% endif %}
                            </span>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
        {% endif %}

        <!-- 持仓汇总 -->
        {% if position_summary %}
        <div class="positions-summary">
            <div class="summary-item">
                <span class="summary-label">持仓总市值</span>
                <span class="summary-value">{% if show_amounts %}{{ position_summary.total_value|default:0|floatformat:2 }}{% else %}--{% endif %}</span>
            </div>
            <div class="summary-item">
                <span class="summary-label">总盈亏</span>
                <span class="summary-value {% if position_summary.total_pnl >= 0 %}positive{% else %}negative{% endif %}">
                    {% if show_amounts %}{{ position_summary.total_pnl|default:0|floatformat:2 }}{% else %}--{% endif %}
                </span>
            </div>
            <div class="summary-item">
                <span class="summary-label">现金余额</span>
                <span class="summary-value">{% if show_amounts %}{{ position_summary.cash_balance|default:0|floatformat:2 }}{% else %}--{% endif %}</span>
            </div>
            <div class="summary-item">
                <span class="summary-label">总资产</span>
                <span class="summary-value highlight">{% if show_amounts %}{{ position_summary.total_assets|default:0|floatformat:2 }}{% else %}--{% endif %}</span>
            </div>
        </div>
        {% endif %}
    </div>
</section>

{% if position_summary.asset_allocation %}
<script>
(function() {
    const chartEl = document.getElementById("assetAllocationChart");
    if (!chartEl || typeof echarts === "undefined") {
        return;
    }

    const allocationData = JSON.parse(chartEl.dataset.allocation || "[]");
    const showAmounts = chartEl.dataset.showAmounts === "true";
    if (!allocationData.length) {
        return;
    }

    const styles = getComputedStyle(document.body);
    const chart = echarts.init(chartEl);
    const colorForKey = (key) => styles.getPropertyValue(`--allocation-color-${key}`).trim() || styles.getPropertyValue("--terminal-accent").trim();

    chart.setOption({
        backgroundColor: "transparent",
        animation: false,
        tooltip: {
            trigger: "item",
            backgroundColor: styles.getPropertyValue("--chart-tooltip-bg").trim(),
            borderColor: styles.getPropertyValue("--chart-tooltip-border").trim(),
            textStyle: {
                color: styles.getPropertyValue("--chart-tooltip-text").trim(),
            },
            formatter: (params) => (
                showAmounts
                    ? `${params.name}<br/>${params.value.toFixed(2)}<br/>${params.percent}%`
                    : `${params.name}<br/>${params.percent}%`
            ),
        },
        series: [
            {
                type: "pie",
                radius: ["48%", "72%"],
                center: ["50%", "50%"],
                avoidLabelOverlap: true,
                label: {
                    show: true,
                    color: styles.getPropertyValue("--terminal-text").trim(),
                    formatter: "{b}\n{d}%",
                    fontSize: 11,
                    lineHeight: 16,
                },
                labelLine: {
                    lineStyle: {
                        color: styles.getPropertyValue("--terminal-border-strong").trim(),
                    },
                },
                itemStyle: {
                    borderColor: styles.getPropertyValue("--allocation-surface").trim(),
                    borderWidth: 3,
                },
                data: allocationData.map((item) => ({
                    ...item,
                    itemStyle: { color: colorForKey(item.key) },
                })),
            },
        ],
    });

    window.addEventListener("resize", () => chart.resize());
})();
</script>
{% endif %}
