'use client';

import { useAuth } from '@/components/providers';
import { Button } from '@/components/ui/button';
import { Field } from '@/components/ui/field';
import { Input } from '@/components/ui/input';
import { useToast } from '@/hooks/use-toast';
import { APP_VERSION_LABEL } from '@/lib/version';
import { Eye, EyeOff, Loader2 } from 'lucide-react';
import { useRouter } from 'next/navigation';
import { useState } from 'react';

/*
 * Pantalla de acceso.
 *
 * Es lo primero que se ve cada mañana y muchas veces a contraluz, en el patio
 * del taller. Por eso: fondo plano y claro, un solo bloque centrado, campos de
 * 48px y el botón de entrar a todo el ancho. Se quitó el degradado azul a
 * pantalla completa, que tapaba el contenido y no aportaba nada.
 *
 * El ojo para ver la contraseña existe porque escribirla a ciegas en un celular
 * con las manos sucias es la causa más común de "no me deja entrar".
 */
export default function LoginPage() {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    const [showPassword, setShowPassword] = useState(false);
    const [isLoading, setIsLoading] = useState(false);
    const [error, setError] = useState<string | null>(null);
    const { login } = useAuth();
    const router = useRouter();
    const { toast } = useToast();

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

        if (!email || !password) {
            setError('Escribí tu correo y tu contraseña para entrar.');
            return;
        }

        setError(null);
        setIsLoading(true);

        try {
            await login(email, password);
            toast({
                variant: 'success',
                title: 'Bienvenido',
                description: 'Sesión iniciada correctamente',
            });
            router.push('/dashboard');
        } catch (error: any) {
            const message = error?.message || 'Usuario o contraseña incorrectos';
            // El error se muestra en la pantalla, no sólo en un aviso que se va
            // solo: si desaparece antes de leerlo, la persona no sabe qué pasó.
            setError(message);
            toast({
                variant: 'destructive',
                title: 'No se pudo entrar',
                description: message,
            });
        } finally {
            setIsLoading(false);
        }
    };

    return (
        <div className="flex min-h-dvh flex-col items-center justify-center bg-background px-4 py-10">
            <main className="w-full max-w-sm">
                <div className="text-center">
                    <img
                        src="/logo-mark.png"
                        alt=""
                        aria-hidden="true"
                        className="mx-auto h-14 w-14 object-contain"
                    />
                    <h1 className="mt-5 text-2xl font-bold tracking-tight text-foreground">
                        MBtaller
                    </h1>
                    <p className="mt-1.5 text-base text-muted-foreground">
                        Sistema de gestión de taller
                    </p>
                </div>

                <form onSubmit={handleSubmit} className="mt-8 space-y-5" noValidate>
                    <Field label="Correo electrónico" htmlFor="email" required>
                        <Input
                            type="email"
                            inputMode="email"
                            autoComplete="username"
                            autoCapitalize="none"
                            autoCorrect="off"
                            placeholder="correo@ejemplo.com"
                            value={email}
                            onChange={(e) => {
                                setEmail(e.target.value);
                                if (error) setError(null);
                            }}
                            className="h-12"
                            disabled={isLoading}
                        />
                    </Field>

                    <Field label="Contraseña" htmlFor="password" required nested error={error ?? undefined}>
                        <div className="relative">
                            <Input
                                id="password"
                                type={showPassword ? 'text' : 'password'}
                                autoComplete="current-password"
                                aria-invalid={error ? true : undefined}
                                aria-describedby={error ? 'password-error' : undefined}
                                placeholder="Tu contraseña"
                                value={password}
                                onChange={(e) => {
                                    setPassword(e.target.value);
                                    if (error) setError(null);
                                }}
                                className="h-12 pr-12"
                                disabled={isLoading}
                            />
                            <button
                                type="button"
                                onClick={() => setShowPassword((current) => !current)}
                                aria-label={showPassword ? 'Ocultar contraseña' : 'Mostrar contraseña'}
                                className="absolute right-1 top-1/2 flex h-10 w-10 -translate-y-1/2 items-center justify-center rounded-md text-muted-foreground transition-colors duration-150 ease-out [@media(hover:hover)]:hover:bg-muted [@media(hover:hover)]:hover:text-foreground active:scale-[0.98] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                            >
                                {showPassword ? <EyeOff className="h-5 w-5" /> : <Eye className="h-5 w-5" />}
                            </button>
                        </div>
                    </Field>

                    <Button type="submit" className="w-full" size="lg" disabled={isLoading}>
                        {isLoading ? (
                            <>
                                <Loader2 className="h-5 w-5 animate-spin" />
                                Entrando...
                            </>
                        ) : (
                            'Entrar'
                        )}
                    </Button>
                </form>

                <p className="mt-8 text-center text-xs text-subtle-foreground">
                    Versión {APP_VERSION_LABEL}
                </p>
            </main>
        </div>
    );
}