{% extends "base.html" %}
{% block content %}
<div class="card shadow-sm">
  <div class="card-body">
    <div class="d-flex justify-content-between align-items-center mb-3">
      <div>
        <h5 class="mb-0">Hasil Screening</h5>
        <small class="text-secondary">Tanggal (Asia/Jakarta): {{ today }}</small>
      </div>
      <span class="badge rounded-pill text-bg-primary">{{ row_count }} baris</span>
    </div>

    <div class="table-responsive">
      <table id="grid" class="table table-sm table-striped table-hover align-middle" style="width:100%">
        <thead>
          <tr class='text-center bg-default'>
            <th>Ticker</th>
            <th>Last Price</th>
            <th>Score (1–10)</th>
            <th>RSI(14)</th>
            <th>Arah (Siklus)</th>
            <th>AVG Cycle Days</th>
            <th>Hari sejak Pivot</th>
            <th>Progress</th>
            <th>30D</th> <!-- kolom baru: sparkline 7 hari -->
            <th>7D</th> <!-- kolom baru: sparkline 30 hari -->
          </tr>
        </thead>
        <tbody>
          {% for r in table_data %}
          <tr>
            <td><code>{{ r.get('ticker') }}</code></td>
            <td>{{ "{:,.0f}".format(r.get('last_price', 0) or 0) }}</td>
            <td>
              <span class="badge
                {% if (r.get('score_1_10_int') or 0) <= 2 %}
                  text-bg-success
                {% elif (r.get('score_1_10_int') or 0) >= 9 %}
                  text-bg-danger
                {% else %}
                  text-bg-warning
                {% endif %}
              ">{{ r.get('score_1_10_int', '-') }}</span>
            </td>
            <td>
              {% set rsi = r.get('rsi_14') %}
              <span class="badge
                {% if rsi is none or rsi != rsi %} {# None atau NaN #}
                  text-bg-secondary
                {% elif rsi < 50 %}
                  text-bg-warning
                {% elif rsi < 70 %}
                  text-bg-success
                {% else %}
                  text-bg-danger
                {% endif %}
              ">{{ rsi if rsi is not none else '-' }}</span>
            </td>
            <td>
              {% set phase = r.get('cycle_phase') %}
              {% if phase == 'UP' %}
                <span class="badge text-bg-success">UP</span>
              {% elif phase == 'DOWN' %}
                <span class="badge text-bg-danger">DOWN</span>
              {% else %}
                <span class="badge text-bg-secondary">N/A</span>
              {% endif %}
            </td>
            <td>
              {{r.get('avg_cycle_days')}}
            </td>
            
            <td>
              {{ r.get('days_since_pivot') if r.get('days_since_pivot') is not none else '-' }}
            </td>
            <td>
              {% set prog = r.get('cycle_progress_0_1') %}
              {% if prog is none or prog != prog %} {# NaN check: prog != prog #}
                <span class="badge text-bg-secondary">-</span>
              {% else %}
                {% set pct = (prog * 100) | round(0, 'floor') %}
                <span class="badge
                  {% if prog <= 0.33 %}
                    text-bg-success
                  {% elif prog <= 0.66 %}
                    text-bg-warning
                  {% else %}
                    text-bg-danger
                  {% endif %}
                ">{{ pct|int }}%</span>
              {% endif %}
            </td>
            <!-- sel baru: sparkline 30 hari -->
            <td>
              {% set spark = r.get('spark_30d') %}
              {% if spark %}
                <img src="{{ spark }}" alt="30D {{ r.get('ticker') }}" width="280" height="36" loading="lazy" style="display:block"/>
              {% else %}
                <span class="text-secondary">-</span>
              {% endif %}
            </td>
            <!-- sel baru: sparkline 7 hari -->
            <td>
              {% set spark = r.get('spark_7d') %}
              {% if spark %}
                <img src="{{ spark }}" alt="7D {{ r.get('ticker') }}" width="140" height="36" loading="lazy" style="display:block"/>
              {% else %}
                <span class="text-secondary">-</span>
              {% endif %}
            </td>
            
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>

    <div class="text-secondary mt-3">
      <span class="badge text-bg-success">Buy</span>
      <span class="badge text-bg-danger">Sell</span>
      <span class="badge text-bg-warning">Hold</span>
      <span class="ms-2">
        • Interpretasi RSI:
        <span class="badge text-bg-success">&lt;30</span> oversold,
        <span class="badge text-bg-danger">&gt;70</span> overbought
      </span>
      <span class="ms-2">
        • Warna Progress:
        <span class="badge text-bg-success">0–33%</span>,
        <span class="badge text-bg-warning">34–66%</span>,
        <span class="badge text-bg-danger">67–100%</span>
      </span>
    </div>

    {% if not table_data %}
      <div class="text-secondary mt-3">
        Tidak ada hasil yang memenuhi filter saat ini. Coba klik <a href="{{ url_for('refresh') }}">Refresh</a> atau ubah parameter filter di kode.
      </div>
    {% endif %}
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
  document.addEventListener("DOMContentLoaded", function() {
    const table = new DataTable('#grid', {
      responsive: true,
      pageLength: 25,
      lengthMenu: [10, 25, 50, 100],
      order: [[2, 'desc']] // default sort: Score (kolom ke-3)
    });
  });
</script>
{% endblock %}