Jeko Payment Widget

import React, { useState, useEffect, useRef } from "react";

// ============================================================
// TYPES
// ============================================================
type PaymentType = "firstPayment" | "earlyPayment" | "recoveryPrime";

interface JekoPaymentButtonProps {
    // Identifiant du contrat (obligatoire pour earlyPayment et recoveryPrime)
    contractId: string;
    // Type de paiement: firstPayment | earlyPayment | recoveryPrime
    paymentType?: PaymentType;
    // Email du client
    customerEmail?: string;
    // Nom du client
    customerName?: string;
    // Factures pré-sélectionnées (uniquement pour recoveryPrime)
    preselectedInvoiceIds?: string[];
    // Callback en cas de succès
    onSuccess?: (redirectUrl: string, data: any) => void;
    // Callback en cas d'erreur
    onError?: (message: string, data?: any) => void;
    // Classe CSS personnalisée
    className?: string;
    // Contenu du bouton
    children?: React.ReactNode;
}

// ============================================================
// CHARGEMENT DYNAMIQUE DU WIDGET
// ============================================================
const loadJekoWidget = (): Promise<any> => {
    return new Promise((resolve) => {
        if (window.JekoWidget) {
            resolve(window.JekoWidget);
            return;
        }
        const script = document.createElement("script");
        script.src = "{{ BASE_URL }}/api/paiements-payment-widget.js";
        script.onload = () => resolve(window.JekoWidget);
        script.onerror = () => resolve(null);
        document.head.appendChild(script);
    });
};

// ============================================================
// COMPOSANT PRINCIPAL
// ============================================================
const JekoPaymentButton: React.FC<JekoPaymentButtonProps> = ({
    contractId,
    paymentType = "firstPayment",
    customerEmail = "",
    customerName = "",
    preselectedInvoiceIds = [],
    onSuccess,
    onError,
    className = "",
    children,
}) => {
    const [isLoading, setIsLoading] = useState(false);
    const [isReady, setIsReady] = useState(false);
    const widgetRef = useRef<any>(null);

    useEffect(() => {
        const initWidget = async () => {
            try {
                const JekoWidget = await loadJekoWidget();
                if (!JekoWidget) {
                    console.error("❌ JekoWidget non chargé");
                    return;
                }

                widgetRef.current = new JekoWidget({
                    // Endpoint pour initialiser le paiement
                    backendEndpoint: process.env.REACT_APP_JEKO_API_URL || "{{ BASE_URL }}/api/paiements/init",
                    // Endpoint pour vérifier le contrat
                    contractCheckEndpoint: process.env.REACT_APP_JEKO_CONTRACT_CHECK_URL || "{{ BASE_URL }}/api/paiements/contrat/verifier",
                    // Devise par défaut
                    currency: "XOF",
                    // Timeout de la requête (ms)
                    timeout: 30000,
                    // Vérification automatique du contrat si contractId fourni
                    autoVerifyContract: true,
                    // Headers personnalisés
                    headers: {
                        "X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]')?.content || "",
                    },
                    // Callbacks
                    callbacks: {
                        onSuccess: (redirectUrl: string, data: any) => {
                            setIsLoading(false);
                            onSuccess?.(redirectUrl, data);
                            window.open(redirectUrl, "_blank");
                        },
                        onError: (message: string, data: any) => {
                            setIsLoading(false);
                            onError?.(message, data);
                        },
                        onOpen: () => setIsLoading(true),
                        onClose: () => setIsLoading(false),
                    },
                    // Personnalisation du thème (optionnel)
                    theme: {
                        primary: "#1D603D",
                        primaryDark: "#0B482F",
                        accent: "#E09518",
                        radius: "16px",
                    },
                    // Traductions personnalisées (optionnel)
                    translations: {
                        title: "Paiement sécurisé",
                        close: "Fermer",
                        back: "Retour",
                        stepContract: "Contrat",
                        stepMethod: "Paiement",
                        stepSummary: "Résumé",
                        chooseMethod: "Choisissez un moyen de paiement",
                        confirmAndPay: "Confirmer et payer",
                        processing: "Initialisation du paiement en cours...",
                    },
                });
                setIsReady(true);
            } catch (error) {
                console.error("❌ Erreur chargement widget Jeko:", error);
                onError?.(error instanceof Error ? error.message : "Erreur inconnue");
            }
        };
        initWidget();
    }, [onSuccess, onError]);

    /**
     * Génère une référence unique pour le paiement
     * Format: PAI-YYYYMMDDHHMMSS-TIMESTAMP-RANDOM-CODE
     */
    const generateReference = (): string => {
        const now = new Date();
        const timestamp = now.getTime();
        const random = Math.random().toString(36).substring(2, 10);
        const code = String(Math.floor(Math.random() * 9999) + 1).padStart(4, "0");
        const date = now.getFullYear() +
            String(now.getMonth() + 1).padStart(2, "0") +
            String(now.getDate()).padStart(2, "0") +
            String(now.getHours()).padStart(2, "0") +
            String(now.getMinutes()).padStart(2, "0") +
            String(now.getSeconds()).padStart(2, "0");
        return `PAI-${date}-${timestamp}-${random}-${code}`;
    };

    const handlePayment = () => {
        if (!widgetRef.current || !isReady) return;

        const reference = generateReference();

        // Construction des données selon le type de paiement
        const paymentData: any = {
            reference,
            paymentType,
            contractId,
            description: `Paiement via Jeko - ${paymentType}`,
            customerEmail,
            customerName,
            successUrl: window.location.origin + "/paiements/jeko/success",
            errorUrl: window.location.origin + "/paiements/jeko/error",
            metadata: {
                source: "react_app",
                timestamp: new Date().toISOString(),
            },
        };

        // Ajouter les factures pré-sélectionnées pour recoveryPrime
        if (paymentType === "recoveryPrime" && preselectedInvoiceIds.length > 0) {
            paymentData.preselectedInvoiceIds = preselectedInvoiceIds;
        }

        widgetRef.current.open(paymentData);
    };

    return (
        <button
            onClick={handlePayment}
            disabled={!isReady || isLoading}
            className={`btn-pay ${className}`}
            style={{
                background: "#1D603D",
                color: "#fff",
                border: "none",
                padding: "13px 24px",
                borderRadius: "10px",
                fontWeight: 600,
                fontSize: "15px",
                cursor: "pointer",
                width: "100%",
                transition: "all 0.2s",
                opacity: (!isReady || isLoading) ? 0.5 : 1,
            }}
        >
            {isLoading ? "Chargement..." : (children || "Payer avec Jeko")}
        </button>
    );
};

export default JekoPaymentButton;

// ============================================================
// EXEMPLES D'UTILISATION DES 3 TYPES
// ============================================================

/*
// 1) PREMIER PAIEMENT (firstPayment)
<JekoPaymentButton
    contractId="1093"
    paymentType="firstPayment"
    customerEmail="client@example.com"
    customerName="Jean Dupont"
    onSuccess={(url) => console.log("Succès", url)}
    onError={(msg) => console.error("Erreur", msg)}
>
    Payer la première prime
</JekoPaymentButton>

// 2) PAIEMENT ANTICIPÉ (earlyPayment)
<JekoPaymentButton
    contractId="12452"
    paymentType="earlyPayment"
    customerEmail="client@example.com"
    customerName="Jean Dupont"
    onSuccess={(url) => console.log("Succès", url)}
    onError={(msg) => console.error("Erreur", msg)}
>
    Payer en avance
</JekoPaymentButton>

// 3) RÉGULARISATION (recoveryPrime) avec pré-sélection
<JekoPaymentButton
    contractId="12452"
    paymentType="recoveryPrime"
    customerEmail="client@example.com"
    customerName="Jean Dupont"
    preselectedInvoiceIds={['173669', '3132514']}
    onSuccess={(url) => console.log("Succès", url)}
    onError={(msg) => console.error("Erreur", msg)}
>
    Régulariser mes impayés
</JekoPaymentButton>
*/

<template>
    <div>
        <!-- 1) PREMIER PAIEMENT -->
        <JekoPaymentButton
            contract-id="1093"
            payment-type="firstPayment"
            customer-email="client@example.com"
            customer-name="Jean Dupont"
            label="Payer la première prime"
            @success="handleSuccess"
            @error="handleError"
        />

        <!-- 2) PAIEMENT ANTICIPÉ -->
        <JekoPaymentButton
            :contract-id="earlyContractId"
            payment-type="earlyPayment"
            customer-email="client@example.com"
            customer-name="Jean Dupont"
            label="Payer en avance"
            @success="handleSuccess"
            @error="handleError"
        />

        <!-- 3) RÉGULARISATION avec pré-sélection -->
        <JekoPaymentButton
            :contract-id="recoveryContractId"
            payment-type="recoveryPrime"
            :preselected-invoice-ids="['173669', '3132514']"
            customer-email="client@example.com"
            customer-name="Jean Dupont"
            label="Régulariser mes impayés"
            @success="handleSuccess"
            @error="handleError"
        />
    </div>
</template>

<script>
import JekoPaymentButton from "./components/JekoPaymentButton.vue";

export default {
    name: "PaymentPage",
    components: { JekoPaymentButton },
    data() {
        return {
            earlyContractId: "12452",
            recoveryContractId: "12452",
        };
    },
    methods: {
        handleSuccess(redirectUrl, data) {
            console.log("✅ Paiement réussi", { redirectUrl, data });
        },
        handleError(message, data) {
            console.error("❌ Erreur de paiement", { message, data });
        },
    },
};
</script>

<!-- ============================================================ -->
<!-- COMPOSANT JekoPaymentButton.vue -->
<!-- ============================================================ -->

<template>
    <button
        @click="handlePayment"
        :disabled="!isReady || isLoading"
        class="btn-pay"
    >
        {{ isLoading ? "Chargement..." : label }}
    </button>
</template>

<script>
export default {
    name: "JekoPaymentButton",
    props: {
        // Identifiant du contrat (obligatoire)
        contractId: {
            type: String,
            required: true,
        },
        // Type de paiement: firstPayment | earlyPayment | recoveryPrime
        paymentType: {
            type: String,
            default: "firstPayment",
            validator: function(value) {
                return ["firstPayment", "earlyPayment", "recoveryPrime"].includes(value);
            },
        },
        // Email du client
        customerEmail: {
            type: String,
            default: "",
        },
        // Nom du client
        customerName: {
            type: String,
            default: "",
        },
        // Factures pré-sélectionnées (uniquement pour recoveryPrime)
        preselectedInvoiceIds: {
            type: Array,
            default: () => [],
        },
        // Libellé du bouton
        label: {
            type: String,
            default: "Payer avec Jeko",
        },
    },
    data() {
        return {
            widget: null,
            isReady: false,
            isLoading: false,
        };
    },
    mounted() {
        this.loadWidget();
    },
    methods: {
        /**
         * Charge le widget Jeko dynamiquement
         */
        loadWidget() {
            if (window.JekoWidget) {
                this.initWidget();
                return;
            }
            const script = document.createElement("script");
            script.src = process.env.VUE_APP_JEKO_WIDGET_URL || "{{ BASE_URL }}/api/paiements-payment-widget.js";
            script.onload = this.initWidget;
            script.onerror = () => {
                console.error("❌ Erreur chargement du widget Jeko");
                this.$emit("error", "Impossible de charger le widget");
            };
            document.head.appendChild(script);
        },

        /**
         * Initialise le widget avec la configuration
         */
        initWidget() {
            this.widget = new JekoWidget({
                // Endpoint pour initialiser le paiement
                backendEndpoint: process.env.VUE_APP_JEKO_API_URL || "{{ BASE_URL }}/api/paiements/init",
                // Endpoint pour vérifier le contrat
                contractCheckEndpoint: process.env.VUE_APP_JEKO_CONTRACT_CHECK_URL || "{{ BASE_URL }}/api/paiements/contrat/verifier",
                // Devise par défaut
                currency: "XOF",
                // Timeout de la requête (ms)
                timeout: 30000,
                // Vérification automatique du contrat si contractId fourni
                autoVerifyContract: true,
                // Headers personnalisés
                headers: {
                    "X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]')?.content || "",
                },
                // Callbacks
                callbacks: {
                    onSuccess: (redirectUrl, data) => {
                        this.isLoading = false;
                        this.$emit("success", redirectUrl, data);
                        window.open(redirectUrl, "_blank");
                    },
                    onError: (message, data) => {
                        this.isLoading = false;
                        this.$emit("error", message, data);
                    },
                    onOpen: () => {
                        this.isLoading = true;
                    },
                    onClose: () => {
                        this.isLoading = false;
                    },
                },
                // Personnalisation du thème (optionnel)
                theme: {
                    primary: "#1D603D",
                    primaryDark: "#0B482F",
                    accent: "#E09518",
                    radius: "16px",
                    fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
                    maxWidth: "550px",
                },
                // Traductions personnalisées (optionnel)
                translations: {
                    title: "Paiement sécurisé",
                    close: "Fermer",
                    back: "Retour",
                    stepContract: "Contrat",
                    stepMethod: "Paiement",
                    stepSummary: "Résumé",
                    chooseMethod: "Choisissez un moyen de paiement",
                    confirmAndPay: "Confirmer et payer",
                    processing: "Initialisation du paiement en cours...",
                    success: "Paiement initialisé",
                    error: "Échec du paiement",
                    retry: "Réessayer",
                    networkError: "Erreur réseau",
                    requiredField: "Ce champ est requis",
                    contractIdLabel: "Identifiant du contrat",
                    contractIdPlaceholder: "Ex: 345678",
                    verify: "Vérifier le contrat",
                    verifying: "Vérification en cours...",
                    loadingContract: "Chargement des informations du contrat...",
                },
            });
            this.isReady = true;
        },

        /**
         * Génère une référence unique pour le paiement
         * Format: PAI-YYYYMMDDHHMMSS-TIMESTAMP-RANDOM-CODE
         */
        generateReference() {
            const now = new Date();
            const timestamp = now.getTime();
            const random = Math.random().toString(36).substring(2, 10);
            const code = String(Math.floor(Math.random() * 9999) + 1).padStart(4, "0");
            const year = now.getFullYear();
            const month = String(now.getMonth() + 1).padStart(2, "0");
            const day = String(now.getDate()).padStart(2, "0");
            const hours = String(now.getHours()).padStart(2, "0");
            const minutes = String(now.getMinutes()).padStart(2, "0");
            const seconds = String(now.getSeconds()).padStart(2, "0");
            return `PAI-${year}${month}${day}${hours}${minutes}${seconds}-${timestamp}-${random}-${code}`;
        },

        /**
         * Gère le clic sur le bouton de paiement
         */
        handlePayment() {
            if (!this.widget || !this.isReady) return;

            const reference = this.generateReference();

            // Construction des données selon le type de paiement
            const paymentData = {
                reference,
                paymentType: this.paymentType,
                contractId: this.contractId,
                description: `Paiement via Jeko - ${this.paymentType}`,
                customerEmail: this.customerEmail,
                customerName: this.customerName,
                successUrl: window.location.origin + "/paiements/jeko/success",
                errorUrl: window.location.origin + "/paiements/jeko/error",
                metadata: {
                    source: "vue_app",
                    timestamp: new Date().toISOString(),
                },
            };

            // Ajouter les factures pré-sélectionnées pour recoveryPrime
            if (this.paymentType === "recoveryPrime" && this.preselectedInvoiceIds.length > 0) {
                paymentData.preselectedInvoiceIds = this.preselectedInvoiceIds;
            }

            this.widget.open(paymentData);
        },
    },
};
</script>

<style scoped>
.btn-pay {
    background: #1D603D;
    color: #fff;
    border: none;
    padding: 13px 24px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    width: 100%;
    transition: all 0.2s;
}
.btn-pay:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(29, 96, 61, 0.3);
}
.btn-pay:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
</style>

// ============================================================
// jeko-widget.service.ts
// ============================================================
import { Injectable, Inject, DOCUMENT } from "@angular/core";
import { Subject } from "rxjs";

export type PaymentType = "firstPayment" | "earlyPayment" | "recoveryPrime";

export interface JekoWidgetConfig {
    // Endpoint pour initialiser le paiement
    backendEndpoint: string;
    // Endpoint pour vérifier le contrat
    contractCheckEndpoint: string;
    // Devise par défaut
    currency: string;
    // Headers personnalisés
    headers?: Record<string, string>;
    // Timeout de la requête (ms)
    timeout?: number;
    // Vérification automatique du contrat
    autoVerifyContract?: boolean;
    // Personnalisation du thème
    theme?: {
        primary?: string;
        primaryDark?: string;
        accent?: string;
        radius?: string;
        fontFamily?: string;
        maxWidth?: string;
    };
    // Traductions personnalisées
    translations?: Record<string, string>;
}

export interface JekoPaymentData {
    // Référence unique du paiement
    reference: string;
    // Type de paiement: firstPayment | earlyPayment | recoveryPrime
    paymentType: PaymentType;
    // Identifiant du contrat
    contractId: string;
    // Description du paiement
    description?: string;
    // Email du client
    customerEmail?: string;
    // Nom du client
    customerName?: string;
    // Factures pré-sélectionnées (uniquement pour recoveryPrime)
    preselectedInvoiceIds?: string[];
    // URL de redirection en cas de succès
    successUrl?: string;
    // URL de redirection en cas d'erreur
    errorUrl?: string;
    // Métadonnées additionnelles
    metadata?: any;
}

@Injectable({ providedIn: "root" })
export class JekoWidgetService {
    private widget: any = null;
    private isReady = false;
    private successSubject = new Subject<{ redirectUrl: string; data: any }>();
    private errorSubject = new Subject<{ message: string; data?: any }>();

    constructor(@Inject(DOCUMENT) private document: Document) {}

    /**
     * Charge le widget Jeko dynamiquement
     */
    loadWidget(config: JekoWidgetConfig): Promise<void> {
        return new Promise((resolve) => {
            if (window["JekoWidget"]) {
                this.initWidget(config);
                resolve();
                return;
            }
            const script = this.document.createElement("script");
            script.src = "{{ BASE_URL }}/api/paiements-payment-widget.js";
            script.onload = () => {
                this.initWidget(config);
                resolve();
            };
            script.onerror = () => {
                console.error("❌ Erreur chargement du widget Jeko");
                resolve();
            };
            this.document.head.appendChild(script);
        });
    }

    /**
     * Initialise le widget avec la configuration
     */
    private initWidget(config: JekoWidgetConfig): void {
        if (!window["JekoWidget"]) return;

        this.widget = new window["JekoWidget"]({
            backendEndpoint: config.backendEndpoint,
            contractCheckEndpoint: config.contractCheckEndpoint,
            currency: config.currency || "XOF",
            timeout: config.timeout || 30000,
            autoVerifyContract: config.autoVerifyContract !== undefined ? config.autoVerifyContract : true,
            headers: config.headers || {},
            theme: config.theme || {
                primary: "#1D603D",
                primaryDark: "#0B482F",
                accent: "#E09518",
                radius: "16px",
            },
            translations: config.translations || {},
            callbacks: {
                onSuccess: (url: string, data: any) => {
                    this.successSubject.next({ redirectUrl: url, data });
                    window.open(url, "_blank");
                },
                onError: (msg: string, data: any) => {
                    this.errorSubject.next({ message: msg, data });
                },
            },
        });
        this.isReady = true;
    }

    /**
     * Ouvre le widget avec les données de paiement
     */
    openPayment(data: JekoPaymentData): void {
        if (!this.widget || !this.isReady) {
            console.error("❌ Widget Jeko non prêt");
            return;
        }
        this.widget.open(data);
    }

    /**
     * Observable des événements de succès
     */
    get onSuccess() {
        return this.successSubject.asObservable();
    }

    /**
     * Observable des événements d'erreur
     */
    get onError() {
        return this.errorSubject.asObservable();
    }

    /**
     * Ferme le widget
     */
    close(): void {
        if (this.widget) {
            this.widget.close();
        }
    }

    /**
     * Génère une référence unique pour le paiement
     * Format: PAI-YYYYMMDDHHMMSS-TIMESTAMP-RANDOM-CODE
     */
    generateReference(): string {
        const now = new Date();
        const timestamp = now.getTime();
        const random = Math.random().toString(36).substring(2, 10);
        const code = String(Math.floor(Math.random() * 9999) + 1).padStart(4, "0");
        const year = now.getFullYear();
        const month = String(now.getMonth() + 1).padStart(2, "0");
        const day = String(now.getDate()).padStart(2, "0");
        const hours = String(now.getHours()).padStart(2, "0");
        const minutes = String(now.getMinutes()).padStart(2, "0");
        const seconds = String(now.getSeconds()).padStart(2, "0");
        return `PAI-${year}${month}${day}${hours}${minutes}${seconds}-${timestamp}-${random}-${code}`;
    }
}

// ============================================================
// jeko-payment.component.ts
// ============================================================
import { Component, Input, OnInit, Output, EventEmitter } from "@angular/core";
import { JekoWidgetService, PaymentType } from "./jeko-widget.service";

@Component({
    selector: "app-jeko-payment",
    template: `
        <button
            (click)="handlePayment()"
            [disabled]="!isReady || isLoading"
            class="btn-pay"
        >
            {{ isLoading ? "Chargement..." : label }}
        </button>
    `,
    styles: [`
        .btn-pay {
            background: #1D603D;
            color: #fff;
            border: none;
            padding: 13px 24px;
            border-radius: 10px;
            font-weight: 600;
            font-size: 15px;
            cursor: pointer;
            width: 100%;
            transition: all 0.2s;
        }
        .btn-pay:hover:not(:disabled) {
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(29, 96, 61, 0.3);
        }
        .btn-pay:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
    `]
})
export class JekoPaymentComponent implements OnInit {
    // Identifiant du contrat (obligatoire)
    @Input() contractId!: string;
    // Type de paiement: firstPayment | earlyPayment | recoveryPrime
    @Input() paymentType: PaymentType = "firstPayment";
    // Email du client
    @Input() customerEmail: string = "";
    // Nom du client
    @Input() customerName: string = "";
    // Factures pré-sélectionnées (uniquement pour recoveryPrime)
    @Input() preselectedInvoiceIds: string[] = [];
    // Libellé du bouton
    @Input() label: string = "Payer avec Jeko";

    @Output() success = new EventEmitter<{ redirectUrl: string; data: any }>();
    @Output() error = new EventEmitter<{ message: string; data?: any }>();

    isReady = false;
    isLoading = false;

    constructor(private widgetService: JekoWidgetService) {}

    ngOnInit(): void {
        // Configuration du widget
        const config: JekoWidgetConfig = {
            backendEndpoint: "{{ BASE_URL }}/api/paiements/init",
            contractCheckEndpoint: "{{ BASE_URL }}/api/paiements/contrat/verifier",
            currency: "XOF",
            timeout: 30000,
            autoVerifyContract: true,
            theme: {
                primary: "#1D603D",
                primaryDark: "#0B482F",
                accent: "#E09518",
                radius: "16px",
            },
            translations: {
                title: "Paiement sécurisé",
                close: "Fermer",
                back: "Retour",
                stepContract: "Contrat",
                stepMethod: "Paiement",
                stepSummary: "Résumé",
                chooseMethod: "Choisissez un moyen de paiement",
                confirmAndPay: "Confirmer et payer",
                processing: "Initialisation du paiement en cours...",
            },
        };

        this.widgetService.loadWidget(config).then(() => {
            this.isReady = true;
        });

        this.widgetService.onSuccess.subscribe((result) => {
            this.isLoading = false;
            this.success.emit(result);
        });

        this.widgetService.onError.subscribe((result) => {
            this.isLoading = false;
            this.error.emit(result);
        });
    }

    /**
     * Gère le clic sur le bouton de paiement
     */
    handlePayment(): void {
        if (!this.isReady) return;

        this.isLoading = true;
        const reference = this.widgetService.generateReference();

        // Construction des données selon le type de paiement
        const paymentData: any = {
            reference,
            paymentType: this.paymentType,
            contractId: this.contractId,
            description: `Paiement via Jeko - ${this.paymentType}`,
            customerEmail: this.customerEmail,
            customerName: this.customerName,
            successUrl: window.location.origin + "/paiements/jeko/success",
            errorUrl: window.location.origin + "/paiements/jeko/error",
            metadata: {
                source: "angular_app",
                timestamp: new Date().toISOString(),
            },
        };

        // Ajouter les factures pré-sélectionnées pour recoveryPrime
        if (this.paymentType === "recoveryPrime" && this.preselectedInvoiceIds.length > 0) {
            paymentData.preselectedInvoiceIds = this.preselectedInvoiceIds;
        }

        this.widgetService.openPayment(paymentData);
    }
}

// ============================================================
// EXEMPLES D'UTILISATION DES 3 TYPES
// ============================================================

/*
// 1) PREMIER PAIEMENT (firstPayment)
<app-jeko-payment
    contractId="1093"
    paymentType="firstPayment"
    customerEmail="client@example.com"
    customerName="Jean Dupont"
    label="Payer la première prime"
    (success)="onPaymentSuccess($event)"
    (error)="onPaymentError($event)"
>
</app-jeko-payment>

// 2) PAIEMENT ANTICIPÉ (earlyPayment)
<app-jeko-payment
    contractId="12452"
    paymentType="earlyPayment"
    customerEmail="client@example.com"
    customerName="Jean Dupont"
    label="Payer en avance"
    (success)="onPaymentSuccess($event)"
    (error)="onPaymentError($event)"
>
</app-jeko-payment>

// 3) RÉGULARISATION (recoveryPrime) avec pré-sélection
<app-jeko-payment
    contractId="12452"
    paymentType="recoveryPrime"
    [preselectedInvoiceIds]="['173669', '3132514']"
    customerEmail="client@example.com"
    customerName="Jean Dupont"
    label="Régulariser mes impayés"
    (success)="onPaymentSuccess($event)"
    (error)="onPaymentError($event)"
>
</app-jeko-payment>
*/

'use client';

import React, { useState, useEffect, useRef } from "react";

// ============================================================
// TYPES
// ============================================================
type PaymentType = "firstPayment" | "earlyPayment" | "recoveryPrime";

interface JekoPaymentButtonProps {
    // Identifiant du contrat (obligatoire)
    contractId: string;
    // Type de paiement: firstPayment | earlyPayment | recoveryPrime
    paymentType?: PaymentType;
    // Email du client
    customerEmail?: string;
    // Nom du client
    customerName?: string;
    // Factures pré-sélectionnées (uniquement pour recoveryPrime)
    preselectedInvoiceIds?: string[];
    // Callback en cas de succès
    onSuccess?: (redirectUrl: string, data: any) => void;
    // Callback en cas d'erreur
    onError?: (message: string, data?: any) => void;
    // Classe CSS personnalisée
    className?: string;
    // Contenu du bouton
    children?: React.ReactNode;
}

declare global {
    interface Window {
        JekoWidget: any;
    }
}

// ============================================================
// CHARGEMENT DYNAMIQUE DU WIDGET
// ============================================================
const loadJekoWidget = (): Promise<any> => {
    return new Promise((resolve) => {
        if (typeof window === "undefined") {
            resolve(null);
            return;
        }
        if (window.JekoWidget) {
            resolve(window.JekoWidget);
            return;
        }
        const script = document.createElement("script");
        script.src = process.env.NEXT_PUBLIC_JEKO_WIDGET_URL || "{{ BASE_URL }}/api/paiements-payment-widget.js";
        script.onload = () => resolve(window.JekoWidget);
        script.onerror = () => resolve(null);
        document.head.appendChild(script);
    });
};

// ============================================================
// COMPOSANT PRINCIPAL
// ============================================================
export const JekoPaymentButton: React.FC<JekoPaymentButtonProps> = ({
    contractId,
    paymentType = "firstPayment",
    customerEmail = "",
    customerName = "",
    preselectedInvoiceIds = [],
    onSuccess,
    onError,
    className = "",
    children,
}) => {
    const [isLoading, setIsLoading] = useState(false);
    const [isReady, setIsReady] = useState(false);
    const widgetRef = useRef<any>(null);

    useEffect(() => {
        const initWidget = async () => {
            try {
                const JekoWidget = await loadJekoWidget();
                if (!JekoWidget) {
                    console.error("❌ JekoWidget non chargé");
                    return;
                }

                widgetRef.current = new JekoWidget({
                    // Endpoint pour initialiser le paiement
                    backendEndpoint: process.env.NEXT_PUBLIC_JEKO_API_URL || "{{ BASE_URL }}/api/paiements/init",
                    // Endpoint pour vérifier le contrat
                    contractCheckEndpoint: process.env.NEXT_PUBLIC_JEKO_CONTRACT_CHECK_URL || "{{ BASE_URL }}/api/paiements/contrat/verifier",
                    // Devise par défaut
                    currency: "XOF",
                    // Timeout de la requête (ms)
                    timeout: 30000,
                    // Vérification automatique du contrat si contractId fourni
                    autoVerifyContract: true,
                    // Headers personnalisés
                    headers: {
                        "X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]')?.getAttribute("content") || "",
                    },
                    // Callbacks
                    callbacks: {
                        onSuccess: (redirectUrl: string, data: any) => {
                            setIsLoading(false);
                            onSuccess?.(redirectUrl, data);
                            window.open(redirectUrl, "_blank");
                        },
                        onError: (message: string, data: any) => {
                            setIsLoading(false);
                            onError?.(message, data);
                        },
                        onOpen: () => setIsLoading(true),
                        onClose: () => setIsLoading(false),
                    },
                    // Personnalisation du thème (optionnel)
                    theme: {
                        primary: "#1D603D",
                        primaryDark: "#0B482F",
                        accent: "#E09518",
                        radius: "16px",
                        fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
                        maxWidth: "550px",
                    },
                    // Traductions personnalisées (optionnel)
                    translations: {
                        title: "Paiement sécurisé",
                        close: "Fermer",
                        back: "Retour",
                        stepContract: "Contrat",
                        stepMethod: "Paiement",
                        stepSummary: "Résumé",
                        chooseMethod: "Choisissez un moyen de paiement",
                        confirmAndPay: "Confirmer et payer",
                        processing: "Initialisation du paiement en cours...",
                        success: "Paiement initialisé",
                        error: "Échec du paiement",
                        retry: "Réessayer",
                        networkError: "Erreur réseau",
                        requiredField: "Ce champ est requis",
                        contractIdLabel: "Identifiant du contrat",
                        contractIdPlaceholder: "Ex: 345678",
                        verify: "Vérifier le contrat",
                        verifying: "Vérification en cours...",
                        loadingContract: "Chargement des informations du contrat...",
                    },
                });
                setIsReady(true);
            } catch (error) {
                console.error("❌ Erreur chargement widget Jeko:", error);
                onError?.(error instanceof Error ? error.message : "Erreur inconnue");
            }
        };
        initWidget();
    }, [onSuccess, onError]);

    /**
     * Génère une référence unique pour le paiement
     * Format: PAI-YYYYMMDDHHMMSS-TIMESTAMP-RANDOM-CODE
     */
    const generateReference = (): string => {
        const now = new Date();
        const timestamp = now.getTime();
        const random = Math.random().toString(36).substring(2, 10);
        const code = String(Math.floor(Math.random() * 9999) + 1).padStart(4, "0");
        const date = now.getFullYear() +
            String(now.getMonth() + 1).padStart(2, "0") +
            String(now.getDate()).padStart(2, "0") +
            String(now.getHours()).padStart(2, "0") +
            String(now.getMinutes()).padStart(2, "0") +
            String(now.getSeconds()).padStart(2, "0");
        return `PAI-${date}-${timestamp}-${random}-${code}`;
    };

    const handlePayment = () => {
        if (!widgetRef.current || !isReady) return;

        const reference = generateReference();

        // Construction des données selon le type de paiement
        const paymentData: any = {
            reference,
            paymentType,
            contractId,
            description: `Paiement via Jeko - ${paymentType}`,
            customerEmail,
            customerName,
            successUrl: window.location.origin + "/paiements/jeko/success",
            errorUrl: window.location.origin + "/paiements/jeko/error",
            metadata: {
                source: "nextjs_app",
                timestamp: new Date().toISOString(),
            },
        };

        // Ajouter les factures pré-sélectionnées pour recoveryPrime
        if (paymentType === "recoveryPrime" && preselectedInvoiceIds.length > 0) {
            paymentData.preselectedInvoiceIds = preselectedInvoiceIds;
        }

        widgetRef.current.open(paymentData);
    };

    return (
        <button
            onClick={handlePayment}
            disabled={!isReady || isLoading}
            className={`btn-pay ${className}`}
            style={{
                background: "#1D603D",
                color: "#fff",
                border: "none",
                padding: "13px 24px",
                borderRadius: "10px",
                fontWeight: 600,
                fontSize: "15px",
                cursor: "pointer",
                width: "100%",
                transition: "all 0.2s",
                opacity: (!isReady || isLoading) ? 0.5 : 1,
            }}
        >
            {isLoading ? "Chargement..." : (children || "Payer avec Jeko")}
        </button>
    );
};

export default JekoPaymentButton;

// ============================================================
// PAGE D'EXEMPLE (app/page.tsx)
// ============================================================

import { JekoPaymentButton } from "@/components/JekoPaymentButton";

export default function PaymentPage() {
    const handleSuccess = (redirectUrl: string, data: any) => {
        console.log("✅ Paiement réussi", { redirectUrl, data });
    };

    const handleError = (message: string, data?: any) => {
        console.error("❌ Erreur de paiement", { message, data });
    };

    return (
        <div style={{ maxWidth: 500, margin: "40px auto", padding: "0 20px" }}>
            <h1>💳 Paiement sécurisé</h1>

            <h3>1️⃣ Premier paiement (firstPayment)</h3>
            <p style={{ color: "#6b7280", fontSize: "14px" }}>
                Après validation d'un nouveau contrat. La vérification est automatique.
            </p>
            <JekoPaymentButton
                contractId="1093"
                paymentType="firstPayment"
                customerEmail="client@example.com"
                customerName="Jean Dupont"
                onSuccess={handleSuccess}
                onError={handleError}
            >
                Payer la première prime
            </JekoPaymentButton>

            <h3 style={{ marginTop: "24px" }}>2️⃣ Paiement anticipé (earlyPayment)</h3>
            <p style={{ color: "#6b7280", fontSize: "14px" }}>
                Le client renseigne son identifiant de contrat. La vérification est automatique.
            </p>
            <JekoPaymentButton
                contractId="12452"
                paymentType="earlyPayment"
                customerEmail="client@example.com"
                customerName="Jean Dupont"
                onSuccess={handleSuccess}
                onError={handleError}
            >
                Payer en avance
            </JekoPaymentButton>

            <h3 style={{ marginTop: "24px" }}>3️⃣ Régularisation (recoveryPrime)</h3>
            <p style={{ color: "#6b7280", fontSize: "14px" }}>
                Le client sélectionne les factures en attente. Pré-sélection possible.
            </p>
            <JekoPaymentButton
                contractId="12452"
                paymentType="recoveryPrime"
                preselectedInvoiceIds={['173669', '3132514']}
                customerEmail="client@example.com"
                customerName="Jean Dupont"
                onSuccess={handleSuccess}
                onError={handleError}
            >
                Régulariser mes impayés
            </JekoPaymentButton>
        </div>
    );
}