import { useState, useEffect } from 'react';
import { useSubmit, useNavigation, useActionData, useNavigate, redirect } from 'react-router';
import type { Route } from './+types/login';
import { pb } from '~/lib/pocketbase';
import { Lock, Mail, Eye, EyeOff, Loader2, ArrowRight, AlertCircle } from 'lucide-react';
import { Input } from '~/components/ui/input';
import { Button } from '~/components/ui/button';
import { Label } from '~/components/ui/label';
import { toast } from 'sonner';
import { LogoMark } from '~/components/logo-mark';
import { AuthBrandPanel } from '~/components/auth/auth-brand-panel';

export async function clientLoader() {
    if (pb.authStore.isValid) {
        return redirect('/');
    }
    return null;
}

export async function clientAction({ request }: Route.ClientActionArgs) {
    const formData = await request.formData();
    const email = formData.get('email') as string;
    const password = formData.get('password') as string;

    if (!email || !password) {
        return { error: 'Please enter both email and password' };
    }

    try {
        await pb.collection('users').authWithPassword(email, password);
        return redirect('/');
    } catch (err: any) {
        return { error: err?.message || 'Invalid email or password' };
    }
}

const fieldLabel = 'normal-case tracking-normal text-sm font-medium text-neutral-300';
const fieldIcon =
    'pointer-events-none absolute left-4 top-1/2 -translate-y-1/2 text-neutral-500 transition-colors group-focus-within:text-orange-500';
const fieldInput =
    'h-12 rounded-xl border-neutral-800 bg-[#141414] pl-11 text-[15px] focus-visible:border-orange-500/70 focus-visible:ring-4 focus-visible:ring-orange-500/10';

export default function Login() {
    const navigate = useNavigate();
    const submit = useSubmit();
    const navigation = useNavigation();
    const actionData = useActionData<typeof clientAction>();

    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    const [showPassword, setShowPassword] = useState(false);
    const [capsLock, setCapsLock] = useState(false);
    const [localError, setLocalError] = useState('');

    const isLoading = navigation.state !== 'idle';
    const errorMessage = localError || actionData?.error;

    // Already-authenticated redirect fallback
    useEffect(() => {
        if (pb.authStore.isValid) {
            navigate('/', { replace: true });
        }
    }, [navigate]);

    // Handle authentication feedback
    useEffect(() => {
        if (actionData) {
            if (actionData.error) {
                setLocalError(actionData.error);
                toast.error(actionData.error);
            } else {
                toast.success('Logged in successfully');
            }
        }
    }, [actionData]);

    const handleLogin = (e: React.FormEvent) => {
        e.preventDefault();
        if (!email || !password) {
            setLocalError('Please enter both email and password');
            return;
        }

        setLocalError('');
        const formData = new FormData();
        formData.append('email', email);
        formData.append('password', password);

        submit(formData, { method: 'post' });
    };

    const handleForgotPassword = () => {
        toast.info('Please contact your administrator to reset your password.');
    };

    return (
        <div className="grid min-h-screen bg-[#0D0D0D] font-sans text-white lg:grid-cols-2">
            <AuthBrandPanel />

            <main className="relative flex flex-col px-6 py-8 sm:px-10">
                {/* Subtle dot texture */}
                <div
                    className="pointer-events-none absolute inset-0 opacity-[0.35]"
                    style={{
                        backgroundImage: 'radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px)',
                        backgroundSize: '22px 22px',
                        maskImage: 'radial-gradient(ellipse at center, black 30%, transparent 75%)',
                        WebkitMaskImage: 'radial-gradient(ellipse at center, black 30%, transparent 75%)',
                    }}
                />
                <div className="pointer-events-none absolute top-1/3 left-1/2 h-80 w-80 -translate-x-1/2 rounded-full bg-orange-500/[0.06] blur-[120px]" />

                <div className="relative z-10 flex flex-1 items-center justify-center">
                    <div className="w-full max-w-[400px] animate-[fade-up_0.5s_ease-out]">
                        <LogoMark className="mx-auto mb-8 h-14 w-14 text-3xl lg:hidden" />

                        <div className="mb-8 space-y-2 text-center lg:text-left">
                            <h1 className="text-3xl font-semibold tracking-tight text-white">Welcome back</h1>
                            <p className="text-[15px] text-neutral-500">Sign in to your account to continue.</p>
                        </div>

                        <div className="rounded-2xl border border-neutral-800/80 bg-[#111111]/80 p-6 shadow-2xl shadow-black/40 backdrop-blur-sm sm:p-7">
                            <form onSubmit={handleLogin} className="space-y-5" noValidate>
                                {errorMessage && (
                                    <div
                                        role="alert"
                                        className="flex items-start gap-2.5 rounded-xl border border-red-500/20 bg-red-500/10 px-4 py-3 text-sm text-red-400"
                                    >
                                        <AlertCircle size={16} className="mt-0.5 shrink-0" />
                                        <span>{errorMessage}</span>
                                    </div>
                                )}

                                <div className="space-y-2">
                                    <Label htmlFor="email" className={fieldLabel}>
                                        Email
                                    </Label>
                                    <div className="group relative">
                                        <Mail size={17} className={fieldIcon} />
                                        <Input
                                            id="email"
                                            type="email"
                                            name="email"
                                            autoComplete="email"
                                            autoFocus
                                            required
                                            className={fieldInput}
                                            placeholder="Enter your email address"
                                            value={email}
                                            onChange={(e) => {
                                                setEmail(e.target.value);
                                                if (localError) setLocalError('');
                                            }}
                                        />
                                    </div>
                                </div>

                                <div className="space-y-2">
                                    <div className="flex items-center justify-between">
                                        <Label htmlFor="password" className={fieldLabel}>
                                            Password
                                        </Label>
                                        <button
                                            type="button"
                                            onClick={handleForgotPassword}
                                            className="cursor-pointer text-xs font-medium text-neutral-500 transition-colors hover:text-orange-500"
                                        >
                                            Forgot password?
                                        </button>
                                    </div>
                                    <div className="group relative">
                                        <Lock size={17} className={fieldIcon} />
                                        <Input
                                            id="password"
                                            type={showPassword ? 'text' : 'password'}
                                            name="password"
                                            autoComplete="current-password"
                                            required
                                            className={`${fieldInput} pr-12`}
                                            placeholder="Enter your password"
                                            value={password}
                                            onChange={(e) => {
                                                setPassword(e.target.value);
                                                if (localError) setLocalError('');
                                            }}
                                            onKeyUp={(e) => setCapsLock(e.getModifierState('CapsLock'))}
                                            onBlur={() => setCapsLock(false)}
                                        />
                                        <button
                                            type="button"
                                            onClick={() => setShowPassword(!showPassword)}
                                            aria-label={showPassword ? 'Hide password' : 'Show password'}
                                            className="absolute right-2 top-1/2 flex h-8 w-8 -translate-y-1/2 cursor-pointer items-center justify-center rounded-lg text-neutral-500 transition-colors hover:bg-neutral-800 hover:text-neutral-200"
                                        >
                                            {showPassword ? <EyeOff size={17} /> : <Eye size={17} />}
                                        </button>
                                    </div>
                                    {capsLock && (
                                        <p className="flex items-center gap-1.5 pl-1 text-xs text-amber-400">
                                            <AlertCircle size={13} />
                                            Caps Lock is on
                                        </p>
                                    )}
                                </div>

                                <Button
                                    type="submit"
                                    disabled={isLoading}
                                    className="group h-12 w-full bg-gradient-to-b from-orange-400 to-orange-600 text-[15px] font-semibold hover:from-orange-400 hover:to-orange-500"
                                >
                                    {isLoading ? (
                                        <>
                                            <Loader2 size={17} className="animate-spin" />
                                            <span>Signing in…</span>
                                        </>
                                    ) : (
                                        <>
                                            <span>Sign in</span>
                                            <ArrowRight size={17} className="transition-transform duration-200 group-hover:translate-x-0.5" />
                                        </>
                                    )}
                                </Button>
                            </form>
                        </div>

                        <p className="mt-6 flex items-center justify-center gap-1.5 text-center text-xs text-neutral-600">
                            <Lock size={12} />
                            Access is restricted to authorized team members.
                        </p>
                    </div>
                </div>

                <footer className="relative z-10 pt-8 text-center text-xs text-neutral-700">
                    © {new Date().getFullYear()} thob.studio
                </footer>
            </main>
        </div>
    );
}