import { useNavigate } from "react-router";
import { Canvas } from "@react-three/fiber";
import { Environment, useGLTF } from "@react-three/drei";
import { Button } from "@/components/ui/button";

const models = [
    {
        name: "Motor de Combustión",
        url: "/3d/motor_de_combustion/scene.gltf",
        route: "/previewer",
    },
    {
        name: "Raspberry Pi Cam V2.1",
        url: "/3d/raspberry_pi_cam_v2.1/scene.gltf",
        route: "/previewer2",
    },
];

function ModelPreview({ url }: { url: string }) {
    const { scene } = useGLTF(url);

    // Define heuristic parameters for best perspective
    const parameters: Record<string, { position: [number, number, number]; rotation: [number, number, number]; scale: number }> = {
        "/3d/motor_de_combustion/scene.gltf": {
            position: [0, -1.5, 0],
            rotation: [0.2, Math.PI / 4, 0],
            scale: 0.01,
        },
        "/3d/raspberry_pi_cam_v2.1/scene.gltf": {
            position: [0, -0.5, 0],
            rotation: [0.1, Math.PI / 6, 0],
            scale: 0.5,
        },
    };

    const { position, rotation, scale } = parameters[url] || { position: [0, 0, 0], rotation: [0, 0, 0], scale: 0.02 };

    return <primitive object={scene} position={position} rotation={rotation} scale={scale} />;
}

export default function Home() {
    const navigate = useNavigate();

    return (
        <div className="w-full grow bg-gradient-to-br from-gray-100 to-gray-300/20 shadow-xl shadow-gray-400/10 flex flex-col items-center justify-center p-5 rounded-lg backdrop-blur-lg">
            <h1 className="text-4xl font-extrabold mb-8 font-display text-gray-900">Selecciona un Modelo 3D</h1>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                {models.map((model, index) => (
                    <div
                        key={index}
                        className="bg-white p-6 rounded-2xl shadow-lg flex flex-col items-center border border-white/20 transition-transform hover:scale-105 hover:shadow-xl"
                    >
                        {/* 3D Preview */}
                        <div className="w-64 h-64 bg-white rounded-xl overflow-hidden border border-white/20 shadow-md">
                            <Canvas camera={{ position: [0, 1, 3], fov: 30 }}>
                                <Environment preset="city" />
                                <ModelPreview url={model.url} />
                            </Canvas>
                        </div>

                        {/* Model Name */}
                        <h2 className="text-2xl font-semibold mt-6">{model.name}</h2>

                        {/* Navigation Button */}
                        <Button
                            className="mt-6 bg-gradient-to-r from-blue-600 to-purple-600 px-6 py-3 rounded-lg shadow-lg hover:from-blue-500 hover:to-purple-500 transition-all font-display"
                            onClick={() => navigate(model.route)}
                        >
                            Ver Modelo
                        </Button>
                    </div>
                ))}
            </div>
        </div>
    );
}

// Preload models for performance
models.forEach(model => useGLTF.preload(model.url));