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

{% block extra_head %}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.4/dist/chart.umd.min.js"></script>
{% endblock %}

{% block title %}Dashboard{% endblock %}

{% block content %}
<div class="mb-2">
    <p class="text-xs font-semibold tracking-widest text-stone-500 uppercase">{{ fy_label }} SNAPSHOT</p>
</div>

<!-- ── Top metric cards ──────────────────────────────────────── -->
<div class="grid grid-cols-2 lg:grid-cols-4 gap-3 mb-3">

    <!-- Total value -->
    <div class="bg-white rounded-lg p-5 shadow-sm">
        <p class="text-xs font-semibold tracking-widest text-stone-400 uppercase mb-1">Total Value</p>
        {% if overview.this_week_total is not None %}
            <p class="text-3xl font-bold text-stone-900">${{ overview.this_week_total|floatformat:0 }}</p>
        {% else %}
            <p class="text-3xl font-bold text-stone-400">—</p>
        {% endif %}
        <p class="text-sm text-stone-400 mt-1">
            Across {{ overview.portfolio_count }} portfolio{{ overview.portfolio_count|pluralize }}
        </p>
    </div>

    <!-- This week's gain -->
    <div class="bg-white rounded-lg p-5 shadow-sm">
        <p class="text-xs font-semibold tracking-widest text-stone-400 uppercase mb-1">This Week</p>
        {% if overview.week_gain is not None %}
            <p class="text-3xl font-bold {% if overview.week_gain >= 0 %}text-green-800{% else %}text-red-700{% endif %}">
                {% if overview.week_gain >= 0 %}+{% endif %}${{ overview.week_gain|floatformat:0 }}
            </p>
            <p class="text-sm text-stone-400 mt-1">
                {% if overview.week_gain >= 0 %}+{% endif %}{{ overview.week_change_pct|floatformat:2 }}% vs last week
            </p>
        {% else %}
            <p class="text-3xl font-bold text-stone-400">—</p>
            <p class="text-sm text-stone-400 mt-1">No prior snapshot</p>
        {% endif %}
    </div>

    <!-- Week change % -->
    <div class="bg-white rounded-lg p-5 shadow-sm">
        <p class="text-xs font-semibold tracking-widest text-stone-400 uppercase mb-1">Week Change</p>
        {% if overview.week_change_pct is not None %}
            <p class="text-3xl font-bold {% if overview.week_change_pct >= 0 %}text-green-800{% else %}text-red-700{% endif %}">
                {% if overview.week_change_pct >= 0 %}+{% endif %}{{ overview.week_change_pct|floatformat:2 }}%
            </p>
            {% if overview.last_week_date %}
                <p class="text-sm text-stone-400 mt-1">Last: {{ overview.last_week_date|date:"M j" }}</p>
            {% endif %}
        {% else %}
            <p class="text-3xl font-bold text-stone-400">—</p>
            <p class="text-sm text-stone-400 mt-1">Need 2+ snapshots</p>
        {% endif %}
    </div>

    <!-- Last snapshot date -->
    <div class="bg-white rounded-lg p-5 shadow-sm">
        <p class="text-xs font-semibold tracking-widest text-stone-400 uppercase mb-1">Last Snapshot</p>
        {% if overview.this_week_date %}
            <p class="text-3xl font-bold text-stone-900">{{ overview.this_week_date|date:"M j" }}</p>
            <p class="text-sm text-stone-400 mt-1">{{ overview.this_week_date|date:"l, Y" }}</p>
        {% else %}
            <p class="text-3xl font-bold text-stone-400">—</p>
            <p class="text-sm text-stone-400 mt-1">No snapshots yet</p>
        {% endif %}
    </div>

</div>

<!-- ── Performance chart ─────────────────────────────────────── -->
{% if chart_data_json != 'null' %}
<div class="bg-white rounded-lg shadow-sm p-5 mb-3">
    <p class="text-xs font-semibold tracking-widest text-stone-500 uppercase mb-4">
        {{ fy_label }} Performance vs Benchmarks
    </p>
    <canvas id="performanceChart" height="90"></canvas>
</div>
{% endif %}

<!-- ── Hint ──────────────────────────────────────────────────── -->
<p class="text-xs text-stone-400 text-center mt-2 mb-6">
    Snapshots captured every Saturday 08:00 · Values in portfolio's quote currency
</p>

<!-- ── Live holdings (per-portfolio cards) ───────────────────── -->
{% if all_holdings %}
<div class="space-y-4">
    {% for group in all_holdings %}
    <div class="bg-white rounded-lg shadow-sm overflow-hidden">
        <!-- Card header -->
        <div class="px-6 py-4 flex items-center justify-between border-b border-stone-100">
            <div>
                <p class="font-semibold text-stone-900 text-sm">
                    {{ group.portfolio.name }}
                </p>
                <p class="text-xs text-stone-400 mt-0.5">
                    {{ group.position_count }} position{{ group.position_count|pluralize }}
                    {% if overview.this_week_date %}· Last updated {{ overview.this_week_date|date:"j M Y" }}{% endif %}
                </p>
            </div>
            <div class="text-right">
                <p class="font-bold text-stone-900 text-sm">
                    {% if group.this_week_value is not None %}${{ group.this_week_value|floatformat:0 }}{% else %}<span class="text-stone-300">—</span>{% endif %}
                </p>
                {% if group.change is not None %}
                <p class="text-xs font-medium mt-0.5 {% if group.change >= 0 %}text-green-700{% else %}text-red-600{% endif %}">
                    {% if group.change >= 0 %}+{% endif %}${{ group.change|floatformat:0 }}
                    ({% if group.change_pct >= 0 %}+{% endif %}{{ group.change_pct|floatformat:1 }}%)
                </p>
                {% else %}
                <p class="text-xs text-stone-300 mt-0.5">No prior snapshot</p>
                {% endif %}
            </div>
        </div>
        <!-- Holdings table -->
        <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">Ticker</th>
                    <th class="px-6 py-3 text-right">Qty</th>
                    <th class="px-6 py-3 text-right">Price</th>
                    <th class="px-6 py-3 text-right">Mkt Value</th>
                </tr>
            </thead>
            <tbody>
                {% for stock in group.holdings %}
                <tr class="border-b border-stone-50 hover:bg-stone-50 {{ group.colors.row }}">
                    <td class="px-6 py-3 font-medium text-stone-900">
                        <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium {{ group.colors.badge }}">
                            {{ stock.stock_code }}
                        </span>
                    </td>
                    <td class="px-6 py-3 text-right text-stone-500">{{ stock.quantity|floatformat:0 }}</td>
                    <td class="px-6 py-3 text-right text-stone-500">
                        {% if stock.current_price %}${{ stock.current_price|floatformat:2 }}{% else %}<span class="text-stone-300">—</span>{% endif %}
                    </td>
                    <td class="px-6 py-3 text-right font-semibold text-stone-800">
                        {% if stock.current_value %}${{ stock.current_value|floatformat:0 }}{% else %}<span class="text-stone-300">—</span>{% endif %}
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% endfor %}
</div>
{% endif %}

{% endblock %}

{% block extra_js %}
{% if chart_data_json != 'null' %}
<script>
(function () {
    const raw = {{ chart_data_json|safe }};
    if (!raw) return;

    const ctx = document.getElementById('performanceChart');
    if (!ctx) return;

    new Chart(ctx, {
        type: 'line',
        data: raw,
        options: {
            responsive: true,
            interaction: { mode: 'index', intersect: false },
            plugins: {
                legend: {
                    position: 'top',
                    align: 'start',
                    labels: {
                        usePointStyle: true,
                        pointStyle: 'rect',
                        pointStyleWidth: 14,
                        padding: 20,
                        font: { size: 12, weight: '600' },
                    },
                },
                tooltip: {
                    callbacks: {
                        label: function (ctx) {
                            const v = ctx.parsed.y;
                            if (v === null || v === undefined) return ctx.dataset.label + ': —';
                            const sign = v >= 0 ? '+' : '';
                            return ctx.dataset.label + ': ' + sign + v.toFixed(2) + '%';
                        },
                    },
                },
            },
            scales: {
                y: {
                    ticks: {
                        callback: function (v) {
                            return (v >= 0 ? '+' : '') + v.toFixed(1) + '%';
                        },
                        font: { size: 11 },
                    },
                    grid: { color: '#f5f5f4' },
                },
                x: {
                    grid: { display: false },
                    ticks: { font: { size: 11 } },
                },
            },
        },
    });
})();
</script>
{% endif %}
{% endblock %}