{% extends "base.html" %}
{% import 'components/macros.html' as ui %}

{% block title %}Payment Method - Gvelo Enterprise Platform{% endblock %}
{% block body_attrs %}class="payment-page" data-checkout-pending="{{ '1' if checkout_pending else '0' }}"{% endblock %}
{% block head_extra %}
<link rel="stylesheet" href="/static/style.css">
<link rel="stylesheet" href="/static/hil-pages/payment.css">
{% endblock %}
{% block content %}
<div class="hil-page-tools">
    {{ ui.button('Admin Dashboard', '/admin', 'secondary') }}
    {{ ui.button('Help Center', '/help-center', 'secondary') }}
</div>

<div class="container">

    <h1 class="brand">Gvelo Enterprise Platform</h1>

    <div class="card box">

        <h2>Select Payment Method</h2>
        <div class="total-display">
            Total: {{ currency_symbol }}{{ "%.2f"|format(total) }}
        </div>
        <div id="checkout-sync-panel" class="checkout-sync-panel {% if checkout_pending %}active{% endif %}">
            <strong>Payment screen is ready.</strong>
            <span id="checkout-sync-message">Cash sale can finish now. Cart sync continues automatically in the background.</span>
            {% if checkout_pending %}
                <div class="hil-inline-5fbf7a6361">
                    Cart is protected locally
                </div>
            {% endif %}
            <button type="button" id="checkout-sync-retry" class="cash hil-inline-b6d6023c3a">Retry Checkout Sync</button>
        </div>

        <!-- ===================== CASH: DEFAULT AND ALWAYS READY ===================== -->
        {% for method in all_methods %}
        {% if method.provider_code == "cash" %}
        <div class="method-card enabled default-method">
            <div class="method-header">
                <span class="hil-inline-db5923fc4f">💵</span>
                <span class="method-name">Cash</span>
                <span class="badge badge-global">Default</span>
                <span class="badge badge-configured">Ready</span>
                {% if method.frequency > 0 %}
                <span class="badge badge-popular">Used {{ method.frequency }}×</span>
                {% endif %}
            </div>
            <div class="method-description">Physical cash payment — no configuration needed.</div>
            <form method="POST" action="/process-payment/cash" id="cash-payment-form">
                <input type="hidden" name="_idempotency_key" value="{{ payment_key }}">
                <input type="hidden" name="checkout_snapshot" id="checkout-snapshot-input" value="">
                <div class="cash-fields">
                    <div>
                        <label for="amount_tendered">Cash Given by Customer</label>
                        <input id="amount_tendered" type="number" name="amount_tendered" step="0.01" min="0" inputmode="decimal" placeholder="Enter cash received" required>
                    </div>
                    <div>
                        <label for="customer_phone">Customer Phone</label>
                        <input id="customer_phone" type="tel" name="customer_phone" value="{{ last_customer_phone }}" placeholder="For SMS or WhatsApp receipt">
                    </div>
                    <div>
                        <label for="customer_name">Customer Name</label>
                        <input id="customer_name" type="text" name="customer_name" value="{{ last_customer_name }}" placeholder="Optional">
                    </div>
                    <div>
                        <label for="customer_email">Customer Email</label>
                        <input id="customer_email" type="email" name="customer_email" value="{{ last_customer_email }}" placeholder="For email receipt">
                    </div>
                </div>
                <div class="cash-shortcuts">
                    <button type="button" data-cash-amount="{{ '%.2f'|format(total) }}">Exact</button>
                    <button type="button" data-cash-amount="500">500</button>
                    <button type="button" data-cash-amount="1000">1000</button>
                    <button type="button" data-cash-amount="2000">2000</button>
                </div>
                <div class="cash-change-box">
                    <div class="cash-change-line">
                        <span>Total goods</span>
                        <span id="cash-total-display">{{ currency_symbol }}{{ "%.2f"|format(total) }}</span>
                    </div>
                    <div class="cash-change-line">
                        <span>Cash given</span>
                        <span id="cash-received-display">{{ currency_symbol }}0.00</span>
                    </div>
                    <div class="cash-change-line">
                        <span id="cash-result-label">Balance to give customer</span>
                        <span id="cash-change-display">{{ currency_symbol }}0.00</span>
                    </div>
                    <div id="cash-warning" class="cash-warning">Cash given is below the sale total.</div>
                </div>
                <button class="cash" type="submit" id="cash-submit">Complete Cash Sale & Open Receipt</button>
            </form>
        </div>
        {% endif %}
        {% endfor %}

        <!-- ===================== OTHER METHODS BY FREQUENCY ===================== -->
        <div class="section-title">Other Payment Methods</div>
        <p class="hil-inline-c2cf2ca2d4">
            Methods are sorted by how often they are used. Ask your admin to configure any method.
        </p>

        {% for method in all_methods %}
        {% if method.provider_code != "cash" %}
        <div class="method-card {% if method.is_configured %}enabled{% else %}not-configured{% endif %}">
            <div class="method-header">
                <span class="hil-inline-db5923fc4f">{{ method.icon.split(' ')[0] }}</span>
                <span class="method-name">{{ method.name }}</span>
                {% if method.is_configured %}
                <span class="badge badge-configured">Ready</span>
                {% else %}
                <span class="badge badge-not-configured">Not Configured</span>
                {% endif %}
                {% if method.frequency > 0 %}
                <span class="badge badge-popular">Used {{ method.frequency }}×</span>
                {% endif %}
                {% if method.is_global %}
                <span class="badge badge-global">Global</span>
                {% endif %}
            </div>

            {% if method.frequency > 0 %}
            <div class="frequency-bar">
                <div class="frequency-fill" style="width: {{ [method.frequency * 10, 100]|min }}%;"></div>
            </div>
            {% endif %}

            <div class="method-description">{{ method.description }}</div>

            {% if method.is_configured %}
                {% if method.provider_code == "mpesa" %}
                <form method="POST" action="/process-payment/mpesa" class="provider-form">
                    <input type="hidden" name="_idempotency_key" value="{{ payment_key }}">
                    <input type="hidden" name="checkout_snapshot" class="checkout-snapshot-input" value="">
                    <label for="mpesa-phone">Phone Number</label>
                    <input id="mpesa-phone" type="tel" name="phone" value="{{ last_customer_phone }}" placeholder="e.g. 2547XXXXXXXX or 07XXXXXXXX" required>
                    <label for="mpesa-mode">M-Pesa Mode</label>
                    <select id="mpesa-mode" name="mpesa_mode">
                      {% set default_mpesa_mode = method.shop_config.get('mpesa_default_mode', method.shop_config.get('mpesa_mode', 'paybill')) if method.shop_config else 'paybill' %}
                      <option value="paybill" {{ 'selected' if default_mpesa_mode == 'paybill' else '' }}>Paybill STK Prompt</option>
                      <option value="till" {{ 'selected' if default_mpesa_mode == 'till' else '' }}>Till Number STK Prompt</option>
                      <option value="send_money" {{ 'selected' if default_mpesa_mode == 'send_money' else '' }}>Send Money / B2C</option>
                    </select>
                    <label for="mpesa-reference">Account Reference</label>
                    <input id="mpesa-reference" type="text" name="reference" placeholder="Receipt or account reference">
                    <button class="mpesa" type="submit">📱 Pay with M-Pesa</button>
                </form>

                {% elif method.provider_code == "paypal" %}
                <form method="POST" action="/process-payment/paypal" class="provider-form">
                    <input type="hidden" name="_idempotency_key" value="{{ payment_key }}">
                    <input type="hidden" name="checkout_snapshot" class="checkout-snapshot-input" value="">
                    <button class="paypal" type="submit">🌍 Pay with PayPal</button>
                </form>

                {% elif method.provider_code == "stripe" %}
                <form method="POST" action="/process-payment/stripe" class="provider-form">
                    <input type="hidden" name="_idempotency_key" value="{{ payment_key }}">
                    <input type="hidden" name="checkout_snapshot" class="checkout-snapshot-input" value="">
                    <button class="stripe" type="submit">💳 Pay with Card (Stripe)</button>
                </form>

                {% elif method.provider_code == "paystack" %}
                <form method="POST" action="/process-payment/paystack" class="provider-form">
                    <input type="hidden" name="_idempotency_key" value="{{ payment_key }}">
                    <input type="hidden" name="checkout_snapshot" class="checkout-snapshot-input" value="">
                    <label for="paystack-email">Email</label>
                    <input id="paystack-email" type="email" name="email" placeholder="customer@example.com" required>
                    <button class="paystack" type="submit">⚡ Pay with Paystack</button>
                </form>

                {% elif method.provider_code == "flutterwave" %}
                <form method="POST" action="/process-payment/flutterwave" class="provider-form">
                    <input type="hidden" name="_idempotency_key" value="{{ payment_key }}">
                    <input type="hidden" name="checkout_snapshot" class="checkout-snapshot-input" value="">
                    <label for="flutterwave-email">Email</label>
                    <input id="flutterwave-email" type="email" name="email" placeholder="customer@example.com" required>
                    <label for="flutterwave-phone">Phone (optional)</label>
                    <input id="flutterwave-phone" type="tel" name="phone" placeholder="e.g. 2547XXXXXXXX">
                    <button class="flutterwave" type="submit">🦋 Pay with Flutterwave</button>
                </form>

                {% elif method.provider_code == "wise" %}
                <form method="POST" action="/process-payment/wise" class="provider-form">
                    <input type="hidden" name="_idempotency_key" value="{{ payment_key }}">
                    <input type="hidden" name="checkout_snapshot" class="checkout-snapshot-input" value="">
                    <button class="wise" type="submit">🌐 Pay with Wise Transfer</button>
                </form>

                {% elif method.provider_code == "bank_transfer" %}
                <form method="POST" action="/process-payment/bank_transfer" class="provider-form">
                    <input type="hidden" name="_idempotency_key" value="{{ payment_key }}">
                    <input type="hidden" name="checkout_snapshot" class="checkout-snapshot-input" value="">
                    <button class="bank" type="submit">🏦 Pay by Bank Transfer</button>
                </form>
                {% endif %}
            {% else %}
                <div class="config-note">
                    ⚠️ This payment method is not configured for this shop yet.
                    Please ask the admin to set it up in <a href="/payment-methods">Payment Methods</a>.
                </div>
            {% endif %}
        </div>
        {% endif %}
        {% endfor %}

        <hr class="hil-inline-7d998801d6">

        <!-- Legacy M-Pesa direct route still available -->
        <details class="hil-inline-8c10777363">
            <summary>Legacy M-Pesa route (direct)</summary>
            <form method="POST" action="/process-payment/mpesa">
                <input type="hidden" name="_idempotency_key" value="{{ payment_key }}">
                <input type="hidden" name="checkout_snapshot" class="checkout-snapshot-input" value="">
                <label>Phone Number:</label>
                <input type="tel" name="phone" placeholder="Enter phone e.g 2547XXXXXXXX" required>
                <button class="mpesa hil-inline-f469adfeb1" type="submit">📱 Legacy M-Pesa</button>
            </form>
        </details>

    </div>
</div>
<script>
let saleTotal = Number("{{ '%.2f'|format(total) }}");
const currencySymbol = "{{ currency_symbol }}";
const checkoutPending = document.body.dataset.checkoutPending === "1";
// Performance: prevent double/chain navigation when cashier taps checkout rapidly.
if (window.__gveloCheckoutHydrationStarted) {
    // ignore subsequent attempts
} else {
    window.__gveloCheckoutHydrationStarted = true;
}
const amountTenderedInput = document.getElementById("amount_tendered");
const cashReceivedDisplay = document.getElementById("cash-received-display");
const cashChangeDisplay = document.getElementById("cash-change-display");
const cashResultLabel = document.getElementById("cash-result-label");
const cashWarning = document.getElementById("cash-warning");
const cashSubmit = document.getElementById("cash-submit");
const cashPaymentForm = document.getElementById("cash-payment-form");
const checkoutSyncPanel = document.getElementById("checkout-sync-panel");
const checkoutSyncMessage = document.getElementById("checkout-sync-message");
const checkoutSyncRetry = document.getElementById("checkout-sync-retry");
const CHECKOUT_RECOVERY_KEY = "gvelo_checkout_recovery_snapshot_v1";
const PENDING_CART_SYNC_KEY = "gvelo_pending_cart_sync_v1";

function money(value) {
    return currencySymbol + Number(value || 0).toFixed(2);
}

function refreshCashChange() {
    if (!amountTenderedInput) {
        return;
    }
    const received = Number(amountTenderedInput.value || 0);
    const difference = received - saleTotal;
    cashReceivedDisplay.textContent = money(received);
    cashResultLabel.textContent = difference >= 0 ? "Balance to give customer" : "Still owed by customer";
    cashChangeDisplay.textContent = money(Math.abs(difference));
    cashWarning.style.display = difference < 0 ? "block" : "none";
    cashSubmit.disabled = difference < 0;
    cashSubmit.style.opacity = difference < 0 ? "0.65" : "1";
}

function checkoutTrace(eventName, detail) {
    try {
        const rows = JSON.parse(localStorage.getItem("gvelo_checkout_trace_v1") || "[]");
        rows.push(Object.assign({
            event: eventName,
            at: new Date().toISOString(),
            route: location.pathname
        }, detail || {}));
        localStorage.setItem("gvelo_checkout_trace_v1", JSON.stringify(rows.slice(-80)));
    } catch (_) {}
}

function checkoutHeaders(extra) {
    const headers = new Headers(extra || {});
    const token = document.querySelector('meta[name="csrf-token"]')?.content || "";
    if (token && !headers.has("X-CSRF-Token")) headers.set("X-CSRF-Token", token);
    headers.set("X-Gvelo-Direct-Checkout", "1");
    headers.set("Cache-Control", "no-store");
    return headers;
}

function pendingCartSyncs() {
    try {
        return JSON.parse(localStorage.getItem(PENDING_CART_SYNC_KEY) || "[]");
    } catch (_) {
        return [];
    }
}

function savePendingCartSyncs(rows) {
    try {
        localStorage.setItem(PENDING_CART_SYNC_KEY, JSON.stringify((rows || []).slice(-80)));
    } catch (_) {}
}

function restoreCheckoutPreview() {
    try {
        const snapshot = JSON.parse(localStorage.getItem(CHECKOUT_RECOVERY_KEY) || "{}");
        if (!Array.isArray(snapshot.cart) || !snapshot.cart.length) return;
        saleTotal = snapshot.cart.reduce((sum, item) => sum + Number(item.price || 0) * Number(item.qty || 1), 0);
        document.querySelectorAll(".total-display, #cash-total-display").forEach(node => {
            node.textContent = node.id === "cash-total-display" ? money(saleTotal) : "Total: " + money(saleTotal);
        });
        document.querySelectorAll("[data-cash-amount]").forEach(button => {
            if (button.textContent.trim().toLowerCase() === "exact") button.dataset.cashAmount = saleTotal.toFixed(2);
        });
        checkoutTrace("POS-CHECKOUT-CART-RESTORE", {cart_size: snapshot.cart.length, total: saleTotal});
    } catch (_) {}
}

function setPaymentFormsEnabled(enabled) {
    document.querySelectorAll(".provider-form button[type='submit'], .provider-form input, .provider-form select, .provider-form textarea").forEach(element => {
        if (element.name === "csrf_token") return;
        element.disabled = !enabled;
    });
    refreshCashChange();
}

function checkoutTokenReady() {
    const tokenInput = document.querySelector('input[name="_idempotency_key"]');
    return Boolean(tokenInput && tokenInput.value && tokenInput.value.trim());
}

function directFastFetch(url, options, timeoutMs) {
    const controller = "AbortController" in window ? new AbortController() : null;
    const timer = controller ? setTimeout(() => controller.abort("checkout_route_sync_timeout"), timeoutMs || 12000) : null;
    const init = Object.assign({credentials: "same-origin", cache: "no-store"}, options || {});
    init.headers = checkoutHeaders(init.headers || {});
    if (controller) init.signal = controller.signal;
    return (window.__gveloNativeFetch || window.fetch.bind(window))(url, init).finally(() => {
        if (timer) clearTimeout(timer);
    });
}

function currentCheckoutSnapshot() {
    try {
        const stored = JSON.parse(localStorage.getItem(CHECKOUT_RECOVERY_KEY) || "{}");
        const cart = Array.isArray(stored.cart) ? stored.cart : [];
        return {
            transaction_id: stored.transaction_id || stored.checkout_id || ("LOCAL-CASH-" + Date.now().toString(36)),
            sync_state: pendingCartSyncs().length ? "SYNC_PENDING" : "LOCAL_CONFIRMED",
            cart,
            total: cart.reduce((sum, item) => sum + Number(item.price || 0) * Number(item.qty || 1), 0),
            cashier_context: {
                route: location.pathname,
                captured_at: new Date().toISOString()
            }
        };
    } catch (_) {
        return {transaction_id: "LOCAL-CASH-" + Date.now().toString(36), sync_state: "LOCAL_CONFIRMED", cart: [], total: saleTotal};
    }
}

function prepareLocalFirstCashPayload() {
    const snapshot = currentCheckoutSnapshot();
    if (!checkoutPending && (!Array.isArray(snapshot.cart) || !snapshot.cart.length)) {
        return null;
    }
    document.querySelectorAll(".checkout-snapshot-input, #checkout-snapshot-input").forEach(input => {
        input.value = JSON.stringify(snapshot);
    });
    return snapshot;
}

function syncPendingCartForPayment() {
    const rows = pendingCartSyncs();
    const timeoutMs = 6500; // faster sync to avoid dragging legacy M-Pesa

    if (!rows.length) {
        return directFastFetch("/api/cart", {method: "GET"}, timeoutMs)
            .then(response => response.json())
            .then(data => {
                if (data && Array.isArray(data.cart) && data.cart.length) {
                    checkoutTrace("POS-CHECKOUT-PAYMENT-LOAD", {server_cart_size: data.cart.length});
                    location.replace("/checkout");
                    return;
                }
                throw new Error("server_cart_empty");
            });
    }

    const [next, ...rest] = rows;
    savePendingCartSyncs(rest);

    return directFastFetch(
        "/api/cart/add",
        {
            method: "POST",
            headers: checkoutHeaders({
                "Content-Type": "application/json",
                "X-Gvelo-Request-Id": next.correlationId || "POS-CHECKOUT-REPLAY",
            }),
            body: JSON.stringify(next.payload || {}),
        },
        timeoutMs,
    )
        .then((response) => {
            if (!response.ok && response.status !== 202) throw new Error("cart_sync_failed");
            return syncPendingCartForPayment();
        })
        .catch((error) => {
            next.attempts = Number(next.attempts || 0) + 1;
            savePendingCartSyncs(rest.concat(next));
            throw error;
        });
}

function startPendingCheckoutHydration() {
    if (!checkoutPending) return;

    restoreCheckoutPreview();
    prepareLocalFirstCashPayload();
    if (cashSubmit) {
        cashSubmit.disabled = false;
        cashSubmit.style.opacity = "1";
        cashSubmit.textContent = "Complete Cash Sale & Open Receipt";
    }

    if (checkoutSyncMessage) {
        checkoutSyncMessage.textContent = "Payment screen is ready. Cart sync continues automatically in the background.";
    }

    checkoutTrace("POS-CHECKOUT-PAYMENT-LOAD", {pending: true, pending_syncs: pendingCartSyncs().length});

    syncPendingCartForPayment().catch(error => {
        checkoutTrace("POS-CHECKOUT-ROUTE-BLOCK", {source: "payment_hydration", error: String(error && error.message || error)});
        if (checkoutSyncMessage) checkoutSyncMessage.textContent = "Payment screen is ready. Cart sync continues automatically in the background (retry available).";
        if (checkoutSyncRetry) checkoutSyncRetry.style.display = "block";
    });
}

document.querySelectorAll("[data-cash-amount]").forEach(button => {
    button.addEventListener("click", () => {
        amountTenderedInput.value = Number(button.dataset.cashAmount).toFixed(2);
        refreshCashChange();
        amountTenderedInput.focus();
    });
});

if (amountTenderedInput) {
    amountTenderedInput.addEventListener("input", refreshCashChange);
    refreshCashChange();
}

if (checkoutSyncRetry) {
    checkoutSyncRetry.addEventListener("click", () => {
        checkoutSyncRetry.style.display = "none";
        if (checkoutSyncMessage) checkoutSyncMessage.textContent = "Retrying checkout sync. Cart remains protected locally.";
        syncPendingCartForPayment().catch(() => {
            checkoutSyncRetry.style.display = "block";
        });
    });
}

if (cashPaymentForm) {
    cashPaymentForm.addEventListener("submit", event => {
        const snapshot = prepareLocalFirstCashPayload();
        if (snapshot) {
            const tokenInput = document.querySelector('#cash-payment-form input[name="_idempotency_key"]');
            if (tokenInput && !tokenInput.value.trim()) {
                tokenInput.value = snapshot.transaction_id || ("LOCAL-CASH-" + Date.now().toString(36));
            }
            checkoutTrace("POS-LOCAL-SALE-CONFIRMED", {
                transaction_id: snapshot.transaction_id,
                sync_state: snapshot.sync_state,
                cart_size: Array.isArray(snapshot.cart) ? snapshot.cart.length : 0,
                total: snapshot.total
            });
        }
        checkoutTrace("POS-CASH-COMPLETE", {
            transaction_id: snapshot ? snapshot.transaction_id : "SERVER-CHECKOUT",
            sync_state: snapshot ? snapshot.sync_state : "SERVER_CONFIRMED",
            cart_size: snapshot && Array.isArray(snapshot.cart) ? snapshot.cart.length : 0
        });
        if (checkoutSyncPanel) checkoutSyncPanel.classList.add("active");
        if (checkoutSyncMessage) checkoutSyncMessage.textContent = "Completing cash sale. Sync will continue in the background.";
        if (checkoutSyncRetry) checkoutSyncRetry.style.display = "none";
        if (cashSubmit) {
            cashSubmit.disabled = true;
            cashSubmit.textContent = "Completing Cash Sale...";
        }
    }, true);
}

document.querySelectorAll(".provider-form, #cash-payment-form, details form[action^='/process-payment/']").forEach(form => {
    form.addEventListener("submit", () => {
        const snapshot = prepareLocalFirstCashPayload();
        if (!snapshot) return;
        const tokenInput = form.querySelector('input[name="_idempotency_key"]');
        if (tokenInput && !tokenInput.value.trim()) {
            tokenInput.value = snapshot.transaction_id || ("LOCAL-CHECKOUT-" + Date.now().toString(36));
        }
        const snapshotInput = form.querySelector('input[name="checkout_snapshot"]');
        if (snapshotInput) snapshotInput.value = JSON.stringify(snapshot);
    }, true);
});

startPendingCheckoutHydration();
</script>
{% endblock %}