{% extends "base.html" %}
{% block content %}
<h2>Scoring settings</h2>

<div class="mb-3">
  <p>
    Use these sliders/weights to control how the matching algorithm scores each mentor–mentee pair.
    Weights must add up to 100.
  </p>
  <p class="mt-2"><strong>Current total:</strong> <span id="weight-total">{{ weights_total }}</span> / 100</p>
  <p class="text-muted" id="weight-total-status">
    {% if weights_total == 100 %}
      ✅ Ready to score (total is 100).
    {% elif weights_total > 100 %}
      ⚠️ Over 100 – reduce some weights.
    {% else %}
      ⚠️ Below 100 – increase some weights.
    {% endif %}
  </p>
  <div class="alert alert-info">
    <strong>What each component means:</strong>
    <ul class="mb-0">
      <li><strong>Academic Fit</strong>: GPA proximity and alignment between mentor strengths and mentee support needs.</li>
      <li><strong>Support Needs &amp; BMCC Services</strong>: How well the mentor knows key BMCC support offices and services.</li>
      <li><strong>Availability / Logistics</strong>: Overlap in weekly availability (days/times) so meetings are realistic.</li>
      <li><strong>Personal Fit</strong>: Identity and shared hobbies/interests that can support rapport and belonging.</li>
      <li><strong>Goals Alignment</strong>: Similar transfer/career plans and long-term goals.</li>
    </ul>
  </div>
</div>

<form method="post" class="row g-3">
  <div class="col-md-4">
    <label class="form-label">Academic Fit weight</label>
    <input type="number" name="w_academic" value="{{ weights.academic }}" class="form-control" min="0" max="100">
  </div>
  <div class="col-md-4">
    <label class="form-label">Support Needs &amp; BMCC Services weight</label>
    <input type="number" name="w_services" value="{{ weights.services }}" class="form-control" min="0" max="100">
  </div>
  <div class="col-md-4">
    <label class="form-label">Availability / Logistics weight</label>
    <input type="number" name="w_availability" value="{{ weights.availability }}" class="form-control" min="0" max="100">
  </div>
  <div class="col-md-4">
    <label class="form-label">Personal Fit weight</label>
    <input type="number" name="w_personal" value="{{ weights.personal }}" class="form-control" min="0" max="100">
  </div>
  <div class="col-md-4">
    <label class="form-label">Goals Alignment weight</label>
    <input type="number" name="w_goals" value="{{ weights.goals }}" class="form-control" min="0" max="100">
  </div>
  <div class="col-md-4">
    <label class="form-label">Minimum availability overlap (%)</label>
    <input type="number" name="min_overlap_pct" value="{{ min_overlap_pct }}" class="form-control" min="0" max="100">
  </div>
  <div class="col-md-4">
    <label class="form-label">Default mentor capacity (if no override)</label>
    <div class="input-group">
      <input type="number" name="default_capacity" value="{{ default_capacity }}" class="form-control" min="1" form="pool-settings-form">
      <button class="btn btn-outline-primary btn-sm" type="submit" form="pool-settings-form">
        Save default capacity
      </button>
    </div>
  </div>

  <div class="col-12">
    <button class="btn btn-primary me-2" type="submit" name="action" value="save_settings">Save scoring settings</button>
    <button class="btn btn-outline-secondary" type="submit" name="action" value="reset_weights">Reset to defaults</button>
    <button class="btn btn-success ms-2" type="submit" name="action" value="run_scoring">Run scoring</button>
  </div>
</form>

<form method="post" id="pool-settings-form">
  <input type="hidden" name="action" value="save_pool">
</form>

<script>
(function () {
  const fieldNames = ["w_academic","w_services","w_availability","w_personal","w_goals"];
  function updateTotal() {
    let total = 0;
    fieldNames.forEach(function (name) {
      const el = document.querySelector('input[name="' + name + '"]');
      if (!el) return;
      const v = parseFloat(el.value);
      if (!isNaN(v)) {
        total += v;
      }
    });
    const totalSpan = document.getElementById("weight-total");
    const status = document.getElementById("weight-total-status");
    if (totalSpan) {
      totalSpan.textContent = total.toString();
    }
    if (status) {
      if (total === 100) {
        status.textContent = "✅ Ready to score (total is 100).";
      } else if (total > 100) {
        status.textContent = "⚠️ Over 100 – reduce some weights.";
      } else {
        status.textContent = "⚠️ Below 100 – increase some weights.";
      }
    }
  }
  document.addEventListener("input", function (evt) {
    if (evt.target && fieldNames.indexOf(evt.target.name) !== -1) {
      updateTotal();
    }
  });
  document.addEventListener("DOMContentLoaded", updateTotal);
})();
</script>
{% endblock %}