import React, { useState } from 'react';
import { register } from "@/utils/api/auth";
import useRoutes from "@/hooks/useRoutes";
import SectionTitle from "@/components/ui/SectionTitle";
import SolidButton from "@/components/ui/Buttons/SolidButton";
import { Link, useNavigate } from "react-router"

const RegisterForm = () => {
    const routes = useRoutes();
    const [name, setName] = useState('');
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    const [passwordAgain, setPasswordAgain] = useState('');
    const [error, setError] = useState('');
    const [isLoading, setIsLoading] = useState(false);
    const [isRegistered, setIsRegistered] = useState(false);
    const navigate = useNavigate();

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

        if (password !== passwordAgain) {
            setError("Passwords do not match.");
            return;
        }

        try {
            setIsLoading(true);

            await register(name, email, password, passwordAgain);
            // navigate('/login?registered=true', { replace: true });
        } catch (err) {
            const errorMessage =
                err instanceof Error
                    ? err.message
                    : 'Registration\n failed';
            setError(errorMessage);
        } finally {
            setIsRegistered(true);
            setIsLoading(false);
        }
    };

    if (isRegistered) {
        return <div className="border-2 border-secondary rounded-lg p-5 mt-0">
            <SectionTitle>Registration successful!</SectionTitle>
            Please continue to the <Link to={ routes.auth.login() }>login page</Link>.
        </div>
    }

    return (
        <div style={{ marginTop: '15vh' }} className="lg:w-1/3 lg:mx-auto">
            <div className="pt-2 text-2xl font-syncopate text-primary">
                DISH PLANNER
            </div>
            <div className="border-2 border-secondary rounded-lg p-5 mt-0 lg:pt-10 lg:pb-7">
                <form onSubmit={ handleSubmit } className="max-w-sm mx-auto space-y-4 flex flex-col">
                    <h2 className="text-xl font-bold text-secondary text-right">Register</h2>
                    { error && <p className="text-red-600">{ error }</p> }
                    <input
                        type="text"
                        placeholder="Name"
                        value={ name }
                        onChange={ e => setName(e.target.value) }
                        required
                        className="w-full p-2 border rounded border-secondary bg-gray-600 text-secondary"
                    />
                    <input
                        type="email"
                        placeholder="Email"
                        value={ email }
                        onChange={ e => setEmail(e.target.value) }
                        required
                        className="w-full p-2 border rounded border-secondary bg-gray-600 text-secondary"
                    />
                    <input
                        type="password"
                        placeholder="Password"
                        value={ password }
                        onChange={ e => setPassword(e.target.value) }
                        required
                        className="w-full p-2 border rounded border-secondary bg-gray-600 text-secondary"
                    />
                    <input
                        type="password"
                        placeholder="Password Again"
                        value={ passwordAgain }
                        onChange={ e => setPasswordAgain(e.target.value) }
                        required
                        className="w-full p-2 border rounded border-secondary bg-gray-600 text-secondary"
                    />
                    <SolidButton
                        type="submit"
                        className={ isLoading ? "opacity-50 cursor-not-allowed" : "background-red" }
                    >
                        Create Account
                    </SolidButton>
                    <Link to={routes.auth.login()} className="lowercase mt-2 hover:underline text-center text-secondary underline">
                        Back to Login
                    </Link>
                </form>
            </div>
        </div>
    )
}

export default RegisterForm