// static/js/auth.InviteRegisterForm.jsx

function InviteRegisterForm() {
    const { setView } = useContext(AuthContext);

    const [inviteCode, setInviteCode] = useState("");
    const [email, setEmail] = useState("");
    const [firstName, setFirstName] = useState("");
    const [lastName, setLastName] = useState("");
    const [password, setPassword] = useState("");
    const [password2, setPassword2] = useState("");
    const [agreed, setAgreed] = useState(false);

    const [loading, setLoading] = useState(false);
    const [error, setError] = useState("");
    const [success, setSuccess] = useState("");

    const handleSubmit = async (e) => {
        e.preventDefault();
        setError("");
        setSuccess("");

        if (!agreed) {
            setError("Для регистрации необходимо согласие на обработку персональных данных.");
            return;
        }

        if (!inviteCode.trim()) {
            setError("Введите код приглашения организации.");
            return;
        }

        if (password.length < 6) {
            setError("Пароль должен быть не короче 6 символов.");
            return;
        }

        if (password !== password2) {
            setError("Пароли не совпадают.");
            return;
        }

        setLoading(true);

        try {
            await API.register({
                email: email.trim(),
                first_name: firstName.trim(),
                last_name: lastName.trim(),
                password,
                invite_code: inviteCode.trim(),
                personal_data_agreement: true,
            });

            setSuccess("Регистрация успешна. Теперь вы можете войти в систему.");
            // Переключаемся на форму логина
            setView("login");
        } catch (e) {
            console.error(e);
            setError(e.message || "Ошибка регистрации");
        } finally {
            setLoading(false);
        }
    };

    return (
        <div className="max-w-md mx-auto bg-white rounded-xl shadow-md p-4 sm:p-6">
            <h2 className="text-xl sm:text-2xl font-semibold mb-4">
                Регистрация по инвайт-коду
            </h2>
            <p className="text-sm text-gray-600 mb-4">
                Введите код приглашения, который вы получили от своего работодателя,
                и создайте личный аккаунт для прохождения тестов.
            </p>

            {error && (
                <div className="mb-3 text-sm text-red-600 bg-red-50 border border-red-200 rounded-md px-3 py-2">
                    {error}
                </div>
            )}
            {success && (
                <div className="mb-3 text-sm text-green-700 bg-green-50 border border-green-200 rounded-md px-3 py-2">
                    {success}
                </div>
            )}

            <form onSubmit={handleSubmit} className="space-y-4">
                <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                        Инвайт-код организации *
                    </label>
                    <input
                        type="text"
                        className="w-full border rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
                        value={inviteCode}
                        onChange={(e) => setInviteCode(e.target.value)}
                        placeholder="Например, ORG-ABC12345"
                        required
                    />
                </div>

                <div className="grid gap-3 sm:grid-cols-2">
                    <div className="sm:col-span-2">
                        <label className="block text-sm font-medium text-gray-700 mb-1">
                            Email *
                        </label>
                        <input
                            type="email"
                            className="w-full border rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
                            value={email}
                            onChange={(e) => setEmail(e.target.value)}
                            required
                        />
                    </div>
                    <div>
                        <label className="block text-sm font-medium text-gray-700 mb-1">
                            Имя
                        </label>
                        <input
                            type="text"
                            className="w-full border rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
                            value={firstName}
                            onChange={(e) => setFirstName(e.target.value)}
                        />
                    </div>
                    <div>
                        <label className="block text-sm font-medium text-gray-700 mb-1">
                            Фамилия
                        </label>
                        <input
                            type="text"
                            className="w-full border rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
                            value={lastName}
                            onChange={(e) => setLastName(e.target.value)}
                        />
                    </div>
                </div>

                <div className="grid gap-3 sm:grid-cols-2">
                    <div>
                        <label className="block text-sm font-medium text-gray-700 mb-1">
                            Пароль *
                        </label>
                        <input
                            type="password"
                            className="w-full border rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
                            value={password}
                            onChange={(e) => setPassword(e.target.value)}
                            required
                        />
                    </div>
                    <div>
                        <label className="block text-sm font-medium text-gray-700 mb-1">
                            Повторите пароль *
                        </label>
                        <input
                            type="password"
                            className="w-full border rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
                            value={password2}
                            onChange={(e) => setPassword2(e.target.value)}
                            required
                        />
                    </div>
                </div>

                <div className="space-y-2">
                    <label className="flex items-start gap-2 text-xs sm:text-sm text-gray-700">
                        <input
                            type="checkbox"
                            className="mt-1"
                            checked={agreed}
                            onChange={(e) => setAgreed(e.target.checked)}
                        />
                        <span>
                            Я соглашаюсь на обработку персональных данных и принимаю{" "}
                            <a
                                href="/personal-data"
                                target="_blank"
                                rel="noopener noreferrer"
                                className="text-blue-600 hover:underline"
                            >
                                Согласие на обработку персональных данных
                            </a>{" "}
                            и{" "}
                            <a
                                href="/privacy-policy"
                                target="_blank"
                                rel="noopener noreferrer"
                                className="text-blue-600 hover:underline"
                            >
                                Политику конфиденциальности
                            </a>.
                        </span>
                    </label>
                </div>

                <div className="flex flex-col sm:flex-row gap-3">
                    <button
                        type="submit"
                        disabled={loading}
                        className="inline-flex justify-center items-center px-4 py-2.5 rounded-md bg-blue-600 hover:bg-blue-700 disabled:bg-blue-300 text-white text-sm font-semibold shadow-sm"
                    >
                        {loading ? "Регистрация..." : "Зарегистрироваться"}
                    </button>
                    <button
                        type="button"
                        onClick={() => setView('landing')}
                        className="inline-flex justify-center items-center px-4 py-2.5 rounded-md bg-white hover:bg-gray-50 text-sm font-semibold text-gray-800 border border-gray-200"
                    >
                        Назад
                    </button>
                </div>
            </form>
        </div>
    );
}