import React, { useState } from 'react';
import axios from 'axios';
import { useNavigate, Link } from 'react-router-dom';

const Register = () => {
    const [username, setUsername] = useState('');
    const [password, setPassword] = useState('');
    const [confirmPassword, setConfirmPassword] = useState('');
    const [message, setMessage] = useState('');
    const [error, setError] = useState('');
    const navigate = useNavigate();

    const handleRegister = async (e) => {
        e.preventDefault();
        setError('');
        setMessage('');

        // Basic validation check
        if (password !== confirmPassword) {
            return setError('Passwords do not match');
        }

        try {
            const res = await axios.post('http://localhost:5000/api/auth/register', { username, password });
            setMessage(res.data.message || 'Registration successful!');
            
            // Redirect to login page after a brief delay so they can read the success message
            setTimeout(() => {
                navigate('/login');
            }, 2000);
        } catch (err) {
            setError(err.response?.data?.error || 'Registration failed. Try another username.');
        }
    };

    return (
        <div className="min-h-screen bg-slate-100 flex items-center justify-center">
            <form onSubmit={handleRegister} className="bg-white p-8 rounded-lg shadow-md w-96">
                <h2 className="text-2xl font-bold text-slate-800 mb-2 text-center">SmartPark Registration</h2>
                <p className="text-slate-500 text-sm text-center mb-6">Create an administrative account</p>
                
                {error && <p className="bg-red-100 text-red-700 p-2 rounded mb-4 text-sm text-center">{error}</p>}
                {message && <p className="bg-emerald-100 text-emerald-700 p-2 rounded mb-4 text-sm text-center">{message}</p>}
                
                <div className="mb-4">
                    <label className="block text-slate-600 text-sm mb-2">Choose Username</label>
                    <input 
                        type="text" 
                        className="w-full border p-2 rounded focus:outline-emerald-500" 
                        value={username} 
                        onChange={e => setUsername(e.target.value)} 
                        required
                    />
                </div>
                <div className="mb-4">
                    <label className="block text-slate-600 text-sm mb-2">Password</label>
                    <input 
                        type="password" 
                        className="w-full border p-2 rounded focus:outline-emerald-500" 
                        value={password} 
                        onChange={e => setPassword(e.target.value)} 
                        required
                    />
                </div>
                <div className="mb-6">
                    <label className="block text-slate-600 text-sm mb-2">Confirm Password</label>
                    <input 
                        type="password" 
                        className="w-full border p-2 rounded focus:outline-emerald-500" 
                        value={confirmPassword} 
                        onChange={e => setConfirmPassword(e.target.value)} 
                        required
                    />
                </div>
                
                <button type="submit" className="w-full bg-emerald-600 text-white p-2 rounded hover:bg-emerald-700 transition font-medium mb-4">
                    Register Account
                </button>

                <p className="text-sm text-slate-600 text-center">
                    Already have an account?{' '}
                    <Link to="/login" className="text-emerald-600 font-semibold hover:underline">
                        Login here
                    </Link>
                </p>
            </form>
        </div>
    );
};

export default Register;