'use client';

import React, { useRef, useState, useEffect } from 'react';
import { motion, AnimatePresence, useInView } from 'framer-motion';
import IphoneMockup from './IphoneMockup';
import { Volume2, VolumeX } from 'lucide-react';

const VideoTestimonial: React.FC = () => {
    const videoRef = useRef<HTMLVideoElement>(null);
    const containerRef = useRef(null);

    const isInView = useInView(containerRef, {
        once: true,
        amount: 0.3 // 30% visível já dispara
    });

    const [showModal, setShowModal] = useState(false);
    const [hasInteracted, setHasInteracted] = useState(false);

    const videoSrc = 'https://fivevents.com.br/web/uploads/videos/video_testimonial_sollax.mp4';

    useEffect(() => {
        if (isInView && !hasInteracted) {
            setShowModal(true);
            setHasInteracted(true);
            console.log("isInView:", isInView);
        }
        console.log("isInView2:", isInView);
    }, [isInView, hasInteracted]);

    const handleChoice = (withSound: boolean) => {
        if (!videoRef.current) return;

        videoRef.current.muted = !withSound;
        videoRef.current.play().catch(() => { });

        setShowModal(false);
    };

    return (
        <section className="relative py-20 overflow-hidden bg-gradient-to-br from-slate-50 via-white to-amber-50/30">
            {/* Background */}
            <div className="absolute top-10 -right-40 w-80 h-80 bg-gradient-to-r from-[#d5a033]/10 to-transparent rounded-full blur-3xl -z-10 animate-pulse"></div>
            <div className="absolute bottom-10 left-10 w-72 h-72 bg-gradient-to-l from-[#d5a033]/5 via-transparent to-[#d5a033]/5 rounded-full blur-2xl -z-10"></div>

            <div className="container mx-auto px-4 max-w-7xl">
                <div className="flex justify-center" ref={containerRef}>
                    <IphoneMockup size="lg" color="black">
                        <video
                            ref={videoRef}
                            loop
                            playsInline
                            className="w-full h-full object-cover"
                        >
                            <source src={videoSrc} type="video/mp4" />
                        </video>
                    </IphoneMockup>
                </div>
            </div>

            {/* Modal */}
            <AnimatePresence>
                {showModal && (
                    <motion.div
                        className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm"
                        initial={{ opacity: 0 }}
                        animate={{ opacity: 1 }}
                        exit={{ opacity: 0 }}
                    >
                        <motion.div
                            initial={{ scale: 0.8, opacity: 0, y: 40 }}
                            animate={{ scale: 1, opacity: 1, y: 0 }}
                            exit={{ scale: 0.8, opacity: 0, y: 40 }}
                            transition={{ duration: 0.3 }}
                            className="bg-white rounded-2xl shadow-2xl p-8 max-w-sm w-full text-center"
                        >
                            <h3 className="text-xl font-semibold mb-4 text-gray-800">
                                Ativar som do vídeo?
                            </h3>

                            <p className="text-gray-500 mb-6">
                                Você deseja assistir com áudio ou prefere continuar sem som?
                            </p>

                            <div className="flex gap-4 justify-center">
                                <button
                                    onClick={() => handleChoice(true)}
                                    className="flex items-center gap-2 px-5 py-3 bg-[#d5a033] text-white rounded-xl hover:opacity-90 transition"
                                >
                                    <Volume2 size={18} />
                                    Com som
                                </button>

                                <button
                                    onClick={() => handleChoice(false)}
                                    className="flex items-center gap-2 px-5 py-3 bg-gray-200 text-gray-700 rounded-xl hover:bg-gray-300 transition"
                                >
                                    <VolumeX size={18} />
                                    Sem som
                                </button>
                            </div>
                        </motion.div>
                    </motion.div>
                )}
            </AnimatePresence>
        </section>
    );
};

export default VideoTestimonial;