app_umbrix/app/plans/page.tsx

'use client';

import { useState, useEffect } from 'react';
import { ArrowLeft, Check, ChevronRight, Loader2 } from 'lucide-react';
import { useRouter } from 'next/navigation';

type PlanType = 'trial' | 'start' | 'plus' | 'max';
type Period = '1month' | '3months' | '6months' | '1year';
type Step = 'plan' | 'period' | 'locations' | 'processing';

interface Location {
  id: number;
  name: string;
  address: string;
  ping: string;
  country: string;
  flag: string;
  status: string;
}

interface PlanConfig {
  name: string;
  badge: string;
  maxLocations: number;
  dataLimit: string;
  prices: Record<Period, number>;
}

const PLANS: Record<PlanType, PlanConfig> = {
  trial: {
    name: 'Пробный',
    badge: '🎁 Пробный период',
    maxLocations: 999,
    dataLimit: 'Безлимит',
    prices: {
      '1month': 0,
      '3months': 0,
      '6months': 0,
      '1year': 0,
    },
  },
  start: {
    name: 'Старт',
    badge: '🌍 Старт',
    maxLocations: 1,
    dataLimit: '50 ГБ',
    prices: {
      '1month': 99,
      '3months': 269,    // -9% (89₽/мес)
      '6months': 499,    // -16% (83₽/мес)
      '1year': 949,      // -20% (79₽/мес)
    },
  },
  plus: {
    name: 'Плюс',
    badge: '🌎 Плюс',
    maxLocations: 3,
    dataLimit: '299 ГБ',
    prices: {
      '1month': 249,
      '3months': 649,   // -13% (216₽/мес)
      '6months': 1199,  // -20% (199₽/мес)
      '1year': 2249,    // -25% (187₽/мес)
    },
  },
  max: {
    name: 'Макс',
    badge: '🌏 Макс',
    maxLocations: 0, // Все локации автоматически, без выбора
    dataLimit: 'Безлимит',
    prices: {
      '1month': 350,
      '3months': 949,   // -10% (316₽/мес)
      '6months': 1799,  // -14% (299₽/мес)
      '1year': 3349,    // -20% (279₽/мес)
    },
  },
};

const PERIOD_LABELS: Record<Period, { label: string; months: number }> = {
  '1month': { label: '1 месяц', months: 1 },
  '3months': { label: '3 месяца', months: 3 },
  '6months': { label: '6 месяцев', months: 6 },
  '1year': { label: '1 год', months: 12 },
};

export default function PlansNew() {
  const router = useRouter();
  const [step, setStep] = useState<Step>('plan');
  const [selectedPlan, setSelectedPlan] = useState<PlanType | null>(null);
  const [selectedPeriod, setSelectedPeriod] = useState<Period>('1month');
  const [selectedLocations, setSelectedLocations] = useState<number[]>([]);
  const [availableLocations, setAvailableLocations] = useState<Location[]>([]);
  const [isLoadingLocations, setIsLoadingLocations] = useState(false);
  const [isCreatingUser, setIsCreatingUser] = useState(false);

  // Загрузить локации при переходе к шагу выбора
  useEffect(() => {
    if (step === 'locations' && availableLocations.length === 0) {
      loadLocations();
    }
  }, [step]);

  async function loadLocations() {
    setIsLoadingLocations(true);
    try {
      const response = await fetch('/api/nodes');
      const data = await response.json();
      
      if (data.success) {
        setAvailableLocations(data.locations || []);
      } else {
        console.error('Failed to load locations:', data.error);
      }
    } catch (error) {
      console.error('Error loading locations:', error);
    } finally {
      setIsLoadingLocations(false);
    }
  }

  function handlePlanSelect(plan: PlanType) {
    setSelectedPlan(plan);
    
    // Trial период - сразу создаем без выбора периода и локаций
    if (plan === 'trial') {
      createUser(plan, '1month', []);
    } else {
      setStep('period');
    }
  }

  function handlePeriodSelect(period: Period) {
    setSelectedPeriod(period);
    
    // Только для PLUS показываем выбор локаций
    // Для остальных тарифов - все локации автоматически
    if (selectedPlan === 'plus') {
      setStep('locations');
    } else {
      // Start и Max - создаем сразу со всеми локациями
      createUser(selectedPlan!, period, []);
    }
  }

  function handleLocationToggle(locationId: number) {
    if (!selectedPlan) return;
    
    const maxLocations = PLANS[selectedPlan].maxLocations;
    
    if (selectedLocations.includes(locationId)) {
      setSelectedLocations(selectedLocations.filter(id => id !== locationId));
    } else if (maxLocations === 999 || selectedLocations.length < maxLocations) {
      setSelectedLocations([...selectedLocations, locationId]);
    }
  }

  async function createUser(planType: PlanType, period: Period, locationIds: number[]) {
    setStep('processing');
    setIsCreatingUser(true);

    try {
      const telegramWebApp = (window as any).Telegram?.WebApp;
      const user = telegramWebApp?.initDataUnsafe?.user;
      
      console.log('🔍 TELEGRAM USER DATA:', {
        hasWebApp: !!telegramWebApp,
        hasInitData: !!telegramWebApp?.initDataUnsafe,
        hasUser: !!user,
        user: user ? {
          id: user.id,
          username: user.username,
          first_name: user.first_name,
          last_name: user.last_name,
        } : null
      });
      
      const requestBody = {
        planType,
        period,
        locationIds,
        telegramId: user?.id || null,
        telegramUsername: user?.username || null,
        firstName: user?.first_name || null,
        lastName: user?.last_name || null,
      };
      
      console.log('📤 REQUEST BODY:', requestBody);
      
      const response = await fetch('/api/create-user', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(requestBody),
      });

      const data = await response.json();

      if (data.success) {
        // Успех - возвращаемся на главную с параметром обновления
        router.push('/?refresh=true');
      } else {
        throw new Error(data.error || 'Failed to create subscription');
      }
    } catch (error) {
      console.error('Create user error:', error);
      alert('Ошибка при создании подписки. Попробуйте позже.');
      setStep('plan');
    } finally {
      setIsCreatingUser(false);
    }
  }

  function handlePurchase() {
    if (!selectedPlan || selectedLocations.length === 0) {
      alert('Выберите хотя бы одну локацию');
      return;
    }
    
    createUser(selectedPlan, selectedPeriod, selectedLocations);
  }

  function calculateDiscount(period: Period): number {
    const discounts = {
      '1month': 0,
      '3months': 10,
      '6months': 15,
      '1year': 20,
    };
    return discounts[period];
  }

  function calculateSavings(plan: PlanType, period: Period): number {
    if (plan === 'trial') return 0;
    
    const config = PLANS[plan];
    const monthlyPrice = config.prices['1month'];
    const months = PERIOD_LABELS[period].months;
    const fullPrice = monthlyPrice * months;
    const discountedPrice = config.prices[period];
    return fullPrice - discountedPrice;
  }

  function goBack() {
    if (step === 'period') {
      setStep('plan');
    } else if (step === 'locations') {
      setStep('period');
    } else if (step === 'processing') {
      setStep('locations');
    }
  }

  const canProceedFromLocations = 
    selectedPlan && 
    (PLANS[selectedPlan].maxLocations === 999 || selectedLocations.length >= PLANS[selectedPlan].maxLocations);

  return (
    <div
      className="min-h-screen"
      style={{ background: 'var(--bg-app)', color: 'var(--text-primary)' }}
    >
      {/* Header */}
      <header
        className="flex items-center gap-3 p-4 border-b sticky top-0 z-10 backdrop-blur-sm"
        style={{ borderColor: 'var(--border)', background: 'var(--bg-card)' }}
      >
        {step === 'plan' ? (
          <button onClick={() => router.push('/')} className="p-2 hover:bg-slate-700 rounded-lg transition-colors">
            <ArrowLeft className="w-6 h-6" />
          </button>
        ) : step !== 'processing' && (
          <button onClick={goBack} className="p-2 hover:bg-slate-700 rounded-lg transition-colors">
            <ArrowLeft className="w-6 h-6" />
          </button>
        )}
        <h1 className="text-xl font-bold" style={{ color: 'var(--text-white)' }}>
          {step === 'plan' && 'Выбор тарифа'}
          {step === 'period' && `Период подписки${selectedPlan ? ` · ${PLANS[selectedPlan].name}` : ''}`}
          {step === 'locations' && 'Выбор локаций'}
          {step === 'processing' && 'Создание подписки...'}
        </h1>
      </header>

      <main className="p-4 pb-24">
        {/* Шаг 1: Выбор тарифа */}
        {step === 'plan' && (
          <div className="space-y-3">
            {/* Trial - полная ширина */}
            <PlanCard
              {...PLANS.trial}
              title="7 дней бесплатно"
              price="0₽"
              features={['Все тарифы доступны', 'Безлимитный трафик', 'Любые локации']}
              buttonText="Попробовать"
              isPrimary
              onSelect={() => handlePlanSelect('trial')}
            />

            {/* Grid 2x2 для остальных */}
            <div className="grid grid-cols-2 gap-3">
              {(['start', 'plus', 'max'] as PlanType[]).map((planKey) => {
                const plan = PLANS[planKey];
                return (
                  <PlanCard
                    key={planKey}
                    {...plan}
                    title={plan.name}
                    price={`${plan.prices['1month']}₽/мес`}
                    features={[
                      plan.maxLocations === 999 ? 'Все локации' : `${plan.maxLocations} локаций`,
                      plan.dataLimit,
                      'Безлимитная скорость',
                    ]}
                    buttonText="Выбрать"
                    isPopular={planKey === 'max'}
                    onSelect={() => handlePlanSelect(planKey)}
                  />
                );
              })}

              {/* Empty slot */}
              <div
                className="p-4 rounded-xl border flex items-center justify-center"
                style={{
                  background: 'var(--bg-card)',
                  borderColor: 'var(--border)',
                  borderStyle: 'dashed',
                }}
              >
                <div className="text-center opacity-50">
                  <div className="text-2xl mb-1">💰</div>
                  <div className="text-xs">Скоро новые</div>
                  <div className="text-xs">тарифы</div>
                </div>
              </div>
            </div>
          </div>
        )}

        {/* Шаг 2: Выбор периода */}
        {step === 'period' && selectedPlan && (
          <div>
            {/* Информация о тарифе */}
            <div className="mb-4 p-3 rounded-lg" style={{ background: 'var(--bg-card)' }}>
              <div className="flex items-center justify-between">
                <div>
                  <div className="text-sm text-slate-400">Выбран тариф</div>
                  <div className="text-lg font-bold">{PLANS[selectedPlan].name}</div>
                </div>
                <div className="text-right">
                  <div className="text-xs text-slate-400">Локации</div>
                  <div className="text-lg font-bold">
                    {selectedPlan === 'plus' ? '3 на выбор' : 'Все'}
                  </div>
                </div>
                <div className="text-right">
                  <div className="text-xs text-slate-400">Трафик</div>
                  <div className="text-lg font-bold">{PLANS[selectedPlan].dataLimit}</div>
                </div>
              </div>
            </div>

            {/* Grid 2x2 для периодов */}
            <div className="grid grid-cols-2 gap-3">
              {Object.entries(PERIOD_LABELS).map(([periodKey, { label, months }]) => {
                const period = periodKey as Period;
                const price = PLANS[selectedPlan].prices[period];
                const discount = calculateDiscount(period);
                const savings = calculateSavings(selectedPlan, period);
                const isRecommended = period === '6months'; // Самый выгодный

                return (
                  <button
                    key={period}
                    onClick={() => handlePeriodSelect(period)}
                    className="p-4 rounded-xl border-2 text-center transition-all active:scale-95 relative hover:opacity-90"
                    style={{
                      background: isRecommended ? 'linear-gradient(135deg, rgba(47, 190, 165, 0.15) 0%, rgba(68, 163, 52, 0.15) 100%)' : 'var(--bg-card)',
                      borderColor: selectedPeriod === period ? 'var(--primary)' : 'var(--border)',
                    }}
                  >
                    {/* Badge "выгодно" */}
                    {isRecommended && (
                      <div className="absolute -top-2 left-1/2 -translate-x-1/2 px-2 py-0.5 bg-green-500 text-white text-xs rounded-full">
                        выгодно
                      </div>
                    )}

                    {/* Период */}
                    <div className="text-base font-semibold mb-1">{label}</div>
                    
                    {/* Старая цена */}
                    {discount > 0 && (
                      <div className="text-xs text-slate-500 line-through mb-1">
                        {PLANS[selectedPlan].prices['1month'] * months} ₽
                      </div>
                    )}

                    {/* Новая цена */}
                    <div className="text-2xl font-bold mb-1">{price} ₽</div>

                    {/* Скидка */}
                    {discount > 0 && (
                      <div className="text-xs px-2 py-1 bg-green-500/20 text-green-400 rounded inline-block">
                        -{discount}%
                      </div>
                    )}

                    {/* Цена за месяц */}
                    {months > 1 && (
                      <div className="text-xs text-slate-400 mt-2">
                        {Math.round(price / months)} ₽/мес
                      </div>
                    )}
                  </button>
                );
              })}
            </div>
          </div>
        )}

        {/* Шаг 3: Выбор локаций */}
        {step === 'locations' && selectedPlan && (
          <div className="space-y-4">
            <div className="text-sm text-slate-400">
              {PLANS[selectedPlan].maxLocations === 999
                ? 'Доступны все локации'
                : `Выберите до ${PLANS[selectedPlan].maxLocations} локаций`}
            </div>

            {isLoadingLocations ? (
              <div className="text-center py-8">
                <Loader2 className="w-8 h-8 animate-spin mx-auto text-blue-500" />
                <p className="mt-2 text-slate-400">Загрузка локаций...</p>
              </div>
            ) : (
              <div className="space-y-2">
                {availableLocations.map((location) => {
                  const isSelected = selectedLocations.includes(location.id);
                  const isDisabled =
                    !isSelected &&
                    PLANS[selectedPlan].maxLocations !== 999 &&
                    selectedLocations.length >= PLANS[selectedPlan].maxLocations;

                  return (
                    <button
                      key={location.id}
                      onClick={() => handleLocationToggle(location.id)}
                      disabled={isDisabled}
                      className={`w-full p-4 rounded-xl border transition-colors ${
                        isSelected
                          ? 'bg-blue-600/20 border-blue-500'
                          : isDisabled
                          ? 'opacity-50 cursor-not-allowed'
                          : 'hover:border-slate-600'
                      }`}
                      style={{
                        background: isSelected ? undefined : 'var(--bg-card)',
                        borderColor: isSelected ? undefined : 'var(--border)',
                      }}
                    >
                      <div className="flex justify-between items-center">
                        <div className="flex items-center gap-3">
                          {isSelected && <Check className="w-5 h-5 text-blue-400" />}
                          <span className="text-lg">{location.flag}</span>
                          <span className="font-medium">{location.name}</span>
                        </div>
                        <span className="text-sm text-slate-400">{location.ping}</span>
                      </div>
                    </button>
                  );
                })}
              </div>
            )}

            {selectedLocations.length > 0 && (
              <button
                onClick={handlePurchase}
                className="w-full py-4 rounded-xl font-bold mt-6 flex items-center justify-center gap-2 transition-opacity hover:opacity-80"
                style={{ background: 'var(--primary)', color: 'var(--text-white)' }}
              >
                Создать подписку {PLANS[selectedPlan].prices[selectedPeriod]}₽
                <ChevronRight className="w-5 h-5" />
              </button>
            )}
          </div>
        )}

        {/* Шаг 4: Processing */}
        {step === 'processing' && (
          <div className="text-center py-12">
            <Loader2 className="w-16 h-16 animate-spin mx-auto mb-4" style={{ color: 'var(--primary)' }} />
            <h2 className="text-xl font-bold mb-2">Создаем вашу подписку...</h2>
            <p className="text-slate-400">Это займет несколько секунд</p>
          </div>
        )}

        {/* Spacer для нижней навигации */}
        <div className="h-20" />
      </main>
    </div>
  );
}

// PlanCard Component
function PlanCard({
  badge,
  title,
  price,
  features,
  buttonText,
  isPrimary = false,
  isPopular = false,
  onSelect,
}: {
  badge: string;
  title: string;
  price: string;
  features: string[];
  buttonText: string;
  isPrimary?: boolean;
  isPopular?: boolean;
  onSelect: () => void;
}) {
  return (
    <div
      className={`p-4 rounded-xl border relative`}
      style={{
        background: 'var(--bg-card)',
        borderColor: isPopular ? 'var(--primary)' : 'var(--border)',
      }}
    >
      {isPopular && (
        <div className="absolute -top-2 left-1/2 -translate-x-1/2 px-3 py-1 rounded-full text-xs font-bold" style={{ background: 'var(--primary)', color: 'var(--text-white)' }}>
          Популярный
        </div>
      )}
      <div className="text-sm opacity-80 mb-1">{badge}</div>
      <h3 className="text-xl font-bold mb-1">{title}</h3>
      <p className="text-2xl font-bold mb-3" style={{ color: 'var(--primary)' }}>
        {price}
      </p>
      <ul className="space-y-2 mb-4">
        {features.map((feature, index) => (
          <li key={index} className="flex items-center gap-2 text-sm">
            <Check className="w-4 h-4 text-green-500 flex-shrink-0" />
            <span>{feature}</span>
          </li>
        ))}
      </ul>
      <button
        onClick={onSelect}
        className="w-full py-2 rounded-lg font-medium transition-opacity hover:opacity-80"
        style={{
          background: isPrimary ? 'var(--primary)' : 'var(--bg-elevated)',
          color: 'var(--text-white)'
        }}
      >
        {buttonText}
      </button>
    </div>
  );
}