Login Page

import { useState } from "react";
import { useAuth } from "./authContext";
import { useNavigate } from "react-router-dom";
import { Link } from "react-router-dom";
import { Ambulance } from "lucide-react";
import { womanWithAmbulane } from "../assets/images/imageIdex";

function LoginForm() {
    const {login, loading} = useAuth();
    const navigate = useNavigate();

    const [username, setUsername] = useState("");
    const [password, setPassword] = useState("");

    const handleSubmit = async (e) => {
        e.preventDefault();
        try {
            await login(username, password);
            navigate("/");
        } catch (err) {
            console.error("Login failed", err);
        }
    };

    return (
        <div className="min-h-screen w-full flex items-center justify-end bg-gradient-to-br from-gray-900 via-gray-800 to-gray-700 relative overflow-hidden">
            {/* Background image for the whole page */}
            <img
                src={womanWithAmbulane}
                alt="Ambulance background"
                className="absolute left-0 top-0 h-full w-2/3 object-cover opacity-40 pointer-events-none select-none z-0"
            />
            {/* Animated text on the far left */}
            <div className="absolute left-0 top-0 h-full w-2/3 flex items-center z-10">
                <div className="pl-16 max-w-xl">
                    <h2 className="text-4xl md:text-5xl font-extrabold text-white drop-shadow-lg animate-fade-in-left" style={{animation: 'fadeInLeft 1.2s ease'}}>Fast. Reliable.<br/>Life-saving Ambulance Service.</h2>
                    <style>{`
                        @keyframes fadeInLeft {
                            0% { opacity: 0; transform: translateX(-40px); }
                            100% { opacity: 1; transform: translateX(0); }
                        }
                        .animate-fade-in-left {
                            animation: fadeInLeft 1.2s ease;
                        }
                    `}</style>
                </div>
            </div>
            <div className="w-full max-w-md bg-gray-800 bg-opacity-95 rounded-2xl shadow-2xl p-8 m-12 relative z-10 flex flex-col items-center">
                {/* Ambulance icon on the card */}
                <Ambulance className="w-16 h-16 text-red-500 drop-shadow-lg mb-2" />
                <h1 className="text-3xl font-bold text-white mb-6 tracking-wide">AmbuCare</h1>
                <p className="text-2xl text-red-400 text-center font-semibold mb-6">Login</p>
                <form onSubmit={handleSubmit} className="space-y-6 w-full">
                    <div>
                        <label htmlFor="email" className="block text-sm font-medium text-gray-300 mb-1">
                            Email
                        </label>
                        <input
                            id="email"
                            value={username}
                            onChange={(e) => setUsername(e.target.value)}
                            type="email"
                            className="w-full px-4 py-2 bg-gray-700 text-white border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-400 focus:border-red-400 placeholder-gray-400"
                            placeholder="Enter your email"
                        />
                    </div>
                    <div>
                        <label htmlFor="password" className="block text-sm font-medium text-gray-300 mb-1">
                            Password
                        </label>
                        <input
                            id="password"
                            value={password}
                            onChange={(e) => setPassword(e.target.value)}
                            type="password"
                            className="w-full px-4 py-2 bg-gray-700 text-white border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-400 focus:border-red-400 placeholder-gray-400"
                            placeholder="Enter your password"
                        />
                    </div>
                    <button
                        type="submit"
                        disabled={loading}
                        className="w-full bg-red-500 hover:bg-red-600 text-white py-2 px-4 rounded-lg font-semibold transition-colors disabled:opacity-50 shadow-md"
                    >
                        {loading ? <div className="w-5 h-5 bg-white rounded-full animate-pulse mx-auto"></div> : "Login"}
                    </button>
                </form>
                <p className="text-center text-gray-400 mt-6">Don't have an account? <Link to='/signup/' className="text-red-300 hover:underline">Sign up</Link></p>
            </div>
        </div>
    )
}

export default LoginForm;