{% extends "base.html" %}
{% block content %}
<div class="page-header">
  <h1>Debt Payoff Strategy</h1>
  <a href="{{ url_for('debts_view') }}" class="btn btn-ghost">← Back to Debts</a>
</div>

<div class="card-wide" style="margin-bottom:1.5rem;">
  <h2>How much can you put toward debt each month?</h2>
  <p class="helper-text">Your current total minimums are <strong>${{ total_minimums | money }}</strong>. Enter your total monthly debt payment below — anything above the minimums gets applied strategically.</p>
  <form method="POST" style="display:flex;gap:1rem;align-items:flex-end;flex-wrap:wrap;margin-top:1rem;">
    <div class="form-group" style="margin:0;">
      <label>Total Monthly Payment</label>
      <input type="number" name="extra_monthly" step="0.01" min="{{ total_minimums }}"
        value="{{ total_monthly or total_minimums }}" placeholder="{{ total_minimums }}">
    </div>
    <button type="submit" class="btn btn-primary">Calculate</button>
  </form>
</div>

{% if av_months %}
<!-- Summary comparison -->
<div class="strategy-compare">
  <div class="strategy-card strategy-avalanche">
    <div class="strategy-label">Avalanche Method</div>
    <div class="strategy-subtitle">Highest interest rate first</div>
    <div class="strategy-stat">
      <span>Debt-free in</span>
      <strong>{{ av_months }} months</strong>
    </div>
    <div class="strategy-stat">
      <span>Total interest paid</span>
      <strong>${{ av_interest | money }}</strong>
    </div>
    <div class="strategy-badge">Saves the most money</div>
  </div>

  <div class="strategy-vs">VS</div>

  <div class="strategy-card strategy-snowball">
    <div class="strategy-label">Snowball Method</div>
    <div class="strategy-subtitle">Smallest balance first</div>
    <div class="strategy-stat">
      <span>Debt-free in</span>
      <strong>{{ sb_months }} months</strong>
    </div>
    <div class="strategy-stat">
      <span>Total interest paid</span>
      <strong>${{ sb_interest | money }}</strong>
    </div>
    <div class="strategy-badge">Faster wins, more motivation</div>
  </div>
</div>

{% if interest_saved > 0 or months_diff != 0 %}
<div class="strategy-insight">
  {% if interest_saved > 0 %}
  <span>The Avalanche method saves you <strong>${{ interest_saved | money }}</strong> in interest</span>
  {% endif %}
  {% if months_diff > 0 %}
  <span>The Snowball method takes <strong>{{ months_diff }} month{{ 's' if months_diff != 1 }}</strong> longer</span>
  {% elif months_diff < 0 %}
  <span>The Avalanche method takes <strong>{{ months_diff|abs }} month{{ 's' if months_diff|abs != 1 }}</strong> longer</span>
  {% endif %}
</div>
{% endif %}

<!-- Side by side payoff order -->
<div class="strategy-tables">
  <div class="strategy-table-wrap">
    <h3>Avalanche Payoff Order</h3>
    <table class="txn-table">
      <thead>
        <tr><th>#</th><th>Debt</th><th>Owner</th><th>Paid Off</th><th>Interest Paid</th></tr>
      </thead>
      <tbody>
        {% for d in avalanche | sort(attribute='paid_off_month') %}
        <tr>
          <td class="muted">{{ loop.index }}</td>
          <td>{{ d.name }}</td>
          <td><span class="owner-tag" style="background:{{ owner_colors.get(d.owner, '#ddd') }};">{{ d.owner }}</span></td>
          <td>{{ d.paid_off_month or '—' }}</td>
          <td class="amount">${{ d.total_interest | money }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>

  <div class="strategy-table-wrap">
    <h3>Snowball Payoff Order</h3>
    <table class="txn-table">
      <thead>
        <tr><th>#</th><th>Debt</th><th>Owner</th><th>Paid Off</th><th>Interest Paid</th></tr>
      </thead>
      <tbody>
        {% for d in snowball | sort(attribute='paid_off_month') %}
        <tr>
          <td class="muted">{{ loop.index }}</td>
          <td>{{ d.name }}</td>
          <td><span class="owner-tag" style="background:{{ owner_colors.get(d.owner, '#ddd') }};">{{ d.owner }}</span></td>
          <td>{{ d.paid_off_month or '—' }}</td>
          <td class="amount">${{ d.total_interest | money }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>

{% else %}
<div class="empty-state">
  <p>Add your debts and monthly payment amount above to see your payoff strategy.</p>
</div>
{% endif %}
{% endblock %}