{% extends "base.html" %}
{% set page = "daily" %}
{% block content %}
<div class="card">
  <div class="card-title">📊 日次レポート / Daily Report</div>

  {% if entries %}
  <div class="form-group">
    <label class="form-label">対象日・ライン選択 / Select Date & Line</label>
    <div class="table-wrap" style="max-height:320px; overflow-y:auto;">
      <table>
        <thead>
          <tr>
            <th style="width:40px;"></th>
            <th>日付 / Date</th>
            <th>ライン / Line</th>
            <th>総件数 / Total</th>
            <th>集計対象 / Included</th>
            <th>除外 / Excluded</th>
          </tr>
        </thead>
        <tbody>
          {% for e in entries %}
          <tr onclick="selectRow(this, '{{ e.date }}', '{{ e.line_no }}')" style="cursor:pointer;" id="row-{{ loop.index }}">
            <td><input type="radio" name="sel" class="cb" data-date="{{ e.date }}" data-line="{{ e.line_no }}"></td>
            <td>{{ e.date }}</td>
            <td>{{ e.line_no }}</td>
            <td>{{ "{:,}".format(e.total) }}</td>
            <td>{{ "{:,}".format(e.included) }}</td>
            <td>{% if e.excluded > 0 %}<span class="badge badge-excl">{{ e.excluded }}</span>{% else %}-{% endif %}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>

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

  <button class="btn btn-primary" id="btn-gen" onclick="generate()" disabled>
    <span id="btn-icon">📊</span>
    <span id="btn-text">レポート生成 / Generate Report</span>
  </button>
  {% else %}
  <div style="color:var(--text-sub); font-size:13px; padding:16px; background:#f5f5f5; border-radius:8px;">
    ⚠️ データがありません。先に「取り込み」からCSVを読み込んでください。
  </div>
  {% endif %}
</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 style="margin-top:12px;">
    <a href="/reports" class="btn btn-outline btn-sm">📁 レポート一覧へ / View Reports</a>
  </div>
</div>
{% endblock %}
{% block scripts %}
<script>
let selectedDate = '', selectedLine = '';

function selectRow(tr, date, line) {
  document.querySelectorAll('tr.row-selected').forEach(r => r.classList.remove('row-selected'));
  tr.classList.add('row-selected');
  tr.querySelector('input[type=radio]').checked = true;
  selectedDate = date; selectedLine = line;
  document.getElementById('btn-gen').disabled = false;
}

async function generate() {
  if (!selectedDate) return;
  const btn = document.getElementById('btn-gen');
  btn.disabled = true;
  document.getElementById('btn-icon').innerHTML = '<span class="spinner"></span>';
  document.getElementById('btn-text').textContent = '生成中 / Generating...';
  const statusArea = document.getElementById('status-area');
  statusArea.style.display = 'block';
  statusArea.innerHTML = '<div class="status-bar running">⏳ レポート生成中... / Generating report...</div>';
  document.getElementById('log-card').style.display = 'block';

  const res = await post('/api/report/daily', {date: selectedDate, line_no: selectedLine});
  startJob(res.job_id, 'log-box', (hasError) => {
    btn.disabled = false;
    document.getElementById('btn-icon').textContent = hasError ? '❌' : '✅';
    document.getElementById('btn-text').textContent = hasError ? 'エラー / Error' : '生成完了！ / Done!';
    statusArea.innerHTML = hasError
      ? '<div class="status-bar error">❌ エラーが発生しました。</div>'
      : '<div class="status-bar">✅ レポートを生成しました！ / Report generated!</div>';
  });
}
</script>
{% endblock %}