import styles from "./ResetComponent.module.css";
import { useState, type ReactElement, type SubmitEvent } from "react";
import { Link, useNavigate } from "react-router-dom";
import { requestPasswordReset } from "../../../api/ResetAPI/Reset";

export function Reset():ReactElement {
    const navigate = useNavigate();
    const [email, setEmail] = useState("");
    const [errors, setErrors] = useState<{ email?: string;}>({});

    const validateEmail = (value: string) => {
        if (!value) return "Введите email";
        if (!/^\S+@\S+\.\S+$/.test(value)) return "Некорректный email";
        return undefined;
    };
    const handleSubmit = async (e: SubmitEvent<HTMLFormElement>) => {
        e.preventDefault();
        const next = {
            email: validateEmail(email),
        };
        setErrors(next);
        if (next.email) return;
        try {
            await requestPasswordReset(email);
            navigate("/");
        } catch (err) {
            console.error(err);
            setErrors({ email: "Ошибка, попробуйте позже" });
        }
    };

    return (
        <>
            <div className={styles.wrapper_1}>
                <form noValidate onSubmit={handleSubmit}>
                <h1 className={styles.Title}> Восстановление пароля </h1>
                <p className={styles.Description}>Введите Email, и мы отправим на него новый пароль</p>
                    <label className={styles.Fields} htmlFor="email">Email</label>
                    <div className={styles.email_field}>
                        <input
                            id="email"
                            name="email"
                            type="email"
                            autoComplete="email"
                            value={email}
                            onChange={(e) => setEmail(e.target.value)}
                            onBlur={() => setErrors((p) => ({ ...p, email: validateEmail(email) }))}
                            placeholder="Email"
                            aria-invalid={!!errors.email}
                            className={errors.email ? styles.inputError : undefined}
                        />
                        <svg className={styles["email-icon"]} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
                            <rect x="3" y="5" width="18" height="14" rx="2.5" stroke="#72879A" strokeWidth="1.8"/>
                            <path d="m4.5 7 7.5 6 7.5-6" stroke="#72879A" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
                        </svg>
                        {errors.email && <p className={styles.errorText}>{errors.email}</p>}
                    </div>
                    <div className={styles.submitbtn}>
                    <button className={styles.submit} type="submit">
                        Отправить новый пароль
                        <svg className={styles["submit-arrow"]} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
                            <path d="M4 12h14" stroke="white" strokeWidth="2" strokeLinecap="round"/>
                            <path d="m13 6 6 6-6 6" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                        </svg>
                    </button>
                    </div>
                    <div className={styles.footer}>
                        <Link to="/" className={styles.login_link}>Вернуться ко входу</Link>
                    </div>
                </form>
            </div>
        </>
    );
}