{% extends "base.html" %}
{% block title %}{{ inv.asset_name }}{% endblock %}
{% block page_title %}{{ inv.asset_name }}{% endblock %}

{% block topbar_actions %}
<a href="{{ url_for('investments.add_transaction', id=inv.id) }}" class="btn btn-sm btn-primary" style="font-size:12px;"><i class="bi bi-plus-lg me-1"></i>Add Transaction</a>
<a href="{{ url_for('investments.edit', id=inv.id) }}" class="btn btn-sm btn-outline-secondary ms-1" style="font-size:12px;"><i class="bi bi-pencil me-1"></i>Edit</a>
{% endblock %}

{% block content %}
<!-- Holding summary -->
<div class="row g-3 mb-4">
    <div class="col-12 col-md-5">
        <div class="pcard h-100" style="border-left:4px solid {{ asset_colors.get(inv.asset_type,'#94a3b8') }};">
            <div class="d-flex justify-content-between align-items-start mb-3">
                <div>
                    <div style="font-size:18px;font-weight:700;">{{ inv.asset_name }}</div>
                    <div style="font-size:12px;color:var(--muted);">
                        {% if inv.ticker %}<span class="mono">{{ inv.ticker }}</span> · {% endif %}
                        <span style="background:{{ asset_colors.get(inv.asset_type,'#94a3b8') }}22;color:{{ asset_colors.get(inv.asset_type,'#94a3b8') }};padding:2px 8px;border-radius:4px;font-size:11px;font-weight:600;">
                            {{ asset_labels.get(inv.asset_type, inv.asset_type) }}
                        </span>
                    </div>
                </div>
                <form method="POST" action="{{ url_for('investments.delete', id=inv.id) }}" onsubmit="return confirm('Remove this holding?')">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                    <button type="submit" class="btn btn-sm btn-outline-danger" style="font-size:11px;">Remove</button>
                </form>
            </div>

            <div class="row g-2 mt-1">
                <div class="col-6">
                    <div style="font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;">Shares</div>
                    <div class="mono" style="font-size:16px;font-weight:600;">{{ inv.shares | shares }}</div>
                </div>
                <div class="col-6">
                    <div style="font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;">Avg Cost</div>
                    <div class="mono" style="font-size:16px;font-weight:600;">{{ inv.avg_cost_basis | currency }}</div>
                </div>
                <div class="col-6">
                    <div style="font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;">Current Price</div>
                    <div class="mono" style="font-size:16px;font-weight:600;">
                        {% if inv.current_price %}{{ inv.current_price | currency }}
                        {% else %}<span class="text-muted">—</span>{% endif %}
                    </div>
                    {% if inv.last_price_update %}
                    <div style="font-size:10px;color:var(--muted);">{{ inv.last_price_update.strftime('%b %d, %H:%M') }}</div>
                    {% endif %}
                </div>
                <div class="col-6">
                    <div style="font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;">Market Value</div>
                    <div class="mono text-invest" style="font-size:16px;font-weight:600;">{{ inv.current_value | currency }}</div>
                </div>
            </div>

            <hr style="border-color:var(--border);">
            <div class="d-flex justify-content-between">
                <div>
                    <div style="font-size:11px;color:var(--muted);">Total Cost Basis</div>
                    <div class="mono" style="font-size:14px;">{{ inv.total_cost | currency }}</div>
                </div>
                <div class="text-end">
                    <div style="font-size:11px;color:var(--muted);">Unrealized P&amp;L</div>
                    <div class="mono {% if inv.unrealized_gain >= 0 %}text-income{% else %}text-expense{% endif %}" style="font-size:14px;font-weight:600;">
                        {% if inv.unrealized_gain >= 0 %}+{% endif %}{{ inv.unrealized_gain | currency }}
                        <span style="font-size:11px;">({% if inv.unrealized_gain_pct >= 0 %}+{% endif %}{{ inv.unrealized_gain_pct }}%)</span>
                    </div>
                </div>
            </div>

            {% if inv.notes %}
            <div style="font-size:12px;color:var(--muted);margin-top:12px;padding-top:12px;border-top:1px solid var(--border);">{{ inv.notes }}</div>
            {% endif %}
        </div>
    </div>

    {% if inv.ticker %}
    <div class="col-12">
        <div class="pcard">
            <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
                <div class="d-flex align-items-center gap-2 flex-wrap">
                    <span class="pcard-title mb-0">Price History — <span class="mono">{{ inv.ticker }}</span></span>
                    <span id="detail-chg" class="chg-badge chg-flat" style="display:none;"></span>
                </div>
                <div class="d-flex gap-1 flex-wrap">
                    {% for tf in ['1W','1M','3M','6M','1Y'] %}
                    <button class="tf-btn{% if tf == '1M' %} active{% endif %}"
                            onclick="loadDetailChart('{{ tf }}')" id="tf-{{ tf }}">{{ tf }}</button>
                    {% endfor %}
                </div>
            </div>
            <div style="font-size:12px;color:var(--muted);margin-bottom:8px;" id="detail-info">Loading…</div>
            <div style="position:relative;height:200px;">
                <canvas id="detailCanvas"></canvas>
            </div>
        </div>
    </div>
    {% endif %}

    <div class="col-12 col-md-7">
        <div class="pcard p-0 h-100">
            <div class="d-flex justify-content-between align-items-center px-4 py-3" style="border-bottom:1px solid var(--border);">
                <span class="pcard-title mb-0">Transaction History</span>
                <a href="{{ url_for('investments.add_transaction', id=inv.id) }}" class="btn btn-sm btn-outline-primary" style="font-size:11px;padding:2px 8px;"><i class="bi bi-plus-lg"></i></a>
            </div>
            {% if txns %}
            <table class="pfm-table">
                <thead>
                    <tr>
                        <th style="padding-left:20px;">Date</th>
                        <th>Type</th>
                        <th class="text-end">Shares</th>
                        <th class="text-end">Price</th>
                        <th class="text-end">Total</th>
                        <th class="text-end" style="padding-right:20px;"></th>
                    </tr>
                </thead>
                <tbody>
                {% for txn in txns %}
                <tr>
                    <td style="padding-left:20px;font-size:12px;color:var(--muted);white-space:nowrap;">{{ txn.date.strftime('%b %d, %Y') }}</td>
                    <td>
                        <span class="badge" style="font-size:11px;{% if txn.transaction_type == 'buy' %}background:#d1fae5;color:#065f46;{% elif txn.transaction_type == 'sell' %}background:#fee2e2;color:#991b1b;{% elif txn.transaction_type == 'dividend' %}background:#dbeafe;color:#1e40af;{% else %}background:#f3e8ff;color:#6b21a8;{% endif %}">
                            {{ txn.transaction_type | title }}
                        </span>
                    </td>
                    <td class="text-end mono" style="font-size:12px;">{{ txn.shares }}</td>
                    <td class="text-end mono" style="font-size:12px;">{{ txn.price_per_share | currency }}</td>
                    <td class="text-end mono {% if txn.transaction_type == 'buy' %}text-expense{% else %}text-income{% endif %}" style="font-size:12px;font-weight:500;">
                        {{ txn.total_amount | currency }}
                    </td>
                    <td class="text-end" style="padding-right:20px;">
                        <form method="POST" action="{{ url_for('investments.delete_transaction', id=txn.id) }}" onsubmit="return confirm('Delete this transaction?')">
                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                            <button type="submit" class="btn btn-sm btn-outline-danger" style="font-size:11px;padding:2px 6px;">×</button>
                        </form>
                    </td>
                </tr>
                {% endfor %}
                </tbody>
            </table>
            {% else %}
            <div class="text-center py-5">
                <p class="text-muted small mb-2">No transactions yet.</p>
                <a href="{{ url_for('investments.add_transaction', id=inv.id) }}" class="btn btn-sm btn-primary">Record First Buy</a>
            </div>
            {% endif %}
        </div>
    </div>
</div>

<a href="{{ url_for('investments.index') }}" class="btn btn-sm btn-outline-secondary"><i class="bi bi-arrow-left me-1"></i>Back to Portfolio</a>
{% endblock %}

{% block extra_css %}
.tf-btn { font-size:11px;font-weight:600;padding:3px 10px;border-radius:4px;border:1px solid var(--border);background:#fff;color:var(--muted);cursor:pointer;transition:all .15s; }
.tf-btn:hover { border-color:var(--accent);color:var(--accent); }
.tf-btn.active { background:var(--accent);color:#fff;border-color:var(--accent); }
.chg-badge { display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:600;font-family:'DM Mono',monospace;padding:2px 7px;border-radius:4px; }
.chg-up { background:#d1fae5;color:#065f46; }
.chg-down { background:#fee2e2;color:#991b1b; }
.chg-flat { background:#f1f5f9;color:#64748b; }
{% endblock %}

{% if inv.ticker %}
{% block extra_js %}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.3/dist/chart.umd.min.js"></script>
<script>
const sym = '{{ current_user.currency_symbol }}';
const ticker = '{{ inv.ticker }}';
let chartInst = null;

function fmtP(v) {
    const n = parseFloat(v);
    return sym + Math.abs(n).toLocaleString(undefined, {minimumFractionDigits:2, maximumFractionDigits:4});
}
function fmtChg(c, p) {
    const s = c >= 0 ? '+' : '';
    return `${s}${fmtP(c)} (${s}${parseFloat(p).toFixed(2)}%)`;
}
function chgCls(v) { return v > 0 ? 'chg-up' : v < 0 ? 'chg-down' : 'chg-flat'; }

function loadDetailChart(tf) {
    // Update active button
    document.querySelectorAll('.tf-btn').forEach(b =>
        b.classList.toggle('active', b.id === 'tf-' + tf));

    const infoEl = document.getElementById('detail-info');
    infoEl.textContent = 'Loading…';

    fetch(`{{ url_for('investments.api_price_history', ticker='__T__') }}`.replace('__T__', ticker) + '?tf=' + tf)
        .then(r => r.ok ? r.json() : Promise.reject())
        .then(data => {
            infoEl.innerHTML =
                `Current: <strong>${fmtP(data.current)}</strong> &nbsp;·&nbsp; ` +
                `${({'1W':'1 Week','1M':'1 Month','3M':'3 Months','6M':'6 Months','1Y':'1 Year'}[tf]||tf)}: ` +
                `<strong class="${data.period_change >= 0 ? 'text-income' : 'text-expense'}">${fmtChg(data.period_change, data.period_change_pct)}</strong>`;

            const chgEl = document.getElementById('detail-chg');
            chgEl.className = 'chg-badge ' + chgCls(data.period_change);
            chgEl.innerHTML = `<i class="bi bi-${data.period_change >= 0 ? 'arrow-up' : 'arrow-down'}-short"></i>${fmtChg(data.period_change, data.period_change_pct)}`;
            chgEl.style.display = '';

            const lineColor = data.period_change >= 0 ? '#10b981' : '#ef4444';
            const ctx = document.getElementById('detailCanvas').getContext('2d');
            if (chartInst) chartInst.destroy();
            chartInst = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: data.dates,
                    datasets: [{
                        data: data.closes,
                        borderColor: lineColor,
                        backgroundColor: lineColor + '18',
                        borderWidth: 2,
                        pointRadius: data.closes.length > 60 ? 0 : 2,
                        pointHoverRadius: 4,
                        tension: 0.3,
                        fill: true,
                    }]
                },
                options: {
                    responsive: true, maintainAspectRatio: false,
                    interaction: { mode: 'index', intersect: false },
                    plugins: {
                        legend: { display: false },
                        tooltip: { callbacks: { label: c => ' ' + fmtP(c.parsed.y) } }
                    },
                    scales: {
                        x: { grid: { display: false }, ticks: { font: { size: 10 }, maxTicksLimit: 8, maxRotation: 0 } },
                        y: { position: 'right', grid: { color: '#f1f5f9' },
                             ticks: { font: { size: 10 }, callback: v => sym + parseFloat(v).toLocaleString(undefined, {minimumFractionDigits: 2}) } }
                    }
                }
            });
        })
        .catch(() => { infoEl.textContent = 'Price data unavailable.'; });
}

// Load 1M chart on page load
loadDetailChart('1M');
</script>
{% endblock %}
{% endif %}