import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { Eye, EyeOff, User, Lock, ArrowRight, Building2, CalendarClock, Users, FileCheck2, ShieldCheck } from 'lucide-react';
import { useToast, ToastContainer } from '../../components/UI/Toast';

const features = [
    { icon: CalendarClock, label: 'Schedule batches across every branch from one calendar' },
    { icon: Users, label: 'Track trainer availability, attendance, and performance' },
    { icon: FileCheck2, label: 'Auto-generate GST-ready invoices and certificates' },
];

const stats = [
    { value: '500+', label: 'Batches managed' },
    { value: '50+', label: 'Active trainers' },
    { value: '12k+', label: 'Students trained' },
];

const Login = () => {
    const navigate = useNavigate();
    const toast = useToast();
    const [showPassword, setShowPassword] = useState(false);
    const [isLoading, setIsLoading] = useState(false);
    const [formData, setFormData] = useState({
        username: '',
        password: '',
        rememberMe: false,
    });

    const handleInputChange = (field: string, value: any) => {
        setFormData((prev) => ({ ...prev, [field]: value }));
    };

    const handleSubmit = (e: React.FormEvent) => {
        e.preventDefault();

        // Basic validation
        if (!formData.username || !formData.password) {
            toast.error('Please fill in all fields');
            return;
        }

        setIsLoading(true);

        // Simulate API call
        setTimeout(() => {
            setIsLoading(false);

            // Store authentication token
            if (formData.rememberMe) {
                localStorage.setItem('authToken', 'demo-token-12345');
            } else {
                sessionStorage.setItem('authToken', 'demo-token-12345');
            }

            toast.success('Login successful!');
            navigate('/dashboard'); // Redirect to dashboard or home
        }, 1500);
    };

    return (
        <>
            <ToastContainer toasts={toast.toasts} onRemove={toast.removeToast} />

            <style>{`
                @keyframes loginFadeUp {
                    from { opacity: 0; transform: translateY(10px); }
                    to { opacity: 1; transform: translateY(0); }
                }
                .login-fade { animation: loginFadeUp 0.5s ease-out both; }
                @keyframes orbitPulse {
                    0%, 100% { opacity: 0.35; }
                    50% { opacity: 0.7; }
                }
                .orbit-dot { animation: orbitPulse 3s ease-in-out infinite; }
            `}</style>

            <div className="min-h-screen flex bg-white">
                {/* LEFT - Brand panel (hidden below lg) */}
                <div className="hidden lg:flex lg:w-[46%] relative bg-primary overflow-hidden flex-col justify-between p-12 text-white">
                    {/* Decorative network pattern */}
                    <svg className="absolute inset-0 w-full h-full opacity-[0.15]" viewBox="0 0 500 800" fill="none" preserveAspectRatio="xMidYMid slice">
                        <circle cx="80" cy="120" r="2.5" fill="white" className="orbit-dot" style={{ animationDelay: '0s' }} />
                        <circle cx="220" cy="80" r="2" fill="white" className="orbit-dot" style={{ animationDelay: '0.4s' }} />
                        <circle cx="380" cy="180" r="3" fill="white" className="orbit-dot" style={{ animationDelay: '0.8s' }} />
                        <circle cx="120" cy="320" r="2" fill="white" className="orbit-dot" style={{ animationDelay: '1.2s' }} />
                        <circle cx="340" cy="380" r="2.5" fill="white" className="orbit-dot" style={{ animationDelay: '1.6s' }} />
                        <circle cx="60" cy="560" r="2" fill="white" className="orbit-dot" style={{ animationDelay: '0.2s' }} />
                        <circle cx="260" cy="620" r="3" fill="white" className="orbit-dot" style={{ animationDelay: '0.6s' }} />
                        <circle cx="420" cy="540" r="2" fill="white" className="orbit-dot" style={{ animationDelay: '1s' }} />
                        <circle cx="440" cy="700" r="2.5" fill="white" className="orbit-dot" style={{ animationDelay: '1.4s' }} />
                        <line x1="80" y1="120" x2="220" y2="80" stroke="white" strokeWidth="0.5" />
                        <line x1="220" y1="80" x2="380" y2="180" stroke="white" strokeWidth="0.5" />
                        <line x1="80" y1="120" x2="120" y2="320" stroke="white" strokeWidth="0.5" />
                        <line x1="120" y1="320" x2="340" y2="380" stroke="white" strokeWidth="0.5" />
                        <line x1="380" y1="180" x2="340" y2="380" stroke="white" strokeWidth="0.5" />
                        <line x1="60" y1="560" x2="260" y2="620" stroke="white" strokeWidth="0.5" />
                        <line x1="260" y1="620" x2="420" y2="540" stroke="white" strokeWidth="0.5" />
                        <line x1="260" y1="620" x2="440" y2="700" stroke="white" strokeWidth="0.5" />
                        <line x1="120" y1="320" x2="60" y2="560" stroke="white" strokeWidth="0.5" />
                    </svg>

                    {/* Top: logo + copy */}
                    <div className="relative z-10">
                        <div className="flex items-center gap-3 mb-16">
                            <div className="w-11 h-11 rounded-xl bg-white/10 border border-white/20 flex items-center justify-center">
                                <Building2 className="w-6 h-6 text-white" />
                            </div>
                            <span className="text-lg font-bold tracking-tight">UpSkill365</span>
                        </div>

                        <h1 className="text-[2.2rem] leading-[1.15] font-bold tracking-tight mb-4 max-w-md">Run your training business from a single screen.</h1>
                        <p className="text-white/60 text-[15px] leading-relaxed max-w-sm mb-10">Branches, batches, trainers, and billing — one ERP built specifically for training organizations.</p>

                        <ul className="space-y-4">
                            {features.map((f, i) => {
                                const Icon = f.icon;
                                return (
                                    <li key={i} className="flex items-start gap-3">
                                        <div className="w-8 h-8 rounded-lg bg-white/10 flex items-center justify-center shrink-0 mt-0.5">
                                            <Icon className="w-4 h-4 text-white" />
                                        </div>
                                        <span className="text-sm text-white/80 leading-relaxed pt-1.5">{f.label}</span>
                                    </li>
                                );
                            })}
                        </ul>
                    </div>

                    {/* Bottom: stats */}
                    <div className="relative z-10 flex items-center gap-8 pt-8 border-t border-white/15">
                        {stats.map((s, i) => (
                            <div key={i}>
                                <div className="text-2xl font-bold">{s.value}</div>
                                <div className="text-xs text-white/50 mt-0.5">{s.label}</div>
                            </div>
                        ))}
                    </div>
                </div>

                {/* RIGHT - Form panel */}
                <div className="flex-1 flex items-center justify-center p-6 sm:p-10 bg-gray-50/50">
                    <div className="w-full max-w-[420px] login-fade">
                        {/* Mobile-only logo (brand panel is hidden below lg) */}
                        <div className="lg:hidden text-center mb-8">
                            <div className="inline-flex items-center justify-center w-14 h-14 rounded-2xl bg-primary shadow-lg shadow-primary/20 mb-3">
                                <Building2 className="w-7 h-7 text-white" />
                            </div>
                            <h1 className="text-xl font-bold text-primary tracking-tight">UpSkill365</h1>
                        </div>

                        <div className="mb-8">
                            <h2 className="text-2xl font-bold text-gray-900 tracking-tight">Welcome back</h2>
                            <p className="text-sm text-gray-500 mt-1.5">Sign in to your UpSkill365 account to continue</p>
                        </div>

                        <form onSubmit={handleSubmit} className="space-y-5">
                            {/* Username Field */}
                            <div>
                                <label className="block text-sm font-semibold text-gray-700 mb-1.5">
                                    Username
                                    <span className="text-secondary ml-0.5">*</span>
                                </label>
                                <div className="relative">
                                    <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                        <User className="h-4 w-4 text-gray-400" />
                                    </div>
                                    <input
                                        type="text"
                                        value={formData.username}
                                        onChange={(e) => handleInputChange('username', e.target.value)}
                                        placeholder="Enter your username"
                                        className="w-full pl-9 pr-4 py-2 border border-gray-200 rounded-lg text-sm text-gray-700 bg-white focus:outline-none focus:border-primary focus:ring-4 focus:ring-primary/10 transition-all"
                                        disabled={isLoading}
                                    />
                                </div>
                            </div>

                            {/* Password Field */}
                            <div>
                                <div className="flex items-center justify-between mb-1.5">
                                    <label className="block text-sm font-semibold text-gray-700">
                                        Password
                                        <span className="text-secondary ml-0.5">*</span>
                                    </label>
                                    <button
                                        type="button"
                                        className="text-xs text-secondary hover:text-secondary/80 transition-colors font-medium"
                                        onClick={() => toast.info('Password reset link sent to your email')}
                                    >
                                        Forgot password?
                                    </button>
                                </div>
                                <div className="relative">
                                    <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                        <Lock className="h-4 w-4 text-gray-400" />
                                    </div>
                                    <input
                                        type={showPassword ? 'text' : 'password'}
                                        value={formData.password}
                                        onChange={(e) => handleInputChange('password', e.target.value)}
                                        placeholder="Enter your password"
                                        className="w-full pl-9 pr-11 py-2 border border-gray-200 rounded-lg text-sm text-gray-700 bg-white focus:outline-none focus:border-primary focus:ring-4 focus:ring-primary/10 transition-all"
                                        disabled={isLoading}
                                    />
                                    <button type="button" onClick={() => setShowPassword(!showPassword)} className="absolute inset-y-0 right-0 pr-3 flex items-center" tabIndex={-1}>
                                        {showPassword ? (
                                            <EyeOff className="h-4 w-4 text-gray-400 hover:text-gray-600 transition-colors" />
                                        ) : (
                                            <Eye className="h-4 w-4 text-gray-400 hover:text-gray-600 transition-colors" />
                                        )}
                                    </button>
                                </div>
                            </div>

                            {/* Remember Me */}
                            <label className="flex items-center gap-2 cursor-pointer w-fit">
                                <input
                                    type="checkbox"
                                    checked={formData.rememberMe}
                                    onChange={(e) => handleInputChange('rememberMe', e.target.checked)}
                                    className="w-4 h-4 rounded border-gray-300 text-primary focus:ring-primary/20 focus:ring-2"
                                    disabled={isLoading}
                                />
                                <span className="text-sm text-gray-600">Keep me signed in</span>
                            </label>

                            {/* Login Button */}
                            <button
                                type="submit"
                                disabled={isLoading}
                                className={`
                                    group w-full flex items-center justify-center gap-2 py-3 px-4
                                    bg-secondary text-white font-semibold rounded-xl text-sm
                                    transition-all duration-200
                                    ${isLoading ? 'opacity-70 cursor-not-allowed' : 'hover:bg-secondary/90 hover:shadow-lg hover:shadow-secondary/25 active:scale-[0.98]'}
                                `}
                            >
                                {isLoading ? (
                                    <>
                                        <svg className="animate-spin h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                                            <path
                                                className="opacity-75"
                                                fill="currentColor"
                                                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                                            ></path>
                                        </svg>
                                        Signing in...
                                    </>
                                ) : (
                                    <>
                                        Sign In
                                        <ArrowRight className="w-4 h-4 transition-transform group-hover:translate-x-0.5" />
                                    </>
                                )}
                            </button>

                            {/* Terms */}
                            <p className="text-xs text-gray-400 text-center leading-relaxed">
                                By signing in, you agree to our{' '}
                                <button type="button" className="text-primary hover:text-primary/80 transition-colors font-medium" onClick={() => toast.info('Terms & Conditions will be shown here')}>
                                    Terms
                                </button>{' '}
                                &{' '}
                                <button type="button" className="text-primary hover:text-primary/80 transition-colors font-medium" onClick={() => toast.info('Privacy Policy will be shown here')}>
                                    Privacy Policy
                                </button>
                            </p>

                            {/* Demo Credentials Note */}
                            <div className="flex items-center gap-2 justify-center text-xs text-gray-400 bg-gray-50 border border-gray-100 rounded-lg py-2 px-3">
                                <ShieldCheck className="w-3.5 h-3.5 text-gray-300 shrink-0" />
                                <span>Demo: admin / password123</span>
                            </div>
                        </form>

                        <p className="text-center text-xs text-gray-400 mt-8">© {new Date().getFullYear()} UpSkill365. All rights reserved.</p>
                    </div>
                </div>
            </div>
        </>
    );
};

export default Login;