<!doctype html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>TK发布助手</title>
<link rel="stylesheet" href="/static/app.css">
</head>
<body>

<header>
  <h1>TK发布助手</h1>
  <div class="header-right">
    <span id="hub-status" class="muted"></span>
    <label>账号（HubStudio 环境）：<select id="account"></select></label>
    <button id="refresh-accounts" type="button">刷新</button>
    <button id="upload-app-log" type="button" title="上传最近的应用日志到服务器，方便远程排查">📤 上传日志</button>
    <span id="user-pill" class="user-pill" title="点击退出登录"></span>
    <span id="version-tag" class="version-tag" title="tk-publisher"></span>
  </div>
</header>

<main>
  <section id="pane-overview">
    <h2>今日总览 <span id="overview-date" class="muted"></span></h2>
    <div id="overview-card">
      <div class="ov-cell"><div class="ov-num" id="ov-accounts-active">0</div><div class="ov-label">正在发布账号</div></div>
      <div class="ov-cell"><div class="ov-num" id="ov-accounts-total">0</div><div class="ov-label">涉及账号</div></div>
      <div class="ov-cell"><div class="ov-num" id="ov-batches-pending">0</div><div class="ov-label">排队批次</div></div>
      <div class="ov-cell"><div class="ov-num" id="ov-batches-running">0</div><div class="ov-label">进行中批次</div></div>
      <div class="ov-cell"><div class="ov-num" id="ov-videos-done">0</div><div class="ov-label">已完成视频</div></div>
      <div class="ov-cell"><div class="ov-num" id="ov-videos-total">0</div><div class="ov-label">视频总数</div></div>
      <div class="ov-cell"><div class="ov-num" id="ov-videos-failed">0</div><div class="ov-label">失败视频</div></div>
    </div>
    <div id="overview-bar"><div id="overview-bar-fill"></div></div>
  </section>

  <section id="pane-scan">
    <h2>1. 选视频</h2>
    <div class="warn-banner">
      ⚠ 提交后 <strong>不要移动或删除源文件夹</strong>（以及同目录下自动生成的
      <code>&lt;文件夹名&gt;_&lt;账号&gt;_&lt;时间&gt;</code> 兄弟目录）。视频文件存放在那里，被删或被
      iCloud 同步清理后任务会变「来源丢失」，无法恢复。建议把视频放在
      <code>~/Videos/</code> 等没有云同步的目录。
    </div>
    <div class="row">
      <input id="scan-path" type="text" value="{{ default_scan }}" placeholder="本地目录路径"/>
      <button id="browse-btn" type="button">📁 浏览…</button>
      <button id="scan-btn" type="button">扫描</button>
    </div>
    <div class="row">
      <span id="scan-meta" class="muted" style="flex:1"></span>
      <button id="select-all" type="button">全选本次扫描</button>
    </div>
    <div id="scan-groups"></div>
  </section>

  <section id="pane-selected">
    <h2>2. 已选 <span id="selected-count">0</span>（拖动排序 · ✕ 删除）</h2>
    <button id="clear-selected" type="button">清空</button>
    <ol id="selected-list"></ol>
  </section>

  <section id="pane-params">
    <h2>3. 参数（整批共用）</h2>
    <div class="param-row">
      <label class="param-label">Caption：</label>
      <textarea id="shared-caption" rows="8"></textarea>
    </div>
    <div class="param-row">
      <label class="param-label">音乐：</label>
      <input type="text" id="music-name" placeholder="音乐名（和账号收藏夹里保存的名字完全一致）" />
      <label class="checkbox-inline"><input type="checkbox" id="skip-music"> 不加音乐</label>
    </div>
    <div class="param-row param-row-warn">
      <span class="param-label"></span>
      <span class="warn-red">⚠ 音乐必须先加入账号的收藏夹</span>
    </div>
    <div class="param-row">
      <label class="param-label">内容检查：</label>
      <label class="checkbox-inline">
        <input type="checkbox" id="content-check" checked>
        开启 TikTok「Content check lite」开关
      </label>
      <span class="muted">取消后发布页面对应开关会被关掉。</span>
    </div>
    <div class="param-row">
      <label class="param-label">发布方式：</label>
      <label class="radio-inline"><input type="radio" name="publish-mode" value="schedule" checked> 定时发布（Programación）</label>
      <label class="radio-inline"><input type="radio" name="publish-mode" value="now"> 立即发布（Ahora）</label>
    </div>
    <div class="param-row" id="schedule-row">
      <label class="param-label">首条发布时间：</label>
      <input type="datetime-local" id="first-schedule" />
      <span class="muted"><strong>墨西哥城时间 (America/Mexico_City)</strong></span>
      <span class="muted" id="interval-hint"></span>
    </div>
    <details>
      <summary>排期预览（点击展开）</summary>
      <ol id="schedule-preview"></ol>
    </details>
  </section>

  <section id="pane-submit">
    <h2>4. 提交</h2>
    <button id="submit-btn" type="button" disabled>提交发布任务</button>
    <div id="submit-result"></div>
  </section>

  <section id="pane-tasks">
    <h2>发布进度（按日期 › 任务 › 视频）</h2>
    <button id="refresh-tasks" type="button">刷新</button>
    <div id="date-tree"></div>
  </section>
</main>

<!-- Folder picker modal -->
<div id="folder-modal" class="modal-hidden">
  <div class="modal-content">
    <h3>选择文件夹</h3>
    <div class="row">
      <input id="folder-path" type="text" />
      <button id="folder-up" type="button">↑ 上一级</button>
    </div>
    <ul id="folder-list"></ul>
    <div class="row right">
      <button id="folder-cancel" type="button">取消</button>
      <button id="folder-select" type="button" class="primary">选择此文件夹</button>
    </div>
  </div>
</div>

<script>
  window.DEFAULT_CAPTION = {{ default_caption | tojson }};
</script>
<script src="/static/app.js"></script>
</body>
</html>
