/**
 * return.js
 *
 * @description :: Page de retour après paiement FedaPay avec design moderne et redirection vers l'app mobile
 */

module.exports = {
    friendlyName: 'FedaPay return page',

    description: 'Page de retour web moderne après paiement FedaPay avec redirection vers l\'app mobile',

    inputs: {},

    exits: {
        success: {
            description: 'Renvoie une page HTML moderne avec redirection vers l\'app',
            responseType: 'ok'
        }
    },

    fn: async function (inputs, exits) {
        try {
            const q = this.req.query || {};
            
            // Paramètres renvoyés par FedaPay
            const status = q.status || 'success';
            const id = q.id || q.transaction_id || '';
            const reference = q.reference || '';
            const codeAbonnement = q.codeAbonnement || '';
            
            // Déterminer le statut et le message
            let statusMessage = 'Paiement traité avec succès !';
            let statusClass = 'success';
            let icon = '🎉';
            
            if (status === 'canceled' || status === 'failed') {
                statusMessage = 'Paiement annulé ou échoué';
                statusClass = 'error';
                icon = '❌';
            } else if (status === 'pending') {
                statusMessage = 'Paiement en cours de traitement';
                statusClass = 'warning';
                icon = '⏳';
            }

            // Construire le deeplink
            const params = [];
            if (status) params.push(`status=${encodeURIComponent(status)}`);
            if (id) params.push(`transaction_id=${encodeURIComponent(id)}`);
            if (reference) params.push(`reference=${encodeURIComponent(reference)}`);
            if (codeAbonnement) params.push(`codeAbonnement=${encodeURIComponent(codeAbonnement)}`);
            
            const qs = params.length ? `?${params.join('&')}` : '';
            const deeplink = `corossol://payment/return${qs}`;

            const html = `<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Redirection vers Corossol Mobile</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            text-align: center;
            padding: 20px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .container {
            max-width: 600px;
            width: 100%;
            background: rgba(255,255,255,0.1);
            padding: 40px;
            border-radius: 20px;
            backdrop-filter: blur(10px);
            box-shadow: 0 8px 32px rgba(0,0,0,0.1);
            border: 1px solid rgba(255,255,255,0.2);
        }
        
        .status-icon {
            font-size: 4rem;
            margin-bottom: 20px;
            display: block;
        }
        
        h1 {
            font-size: 2.2rem;
            margin-bottom: 20px;
            font-weight: 600;
        }
        
        .spinner {
            border: 4px solid rgba(255,255,255,0.3);
            border-top: 4px solid white;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            animation: spin 1s linear infinite;
            margin: 30px auto;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        .message {
            font-size: 1.1rem;
            margin-bottom: 15px;
            opacity: 0.9;
        }
        
        .details {
            background: rgba(255,255,255,0.1);
            padding: 20px;
            border-radius: 10px;
            margin: 20px 0;
            text-align: left;
        }
        
        .detail-item {
            margin: 10px 0;
            display: flex;
            justify-content: space-between;
        }
        
        .detail-label {
            font-weight: 600;
            opacity: 0.8;
        }
        
        .detail-value {
            font-family: 'Courier New', monospace;
            background: rgba(255,255,255,0.2);
            padding: 5px 10px;
            border-radius: 5px;
        }
        
        .fallback {
            display: none;
            margin-top: 30px;
            padding: 20px;
            background: rgba(255,255,255,0.1);
            border-radius: 10px;
        }
        
        .fallback h2 {
            margin-bottom: 15px;
            color: #4ade80;
        }
        
        .fallback ol {
            text-align: left;
            max-width: 400px;
            margin: 15px auto;
            padding-left: 20px;
        }
        
        .fallback li {
            margin: 8px 0;
        }
        
        .fallback strong {
            color: #4ade80;
        }
        
        .manual-link {
            display: inline-block;
            margin-top: 20px;
            padding: 12px 24px;
            background: rgba(255,255,255,0.2);
            color: white;
            text-decoration: none;
            border-radius: 25px;
            border: 1px solid rgba(255,255,255,0.3);
            transition: all 0.3s ease;
        }
        
        .manual-link:hover {
            background: rgba(255,255,255,0.3);
            transform: translateY(-2px);
        }
        
        @media (max-width: 768px) {
            .container {
                padding: 30px 20px;
                margin: 10px;
            }
            
            h1 {
                font-size: 1.8rem;
            }
            
            .status-icon {
                font-size: 3rem;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <span class="status-icon">${icon}</span>
        <h1>${statusMessage}</h1>
        
        <div class="spinner"></div>
        <p class="message">Redirection vers l'application Corossol Mobile...</p>
        <p class="message">Veuillez patienter pendant la redirection.</p>
        
        <div class="details">
            <div class="detail-item">
                <span class="detail-label">Statut :</span>
                <span class="detail-value">${status}</span>
            </div>
            ${codeAbonnement ? `<div class="detail-item">
                <span class="detail-label">Code Abonnement :</span>
                <span class="detail-value">${codeAbonnement}</span>
            </div>` : ''}
            ${id ? `<div class="detail-item">
                <span class="detail-label">Transaction ID :</span>
                <span class="detail-value">${id}</span>
            </div>` : ''}
            ${reference ? `<div class="detail-item">
                <span class="detail-label">Référence :</span>
                <span class="detail-value">${reference}</span>
            </div>` : ''}
        </div>
        
        <a href="${deeplink}" class="manual-link">Ouvrir l'application manuellement</a>
    </div>

    <script>
        // Récupérer les paramètres de l'URL
        const urlParams = new URLSearchParams(window.location.search);
        const status = urlParams.get('status') || 'success';
        const codeAbonnement = urlParams.get('codeAbonnement');
        const transactionId = urlParams.get('transaction_id') || urlParams.get('id');
        const reference = urlParams.get('reference');
        
        // Construire le deeplink
        const deeplink = '${deeplink}';
        
        console.log('Redirection vers:', deeplink);
        
        // Rediriger vers l'application après 2 secondes
        setTimeout(() => {
            window.location.href = deeplink;
        }, 2000);
        
        // Fallback si l'app n'est pas installée après 6 secondes
        setTimeout(() => {
            document.querySelector('.spinner').style.display = 'none';
            document.querySelector('.fallback').style.display = 'block';
            document.querySelector('.message').innerHTML = 'Si l\'application ne s\'ouvre pas automatiquement, utilisez le lien ci-dessus.';
        }, 6000);
        
        // Fallback complet après 8 secondes
        setTimeout(() => {
            document.querySelector('.container').innerHTML = \`
                <span class="status-icon">✅</span>
                <h2>Paiement confirmé !</h2>
                <p>Votre abonnement a été activé avec succès.</p>
                <div class="details">
                    <div class="detail-item">
                        <span class="detail-label">Statut :</span>
                        <span class="detail-value">\${status}</span>
                    </div>
                    \${codeAbonnement ? \`<div class="detail-item">
                        <span class="detail-label">Code Abonnement :</span>
                        <span class="detail-value">\${codeAbonnement}</span>
                    </div>\` : ''}
                    \${transactionId ? \`<div class="detail-item">
                        <span class="detail-label">Transaction ID :</span>
                        <span class="detail-value">\${transactionId}</span>
                    </div>\` : ''}
                </div>
                <p>Si l'application ne s'ouvre pas automatiquement :</p>
                <ol style="text-align: left; max-width: 400px; margin: 20px auto;">
                    <li>Ouvrez l'application Corossol Mobile</li>
                    <li>Allez dans votre profil</li>
                    <li>Vérifiez le statut de votre abonnement</li>
                </ol>
                <p><strong>Code de transaction :</strong> \${transactionId || 'N/A'}</p>
                <a href="\${deeplink}" class="manual-link">Ouvrir l'application</a>
            \`;
        }, 8000);
    </script>
</body>
</html>`;

            this.res.set('Content-Type', 'text/html; charset=utf-8');
            return exits.success(html);
            
        } catch (e) {
            sails.log.error('Erreur page de retour FedaPay:', e);
            
            // Page d'erreur simple
            const errorHtml = `<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Erreur - Retour paiement</title>
    <style>
        body { font-family: Arial, sans-serif; text-align: center; padding: 50px; background: #f5f5f5; }
        .error { color: #d32f2f; background: #ffebee; padding: 20px; border-radius: 10px; margin: 20px; }
    </style>
</head>
<body>
    <h1>Erreur lors du traitement</h1>
    <div class="error">
        <p>Une erreur est survenue lors du traitement de votre retour de paiement.</p>
        <p>Veuillez contacter le support si le problème persiste.</p>
    </div>
    <p>Vous pouvez fermer cette fenêtre et vérifier le statut de votre abonnement dans l'application.</p>
</body>
</html>`;
            
            this.res.set('Content-Type', 'text/html; charset=utf-8');
            return exits.success(errorHtml);
        }
    }
}; 