{% extends "base.html" %}

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

{% block content %}
<section class="band" x-data="kanScanDesk(window.KAN_SCAN)" x-cloak>
  <!-- 新手引导浮层 -->
  <template x-if="showOnboarding">
    <div class="onboarding-overlay" @click.self="dismissOnboarding()">
      <div class="onboarding-card">
        <div class="onboarding-step" x-show="onboardStep === 1">
          <div class="onboarding-icon">🔍</div>
          <strong>第一步：添加你关注的股票</strong>
          <p>在下方输入框输入 6 位股票代码，如 600519（贵州茅台）、000858（五粮液）。</p>
          <p class="meta">也可以稍后用顶部搜索框查找。</p>
        </div>
        <div class="onboarding-step" x-show="onboardStep === 2">
          <div class="onboarding-icon">🔄</div>
          <strong>第二步：点击“更新数据”</strong>
          <p>添加股票后，点击“更新数据”按钮拉取最新行情。</p>
          <p class="meta">建议每天收盘后（15:30 之后）更新一次。</p>
        </div>
        <div class="onboarding-step" x-show="onboardStep === 3">
          <div class="onboarding-icon">📊</div>
          <strong>第三步：查看位置变化</strong>
          <p>更新完成后，这里会显示你的股票在 30/60/180 日价格区间中的位置。</p>
          <p class="meta">位置只描述坐标，不代表买卖信号。</p>
        </div>
        <div class="onboarding-actions">
          <button type="button" @click="dismissOnboarding()">跳过</button>
          <button type="button" class="primary" x-show="onboardStep < 3" @click="onboardStep++">下一步</button>
          <button type="button" class="primary" x-show="onboardStep === 3" @click="dismissOnboarding()">开始使用</button>
        </div>
        <div class="onboarding-dots">
          <span :class="{active: onboardStep === 1}"></span>
          <span :class="{active: onboardStep === 2}"></span>
          <span :class="{active: onboardStep === 3}"></span>
        </div>
      </div>
    </div>
  </template>

  <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>
    <div class="status-line">
      <span class="meta" x-show="scan.stats.fetched_at" x-text="`更新于 ${scan.stats.fetched_at}`"></span>
      <span class="meta" aria-live="polite" x-text="fetchMessage"></span>
    </div>
  </div>

  <!-- 更新进度条 -->
  <div class="fetch-progress" x-show="fetching" x-cloak>
    <div class="progress-bar">
      <div class="progress-fill" :style="`width: ${fetchProgress}%`"></div>
    </div>
    <div class="progress-info">
      <span x-text="fetchStage"></span>
      <span x-text="fetchProgress + '%'"></span>
    </div>
  </div>

  <div class="summary-grid daily-summary" aria-label="今日概览">
    <div class="summary-cell">
      <div class="field-label"><span class="term-tip">180日接近低位<span class="tip-icon">?</span><span class="tip-content">180日位置百分位不高于 10% 的股票数量。位置只描述价格坐标，不代表见底或买入信号。</span></span></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"><span class="term-tip">180日接近高位<span class="tip-icon">?</span><span class="tip-content">180日位置百分位不低于 90% 的股票数量。位置只描述价格坐标，不代表见顶或卖出信号。</span></span></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 class="change-up" x-show="scan.pool_summary && scan.pool_summary.limit_up > 0" x-text="`涨停${scan.pool_summary.limit_up}`"></span>
        <span class="change-down" x-show="scan.pool_summary && scan.pool_summary.limit_down > 0" x-text="` 跌停${scan.pool_summary.limit_down}`"></span>
        <span x-show="scan.pool_summary && scan.pool_summary.limit_up === 0 && scan.pool_summary.limit_down === 0">无涨跌停</span>
      </div>
      <div class="meta" x-show="scan.pool_summary && scan.pool_summary.up_streak_3 > 0" x-text="`连阳≥3天 ${scan.pool_summary.up_streak_3} 只`"></div>
      <div class="meta" x-show="!scan.pool_summary || scan.pool_summary.up_streak_3 === 0">自选与持仓合并去重</div>
    </div>
    <div class="summary-cell" x-show="scan.pool_trend">
      <div class="field-label">池内 180 日位置趋势</div>
      <template x-if="scan.pool_trend">
        <div>
          <div style="display:flex;align-items:flex-end;gap:2px;height:26px;margin:6px 0 2px;">
            <template x-for="d in scan.pool_trend.days" :key="d.date">
              <div :title="`${d.date} · 中位 ${d.median}% · 低位 ${d.low} / 高位 ${d.high} / ${d.count} 只`"
                   :style="`flex:1;height:${Math.max(8, d.median)}%;background:var(--accent);opacity:.7;border-radius:2px 2px 0 0;`"></div>
            </template>
          </div>
          <div class="meta" x-text="`${scan.pool_trend.trend_text} · ${scan.pool_trend.direction}`"></div>
        </div>
      </template>
    </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" x-show="watchlistGroups.length > 1">
    <span class="meta"><strong>分组筛选</strong></span>
    <div class="controls">
      <button type="button" :class="{active: activeGroup === ''}" @click="activeGroup = ''">全部</button>
      <template x-for="group in watchlistGroups" :key="group.name">
        <button type="button" :class="{active: activeGroup === group.name}" @click="activeGroup = group.name" x-text="`${group.name} (${group.count})`"></button>
      </template>
    </div>
  </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="positionDistribution">
      <div class="dist-bar-wrap">
        <span class="meta">180日位置分布</span>
        <div class="dist-bar">
          <span class="dist-seg dist-low" :style="`width:${positionDistribution.low/positionDistribution.total*100}%`" :title="`低位 ${positionDistribution.low} 只`"></span>
          <span class="dist-seg dist-mid" :style="`width:${positionDistribution.mid/positionDistribution.total*100}%`" :title="`中位 ${positionDistribution.mid} 只`"></span>
          <span class="dist-seg dist-high" :style="`width:${positionDistribution.high/positionDistribution.total*100}%`" :title="`高位 ${positionDistribution.high} 只`"></span>
        </div>
        <span class="meta" x-text="`低${positionDistribution.low} 中${positionDistribution.mid} 高${positionDistribution.high}`"></span>
        <template x-if="positionChangeSummary">
          <span class="meta pos-change-summary">
            <span class="change-up" x-text="`↑${positionChangeSummary.up}`"></span>
            <span class="change-down" x-text="` ↓${positionChangeSummary.down}`"></span>
          </span>
        </template>
      </div>
    </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="index-strip market-sentiment" x-show="marketData.ok">
    <div class="status-line">
      <span class="index-item">
        <strong>市场情绪</strong>
      </span>
      <span class="index-item" x-show="marketData.up_count !== null">
        <span class="change-up" x-text="`↑ ${marketData.up_count}`"></span>
        <span class="change-down" x-text="`↓ ${marketData.down_count}`"></span>
        <span class="meta" x-show="marketData.flat_count > 0" x-text="`平 ${marketData.flat_count}`"></span>
      </span>
      <span class="index-item" x-show="marketData.limit_up !== null">
        <span class="change-up" x-text="`涨停 ${marketData.limit_up}`"></span>
        <span class="change-down" x-text="`跌停 ${marketData.limit_down}`"></span>
      </span>
      <span class="index-item" x-show="marketData.median_position_180 !== null">
        <span>180日中位</span>
        <strong x-text="formatPct(marketData.median_position_180)"></strong>
      </span>
    </div>
  </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">
      <button type="button" @click="exportCsv()" title="导出当前数据为 CSV 文件">导出 CSV</button>
      <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 }})">
                <span x-text="formatPct(periodPct(row, {{ p }}))"></span>
                <template x-if="{{ p }} === 180 && row.p180_change !== null && row.p180_change !== undefined">
                  <span class="pos-change" :class="row.p180_change > 0 ? 'change-up' : row.p180_change < 0 ? 'change-down' : ''" x-text="row.p180_change > 0 ? `↑${row.p180_change}` : row.p180_change < 0 ? `↓${Math.abs(row.p180_change)}` : ''"></span>
                </template>
                <span class="cell-bar" x-show="periodPct(row, {{ p }}) !== null">
                  <span class="cell-bar-fill" :class="periodPct(row, {{ p }}) <= 20 ? 'bar-low' : periodPct(row, {{ p }}) >= 80 ? 'bar-high' : 'bar-mid'" :style="`width:${periodPct(row, {{ p }})}%`"></span>
                </span>
              </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 class="scan-tile-list" x-show="scan.rows.length > 0 && activeTab === 'table'">
    <template x-for="row in sortedRows" :key="'tile-' + row.code">
      <article class="scan-tile" @click="openStock(row.code)">
        <div class="scan-tile-header">
          <a class="stock-link" :href="kanSessionUrl(`/stock/${row.code}`)"><strong x-text="row.name"></strong> <span class="code" x-text="row.code"></span></a>
          <div class="controls">
            <span class="tag" x-show="row.in_watchlist">自选</span>
            <span class="tag" x-show="row.in_holding">持仓</span>
            <strong x-text="formatPrice(row.price)"></strong>
          </div>
        </div>
        <div class="scan-tile-positions">
          {% for p in scan.periods %}
          <span><span class="meta">{{ p }}日</span> <strong :class="periodClass(row, {{ p }})" x-text="formatPct(periodPct(row, {{ p }}))"></strong></span>
          {% endfor %}
          <span><span class="meta">共振</span> <strong x-text="'×' + resonance(row)"></strong></span>
        </div>
      </article>
    </template>
  </div>

  <div id="scan-panel-heatmap" role="tabpanel" aria-labelledby="scan-tab-heatmap" x-show="scan.rows.length > 0 && activeTab === 'heatmap'">
    <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 %}