{% extends "base.html" %}

{% block content %}
<div class="container py-5">
  <div class="row align-items-center mb-5">
    <div class="col-lg-7">
      <h1 class="display-6 fw-bold">Investment dashboard</h1>
      <p class="text-muted fs-5">Monitor your wallet, active positions, and maturity outlook with clear performance insights.</p>
    </div>
    <div class="col-lg-5 text-lg-end mt-3 mt-lg-0">
      <a href="{% url 'core:investment_plans' %}" class="btn btn-primary btn-lg me-2">Explore plans</a>
      <a href="{% url 'core:wallet_deposit' %}" class="btn btn-outline-primary btn-lg">Fund wallet</a>
    </div>
  </div>

  <div class="row g-4 mb-4">
    <div class="col-md-4">
      <div class="card glass-card shadow-sm h-100 border-0">
        <div class="card-body">
          <div class="d-flex align-items-center justify-content-between mb-3">
            <div>
              <p class="text-uppercase text-secondary small mb-1">Total wallet balance</p>
              <h2 class="fw-bold mb-0">USD {{ wallet.balance|floatformat:2 }}</h2>
            </div>
            <div class="badge bg-primary-subtle text-primary rounded-pill py-2 px-3">Balance</div>
          </div>
          <p class="text-muted">Funds available to allocate toward new investments or request withdrawal.</p>
          <div class="d-grid gap-2 mt-4">
            <a href="{% url 'core:wallet_deposit' %}" class="btn btn-primary">Deposit funds</a>
            <a href="{% url 'core:withdrawal_request' %}" class="btn btn-outline-secondary">Request withdrawal</a>
          </div>
        </div>
      </div>
    </div>

    <div class="col-md-4">
      <div class="card glass-card shadow-sm h-100 border-0">
        <div class="card-body">
          <div class="d-flex align-items-center justify-content-between mb-3">
            <div>
              <p class="text-uppercase text-secondary small mb-1">Matured entitlement</p>
              <h3 class="fw-semibold mb-0">USD {{ total_entitled_after_maturity|floatformat:2 }}</h3>
            </div>
            <div class="text-end">
              <i class="fas fa-calendar-check fa-2x text-success"></i>
            </div>
          </div>
          <p class="text-muted mb-0">Amount available once your active investments reach maturity.</p>
        </div>
      </div>
    </div>

    <div class="col-md-4">
      <div class="card glass-card shadow-sm h-100 border-0">
        <div class="card-body">
          <div class="d-flex align-items-center justify-content-between mb-3">
            <div>
              <p class="text-uppercase text-secondary small mb-1">Next maturity date</p>
              {% if next_maturity %}
                <h3 class="fw-semibold mb-0">{{ next_maturity.ends_at|date:'M d, Y' }}</h3>
              {% else %}
                <h3 class="fw-semibold mb-0">No upcoming maturities</h3>
              {% endif %}
            </div>
            <div class="text-end">
              <i class="fas fa-hourglass-half fa-2x text-warning"></i>
            </div>
          </div>
          <p class="text-muted mb-0">Review the next scheduled payout date for your active investment positions.</p>
        </div>
      </div>
    </div>
  </div>

  <div class="row g-4 mb-5">
    <div class="col-md-6">
      <div class="card glass-card shadow-sm h-100 border-0">
        <div class="card-body">
          <div class="d-flex align-items-center justify-content-between mb-3">
            <div>
              <p class="text-uppercase text-secondary small mb-1">Total active ROI</p>
              <h3 class="fw-semibold mb-1">{{ active_roi_percent|floatformat:1 }}%</h3>
              <p class="small text-muted mb-0">Based on current active investments.</p>
            </div>
            <div class="text-end">
              <i class="fas fa-chart-line fa-2x text-primary"></i>
            </div>
          </div>
          <div class="progress progress-sm">
            <div class="progress-bar bg-primary" role="progressbar" style="width: {{ active_roi_percent|floatformat:0 }}%;" aria-valuenow="{{ active_roi_percent|floatformat:0 }}" aria-valuemin="0" aria-valuemax="100"></div>
          </div>
        </div>
      </div>
    </div>

    <div class="col-md-6">
      <div class="card glass-card shadow-sm h-100 border-0">
        <div class="card-body">
          <div class="d-flex align-items-center justify-content-between mb-3">
            <div>
              <p class="text-uppercase text-secondary small mb-1">Avg. time to maturity</p>
              <h3 class="fw-semibold mb-1">{{ avg_days_to_maturity }} days</h3>
              <p class="small text-muted mb-0">Remaining duration for your active investment portfolio.</p>
            </div>
            <div class="text-end">
              <i class="fas fa-clock fa-2x text-warning"></i>
            </div>
          </div>
          <div class="progress progress-sm">
            <div class="progress-bar bg-warning" role="progressbar" style="width: {{ avg_days_to_maturity|default:0 }}%;" aria-valuenow="{{ avg_days_to_maturity|default:0 }}" aria-valuemin="0" aria-valuemax="100"></div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="card glass-card shadow-sm border-0 mb-4">
    <div class="card-body">
      <div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center mb-4">
        <div>
          <h5 class="card-title mb-1">Active investments</h5>
          <p class="text-muted mb-0">Review open positions, projected returns, and maturity status.</p>
        </div>
        <div class="text-md-end">
          <span class="badge bg-secondary rounded-pill py-2 px-3">{{ active_investments|length }} positions</span>
        </div>
      </div>

      {% if active_investments %}
        <div class="table-responsive">
          <table class="table table-borderless align-middle mb-0">
            <thead class="text-secondary border-bottom">
              <tr>
                <th scope="col">Plan</th>
                <th scope="col">Amount</th>
                <th scope="col">Profit</th>
                <th scope="col">Maturity</th>
                <th scope="col">Max withdraw</th>
                <th scope="col">Status</th>
                <th scope="col"></th>
              </tr>
            </thead>
            <tbody>
              {% for investment in active_investments %}
                <tr class="border-bottom">
                  <td>
                    <div class="fw-semibold">{{ investment.plan.name }}</div>
                    <div class="small text-muted">Started {{ investment.started_at|date:'M d, Y' }}</div>
                  </td>
                  <td>USD {{ investment.amount|floatformat:2 }}</td>
                  <td>USD {{ investment.profit|floatformat:2 }}</td>
                  <td>{{ investment.ends_at|date:'M d, Y' }}</td>
                  <td class="fw-semibold">USD {{ investment.payout|floatformat:2 }}</td>
                  <td>
                    {% if investment.is_mature %}
                      <span class="badge bg-success rounded-pill">Mature</span>
                    {% else %}
                      <span class="badge bg-info rounded-pill">{{ investment.get_status_display }}</span>
                    {% endif %}
                  </td>
                  <td>
                    {% if investment.is_mature %}
                      <a class="btn btn-sm btn-outline-success" href="{% url 'core:claim_investment_payout' investment.pk %}">Claim</a>
                    {% endif %}
                  </td>
                </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      {% else %}
        <div class="alert alert-info mb-0">You do not have any active investments yet.</div>
      {% endif %}
    </div>
  </div>

  <div class="row g-4">
    <div class="col-xl-6">
      <div class="card glass-card shadow-sm border-0 h-100">
        <div class="card-body">
          <div class="d-flex align-items-center justify-content-between mb-3">
            <div>
              <h5 class="card-title mb-0">Referral bonuses</h5>
              <p class="text-muted mb-0">Track referral rewards from successful investor referrals.</p>
            </div>
            <i class="fas fa-hands-helping fa-lg text-primary"></i>
          </div>
          {% if referral_bonuses %}
            <ul class="list-group list-group-flush">
              {% for bonus in referral_bonuses %}
                <li class="list-group-item d-flex justify-content-between align-items-center bg-transparent border-top">
                  <div>
                    <div class="fw-semibold">{{ bonus.user.username }}</div>
                    <div class="small text-muted">{{ bonus.referred_user.username }} • {{ bonus.created_at|date:'M d, Y' }}</div>
                  </div>
                  <span class="badge bg-success rounded-pill">USD {{ bonus.bonus_cents|floatformat:2 }}</span>
                </li>
              {% endfor %}
            </ul>
          {% else %}
            <div class="alert alert-secondary mb-0">No referral bonuses have been earned yet.</div>
          {% endif %}
        </div>
      </div>
    </div>

    <div class="col-xl-6">
      <div class="card glass-card shadow-sm border-0 h-100">
        <div class="card-body">
          <div class="d-flex align-items-center justify-content-between mb-3">
            <div>
              <h5 class="card-title mb-0">Withdrawal requests</h5>
              <p class="text-muted mb-0">Recent withdrawal activity and request status.</p>
            </div>
            <i class="fas fa-money-check-dollar fa-lg text-warning"></i>
          </div>
          {% if withdrawal_requests %}
            <ul class="list-group list-group-flush">
              {% for request in withdrawal_requests %}
                <li class="list-group-item d-flex justify-content-between align-items-center bg-transparent border-top">
                  <div>
                    <div class="fw-semibold">{{ request.provider|upper }} withdrawal</div>
                    <div class="small text-muted">USD {{ request.amount|floatformat:2 }} • {{ request.created_at|date:'M d, Y' }}</div>
                  </div>
                  <span class="badge bg-secondary rounded-pill">{{ request.get_status_display }}</span>
                </li>
              {% endfor %}
            </ul>
          {% else %}
            <div class="alert alert-secondary mb-0">No withdrawal requests have been submitted.</div>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock content %}