{% extends "base.html" %}
{% block title %}{{ _("Overview") }} · Wealth Dashboard{% endblock %}
{% block content %}

<section class="hero-block">
  <div class="hero-top">
    <div>
      <div class="hero-label">{{ _("Net worth") }}
        {% if s.assets_by_type %}
        {# One switch per asset that is wealth but not money: leave the
           house out, or the pension, and the number, the line and the
           change follow. Remembered per browser. #}
        <span class="hero-toggles">
          {% for t, v in s.assets_by_type.items() %}
          <label class="hero-toggle" title="{{ money(v, s.base_currency) }}"><input type="checkbox" data-type="{{ t }}" checked> {{ _("incl.") }} {{ type_label(t) | lower }}</label>
          {% endfor %}
        </span>
        {% endif %}
      </div>
      <div class="hero-value" id="hero-value">{{ big(s.net_worth, s.base_currency) }}</div>
      <div class="hero-sub">
        {{ _("Assets") }} <strong>{{ big(s.net_worth + s.debt, s.base_currency) }}</strong>
        · {{ _("Liabilities") }} <strong class="{{ 'loss' if s.debt }}">{% if s.debt %}−{{ big(s.debt, s.base_currency) }}{% else %}{{ big(0, s.base_currency) }}{% endif %}</strong>
      </div>
      <div class="hero-sub hero-parts">
        {{ _("Cash") }} <strong>{{ big(s.cash, s.base_currency) }}</strong>
        · {{ _("Securities") }} <strong>{{ big(s.securities, s.base_currency) }}</strong>
        {% for t, v in s.assets_by_type.items() %}· <span class="hero-asset" data-type="{{ t }}">{{ type_label(t) }} <strong>{{ big(v, s.base_currency) }}</strong></span>{% endfor %}
      </div>
      <div class="hero-sub" id="hero-without" hidden></div>
      {% if s.converted %}
      {% set amounts %}{% for u in s.converted %}<strong>{{ money(u.amount, u.currency) }}</strong>{{ ", " if not loop.last }}{% endfor %}{% endset %}
      <div class="hero-sub">
        {{ _f("Includes {amounts}, converted at the ECB rate of {date}.",
              amounts=amounts, date=d(s.fx_as_of)) | safe }}
      </div>
      {% endif %}
      {% if s.unconverted %}
      <div class="hero-sub">
        {{ _("Not included, because no rate here covers them:") }}
        {% for u in s.unconverted %}<strong>{{ money(u.amount, u.currency) }}</strong>{{ ", " if not loop.last }}{% endfor %}
      </div>
      {% endif %}
    </div>
    <div class="hero-side">
      <div class="hero-delta" id="hero-delta" hidden></div>
    </div>
  </div>

  {# The line: net worth on each day the records can price it. It goes
     back as far as the readings do, which the caption says outright. #}
  <div class="hero-chart-wrap"><canvas id="chart-networth"></canvas></div>
  <div class="hero-controls">
    <div class="period-pills" role="tablist" aria-label="{{ _('Time range') }}">
      {% for p, label in (("1m", "1M"), ("3m", "3M"), ("6m", "6M"), ("ytd", "YTD"), ("1y", "1Y"), ("all", _("All"))) %}
      <button type="button" class="period-btn {{ 'active' if p == 'ytd' }}" data-period="{{ p }}">{{ label }}</button>
      {% endfor %}
    </div>
    <span class="sub" id="hero-caption">
      {% if history.first_date %}{{ _f("Records go back to {date}; the line fills in with every daily sync.", date=d(history.first_date)) }}
      {% else %}{{ _("No dated readings yet — the line starts with the first balance or trade.") }}{% endif %}
    </span>
  </div>
</section>

<section class="stat-strip">
  <div class="stat-card stat-blue">
    <div class="stat-label">{{ _("Liquid + investments") }}</div>
    <div class="stat-value">{{ big(s.cash + s.securities, s.base_currency) }}</div>
    <div class="stat-sub">{% if s.assets %}{{ _("excludes pension, P2P, property") }}{% else %}{{ _n(s.holdings | length, "cash and {n} holding", "cash and {n} holdings") }}{% endif %}</div>
  </div>
  {% if s.assets %}
  <div class="stat-card stat-purple">
    <div class="stat-label">{{ _("Other assets") }}</div>
    <div class="stat-value">{{ big(s.assets, s.base_currency) }}</div>
    <div class="stat-sub">{% for t in s.assets_by_type %}{{ type_label(t) }}{{ ", " if not loop.last }}{% endfor %}</div>
  </div>
  {% elif s.debt %}
  <div class="stat-card stat-purple">
    <div class="stat-label">{{ _("Debt") }}</div>
    <div class="stat-value loss">{{ big(s.debt, s.base_currency) }}</div>
    <div class="stat-sub"><a href="{{ url_for('loans_page') }}">{{ _("loans and mortgages") }}</a></div>
  </div>
  {% else %}
  <div class="stat-card stat-purple">
    <div class="stat-label">{{ _("Accounts") }}</div>
    <div class="stat-value">{{ s.account_count }}</div>
    <div class="stat-sub">{{ _f("{n} connected to a bank", n=s.connected_count) }}</div>
  </div>
  {% endif %}
  {# The two changes: a month, and the year so far. A change measured
     from a day nobody has a reading for is not a change, and says so. #}
  {% for key, label, tone in (("month", _("This month"), "green"), ("ytd", _("YTD"), "gold")) %}
  {% set c = changes[key] %}
  <div class="stat-card stat-{{ tone }}">
    <div class="stat-label">{{ label }}</div>
    {% if c.diff is not none %}
    <div class="stat-value {{ 'gain' if c.diff >= 0 else 'loss' }}">{{ '+' if c.diff >= 0 else '−' }}{{ big(c.diff | abs, s.base_currency) }}</div>
    <div class="stat-sub">
      {% if c.pct is not none %}<span class="{{ 'gain' if c.diff >= 0 else 'loss' }}">{{ '+' if c.diff >= 0 else '−' }}{{ '%.2f' | format(c.pct | abs) }} %</span> · {% endif %}
      {% if key == 'month' %}{{ _("last 30 days") }}{% elif c.since.endswith('-01-01') %}{{ _("since 1 January") }}{% else %}{{ _f("since {date}", date=d(c.since)) }}{% endif %}
    </div>
    {% else %}
    <div class="stat-value">—</div>
    <div class="stat-sub">{{ _("no reading to compare with yet") }}</div>
    {% endif %}
  </div>
  {% endfor %}
</section>

{% if by_class or s.by_account %}
<section class="grid-2">
  <div class="card">
    <div class="card-header"><h2>{{ _("By asset class") }}</h2>
      <span class="card-subtitle"><a href="{{ url_for('allocation_page') }}">{{ _("Allocation") }}</a></span></div>
    <div class="chart-wrap"><canvas id="chart-class"></canvas></div>
  </div>
  <div class="card">
    <div class="card-header"><h2>{{ _("By account") }}</h2></div>
    <div class="chart-wrap"><canvas id="chart-account"></canvas></div>
  </div>
</section>
{% endif %}

<section class="card">
  <div class="card-header">
    <h2>{{ _("Accounts") }}</h2>
    <span class="card-subtitle">{{ _("what each is worth, cash and holdings together") }} · <a href="{{ url_for('account_new') }}">{{ _("Add an account") }}</a></span>
  </div>
  <div class="table-wrap">
    <table class="grid acct-sheet">
      <thead>
        <tr><th>{{ _("Account") }}</th><th>{{ _("Source") }}</th><th class="num">{{ _("In its currency") }}</th>
            <th class="num">{{ s.base_currency }}</th><th class="num">{{ _("Transactions") }}</th><th>{{ _("As of") }}</th></tr>
      </thead>
      <tbody>
      {% set group_labels = {'cash': _("Cash & banks"), 'investments': _("Investments"), 'pension': _("Pension"), 'liabilities': _("Liabilities")} %}
      {% for g in s.groups %}
        <tr class="acct-group"><th colspan="3">{{ group_labels[g.key] }} <span class="sub">· {{ _n(g.accounts | length, "{n} account", "{n} accounts") }}</span></th>
            <th class="num {{ 'loss' if g.total_base < 0 }}">{{ money(g.total_base, s.base_currency) }}</th><th colspan="2"></th></tr>
        {% for a in g.accounts %}
        <tr>
          <td><a href="{{ url_for('account_detail', account_id=a.id) }}">{{ a.name }}</a>
              <span class="sub">{{ type_label(a.type) }}</span></td>
          <td>{% if a.bank %}{{ a.bank }}<span class="sub">{{ _("connected") }}</span>
              {% elif a.transactions %}<span class="sub">{{ _("imported file") }}</span>
              {% else %}<span class="sub">{{ _("nothing yet") }}</span>{% endif %}</td>
          <td class="num sub">{% if a.total_native is not none and a.currency != s.base_currency %}{{ money(a.total_native, a.currency) }}{% elif a.total_native is none and a.securities_base %}—{% endif %}</td>
          <td class="num {{ 'loss' if a.total_base < 0 }}">{% if a.balance is not none or a.securities_base %}{{ money(a.total_base, s.base_currency) }}{% else %}—{% endif %}</td>
          <td class="num">{{ a.transactions or '—' }}</td>
          <td class="sub nowrap">{{ d(a.balance_as_of) }}</td>
        </tr>
        {% endfor %}
      {% endfor %}
      <tr class="acct-total"><th colspan="3">{{ _("Net worth") }}</th><th class="num">{{ money(s.net_worth, s.base_currency) }}</th><th colspan="2"></th></tr>
      </tbody>
    </table>
  </div>
  {% if s.unconverted %}
  <p class="sub">{{ _("Not included, because no rate here covers them:") }}
     {% for u in s.unconverted %}<strong>{{ money(u.amount, u.currency) }}</strong>{{ ", " if not loop.last }}{% endfor %}</p>
  {% endif %}
</section>

{% if health %}
<section class="card">
  <div class="card-header">
    <h2>{{ _("Bank connections") }}</h2>
    <span class="card-subtitle">{{ _n(health | length, "{n} connected account", "{n} connected accounts") }}</span>
  </div>
  <ul class="health-list">
    {% for h in health %}
    <li class="health-row">
      <span class="dot dot-{{ h.status }}" aria-hidden="true"></span>
      <a href="{{ url_for('account_detail', account_id=h.account_id) }}">{{ h.account }}</a>
      <span class="sub">{{ h.bank }}</span>
      <span class="health-hint">
        {% if h.hint == 'expired' %}{{ _("Consent expired — reconnect.") }}
        {% elif h.hint == 'never' %}{{ _("Never synced.") }}
        {% elif h.hint == 'error' %}{{ _f("Last sync failed: {error}", error=h.error) }}
        {% elif h.hint == 'stale' %}{{ _f("Last sync {n} days ago.", n=(h.hours_ago // 24) | int) }}
        {% elif h.hint == 'expiring' %}{{ _n(h.days_left, "Consent expires in {n} day — reconnect soon.", "Consent expires in {n} days — reconnect soon.") }}
        {% elif h.hint == 'old' %}{{ _f("Last sync {n} hours ago.", n=h.hours_ago | int) }}
        {% else %}{{ _f("Synced {n} hours ago", n=h.hours_ago | int) }}
        {% endif %}
        {% if h.hint in ('stale', 'old', 'ok') and h.days_left is not none %} · {{ _f("consent for {n} more days", n=h.days_left) }}{% endif %}
      </span>
    </li>
    {% endfor %}
  </ul>
</section>
{% endif %}

{% if s.holdings %}
<section class="card">
  <div class="card-header">
    <h2>{{ _("Holdings") }}</h2>
    <span class="card-subtitle">
      {% if s.prices_as_of %}{{ _f("at market prices of {date}", date=d(s.prices_as_of)) }}{% endif %}
      {% if s.holdings_at_trade %}{{ _n(s.holdings_at_trade, "{n} holding at its last traded price", "{n} holdings at their last traded price") }}{% endif %}
    </span>
  </div>
  <div class="table-wrap">
    <table class="grid">
      <thead>
        <tr><th>{{ _("Security") }}</th><th>{{ _("Where") }}</th><th class="num">{{ _("Quantity") }}</th>
            <th class="num">{{ _("Net invested") }}</th><th class="num">{{ _("Value") }}</th></tr>
      </thead>
      <tbody>
      {% for h in s.holdings %}
        <tr>
          <td><a href="{{ url_for('security_page', isin=h.isin) }}">{{ h.name or h.isin }}</a><span class="sub">{{ h.isin }}</span></td>
          <td class="sub">{{ h.accounts | unique | join(', ') }}</td>
          <td class="num {{ 'neg' if h.incomplete_history }}">
            {{ qty(h.quantity) }}
            {% if h.incomplete_history %}<span class="sub">{{ _("export starts too late") }}</span>{% endif %}
          </td>
          <td class="num">{{ money(h.net_invested, h.currency) }}</td>
          <td class="num">{% if h.value %}{{ money(h.value, h.currency) }}
              {% else %}<span class="sub">{{ _("no price") }}</span>{% endif %}</td>
        </tr>
      {% endfor %}
      </tbody>
    </table>
  </div>
  {% if s.holdings | selectattr('incomplete_history') | list %}
  <p class="sub">{{ _("A negative quantity is not a short position: it is a sale whose purchase is older than the file you imported. Export from the account opening and re-import — overlap is free.") }}</p>
  {% endif %}
</section>
{% endif %}

{% if s.recent %}
<section class="card">
  <div class="card-header"><h2>{{ _("Latest activity") }}</h2></div>
  <div class="table-wrap">
    <table class="grid">
      <thead><tr><th>{{ _("Date") }}</th><th>{{ _("Account") }}</th><th>{{ _("Description") }}</th>
                 <th>{{ _("Kind") }}</th><th class="num">{{ _("Amount") }}</th></tr></thead>
      <tbody>
      {% for t in s.recent %}
        <tr>
          <td class="sub nowrap">{{ d(t.txn_date) }}</td>
          <td class="sub">{{ t.account_name }}</td>
          <td>{{ t.description[:70] }}</td>
          <td><span class="tag tag-muted">{{ kind_label(t.kind) }}</span></td>
          <td class="num {{ 'pos' if t.amount > 0 else 'neg' }}">{{ money(t.amount, t.currency) }}</td>
        </tr>
      {% endfor %}
      </tbody>
    </table>
  </div>
</section>
{% endif %}

{% if not s.accounts %}
<section class="card empty">
  <p>{{ _("Nothing here yet.") }}</p>
  <p class="sub">{{ _("Add an account, then connect it to your bank or import a broker export. Both routes end in the same place.") }}</p>
  <p><a class="btn" href="{{ url_for('account_new') }}">{{ _("Add an account") }}</a></p>
</section>
{% endif %}
{% endblock %}

{% block scripts %}
<script>
// ── Net worth over time ─────────────────────────────────────────
const LANG = {{ lang | tojson }}, CCY = {{ s.base_currency | tojson }};
const NOW = {{ s.net_worth | tojson }};
const ASSETS = {{ s.assets_by_type | tojson }};
const fmtMoney = v => new Intl.NumberFormat(LANG, { style: 'currency', currency: CCY, maximumFractionDigits: 0 }).format(v);
{# The headline is formatted the way the server does it — big(): the
   symbol in front, grouped the language's way, no cents — so a toggle
   does not change its face, only its figure. #}
const SEP = {{ seps | tojson }};
const fmtHero = v => {
  const digits = Math.round(Math.abs(v)).toString().replace(/\B(?=(\d{3})+(?!\d))/g, SEP.group);
  const sign = v < 0 ? '\u2212' : '';
  if (!SEP.symbol) return sign + digits + '\u00a0' + CCY;
  return SEP.symbol.length > 1 ? sign + SEP.symbol + '\u00a0' + digits : sign + SEP.symbol + digits;
};
const toggles = [...document.querySelectorAll('.hero-toggle input')];
const excluded = () => toggles.filter(cb => !cb.checked).map(cb => cb.dataset.type);
const without = (value, assets) => { const ex = excluded(); return value == null ? null : value - ex.reduce((a, t) => a + ((assets || {})[t] || 0), 0); };
let lastHistory = null;
function applyToggles() {
  const ex = excluded();
  document.getElementById('hero-value').textContent = fmtHero(without(NOW, ASSETS));
  document.querySelectorAll('.hero-asset').forEach(el => el.classList.toggle('is-excluded', ex.includes(el.dataset.type)));
  const line = document.getElementById('hero-without');
  if (ex.length) {
    line.hidden = false;
    line.textContent = {{ _("Without {what}: the whole is {total}.") | tojson }}
      .replace('{what}', ex.map(t => document.querySelector(`.hero-asset[data-type="${t}"]`).firstChild.textContent.trim().toLowerCase()).join(', '))
      .replace('{total}', fmtHero(NOW));
  } else line.hidden = true;
  try { localStorage.setItem('hero-excluded', JSON.stringify(ex)); } catch (e) {}
  if (lastHistory) drawHistory(lastHistory);
}
try { const saved = JSON.parse(localStorage.getItem('hero-excluded') || '[]'); toggles.forEach(cb => { cb.checked = !saved.includes(cb.dataset.type); }); } catch (e) {}
toggles.forEach(cb => cb.addEventListener('change', applyToggles));
const fmtCompact = v => new Intl.NumberFormat(LANG, { notation: 'compact', maximumFractionDigits: 1 }).format(v);
const fmtDay = new Intl.DateTimeFormat(LANG, { day: 'numeric', month: 'short' });
const fmtMonth = new Intl.DateTimeFormat(LANG, { month: 'short', year: 'numeric' });
let heroChart = null;

function drawHistory(h) {
  lastHistory = h;
  const pts = h.points;
  const el = document.getElementById('chart-networth');
  if (!el) return;
  // Today's live figure closes the line, so the chart ends on the same
  // number as the headline above it.
  if (pts.length) { pts[pts.length - 1].net_worth = NOW; pts[pts.length - 1].assets = ASSETS; }
  const long = pts.length > 1 && (new Date(pts[pts.length - 1].date) - new Date(pts[0].date)) > 200 * 86400000;
  const labels = pts.map(p => (long ? fmtMonth : fmtDay).format(new Date(p.date)));
  // A day recorded by another app is a total with no parts, so a
  // switch cannot take anything out of it; the line says so by
  // keeping its full value there.
  const data = pts.map(p => p.recorded ? p.net_worth : without(p.net_worth, p.assets));
  if (heroChart) heroChart.destroy();
  const ctx = el.getContext('2d');
  const grad = ctx.createLinearGradient(0, 0, 0, el.parentElement.clientHeight || 180);
  grad.addColorStop(0, 'rgba(52,211,153,0.30)'); grad.addColorStop(1, 'rgba(52,211,153,0)');
  heroChart = new Chart(el, {
    type: 'line',
    data: { labels, datasets: [{ label: {{ _("Net worth") | tojson }}, data,
      borderColor: '#34d399', backgroundColor: grad, fill: 'origin', borderWidth: 2,
      pointRadius: 0, pointHoverRadius: 5, tension: 0.25, spanGaps: false }] },
    options: {
      responsive: true, maintainAspectRatio: false,
      interaction: { mode: 'index', intersect: false },
      scales: {
        x: { grid: { display: false }, ticks: { color: '#5e6a86', maxTicksLimit: 8, maxRotation: 0 } },
        y: { grid: { color: 'rgba(35,44,68,0.6)' }, ticks: { color: '#5e6a86', callback: fmtCompact, maxTicksLimit: 5 } },
      },
      plugins: { legend: { display: false },
        tooltip: { callbacks: { title: items => pts[items[0].dataIndex].date,
                                label: c => ' ' + fmtMoney(c.parsed.y) } } },
    },
  });
  const first = h.start ? (h.start.recorded ? h.start.net_worth : without(h.start.net_worth, h.start.assets)) : null;
  const delta = document.getElementById('hero-delta');
  if (first !== null && first !== undefined && pts.length > 1) {
    const now = without(NOW, ASSETS);
    const diff = now - first, pct = first ? (diff / Math.abs(first) * 100) : null;
    const period = document.querySelector('.period-btn.active');
    const range = period ? period.textContent.trim() : '';
    delta.textContent = (diff >= 0 ? '▲ +' : '▼ −') + fmtMoney(Math.abs(diff))
      + (pct !== null ? ` · ${diff >= 0 ? '+' : '−'}${Math.abs(pct).toFixed(2)} %` : '')
      + (range ? ` · ${range}` : '');
    delta.className = 'hero-delta ' + (diff >= 0 ? 'gain' : 'loss');
    delta.title = {{ _("since the start of the range") | tojson }};
    delta.hidden = false;
  } else {
    delta.hidden = true;
  }
}
applyToggles();
drawHistory({{ history | tojson }});
document.querySelectorAll('.period-btn').forEach(btn => btn.addEventListener('click', async () => {
  document.querySelectorAll('.period-btn').forEach(b => b.classList.toggle('active', b === btn));
  const res = await fetch('{{ url_for("api_networth") }}?period=' + btn.dataset.period, { credentials: 'same-origin' });
  if (res.ok) drawHistory(await res.json());
}));

{# The app's language, not the browser's: a page that says "Nettovermögen"
   over numbers punctuated the American way is a page nobody trusts.
   Declared above the donut plugin, which draws with it. #}
const FMT = new Intl.NumberFormat({{ lang | tojson }}, {
  style: 'currency', currency: {{ s.base_currency | tojson }},
  maximumFractionDigits: 0,
});

const PALETTE = ['#5b9dff','#a78bfa','#34d399','#f5d76e','#ff8c42',
                 '#f87171','#22d3ee','#fb7185','#84cc16','#c084fc'];

// The hole in a donut is the one place a total can sit without
// competing with anything. Drawn rather than overlaid in HTML so it
// stays centred when the legend reflows on a narrow screen.
const donutCentre = {
  id: 'donutCentre',
  afterDatasetsDraw(chart, _args, opts) {
    if (!opts || !opts.total) return;
    const meta = chart.getDatasetMeta(0);
    if (!meta || !meta.data || !meta.data.length) return;
    const { x, y } = meta.data[0];
    const ctx = chart.ctx;
    ctx.save();
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillStyle = '#5e6a86';
    ctx.font = '600 10px Inter, system-ui, sans-serif';
    ctx.fillText(String(opts.label || '').toUpperCase(), x, y - 14);
    ctx.fillStyle = '#f5d76e';
    ctx.font = '700 19px Inter, system-ui, sans-serif';
    ctx.fillText(FMT.format(opts.total), x, y + 6);
    ctx.restore();
  },
};
Chart.register(donutCentre);

function donut(id, rows, centreLabel) {
  const el = document.getElementById(id);
  if (!el || !rows.length) return;
  const total = rows.reduce((a, r) => a + Math.abs(r.value), 0);
  new Chart(el, {
    type: 'doughnut',
    data: {
      labels: rows.map(r => r.name),
      datasets: [{
        data: rows.map(r => Math.abs(r.value)),
        backgroundColor: PALETTE,
        borderColor: '#131826',
        borderWidth: 2,
      }],
    },
    options: {
      responsive: true, maintainAspectRatio: false, cutout: '68%',
      plugins: {
        donutCentre: { total, label: centreLabel },
        legend: {
          position: 'right',
          labels: { color: '#95a0b9', boxWidth: 12, padding: 12,
                    font: { size: 12 } },
        },
        tooltip: {
          callbacks: {
            label: (ctx) => {
              const total = ctx.dataset.data.reduce((a, b) => a + b, 0);
              const pct = total ? (ctx.parsed / total * 100).toFixed(1) : '0';
              return ` ${ctx.label}: ${FMT.format(ctx.parsed)} (${pct}%)`;
            },
          },
        },
      },
    },
  });
}

donut('chart-class', {{ by_class | tojson }}, {{ _("Total") | tojson }});
donut('chart-account', {{ s.by_account | tojson }}, {{ _("Assets") | tojson }});
</script>
{% endblock %}