{% extends "base.html" %}
{% set has_running_tasks = tasks | selectattr("status", "equalto", "running") | list | length > 0 %}
{% block title %}热榜评论雷达 - 热榜评论分析工具{% endblock %}
{% block content %}
<section class="hero-band hero-band-inverse">
  <div class="hero-shell">
    <div class="hero-copy">
      <p class="eyebrow">Hot Comment Radar</p>
      <h1>抓取热点评论，快速看清讨论情绪</h1>
      <p>面向内部演示和联调的轻量工具：选择平台、控制抓取规模、查看任务状态，并进入报告和评论明细。</p>
    </div>
    <div class="hero-metrics hero-data-grid" aria-label="默认任务规模">
      <div class="hero-metric">
        <strong>5</strong>
        <span>默认热点</span>
      </div>
      <div class="hero-metric">
        <strong>25</strong>
        <span>默认内容</span>
      </div>
      <div class="hero-metric">
        <strong>1,250</strong>
        <span>评论上限</span>
      </div>
    </div>
  </div>
</section>

<div class="task-workspace">
<section class="tool-card hard-panel" id="create-task">
  <div class="section-heading panel-heading">
    <div>
      <p class="section-kicker">采集配置</p>
      <h2>创建抓取任务</h2>
    </div>
    <span class="badge text-bg-light border">默认规模 5 × 5 × 50</span>
  </div>
  <div class="card-body">
    <div id="form-error" class="alert alert-danger d-none" role="alert"></div>
    <form id="task-form" onsubmit="submitTask(event)">
      <div class="row g-3 align-items-end">
        <div class="col-md-3">
          <label class="form-label" for="platform">平台</label>
          <select class="form-select" id="platform" name="platform">
            <option value="xiaohongshu">小红书</option>
            <option value="douyin">抖音</option>
          </select>
        </div>
        <div class="col-md-2">
          <label class="form-label" for="hotspot_limit">热点数</label>
          <input class="form-control scale-input" id="hotspot_limit" name="hotspot_limit" type="number" min="1" max="10" value="5">
        </div>
        <div class="col-md-2">
          <label class="form-label" for="item_limit_per_hotspot">每热点内容</label>
          <input class="form-control scale-input" id="item_limit_per_hotspot" name="item_limit_per_hotspot" type="number" min="1" max="10" value="5">
        </div>
        <div class="col-md-2">
          <label class="form-label" for="comment_limit_per_item">每内容评论</label>
          <input class="form-control scale-input" id="comment_limit_per_item" name="comment_limit_per_item" type="number" min="10" max="100" value="50">
        </div>
        <div class="col-md-3">
          <button class="btn btn-primary w-100" id="submit-btn" type="submit">开始抓取</button>
        </div>
      </div>
      <div class="scale-hint-panel" id="scale-hint">
        预计最多抓取：<strong id="scale-calc">1250</strong> 条评论（实际数量可能受平台返回数量、去重、失败、限流影响）
      </div>
    </form>
  </div>
</section>

<section class="tool-card hard-panel" id="task-history">
  <div class="section-heading panel-heading">
    <div>
      <p class="section-kicker">任务历史</p>
      <h2>最近任务</h2>
    </div>
    <span class="panel-note">{% if has_running_tasks %}自动更新中{% else %}运行中任务自动刷新{% endif %}</span>
  </div>
  <div class="table-responsive">
    <table class="table app-table data-grid-table align-middle mb-0">
      <thead>
        <tr>
          <th>任务 ID</th>
          <th>平台</th>
          <th>创建时间</th>
          <th>配置规模</th>
          <th>进度</th>
          <th>状态</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody id="task-table-body" {% if has_running_tasks %}data-task-list-auto-poll="true"{% endif %}>
        {% include "partials/task_rows.html" %}
      </tbody>
    </table>
  </div>
</section>
</div>
{% if has_running_tasks %}
<script>document.addEventListener("DOMContentLoaded", () => pollTaskListStatus());</script>
{% endif %}
{% endblock %}