import { useRef } from "react";
import { Link } from "react-router-dom";
import { CheckCircle, ArrowRight, Box, Layers, Zap } from "lucide-react";
import { motion, useScroll, useTransform } from "framer-motion";

interface Feature3DProps {
    onEnter?: () => void;
}

const Feature3D = ({ onEnter }: Feature3DProps) => {
    const targetRef = useRef<HTMLDivElement>(null);
    const { scrollYProgress } = useScroll({
        target: targetRef,
        offset: ["start end", "end start"],
    });

    const y = useTransform(scrollYProgress, [0, 1], [100, -100]);
    const rotate = useTransform(scrollYProgress, [0, 1], [0, 45]);

    return (
        <section ref={targetRef} className="py-20 bg-slate-950 overflow-hidden relative min-h-screen flex items-center">
            <div className="container px-4 mx-auto relative z-10">
                <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
                    {/* Text Content */}
                    <div>
                        <motion.div
                            initial={{ opacity: 0, x: -50 }}
                            whileInView={{ opacity: 1, x: 0 }}
                            transition={{ duration: 0.8 }}
                        >
                            <h2 className="text-4xl md:text-5xl font-bold tracking-tight mb-6 bg-clip-text text-transparent bg-gradient-to-r from-cyan-400 to-purple-500">
                                Digital Twin <br /> Visualization
                            </h2>
                            <p className="text-xl text-[var(--color-text-tertiary)] mb-8 leading-relaxed">
                                Experience your facility like never before. Our real-time 3D engine maps every sensor, plant, and compliance event to its exact physical location.
                            </p>

                            <ul className="space-y-4 mb-10">
                                {[
                                    { icon: Box, text: "Spatial Inventory Tracking" },
                                    { icon: Zap, text: "Live Environmental Heatmaps" },
                                    { icon: Layers, text: "Historical Time-Travel Playback" },
                                ].map((item, index) => (
                                    <motion.li
                                        key={index}
                                        initial={{ opacity: 0, y: 20 }}
                                        whileInView={{ opacity: 1, y: 0 }}
                                        transition={{ delay: index * 0.2, duration: 0.5 }}
                                        className="flex items-center text-lg font-medium text-slate-200"
                                    >
                                        <div className="w-10 h-10 rounded-full bg-cyan-500/10 flex items-center justify-center mr-4 text-cyan-400">
                                            <item.icon className="w-5 h-5" />
                                        </div>
                                        {item.text}
                                    </motion.li>
                                ))}
                            </ul>

                            {onEnter ? (
                                <button
                                    onClick={onEnter}
                                    className="inline-flex items-center px-8 py-4 rounded-full bg-cyan-600 text-white font-semibold hover:bg-cyan-500 transition-all shadow-lg shadow-cyan-500/25 border border-cyan-400/20"
                                >
                                    Enter 3D View <ArrowRight className="ml-2 w-5 h-5" />
                                </button>
                            ) : (
                                <Link
                                    to="/facility/3d"
                                    className="inline-flex items-center px-8 py-4 rounded-full bg-cyan-600 text-white font-semibold hover:bg-cyan-500 transition-all shadow-lg shadow-cyan-500/25 border border-cyan-400/20"
                                >
                                    Enter 3D View <ArrowRight className="ml-2 w-5 h-5" />
                                </Link>
                            )}
                        </motion.div>
                    </div>

                    {/* 3D Visuals */}
                    <div className="relative h-[600px] flex items-center justify-center">
                        {/* Floating Elements mimicking the AuraUI 3D vibe */}
                        <motion.div style={{ y, rotate }} className="relative w-full h-full max-w-md aspect-square">
                            {/* Central Sphere */}
                            <div className="absolute inset-0 m-auto w-64 h-64 rounded-full bg-gradient-to-tr from-cyan-500 to-blue-600 blur-md opacity-20 animate-pulse" />
                            <div className="absolute inset-0 m-auto w-60 h-60 rounded-full bg-gradient-to-tr from-cyan-400 to-blue-500 shadow-[0_0_50px_rgba(6,182,212,0.5)] border border-cyan-300/30 backdrop-blur-sm" />

                            {/* Floating Cubes */}
                            <motion.div
                                className="absolute top-10 right-10 w-20 h-20 bg-purple-500/20 rounded-xl border border-purple-400/30 backdrop-blur-md shadow-xl"
                                animate={{ y: [0, -20, 0], rotate: [0, 10, 0] }}
                                transition={{ duration: 4, repeat: Infinity, ease: "easeInOut" }}
                            />
                            <motion.div
                                className="absolute bottom-20 left-0 w-24 h-24 bg-lime-500/20 rounded-xl border border-lime-400/30 backdrop-blur-md shadow-xl"
                                animate={{ y: [0, 30, 0], rotate: [0, -5, 0] }}
                                transition={{ duration: 5, repeat: Infinity, ease: "easeInOut", delay: 1 }}
                            />

                            {/* Mock UI Card Floating */}
                            <motion.div
                                className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-80 bg-card/80 backdrop-blur-xl border border-border p-4 rounded-lg shadow-2xl"
                                initial={{ scale: 0.8, opacity: 0 }}
                                whileInView={{ scale: 1, opacity: 1 }}
                                transition={{ delay: 0.5 }}
                            >
                                <div className="flex items-center gap-3 mb-3">
                                    <div className="w-3 h-3 rounded-full bg-red-500" />
                                    <div className="w-3 h-3 rounded-full bg-yellow-500" />
                                    <div className="w-3 h-3 rounded-full bg-green-500" />
                                </div>
                                <div className="space-y-2">
                                    <div className="h-2 bg-muted rounded w-3/4" />
                                    <div className="h-2 bg-muted rounded w-1/2" />
                                    <div className="h-20 bg-muted/50 rounded w-full mt-4 flex items-center justify-center text-xs text-muted-foreground">
                                        Real-time Mesh Data
                                    </div>
                                </div>
                            </motion.div>
                        </motion.div>
                    </div>
                </div>
            </div>

            {/* Background Gradients */}
            <div className="absolute top-0 right-0 w-1/3 h-full bg-gradient-to-l from-primary/5 to-transparent pointer-events-none" />
            <div className="absolute bottom-0 left-0 w-1/3 h-full bg-gradient-to-r from-purple-500/5 to-transparent pointer-events-none" />
        </section>
    );
};

export default Feature3D;
