import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import api from '../lib/api';
import { useAuth } from '../context/AuthContext';
import { DevTools } from '../components/dev/DevTools';
import { Loader2, ArrowRight } from 'lucide-react';

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();

    // Set page title
    useEffect(() => {
        document.title = '777 Wolfpack - Login';
    }, []);

    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('/');
        } catch (err: any) {
            setError(err.response?.data?.message || 'Login failed');
        } finally {
            setIsLoading(false);
        }
    };

    return (
        <div className="min-h-screen bg-primary flex items-center justify-center p-4">
            {/* Background subtle pattern */}
            <div
                className="fixed inset-0 opacity-[0.02] pointer-events-none"
                style={{
                    backgroundImage: `radial-gradient(circle at 1px 1px, currentColor 1px, transparent 0)`,
                    backgroundSize: '24px 24px',
                }}
            />

            {/* Main container */}
            <div className="w-full max-w-[380px] animate-in">
                {/* Logo */}
                <div className="flex justify-center mb-8">
                    <div className="relative group">
                        <img
                            src="/assets/logo-777-wolfpack.jpg"
                            alt="777 Wolfpack"
                            className="w-20 h-20 rounded-2xl shadow-lg transition-transform duration-slow ease-out-expo group-hover:scale-105"
                        />
                        {/* Subtle glow on hover */}
                        <div className="absolute inset-0 rounded-2xl bg-accent opacity-0 group-hover:opacity-10 transition-opacity duration-normal blur-xl" />
                    </div>
                </div>

                {/* Card */}
                <div className="card p-8 animate-slide-up" style={{ animationDelay: '50ms' }}>
                    {/* Header */}
                    <div className="text-center mb-8">
                        <h1 className="text-2xl font-semibold text-primary tracking-tight">
                            Welcome back
                        </h1>
                        <p className="text-secondary text-sm mt-2">
                            Sign in to 777 Wolfpack
                        </p>
                    </div>

                    {/* Form */}
                    <form onSubmit={handleSubmit} className="space-y-5">
                        {/* Error message */}
                        {error && (
                            <div className="flex items-center gap-3 p-3 bg-destructive-muted rounded-md animate-scale-in">
                                <div className="w-1.5 h-1.5 bg-destructive rounded-full" />
                                <span className="text-sm text-destructive">{error}</span>
                            </div>
                        )}

                        {/* Email */}
                        <div className="space-y-2">
                            <label className="block text-sm font-medium text-secondary">
                                Email
                            </label>
                            <input
                                type="email"
                                required
                                className="input w-full"
                                placeholder="you@example.com"
                                value={email}
                                onChange={(e) => setEmail(e.target.value)}
                                disabled={isLoading}
                                autoComplete="email"
                            />
                        </div>

                        {/* Password */}
                        <div className="space-y-2">
                            <label className="block text-sm font-medium text-secondary">
                                Password
                            </label>
                            <input
                                type="password"
                                required
                                className="input w-full"
                                placeholder="••••••••"
                                value={password}
                                onChange={(e) => setPassword(e.target.value)}
                                disabled={isLoading}
                                autoComplete="current-password"
                            />
                        </div>

                        {/* Submit */}
                        <button
                            type="submit"
                            disabled={isLoading}
                            className="btn btn-primary w-full h-11 text-sm font-medium group"
                        >
                            {isLoading ? (
                                <>
                                    <Loader2 size={16} className="animate-spin" />
                                    <span>Signing in...</span>
                                </>
                            ) : (
                                <>
                                    <span>Continue</span>
                                    <ArrowRight
                                        size={16}
                                        className="transition-transform duration-fast group-hover:translate-x-0.5"
                                    />
                                </>
                            )}
                        </button>
                    </form>
                </div>

                {/* Footer */}
                <p className="text-center mt-6 text-xs text-tertiary animate-in" style={{ animationDelay: '150ms' }}>
                    Authorized personnel only
                </p>
            </div>

            {/* Dev Tools */}
            <DevTools />
        </div>
    );
}
