'use client';
import { useState } from 'react';
import { ArrowLeft, Check } from 'lucide-react';
import { useRouter } from 'next/navigation';
export default function Plans() {
const router = useRouter();
const [isLoading, setIsLoading] = useState(false);
const handlePurchase = async (planType: string) => {
// Проверяем есть ли уже активная подписка ЧЕРЕЗ API
const telegramWebApp = (window as any).Telegram?.WebApp;
const telegramId = telegramWebApp?.initDataUnsafe?.user?.id;
const telegramUsername = telegramWebApp?.initDataUnsafe?.user?.username;
if (telegramId || telegramUsername) {
const params = new URLSearchParams();
if (telegramId) params.append('telegramId', telegramId.toString());
if (telegramUsername) params.append('telegramUsername', telegramUsername);
const checkResponse = await fetch(`/api/user-subscription?${params.toString()}`);
const checkData = await checkResponse.json();
if (checkData.success && checkData.hasSubscription) {
const confirmOverwrite = confirm('У вас уже есть активная подписка. Создать новую? (старая будет заменена)');
if (!confirmOverwrite) {
return;
}
}
}
setIsLoading(true);
try {
const telegramWebApp = (window as any).Telegram?.WebApp;
console.log('🔍 Telegram WebApp объект:', telegramWebApp);
console.log('🔍 initData:', telegramWebApp?.initData);
console.log('🔍 initDataUnsafe (FULL):', JSON.stringify(telegramWebApp?.initDataUnsafe, null, 2));
console.log('🔍 user (FULL):', JSON.stringify(telegramWebApp?.initDataUnsafe?.user, null, 2));
const user = telegramWebApp?.initDataUnsafe?.user;
const telegramId = user?.id || null;
const telegramUsername = user?.username || null;
const firstName = user?.first_name || null;
const lastName = user?.last_name || null;
console.log('📤 Отправляем:', { planType, telegramId, telegramUsername, firstName, lastName });
// Вызываем API для создания реального пользователя в Marzban
const response = await fetch('/api/create-user', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
planType: planType,
telegramId: telegramId,
telegramUsername: telegramUsername,
firstName: firstName,
lastName: lastName,
}),
});
const data = await response.json();
if (!data.success) {
throw new Error(data.error || 'Failed to create subscription');
}
// Просто возвращаемся на главную - там данные обновятся автоматически
router.push('/');
} catch (error) {
console.error('Purchase error:', error);
alert('Ошибка при создании подписки. Попробуйте позже.');
} finally {
setIsLoading(false);
}
};
return (
{/* Header */}
Выбрать тариф
{/* Trial - полная ширина */}
handlePurchase('trial')}
isLoading={isLoading}
/>
{/* Grid 2x2 для остальных тарифов */}
{/* Start */}
handlePurchase('start')}
isLoading={isLoading}
/>
{/* Plus */}
handlePurchase('plus')}
isLoading={isLoading}
/>
{/* Max */}
handlePurchase('max')}
isLoading={isLoading}
/>
{/* Empty slot or promo */}
{isPopular && (
⭐ ТОП
)}
{badge}
{title}
{price}
{features.map((feature, i) => (
-
{feature}
))}