/**
 * Success Modal - Focolari Voting System
 * Modal fullscreen per conferma ingresso con carosello multilingua
 */

import {Modal, WelcomeCarousel} from '../components';

interface SuccessModalProps {
    isOpen: boolean;
    onClose: () => void;
    userName?: string;
    durationMs?: number;
}

// Numero messaggi nel carosello
const CAROUSEL_MESSAGE_COUNT = 10;

export function SuccessModal({
                                 isOpen,
                                 onClose,
                                 userName,
                                 durationMs = 8000
                             }: SuccessModalProps) {
    // Calcola intervallo carosello per mostrare tutti i messaggi durante la durata
    const carouselIntervalMs = Math.floor(durationMs / (CAROUSEL_MESSAGE_COUNT * 1.2));

    return (
        <Modal
            isOpen={isOpen}
            onClose={onClose}
            variant="success"
            autoCloseMs={durationMs}
            fullscreen
        >
            <div className="flex flex-col items-center justify-center min-h-screen p-8">
                {/* Success Icon */}
                <div className="mb-8">
                    <div
                        className="inline-flex items-center justify-center w-32 h-32 rounded-full bg-white/20 animate-pulse-glow">
                        <svg
                            className="w-20 h-20 text-white"
                            fill="none"
                            viewBox="0 0 24 24"
                            stroke="currentColor"
                        >
                            <path
                                strokeLinecap="round"
                                strokeLinejoin="round"
                                strokeWidth={3}
                                d="M5 13l4 4L19 7"
                            />
                        </svg>
                    </div>
                </div>

                {/* Carosello Messaggi Benvenuto */}
                <WelcomeCarousel userName={userName} intervalMs={carouselIntervalMs}/>

                {/* Sub text */}
                <p className="text-2xl md:text-3xl text-white/80 mt-8 animate-fade-in">
                    Ingresso registrato con successo
                </p>

                {/* Auto-close indicator */}
                <div className="mt-12 w-full max-w-md">
                    <div className="w-full h-2 bg-white/30 rounded-full overflow-hidden">
                        <div
                            className="h-full bg-white rounded-full"
                            style={{
                                animation: `shrink ${durationMs}ms linear forwards`,
                            }}
                        />
                    </div>
                    <style>{`
            @keyframes shrink {
              from { width: 100%; }
              to { width: 0%; }
            }
          `}</style>
                </div>
            </div>
        </Modal>
    );
}

export default SuccessModal;