{% extends 'auth/dashboard.html' %}
{% load humanize %}

{% block content %}
<style>
  .glass-card {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(34, 197, 94, 0.18);
  }
  .btn-modern {
    position: relative;
    overflow: hidden;
    transition: all 0.3s;
  }
  .btn-modern::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.28);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
  }
  .btn-modern:hover::before { width: 420px; height: 420px; }
</style>

<div class="container mx-auto px-3 sm:px-4 md:px-6 py-6 sm:py-8">
  <div class="glass-card shadow-2xl rounded-2xl p-5 sm:p-8 relative overflow-hidden">

    <div class="absolute top-0 right-0 w-64 h-64 bg-gradient-to-br from-tea-green-200 to-tea-green-300 rounded-full opacity-25 blur-3xl -mr-32 -mt-32"></div>
    <div class="absolute bottom-0 left-0 w-96 h-96 bg-gradient-to-tr from-blue-200 to-purple-300 rounded-full opacity-20 blur-3xl -ml-48 -mb-48"></div>

    <div class="relative z-10">
      <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 mb-6">
        <div>
          <h2 class="text-2xl sm:text-3xl font-bold text-tea-green-800 flex items-center">
            <span class="bg-gradient-to-br from-tea-green-500 to-tea-green-700 p-2.5 rounded-xl shadow-lg mr-3">
              <i class="fas fa-calendar-check text-white"></i>
            </span>
            Pay Group Installment
          </h2>
          <p class="text-gray-600 mt-1">
            Group: <span class="font-semibold text-gray-800">{{ contract.group.name }}</span> •
            Contract #<span class="font-semibold text-gray-800">{{ contract.id }}</span>
          </p>
        </div>

        <a href="{% url 'contract_market_place:group_contract_detail' contract.id %}"
           class="inline-flex items-center justify-center px-4 py-2 rounded-xl border border-tea-green-200 text-tea-green-800 bg-white/60 hover:bg-white transition shadow-sm">
          <i class="fas fa-arrow-left mr-2"></i> Back to Contract
        </a>
      </div>

      <div class="grid grid-cols-1 lg:grid-cols-3 gap-5 sm:gap-6">
        <div class="lg:col-span-2 bg-white/70 rounded-2xl border border-gray-100 shadow-sm p-5 sm:p-6">
          <h3 class="text-lg font-bold text-gray-800 flex items-center mb-4">
            <i class="fas fa-receipt text-tea-green-600 mr-2"></i>
            Installment Summary
          </h3>

          <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div class="p-4 rounded-xl bg-gradient-to-r from-gray-50 to-transparent border border-gray-100">
              <div class="text-sm text-gray-600">Installment #</div>
              <div class="text-2xl font-extrabold text-gray-900 mt-1">{{ schedule.installment_number }}</div>
            </div>

            <div class="p-4 rounded-xl bg-gradient-to-r from-gray-50 to-transparent border border-gray-100">
              <div class="text-sm text-gray-600">Due Date</div>
              <div class="text-2xl font-extrabold text-gray-900 mt-1">{{ schedule.due_date }}</div>
            </div>

            <div class="p-4 rounded-xl bg-gradient-to-r from-gray-50 to-transparent border border-gray-100">
              <div class="text-sm text-gray-600">Amount Due</div>
              <div class="text-2xl font-extrabold text-gray-900 mt-1">
                KES {{ schedule.amount_due|floatformat:0|intcomma }}
              </div>
            </div>

            <div class="p-4 rounded-xl bg-gradient-to-r from-gray-50 to-transparent border border-gray-100">
              <div class="text-sm text-gray-600">Amount Paid</div>
              <div class="text-2xl font-extrabold text-gray-900 mt-1">
                KES {{ schedule.amount_paid|floatformat:0|intcomma }}
              </div>
            </div>
          </div>

          <div class="mt-5">
            <div class="flex items-center justify-between text-xs text-gray-500 mb-1">
              <span>Installment Progress</span>
              {% with bal=schedule.balance %}
                {% if schedule.amount_due > 0 %}
                  {% widthratio schedule.amount_paid schedule.amount_due 100 as pct %}
                  <span>{{ pct }}%</span>
                {% else %}
                  <span>0%</span>
                {% endif %}
              {% endwith %}
            </div>
            <div class="w-full bg-gray-200 rounded-full h-2 overflow-hidden">
              {% if schedule.amount_due > 0 %}
                {% widthratio schedule.amount_paid schedule.amount_due 100 as pct %}
                <div class="h-2 rounded-full bg-tea-green-600" style="width: {{ pct }}%"></div>
              {% else %}
                <div class="h-2 rounded-full bg-tea-green-600" style="width: 0%"></div>
              {% endif %}
            </div>
          </div>
        </div>

        <div class="bg-white/70 rounded-2xl border border-gray-100 shadow-sm p-5 sm:p-6">
          <h3 class="text-lg font-bold text-gray-800 flex items-center mb-4">
            <i class="fas fa-mobile-alt text-tea-green-600 mr-2"></i>
            M-Pesa STK Push
          </h3>

          <form id="pay-form" method="post" action="{% url 'payments:group_payment_schedule_pay' schedule.id %}">
            {% csrf_token %}

            <label class="block text-sm font-semibold text-gray-700">Phone Number</label>
            <input type="text"
                   name="phone_number"
                   value="{{ request.user.phone_number }}"
                   placeholder="2547XXXXXXXX"
                   class="mt-1 block w-full rounded-xl border-2 border-gray-200 bg-white/80 p-3 focus:ring-tea-green-500 focus:border-tea-green-500">

            {% if allow_flexible_payment %}
              <label class="block text-sm font-semibold text-gray-700 mt-4">Amount to Pay</label>
              <input type="number"
                     name="amount"
                     min="1"
                     max="{{ schedule.balance|floatformat:0 }}"
                     value="{{ schedule.balance|floatformat:0 }}"
                     class="mt-1 block w-full rounded-xl border-2 border-gray-200 bg-white/80 p-3 focus:ring-tea-green-500 focus:border-tea-green-500">
              <p class="text-xs text-gray-500 mt-1">You can pay partially (up to the remaining balance).</p>
            {% else %}
              <input type="hidden" name="amount" value="{{ schedule.balance|floatformat:0 }}">
            {% endif %}

            <button id="pay-btn" type="submit"
                    class="btn-modern mt-4 w-full bg-gradient-to-r from-tea-green-600 to-tea-green-700 text-white px-6 py-3 rounded-xl hover:from-tea-green-700 hover:to-tea-green-800 shadow-lg hover:shadow-xl font-semibold flex items-center justify-center">
              <i class="fas fa-paper-plane mr-2"></i>
              Make Payment
            </button>
          </form>

          <!-- Live status -->
          <div id="status-box" class="mt-5 hidden">
            <div class="p-4 rounded-xl border border-gray-200 bg-white">
              <div class="flex items-start justify-between gap-3">
                <div class="min-w-0">
                  <div class="text-sm font-bold text-gray-800">Payment Status</div>
                  <div id="status-text" class="text-sm text-gray-600 mt-1 break-words">Starting…</div>
                </div>
                <span id="status-pill" class="flex-shrink-0 inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-gray-100 text-gray-700">
                  PENDING
                </span>
              </div>

              <div class="mt-4">
                <div class="flex items-center justify-between text-xs text-gray-500 mb-1">
                  <span>Progress</span>
                  <span id="progress-label">0%</span>
                </div>
                <div class="w-full bg-gray-200 rounded-full h-2 overflow-hidden">
                  <div id="progress-bar" class="h-2 rounded-full bg-tea-green-600" style="width: 0%"></div>
                </div>
              </div>

              <div id="receipt-row" class="mt-4 hidden text-sm">
                <span class="text-gray-600">Receipt:</span>
                <span id="receipt-number" class="font-bold text-gray-900"></span>
              </div>

              <div id="done-hint" class="mt-4 hidden p-3 rounded-xl bg-green-50 border border-green-200 text-green-800 text-sm">
                <i class="fas fa-check-circle mr-1"></i>
                Payment confirmed ✅ Redirecting…
              </div>

              <div id="fail-hint" class="mt-4 hidden p-3 rounded-xl bg-red-50 border border-red-200 text-red-800 text-sm">
                <div class="flex items-start justify-between gap-3">
                  <div class="min-w-0">
                    <i class="fas fa-exclamation-triangle mr-1"></i>
                    Payment failed. Please try again.
                  </div>

                  <!-- ✅ Try Again Button -->
                  <button id="try-again-btn" type="button"
                          class="flex-shrink-0 inline-flex items-center px-3 py-2 rounded-xl bg-red-600 text-white text-xs font-bold hover:bg-red-700 transition">
                    <i class="fas fa-rotate-right mr-2"></i>
                    Try Again
                  </button>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>

  </div>
</div>

<script>
  (function () {
    const form = document.getElementById('pay-form');
    const payBtn = document.getElementById('pay-btn');

    const statusBox = document.getElementById('status-box');
    const statusText = document.getElementById('status-text');
    const statusPill = document.getElementById('status-pill');

    const progressBar = document.getElementById('progress-bar');
    const progressLabel = document.getElementById('progress-label');

    const receiptRow = document.getElementById('receipt-row');
    const receiptNumber = document.getElementById('receipt-number');

    const doneHint = document.getElementById('done-hint');
    const failHint = document.getElementById('fail-hint');
    const tryAgainBtn = document.getElementById('try-again-btn');

    let pollTimer = null;
    let progress = 0;

    function setPill(kind, label) {
      statusPill.textContent = label;
      statusPill.className = "flex-shrink-0 inline-flex items-center px-3 py-1 rounded-full text-xs font-bold " + kind;
    }

    function setProgress(p) {
      progress = Math.max(0, Math.min(100, p));
      progressBar.style.width = progress + "%";
      progressLabel.textContent = progress + "%";
    }

    function stopPolling() {
      if (pollTimer) clearInterval(pollTimer);
      pollTimer = null;
    }

    function enablePayButton() {
      payBtn.disabled = false;
      payBtn.classList.remove('opacity-70', 'cursor-not-allowed');
    }

    function disablePayButton() {
      payBtn.disabled = true;
      payBtn.classList.add('opacity-70', 'cursor-not-allowed');
    }

    function showFailedState() {
      setPill("bg-red-100 text-red-800", "FAILED");
      stopPolling();
      failHint.classList.remove('hidden');
      enablePayButton();
    }

    function startPolling(paymentId) {
      const statusUrl = `/payments/check-group-status/${paymentId}/`;

      stopPolling();
      setProgress(10);

      pollTimer = setInterval(async () => {
        try {
          if (progress < 90) setProgress(progress + 5);

          const res = await fetch(statusUrl, { headers: { "X-Requested-With": "XMLHttpRequest" } });
          const data = await res.json();

          if (data.error) {
            statusText.textContent = data.error;
            setPill("bg-red-100 text-red-800", "ERROR");
            stopPolling();
            failHint.classList.remove('hidden');
            enablePayButton();
            return;
          }

          const status = (data.status || "PENDING").toUpperCase();
          statusText.textContent = data.message || "Waiting for you to complete payment on your phone...";

          if (data.mpesa_receipt_number) {
            receiptRow.classList.remove('hidden');
            receiptNumber.textContent = data.mpesa_receipt_number;
          }

          if (status === "COMPLETED") {
            setPill("bg-green-100 text-green-800", "COMPLETED");
            setProgress(100);
            doneHint.classList.remove('hidden');
            stopPolling();

            setTimeout(() => {
              window.location.href = "{% url 'contract_market_place:group_contract_detail' contract.id %}";
            }, 1500);
          } else if (status === "FAILED") {
            showFailedState();
          } else {
            setPill("bg-yellow-100 text-yellow-800", "PENDING");
          }
        } catch (e) {
          // ignore transient errors
        }
      }, 3000);
    }

    if (tryAgainBtn) {
      tryAgainBtn.addEventListener('click', () => {
        try {
          window.location.reload(true);
        } catch (_) {
          window.location.reload();
        }
      });
    }

    form.addEventListener('submit', async (e) => {
      e.preventDefault();
      failHint.classList.add('hidden');
      doneHint.classList.add('hidden');

      disablePayButton();
      statusBox.classList.remove('hidden');

      setPill("bg-yellow-100 text-yellow-800", "PENDING");
      statusText.textContent = "Sending request… check your phone to complete payment.";
      receiptRow.classList.add('hidden');
      setProgress(5);

      try {
        const res = await fetch(form.action, {
          method: "POST",
          body: new FormData(form),
          headers: { "X-Requested-With": "XMLHttpRequest" }
        });

        const data = await res.json();

        if (!res.ok || data.error) {
          statusText.textContent = data.error || "Failed to initiate payment.";
          showFailedState();
          return;
        }

        if (data.payment_id) {
          setProgress(20);
          startPolling(data.payment_id);
        } else {
          statusText.textContent = "Payment initiated, but missing payment ID.";
          setPill("bg-red-100 text-red-800", "ERROR");
          failHint.classList.remove('hidden');
          enablePayButton();
        }

      } catch (err) {
        statusText.textContent = "Network error. Please try again.";
        setPill("bg-red-100 text-red-800", "ERROR");
        failHint.classList.remove('hidden');
        enablePayButton();
      }
    });
  })();
</script>
{% endblock %}