{% extends "tienda/base.html" %}
{% load static %}

{% block head %}
<script src="https://www.paypal.com/sdk/js?client-id={{ paypal_client_id }}&currency=EUR"></script>
{% endblock %}

{% block content %}
{% csrf_token %}
<div class="row mt-4">
    <div class="col-12">
        <h2>Añadir cuenta de PayPal</h2>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{% url 'portal_usuario' %}">Portal de Usuario</a></li>
                <li class="breadcrumb-item"><a href="{% url 'metodos_pago' %}">Métodos de Pago</a></li>
                <li class="breadcrumb-item active">Añadir PayPal</li>
            </ol>
        </nav>
    </div>
</div>

<div class="row mt-3 justify-content-center">
    <div class="col-md-6">
        <div class="card">
            <div class="card-body">
                <p class="text-muted mb-4">
                    Se realizará un pequeño pago de verificación de <strong>0,01 €</strong> para confirmar
                    tu cuenta de PayPal. Tu cuenta quedará guardada para futuras compras.
                </p>

                <div id="paypal-button-container" class="mb-3"></div>

                <div id="paypal-success" class="alert alert-success d-none">
                    ✅ Cuenta de PayPal guardada correctamente.
                    <a href="{% url 'metodos_pago' %}" class="alert-link">Ver mis métodos de pago</a>
                </div>
                <div id="paypal-error" class="alert alert-danger d-none"></div>

                <a href="{% url 'metodos_pago' %}" class="btn btn-outline-secondary w-100 mt-3">Cancelar</a>
            </div>
        </div>
    </div>
</div>

<script>
const CSRF_TOKEN = document.querySelector('[name=csrfmiddlewaretoken]').value;

paypal.Buttons({
    createOrder: async () => {
        const resp = await fetch('{% url "crear_orden_paypal_setup" %}', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRFToken': CSRF_TOKEN },
            body: JSON.stringify({}),
        });
        const data = await resp.json();
        if (!resp.ok) throw new Error(data.error || 'Error al iniciar la verificación');
        return data.id;
    },
    onApprove: async (data) => {
        const resp = await fetch('{% url "capturar_orden_paypal_setup" %}', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRFToken': CSRF_TOKEN },
            body: JSON.stringify({ orderID: data.orderID }),
        });
        const result = await resp.json();
        if (!resp.ok) {
            document.getElementById('paypal-error').textContent = result.error || 'Error al guardar la cuenta';
            document.getElementById('paypal-error').classList.remove('d-none');
            return;
        }
        const successDiv = document.getElementById('paypal-success');
        if (result.already_existed) {
            successDiv.textContent = `La cuenta ${result.email} ya estaba guardada.`;
        } else {
            successDiv.textContent = `✅ Cuenta ${result.email} guardada correctamente.`;
        }
        successDiv.innerHTML += ' <a href="{% url "metodos_pago" %}" class="alert-link">Ver mis métodos de pago</a>';
        successDiv.classList.remove('d-none');
        document.getElementById('paypal-button-container').style.display = 'none';
    },
    onError: (err) => {
        document.getElementById('paypal-error').textContent = 'Error en PayPal: ' + err;
        document.getElementById('paypal-error').classList.remove('d-none');
    },
}).render('#paypal-button-container');
</script>
{% endblock %}