import { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import Navbar from '../../components/Navbar';
import { getReferralBalance, isUserAuthenticated, getPublicSettings } from '../../api/api';
import type { PublicSettings } from '../../api/api';
import './Parrainage.css';

const TELEGRAM_URL = 'https://t.me/';

const steps = [
    {
        num: 1,
        title: 'Parrainez un ami',
        desc: 'Recommandez nos services à un proche. Il doit nous contacter directement sur Telegram pour s\'inscrire.',
        icon: 'fa-users',
    },
    {
        num: 2,
        title: 'Il passe sa 1ère commande',
        desc: 'Une fois votre ami inscrit et sa première commande validée, signalez-le nous sur Telegram.',
        icon: 'fa-circle-check',
    },
    {
        num: 3,
        title: 'Nous créditons votre compte',
        desc: 'L\'admin vérifie et crédite manuellement votre solde de parrainage. Vous êtes notifié dès que c\'est fait.',
        icon: 'fa-coins',
    },
    {
        num: 4,
        title: 'Utilisez votre solde',
        desc: 'Au moment du checkout, choisissez d\'utiliser votre solde ou de le cumuler pour une prochaine commande.',
        icon: 'fa-cart-shopping',
    },
];

export default function Parrainage() {
    const navigate = useNavigate();
    const [balance, setBalance] = useState<number>(0);
    const [loading, setLoading] = useState(true);
    const [settings, setSettings] = useState<PublicSettings | null>(null);

    useEffect(() => {
        if (!isUserAuthenticated()) {
            navigate('/login/client', { replace: true });
            return;
        }
        getPublicSettings().then((s) => {
            if (!s.referral_enabled) {
                navigate('/user/accueil', { replace: true });
                return;
            }
            setSettings(s);
            getReferralBalance().then((res) => {
                if (res.success) setBalance(res.balance);
                setLoading(false);
            });
        });
    }, [navigate]);

    return (
        <>
            <Navbar />
            <div className="parrainage-container">
                {/* En-tête */}
                <div className="parrainage-hero">
                    <div className="parrainage-hero-icon"><i className="fas fa-gift"></i></div>
                    <h1 className="parrainage-title">Programme de Parrainage</h1>
                    <p className="parrainage-subtitle">
                        Parrainez vos amis et cumulez du crédit sur votre compte
                    </p>
                </div>

                {/* Solde actuel */}
                <div className="parrainage-balance-card">
                    <div className="balance-label">Votre solde parrainage</div>
                    {loading ? (
                        <div className="balance-loading">Chargement...</div>
                    ) : (
                        <div className={`balance-amount ${balance > 0 ? 'has-balance' : ''}`}>
                            {balance.toFixed(2)} €
                        </div>
                    )}
                    {balance > 0 && (
                        <p className="balance-hint">
                            Utilisable au prochain checkout&nbsp;✓
                        </p>
                    )}
                </div>

                {/* Montant par parrainage */}
                {settings && settings.referral_amount > 0 && (
                    <div className="parrainage-reward-card">
                        <div className="reward-icon"><i className="fas fa-coins"></i></div>
                        <div className="reward-content">
                            <div className="reward-label">Crédit par filleul parrainé</div>
                            <div className="reward-amount">{settings.referral_amount.toFixed(2)} €</div>
                            <p className="reward-hint">
                                Vous recevrez ce montant sur votre solde dès que votre filleul
                                effectue sa première commande validée.
                            </p>
                        </div>
                    </div>
                )}

                {/* Étapes */}
                <div className="parrainage-steps-section">
                    <h2 className="parrainage-section-title">Comment ça marche ?</h2>
                    <div className="parrainage-steps">
                        {steps.map((step) => (
                            <div key={step.num} className="step-card">
                                <div className="step-icon"><i className={`fas ${step.icon}`}></i></div>
                                <div className="step-num">Étape {step.num}</div>
                                <h3 className="step-title">{step.title}</h3>
                                <p className="step-desc">{step.desc}</p>
                            </div>
                        ))}
                    </div>
                </div>

                {/* Règle zone minimum */}
                <div className="parrainage-warning-card">
                    <div className="warning-icon"><i className="fas fa-triangle-exclamation"></i></div>
                    <div className="warning-content">
                        <h3 className="warning-title">Règle du minimum de zone</h3>
                        <p className="warning-text">
                            Même avec un solde parrainage, vous devez atteindre le minimum de
                            commande de votre zone. Votre crédit couvre la différence mais ne
                            remplace pas le minimum requis.
                        </p>
                        <div className="warning-example">
                            <span className="example-label">Exemple :</span>
                            <span>
                                Solde <strong>50 €</strong> + Zone minimum <strong>50 €</strong>{' '}
                                → Commande totale minimum <strong>100 €</strong> (vous payez{' '}
                                <strong>50 €</strong>)
                            </span>
                        </div>
                    </div>
                </div>

                {/* Bouton Telegram */}
                <div className="parrainage-cta">
                    <p className="cta-text">
                        Prêt à parrainer ? Contactez-nous sur Telegram pour enregistrer votre
                        filleul.
                    </p>
                    <a
                        href={TELEGRAM_URL}
                        target="_blank"
                        rel="noopener noreferrer"
                        className="telegram-btn"
                    >
                        <i className="fab fa-telegram telegram-icon"></i>
                        Contacter sur Telegram
                    </a>
                </div>
            </div>
        </>
    );
}