 import { useState } from "react";
import { useNavigate } from "react-router-dom";
import axios from 'axios';

function Login () {
    const [username, setUsername] = useState('');
    const [password, setPassword] = useState('');
    const [error, setError] = useState('');
    const navigate = useNavigate(); // Added this so navigate works!

    const handleLogin = async (e) => {
        e.preventDefault();
        setError('');
        try {
            const res = await axios.post('http://localhost:5000/api/user/login', {
                username,
                password
            });
            if(res.data.token){
                localStorage.setItem("token", res.data.token);
                navigate("/dashboard"); // Fixed typo from dahsboard to dashboard
                window.location.reload();
            }
        } catch(error) {
              if (error.response && error.response.data) {
        setError(error.response.data.message);
    } else {
        setError("Failed to login. Please check your details.");
    }
        }
    };

    return (
        <div className="min-h-screen bg-slate-100 flex items-center justify-center p-4">
            <div className="bg-white p-8 rounded shadow-md w-full max-w-md flex flex-col gap-4">
                
                <h2 className="text-2xl font-bold text-slate-700 text-center">LOGIN</h2>
                
                {error && (
                    <p className="text-red-500 bg-red-100 p-2 rounded text-sm text-center font-semibold">{error}</p>
                )}

                <form onSubmit={handleLogin} className="flex flex-col gap-4">
                    
                    <div className="flex flex-col gap-1">
                        <label className="text-sm font-semibold text-slate-600">User Name</label>
                        <input 
                            type="text" 
                            placeholder="Enter your User Name" 
                            required
                            className="border border-slate-300 p-2 rounded focus:outline-none focus:border-blue-500"
                            onChange={(e) => setUsername(e.target.value)} 
                        />
                    </div>

                    <div className="flex flex-col gap-1">
                        <label className="text-sm font-semibold text-slate-600">Password</label>
                        <input 
                            type="password" 
                            placeholder="Fill in your password" 
                            required 
                            className="border border-slate-300 p-2 rounded focus:outline-none focus:border-blue-500"
                            onChange={(e) => setPassword(e.target.value)} 
                        />
                    </div>

                    <button 
                        type="submit" 
                        className="bg-blue-500 text-white font-bold p-2 rounded mt-2 hover:bg-blue-600 transition"
                    >
                        Login
                    </button>
                    
                </form>
            </div>
        </div>
    );
}
export default Login;
