// static/js/auth.RegisterOrganizationForm.jsx

function RegisterOrganizationForm() {
    const { login, setView } = useContext(AuthContext);

    const [orgName, setOrgName] = useState("");
    const [orgDescription, setOrgDescription] = useState("");
    const [orgEmail, setOrgEmail] = useState("");
    const [orgPhone, setOrgPhone] = useState("");
    const [orgWebsite, setOrgWebsite] = useState("");

    const [adminFirstName, setAdminFirstName] = useState("");
    const [adminLastName, setAdminLastName] = useState("");
    const [adminEmail, setAdminEmail] = useState("");
    const [adminPassword, setAdminPassword] = useState("");
    const [adminPassword2, setAdminPassword2] = 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 (adminPassword.length < 6) {
            setError("Пароль администратора должен быть не короче 6 символов.");
            return;
        }

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

        if (!orgName.trim()) {
            setError("Введите название организации.");
            return;
        }

        if (!orgEmail.trim()) {
            setError("Укажите контактный email организации.");
            return;
        }

        if (!adminEmail.trim()) {
            setError("Укажите email администратора.");
            return;
        }

        setLoading(true);

        try {
            const payload = {
                org_name: orgName.trim(),
                org_description: orgDescription.trim() || null,
                org_contact_email: orgEmail.trim(),
                org_contact_phone: orgPhone.trim() || null,
                org_website: orgWebsite.trim() || null,
                org_logo_url: null,

                admin_email: adminEmail.trim(),
                admin_first_name: adminFirstName.trim() || "Администратор",
                admin_last_name: adminLastName.trim() || "Организации",
                admin_password: adminPassword,

                personal_data_agreement: true,
            };

            const data = await API.registerOrganization(payload);

            // Автоматически логинимся и переходим в админ-панель
            if (data && data.access_token) {
                login(data.access_token);
                setSuccess("Организация успешно зарегистрирована. Перенаправляем в админ-панель...");
                setView("admin");
            } else {
                setSuccess("Организация успешно зарегистрирована. Теперь войдите под админ-аккаунтом.");
                setView("login");
            }
        } catch (e) {
            console.error(e);
            setError(e.message || "Ошибка регистрации организации");
        } finally {
            setLoading(false);
        }
    };

    return (
        <div className="max-w-3xl 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-6">
                {/* Блок: организация */}
                <div className="space-y-3">
                    <h3 className="font-semibold text-gray-900">Данные организации</h3>
                    <div className="grid gap-3 md:grid-cols-2">
                        <div className="md:col-span-2">
                            <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={orgName}
                                onChange={(e) => setOrgName(e.target.value)}
                                required
                            />
                        </div>
                        <div>
                            <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={orgEmail}
                                onChange={(e) => setOrgEmail(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={orgPhone}
                                onChange={(e) => setOrgPhone(e.target.value)}
                            />
                        </div>
                        <div className="md:col-span-2">
                            <label className="block text-sm font-medium text-gray-700 mb-1">
                                Сайт (опционально)
                            </label>
                            <input
                                type="url"
                                className="w-full border rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
                                value={orgWebsite}
                                onChange={(e) => setOrgWebsite(e.target.value)}
                                placeholder="https://..."
                            />
                        </div>
                        <div className="md:col-span-2">
                            <label className="block text-sm font-medium text-gray-700 mb-1">
                                Краткое описание (опционально)
                            </label>
                            <textarea
                                className="w-full border rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 min-h-[80px]"
                                value={orgDescription}
                                onChange={(e) => setOrgDescription(e.target.value)}
                            />
                        </div>
                    </div>
                </div>

                {/* Блок: администратор */}
                <div className="space-y-3">
                    <h3 className="font-semibold text-gray-900">Администратор организации</h3>
                    <div className="grid gap-3 md:grid-cols-2">
                        <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={adminFirstName}
                                onChange={(e) => setAdminFirstName(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={adminLastName}
                                onChange={(e) => setAdminLastName(e.target.value)}
                            />
                        </div>
                        <div>
                            <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={adminEmail}
                                onChange={(e) => setAdminEmail(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={adminPassword}
                                onChange={(e) => setAdminPassword(e.target.value)}
                                required
                            />
                        </div>
                        <div className="md:col-span-2">
                            <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={adminPassword2}
                                onChange={(e) => setAdminPassword2(e.target.value)}
                                required
                            />
                        </div>
                    </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>
    );
}