{% extends "base.html" %}
{% block title %}导出聊天记录 — WeChat EXP{% endblock %}
{% block content %}
<a href="/" class="back-link">← 返回仪表盘</a>
<h2 style="margin:0 0 4px 0">📤 导出聊天记录</h2>
<p style="color:#8b949e;font-size:12px;margin:0 0 20px 0">按联系人、时间范围导出聊天记录</p>

<div class="config-panel">
  <div class="form-row">
    <div style="flex:2"><label>联系人/群聊标识</label><input id="cfg-contact" placeholder="例如: wxid_abc123 或 张三"></div>
    <div style="flex:1"><label>开始日期</label><input id="cfg-start" type="date"></div>
    <div style="flex:1"><label>结束日期</label><input id="cfg-end" type="date"></div>
    <div style="flex:1"><label>格式</label><select id="cfg-format"><option value="txt">TXT 文本</option><option value="html">HTML</option></select></div>
    <div><label>&nbsp;</label><button id="btn-run" class="btn btn-primary">开始导出</button></div>
  </div>
</div>

<div id="progress-container" class="progress-panel" style="display:none">
  <div class="progress-bar-outer"><div id="progress-bar" class="progress-bar-inner" style="width:0%"></div></div>
  <div id="progress-detail" class="progress-detail">等待开始...</div>
  <div id="log-console" class="log-console" style="margin-top:12px"></div>
</div>

<div id="result-container" class="result-panel" style="display:none">
  <h3>✓ 导出完成</h3>
  <div id="result-content"></div>
</div>

<div id="select-container" class="select-container" style="display:none"></div>

<style>
.select-container {
  background: #16213e;
  border: 1px solid #30363d;
  border-radius: 12px;
  padding: 20px;
  margin-top: 16px;
  max-width: 600px;
}
.select-list { display: flex; flex-direction: column; gap: 8px; }
.select-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px; background: #1a1a2e; border: 1px solid #30363d;
  border-radius: 8px; cursor: pointer; transition: all 0.15s;
}
.select-item:hover { background: #0f3460; border-color: #e94560; }
.select-name { color: #eee; font-size: 15px; font-weight: 500; }
.select-count { color: #8b949e; font-size: 12px; }
</style>
{% endblock %}
{% block scripts %}
<script src="{{ url_for('static', filename='js/sse_progress.js') }}"></script>
<script src="{{ url_for('static', filename='js/wizard.js') }}"></script>
<script>
new WizardPage({
  runBtnId: 'btn-run',
  apiUrl: '/api/export/chat',
  steps: ['export'],
  chatFieldId: 'cfg-contact',
  getBody: () => ({
    contact: document.getElementById('cfg-contact').value,
    date_start: document.getElementById('cfg-start').value,
    date_end: document.getElementById('cfg-end').value,
    format: document.getElementById('cfg-format').value,
  }),
});
</script>
{% endblock %}