{% extends "base.html" %}
{% block title %}Initial Capex Planner · CalMiner{% endblock %}

{% block content %}
  <nav class="breadcrumb">
    <a href="{{ url_for('projects.project_list_page') }}">Projects</a>
    {% if project %}
      <a href="{{ url_for('projects.view_project', project_id=project.id) }}">{{ project.name }}</a>
    {% endif %}
    {% if scenario %}
      <a href="{{ url_for('scenarios.view_scenario', scenario_id=scenario.id) }}">{{ scenario.name }}</a>
    {% endif %}
  <span aria-current="page">Initial Capex Planner</span>
  </nav>

  <header class="page-header">
    <div>
      <h1>Initial Capex Planner</h1>
      <p class="text-muted">Capture upfront capital requirements and review categorized totals.</p>
    </div>
    <div class="header-actions">
      {% if cancel_url %}
        <a class="btn" href="{{ cancel_url }}">Cancel</a>
      {% endif %}
      <button class="btn primary" type="submit" form="capex-form">Save &amp; Calculate</button>
    </div>
  </header>

  {% if errors %}
    <div class="alert alert-error">
      <h2 class="sr-only">Submission errors</h2>
      <ul>
        {% for message in errors %}
          <li>{{ message }}</li>
        {% endfor %}
      </ul>
    </div>
  {% endif %}

  {% if notices %}
    <div class="alert alert-info">
      <ul>
        {% for message in notices %}
          <li>{{ message }}</li>
        {% endfor %}
      </ul>
    </div>
  {% endif %}

  <form id="capex-form" class="form scenario-form" method="post" action="{{ form_action }}">
  <input type="hidden" name="csrf_token" value="{{ csrf_token or '' }}" />
  <input type="hidden" name="options[persist]" value="{{ '1' if options is defined and options and options.persist else '' }}" />

    <div class="layout-two-column stackable">
      <section class="panel">
        <header class="section-header">
          <h2>Capex Components</h2>
          <p class="section-subtitle">Break down initial capital items with category, amount, and timing.</p>
        </header>

        <div class="table-actions">
          <button class="btn secondary" type="button" data-action="add-component">Add Component</button>
        </div>

        {% if component_errors is defined and component_errors %}
          <div class="alert alert-error slim" role="alert" aria-live="polite">
            <h3 class="sr-only">Component issues</h3>
            <ul>
              {% for message in component_errors %}
                <li>{{ message }}</li>
              {% endfor %}
            </ul>
          </div>
        {% endif %}

        {% if component_notices is defined and component_notices %}
          <div class="alert alert-info slim" role="status" aria-live="polite">
            <ul>
              {% for message in component_notices %}
                <li>{{ message }}</li>
              {% endfor %}
            </ul>
          </div>
        {% endif %}

        <div class="table-responsive horizontal-scroll">
          <table class="input-table">
            <thead>
              <tr>
                <th scope="col">Category</th>
                <th scope="col">Component</th>
                <th scope="col">Amount</th>
                <th scope="col">Currency</th>
                <th scope="col">Spend Year</th>
                <th scope="col">Notes</th>
                <th class="sr-only" scope="col">Actions</th>
              </tr>
            </thead>
            <tbody>
              {% set component_entries = (components if components is defined and components else [{}]) %}
              {% for component in component_entries %}
                <tr data-row-index="{{ loop.index0 }}">
                  <td>
                    <input type="hidden" name="components[{{ loop.index0 }}][id]" value="{{ component.id or '' }}" />
                    <select name="components[{{ loop.index0 }}][category]">
                      {% for option in category_options %}
                        <option value="{{ option.value }}" {% if component.category == option.value %}selected{% endif %}>{{ option.label }}</option>
                      {% endfor %}
                    </select>
                  </td>
                  <td>
                    <input type="text" name="components[{{ loop.index0 }}][name]" value="{{ component.name or '' }}" />
                  </td>
                  <td>
                    <input type="number" min="0" step="0.01" name="components[{{ loop.index0 }}][amount]" value="{{ component.amount or '' }}" />
                  </td>
                  <td>
                    <input type="text" maxlength="3" name="components[{{ loop.index0 }}][currency]" value="{{ component.currency or currency_code or (scenario.currency if scenario else '') or (project.currency if project else '') }}" />
                  </td>
                  <td>
                    <input type="number" min="0" step="1" name="components[{{ loop.index0 }}][spend_year]" value="{{ component.spend_year or '' }}" />
                  </td>
                  <td>
                    <input type="text" name="components[{{ loop.index0 }}][notes]" value="{{ component.notes or '' }}" />
                  </td>
                  <td class="row-actions">
                    <button class="btn link" type="button" data-action="remove-component">Remove</button>
                  </td>
                </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>

        <p class="muted">Add rows for each capital item. Amounts should reflect pre-contingency values.</p>
      </section>

      <aside class="panel">
        <header class="section-header">
          <h2>Global Parameters</h2>
          <p class="section-subtitle">Configure defaults applied across components.</p>
        </header>

        <div class="form-grid">
          <div class="form-group">
            <label for="capex_currency_code">Default Currency</label>
            <input id="capex_currency_code" name="parameters[currency_code]" type="text" maxlength="3" value="{{ (parameters.currency_code if parameters is defined and parameters else None) or (currency_code if currency_code is defined else None) or (scenario.currency if scenario else None) or (project.currency if project else '') }}" />
          </div>
          <div class="form-group">
            <label for="contingency_pct">Contingency (%)</label>
            <input id="contingency_pct" name="parameters[contingency_pct]" type="number" min="0" max="100" step="0.01" value="{{ (parameters.contingency_pct if parameters is defined and parameters else '') }}" />
            <p class="field-help">Applied across component totals.</p>
          </div>
          <div class="form-group">
            <label for="discount_rate">Discount Rate (%)</label>
            <input id="discount_rate" name="parameters[discount_rate_pct]" type="number" min="0" max="100" step="0.01" value="{{ (parameters.discount_rate_pct if parameters is defined and parameters else None) or (scenario.discount_rate if scenario else '') }}" />
          </div>
          <div class="form-group">
            <label for="evaluation_horizon_years">Evaluation Horizon (years)</label>
            <input id="evaluation_horizon_years" name="parameters[evaluation_horizon_years]" type="number" min="1" step="1" value="{{ (parameters.evaluation_horizon_years if parameters is defined and parameters else None) or (default_horizon if default_horizon is defined else '') }}" />
          </div>
        </div>

        <div class="panel">
          <h3>Assumptions</h3>
          <dl class="definition-list">
            <div>
              <dt>Categories Configured</dt>
              <dd>{{ category_options | length }}</dd>
            </div>
            <div>
              <dt>Last Updated</dt>
              <dd>{{ last_updated_at or '—' }}</dd>
            </div>
          </dl>
          <p class="muted">Defaults reflect scenario preferences. Adjust before calculating.</p>
        </div>
      </aside>
    </div>
  </form>

  <section class="report-section">
    <header class="section-header">
      <h2>Capex Summary</h2>
      <p class="section-subtitle">Calculated totals and categorized breakdowns.</p>
    </header>

    {% if result %}
      <div class="report-grid">
        <article class="report-card">
          <h3>Total Initial Capex</h3>
          <p class="metric">
            <strong>{{ result.totals.overall | currency_display(result.currency) }}</strong>
          </p>
        </article>
        <article class="report-card">
          <h3>Contingency Applied</h3>
          <p class="metric">
            <strong>{{ result.totals.contingency_amount | currency_display(result.currency) }}</strong>
          </p>
        </article>
        <article class="report-card">
          <h3>Grand Total</h3>
          <p class="metric">
            <strong>{{ result.totals.with_contingency | currency_display(result.currency) }}</strong>
          </p>
        </article>
      </div>

      {% if result.totals.by_category %}
        <table class="metrics-table">
          <thead>
            <tr>
              <th scope="col">Category</th>
              <th scope="col">Amount</th>
              <th scope="col">Share</th>
            </tr>
          </thead>
          <tbody>
            {% for row in result.totals.by_category %}
              <tr>
                <th scope="row">{{ row.category }}</th>
                <td>{{ row.amount | currency_display(result.currency) }}</td>
                <td>{{ row.share | percentage_display }}</td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      {% endif %}

      {% if result.timeline %}
        <table class="metrics-table">
          <thead>
            <tr>
              <th scope="col">Year</th>
              <th scope="col">Spend</th>
              <th scope="col">Cumulative</th>
            </tr>
          </thead>
          <tbody>
            {% for entry in result.timeline %}
              <tr>
                <th scope="row">{{ entry.year }}</th>
                <td>{{ entry.spend | currency_display(result.currency) }}</td>
                <td>{{ entry.cumulative | currency_display(result.currency) }}</td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      {% endif %}
    {% else %}
  <p class="muted">Provide component details and calculate to see initial capex totals.</p>
    {% endif %}
  </section>

  <section class="report-section">
    <header class="section-header">
  <h2>Visualizations</h2>
      <p class="section-subtitle">Charts render after calculations complete.</p>
    </header>
    <div id="capex-category-chart" class="chart-container"></div>
    <div id="capex-timeline-chart" class="chart-container"></div>
  </section>
{% endblock %}