import React, {useEffect, useState} from "react";
import axios from "axios";
import {useNavigate} from "react-router-dom";
import {getServiceAddress} from "../utils/consul";

const RegisterPage = () => {
    const [apiUrl, setApiUrl] = useState(null);
    const [username, setUsername] = useState("");
    const [email, setEmail] = useState("");
    const [password, setPassword] = useState("");
    const [errorMessage, setErrorMessage] = useState("");

    const navigate = useNavigate();

    useEffect(() => {
        // Fetch the API address from Consul
        const fetchApiUrl = async () => {
            try {
                const {ServiceAddress, ServicePort} = await getServiceAddress("api-service");
                setApiUrl(`http://${ServiceAddress}:${ServicePort}/api/register`);
            } catch (error) {
                setErrorMessage("Failed to retrieve API information.");
            }
        };

        fetchApiUrl();
    }, []);

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

        if (!apiUrl) {
            setErrorMessage("API URL not available");
            return;
        }

        try {
            const {ServiceAddress, ServicePort} = await getServiceAddress("api-service");
            const response = await axios.post(apiUrl, {
                username,
                email,
                password,
            });
            alert("Registration successful! Please log in.");
            navigate("/login"); // Redirect to login page
        } catch (error) {
            console.error("Registration failed:", error);
            setErrorMessage("Registration failed. Please try again.");
        }
    };

    return (
        <div className="register-container">
            <h1>Register</h1>
            <form onSubmit={handleRegister}>
                <div>
                    <label>Username:</label>
                    <input
                        type="text"
                        value={username}
                        onChange={(e) => setUsername(e.target.value)}
                        required
                    />
                </div>
                <div>
                    <label>Email:</label>
                    <input
                        type="email"
                        value={email}
                        onChange={(e) => setEmail(e.target.value)}
                        required
                    />
                </div>
                <div>
                    <label>Password:</label>
                    <input
                        type="password"
                        value={password}
                        onChange={(e) => setPassword(e.target.value)}
                        required
                    />
                </div>
                {errorMessage && <p className="error-message">{errorMessage}</p>}
                <button type="submit">Register</button>
            </form>
        </div>
    );
};

export default RegisterPage;