✨ Setup Wizard: пошаговая настройка после активации подписки

- Выбор устройства (💻 Компьютер / 📱 Телефон)
- Проверка наличия приложения
- Выбор локаций для Extended тарифа (3 из списка)
- Показ ссылки/QR кода
- Автоматическое открытие после активации Trial
- Прогресс бар для отслеживания шагов

app/page.tsx

@@ -9,6 +9,7 @@ import { useRouter } from 'next/navigation';
 import Link from 'next/link';
 import QRCodeModal from '@/components/QRCodeModal';
 import ReferralModal from '@/components/ReferralModal';
+import SetupWizard from '@/components/SetupWizard';
 import { marzbanApi } from '@/lib/marzban-api';
 import { getSubscriptionUrl, MARZBAN_SUBSCRIPTION_URL } from '@/lib/constants';
 import {
@@ -41,6 +42,7 @@ export default function Home() {
   const [isKeyMenuOpen, setIsKeyMenuOpen] = useState(false);
   const [isQROpen, setIsQROpen] = useState(false);
   const [isReferralOpen, setIsReferralOpen] = useState(false);
+  const [isSetupWizardOpen, setIsSetupWizardOpen] = useState(false);
   const [subscriptionStatus, setSubscriptionStatus] = useState<'active' | 'expired' | 'none'>('none');
   const [expiryDate, setExpiryDate] = useState<string>('');
   const [showToast, setShowToast] = useState(false);
@@ -168,6 +170,45 @@ export default function Home() {
       copyToClipboard(shareText);
     }
   };
+
+  const handleActivateTrial = async () => {
+    setIsLoading(true);
+    try {
+      // Создаем trial подписку через API
+      const response = await fetch('/api/create-user', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          planType: 'trial',
+          telegramId: Date.now(), // Временно, пока нет настоящего Telegram ID
+          telegramUsername: 'demo_user',
+          firstName: 'Demo',
+        }),
+      });
+
+      const data = await response.json();
+
+      if (data.success) {
+        // Сохраняем токен
+        setSubscriptionToken(data.token);
+        setHasSubscription(true);
+        setSubscriptionStatus('active');
+        setExpiryDate(data.expiryDate);
+        localStorage.setItem('subscriptionToken', data.token);
+        
+        // Открываем Setup Wizard
+        setIsSetupWizardOpen(true);
+      } else {
+        showToastNotification('❌ Ошибка создания подписки');
+      }
+    } catch (error) {
+      console.error('Failed to activate trial:', error);
+      showToastNotification('❌ Ошибка активации');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
   return (
     <div
       className="min-h-screen flex flex-col"
@@ -275,8 +316,8 @@ export default function Home() {
           {!hasSubscription && (
             <ActionButton
               icon={<Gift className="w-5 h-5" />}
-              text="Попробовать 7 дней бесплатно"
-              onClick={() => (window.location.href = '/plans')}
+              text={isLoading ? "Активация..." : "Попробовать 7 дней бесплатно"}
+              onClick={handleActivateTrial}
             />
           )}
           <ActionButton
@@ -501,6 +542,18 @@ export default function Home() {
         }}
       />
 
+      {/* Setup Wizard Modal */}
+      {subscriptionToken && (
+        <SetupWizard
+          isOpen={isSetupWizardOpen}
+          onClose={() => setIsSetupWizardOpen(false)}
+          subscriptionUrl={getSubscriptionUrl(subscriptionToken)}
+          username={subscriptionToken}
+          planType="trial"
+          expiryDate={expiryDate}
+        />
+      )}
+
       {/* Toast Notification */}
       {showToast && (
         <div className="fixed bottom-24 left-1/2 transform -translate-x-1/2 z-50 animate-fade-in">

components/SetupWizard.tsx

@@ -0,0 +1,432 @@
+// Setup Wizard - пошаговая настройка после создания подписки
+'use client';
+
+import { useState } from 'react';
+import { X, ChevronLeft, Laptop, Smartphone, Check, Copy, QrCode } from 'lucide-react';
+
+interface SetupWizardProps {
+  isOpen: boolean;
+  onClose: () => void;
+  subscriptionUrl: string;
+  username: string;
+  planType: 'trial' | 'basic' | 'extended' | 'premium';
+  expiryDate?: string;
+}
+
+type Step = 'device' | 'app-check' | 'location' | 'final';
+type DeviceType = 'desktop' | 'mobile' | null;
+type MobileOS = 'android' | 'ios' | null;
+
+export default function SetupWizard({
+  isOpen,
+  onClose,
+  subscriptionUrl,
+  username,
+  planType,
+  expiryDate
+}: SetupWizardProps) {
+  const [step, setStep] = useState<Step>('device');
+  const [deviceType, setDeviceType] = useState<DeviceType>(null);
+  const [mobileOS, setMobileOS] = useState<MobileOS>(null);
+  const [hasApp, setHasApp] = useState<boolean | null>(null);
+  const [selectedLocations, setSelectedLocations] = useState<string[]>([]);
+  const [copied, setCopied] = useState(false);
+  const [showQR, setShowQR] = useState(false);
+
+  // Локации для выбора (для тарифа "Расширенный")
+  const locations = [
+    { id: 'nl', name: '🇳🇱 Нидерланды', ping: '15ms' },
+    { id: 'de', name: '🇩🇪 Германия', ping: '20ms' },
+    { id: 'us', name: '🇺🇸 США', ping: '120ms' },
+    { id: 'sg', name: '🇸🇬 Сингапур', ping: '180ms' },
+    { id: 'jp', name: '🇯🇵 Япония', ping: '160ms' },
+    { id: 'uk', name: '🇬🇧 Великобритания', ping: '35ms' },
+  ];
+
+  const needsLocationSelection = planType === 'extended';
+  const maxLocations = planType === 'extended' ? 3 : 1;
+
+  const handleCopy = async () => {
+    await navigator.clipboard.writeText(subscriptionUrl);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  const handleDeviceSelect = (type: DeviceType) => {
+    setDeviceType(type);
+    if (type === 'desktop') {
+      setStep('app-check');
+    } else {
+      setStep('app-check');
+    }
+  };
+
+  const handleAppCheck = (installed: boolean) => {
+    setHasApp(installed);
+    if (needsLocationSelection) {
+      setStep('location');
+    } else {
+      setStep('final');
+    }
+  };
+
+  const handleLocationToggle = (locationId: string) => {
+    if (selectedLocations.includes(locationId)) {
+      setSelectedLocations(selectedLocations.filter(id => id !== locationId));
+    } else if (selectedLocations.length < maxLocations) {
+      setSelectedLocations([...selectedLocations, locationId]);
+    }
+  };
+
+  const canProceedFromLocation = selectedLocations.length === maxLocations;
+
+  const getProgressSteps = () => {
+    const steps = ['device', 'app-check'];
+    if (needsLocationSelection) steps.push('location');
+    steps.push('final');
+    return steps;
+  };
+
+  const currentStepIndex = getProgressSteps().indexOf(step);
+  const totalSteps = getProgressSteps().length;
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 bg-black/80 backdrop-blur-sm flex items-center justify-center z-50 p-4">
+      <div className="bg-gradient-to-b from-slate-800 to-slate-900 rounded-2xl max-w-md w-full relative border border-slate-700 shadow-2xl">
+        {/* Header */}
+        <div className="p-6 border-b border-slate-700">
+          <div className="flex items-center justify-between mb-4">
+            <button
+              onClick={() => {
+                if (step === 'device') {
+                  onClose();
+                } else if (step === 'app-check') {
+                  setStep('device');
+                } else if (step === 'location') {
+                  setStep('app-check');
+                } else if (step === 'final') {
+                  if (needsLocationSelection) {
+                    setStep('location');
+                  } else {
+                    setStep('app-check');
+                  }
+                }
+              }}
+              className="text-slate-400 hover:text-white transition-colors"
+            >
+              {step === 'device' ? <X className="h-6 w-6" /> : <ChevronLeft className="h-6 w-6" />}
+            </button>
+            <h2 className="text-xl font-bold text-white">
+              {step === 'device' && '🎉 Подписка создана!'}
+              {step === 'app-check' && deviceType === 'desktop' && '💻 Настройка'}
+              {step === 'app-check' && deviceType === 'mobile' && '📱 Настройка'}
+              {step === 'location' && '🌍 Выбор локаций'}
+              {step === 'final' && '✨ Всё готово!'}
+            </h2>
+            <div className="w-6" />
+          </div>
+
+          {/* Progress bar */}
+          <div className="flex gap-2">
+            {Array.from({ length: totalSteps }).map((_, i) => (
+              <div
+                key={i}
+                className={`h-1 flex-1 rounded-full transition-colors ${
+                  i <= currentStepIndex ? 'bg-blue-500' : 'bg-slate-700'
+                }`}
+              />
+            ))}
+          </div>
+        </div>
+
+        {/* Content */}
+        <div className="p-6">
+          {/* Step 1: Device Selection */}
+          {step === 'device' && (
+            <div className="space-y-4">
+              <p className="text-slate-300 text-center mb-6">
+                {expiryDate ? `Действует до ${expiryDate}` : 'Осталось 2 шага до подключения'}
+              </p>
+
+              <p className="text-white font-medium text-center mb-4">
+                Какое у вас устройство?
+              </p>
+
+              <div className="grid grid-cols-2 gap-4">
+                <button
+                  onClick={() => handleDeviceSelect('desktop')}
+                  className="p-6 bg-slate-800/50 hover:bg-slate-700/50 border-2 border-slate-700 hover:border-blue-500 rounded-xl transition-all group"
+                >
+                  <Laptop className="h-12 w-12 mx-auto mb-3 text-blue-500 group-hover:scale-110 transition-transform" />
+                  <p className="text-white font-medium">Компьютер</p>
+                </button>
+
+                <button
+                  onClick={() => handleDeviceSelect('mobile')}
+                  className="p-6 bg-slate-800/50 hover:bg-slate-700/50 border-2 border-slate-700 hover:border-blue-500 rounded-xl transition-all group"
+                >
+                  <Smartphone className="h-12 w-12 mx-auto mb-3 text-blue-500 group-hover:scale-110 transition-transform" />
+                  <p className="text-white font-medium">Телефон</p>
+                </button>
+              </div>
+            </div>
+          )}
+
+          {/* Step 2: App Check */}
+          {step === 'app-check' && deviceType === 'desktop' && (
+            <div className="space-y-4">
+              <p className="text-white font-medium text-center mb-4">
+                У вас установлен Umbrix?
+              </p>
+
+              <div className="grid grid-cols-2 gap-4">
+                <button
+                  onClick={() => handleAppCheck(true)}
+                  className="p-6 bg-slate-800/50 hover:bg-slate-700/50 border-2 border-slate-700 hover:border-green-500 rounded-xl transition-all"
+                >
+                  <Check className="h-12 w-12 mx-auto mb-3 text-green-500" />
+                  <p className="text-white font-medium">Да</p>
+                </button>
+
+                <button
+                  onClick={() => handleAppCheck(false)}
+                  className="p-6 bg-slate-800/50 hover:bg-slate-700/50 border-2 border-slate-700 hover:border-red-500 rounded-xl transition-all"
+                >
+                  <X className="h-12 w-12 mx-auto mb-3 text-red-500" />
+                  <p className="text-white font-medium">Нет</p>
+                </button>
+              </div>
+
+              {hasApp === false && (
+                <div className="mt-6 p-4 bg-blue-500/10 border border-blue-500/30 rounded-xl">
+                  <p className="text-white font-medium mb-3">Скачайте Umbrix:</p>
+                  <div className="flex flex-col gap-2">
+                    <a
+                      href="https://umbrix.net/download"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg text-white font-medium transition-colors text-center"
+                    >
+                      🪟 Windows
+                    </a>
+                    <a
+                      href="https://umbrix.net/download"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg text-white font-medium transition-colors text-center"
+                    >
+                      🍎 macOS
+                    </a>
+                    <a
+                      href="https://umbrix.net/download"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg text-white font-medium transition-colors text-center"
+                    >
+                      🐧 Linux
+                    </a>
+                  </div>
+                  <button
+                    onClick={() => setStep(needsLocationSelection ? 'location' : 'final')}
+                    className="w-full mt-4 px-4 py-2 bg-slate-700 hover:bg-slate-600 rounded-lg text-white font-medium transition-colors"
+                  >
+                    ➡️ Уже установил, далее
+                  </button>
+                </div>
+              )}
+            </div>
+          )}
+
+          {step === 'app-check' && deviceType === 'mobile' && (
+            <div className="space-y-4">
+              <p className="text-white font-medium text-center mb-4">
+                Какая у вас система?
+              </p>
+
+              <div className="grid grid-cols-2 gap-4">
+                <button
+                  onClick={() => {
+                    setMobileOS('android');
+                    setHasApp(null);
+                  }}
+                  className="p-6 bg-slate-800/50 hover:bg-slate-700/50 border-2 border-slate-700 hover:border-green-500 rounded-xl transition-all"
+                >
+                  <div className="text-4xl mb-3">🤖</div>
+                  <p className="text-white font-medium">Android</p>
+                </button>
+
+                <button
+                  onClick={() => {
+                    setMobileOS('ios');
+                    setHasApp(null);
+                  }}
+                  className="p-6 bg-slate-800/50 hover:bg-slate-700/50 border-2 border-slate-700 hover:border-blue-500 rounded-xl transition-all"
+                >
+                  <div className="text-4xl mb-3">🍎</div>
+                  <p className="text-white font-medium">iOS</p>
+                </button>
+              </div>
+
+              {mobileOS && (
+                <div className="mt-6">
+                  <p className="text-white font-medium mb-3">У вас есть приложение?</p>
+                  
+                  <div className="grid grid-cols-2 gap-4 mb-4">
+                    <button
+                      onClick={() => handleAppCheck(true)}
+                      className="px-4 py-3 bg-green-600 hover:bg-green-700 rounded-lg text-white font-medium transition-colors"
+                    >
+                      ✅ Да
+                    </button>
+                    <button
+                      onClick={() => handleAppCheck(false)}
+                      className="px-4 py-3 bg-slate-700 hover:bg-slate-600 rounded-lg text-white font-medium transition-colors"
+                    >
+                      ❌ Нет
+                    </button>
+                  </div>
+
+                  {hasApp === false && (
+                    <div className="p-4 bg-blue-500/10 border border-blue-500/30 rounded-xl">
+                      <p className="text-slate-300 text-sm mb-2">Рекомендуем:</p>
+                      {mobileOS === 'android' ? (
+                        <div className="space-y-2">
+                          <div className="text-white">• V2RayNG</div>
+                          <div className="text-white">• Hiddify</div>
+                          <div className="text-white">• v2rayTun</div>
+                        </div>
+                      ) : (
+                        <div className="space-y-2">
+                          <div className="text-white">• Shadowrocket (AppStore)</div>
+                          <div className="text-white">• Hiddify (AppStore)</div>
+                        </div>
+                      )}
+                      <button
+                        onClick={() => setStep(needsLocationSelection ? 'location' : 'final')}
+                        className="w-full mt-4 px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg text-white font-medium transition-colors"
+                      >
+                        ➡️ Уже установил, далее
+                      </button>
+                    </div>
+                  )}
+                </div>
+              )}
+            </div>
+          )}
+
+          {/* Step 3: Location Selection (только для extended тарифа) */}
+          {step === 'location' && (
+            <div className="space-y-4">
+              <p className="text-white font-medium text-center mb-2">
+                Выберите {maxLocations} локации
+              </p>
+              <p className="text-slate-400 text-sm text-center mb-4">
+                Выбрано: {selectedLocations.length} из {maxLocations}
+              </p>
+
+              <div className="space-y-2 max-h-[300px] overflow-y-auto">
+                {locations.map((location) => {
+                  const isSelected = selectedLocations.includes(location.id);
+                  const canSelect = selectedLocations.length < maxLocations;
+
+                  return (
+                    <button
+                      key={location.id}
+                      onClick={() => handleLocationToggle(location.id)}
+                      disabled={!isSelected && !canSelect}
+                      className={`w-full p-4 rounded-xl border-2 transition-all flex items-center justify-between ${
+                        isSelected
+                          ? 'bg-blue-600/20 border-blue-500'
+                          : canSelect
+                          ? 'bg-slate-800/50 border-slate-700 hover:border-slate-600'
+                          : 'bg-slate-800/30 border-slate-700/50 opacity-50 cursor-not-allowed'
+                      }`}
+                    >
+                      <div className="flex items-center gap-3">
+                        <div className={`w-5 h-5 rounded border-2 flex items-center justify-center ${
+                          isSelected ? 'bg-blue-500 border-blue-500' : 'border-slate-600'
+                        }`}>
+                          {isSelected && <Check className="h-4 w-4 text-white" />}
+                        </div>
+                        <span className="text-white font-medium">{location.name}</span>
+                      </div>
+                      <span className="text-slate-400 text-sm">{location.ping}</span>
+                    </button>
+                  );
+                })}
+              </div>
+
+              <button
+                onClick={() => setStep('final')}
+                disabled={!canProceedFromLocation}
+                className={`w-full py-3 rounded-xl font-medium transition-colors ${
+                  canProceedFromLocation
+                    ? 'bg-blue-600 hover:bg-blue-700 text-white'
+                    : 'bg-slate-700 text-slate-500 cursor-not-allowed'
+                }`}
+              >
+                {canProceedFromLocation ? '➡️ Продолжить' : `Выберите ещё ${maxLocations - selectedLocations.length}`}
+              </button>
+            </div>
+          )}
+
+          {/* Step 4: Final - Show Link/QR */}
+          {step === 'final' && (
+            <div className="space-y-4">
+              <div className="text-center mb-6">
+                <div className="text-4xl mb-3">🎉</div>
+                <p className="text-slate-300 text-sm">
+                  {deviceType === 'desktop' ? 'Скопируйте ссылку и вставьте в Umbrix' : 'Отсканируйте QR код или скопируйте ссылку'}
+                </p>
+              </div>
+
+              <button
+                onClick={handleCopy}
+                className="w-full p-4 bg-slate-800/50 border-2 border-slate-700 hover:border-blue-500 rounded-xl transition-all group"
+              >
+                <div className="flex items-center justify-between">
+                  <span className="text-white font-medium">
+                    {copied ? '✅ Скопировано!' : '📋 Скопировать ссылку'}
+                  </span>
+                  <Copy className={`h-5 w-5 transition-colors ${copied ? 'text-green-500' : 'text-slate-400 group-hover:text-blue-500'}`} />
+                </div>
+              </button>
+
+              {deviceType === 'mobile' && (
+                <button
+                  onClick={() => setShowQR(!showQR)}
+                  className="w-full p-4 bg-slate-800/50 border-2 border-slate-700 hover:border-blue-500 rounded-xl transition-all group"
+                >
+                  <div className="flex items-center justify-between">
+                    <span className="text-white font-medium">
+                      {showQR ? '📱 Скрыть QR код' : '📱 Показать QR код'}
+                    </span>
+                    <QrCode className="h-5 w-5 text-slate-400 group-hover:text-blue-500 transition-colors" />
+                  </div>
+                </button>
+              )}
+
+              {showQR && (
+                <div className="p-6 bg-white rounded-xl">
+                  <div className="text-center text-slate-800 text-sm mb-2">QR код</div>
+                  <div className="text-xs text-slate-600 break-all">{subscriptionUrl}</div>
+                </div>
+              )}
+
+              <div className="border-t border-slate-700 pt-4 mt-4">
+                <button
+                  onClick={onClose}
+                  className="w-full p-4 bg-slate-700 hover:bg-slate-600 rounded-xl transition-colors text-white font-medium"
+                >
+                  📖 Нужна помощь? Открыть инструкцию
+                </button>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}