no-copy-frontend/src/app/ui/referral-page/referral-link-section.tsx

'use client'

import { fetchReferralUserStats } from '@/app/actions/referralsActions';
import { useQuery } from '@tanstack/react-query';
import { useTranslations } from 'next-intl';
import { useEffect, useRef, useState } from 'react';
import { toast } from 'sonner';

export default function ReferralLinkSection() {
	const {
		data: referralUserStats,
		isLoading,
		isError,
		error
	} = useQuery({
		queryKey: ['referralUserStats'],
		queryFn: () => {
			return fetchReferralUserStats();
		},
		select: (data) => {
			return data;
		}
	});

	const t = useTranslations('Global')
	const [referralUrl, setReferralUrl] = useState<string>('');
	const refLink = useRef<HTMLElement>(null);

	useEffect(() => {
		if (typeof window !== 'undefined') {
			setReferralUrl(`${window.location.origin}/register?ref=${referralUserStats?.referralLink}`);
		}
	}, [referralUserStats]);

	const copyHandler = async () => {
		if (!refLink.current?.textContent) return;

		const textToCopy = refLink.current.textContent;

		if (typeof window === 'undefined' || !navigator.clipboard) {
			console.warn('Clipboard API не доступен');
			fallbackCopy(textToCopy);
			return;
		}

		try {
			await navigator.clipboard.writeText(textToCopy);
			toast.success(`${t('copied')}: ${textToCopy}`);
		} catch (err) {
			console.error('Ошибка копирования:', err);

			const success = fallbackCopy(textToCopy);
			if (success) {
				toast.success(`${t('copied')}: ${textToCopy}`);
			} else {
				toast.error('Не удалось скопировать');
			}
		}
	};

	const fallbackCopy = (text: string) => {
		try {
			const textArea = document.createElement('textarea');
			textArea.value = text;
			textArea.style.position = 'fixed';
			textArea.style.left = '-999999px';
			textArea.style.top = '-999999px';
			document.body.appendChild(textArea);

			textArea.select();
			textArea.setSelectionRange(0, 99999);

			const successful = document.execCommand('copy');
			document.body.removeChild(textArea);

			return successful;
		} catch (err) {
			console.error('Fallback copy failed:', err);
			return false;
		}
	};

	if (!referralUserStats?.referralLink) {
		return null;
	}

	return (
		<div className="referral-link-section">
			<h3>Ваша реферальная ссылка</h3>
			<p>Поделитесь этой ссылкой с друзьями и получайте комиссию с каждой их покупки</p>
			<div className="referral-link-input">
				<span
					id="referral-link"
					ref={refLink}
				>
					{referralUrl}
				</span >
				<button
					className="copy-btn"
					onClick={copyHandler}
				>
					Копировать
				</button>
			</div>
			<p className="referral-link-footer">
				Код: <strong>{referralUserStats?.referralLink}</strong> •
				Приглашений: <strong>
					{referralUserStats?.totalInvitee}
				</strong>
			</p>
		</div>
	)
}