import os
from fasthtml.common import *

def render_paypal_recharge_widget(montant_usd: float = 10.00):
    """
    Génère le bouton de paiement PayPal (Smart Button) pour recharger les crédits.
    Utilise le Client ID Sandbox défini dans le fichier .env.
    """
    client_id = os.getenv("PAYPAL_CLIENT_ID")
    
    if not client_id:
        return Div("Clé PayPal (Client ID) manquante dans .env", style="color: red;")

    # Le script officiel de PayPal injecte les boutons de paiement
    script_paypal = Script(src=f"https://www.paypal.com/sdk/js?client-id={client_id}&currency=USD")
    
    container_id = f"paypal-button-container-{str(montant_usd).replace('.', '')}"
    
    script_logique = Script(f"""
        paypal.Buttons({{
            createOrder: function(data, actions) {{
                return actions.order.create({{
                    purchase_units: [{{
                        amount: {{
                            value: '{montant_usd}'
                        }}
                    }}]
                }});
            }},
            onApprove: function(data, actions) {{
                return actions.order.capture().then(function(details) {{
                    alert('Paiement réussi par ' + details.payer.name.given_name + '! Les crédits seront ajoutés.');
                    // Ici on fera un fetch vers ton backend python pour créditer l'utilisateur
                    fetch('/api/paypal/success', {{
                        method: 'POST',
                        headers: {{ 'Content-Type': 'application/json' }},
                        body: JSON.stringify({{ orderID: data.orderID }})
                    }}).then(res => window.location.reload());
                }});
            }}
        }}).render('#{container_id}');
    """)

    return Div(
        script_paypal,
        H3(f"Recharge de {montant_usd}$"),
        Div(id=container_id),
        script_logique,
        style="background: #1a1a1a; padding: 20px; border-radius: 8px; border: 1px solid #333; margin-top: 15px; text-align: center; max-width: 300px;"
    )