// Mollie Components (hosted fields)
const mollie = Mollie(process.env.MOLLIE_PROFILE_ID, {
    locale: 'fr_FR',
    testmode: process.env.NODE_ENV !== 'production'
});

class MolliePaymentService {
    constructor() {
        this.mollie = mollie;
        this.cardHolder = null;
        this.cardNumber = null;
        this.expiryDate = null;
        this.verificationCode = null;
    }
    
    async initializeComponents() {
        try {
            // Create card components
            this.cardHolder = this.mollie.createComponent('cardHolder');
            this.cardNumber = this.mollie.createComponent('cardNumber');
            this.expiryDate = this.mollie.createComponent('expiryDate');
            this.verificationCode = this.mollie.createComponent('verificationCode');
            
            // Mount components to DOM
            this.cardHolder.mount('#card-holder');
            this.cardNumber.mount('#card-number');
            this.expiryDate.mount('#expiry-date');
            this.verificationCode.mount('#verification-code');
            
            // Add event listeners
            this.setupEventListeners();
            
        } catch (error) {
            console.error('Mollie components initialization failed:', error);
        }
    }
    
    setupEventListeners() {
        // Card number validation
        this.cardNumber.addEventListener('change', event => {
            if (event.error) {
                this.showError('Card number is invalid');
            } else {
                this.clearError();
            }
        });
        
        // Form submission
        document.getElementById('payment-form').addEventListener('submit', async (event) => {
            event.preventDefault();
            await this.processPayment();
        });
    }
    
    async processPayment() {
        try {
            // Get card token
            const { token, error } = await this.mollie.createToken();
            
            if (error) {
                this.showError(error.message);
                return;
            }
            
            // Create payment on server
            const paymentResponse = await fetch('/api/mollie/create-payment', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    cardToken: token,
                    amount: {
                        currency: 'EUR',
                        value: '99.99'
                    },
                    description: 'Premium Subscription',
                    redirectUrl: `${window.location.origin}/payment/return`,
                    webhookUrl: `${window.location.origin}/api/mollie/webhook`
                }),
            });
            
            const payment = await paymentResponse.json();
            
            if (payment.success) {
                // Redirect to payment page or confirmation
                if (payment.checkoutUrl) {
                    window.location.href = payment.checkoutUrl;
                } else {
                    window.location.href = '/payment/success';
                }
            } else {
                this.showError(payment.error);
            }
            
        } catch (error) {
            console.error('Payment processing failed:', error);
            this.showError('Payment processing failed. Please try again.');
        }
    }
    
    showError(message) {
        document.getElementById('payment-error').textContent = message;
        document.getElementById('payment-error').style.display = 'block';
    }
    
    clearError() {
        document.getElementById('payment-error').style.display = 'none';
    }
}

// Initialize Mollie payment service
document.addEventListener('DOMContentLoaded', () => {
    const paymentService = new MolliePaymentService();
    paymentService.initializeComponents();
});

// Mollie server-side integration
const { createMollieClient } = require('@mollie/api-client');

class MollieServerService {
    constructor() {
        this.mollieClient = createMollieClient({
            apiKey: process.env.MOLLIE_API_KEY,
        });
    }
    
    async createPayment(paymentData) {
        try {
            const payment = await this.mollieClient.payments.create({
                amount: paymentData.amount,
                description: paymentData.description,
                redirectUrl: paymentData.redirectUrl,
                webhookUrl: paymentData.webhookUrl,
                method: paymentData.method || null, // null allows all methods
                metadata: {
                    order_id: paymentData.orderId,
                    customer_id: paymentData.customerId
                }
            });
            
            return {
                id: payment.id,
                status: payment.status,
                checkoutUrl: payment.getCheckoutUrl(),
                amount: payment.amount,
                description: payment.description
            };
        } catch (error) {
            console.error('Mollie payment creation failed:', error);
            throw new Error('Failed to create payment');
        }
    }
    
    async createRecurringPayment(customerId, paymentData) {
        try {
            // First create customer if not exists
            let customer;
            try {
                customer = await this.mollieClient.customers.get(customerId);
            } catch (error) {
                customer = await this.mollieClient.customers.create({
                    name: paymentData.customerName,
                    email: paymentData.customerEmail
                });
            }
            
            // Create recurring payment
            const payment = await this.mollieClient.payments.create({
                amount: paymentData.amount,
                description: paymentData.description,
                customerId: customer.id,
                sequenceType: 'recurring',
                webhookUrl: paymentData.webhookUrl,
                metadata: {
                    subscription_id: paymentData.subscriptionId
                }
            });
            
            return payment;
        } catch (error) {
            console.error('Mollie recurring payment failed:', error);
            throw new Error('Failed to create recurring payment');
        }
    }
    
    async handleWebhook(paymentId) {
        try {
            const payment = await this.mollieClient.payments.get(paymentId);
            
            switch (payment.status) {
                case 'paid':
                    await this.handlePaymentPaid(payment);
                    break;
                case 'failed':
                case 'canceled':
                case 'expired':
                    await this.handlePaymentFailed(payment);
                    break;
                case 'pending':
                    await this.handlePaymentPending(payment);
                    break;
                default:
                    console.log(`Unhandled payment status: ${payment.status}`);
            }
            
            return payment;
        } catch (error) {
            console.error('Webhook processing failed:', error);
            throw new Error('Failed to process webhook');
        }
    }
    
    async handlePaymentPaid(payment) {
        console.log(`Payment paid: ${payment.id}`);
        
        // Update order status
        const orderId = payment.metadata?.order_id;
        if (orderId) {
            await this.updateOrderStatus(orderId, 'paid');
            await this.sendConfirmationEmail(orderId);
            await this.fulfillOrder(orderId);
        }
    }
    
    async handlePaymentFailed(payment) {
        console.log(`Payment failed: ${payment.id}, status: ${payment.status}`);
        
        // Update order status
        const orderId = payment.metadata?.order_id;
        if (orderId) {
            await this.updateOrderStatus(orderId, 'failed');
            await this.sendFailureEmail(orderId);
        }
    }
    
    async handlePaymentPending(payment) {
        console.log(`Payment pending: ${payment.id}`);
        
        // For bank transfers, SEPA, etc.
        const orderId = payment.metadata?.order_id;
        if (orderId) {
            await this.updateOrderStatus(orderId, 'pending');
            await this.sendPendingEmail(orderId);
        }
    }
    
    async getPaymentMethods(amount, locale = 'fr_FR') {
        try {
            const methods = await this.mollieClient.methods.list({
                amount: amount,
                locale: locale,
                include: 'pricing'
            });
            
            return methods.map(method => ({
                id: method.id,
                description: method.description,
                image: method.image,
                pricing: method.pricing
            }));
        } catch (error) {
            console.error('Get payment methods failed:', error);
            throw new Error('Failed to retrieve payment methods');
        }
    }
    
    async refundPayment(paymentId, amount = null) {
        try {
            const refund = await this.mollieClient.payments_refunds.create({
                paymentId: paymentId,
                amount: amount, // null for full refund
                description: 'Customer refund request'
            });
            
            return refund;
        } catch (error) {
            console.error('Refund failed:', error);
            throw new Error('Failed to process refund');
        }
    }
    
    // Helper methods
    async updateOrderStatus(orderId, status) {
        // Update order in database
        console.log(`Updating order ${orderId} to status: ${status}`);
    }
    
    async sendConfirmationEmail(orderId) {
        // Send order confirmation email
        console.log(`Sending confirmation email for order: ${orderId}`);
    }
    
    async sendFailureEmail(orderId) {
        // Send payment failure email
        console.log(`Sending failure email for order: ${orderId}`);
    }
    
    async sendPendingEmail(orderId) {
        // Send pending payment email
        console.log(`Sending pending email for order: ${orderId}`);
    }
    
    async fulfillOrder(orderId) {
        // Start order fulfillment process
        console.log(`Fulfilling order: ${orderId}`);
    }
}

// Express.js routes
const mollieService = new MollieServerService();

app.post('/api/mollie/create-payment', async (req, res) => {
    try {
        const payment = await mollieService.createPayment(req.body);
        res.json({ success: true, payment });
    } catch (error) {
        res.status(500).json({ success: false, error: error.message });
    }
});

app.post('/api/mollie/webhook', async (req, res) => {
    try {
        const paymentId = req.body.id;
        await mollieService.handleWebhook(paymentId);
        res.status(200).send('OK');
    } catch (error) {
        res.status(500).json({ error: error.message });
    }
});

app.get('/api/mollie/payment-methods', async (req, res) => {
    try {
        const { amount, locale } = req.query;
        const methods = await mollieService.getPaymentMethods(
            { currency: 'EUR', value: amount },
            locale
        );
        res.json({ methods });
    } catch (error) {
        res.status(500).json({ error: error.message });
    }
});