{% extends "base.html" %}

{% block content %}

<div class="kpi-grid">
  <div class="kpi"><div class="label">候选股票</div><div class="value">{{ candidate_count }}</div><div class="note">截至 asof 已上市且未退市</div></div>
  <div class="kpi"><div class="label">入选股票</div><div class="value">{{ member_count }}</div><div class="note">通过全部滤网</div></div>
  <div class="kpi"><div class="label">通过率</div><div class="value">{{ pass_rate }}</div><div class="note">{{ member_count }} / {{ candidate_count }}</div></div>
  <div class="kpi"><div class="label">求值时点</div><div class="value" style="font-size:18px">{{ asof_date }}</div><div class="note">Point-in-Time</div></div>
</div>

{% if warnings %}
<div class="callout warn">
  <strong>注意</strong>
  <ul style="margin:4px 0 0 18px">
    {% for w in warnings %}<li>{{ w }}</li>{% endfor %}
  </ul>
</div>
{% endif %}

<div class="card">
  <h2>滤网淘汰过程</h2>
  <div id="chart-funnel" class="chart short"></div>
  <div class="table-scroll">
  <table class="data">
    <thead>
      <tr><th>顺序</th><th>滤网</th><th>进入</th><th>淘汰</th><th>存活</th><th>淘汰率</th><th style="text-align:left">说明</th></tr>
    </thead>
    <tbody>
      {% for s in stages %}
      <tr>
        <td class="num">{{ loop.index }}</td>
        <td style="text-align:left" class="mono">{{ s.name }}</td>
        <td class="num">{{ s.incoming }}</td>
        <td class="num">{{ s.removed }}</td>
        <td class="num">{{ s.survived }}</td>
        <td class="num">{{ s.rate }}</td>
        <td style="text-align:left" class="small muted">{{ s.desc }}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  </div>
</div>

<div class="card">
  <h2>入选股票（按股息率降序）</h2>
  <div class="table-scroll">
  <table class="data">
    <thead>
      <tr>
        <th>代码</th><th style="text-align:left">名称</th><th style="text-align:left">行业</th>
        <th>股息率</th><th>PE(TTM)</th><th>PB</th><th>总市值</th>
        <th>连续分红</th><th>ROE(年均)</th><th>负债率</th><th>支付率</th>
      </tr>
    </thead>
    <tbody>
      {% for m in members %}
      <tr>
        <td class="mono">{{ m.symbol }}</td>
        <td style="text-align:left">{{ m.name }}</td>
        <td style="text-align:left" class="small">{{ m.industry }}</td>
        <td class="num">{{ m.dividend_yield }}</td>
        <td class="num">{{ m.pe_ttm }}</td>
        <td class="num">{{ m.pb }}</td>
        <td class="num">{{ m.total_mv }}</td>
        <td class="num">{{ m.continuity }}</td>
        <td class="num">{{ m.roe }}</td>
        <td class="num">{{ m.debt_ratio }}</td>
        <td class="num">{{ m.payout }}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  </div>
</div>

{% if industry_rows %}
<div class="chart-grid">
  <div class="card">
    <h2>入选股票行业分布</h2>
    <div id="chart-industry" class="chart"></div>
  </div>
  <div class="card">
    <h2>股息率分布（入选 vs 候选）</h2>
    <div id="chart-yield" class="chart"></div>
  </div>
</div>
<div class="card">
  <h2>行业集中度明细</h2>
  <div class="callout">
    单行业权重上限由策略的 <code>position.sector_max_position</code> 控制；
    此处仅呈现筛选结果的行业分布，用于事前判断集中度风险。
  </div>
  <div class="table-scroll">
  <table class="data">
    <thead><tr><th style="text-align:left">行业</th><th>入选数</th><th>占入选比例</th><th>候选数</th><th>入选率</th></tr></thead>
    <tbody>
      {% for i in industry_rows %}
      <tr>
        <td style="text-align:left">{{ i.industry }}</td>
        <td class="num">{{ i.selected }}</td>
        <td class="num">{{ i.share }}</td>
        <td class="num">{{ i.candidates }}</td>
        <td class="num">{{ i.hit_rate }}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  </div>
</div>
{% endif %}

<div class="card">
  <h2>被淘汰股票与原因（可回答「为什么没选上」）</h2>
  <div class="table-scroll">
  <table class="data">
    <thead>
      <tr><th>代码</th><th style="text-align:left">名称</th><th style="text-align:left">行业</th>
      <th style="text-align:left">首个未通过滤网</th><th style="text-align:left">原因</th></tr>
    </thead>
    <tbody>
      {% for r in rejected %}
      <tr>
        <td class="mono">{{ r.symbol }}</td>
        <td style="text-align:left">{{ r.name }}</td>
        <td style="text-align:left" class="small">{{ r.industry }}</td>
        <td style="text-align:left"><span class="badge info">{{ r.fail_stage }}</span></td>
        <td style="text-align:left" class="small">{{ r.fail_reason }}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  </div>
</div>

<div class="card">
  <h2>生效的筛选配置</h2>
  <pre class="mono small" style="white-space:pre-wrap;max-height:520px;overflow:auto">{{ config_json }}</pre>
</div>

{% endblock %}

{% block scripts %}
<script>
(function () {
  if (typeof echarts === 'undefined') return;
  var C = {{ chart_colors | json }};

  var funnel = document.getElementById('chart-funnel');
  if (funnel) {
    var f = {{ funnel | json }};
    var ch = echarts.init(funnel);
    ch.setOption({
      color: C,
      grid: { left: 90, right: 40, top: 20, bottom: 30 },
      tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
      xAxis: { type: 'value', axisLabel: { color: '#64748B' },
               splitLine: { lineStyle: { color: '#E9EEF6' } } },
      yAxis: { type: 'category', data: f.map(function (d) { return d.name; }),
               axisLabel: { color: '#64748B' } },
      series: [{
        type: 'bar', data: f.map(function (d) { return d.value; }),
        itemStyle: { color: '#1E40AF' }, barMaxWidth: 30,
        label: { show: true, position: 'right', color: '#0F172A', fontFamily: 'monospace' }
      }]
    });
    window.addEventListener('resize', function () { ch.resize(); });
  }

  var ind = document.getElementById('chart-industry');
  if (ind) {
    var d = {{ industry_chart | json }};
    var c2 = echarts.init(ind);
    c2.setOption({
      color: C,
      tooltip: { trigger: 'item' },
      series: [{
        type: 'pie', radius: ['38%', '68%'], center: ['50%', '52%'],
        data: d, label: { color: '#0F172A', fontSize: 11 },
        itemStyle: { borderColor: '#fff', borderWidth: 1 }
      }]
    });
    window.addEventListener('resize', function () { c2.resize(); });
  }

  var yl = document.getElementById('chart-yield');
  if (yl) {
    var y = {{ yield_hist | json }};
    var c3 = echarts.init(yl);
    c3.setOption({
      color: C,
      grid: { left: 60, right: 24, top: 36, bottom: 40 },
      tooltip: { trigger: 'axis' },
      legend: { data: y.series.map(function (s) { return s.name; }), top: 0,
                textStyle: { color: '#64748B' } },
      xAxis: { type: 'category', data: y.buckets, name: '股息率',
               axisLabel: { color: '#64748B' } },
      yAxis: { type: 'value', name: '股票数', axisLabel: { color: '#64748B' },
               splitLine: { lineStyle: { color: '#E9EEF6' } } },
      series: y.series.map(function (s, i) {
        return { name: s.name, type: 'bar', data: s.data,
                 itemStyle: { color: C[i % C.length] }, barMaxWidth: 22 };
      })
    });
    window.addEventListener('resize', function () { c3.resize(); });
  }
})();
</script>
{% endblock %}