{{define "content"}}
{{$d := .}}
{{$r := .Result}}

<div style="display:flex; align-items:baseline; justify-content:space-between; margin-bottom:24px; flex-wrap:wrap; gap:8px;">
  <h1>{{$d.T.Get "plan.title"}}</h1>
  <span class="text-muted">{{if $d.Email}}{{$d.Email}}{{end}}</span>
</div>

<!-- Inputs form -->
<div class="card animate-on-scroll" style="margin-bottom:20px;">
  <h2 style="margin-bottom:4px;">{{$d.T.Get "plan.scenario_title"}}</h2>
  <p style="font-size:13px; color:var(--text3); margin-bottom:16px;">
    {{$d.T.Get "plan.scenario_desc"}}
  </p>
  <form method="GET" action="/plan">
    <input type="hidden" name="run" value="1">

    <div class="grid" style="gap:14px; margin-bottom:16px;">

      <div>
        <label style="font-size:12px; color:var(--text3); display:block; margin-bottom:5px;">{{$d.T.Get "plan.label_current_asset"}}</label>
        <select name="property_id" style="width:100%; padding:8px 10px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg2); color:var(--text1); font-size:14px;">
          <option value="">{{$d.T.Get "plan.option_none_asset"}}</option>
          {{range $d.Properties}}
          <option value="{{.ID}}" {{if and $d.HasResult (eq $d.Form.PropertyID .ID)}}selected{{end}}>{{.Name}} (€{{cents .CurrentValueCents}})</option>
          {{end}}
        </select>
      </div>

      <div>
        <label style="font-size:12px; color:var(--text3); display:block; margin-bottom:5px;">{{$d.T.Get "plan.label_current_loan"}}</label>
        <select name="loan_id" style="width:100%; padding:8px 10px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg2); color:var(--text1); font-size:14px;">
          <option value="">{{$d.T.Get "plan.option_none_loan"}}</option>
          {{range $d.Loans}}
          <option value="{{.ID}}" {{if and $d.HasResult (eq $d.Form.LoanID .ID)}}selected{{end}}>{{.Name}} (€{{cents .BalanceCents}} left)</option>
          {{end}}
        </select>
      </div>

      <div>
        <label style="font-size:12px; color:var(--text3); display:block; margin-bottom:5px;">{{$d.T.Get "plan.label_dream_cost"}}</label>
        <input type="number" name="dream_cost" min="0" step="1000"
          value="{{if $d.HasResult}}{{div $d.Form.DreamCostCents 100}}{{end}}"
          placeholder="{{$d.T.Get "plan.placeholder_dream_cost"}}"
          style="width:100%; padding:8px 10px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg2); color:var(--text1); font-size:14px; box-sizing:border-box;">
      </div>

      <div>
        <label style="font-size:12px; color:var(--text3); display:block; margin-bottom:5px;">{{$d.T.Get "plan.label_down_pct"}}</label>
        <input type="number" name="down_pct" min="0" max="100" step="1"
          value="{{if $d.HasResult}}{{round $d.Form.DownPaymentPct}}{{else}}20{{end}}"
          style="width:100%; padding:8px 10px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg2); color:var(--text1); font-size:14px; box-sizing:border-box;">
      </div>

      <div>
        <label style="font-size:12px; color:var(--text3); display:block; margin-bottom:5px;">{{$d.T.Get "plan.label_loan_rate"}}</label>
        <input type="number" name="const_rate" min="0" max="30" step="0.1"
          value="{{if $d.HasResult}}{{$d.Form.ConstructionRatePct}}{{else}}4.0{{end}}"
          style="width:100%; padding:8px 10px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg2); color:var(--text1); font-size:14px; box-sizing:border-box;">
      </div>

      <div>
        <label style="font-size:12px; color:var(--text3); display:block; margin-bottom:5px;">{{$d.T.Get "plan.label_loan_term"}}</label>
        <input type="number" name="const_term" min="1" max="40" step="1"
          value="{{if $d.HasResult}}{{$d.Form.ConstructionTermYears}}{{else}}30{{end}}"
          placeholder="{{$d.T.Get "plan.placeholder_loan_term"}}"
          style="width:100%; padding:8px 10px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg2); color:var(--text1); font-size:14px; box-sizing:border-box;">
      </div>

      <div>
        <label style="font-size:12px; color:var(--text3); display:block; margin-bottom:5px;">{{$d.T.Get "plan.label_build_months"}}</label>
        <input type="number" name="build_months" min="1" max="60" step="1"
          value="{{if $d.HasResult}}{{$d.Form.BuildMonths}}{{else}}18{{end}}"
          style="width:100%; padding:8px 10px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg2); color:var(--text1); font-size:14px; box-sizing:border-box;">
      </div>

      <div>
        <label style="font-size:12px; color:var(--text3); display:block; margin-bottom:5px;">{{$d.T.Get "plan.label_monthly_savings"}}</label>
        <input type="number" name="monthly_savings" min="0" step="100"
          value="{{if $d.HasResult}}{{div $d.Form.MonthlySavingsCents 100}}{{end}}"
          placeholder="{{$d.T.Get "plan.placeholder_savings"}}"
          style="width:100%; padding:8px 10px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg2); color:var(--text1); font-size:14px; box-sizing:border-box;">
      </div>

      <div>
        <label style="font-size:12px; color:var(--text3); display:block; margin-bottom:5px;">{{$d.T.Get "plan.label_sale_price"}}</label>
        <input type="number" name="sale_price" min="0" step="1000"
          value="{{if $d.HasResult}}{{div $d.Form.ExpectedSalePriceCents 100}}{{end}}"
          placeholder="{{$d.T.Get "plan.placeholder_sale_price"}}"
          style="width:100%; padding:8px 10px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg2); color:var(--text1); font-size:14px; box-sizing:border-box;">
      </div>

    </div>

    <button type="submit" class="btn btn-primary" style="width:100%;">{{$d.T.Get "plan.btn_run"}}</button>
  </form>
</div>

{{if $d.HasResult}}

{{if $r.Warning}}
<div style="background:rgba(251,191,36,0.12); border:1px solid rgba(251,191,36,0.4); border-radius:var(--radius); padding:12px 16px; margin-bottom:16px; font-size:13px; color:var(--text2);">
  ⚠️ {{$r.Warning}}
</div>
{{end}}

<!-- Summary bar -->
<div class="grid" style="margin-bottom:20px;">
  <div class="card value-card animate-on-scroll">
    <h2>{{$d.T.Get "plan.result_total_timeline"}}</h2>
    <div class="value positive">{{$r.TotalYears}}y {{$r.TotalRemMonths}}m</div>
    <p style="font-size:12px; color:var(--text3); margin-top:6px;">{{$d.T.Get "plan.result_until_paid"}}</p>
  </div>
  <div class="card value-card animate-on-scroll">
    <h2>{{$d.T.Get "plan.result_final_monthly"}}</h2>
    <div class="value positive">€{{cents $r.Phase4MonthlyCents}}</div>
    <p style="font-size:12px; color:var(--text3); margin-top:6px;">{{$d.T.Get "plan.result_after_selling"}}</p>
  </div>
  <div class="card value-card animate-on-scroll">
    <h2>{{$d.T.Get "plan.result_total_interest"}}</h2>
    <div class="value" style="color:var(--red);">€{{cents $r.TotalInterestCents}}</div>
    <p style="font-size:12px; color:var(--text3); margin-top:6px;">{{$d.T.Get "plan.result_across_both"}}</p>
  </div>
  <div class="card value-card animate-on-scroll">
    <h2>{{$d.T.Get "plan.result_free_by"}}</h2>
    <div class="value positive" style="font-size:24px;">{{dateShort $r.FinalDate}}</div>
    <p style="font-size:12px; color:var(--text3); margin-top:6px;">{{$d.T.Get "plan.result_fully_paid"}}</p>
  </div>
</div>

<!-- Phase timeline -->
<div class="card animate-on-scroll" style="margin-bottom:20px;">
  <h2 style="margin-bottom:20px;">{{$d.T.Get "plan.roadmap_title"}}</h2>

  <div style="display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative;">

    <!-- connector bar -->
    <div style="position:absolute; top:20px; left:12.5%; right:12.5%; height:3px; background:var(--border); z-index:0; border-radius:2px;"></div>

    <!-- Phase 1 -->
    <div style="text-align:center; position:relative; padding:0 8px;">
      <div style="width:40px; height:40px; border-radius:50%; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-size:18px; margin:0 auto 12px; position:relative; z-index:1;">1</div>
      <div style="font-weight:600; font-size:13px; color:var(--text1); margin-bottom:6px;">{{$d.T.Get "plan.phase1_title"}}</div>
      {{if gt $r.Phase1Months 0}}
      <div style="font-size:22px; font-weight:500; color:var(--accent); margin-bottom:4px;">{{$r.Phase1Months}}mo</div>
      <div style="font-size:11px; color:var(--text3);">until {{dateShort $r.Phase1EndDate}}</div>
      <div style="margin-top:10px; font-size:12px; color:var(--text2); background:var(--bg3); border-radius:var(--radius-sm); padding:8px 10px; text-align:left;">
        <div>{{$d.T.Get "plan.phase1_target"}} <strong>€{{cents $r.DownPaymentCents}}</strong></div>
        <div>{{$d.T.Get "plan.phase1_already_have"}} <strong>€{{cents $r.AlreadyHaveCents}}</strong></div>
        <div>{{$d.T.Get "plan.phase1_still_need"}} <strong>€{{cents $r.StillNeededCents}}</strong></div>
        <div>{{$d.T.Get "plan.phase1_saving"}} <strong>€{{cents $r.Form.MonthlySavingsCents}}/mo</strong></div>
      </div>
      {{else}}
      <div style="font-size:16px; font-weight:600; color:var(--green); margin-bottom:4px;">{{$d.T.Get "plan.phase1_ready"}}</div>
      <div style="font-size:11px; color:var(--text3);">{{$d.T.Get "plan.phase1_equity_covers"}}</div>
      <div style="margin-top:10px; font-size:12px; color:var(--text2); background:var(--bg3); border-radius:var(--radius-sm); padding:8px 10px; text-align:left;">
        <div>{{$d.T.Get "plan.phase1_down_payment"}} <strong>€{{cents $r.DownPaymentCents}}</strong></div>
        <div>{{$d.T.Get "plan.phase1_your_equity"}} <strong style="color:var(--green);">€{{cents $r.AlreadyHaveCents}}</strong></div>
      </div>
      {{end}}
    </div>

    <!-- Phase 2 -->
    <div style="text-align:center; position:relative; padding:0 8px;">
      <div style="width:40px; height:40px; border-radius:50%; background:var(--orange, #f97316); color:#fff; display:flex; align-items:center; justify-content:center; font-size:18px; margin:0 auto 12px; position:relative; z-index:1;">2</div>
      <div style="font-weight:600; font-size:13px; color:var(--text1); margin-bottom:6px;">{{$d.T.Get "plan.phase2_title"}}</div>
      <div style="font-size:22px; font-weight:500; color:var(--orange, #f97316); margin-bottom:4px;">{{$r.Phase2Months}}mo</div>
      <div style="font-size:11px; color:var(--text3);">until {{dateShort $r.Phase2EndDate}}</div>
      <div style="margin-top:10px; font-size:12px; color:var(--text2); background:var(--bg3); border-radius:var(--radius-sm); padding:8px 10px; text-align:left;">
        <div>{{$d.T.Get "plan.phase2_new_loan"}} <strong>€{{cents $r.ConstructionLoanCents}}</strong></div>
        {{if $r.CurrentLoan}}
        <div>{{$d.T.Get "plan.phase2_existing_loan"}} <strong>€{{cents $r.CurrentMonthlyCents}}/mo</strong></div>
        {{end}}
        <div>{{$d.T.Get "plan.phase2_new_emi"}} <strong>€{{cents $r.ConstructionMonthly}}/mo</strong></div>
        <div style="border-top:1px solid var(--border); margin-top:6px; padding-top:6px;">{{$d.T.Get "plan.phase2_total_burden"}} <strong style="color:var(--orange, #f97316);">€{{cents $r.Phase2MonthlyCents}}/mo</strong></div>
      </div>
    </div>

    <!-- Phase 3 -->
    <div style="text-align:center; position:relative; padding:0 8px;">
      <div style="width:40px; height:40px; border-radius:50%; background:var(--teal, #14b8a6); color:#fff; display:flex; align-items:center; justify-content:center; font-size:18px; margin:0 auto 12px; position:relative; z-index:1;">3</div>
      <div style="font-weight:600; font-size:13px; color:var(--text1); margin-bottom:6px;">{{$d.T.Get "plan.phase3_title"}}</div>
      <div style="font-size:16px; font-weight:600; color:var(--teal, #14b8a6); margin-bottom:4px;">{{$d.T.Get "plan.phase3_one_time"}}</div>
      <div style="font-size:11px; color:var(--text3);">{{$d.T.Get "plan.phase3_after_acquisition"}}</div>
      <div style="margin-top:10px; font-size:12px; color:var(--text2); background:var(--bg3); border-radius:var(--radius-sm); padding:8px 10px; text-align:left;">
        <div>{{$d.T.Get "plan.phase3_sale_price"}} <strong>€{{cents $r.SalePriceCents}}</strong></div>
        <div>{{$d.T.Get "plan.phase3_pay_off"}} <strong style="color:var(--red);">-€{{cents $r.MortgagePayoffCents}}</strong></div>
        <div style="border-top:1px solid var(--border); margin-top:6px; padding-top:6px;">{{$d.T.Get "plan.phase3_net_proceeds"}} <strong style="color:var(--green);">€{{cents $r.NetProceedsCents}}</strong></div>
        <div>{{$d.T.Get "plan.phase3_applied"}}</div>
      </div>
    </div>

    <!-- Phase 4 -->
    <div style="text-align:center; position:relative; padding:0 8px;">
      <div style="width:40px; height:40px; border-radius:50%; background:var(--green); color:#fff; display:flex; align-items:center; justify-content:center; font-size:18px; margin:0 auto 12px; position:relative; z-index:1;">4</div>
      <div style="font-weight:600; font-size:13px; color:var(--text1); margin-bottom:6px;">{{$d.T.Get "plan.phase4_title"}}</div>
      {{if gt $r.Phase4Months 0}}
      <div style="font-size:22px; font-weight:500; color:var(--green); margin-bottom:4px;">{{$r.Phase4Months}}mo</div>
      <div style="font-size:11px; color:var(--text3);">paid off {{dateShort $r.Phase4EndDate}}</div>
      <div style="margin-top:10px; font-size:12px; color:var(--text2); background:var(--bg3); border-radius:var(--radius-sm); padding:8px 10px; text-align:left;">
        <div>{{$d.T.Get "plan.phase4_remaining_loan"}} <strong>€{{cents $r.RemainingBalanceCents}}</strong></div>
        <div>{{$d.T.Get "plan.phase4_monthly_payment"}} <strong style="color:var(--green);">€{{cents $r.Phase4MonthlyCents}}/mo</strong></div>
        <div style="font-size:11px; color:var(--text3); margin-top:4px;">{{$d.T.Get "plan.phase4_just_new_loan"}}</div>
      </div>
      {{else}}
      <div style="font-size:16px; font-weight:600; color:var(--green); margin-bottom:4px;">{{$d.T.Get "plan.phase4_fully_paid"}}</div>
      <div style="font-size:11px; color:var(--text3);">{{$d.T.Get "plan.phase4_sale_cleared"}}</div>
      <div style="margin-top:10px; font-size:12px; color:var(--text2); background:var(--bg3); border-radius:var(--radius-sm); padding:8px 10px; text-align:left;">
        <div style="color:var(--green); font-weight:600;">{{$d.T.Get "plan.phase4_no_remaining"}}</div>
        <div>{{$d.T.Get "plan.phase4_sale_covers"}}</div>
      </div>
      {{end}}
    </div>

  </div>
</div>

<!-- Monthly cost chart -->
<div class="card animate-on-scroll" style="margin-bottom:20px;">
  <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:16px;">
    <h2>{{$d.T.Get "plan.chart_title"}}</h2>
    <span style="font-size:11px; color:var(--text3);">{{$d.T.Get "plan.chart_subtitle"}}</span>
  </div>
  <canvas id="cost-chart" height="160"></canvas>
</div>

<script>
(function() {
  const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
  const style  = getComputedStyle(document.documentElement);
  const accent = style.getPropertyValue('--accent').trim() || '#6979f8';
  const green  = style.getPropertyValue('--green').trim()  || '#4ade80';
  const orange = '#f97316';

  const phase1Months = {{$r.Phase1Months}};
  const phase2Months = {{$r.Phase2Months}};
  const phase4Months = {{$r.Phase4Months}};
  const existingMonthly = {{$r.CurrentMonthlyCents}} / 100;
  const phase2Monthly   = {{$r.Phase2MonthlyCents}} / 100;
  const phase4Monthly   = {{$r.Phase4MonthlyCents}} / 100;

  const labels = [];
  const costs  = [];
  const colors = [];

  for (let i = 0; i < phase1Months; i++) {
    labels.push('Save ' + (i+1));
    costs.push(existingMonthly);
    colors.push(accent);
  }
  for (let i = 0; i < phase2Months; i++) {
    labels.push('Acquire ' + (i+1));
    costs.push(phase2Monthly);
    colors.push(orange);
  }
  for (let i = 0; i < phase4Months; i++) {
    labels.push('Goal ' + (i+1));
    costs.push(phase4Monthly);
    colors.push(green);
  }

  const maxLabels = 24;
  const step = Math.ceil(labels.length / maxLabels);
  const displayLabels = labels.map((l, i) => i % step === 0 ? l : '');

  new Chart(document.getElementById('cost-chart').getContext('2d'), {
    type: 'bar',
    data: {
      labels: displayLabels,
      datasets: [{
        data: costs,
        backgroundColor: colors,
        borderRadius: 3,
        borderSkipped: false,
      }]
    },
    options: {
      responsive: true,
      plugins: {
        legend: { display: false },
        tooltip: {
          callbacks: {
            title: (items) => labels[items[0].dataIndex],
            label: (c) => '€' + c.parsed.y.toLocaleString('pt-PT', {minimumFractionDigits:2}) + '/mo'
          }
        }
      },
      scales: {
        x: {
          grid: { display: false },
          ticks: { color: isDark ? '#5c6585' : '#9fa8c7', font: { size: 10 } }
        },
        y: {
          grid: { color: isDark ? 'rgba(255,255,255,0.04)' : 'rgba(0,0,0,0.05)' },
          ticks: {
            color: isDark ? '#5c6585' : '#9fa8c7',
            callback: v => '€' + (v/1000).toFixed(0) + 'k'
          }
        }
      }
    }
  });
})();
</script>

<!-- Key levers -->
<div class="card animate-on-scroll">
  <h2 style="margin-bottom:14px;">{{$d.T.Get "plan.levers_title"}}</h2>
  <div style="display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; font-size:13px; color:var(--text2);">
    <div style="background:var(--bg3); border-radius:var(--radius-sm); padding:12px 14px;">
      <div style="font-weight:600; color:var(--text1); margin-bottom:6px;">{{$d.T.Get "plan.lever1_title"}}</div>
      <div>{{$d.T.Get "plan.lever1_desc"}}</div>
    </div>
    <div style="background:var(--bg3); border-radius:var(--radius-sm); padding:12px 14px;">
      <div style="font-weight:600; color:var(--text1); margin-bottom:6px;">{{$d.T.Get "plan.lever2_title"}}</div>
      <div>{{$d.T.Get "plan.lever2_desc"}}</div>
    </div>
    <div style="background:var(--bg3); border-radius:var(--radius-sm); padding:12px 14px;">
      <div style="font-weight:600; color:var(--text1); margin-bottom:6px;">{{$d.T.Get "plan.lever3_title"}}</div>
      <div>{{$d.T.Get "plan.lever3_desc"}}</div>
    </div>
    <div style="background:var(--bg3); border-radius:var(--radius-sm); padding:12px 14px;">
      <div style="font-weight:600; color:var(--text1); margin-bottom:6px;">{{$d.T.Get "plan.lever4_title"}}</div>
      <div>{{$d.T.Get "plan.lever4_desc"}}</div>
    </div>
  </div>
</div>

{{else}}

<!-- Empty state -->
<div class="card empty-state animate-on-scroll">
  <div style="font-size:48px; margin-bottom:16px;">🎯</div>
  <h3>{{$d.T.Get "plan.empty_title"}}</h3>
  <p style="margin-bottom:8px; max-width:480px; margin-left:auto; margin-right:auto;">
    {{$d.T.Get "plan.empty_desc"}}
  </p>
  {{if not $d.Properties}}
  <p style="font-size:13px; color:var(--text3); margin-top:12px;">
    Tip: <a href="/property" style="color:var(--accent);">{{$d.T.Get "plan.scenario_desc"}}</a>
  </p>
  {{end}}
</div>

{{end}}

{{end}}