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

{% block title %}{{ ticker }} - Invest{% endblock %}

{% block content %}
<div class="mb-4">
    <a href="{% url 'invest-dashboard' %}" class="text-stone-400 hover:text-stone-700 text-sm"><i class="fas fa-arrow-left mr-1"></i> 返回仪表盘</a>
</div>

<!-- Header -->
<div class="flex items-end justify-between gap-3 mb-4">
    <div>
        <h1 class="text-3xl font-bold text-stone-900">{{ ticker }}</h1>
        <p class="text-sm text-stone-400 mt-1">
            跨 {{ portfolio_count }} 个账户持仓{% if theme != '—' %} · 主题：{{ theme }}{% endif %}{% if weight is not None %} · 权重 {{ weight|floatformat:1 }}%{% endif %}
        </p>
    </div>
    <div class="text-right">
        {% if current_price %}
        <p class="text-2xl font-bold text-stone-900 tabular-nums">${{ current_price|floatformat:2|intcomma }}</p>
        <p class="text-xs text-stone-400 mt-0.5">当前价格</p>
        {% else %}
        <p class="text-2xl font-bold text-stone-300">—</p>
        {% endif %}
    </div>
</div>

<!-- Summary cards -->
<div class="grid grid-cols-2 lg:grid-cols-4 gap-3 mb-4">
    <div class="bg-white rounded-lg p-5 shadow-sm">
        <p class="text-xs font-semibold tracking-widest text-stone-400 uppercase mb-1">持仓数量</p>
        <p class="text-2xl font-bold text-stone-900 tabular-nums">{{ total_qty|floatformat:2|intcomma }}</p>
        <p class="text-sm text-stone-400 mt-1">{{ positions|length }} 个账户</p>
    </div>
    <div class="bg-white rounded-lg p-5 shadow-sm">
        <p class="text-xs font-semibold tracking-widest text-stone-400 uppercase mb-1">Avg Cost</p>
        {% if avg_cost %}
        <p class="text-2xl font-bold text-stone-900 tabular-nums">${{ avg_cost|floatformat:2|intcomma }}</p>
        <p class="text-sm text-stone-400 mt-1">{% if estimated %}按交易日收盘价估算{% else %}按成交价加权{% endif %}</p>
        {% else %}
        <p class="text-2xl font-bold text-stone-400">—</p>
        <p class="text-sm text-stone-400 mt-1">无成本数据</p>
        {% endif %}
    </div>
    <div class="bg-white rounded-lg p-5 shadow-sm">
        <p class="text-xs font-semibold tracking-widest text-stone-400 uppercase mb-1">市值</p>
        <p class="text-2xl font-bold text-stone-900 tabular-nums">${{ total_value|floatformat:0|intcomma }}</p>
        <p class="text-sm text-stone-400 mt-1">成本 ${{ total_cost|floatformat:0|intcomma }}</p>
    </div>
    <div class="bg-white rounded-lg p-5 shadow-sm">
        <p class="text-xs font-semibold tracking-widest text-stone-400 uppercase mb-1">未实现盈亏</p>
        {% if total_pnl is not None %}
        <p class="text-2xl font-bold tabular-nums {% if total_pnl >= 0 %}text-green-800{% else %}text-red-700{% endif %}">
            {% if total_pnl >= 0 %}+{% endif %}${{ total_pnl|floatformat:0|intcomma }}
        </p>
        <p class="text-sm mt-1 tabular-nums {% if total_pnl >= 0 %}text-green-700{% else %}text-red-600{% endif %}">{% if pnl_pct >= 0 %}+{% endif %}{{ pnl_pct|floatformat:1 }}%</p>
        {% else %}
        <p class="text-2xl font-bold text-stone-400">—</p>
        <p class="text-sm text-stone-400 mt-1">无成本数据</p>
        {% endif %}
    </div>
</div>

<!-- Per-account positions -->
<div class="bg-white rounded-lg shadow-sm overflow-hidden mb-4">
    <div class="px-6 py-4 border-b border-stone-100">
        <p class="text-xs font-semibold tracking-widest text-stone-500 uppercase">各账户持仓</p>
    </div>
    {% if positions %}
    <div class="overflow-x-auto">
    <table class="w-full text-sm">
        <thead>
            <tr class="text-xs font-semibold tracking-widest text-stone-400 uppercase border-b border-stone-100">
                <th class="px-6 py-3 text-left">账户</th>
                <th class="px-6 py-3 text-right">数量</th>
                <th class="px-6 py-3 text-right">市值</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-stone-50">
            {% for pos in positions %}
            <tr class="hover:bg-stone-50">
                <td class="px-6 py-3 font-semibold text-stone-900">{{ pos.portfolio.name }}</td>
                <td class="px-6 py-3 text-right text-stone-600 tabular-nums">{{ pos.quantity|floatformat:2|intcomma }}</td>
                <td class="px-6 py-3 text-right font-medium text-stone-900 tabular-nums">${{ pos.current_value|floatformat:0|intcomma }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    </div>
    {% else %}
    <div class="px-6 py-12 text-center">
        <p class="text-stone-400">当前无持仓（可能有历史交易）</p>
    </div>
    {% endif %}
</div>

<!-- Transactions -->
<div class="bg-white rounded-lg shadow-sm overflow-hidden">
    <div class="px-6 py-4 border-b border-stone-100 flex items-center justify-between">
        <p class="text-xs font-semibold tracking-widest text-stone-500 uppercase">交易历史</p>
        <a href="{% url 'invest-transaction-create' %}" class="text-xs font-semibold text-blue-700 hover:text-blue-900">+ 添加交易</a>
    </div>
    {% if transactions %}
    <div class="overflow-x-auto">
    <table class="w-full text-sm">
        <thead>
            <tr class="text-xs font-semibold tracking-widest text-stone-400 uppercase border-b border-stone-100">
                <th class="px-6 py-3 text-left">日期</th>
                <th class="px-6 py-3 text-left">账户</th>
                <th class="px-6 py-3 text-left">类型</th>
                <th class="px-6 py-3 text-right">数量</th>
                <th class="px-6 py-3 text-right">价格</th>
                <th class="px-6 py-3 text-right">手续费</th>
                <th class="px-6 py-3 text-left">来源</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-stone-50">
            {% for tx in transactions %}
            <tr class="hover:bg-stone-50">
                <td class="px-6 py-3 text-stone-500">{{ tx.date|date:"Y-m-d" }}</td>
                <td class="px-6 py-3 text-stone-600">{{ tx.portfolio.name }}</td>
                <td class="px-6 py-3 {% if tx.action == 'BUY' %}text-green-700{% else %}text-red-600{% endif %} font-medium">{{ tx.action }}</td>
                <td class="px-6 py-3 text-right text-stone-600 tabular-nums">{{ tx.quantity|floatformat:2|intcomma }}</td>
                <td class="px-6 py-3 text-right text-stone-600 tabular-nums">{% if tx.price_per_share %}${{ tx.price_per_share|floatformat:2|intcomma }}{% else %}<span class="text-stone-300">~估算</span>{% endif %}</td>
                <td class="px-6 py-3 text-right text-stone-500 tabular-nums">{% if tx.fee %}${{ tx.fee|floatformat:2|intcomma }}{% else %}—{% endif %}</td>
                <td class="px-6 py-3">
                    {% if tx.source %}
                    <span class="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium {% if tx.source|lower == 'ai' or tx.source|lower == 'ocr' %}bg-purple-100 text-purple-700{% else %}bg-stone-100 text-stone-500{% endif %}">
                        {% if tx.source|lower == 'ai' or tx.source|lower == 'ocr' %}🤖 AI{% else %}手动{% endif %}
                    </span>
                    {% if tx.confidence is not None and tx.confidence < 0.9 %}
                    <span class="ml-1 inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium bg-amber-100 text-amber-700">⚠ 低置信</span>
                    {% endif %}
                    {% endif %}
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    </div>
    {% else %}
    <div class="px-6 py-12 text-center">
        <p class="text-stone-400">暂无交易记录</p>
    </div>
    {% endif %}
</div>
{% endblock %}
