{# templates/sync_tools.html #}
{% extends "base.html" %}
{% block content %}
<div class="container-fluid mt-3" style="max-width: 1100px;">
  <div class="d-flex justify-content-between align-items-center mb-3">
    <div>
      <h4 class="mb-0">
        <i class="bi bi-arrow-repeat me-2"></i> Sync & Attendance Tools
      </h4>
      <div class="text-muted small">
        Run DeskTime sync, Biometric sync, and Attendance engine with a date range and employee filters.
      </div>
    </div>
  </div>

  <div class="card shadow-sm mb-3">
    <div class="card-header bg-light fw-semibold">
      Parameters
    </div>
    <div class="card-body">
      <div class="row g-3 align-items-end">
        <div class="col-md-3">
          <label class="form-label">From Date</label>
          <input type="date" id="fromDate" class="form-control" />
        </div>
        <div class="col-md-3">
          <label class="form-label">To Date</label>
          <input type="date" id="toDate" class="form-control" />
        </div>

        <div class="w-100 d-block d-md-none"></div>

        <div class="col-md-3">
          <label class="form-label">Department</label>
          <select id="departmentFilter" class="form-select">
            <option value="">All Departments</option>
            {% for dept in departments %}
              <option value="{{ dept.id }}">{{ dept.name }}</option>
            {% endfor %}
          </select>
        </div>

        <div class="col-md-3">
          <label class="form-label">Designation</label>
          <select id="designationFilter" class="form-select">
            <option value="">All Designations</option>
            {% for desig in designations %}
              <option value="{{ desig.id }}">{{ desig.title }}</option>
            {% endfor %}
          </select>
        </div>

        <div class="col-md-4 mt-3">
          <label class="form-label">Employee Name</label>
          <select id="employeeFilter" class="form-select">
            <option value="">All Employees</option>
            {% for emp in employees %}
              <option value="{{ emp.id }}">
                {{ emp.full_name }}{% if emp.employee_code %} ({{ emp.employee_code }}){% endif %}
              </option>
            {% endfor %}
          </select>
          <div class="form-text">
            Leave filters empty to run for <strong>all employees</strong>.
          </div>
        </div>

        <div class="col-md-8 mt-3 text-md-end">
          <small class="text-muted d-block mb-1">
            Choose command to run:
          </small>
          <div class="btn-group" role="group">
            <button type="button"
                    class="btn btn-outline-primary btn-sm btn-run-sync"
                    data-sync-type="desktime">
              DeskTime Sync
            </button>
            <button type="button"
                    class="btn btn-outline-secondary btn-sm btn-run-sync"
                    data-sync-type="biometric">
              Biometric Sync
            </button>
            <button type="button"
                    class="btn btn-outline-success btn-sm btn-run-sync"
                    data-sync-type="attendance">
              Attendance Run
            </button>
          </div>
          <div class="small text-muted mt-2">
            Internally runs:
            <code>flask desktime-sync / biometric-sync / attendance-run --from ... --to ... --employees ...</code>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div id="statusArea" class="alert d-none" role="alert"></div>
  <div id="employeeSummary" class="small text-muted mb-2"></div>

  <div class="card shadow-sm">
    <div class="card-header d-flex justify-content-between align-items-center">
      <span class="fw-semibold">Command Output</span>
      <button class="btn btn-sm btn-outline-secondary" id="clearOutputBtn">
        <i class="bi bi-trash"></i> Clear
      </button>
    </div>
    <div class="card-body" style="max-height: 400px; overflow-y: auto;">
      <pre id="outputConsole" class="mb-0 small" style="white-space: pre-wrap;"></pre>
    </div>
  </div>
</div>

<script>
  (function () {
    const fromInput = document.getElementById("fromDate");
    const toInput = document.getElementById("toDate");
    const deptSelect = document.getElementById("departmentFilter");
    const desigSelect = document.getElementById("designationFilter");
    const empSelect = document.getElementById("employeeFilter");
    const statusArea = document.getElementById("statusArea");
    const employeeSummary = document.getElementById("employeeSummary");
    const outputConsole = document.getElementById("outputConsole");
    const clearBtn = document.getElementById("clearOutputBtn");

    // Default from/to as current month
    const today = new Date();
    const yyyy = today.getFullYear();
    const mm = String(today.getMonth() + 1).padStart(2, "0");
    const dd = String(today.getDate()).padStart(2, "0");

    if (!fromInput.value) {
      fromInput.value = `${yyyy}-${mm}-01`;
    }
    if (!toInput.value) {
      toInput.value = `${yyyy}-${mm}-${dd}`;
    }

    function setStatus(message, type) {
      statusArea.classList.remove(
        "d-none",
        "alert-success",
        "alert-danger",
        "alert-warning",
        "alert-info"
      );
      statusArea.classList.add("alert-" + type);
      statusArea.textContent = message;
    }

    function setEmployeeSummary(data) {
      if (!employeeSummary) return;

      if (!data) {
        employeeSummary.textContent = "";
        return;
      }

      const count = data.employee_count;
      const param = data.employees_param;

      if (count !== null && count !== undefined) {
        employeeSummary.textContent =
          "Employees selected for this run: " + count;
      } else if (param === "all") {
        employeeSummary.textContent =
          "Employees selected for this run: ALL (as per CLI logic).";
      } else if (param) {
        const paramStr = String(param);
        employeeSummary.textContent =
          "Employees parameter: " +
          paramStr.slice(0, 200) +
          (paramStr.length > 200 ? "..." : "");
      } else {
        employeeSummary.textContent = "";
      }
    }

    function appendOutput(text) {
      const time = new Date().toLocaleTimeString();
      outputConsole.textContent += `[${time}] ${text}\n`;
      outputConsole.scrollTop = outputConsole.scrollHeight;
    }

    document.querySelectorAll(".btn-run-sync").forEach((btn) => {
      btn.addEventListener("click", function () {
        const syncType = this.dataset.syncType;
        const fromDate = fromInput.value;
        const toDate = toInput.value;

        const departmentId = deptSelect.value || "";
        const designationId = desigSelect.value || "";
        const employeeId = empSelect.value || "";

        if (!fromDate || !toDate) {
          setStatus("Please select both From and To dates.", "warning");
          setEmployeeSummary(null);
          return;
        }

        let filterText = "All employees";
        if (departmentId || designationId || employeeId) {
          filterText = "Filtered employees (";
          if (departmentId) filterText += "Dept selected; ";
          if (designationId) filterText += "Designation selected; ";
          if (employeeId) filterText += "Specific employee selected; ";
          filterText = filterText.replace(/; $/, "") + ")";
        }

        setStatus("Running command...", "info");
        setEmployeeSummary(null);
        appendOutput(
          `Running ${syncType} sync from ${fromDate} to ${toDate} for ${filterText}...`
        );

        fetch("{{ url_for('attendance_admin.run_sync_command') }}", {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            sync_type: syncType,
            from_date: fromDate,
            to_date: toDate,
            department_id: departmentId,
            designation_id: designationId,
            employee_id: employeeId,
          }),
        })
          .then((r) => r.json())
          .then((data) => {
            setEmployeeSummary(data);

            if (data.ok) {
              setStatus("Command completed successfully.", "success");
            } else {
              setStatus(data.error || "Command failed.", "danger");
            }

            if (data.command) {
              appendOutput(`> ${data.command}`);
            }
            if (data.output) {
              appendOutput(`STDOUT:\n${data.output}`);
            }
            if (data.error) {
              appendOutput(`STDERR:\n${data.error}`);
            }
          })
          .catch((err) => {
            console.error(err);
            setStatus("Error calling server.", "danger");
            setEmployeeSummary(null);
            appendOutput(`ERROR: ${err}`);
          });
      });
    });

    clearBtn.addEventListener("click", function () {
      outputConsole.textContent = "";
      statusArea.classList.add("d-none");
      employeeSummary.textContent = "";
    });

    // If you want Select2 on employee dropdown (base.html already includes it):
    // $(document).ready(function() {
    //   $('#employeeFilter').select2({ width: '100%' });
    // });
  })();
</script>
{% endblock %}