{% extends "base.html" %}
{% block content %}
<div class="container-fluid mt-4">

  <div class="d-flex justify-content-between align-items-start mb-3">
    <div>
      <h4 class="mb-0"><i class="bi bi-play-circle me-2"></i>Run Incentive (Preview & Freeze)</h4>
      <div class="text-muted small">
        Select policy + period → enter achievements → Preview → Freeze into a batch.
      </div>
    </div>
    <div class="d-flex gap-2">
      <a href="{{ url_for('incentives.policies') }}" class="btn btn-outline-secondary">
        <i class="bi bi-arrow-left me-1"></i>Policies
      </a>
      <a href="{{ url_for('incentives.list_batches') }}" class="btn btn-outline-primary">
        <i class="bi bi-clipboard-check me-1"></i>Batches
      </a>
    </div>
  </div>

  <!-- Controls -->
  <div class="card shadow-sm mb-3">
    <div class="card-header fw-bold">
      <i class="bi bi-sliders me-2"></i>Run Settings
    </div>
    <div class="card-body">
      <div class="row g-3 align-items-end">

        <div class="col-md-5">
          <label class="form-label">Policy</label>
          <select class="form-select" id="policy_id" required>
            <option value="">-- Select Policy --</option>
            {% for p in policies %}
              <option value="{{ p.id }}">{{ p.name }} ({{ p.period_type }})</option>
            {% endfor %}
          </select>
          <div class="form-text small">Metric dropdown will load from this policy’s targets.</div>
        </div>

        <div class="col-md-3">
          <label class="form-label">Period (YYYY-MM)</label>
          <input class="form-control" id="period_key" placeholder="2026-01" value="{{ default_period or '' }}" required>
        </div>

        <div class="col-md-4 d-flex gap-2">
          <button class="btn btn-outline-primary w-50" type="button" id="btnPreview">
            <i class="bi bi-search me-1"></i>Preview
          </button>
          <button class="btn btn-success w-50" type="button" id="btnFreeze" disabled>
            <i class="bi bi-snow me-1"></i>Freeze Batch
          </button>
        </div>

      </div>

      <div class="alert alert-info small mt-3 mb-0">
        <b>Tip:</b> Pick metric from dropdown (it comes from policy targets). If no metrics show, add targets in the policy first.
      </div>
    </div>
  </div>

  <!-- Employee Filters -->
  <div class="card shadow-sm mb-3">
    <div class="card-header fw-bold d-flex justify-content-between align-items-center">
      <span><i class="bi bi-funnel me-2"></i>Employee Filters (optional)</span>
      <button class="btn btn-sm btn-outline-secondary" type="button" id="btnResetFilters">
        <i class="bi bi-arrow-counterclockwise me-1"></i>Reset Filters
      </button>
    </div>
    <div class="card-body">
      <div class="row g-2">
        <div class="col-md-4">
          <label class="form-label">Department</label>
          <select class="form-select" id="filter_department">
            <option value="">All</option>
            {% for d in departments %}
              <option value="{{ d.id }}">{{ d.name }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="col-md-4">
          <label class="form-label">Location</label>
          <select class="form-select" id="filter_location">
            <option value="">All</option>
            {% for loc in locations %}
              <option value="{{ loc }}">{{ loc }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="col-md-4">
          <label class="form-label">Institute</label>
          <select class="form-select" id="filter_institute">
            <option value="">All</option>
            {% for inst in institutes %}
              <option value="{{ inst }}">{{ inst }}</option>
            {% endfor %}
          </select>
        </div>
      </div>
      <div class="form-text small">
        Filters update Employee dropdown options in the Achievements table.
      </div>
    </div>
  </div>

  <!-- Achievements -->
  <div class="card shadow-sm mb-3">
    <div class="card-header fw-bold d-flex justify-content-between align-items-center">
      <span><i class="bi bi-table me-2"></i>Achievements</span>
      <div class="d-flex gap-2">
        <button class="btn btn-sm btn-outline-secondary" type="button" id="btnAddRow">
          <i class="bi bi-plus-circle me-1"></i>Add Row
        </button>
        <button class="btn btn-sm btn-outline-danger" type="button" id="btnClear">
          <i class="bi bi-trash me-1"></i>Clear
        </button>
      </div>
    </div>

    <div class="card-body p-0">
      <div class="table-responsive">
        <table class="table table-striped mb-0 align-middle" id="achTable">
          <thead class="table-light">
            <tr>
              <th style="width: 340px;">Employee</th>
              <th style="width: 240px;">Metric</th>
              <th style="width: 180px;" class="text-end">Value</th>
              <th style="width: 80px;"></th>
            </tr>
          </thead>
          <tbody id="achBody"></tbody>
        </table>
      </div>
    </div>
  </div>

  <!-- Preview Results -->
  <div class="card shadow-sm">
    <div class="card-header fw-bold d-flex justify-content-between align-items-center">
      <span><i class="bi bi-eye me-2"></i>Preview Result</span>
      <span class="badge bg-info text-dark" id="previewTotalBadge" style="display:none;">
        Total: ₹<span id="previewTotal">0.00</span>
      </span>
    </div>

    <div class="card-body">
      <div id="previewMsg" class="text-muted">Click <b>Preview</b> to see calculated incentives.</div>

      <div class="table-responsive" id="previewTableWrap" style="display:none;">
        <table class="table table-bordered table-sm align-middle mt-3">
          <thead class="table-light">
            <tr>
              <th>Employee ID</th>
              <th>Metric</th>
              <th class="text-end">Achieved</th>
              <th class="text-end">Target</th>
              <th class="text-end">Amount</th>
              <th>Method</th>
            </tr>
          </thead>
          <tbody id="previewBody"></tbody>
        </table>
      </div>
    </div>
  </div>

</div>

<script>
  const achBody = document.getElementById("achBody");
  const btnAddRow = document.getElementById("btnAddRow");
  const btnClear = document.getElementById("btnClear");
  const btnPreview = document.getElementById("btnPreview");
  const btnFreeze = document.getElementById("btnFreeze");
  const policyIdEl = document.getElementById("policy_id");
  const periodKeyEl = document.getElementById("period_key");

  const previewMsg = document.getElementById("previewMsg");
  const previewWrap = document.getElementById("previewTableWrap");
  const previewBody = document.getElementById("previewBody");
  const previewTotalBadge = document.getElementById("previewTotalBadge");
  const previewTotalEl = document.getElementById("previewTotal");

  const fDept = document.getElementById("filter_department");
  const fLoc  = document.getElementById("filter_location");
  const fInst = document.getElementById("filter_institute");
  const btnResetFilters = document.getElementById("btnResetFilters");

  let lastPreviewPayload = null;

  let employeeCache = [];
  let metricCache = [];

  function buildEmployeeOptions(selectedId = "") {
    let html = `<option value="">-- Select Employee --</option>`;
    for (const e of employeeCache) {
      const sel = (String(e.id) === String(selectedId)) ? "selected" : "";
      html += `<option value="${e.id}" ${sel}>${e.full_name} (${e.employee_code})</option>`;
    }
    if (!employeeCache.length) {
      html = `<option value="">No employees found</option>`;
    }
    return html;
  }

  function buildMetricOptions(selectedKey = "") {
    if (!policyIdEl.value) {
      return `<option value="">Select policy first</option>`;
    }
    let html = `<option value="">-- Select Metric --</option>`;
    for (const m of metricCache) {
      const key = (m.key || "").toLowerCase();
      const sel = (String(key) === String((selectedKey || "").toLowerCase())) ? "selected" : "";
      html += `<option value="${key}" ${sel}>${m.label || key}</option>`;
    }
    if (!metricCache.length) {
      html = `<option value="">No metrics in this policy (add targets first)</option>`;
    }
    return html;
  }

  async function loadEmployeesAndRefreshAllRows() {
    const params = new URLSearchParams();
    if (fDept.value) params.append("department_id", fDept.value);
    if (fLoc.value)  params.append("location", fLoc.value);
    if (fInst.value) params.append("institute", fInst.value);

    try {
      const res = await fetch(`{{ url_for('incentives.ajax_employees') }}?${params.toString()}`);
      const json = await res.json();
      employeeCache = (json.ok ? (json.employees || []) : []);
    } catch (e) {
      employeeCache = [];
    }

    const rows = [...achBody.querySelectorAll("tr")];
    for (const r of rows) {
      const sel = r.querySelector('[data-field="employee_id"]');
      if (!sel) continue;
      const current = sel.value;
      sel.innerHTML = buildEmployeeOptions(current);
      if (current && ![...sel.options].some(o => o.value === current)) sel.value = "";
    }
  }

  async function loadPolicyMetricsAndRefreshAllRows() {
    const pid = (policyIdEl.value || "").trim();
    if (!pid) {
      metricCache = [];
      const rows = [...achBody.querySelectorAll("tr")];
      for (const r of rows) {
        const msel = r.querySelector('[data-field="metric_key"]');
        if (msel) msel.innerHTML = buildMetricOptions(msel.value);
      }
      return;
    }

    try {
      const res = await fetch(`{{ url_for('incentives.ajax_policy_metrics') }}?policy_id=${encodeURIComponent(pid)}`);
      const json = await res.json();
      metricCache = (json.ok ? (json.metrics || []) : []);
    } catch (e) {
      metricCache = [];
    }

    const rows = [...achBody.querySelectorAll("tr")];
    for (const r of rows) {
      const msel = r.querySelector('[data-field="metric_key"]');
      if (!msel) continue;
      const current = (msel.value || "").toLowerCase();
      msel.innerHTML = buildMetricOptions(current);
      if (current && ![...msel.options].some(o => o.value === current)) msel.value = "";
    }
  }

  function addRow(employeeId = "", metricKey = "", value = "") {
    const tr = document.createElement("tr");
    tr.innerHTML = `
      <td>
        <select class="form-select form-select-sm" data-field="employee_id">
          ${buildEmployeeOptions(employeeId)}
        </select>
      </td>
      <td>
        <select class="form-select form-select-sm" data-field="metric_key">
          ${buildMetricOptions(metricKey)}
        </select>
      </td>
      <td>
        <input class="form-control form-control-sm text-end" placeholder="e.g. 120" data-field="value" value="${value}">
      </td>
      <td class="text-center">
        <button type="button" class="btn btn-sm btn-outline-danger" title="Remove">
          <i class="bi bi-x-lg"></i>
        </button>
      </td>
    `;
    tr.querySelector("button").addEventListener("click", () => tr.remove());
    achBody.appendChild(tr);
  }

  function clearRows() {
    achBody.innerHTML = "";
    addRow();
  }

  function getAchievements() {
    const rows = [...achBody.querySelectorAll("tr")];
    const out = [];

    for (const r of rows) {
      const emp = (r.querySelector('[data-field="employee_id"]').value || "").trim();
      const key = (r.querySelector('[data-field="metric_key"]').value || "").trim().toLowerCase();
      const val = (r.querySelector('[data-field="value"]').value || "").trim();

      if (!emp && !key && !val) continue;
      if (!emp || !key || !val) continue;

      out.push({
        employee_id: parseInt(emp, 10),
        metric_key: key,
        value: parseFloat(val)
      });
    }
    return out;
  }

  function showPreview(lines) {
    previewBody.innerHTML = "";
    let total = 0;

    for (const l of lines) {
      const method = (l.breakup && l.breakup.method) ? l.breakup.method : "-";
      total += (l.amount || 0);

      const tr = document.createElement("tr");
      tr.innerHTML = `
        <td class="fw-semibold">${l.employee_id}</td>
        <td class="text-muted">${l.metric_key || "-"}</td>
        <td class="text-end">${(l.achieved_value ?? 0).toFixed(2)}</td>
        <td class="text-end">${(l.target_value ?? 0).toFixed(2)}</td>
        <td class="text-end fw-bold">₹${(l.amount ?? 0).toFixed(2)}</td>
        <td><span class="badge bg-light text-dark">${method}</span></td>
      `;
      previewBody.appendChild(tr);
    }

    previewTotalEl.textContent = total.toFixed(2);
    previewTotalBadge.style.display = "inline-block";

    previewMsg.style.display = "none";
    previewWrap.style.display = "block";
  }

  function showMessage(msg, type="muted") {
    previewWrap.style.display = "none";
    previewTotalBadge.style.display = "none";
    previewMsg.className = type === "danger" ? "alert alert-danger" :
                           type === "success" ? "alert alert-success" :
                           type === "info" ? "alert alert-info" :
                           "text-muted";
    previewMsg.textContent = msg;
    previewMsg.style.display = "block";
  }

  btnAddRow.addEventListener("click", () => addRow());
  btnClear.addEventListener("click", clearRows);

  [fDept, fLoc, fInst].forEach(el => el.addEventListener("change", loadEmployeesAndRefreshAllRows));

  btnResetFilters.addEventListener("click", () => {
    fDept.value = "";
    fLoc.value = "";
    fInst.value = "";
    loadEmployeesAndRefreshAllRows();
  });

  // When policy changes, reload metric list and refresh existing rows
  policyIdEl.addEventListener("change", async () => {
    await loadPolicyMetricsAndRefreshAllRows();
  });

  btnPreview.addEventListener("click", async () => {
    const policy_id = policyIdEl.value;
    const period_key = (periodKeyEl.value || "").trim();

    if (!policy_id) return showMessage("Please select a policy.", "danger");
    if (!/^\d{4}-\d{2}$/.test(period_key)) return showMessage("Please enter period as YYYY-MM (example: 2026-01).", "danger");

    const achievements = getAchievements();
    if (!achievements.length) return showMessage("Please enter at least one row (Employee, Metric, Value).", "danger");

    const payload = { policy_id: parseInt(policy_id, 10), period_key, achievements };
    lastPreviewPayload = payload;

    btnPreview.disabled = true;
    btnFreeze.disabled = true;
    showMessage("Calculating preview...", "info");

    try {
      const res = await fetch("{{ url_for('incentives.preview') }}", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(payload)
      });

      const json = await res.json();
      if (!json.ok) return showMessage(json.error || "Preview failed.", "danger");

      showPreview(json.lines || []);
      btnFreeze.disabled = false;
    } catch (e) {
      showMessage("Preview failed due to network/server error.", "danger");
    } finally {
      btnPreview.disabled = false;
    }
  });

  btnFreeze.addEventListener("click", async () => {
    if (!lastPreviewPayload) return showMessage("Run preview first.", "danger");

    btnFreeze.disabled = true;
    showMessage("Freezing batch...", "info");

    try {
      const payload = { ...lastPreviewPayload, overwrite: true };
      const res = await fetch("{{ url_for('incentives.create_batch_from_preview') }}", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(payload)
      });

      const json = await res.json();
      if (!json.ok) {
        showMessage(json.error || "Freeze failed.", "danger");
        btnFreeze.disabled = false;
        return;
      }

      if (json.redirect) window.location.href = json.redirect;
      else if (json.batch_id) window.location.href = "{{ url_for('incentives.view_batch', batch_id=0) }}".replace("/0", "/" + json.batch_id);
      else showMessage("Batch created, but no redirect received.", "success");

    } catch (e) {
      showMessage("Freeze failed due to network/server error.", "danger");
      btnFreeze.disabled = false;
    }
  });

  // init
  (async function init() {
    clearRows();
    await loadEmployeesAndRefreshAllRows();
    await loadPolicyMetricsAndRefreshAllRows();
  })();
</script>
{% endblock %}