import React from 'react';
import { useNavigate } from 'react-router-dom';

interface LabCardProps {
    title: string;
    description: string;
    icon: string;
    path: string;
    color: string;
    status?: string;
}

const LabCard: React.FC<LabCardProps> = ({ title, description, icon, path, color, status }) => {
    const navigate = useNavigate();

    return (
        <div
            onClick={() => navigate(path)}
            style={{
                background: 'rgba(255, 255, 255, 0.03)',
                backdropFilter: 'blur(10px)',
                border: `1px solid ${color}44`,
                borderRadius: '16px',
                padding: '24px',
                cursor: 'pointer',
                transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
                display: 'flex',
                flexDirection: 'column',
                gap: '12px',
                position: 'relative',
                overflow: 'hidden'
            }}
            className="lab-card"
        >
            <div style={{
                fontSize: '40px',
                marginBottom: '8px'
            }}>{icon}</div>

            <h3 style={{
                margin: 0,
                color: 'white',
                fontSize: '1.5rem',
                fontWeight: '600'
            }}>{title}</h3>

            <p style={{
                margin: 0,
                color: '#aaa',
                fontSize: '0.9rem',
                lineHeight: '1.5'
            }}>{description}</p>

            {status && (
                <div style={{
                    position: 'absolute',
                    top: '12px',
                    right: '12px',
                    fontSize: '10px',
                    background: `${color}22`,
                    color: color,
                    padding: '2px 8px',
                    borderRadius: '10px',
                    textTransform: 'uppercase',
                    letterSpacing: '1px',
                    border: `1px solid ${color}44`
                }}>
                    {status}
                </div>
            )}

            <div style={{
                marginTop: 'auto',
                color: color,
                fontSize: '0.8rem',
                fontWeight: 'bold',
                display: 'flex',
                alignItems: 'center',
                gap: '4px'
            }}>
                INITIATE PROTOCOL →
            </div>

            {/* Hover Glint Effect */}
            <div className="card-glint" />
        </div>
    );
};

const LabSelector: React.FC = () => {
    const labs: LabCardProps[] = [
        {
            title: "Chemistry Lab",
            description: "Advanced molecular design, synthesis planning, and reaction kinetics simulation.",
            icon: "🧪",
            path: "/lab/chemistry",
            color: "#646cff",
            status: "High Fidelity"
        },
        {
            title: "Oncology Lab",
            description: "Specialized hub for medicinal discovery, drug responses, and tumor modeling.",
            icon: "🔬",
            path: "/lab/oncology",
            color: "#ff4444",
            status: "Experimental"
        },
        {
            title: "Materials Lab",
            description: "Crystal lattice engineering, structural stress analysis, and property prediction.",
            icon: "🧱",
            path: "/lab/materials",
            color: "#ffaa00",
            status: "High Fidelity"
        },
        {
            title: "Physics Lab",
            description: "Classical and fluid dynamics simulations with real-time particle tracking.",
            icon: "⚛️",
            path: "/lab/physics",
            color: "#00d4ff",
            status: "Stable"
        },
        {
            title: "Propulsion Lab",
            description: "Hot-fire testing and aerospace engineering for deep-space transport.",
            icon: "🚀",
            path: "/lab/propulsion",
            color: "#ff4500",
            status: "Active"
        },
        {
            title: "Astro Lab",
            description: "Spectral analysis and orbital mechanics in high-fidelity star systems.",
            icon: "✨",
            path: "/lab/astro",
            color: "#00ffff",
            status: "Active"
        }
    ];

    return (
        <div style={{
            minHeight: '100%',
            width: '100%',
            background: 'linear-gradient(135deg, #0f0f0f 0%, #1a1a1a 100%)',
            padding: '60px 20px',
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            overflowY: 'auto'
        }}>
            <header style={{ textAlign: 'center', marginBottom: '60px' }}>
                <h1 style={{
                    fontSize: '3.5rem',
                    margin: 0,
                    background: 'linear-gradient(to right, #fff, #666)',
                    WebkitBackgroundClip: 'text',
                    WebkitTextFillColor: 'transparent',
                    fontWeight: '800'
                }}>QULAB INFINITE</h1>
                <p style={{ color: '#888', fontSize: '1.2rem', marginTop: '10px' }}>
                    Select a facility to begin autonomous invention and discovery.
                </p>
            </header>

            <div style={{
                display: 'grid',
                gridTemplateColumns: 'repeat(auto-fill, minmax(320px, 1fr))',
                gap: '30px',
                width: '100%',
                maxWidth: '1200px'
            }}>
                {labs.map((lab, index) => (
                    <LabCard key={index} {...lab} />
                ))}
            </div>

            <div style={{
                marginTop: '80px',
                padding: '30px',
                background: 'rgba(255,255,255,0.02)',
                borderRadius: '20px',
                border: '1px solid rgba(255,255,255,0.05)',
                width: '100%',
                maxWidth: '1000px',
                textAlign: 'center'
            }}>
                <h2 style={{ color: '#fff', fontSize: '1.8rem' }}>Meta-Orchestration</h2>
                <p style={{ color: '#aaa', marginBottom: '25px' }}>
                    Utilize the Hive Mind to coordinate multiple labs into a single autonomous workflow.
                </p>
                <button
                    onClick={() => { }} // Navigate to /workflow later
                    style={{
                        padding: '12px 30px',
                        background: 'transparent',
                        border: '1px solid #646cff',
                        color: '#646cff',
                        borderRadius: '30px',
                        cursor: 'pointer',
                        fontWeight: 'bold',
                        transition: 'all 0.3s'
                    }}
                    onMouseOver={(e) => {
                        e.currentTarget.style.background = '#646cff';
                        e.currentTarget.style.color = 'white';
                    }}
                    onMouseOut={(e) => {
                        e.currentTarget.style.background = 'transparent';
                        e.currentTarget.style.color = '#646cff';
                    }}
                >
                    ENTER WORKFLOW BUILDER
                </button>
            </div>

            <style>{`
                .lab-card:hover {
                    transform: translateY(-5px);
                    background: rgba(255, 255, 255, 0.06);
                    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
                }
                .lab-card:hover .card-glint {
                    left: 100%;
                }
                .card-glint {
                    position: absolute;
                    top: 0;
                    left: -100%;
                    width: 50%;
                    height: 100%;
                    background: linear-gradient(to right, transparent, rgba(255,255,255,0.1), transparent);
                    transition: left 0.6s ease;
                    pointer-events: none;
                }
            `}</style>
        </div>
    );
};

export default LabSelector;