import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { motion, AnimatePresence } from 'framer-motion';
import { Shield, ArrowRight, Loader2, Key, ChevronRight, Lock } from 'lucide-react';
import api from '../lib/api';
import { useAuth } from '../context/AuthContext';
import { DevTools } from '../components/dev/DevTools';
import { pageVariants, itemVariants } from '../lib/animations';

export default function LoginPage() {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    const [error, setError] = useState('');
    const [isLoading, setIsLoading] = useState(false);
    const { login } = useAuth();
    const navigate = useNavigate();

    useEffect(() => {
        document.title = 'Veridian | Authentication';
    }, []);

    const handleSubmit = async (e: React.FormEvent) => {
        e.preventDefault();
        setError('');
        setIsLoading(true);

        try {
            const { data } = await api.post('/auth/login', { email, password });
            login(data.accessToken, data.refreshToken, data.user);
            navigate('/dashboard');
        } catch (err: any) {
            setError(err.response?.data?.message || 'Authentication failed. Please check your credentials.');
        } finally {
            setIsLoading(false);
        }
    };

    return (
        <div className="min-h-screen bg-[var(--color-bg-primary)] text-slate-100 flex overflow-hidden font-sans selection:bg-[var(--color-primary)]/30">
            {/* Left Side: Brand/Visual */}
            <div className="hidden lg:flex flex-1 relative items-center justify-center border-r border-[var(--color-border-subtle)] bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-[var(--color-bg-secondary)] via-[var(--color-bg-primary)] to-[var(--color-bg-primary)]">
                <div className="absolute inset-0 opacity-20" style={{ backgroundImage: 'radial-gradient(#1e293b 1px, transparent 1px)', backgroundSize: '32px 32px' }} />

                <motion.div
                    initial={{ opacity: 0, scale: 0.9 }}
                    animate={{ opacity: 1, scale: 1 }}
                    transition={{ duration: 1, ease: "easeOut" }}
                    className="relative z-10 flex flex-col items-center text-center p-12 space-y-8"
                >
                    <div className="relative group">
                        <img
                            src="/assets/logo-veridian.jpg"
                            alt="Veridian"
                            className="w-24 h-24 rounded-3xl shadow-2xl transition-transform duration-slow ease-out-expo group-hover:scale-105"
                        />
                        <div className="absolute inset-0 rounded-3xl bg-[var(--color-primary)] opacity-0 group-hover:opacity-10 transition-opacity duration-normal blur-xl" />
                    </div>
                    <div className="space-y-2">
                        <h2 className="text-5xl font-bold tracking-tighter bg-gradient-to-b from-white to-slate-500 bg-clip-text text-transparent">
                            VERIDIAN
                        </h2>
                        <p className="text-[var(--color-text-tertiary)] font-mono text-sm tracking-[0.3em] uppercase">
                            Operations Infrastructure
                        </p>
                    </div>

                    <div className="flex items-center gap-6 mt-12 bg-slate-900/50 backdrop-blur-md px-6 py-3 rounded-full border border-slate-800/50 shadow-xl">
                        <div className="flex -space-x-3">
                            {[1, 2, 3].map(i => (
                                <div key={i} className="w-8 h-8 rounded-full border-2 border-[#050505] bg-slate-800" />
                            ))}
                        </div>
                        <p className="text-xs text-[var(--color-text-tertiary)] font-medium">Operations Center</p>
                        <div className="w-2 h-2 rounded-full bg-[var(--color-primary)]" />
                    </div>
                </motion.div>

                {/* Decorative elements */}
                <div className="absolute bottom-12 left-12 text-[10px] font-mono text-slate-700 tracking-tighter uppercase leading-none">
                    Veridian Operations<br />
                    Cultivation Platform<br />
                    v1.0.0
                </div>
            </div>

            {/* Right Side: Form */}
            <div className="flex-1 flex flex-col items-center justify-center p-6 lg:p-24 relative">
                <motion.div
                    variants={pageVariants}
                    initial="initial"
                    animate="animate"
                    className="w-full max-w-sm space-y-12"
                >
                    <div className="space-y-3">
                        <motion.div variants={itemVariants} className="lg:hidden relative group w-fit mb-8">
                            <img
                                src="/assets/logo-veridian.jpg"
                                alt="Veridian"
                                className="w-12 h-12 rounded-xl shadow-lg transition-transform duration-300 group-hover:scale-105"
                            />
                            <div className="absolute inset-0 rounded-xl bg-[var(--color-primary)] opacity-0 group-hover:opacity-10 transition-opacity blur-lg" />
                        </motion.div>
                        <motion.h1 variants={itemVariants} className="text-3xl font-bold tracking-tight text-white lg:text-4xl">
                            Sign In
                        </motion.h1>
                        <motion.p variants={itemVariants} className="text-[var(--color-text-tertiary)] text-sm">
                            Access your operations portal.
                        </motion.p>
                    </div>

                    <motion.form variants={itemVariants} onSubmit={handleSubmit} className="space-y-6">
                        <AnimatePresence mode="wait">
                            {error && (
                                <motion.div
                                    initial={{ opacity: 0, height: 0 }}
                                    animate={{ opacity: 1, height: 'auto' }}
                                    exit={{ opacity: 0, height: 0 }}
                                    className="p-4 bg-[var(--color-error)]/10 border border-rose-500/20 rounded-xl flex items-start gap-3"
                                >
                                    <Shield className="text-[var(--color-error)] flex-shrink-0 mt-0.5" size={16} />
                                    <p className="text-sm text-[var(--color-error)] leading-snug">{error}</p>
                                </motion.div>
                            )}
                        </AnimatePresence>

                        <div className="space-y-4">
                            <div className="space-y-2">
                                <label className="text-xs font-bold text-[var(--color-text-tertiary)] uppercase tracking-widest ml-1">Email</label>
                                <div className="relative group">
                                    <input
                                        type="email"
                                        required
                                        className="w-full bg-[var(--color-bg-tertiary)] border border-[var(--color-border-subtle)] rounded-xl px-4 py-3.5 text-sm focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]/40 focus:border-[var(--color-primary)] transition-all placeholder:text-slate-600"
                                        placeholder="you@example.com"
                                        value={email}
                                        onChange={(e) => setEmail(e.target.value)}
                                        disabled={isLoading}
                                    />
                                    <div className="absolute inset-0 rounded-xl bg-[var(--color-primary)]/5 opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity" />
                                </div>
                            </div>

                            <div className="space-y-2">
                                <label className="text-xs font-bold text-[var(--color-text-tertiary)] uppercase tracking-widest ml-1">Password</label>
                                <div className="relative group">
                                    <input
                                        type="password"
                                        required
                                        className="w-full bg-[var(--color-bg-tertiary)] border border-[var(--color-border-subtle)] rounded-xl px-4 py-3.5 text-sm focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]/40 focus:border-[var(--color-primary)] transition-all placeholder:text-slate-600"
                                        placeholder="••••••••••••"
                                        value={password}
                                        onChange={(e) => setPassword(e.target.value)}
                                        disabled={isLoading}
                                    />
                                    <div className="absolute inset-0 rounded-xl bg-[var(--color-primary)]/5 opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity" />
                                </div>
                            </div>
                        </div>

                        <button
                            type="submit"
                            disabled={isLoading}
                            className="group relative w-full bg-[var(--color-primary)] hover:bg-[var(--color-primary-hover)] text-[var(--color-text-inverse)] rounded-xl h-14 font-bold tracking-tight shadow-xl shadow-emerald-600/20 transition-all active:scale-[0.98] disabled:opacity-50 flex items-center justify-center overflow-hidden"
                        >
                            <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/10 to-transparent -translate-x-[100%] group-hover:translate-x-[100%] transition-transform duration-1000" />
                            {isLoading ? (
                                <Loader2 className="animate-spin" size={20} />
                            ) : (
                                <div className="flex items-center gap-2">
                                    <span>Continue</span>
                                    <ChevronRight size={18} className="group-hover:translate-x-1 transition-transform" />
                                </div>
                            )}
                        </button>
                    </motion.form>

                    <motion.div variants={itemVariants} className="pt-24 border-t border-slate-800 space-y-4">
                        <div className="flex items-center justify-between">
                            <p className="text-[10px] font-bold text-slate-600 uppercase tracking-widest">Global Security</p>
                            <div className="h-px flex-1 bg-slate-800 mx-4" />
                            <Shield className="text-slate-700" size={14} />
                        </div>
                        <p className="text-[11px] text-[var(--color-text-tertiary)] leading-relaxed text-center">
                            This system is for the exclusive use of authorized personnel. All activity is logged and monitored for compliance integrity.
                        </p>
                    </motion.div>
                </motion.div>
            </div>

            <DevTools />
        </div>
    );
}
