const state = { data: null };

function text(value) {
  return String(value || "");
}

function render() {
  const employeeQuery = document.querySelector("#employee-filter").value.trim().toLowerCase();
  const keywordQuery = document.querySelector("#keyword-filter").value.trim().toLowerCase();
  const onlyBlockers = document.querySelector("#blocker-filter").checked;
  const data = state.data;

  document.querySelector("#stats").innerHTML = `
    <strong>应提交：${data.expectedCount}</strong>
    <strong>已提交：${data.submittedCount}</strong>
    <strong>未提交：${data.missingCount}</strong>
  `;

  const reports = data.reports.filter((report) => {
    const employeeMatch = report.employee_name.toLowerCase().includes(employeeQuery);
    const searchable = [report.today_done, report.tomorrow_plan, report.blockers, report.help_needed].join(" ").toLowerCase();
    const keywordMatch = searchable.includes(keywordQuery);
    const blockerMatch = !onlyBlockers || report.blockers || report.help_needed;
    return employeeMatch && keywordMatch && blockerMatch;
  });

  document.querySelector("#reports").innerHTML = reports.length ? reports.map((report) => `
    <article class="report-card">
      <h3>${report.employee_name}</h3>
      <div class="report-grid">
        <div><div class="field-title">今日完成</div><div>${text(report.today_done)}</div></div>
        <div><div class="field-title">明日计划</div><div>${text(report.tomorrow_plan)}</div></div>
        <div><div class="field-title">遇到的问题</div><div>${text(report.blockers) || "无"}</div></div>
        <div><div class="field-title">需要协助</div><div>${text(report.help_needed) || "无"}</div></div>
      </div>
      <p>提交时间：${report.updated_at}</p>
    </article>
  `).join("") : "<p>当前筛选下没有日报。</p>";

  document.querySelector("#missing").textContent = data.missing.length
    ? data.missing.map((employee) => employee.name).join("、")
    : "无";
}

async function loadReports() {
  const date = document.querySelector("#date-filter").value;
  document.querySelector("#export-link").href = `/api/reports/export?date=${date}`;
  const response = await fetch(`/api/reports?date=${date}`);
  state.data = await response.json();
  render();
}

document.querySelector("#date-filter").addEventListener("change", loadReports);
document.querySelector("#employee-filter").addEventListener("input", render);
document.querySelector("#keyword-filter").addEventListener("input", render);
document.querySelector("#blocker-filter").addEventListener("change", render);
document.querySelector("#copy-summary").addEventListener("click", async () => {
  const data = state.data;
  const lines = [
    `${data.date} 日报汇总`,
    `已提交：${data.submittedCount}/${data.expectedCount}`,
    `未提交：${data.missing.length ? data.missing.map((employee) => employee.name).join("、") : "无"}`
  ];
  await navigator.clipboard.writeText(lines.join("\n"));
});

loadReports();