{% extends "base.html" %}

{% block title %}今日概览 · 慢慢看{% endblock %}

{% block content %}
<section class="band" x-data="kanScanDesk(window.KAN_SCAN)" x-init="init()" x-cloak>
  <div class="band-title">
    <div>
      <strong>今天先看这三件事</strong>
      <div class="meta">先看关键变化和极端位置，需要时再展开全部数据。</div>
    </div>
    <div class="status-line">
      <template x-if="scan.stats.targets === 0">
        <button class="primary" type="button" @click="document.getElementById('watchlist-codes')?.focus()">先添加自选</button>
      </template>
      <template x-if="scan.stats.targets > 0">
        <button class="primary" type="button" @click="startFetch()" :disabled="fetching">
          <span x-text="fetching ? '更新中' : scan.freshness.action_label"></span>
        </button>
      </template>
    </div>
  </div>

  <div class="freshness-banner" :class="`freshness-${scan.freshness.status}`" role="status">
    <div>
      <strong x-text="scan.freshness.title">{{ scan.freshness.title }}</strong>
      <div class="meta" x-text="scan.freshness.detail">{{ scan.freshness.detail }}</div>
    </div>
    <span class="meta" aria-live="polite" x-text="fetchMessage"></span>
  </div>

  <div class="summary-grid daily-summary" aria-label="今日概览">
    <div class="summary-cell">
      <div class="field-label">180日接近低位</div>
      <div class="field-value"><span x-text="scan.overview.low_180_count">{{ scan.overview.low_180_count }}</span> 只</div>
      <div class="meta">位置不高于 10%</div>
    </div>
    <div class="summary-cell">
      <div class="field-label">180日接近高位</div>
      <div class="field-value"><span x-text="scan.overview.high_180_count">{{ scan.overview.high_180_count }}</span> 只</div>
      <div class="meta">位置不低于 90%</div>
    </div>
    <div class="summary-cell">
      <div class="field-label">关键位置变化</div>
      <div class="field-value"><span x-text="scan.overview.change_count">{{ scan.overview.change_count }}</span> 条</div>
      <div class="meta" x-text="scan.overview.comparison_date ? `对比 ${scan.overview.comparison_date}` : '暂无上一份数据'"></div>
    </div>
    <div class="summary-cell">
      <div class="field-label">本次已扫描</div>
      <div class="field-value"><span x-text="scan.overview.scanned_count">{{ scan.overview.scanned_count }}</span> 只</div>
      <div class="meta">自选与持仓合并去重</div>
    </div>
  </div>

  <div class="overview-grid">
    <section class="overview-section" aria-labelledby="changes-title">
      <h2 id="changes-title">和上一份数据相比</h2>
      <template x-if="!scan.overview.comparison_date">
        <p class="empty-inline">积累两份不同交易日的数据后，这里会显示进入或离开关键位置区的变化。</p>
      </template>
      <template x-if="scan.overview.comparison_date && scan.overview.changes.length === 0">
        <p class="empty-inline">没有股票进入或离开关键位置区。</p>
      </template>
      <ul class="overview-list" x-show="scan.overview.changes.length > 0">
        <template x-for="change in scan.overview.changes" :key="`${change.code}-${change.period}-${change.description}`">
          <li>
            <a :href="kanSessionUrl(`/stock/${change.code}`)"><strong x-text="change.name"></strong> <span class="code" x-text="change.code"></span></a>
            <span x-text="change.description"></span>
          </li>
        </template>
      </ul>
    </section>
    <section class="overview-section" aria-labelledby="low-title">
      <h2 id="low-title">180日接近低位</h2>
      <p class="empty-inline" x-show="scan.overview.low_180.length === 0">当前没有股票处于该区间。</p>
      <ul class="overview-list compact-list">
        <template x-for="row in scan.overview.low_180" :key="row.code">
          <li><a :href="kanSessionUrl(`/stock/${row.code}`)"><strong x-text="row.name"></strong> <span x-text="formatPct(row.position_180)"></span></a></li>
        </template>
      </ul>
    </section>
    <section class="overview-section" aria-labelledby="high-title">
      <h2 id="high-title">180日接近高位</h2>
      <p class="empty-inline" x-show="scan.overview.high_180.length === 0">当前没有股票处于该区间。</p>
      <ul class="overview-list compact-list">
        <template x-for="row in scan.overview.high_180" :key="row.code">
          <li><a :href="kanSessionUrl(`/stock/${row.code}`)"><strong x-text="row.name"></strong> <span x-text="formatPct(row.position_180)"></span></a></li>
        </template>
      </ul>
    </section>
  </div>

  <div class="form-row watchlist-entry">
    <label for="watchlist-codes"><strong>添加自选</strong></label>
    <input id="watchlist-codes" type="text" inputmode="numeric" x-model="addCodes" placeholder="输入 6 位代码，多个代码用空格分隔">
    <button type="button" @click="addWatchlist()" :disabled="!addCodes.trim()">添加</button>
    <span class="meta" role="status" aria-live="polite" x-show="watchlistMessage" x-text="watchlistMessage"></span>
  </div>

  <div class="form-row recent-stocks" x-show="recentStocks.length > 0">
    <span class="meta"><strong>最近浏览</strong></span>
    <template x-for="item in recentStocks" :key="item.code">
      <a class="pill recent-pill" :href="kanSessionUrl(`/stock/${item.code}`)" x-text="`${item.name} ${item.code}`"></a>
    </template>
  </div>

  <div class="index-strip">
    <template x-if="indexLoading">
      <span>指数数据读取中</span>
    </template>
    <template x-if="!indexLoading && !indexData.ok">
      <span>指数数据不可用</span>
    </template>
    <template x-if="!indexLoading && indexData.ok">
      <div class="status-line">
        <template x-for="row in indexData.rows" :key="row.code">
          <span class="index-item">
            <strong x-text="row.name"></strong>
            <span x-text="formatPrice(row.close)"></span>
            <template x-for="period in indexData.periods" :key="period">
              <span x-text="`${period}日 ${formatPct(indexPct(row, period))}`"></span>
            </template>
          </span>
        </template>
      </div>
    </template>
  </div>

  <div class="toolbar">
    <div>
      <strong>全部位置数据</strong>
      <span class="meta">默认展示 30/60/180 日三个关键周期</span>
    </div>
    <div class="tabs" role="tablist" aria-label="数据视图">
      <button id="scan-tab-table" type="button" role="tab" aria-controls="scan-panel-table" :aria-selected="activeTab === 'table'" :class="{active: activeTab === 'table'}" @click="setTab('table')">
        数据表
      </button>
      <button id="scan-tab-heatmap" type="button" role="tab" aria-controls="scan-panel-heatmap" :aria-selected="activeTab === 'heatmap'" :class="{active: activeTab === 'heatmap'}" @click="setTab('heatmap')">
        位置热力图
      </button>
    </div>
    <div class="controls">
      <select x-model="mode" aria-label="共振模式">
        <option value="low">低点</option>
        <option value="high">高点</option>
      </select>
      <label class="check">
        <input type="checkbox" x-model="resonanceOnly">
        只看共振
      </label>
      <select x-model="sortKey" aria-label="排序字段">
        <option value="resonance">共振数</option>
        {% for p in scan.periods %}
          <option value="p{{ p }}">{{ p }}日位置</option>
        {% endfor %}
      </select>
      <button type="button" @click="toggleSortDir()" :title="sortDir === 'desc' ? '当前降序，点击切换' : '当前升序，点击切换'">
        <span x-text="sortDir === 'desc' ? '↓ 降序' : '↑ 升序'"></span>
      </button>
    </div>
  </div>

  <template x-if="scan.rows.length === 0">
    <div class="empty empty-guide">
      <div class="empty-icon">📊</div>
      <strong>还没有数据</strong>
      <p>在上方输入框添加你关注的股票代码（如 600519），然后点击「更新数据」开始观察。</p>
      <p class="meta">提示：按 / 键可快速聚焦输入框</p>
    </div>
  </template>

  <div id="scan-panel-table" role="tabpanel" aria-labelledby="scan-tab-table" x-show="scan.rows.length > 0 && activeTab === 'table'" class="table-wrap">
    <table>
      <thead>
        <tr>
          <th>序号</th>
          <th>代码 / 名称</th>
          <th>现价</th>
          {% for p in scan.periods %}
            <th>{{ p }}日位置%</th>
          {% endfor %}
          <th>共振 ×N</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <template x-for="(row, index) in sortedRows" :key="row.code">
          <tr @click="openStock(row.code)">
            <td x-text="index + 1"></td>
            <td>
              <a class="stock-link" :href="kanSessionUrl(`/stock/${row.code}`)"><span x-text="row.code"></span> <span class="code" x-text="row.name"></span></a>
              <span class="tag" x-show="row.in_watchlist">自选</span>
              <span class="tag" x-show="row.in_holding">持仓</span>
            </td>
            <td x-text="formatPrice(row.price)"></td>
            {% for p in scan.periods %}
              <td :class="periodClass(row, {{ p }})" x-text="formatPct(periodPct(row, {{ p }}))"></td>
            {% endfor %}
            <td x-text="'×' + resonance(row)"></td>
            <td>
              <button
                type="button"
                x-show="row.in_watchlist"
                @click.stop="removeWatchlist(row.code)"
              >移除自选</button>
            </td>
          </tr>
        </template>
      </tbody>
    </table>
  </div>

  <div id="scan-panel-heatmap" role="tabpanel" aria-labelledby="scan-tab-heatmap" x-show="scan.rows.length > 0 && activeTab === 'heatmap'" x-effect="activeTab === 'heatmap' && renderHeatmap()">
    <div id="scan-heatmap" class="chart tall" role="img" aria-label="股票在 30、60、180 日价格区间中的位置热力图"></div>
    <div class="toolbar">
      <span class="meta">0=N日最低 · 100=N日最高</span>
      <div class="controls">
        <button type="button" @click="prevHeatmapPage()" :disabled="heatmapPage === 0">上一页</button>
        <span class="meta" x-text="heatmapPageText"></span>
        <button type="button" @click="nextHeatmapPage()" :disabled="heatmapPage >= heatmapPageCount - 1">下一页</button>
      </div>
    </div>
  </div>
</section>
{% endblock %}

{% block scripts %}
<script>
  window.KAN_SCAN = {{ scan|tojson }};
</script>
{% endblock %}