{% extends "base.html" %}

{% block title %}ArithMedic — {{ formula }}{% endblock %} 

{% block content %}
<div class="page-heading">
  <div class="section-label">eGFR</div>
  <h1>{{ formula }}</h1>
  <p>Race-free eGFR equation, validated for adults ≥ 18 years.</p>
</div>

<form id="egfr-form">
  <div class="form-grid">

    <div class="field">
      <label for="serum_creatinine">Serum Creatinine</label>
      <div class="input-group">
        <input
          type="number"
          id="serum_creatinine"
          name="serum_creatinine"
          step="any"
          min="0.01"
          placeholder="e.g. 90"
          required
        />
        <div class="radio-group" style="width:auto; flex-shrink:0;">
          <input type="radio" id="unit_umol" name="unit" value="umol/L" checked />
          <label for="unit_umol" style="border-left:none;">µmol/L</label>
          <input type="radio" id="unit_mgdl" name="unit" value="mg/dL" />
          <label for="unit_mgdl">mg/dL</label>
        </div>
      </div>
    </div>

    <div class="field">
      <label for="age">Age (years)</label>
      <input
        type="number"
        id="age"
        name="age"
        min="18"
        max="120"
        placeholder="18 – 120"
        required
      />
    </div>

    <div class="field">
      <label>Sex</label>
      <div class="radio-group">
        <input type="radio" id="sex_male"   name="sex" value="male"   checked />
        <label for="sex_male">Male</label>
        <input type="radio" id="sex_female" name="sex" value="female" />
        <label for="sex_female">Female</label>
      </div>
    </div>

    <button type="submit">Calculate eGFR</button>

  </div>
</form>

<p id="calculating" style="display:none; font-size:0.7rem; color:var(--ink-muted); letter-spacing:0.08em; text-align:center; margin-top:1rem;">
  Calculating…
</p>

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

<div class="result-card" style="margin-top:2.5rem;">
  <div class="meta">
    <strong>Formula</strong><br>{{ formula }}<br><br>
    <strong>Reference</strong><br>
    <a href="{{ reference_url }}" target="_blank" rel="noopener noreferrer" style="color:var(--ink-muted); text-decoration:underline;">{{ reference }}</a>
  </div>
</div>

<script>
  const API_URL = "/fhir/egfr/ckd-epi-2021";

  function get(fhirResponse, name) {
    return fhirResponse.parameter.find(p => p.name === name);
  }

  function renderResult(data) {
    const egfr      = get(data, "egfr")?.valueQuantity;
    const stageCode = get(data, "ckd-stage-code")?.valueCode;
    const stageDesc = get(data, "ckd-stage-description")?.valueString;
    return `
      <div class="result-card" style="margin-top:2rem;">
        <div class="egfr-value">${egfr.value}</div>
        <div class="egfr-unit">${egfr.unit}</div>
        <div class="badge ${stageCode.toLowerCase()}">${stageCode} — ${stageDesc}</div>
      </div>`;
  }

  function renderError(msg) {
    return `<div class="error-card" style="margin-top:2rem;">${msg}</div>`;
  }

  function buildFhirParams(creatinine, unit, age, sex) {
    return {
      resourceType: "Parameters",
      parameter: [
        { name: "serum-creatinine", valueQuantity: { value: parseFloat(creatinine), unit } },
        { name: "age", valueInteger: parseInt(age, 10) },
        { name: "sex", valueCode: sex },
      ],
    };
  }

  document.getElementById("egfr-form").addEventListener("submit", async function (e) {
    e.preventDefault();
    const form = e.target;
    const indicator = document.getElementById("calculating");
    const resultDiv = document.getElementById("result");

    const body = buildFhirParams(
      form.serum_creatinine.value,
      form.querySelector('input[name="unit"]:checked').value,
      form.age.value,
      form.querySelector('input[name="sex"]:checked').value,
    );

    indicator.style.display = "block";
    resultDiv.innerHTML = "";

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

      if (!res.ok) {
        const err = await res.json().catch(() => ({}));
        resultDiv.innerHTML = renderError(err.detail ?? `Error ${res.status}`);
        return;
      }

      const data = await res.json();
      resultDiv.innerHTML = renderResult(data);
    } catch (err) {
      resultDiv.innerHTML = renderError(`Network error: ${err.message}`);
    } finally {
      indicator.style.display = "none";
    }
  });
</script>

{% endblock %}