import { Link } from '@inertiajs/react';
import { motion } from 'framer-motion';
import { home } from '@/routes';
import type { AuthLayoutProps } from '@/types';

const appName = import.meta.env.VITE_APP_NAME || 'Softsys GRH';
const [firstWord, ...restWords] = appName.split(' ');
const restAppName = restWords.join(' ');

export default function AuthSplitLayout({
    children,
    title,
    description,
}: AuthLayoutProps) {
    return (
        <div className="relative min-h-dvh flex items-center justify-center bg-[#f4faff] p-4 sm:p-8 overflow-hidden">
            {/* Ambient Aurora Gradients */}
            <div className="absolute top-[-10%] left-[-10%] w-[50vw] h-[50vh] rounded-full bg-primary/30 pointer-events-none mix-blend-multiply" style={{ filter: 'blur(120px)' }} />
            <div className="absolute bottom-[-10%] right-[-10%] w-[40vw] h-[60vh] rounded-full bg-secondary/20 pointer-events-none mix-blend-multiply" style={{ filter: 'blur(120px)' }} />
            <div className="absolute top-[30%] left-[20%] w-[30vw] h-[40vh] rounded-full bg-accent/30 pointer-events-none mix-blend-multiply" style={{ filter: 'blur(100px)' }} />

            {/* Premium Grain / Noise Texture Pattern */}
            <div
                className="absolute inset-0 pointer-events-none mix-blend-overlay"
                style={{
                    opacity: 0.05,
                    backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E")`
                }}
            />

            <motion.div
                initial={{ opacity: 0, y: 30, scale: 0.98 }}
                animate={{ opacity: 1, y: 0, scale: 1 }}
                transition={{ duration: 0.6, ease: [0.22, 1, 0.36, 1] }}
                className="relative w-full max-w-[1000px] overflow-hidden rounded-[2.5rem] bg-card shadow-2xl lg:grid lg:grid-cols-2 z-10 border border-border/50"
            >
                {/* Left Panel: Form */}
                <motion.div
                    initial={{ opacity: 0, x: -20 }}
                    animate={{ opacity: 1, x: 0 }}
                    transition={{ duration: 0.6, delay: 0.2, ease: [0.22, 1, 0.36, 1] }}
                    className="flex flex-col p-8 sm:p-12"
                >
                    {/* Header: Logo */}
                    <div className="flex items-center mb-12">
                        <Link href={home()} className="flex items-center gap-2">
                            <span className="text-xl font-bold tracking-tight text-foreground">
                                {firstWord} {restAppName && <span className="text-primary">{restAppName}</span>}
                            </span>
                        </Link>
                    </div>

                    <div className="flex-1 flex flex-col justify-center max-w-sm mx-auto w-full">
                        <div className="flex flex-col items-center text-center mb-8 gap-3">
                            <h1 className="text-3xl font-bold text-foreground tracking-tight">{title}</h1>
                            <p className="text-sm text-muted-foreground text-balance leading-relaxed">{description}</p>
                        </div>

                        {children}

                        <div className="mt-12 text-center text-xs text-muted-foreground">
                            <p className="font-medium text-foreground mb-1">N'hésitez pas à nous contacter</p>
                            <a href="mailto:support@softsys.ci" className="text-primary hover:underline font-medium">support@softsys.ci</a>
                        </div>
                    </div>

                    <div className="mt-12 text-center text-[10px] text-muted-foreground/50">
                        All rights reserved by <a href="https://softsys.ci/" target="_blank" rel="noopener noreferrer" className="hover:underline">Softsys</a> 2026
                    </div>
                </motion.div>

                {/* Right Panel: Image */}
                <motion.div
                    initial={{ opacity: 0, scale: 1.05 }}
                    animate={{ opacity: 1, scale: 1 }}
                    transition={{ duration: 0.8, delay: 0.1, ease: [0.22, 1, 0.36, 1] }}
                    className="relative hidden lg:block bg-muted"
                >
                    <img
                        src="/images/hr_office_bg.jpg"
                        alt="Bureau moderne ressources humaines"
                        className="absolute inset-0 w-full h-full object-cover"
                    />

                </motion.div>
            </motion.div>
        </div>
    );
}