{% extends "base.html" %}
{% set page = "import" %}
{% block content %}
<div class="card">
  <div class="card-title">📥 データ取り込み / Import CSV</div>

  <div style="margin-bottom:16px;">
    <div class="form-label">input フォルダ内のCSVファイル / Files in input folder</div>
    {% if files %}
    <div class="table-wrap" style="margin-bottom:12px;">
      <table>
        <thead><tr><th>ファイル名 / Filename</th></tr></thead>
        <tbody>
          {% for f in files %}
          <tr><td>📄 {{ f }}</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    {% else %}
    <div style="color:var(--text-sub); font-size:13px; padding:12px; background:#f5f5f5; border-radius:8px;">
      ⚠️ inputフォルダにCSVファイルがありません。<br>
      CSVファイルを <code>weight_tool/input/</code> フォルダに入れてから実行してください。
    </div>
    {% endif %}
  </div>

  <div id="status-area" style="display:none; margin-bottom:12px;"></div>

  <button class="btn btn-primary" id="btn-import" onclick="startImport()" {% if not files %}disabled{% endif %}>
    <span id="btn-icon">📥</span>
    <span id="btn-text">取り込み開始 / Start Import</span>
  </button>
</div>

<div class="card" id="log-card" style="display:none;">
  <div class="card-title">📋 進捗ログ / Progress Log</div>
  <div class="log-box" id="log-box"></div>
</div>

{% endblock %}
{% block scripts %}
<script>
async function startImport() {
  const btn = document.getElementById('btn-import');
  btn.disabled = true;
  document.getElementById('btn-icon').innerHTML = '<span class="spinner"></span>';
  document.getElementById('btn-text').textContent = '処理中 / Processing...';

  const statusArea = document.getElementById('status-area');
  statusArea.style.display = 'block';
  statusArea.innerHTML = '<div class="status-bar running">⏳ 取り込み中です。しばらくお待ちください... / Importing, please wait...</div>';

  document.getElementById('log-card').style.display = 'block';

  const res = await post('/api/import', {});
  startJob(res.job_id, 'log-box', (hasError) => {
    btn.disabled = false;
    document.getElementById('btn-icon').textContent = hasError ? '❌' : '✅';
    document.getElementById('btn-text').textContent = hasError
      ? 'エラーが発生しました / Error occurred'
      : '取り込み完了！ / Import complete!';
    statusArea.innerHTML = hasError
      ? '<div class="status-bar error">❌ エラーが発生しました。ログを確認してください。</div>'
      : '<div class="status-bar">✅ 取り込みが完了しました！ / Import completed successfully!</div>';
    if (!hasError) setTimeout(() => { window.location.href = '/'; }, 1500);
  });
}
</script>
{% endblock %}