{% extends "base.html" %}
{% set page = "exclude" %}
{% block content %}
<div class="card">
  <div class="card-title">🚫 除外データ管理 / Exclusion Management</div>
  <p style="font-size:13px; color:var(--text-sub); margin-bottom:16px;">
    現在の除外件数: <strong style="color:var(--warn)">{{ excl_count }} 件</strong> /
    Excluded records: <strong style="color:var(--warn)">{{ excl_count }}</strong>
  </p>

  <div class="grid-2" style="margin-bottom:16px;">
    <div>
      <div class="form-group">
        <label class="form-label">日付 / Date</label>
        <select class="form-control" id="f-date">
          <option value="">-- すべて / All --</option>
          {% for d in dates %}
          <option value="{{ d }}">{{ d }}</option>
          {% endfor %}
        </select>
      </div>
      <div class="form-group">
        <label class="form-label">判定 / Result</label>
        <select class="form-control" id="f-result">
          <option value="">すべて / All</option>
          <option value="PASS">PASS</option>
          <option value="NG">NG</option>
        </select>
      </div>
    </div>
    <div>
      <div class="form-group">
        <label class="form-label">重量 下限 / Weight Min (g)</label>
        <input type="number" class="form-control" id="f-wmin" step="0.1" placeholder="例: 90.0">
      </div>
      <div class="form-group">
        <label class="form-label">重量 上限 / Weight Max (g)</label>
        <input type="number" class="form-control" id="f-wmax" step="0.1" placeholder="例: 110.0">
      </div>
    </div>
  </div>

  <div style="display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap;">
    <button class="btn btn-primary btn-sm" onclick="search(false)">🔍 通常データを検索 / Search Normal</button>
    <button class="btn btn-outline btn-sm" onclick="search(true)">📋 除外中データを表示 / Show Excluded</button>
  </div>

  <div id="result-area"></div>

  <div id="action-bar" style="display:none; margin-top:12px; display:flex; gap:8px; flex-wrap:wrap;">
    <button class="btn btn-danger btn-sm" onclick="updateExclude(true)">🚫 選択を除外 / Exclude Selected</button>
    <button class="btn btn-success btn-sm" onclick="updateExclude(false)">✅ 除外を解除 / Restore Selected</button>
    <span id="sel-count" style="font-size:13px; color:var(--text-sub); align-self:center;"></span>
  </div>
</div>
{% endblock %}
{% block scripts %}
<script>
let searchResults = [];

async function search(showExcluded) {
  const res = await post('/api/exclude/search', {
    date: document.getElementById('f-date').value,
    weight_min: document.getElementById('f-wmin').value,
    weight_max: document.getElementById('f-wmax').value,
    result: document.getElementById('f-result').value,
    show_excluded: showExcluded,
  });
  searchResults = res;
  renderResults(res, showExcluded);
}

function renderResults(rows, showExcluded) {
  const area = document.getElementById('result-area');
  if (!rows.length) {
    area.innerHTML = '<div style="color:var(--text-sub); font-size:13px; padding:12px; background:#f5f5f5; border-radius:8px;">該当データなし / No results</div>';
    document.getElementById('action-bar').style.display = 'none';
    return;
  }
  const type = showExcluded ? '除外中' : '通常';
  let html = `<div style="font-size:12px; color:var(--text-sub); margin-bottom:8px;">${type}データ ${rows.length} 件表示${rows.length>=300?' (最大300件)':''}</div>`;
  html += '<div class="table-wrap"><table><thead><tr>';
  html += '<th style="width:36px;"><input type="checkbox" id="cb-all" onclick="toggleAll(this)"></th>';
  html += '<th>日時 / Datetime</th><th>重量(g) / Weight</th><th>判定 / Result</th><th>品種 / Product</th><th>ライン / Line</th>';
  html += '</tr></thead><tbody>';
  rows.forEach((r, i) => {
    const cls = r.result === 'PASS' ? 'badge-pass' : 'badge-ng';
    html += `<tr id="tr-${i}" onclick="toggleRow(${i})" style="cursor:pointer;">`;
    html += `<td><input type="checkbox" class="cb row-cb" data-id="${r.id}" data-i="${i}"></td>`;
    html += `<td>${r.measured_at}</td>`;
    html += `<td>${r.weight !== null ? r.weight.toFixed(1) : '-'}</td>`;
    html += `<td><span class="badge ${cls}">${r.result}</span></td>`;
    html += `<td>${r.product_no || '-'}</td><td>${r.line_no || '-'}</td></tr>`;
  });
  html += '</tbody></table></div>';
  area.innerHTML = html;
  document.getElementById('action-bar').style.display = 'flex';
  updateSelCount();
  document.querySelectorAll('.row-cb').forEach(cb => cb.addEventListener('change', updateSelCount));
}

function toggleRow(i) {
  const cb = document.querySelector(`.row-cb[data-i="${i}"]`);
  cb.checked = !cb.checked;
  document.getElementById(`tr-${i}`).classList.toggle('row-selected', cb.checked);
  updateSelCount();
}

function toggleAll(master) {
  document.querySelectorAll('.row-cb').forEach(cb => {
    cb.checked = master.checked;
    const i = parseInt(cb.dataset.i);
    document.getElementById(`tr-${i}`).classList.toggle('row-selected', master.checked);
  });
  updateSelCount();
}

function updateSelCount() {
  const n = document.querySelectorAll('.row-cb:checked').length;
  document.getElementById('sel-count').textContent = `${n} 件選択中 / ${n} selected`;
}

async function updateExclude(exclude) {
  const ids = Array.from(document.querySelectorAll('.row-cb:checked')).map(cb => parseInt(cb.dataset.id));
  if (!ids.length) { toast('データを選択してください / Select records'); return; }
  const res = await post('/api/exclude/update', {ids, exclude});
  if (res.ok) {
    toast(res.msg);
    setTimeout(() => location.reload(), 800);
  } else {
    toast('エラー: ' + res.msg);
  }
}
</script>
{% endblock %}