/**
 * TaxiBook Partner - Cards View
 * ==============================
 * Payment cards management via Worldline/Saferpay
 */

const CardsView = ({ partner, setToast }) => {
    const [cards, setCards] = useState([]);
    const [loading, setLoading] = useState(true);
    const [addingCard, setAddingCard] = useState(false);
    const [prepaymentRequired, setPrepaymentRequired] = useState(partner?.prepayment_required || false);
    const [pendingRegistration, setPendingRegistration] = useState(null);
    
    // Utiliser l'API partenaire standard qui gère déjà l'authentification
    const apiRequest = async (endpoint, options = {}) => {
        try {
            return await window.partnerAPI.request(endpoint, options);
        } catch (error) {
            // L'erreur "Session expirée" est déjà gérée par partnerAPI
            throw error;
        }
    };
    
    useEffect(() => {
        loadCards();
        checkPendingRegistration();
    }, []);
    
    // Vérifier si on revient d'une inscription de carte
    const checkPendingRegistration = async () => {
        const urlParams = new URLSearchParams(window.location.search);
        const success = urlParams.get('success');
        
        // Récupérer le registration_id depuis l'URL ou le localStorage
        const registrationId = urlParams.get('registration_id') || localStorage.getItem('pending_card_registration');
        
        if (success === 'true' && registrationId) {
            console.log('✅ Retour de Saferpay, confirmation de la carte...', registrationId);
            // Confirmer l'enregistrement de la carte
            await assertCardRegistration(registrationId);
            // Nettoyer l'URL et le localStorage
            localStorage.removeItem('pending_card_registration');
            window.history.replaceState({}, document.title, window.location.pathname);
        } else if (success === 'false') {
            console.log('❌ Enregistrement de carte annulé');
            setToast({ message: 'L\'ajout de carte a été annulé', type: 'warning' });
            localStorage.removeItem('pending_card_registration');
            window.history.replaceState({}, document.title, window.location.pathname);
        }
    };
    
    const loadCards = async () => {
        setLoading(true);
        try {
            const data = await apiRequest('/payments/cards');
            
            if (data.success && data.data?.cards) {
                setCards(data.data.cards);
            } else {
                setCards([]);
            }
        } catch (error) {
            if (error.message !== 'Session expirée') {
                console.error('Erreur chargement cartes:', error);
                setCards([]);
            }
        } finally {
            setLoading(false);
        }
    };
    
    // Initier l'ajout de carte via Saferpay
    const initiateAddCard = async () => {
        setAddingCard(true);
        try {
            const currentUrl = window.location.href.split('?')[0];
            
            const data = await apiRequest('/payments/cards/init', {
                method: 'POST',
                body: JSON.stringify({
                    return_url: `${currentUrl}?success=true`,
                    fail_url: `${currentUrl}?success=false`
                })
            });
            
            if (data.success && data.data?.redirect_url) {
                // Sauvegarder le registration_id pour le callback
                localStorage.setItem('pending_card_registration', data.data.registration_id);
                // Rediriger vers Saferpay
                window.location.href = data.data.redirect_url;
            } else {
                setToast({ message: data.error || 'Erreur lors de l\'initialisation', type: 'error' });
                setAddingCard(false);
            }
        } catch (error) {
            if (error.message !== 'Session expirée') {
                console.error('Erreur:', error);
                setToast({ message: 'Erreur de connexion', type: 'error' });
            }
            setAddingCard(false);
        }
    };
    
    // Confirmer l'enregistrement après retour de Saferpay
    const assertCardRegistration = async (registrationId) => {
        setLoading(true);
        try {
            const storedRegistrationId = localStorage.getItem('pending_card_registration') || registrationId;
            
            const data = await apiRequest('/payments/cards/assert', {
                method: 'POST',
                body: JSON.stringify({
                    registration_id: storedRegistrationId
                })
            });
            
            if (data.success) {
                setToast({ message: 'Carte ajoutée avec succès!', type: 'success' });
                localStorage.removeItem('pending_card_registration');
                await loadCards();
            } else {
                setToast({ message: data.error || 'Erreur lors de l\'ajout de la carte', type: 'error' });
            }
        } catch (error) {
            if (error.message !== 'Session expirée') {
                console.error('Erreur:', error);
                setToast({ message: 'Erreur de connexion', type: 'error' });
            }
        } finally {
            setLoading(false);
        }
    };
    
    const setDefaultCard = async (cardId) => {
        try {
            const data = await apiRequest(`/payments/cards/${cardId}/default`, {
                method: 'PUT'
            });
            
            if (data.success) {
                setToast({ message: 'Carte définie par défaut', type: 'success' });
                await loadCards();
            } else {
                setToast({ message: 'Erreur lors de la définition', type: 'error' });
            }
        } catch (error) {
            if (error.message !== 'Session expirée') {
                console.error('Erreur:', error);
                setToast({ message: 'Erreur de connexion', type: 'error' });
            }
        }
    };
    
    const deleteCard = async (cardId) => {
        if (!confirm('Voulez-vous vraiment supprimer cette carte ?')) return;
        
        try {
            const data = await apiRequest(`/payments/cards/${cardId}`, {
                method: 'DELETE'
            });
            
            if (data.success) {
                setToast({ message: 'Carte supprimée', type: 'success' });
                await loadCards();
            } else {
                setToast({ message: 'Erreur lors de la suppression', type: 'error' });
            }
        } catch (error) {
            if (error.message !== 'Session expirée') {
                console.error('Erreur:', error);
                setToast({ message: 'Erreur de connexion', type: 'error' });
            }
        }
    };
    
    const togglePrepayment = async () => {
        try {
            const newValue = !prepaymentRequired;
            
            const data = await apiRequest('/partners/settings', {
                method: 'PUT',
                body: JSON.stringify({ prepayment_required: newValue })
            });
            
            if (data.success) {
                setPrepaymentRequired(newValue);
                setToast({ 
                    message: newValue ? 'Prépaiement activé' : 'Prépaiement désactivé', 
                    type: 'success' 
                });
            }
        } catch (error) {
            if (error.message !== 'Session expirée') {
                console.error('Erreur:', error);
                setToast({ message: 'Erreur de mise à jour', type: 'error' });
            }
        }
    };
    
    const getCardBrandIcon = (brand) => {
        const icons = {
            'VISA': 'fa-cc-visa',
            'MASTERCARD': 'fa-cc-mastercard',
            'AMEX': 'fa-cc-amex',
            'default': 'fa-credit-card'
        };
        return icons[brand?.toUpperCase()] || icons.default;
    };
    
    const getCardGradient = (brand) => {
        const gradients = {
            'VISA': 'from-blue-600 to-blue-800',
            'MASTERCARD': 'from-red-500 to-orange-600',
            'AMEX': 'from-gray-600 to-gray-800',
            'default': 'from-gray-500 to-gray-700'
        };
        return gradients[brand?.toUpperCase()] || gradients.default;
    };
    
    const defaultCard = cards.find(c => c.is_default === 1);
    
    return (
        <div className="animate-fade-in">
            {/* Header */}
            <div className="flex items-center justify-between mb-8">
                <div>
                    <h1 className="text-2xl font-bold text-dark-900">Moyens de paiement</h1>
                    <p className="text-dark-500 mt-1">Gérez vos cartes bancaires et options de facturation</p>
                </div>
                <button
                    onClick={initiateAddCard}
                    disabled={addingCard}
                    className="gradient-primary text-white px-6 py-3 rounded-xl font-medium flex items-center gap-2 shadow-lg shadow-primary-500/20 hover:shadow-xl hover:shadow-primary-500/30 transition disabled:opacity-50"
                >
                    {addingCard ? (
                        <>
                            <i className="fas fa-spinner fa-spin"></i>
                            Redirection...
                        </>
                    ) : (
                        <>
                            <i className="fas fa-plus"></i>
                            Ajouter une carte
                        </>
                    )}
                </button>
            </div>

            <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
                {/* Colonne gauche: Cartes */}
                <div className="lg:col-span-2 space-y-6">
                    {/* Carte principale en grand format */}
                    <div className="bg-white rounded-2xl border-2 border-dark-200 overflow-hidden">
                        <div className="p-5 border-b border-dark-100 flex items-center justify-between">
                            <h3 className="font-semibold text-dark-900 flex items-center gap-2">
                                <i className="fas fa-star text-amber-500"></i>
                                Carte par défaut
                            </h3>
                            {defaultCard && (
                                <span className="text-xs text-emerald-600 bg-emerald-50 px-3 py-1 rounded-full font-medium">
                                    <i className="fas fa-check mr-1"></i>Active
                                </span>
                            )}
                        </div>
                        
                        <div className="p-6">
                            {loading ? (
                                <div className="flex items-center justify-center py-12">
                                    <Spinner size="lg" />
                                </div>
                            ) : defaultCard ? (
                                <div className={`relative bg-gradient-to-br ${getCardGradient(defaultCard.card_brand)} rounded-2xl p-6 text-white overflow-hidden`}>
                                    {/* Card pattern background */}
                                    <div className="absolute inset-0 opacity-10">
                                        <div className="absolute top-4 right-4 w-24 h-24 border border-white rounded-full"></div>
                                        <div className="absolute top-0 right-0 w-32 h-32 border border-white rounded-full"></div>
                                    </div>
                                    
                                    <div className="relative">
                                        <div className="flex items-center justify-between mb-8">
                                            <i className={`fab ${getCardBrandIcon(defaultCard.card_brand)} text-4xl`}></i>
                                            <div className="flex items-center gap-2">
                                                <div className="w-10 h-6 bg-amber-400 rounded-md"></div>
                                            </div>
                                        </div>
                                        
                                        <div className="mb-6">
                                            <p className="text-white/60 text-xs mb-1">Numéro de carte</p>
                                            <p className="text-2xl font-mono tracking-widest">•••• •••• •••• {defaultCard.card_last4}</p>
                                        </div>
                                        
                                        <div className="flex items-center justify-between">
                                            <div>
                                                <p className="text-white/60 text-xs mb-1">Titulaire</p>
                                                <p className="font-semibold">{defaultCard.card_holder_name || 'PARTENAIRE'}</p>
                                            </div>
                                            <div className="text-right">
                                                <p className="text-white/60 text-xs mb-1">Expiration</p>
                                                <p className="font-semibold">{String(defaultCard.card_expiry_month).padStart(2, '0')}/{String(defaultCard.card_expiry_year).slice(-2)}</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            ) : (
                                <div className="text-center py-12 border-2 border-dashed border-dark-200 rounded-2xl bg-dark-50">
                                    <div className="w-16 h-16 bg-dark-100 rounded-full flex items-center justify-center mx-auto mb-4">
                                        <i className="fas fa-credit-card text-2xl text-dark-400"></i>
                                    </div>
                                    <h3 className="font-semibold text-dark-700 mb-2">Aucune carte enregistrée</h3>
                                    <p className="text-dark-500 text-sm mb-4">Ajoutez une carte pour faciliter vos paiements</p>
                                    <button
                                        onClick={initiateAddCard}
                                        disabled={addingCard}
                                        className="gradient-primary text-white px-5 py-2.5 rounded-lg font-medium text-sm disabled:opacity-50"
                                    >
                                        {addingCard ? (
                                            <><i className="fas fa-spinner fa-spin mr-2"></i>Redirection...</>
                                        ) : (
                                            <><i className="fas fa-plus mr-2"></i>Ajouter une carte</>
                                        )}
                                    </button>
                                </div>
                            )}
                        </div>
                    </div>
                    
                    {/* Liste des autres cartes */}
                    {cards.length > 1 && (
                        <div className="bg-white rounded-2xl border-2 border-dark-200 overflow-hidden">
                            <div className="p-5 border-b border-dark-100">
                                <h3 className="font-semibold text-dark-900">
                                    Autres cartes ({cards.length - 1})
                                </h3>
                            </div>
                            
                            <div className="divide-y divide-dark-100">
                                {cards.filter(c => c.is_default !== 1).map((card) => (
                                    <div 
                                        key={card.id} 
                                        className="p-4 flex items-center justify-between hover:bg-dark-50 transition"
                                    >
                                        <div className="flex items-center gap-4">
                                            <div className={`w-12 h-8 rounded-md bg-gradient-to-br ${getCardGradient(card.card_brand)} flex items-center justify-center`}>
                                                <i className={`fab ${getCardBrandIcon(card.card_brand)} text-white text-sm`}></i>
                                            </div>
                                            <div>
                                                <p className="font-medium text-dark-900">{card.card_brand} •••• {card.card_last4}</p>
                                                <p className="text-sm text-dark-500">
                                                    Expire {String(card.card_expiry_month).padStart(2, '0')}/{String(card.card_expiry_year).slice(-2)}
                                                </p>
                                            </div>
                                        </div>
                                        
                                        <div className="flex items-center gap-3">
                                            <button
                                                onClick={() => setDefaultCard(card.id)}
                                                className="text-sm text-primary-600 hover:text-primary-700 font-medium"
                                            >
                                                Définir par défaut
                                            </button>
                                            <button
                                                onClick={() => deleteCard(card.id)}
                                                className="w-8 h-8 rounded-lg text-red-500 hover:bg-red-50 flex items-center justify-center transition"
                                            >
                                                <i className="fas fa-trash text-sm"></i>
                                            </button>
                                        </div>
                                    </div>
                                ))}
                            </div>
                        </div>
                    )}
                </div>
                
                {/* Colonne droite: Paramètres */}
                <div className="space-y-6">
                    {/* Config prépaiement */}
                    <div className="bg-white rounded-2xl border-2 border-dark-200 p-6">
                        <div className="flex items-start gap-4">
                            <div className="w-12 h-12 bg-primary-50 rounded-xl flex items-center justify-center flex-shrink-0">
                                <i className="fas fa-shield-alt text-primary-500 text-xl"></i>
                            </div>
                            <div className="flex-1">
                                <div className="flex items-center justify-between mb-2">
                                    <h3 className="font-semibold text-dark-900">Prépaiement requis</h3>
                                    <button
                                        onClick={togglePrepayment}
                                        className={`relative w-12 h-7 rounded-full transition ${
                                            prepaymentRequired ? 'bg-primary-500' : 'bg-dark-300'
                                        }`}
                                    >
                                        <div className={`absolute top-1 w-5 h-5 bg-white rounded-full shadow transition-all ${
                                            prepaymentRequired ? 'left-6' : 'left-1'
                                        }`}></div>
                                    </button>
                                </div>
                                <p className="text-dark-500 text-sm">
                                    Exiger un prépaiement pour les réservations via vos mini-sites de réservation.
                                </p>
                            </div>
                        </div>
                    </div>
                    
                    {/* Infos facturation */}
                    <div className="bg-white rounded-2xl border-2 border-dark-200 p-6">
                        <h3 className="font-semibold text-dark-900 mb-4 flex items-center gap-2">
                            <i className="fas fa-file-invoice text-blue-500"></i>
                            Informations de facturation
                        </h3>
                        
                        <div className="space-y-4 text-sm">
                            <div>
                                <p className="text-dark-500 mb-1">Entreprise</p>
                                <p className="font-medium text-dark-900">{partner?.name || 'Non défini'}</p>
                            </div>
                            <div>
                                <p className="text-dark-500 mb-1">Adresse</p>
                                <p className="font-medium text-dark-900">
                                    {partner?.billing_address || partner?.address || 'Non définie'}
                                </p>
                            </div>
                            <div>
                                <p className="text-dark-500 mb-1">Email de facturation</p>
                                <p className="font-medium text-dark-900">{partner?.billing_email || partner?.contact_email || 'Non défini'}</p>
                            </div>
                        </div>
                        
                        <button className="mt-4 w-full py-2.5 border-2 border-dark-200 rounded-xl text-dark-600 font-medium hover:bg-dark-50 transition text-sm">
                            <i className="fas fa-edit mr-2"></i>
                            Modifier les informations
                        </button>
                    </div>
                    
                    {/* Sécurité */}
                    <div className="bg-emerald-50 rounded-2xl border-2 border-emerald-100 p-5">
                        <div className="flex items-start gap-3">
                            <div className="w-10 h-10 bg-emerald-100 rounded-lg flex items-center justify-center flex-shrink-0">
                                <i className="fas fa-lock text-emerald-600"></i>
                            </div>
                            <div>
                                <h4 className="font-semibold text-emerald-900 text-sm mb-1">Paiements sécurisés</h4>
                                <p className="text-emerald-700 text-xs">
                                    Vos données bancaires sont sécurisées par Worldline/Saferpay, leader européen du paiement. 
                                    Nous ne stockons jamais vos numéros de carte - uniquement un token sécurisé.
                                </p>
                            </div>
                        </div>
                    </div>
                    
                    {/* Info Worldline */}
                    <div className="bg-blue-50 rounded-2xl border-2 border-blue-100 p-5">
                        <div className="flex items-start gap-3">
                            <div className="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center flex-shrink-0">
                                <i className="fas fa-info-circle text-blue-600"></i>
                            </div>
                            <div>
                                <h4 className="font-semibold text-blue-900 text-sm mb-1">Comment ça fonctionne ?</h4>
                                <p className="text-blue-700 text-xs">
                                    En cliquant sur "Ajouter une carte", vous serez redirigé vers la page sécurisée de 
                                    Worldline pour saisir vos informations bancaires. Une fois validée, votre carte 
                                    sera tokenisée et disponible pour les paiements.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};