// static/js/user.Profile.jsx

function UserProfile() {
    const { user, setUser, token, setView } = useContext(AuthContext);

    const [email, setEmail] = useState(user ? user.email : "");
    const [firstName, setFirstName] = useState(user ? user.first_name : "");
    const [lastName, setLastName] = useState(user ? user.last_name : "");
    const [savingProfile, setSavingProfile] = useState(false);

    const [oldPassword, setOldPassword] = useState("");
    const [newPassword, setNewPassword] = useState("");
    const [newPassword2, setNewPassword2] = useState("");
    const [savingPassword, setSavingPassword] = useState(false);

    useEffect(() => {
        if (user) {
            setEmail(user.email || "");
            setFirstName(user.first_name || "");
            setLastName(user.last_name || "");
        }
    }, [user]);

    const handleSaveProfile = async () => {
        setSavingProfile(true);
        try {
            const updatedUser = await API.updateProfile(token, {
                email,
                first_name: firstName,
                last_name: lastName,
            });
            setUser(updatedUser);
            alert("Профиль обновлен");
        } catch (e) {
            alert(e.message);
        } finally {
            setSavingProfile(false);
        }
    };

    const handleChangePassword = async () => {
        if (!oldPassword || !newPassword || !newPassword2) {
            alert("Заполните все поля для смены пароля");
            return;
        }
        if (newPassword !== newPassword2) {
            alert("Новый пароль и его подтверждение не совпадают");
            return;
        }
        if (newPassword.length < 6) {
            alert("Новый пароль должен быть не короче 6 символов");
            return;
        }

        setSavingPassword(true);
        try {
            await API.changePassword(token, {
                old_password: oldPassword,
                new_password: newPassword,
            });
            alert("Пароль успешно изменён");
            setOldPassword("");
            setNewPassword("");
            setNewPassword2("");
        } catch (e) {
            alert(e.message);
        } finally {
            setSavingPassword(false);
        }
    };

    if (!user) {
        return (
            <div className="text-gray-500 text-sm">
                Нет данных пользователя. Попробуйте заново войти в систему.
            </div>
        );
    }

    return (
        <div className="max-w-2xl mx-auto space-y-6">
            <div className="flex justify-between items-center">
                <h2 className="text-2xl font-bold">Профиль</h2>
                <button
                    onClick={() => setView('dashboard')}
                    className="text-sm text-gray-600 hover:text-blue-600"
                >
                    ← Вернуться в панель
                </button>
            </div>

            {/* Личные данные */}
            <div className="bg-white p-6 rounded shadow border border-gray-200 space-y-4">
                <h3 className="text-lg font-semibold">Личные данные</h3>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label className="block text-sm text-gray-600 mb-1">Имя</label>
                        <input
                            className="w-full border rounded p-2"
                            value={firstName}
                            onChange={e => setFirstName(e.target.value)}
                        />
                    </div>
                    <div>
                        <label className="block text-sm text-gray-600 mb-1">Фамилия</label>
                        <input
                            className="w-full border rounded p-2"
                            value={lastName}
                            onChange={e => setLastName(e.target.value)}
                        />
                    </div>
                    <div className="md:col-span-2">
                        <label className="block text-sm text-gray-600 mb-1">Email (логин)</label>
                        <input
                            className="w-full border rounded p-2"
                            value={email}
                            onChange={e => setEmail(e.target.value)}
                        />
                    </div>
                </div>
                <button
                    onClick={handleSaveProfile}
                    disabled={savingProfile}
                    className="mt-2 bg-blue-600 text-white px-4 py-2 rounded font-semibold hover:bg-blue-700 disabled:opacity-50"
                >
                    {savingProfile ? "Сохраняем..." : "Сохранить профиль"}
                </button>
            </div>

            {/* Смена пароля */}
            <div className="bg-white p-6 rounded shadow border border-gray-200 space-y-4">
                <h3 className="text-lg font-semibold">Смена пароля</h3>
                <div className="space-y-3">
                    <div>
                        <label className="block text-sm text-gray-600 mb-1">Текущий пароль</label>
                        <input
                            type="password"
                            className="w-full border rounded p-2"
                            value={oldPassword}
                            onChange={e => setOldPassword(e.target.value)}
                        />
                    </div>
                    <div>
                        <label className="block text-sm text-gray-600 mb-1">Новый пароль</label>
                        <input
                            type="password"
                            className="w-full border rounded p-2"
                            value={newPassword}
                            onChange={e => setNewPassword(e.target.value)}
                        />
                    </div>
                    <div>
                        <label className="block text-sm text-gray-600 mb-1">Повторите новый пароль</label>
                        <input
                            type="password"
                            className="w-full border rounded p-2"
                            value={newPassword2}
                            onChange={e => setNewPassword2(e.target.value)}
                        />
                    </div>
                </div>
                <button
                    onClick={handleChangePassword}
                    disabled={savingPassword}
                    className="mt-2 bg-gray-800 text-white px-4 py-2 rounded font-semibold hover:bg-black disabled:opacity-50"
                >
                    {savingPassword ? "Меняем..." : "Изменить пароль"}
                </button>
            </div>
        </div>
    );
}