{% extends "planner/base.html" %}
{% load planner_extras static %}
{% block title %}{{ plan.name }}{% endblock %}
{% block content %}
<div class="page-head">
  <div>
    <h1>{{ plan.name }}</h1>
    <p class="muted">Age {{ plan.current_age }} · retire at <span id="ret-label">{{ report.retirement_age }}</span> · plan to {{ plan.life_expectancy }} · {{ plan.get_strategy_display }} · {{ report.paths }} paths</p>
  </div>
  <div class="toolbar">
    <a class="btn" href="{% url 'plan_edit' plan.pk 'basics' %}">Edit</a>
    <a class="btn" href="{% url 'compare' plan.pk %}">Compare scenarios</a>
    <a class="btn" href="{% url 'report' plan.pk %}{% if scenario %}?scenario={{ scenario.pk }}{% endif %}">Printable report</a>
    <a class="btn" href="{% url 'export_csv' plan.pk %}{% if scenario %}?scenario={{ scenario.pk }}{% endif %}">Export CSV</a>
    <form method="post" action="{% url 'plan_delete' plan.pk %}" onsubmit="return confirm('Delete this plan?')" class="inline">{% csrf_token %}<button class="btn danger">Delete</button></form>
  </div>
</div>

<div class="tabs">
  <a class="{% if not scenario %}current{% endif %}" href="{% url 'plan_detail' plan.pk %}">Base plan</a>
  {% for s in scenarios %}<a class="{% if scenario.pk == s.pk %}current{% endif %}" href="{% url 'plan_detail' plan.pk %}?scenario={{ s.pk }}">{{ s.name }}</a>{% endfor %}
  <a href="{% url 'scenario_new' plan.pk %}">+ scenario</a>
</div>

<div class="dash">
  <section class="card gauge-card">
    <h2>Success probability</h2>
    <div id="gauge">{{ gauge|safe }}</div>
    <p class="muted small">Target {{ report.target_success|pct }}. Success means no shortfall before age {{ plan.life_expectancy }}.</p>
  </section>
  <section class="card stats">
    <h2>Key numbers</h2>
    <dl>
      <dt>Median portfolio at retirement</dt><dd id="st-ret">{{ report.median_retirement_balance|money:currency }}</dd>
      <dt>Median portfolio at age {{ plan.life_expectancy }}</dt><dd id="st-end">{{ report.median_terminal_balance|money:currency }}</dd>
      <dt>Average shortfall years</dt><dd id="st-short">{{ report.mean_shortfall_years|floatformat:2 }}</dd>
      <dt>Safe initial withdrawal ({{ report.target_success|pct }} success)</dt>
      <dd>{{ report.safe_withdrawal.initial_withdrawal|money:currency }}/yr <span class="muted">({{ report.safe_withdrawal.rate|pct:2 }} of median retirement portfolio)</span></dd>
      <dt>Earliest retirement age for {{ report.target_success|pct }}</dt>
      <dd>{% if report.earliest_retirement_age is None %}not reachable{% else %}{{ report.earliest_retirement_age }}{% endif %}</dd>
    </dl>
  </section>
</div>

<section class="card">
  <h2>What if?</h2>
  <form id="whatif" class="sliders" data-url="{% url 'api_simulate' %}" data-plan="{{ plan.pk }}">
    <label>Retirement age <output>{{ sliders.retirement_age }}</output>
      <input type="range" name="retirement_age" min="{{ plan.current_age }}" max="{{ plan.life_expectancy|add:'-1' }}" step="1" value="{{ sliders.retirement_age }}"></label>
    <label>Spending <output>{{ sliders.spend_multiplier|floatformat:2 }}x</output>
      <input type="range" name="spend_multiplier" min="0.5" max="1.5" step="0.05" value="{{ sliders.spend_multiplier }}"></label>
    <label>Contributions <output>{{ sliders.contribution_multiplier|floatformat:2 }}x</output>
      <input type="range" name="contribution_multiplier" min="0" max="2" step="0.1" value="{{ sliders.contribution_multiplier }}"></label>
    <label>Inflation <output>{{ sliders.inflation_pct|floatformat:1 }}%</output>
      <input type="range" name="inflation_pct" min="0" max="12" step="0.5" value="{{ sliders.inflation_pct }}"></label>
    <button type="button" id="reset" class="btn">Reset</button>
  </form>
  <p class="muted small" id="whatif-status">Sliders re-run the full simulation on the server.</p>
  <h2>Portfolio value by age (real terms)</h2>
  <div id="fan">{{ fan|safe }}</div>
  <p class="legend"><span class="sw outer"></span>5th-95th percentile <span class="sw inner"></span>25th-75th <span class="sw med"></span>median</p>
</section>

<div class="two-col">
  <section class="card">
    <h2>Success by retirement age and spending</h2>
    <table class="data heat">
      <thead><tr><th>Retire at</th>{% for m in multipliers %}<th>{{ m|floatformat:1 }}x spend</th>{% endfor %}</tr></thead>
      <tbody>
      {% for row in report.sensitivity.rows %}
        <tr><th>{{ row.age }}</th>{% for v in row.success %}<td class="{{ v|heat }}">{{ v|pct }}</td>{% endfor %}</tr>
      {% endfor %}
      </tbody>
    </table>
  </section>
  <section class="card">
    <h2>Sequence-of-returns risk</h2>
    {% if report.sequence_risk %}
    <p class="muted small">Success grouped by the annualised portfolio return of the first retirement decade.</p>
    <table class="data">
      <thead><tr><th>Quintile</th><th>First-decade return</th><th>Success</th></tr></thead>
      <tbody>
      {% for q in report.sequence_risk %}
        <tr><td>{{ q.quintile }}{% if q.quintile == 1 %} (worst){% elif q.quintile == 5 %} (best){% endif %}</td>
        <td>{{ q.return_low|pct:1 }} to {{ q.return_high|pct:1 }}</td><td class="{{ q.success|heat }}">{{ q.success|pct:1 }}</td></tr>
      {% endfor %}
      </tbody>
    </table>
    {% else %}<p class="muted">Not available for this plan.</p>{% endif %}
  </section>
</div>

{% if spend_row %}
<section class="card">
  <h2>Retirement spending distribution</h2>
  <p class="muted small">Portfolio withdrawals plus other income, real terms, before goals.</p>
  <table class="data">
    <thead><tr><th></th><th>5th pct</th><th>Median</th><th>95th pct</th></tr></thead>
    <tbody>
      <tr><th>At age {{ spend_row.ages.0 }}</th><td>{{ spend_row.first.p5|money:currency }}</td><td>{{ spend_row.first.p50|money:currency }}</td><td>{{ spend_row.first.p95|money:currency }}</td></tr>
      <tr><th>At age {{ spend_row.ages.1 }}</th><td>{{ spend_row.last.p5|money:currency }}</td><td>{{ spend_row.last.p50|money:currency }}</td><td>{{ spend_row.last.p95|money:currency }}</td></tr>
    </tbody>
  </table>
</section>
{% endif %}
{% endblock %}
{% block scripts %}<script type="module" src="{% static 'planner/whatif.js' %}"></script>{% endblock %}